fix: handle edits when creating face

.github/workflows/test.yml

@@ -591,9 +591,9 @@ jobs:
       - name: Lint with ruff
         run: |
           uv run ruff check --output-format=github immich_ml
-      - name: Format with ruff
+      - name: Check black formatting
         run: |
-          uv run ruff format --check immich_ml
+          uv run black --check immich_ml
       - name: Run mypy type checking
         run: |
           uv run mypy --strict immich_ml/

docs/docs/administration/postgres-standalone.md

@@ -88,7 +88,7 @@ The easiest option is to have both extensions installed during the migration:
 <details>
 <summary>Migration steps (automatic)</summary>
 1. Ensure you still have pgvecto.rs installed
-2. Install `pgvector` (`>= 0.7, < 0.9`). The easiest way to do this is on Debian/Ubuntu by adding the [PostgreSQL Apt repository][pg-apt] and then running `apt install postgresql-NN-pgvector`, where `NN` is your Postgres version (e.g., `16`)
+2. Install `pgvector` (`>= 0.7.0, < 1.0.0`). The easiest way to do this is on Debian/Ubuntu by adding the [PostgreSQL Apt repository][pg-apt] and then running `apt install postgresql-NN-pgvector`, where `NN` is your Postgres version (e.g., `16`)
 3. [Install VectorChord][vchord-install]
 4. Add `shared_preload_libraries= 'vchord.so, vectors.so'` to your `postgresql.conf`, making sure to include _both_ `vchord.so` and `vectors.so`. You may include other libraries here as well if needed
 5. Restart the Postgres database

e2e/src/generators/memory.ts

@@ -1,2 +0,0 @@
-export { generateMemoriesFromTimeline, generateMemory } from './memory/model-objects';
-export type { MemoryConfig, MemoryYearConfig } from './memory/model-objects';

e2e/src/generators/memory/model-objects.ts

@@ -1,84 +0,0 @@
-import { faker } from '@faker-js/faker';
-import { MemoryType, type MemoryResponseDto, type OnThisDayDto } from '@immich/sdk';
-import { DateTime } from 'luxon';
-import { toAssetResponseDto } from 'src/generators/timeline/rest-response';
-import type { MockTimelineAsset } from 'src/generators/timeline/timeline-config';
-import { SeededRandom, selectRandomMultiple } from 'src/generators/timeline/utils';
-
-export type MemoryConfig = {
-  id?: string;
-  ownerId: string;
-  year: number;
-  memoryAt: string;
-  isSaved?: boolean;
-};
-
-export type MemoryYearConfig = {
-  year: number;
-  assetCount: number;
-};
-
-export function generateMemory(config: MemoryConfig, assets: MockTimelineAsset[]): MemoryResponseDto {
-  const now = new Date().toISOString();
-  const memoryId = config.id ?? faker.string.uuid();
-
-  return {
-    id: memoryId,
-    assets: assets.map((asset) => toAssetResponseDto(asset)),
-    data: { year: config.year } as OnThisDayDto,
-    memoryAt: config.memoryAt,
-    createdAt: now,
-    updatedAt: now,
-    isSaved: config.isSaved ?? false,
-    ownerId: config.ownerId,
-    type: MemoryType.OnThisDay,
-  };
-}
-
-export function generateMemoriesFromTimeline(
-  timelineAssets: MockTimelineAsset[],
-  ownerId: string,
-  memoryConfigs: MemoryYearConfig[],
-  seed: number = 42,
-): MemoryResponseDto[] {
-  const rng = new SeededRandom(seed);
-  const memories: MemoryResponseDto[] = [];
-  const usedAssetIds = new Set<string>();
-
-  for (const config of memoryConfigs) {
-    const yearAssets = timelineAssets.filter((asset) => {
-      const assetYear = DateTime.fromISO(asset.fileCreatedAt).year;
-      return assetYear === config.year && !usedAssetIds.has(asset.id);
-    });
-
-    if (yearAssets.length === 0) {
-      continue;
-    }
-
-    const countToSelect = Math.min(config.assetCount, yearAssets.length);
-    const selectedAssets = selectRandomMultiple(yearAssets, countToSelect, rng);
-
-    for (const asset of selectedAssets) {
-      usedAssetIds.add(asset.id);
-    }
-
-    selectedAssets.sort(
-      (a, b) => DateTime.fromISO(b.fileCreatedAt).diff(DateTime.fromISO(a.fileCreatedAt)).milliseconds,
-    );
-
-    const memoryAt = DateTime.now().set({ year: config.year }).toISO()!;
-
-    memories.push(
-      generateMemory(
-        {
-          ownerId,
-          year: config.year,
-          memoryAt,
-        },
-        selectedAssets,
-      ),
-    );
-  }
-
-  return memories;
-}

e2e/src/mock-network/memory-network.ts

@@ -1,65 +0,0 @@
-import type { MemoryResponseDto } from '@immich/sdk';
-import { BrowserContext } from '@playwright/test';
-
-export type MemoryChanges = {
-  memoryDeletions: string[];
-  assetRemovals: Map<string, string[]>;
-};
-
-export const setupMemoryMockApiRoutes = async (
-  context: BrowserContext,
-  memories: MemoryResponseDto[],
-  changes: MemoryChanges,
-) => {
-  await context.route('**/api/memories*', async (route, request) => {
-    const url = new URL(request.url());
-    const pathname = url.pathname;
-
-    if (pathname === '/api/memories' && request.method() === 'GET') {
-      const activeMemories = memories
-        .filter((memory) => !changes.memoryDeletions.includes(memory.id))
-        .map((memory) => {
-          const removedAssets = changes.assetRemovals.get(memory.id) ?? [];
-          return {
-            ...memory,
-            assets: memory.assets.filter((asset) => !removedAssets.includes(asset.id)),
-          };
-        })
-        .filter((memory) => memory.assets.length > 0);
-
-      return route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        json: activeMemories,
-      });
-    }
-
-    const memoryMatch = pathname.match(/\/api\/memories\/([^/]+)$/);
-    if (memoryMatch && request.method() === 'GET') {
-      const memoryId = memoryMatch[1];
-      const memory = memories.find((m) => m.id === memoryId);
-
-      if (!memory || changes.memoryDeletions.includes(memoryId)) {
-        return route.fulfill({ status: 404 });
-      }
-
-      const removedAssets = changes.assetRemovals.get(memoryId) ?? [];
-      return route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        json: {
-          ...memory,
-          assets: memory.assets.filter((asset) => !removedAssets.includes(asset.id)),
-        },
-      });
-    }
-
-    if (/\/api\/memories\/([^/]+)$/.test(pathname) && request.method() === 'DELETE') {
-      const memoryId = pathname.split('/').pop()!;
-      changes.memoryDeletions.push(memoryId);
-      return route.fulfill({ status: 204 });
-    }
-
-    await route.fallback();
-  });
-};

e2e/src/web/specs/memory/memory-viewer.ui-spec.ts

@@ -1,289 +0,0 @@
-import { faker } from '@faker-js/faker';
-import type { MemoryResponseDto } from '@immich/sdk';
-import { test } from '@playwright/test';
-import { generateMemoriesFromTimeline } from 'src/generators/memory';
-import {
-  Changes,
-  createDefaultTimelineConfig,
-  generateTimelineData,
-  TimelineAssetConfig,
-  TimelineData,
-} from 'src/generators/timeline';
-import { setupBaseMockApiRoutes } from 'src/mock-network/base-network';
-import { MemoryChanges, setupMemoryMockApiRoutes } from 'src/mock-network/memory-network';
-import { setupTimelineMockApiRoutes, TimelineTestContext } from 'src/mock-network/timeline-network';
-import { memoryAssetViewerUtils, memoryGalleryUtils, memoryViewerUtils } from 'src/web/specs/memory/utils';
-
-test.describe.configure({ mode: 'parallel' });
-
-test.describe('Memory Viewer - Gallery Asset Viewer Navigation', () => {
-  let adminUserId: string;
-  let timelineRestData: TimelineData;
-  let memories: MemoryResponseDto[];
-  const assets: TimelineAssetConfig[] = [];
-  const testContext = new TimelineTestContext();
-  const changes: Changes = {
-    albumAdditions: [],
-    assetDeletions: [],
-    assetArchivals: [],
-    assetFavorites: [],
-  };
-  const memoryChanges: MemoryChanges = {
-    memoryDeletions: [],
-    assetRemovals: new Map(),
-  };
-
-  test.beforeAll(async () => {
-    adminUserId = faker.string.uuid();
-    testContext.adminId = adminUserId;
-
-    timelineRestData = generateTimelineData({
-      ...createDefaultTimelineConfig(),
-      ownerId: adminUserId,
-    });
-
-    for (const timeBucket of timelineRestData.buckets.values()) {
-      assets.push(...timeBucket);
-    }
-
-    memories = generateMemoriesFromTimeline(
-      assets,
-      adminUserId,
-      [
-        { year: 2024, assetCount: 3 },
-        { year: 2023, assetCount: 2 },
-        { year: 2022, assetCount: 4 },
-      ],
-      42,
-    );
-  });
-
-  test.beforeEach(async ({ context }) => {
-    await setupBaseMockApiRoutes(context, adminUserId);
-    await setupTimelineMockApiRoutes(context, timelineRestData, changes, testContext);
-    await setupMemoryMockApiRoutes(context, memories, memoryChanges);
-  });
-
-  test.afterEach(() => {
-    testContext.slowBucket = false;
-    changes.albumAdditions = [];
-    changes.assetDeletions = [];
-    changes.assetArchivals = [];
-    changes.assetFavorites = [];
-    memoryChanges.memoryDeletions = [];
-    memoryChanges.assetRemovals.clear();
-  });
-
-  test.describe('Asset viewer navigation from gallery', () => {
-    test('shows both prev/next buttons for middle asset within a memory', async ({ page }) => {
-      const firstMemory = memories[0];
-      const middleAsset = firstMemory.assets[1];
-
-      await memoryViewerUtils.openMemoryPageWithAsset(page, middleAsset.id);
-      await memoryGalleryUtils.clickThumbnail(page, middleAsset.id);
-
-      await memoryAssetViewerUtils.waitForViewerOpen(page);
-      await memoryAssetViewerUtils.waitForAssetLoad(page, middleAsset);
-
-      await memoryAssetViewerUtils.expectPreviousButtonVisible(page);
-      await memoryAssetViewerUtils.expectNextButtonVisible(page);
-    });
-
-    test('shows next button when at last asset of first memory (next memory exists)', async ({ page }) => {
-      const firstMemory = memories[0];
-      const lastAssetOfFirstMemory = firstMemory.assets.at(-1)!;
-
-      await memoryViewerUtils.openMemoryPageWithAsset(page, lastAssetOfFirstMemory.id);
-      await memoryGalleryUtils.clickThumbnail(page, lastAssetOfFirstMemory.id);
-
-      await memoryAssetViewerUtils.waitForViewerOpen(page);
-      await memoryAssetViewerUtils.waitForAssetLoad(page, lastAssetOfFirstMemory);
-
-      await memoryAssetViewerUtils.expectNextButtonVisible(page);
-      await memoryAssetViewerUtils.expectPreviousButtonVisible(page);
-    });
-
-    test('shows prev button when at first asset of last memory (prev memory exists)', async ({ page }) => {
-      const lastMemory = memories.at(-1)!;
-      const firstAssetOfLastMemory = lastMemory.assets[0];
-
-      await memoryViewerUtils.openMemoryPageWithAsset(page, firstAssetOfLastMemory.id);
-      await memoryGalleryUtils.clickThumbnail(page, firstAssetOfLastMemory.id);
-
-      await memoryAssetViewerUtils.waitForViewerOpen(page);
-      await memoryAssetViewerUtils.waitForAssetLoad(page, firstAssetOfLastMemory);
-
-      await memoryAssetViewerUtils.expectPreviousButtonVisible(page);
-      await memoryAssetViewerUtils.expectNextButtonVisible(page);
-    });
-
-    test('can navigate from last asset of memory to first asset of next memory', async ({ page }) => {
-      const firstMemory = memories[0];
-      const secondMemory = memories[1];
-      const lastAssetOfFirst = firstMemory.assets.at(-1)!;
-      const firstAssetOfSecond = secondMemory.assets[0];
-
-      await memoryViewerUtils.openMemoryPageWithAsset(page, lastAssetOfFirst.id);
-      await memoryGalleryUtils.clickThumbnail(page, lastAssetOfFirst.id);
-
-      await memoryAssetViewerUtils.waitForViewerOpen(page);
-      await memoryAssetViewerUtils.waitForAssetLoad(page, lastAssetOfFirst);
-
-      await memoryAssetViewerUtils.clickNextButton(page);
-      await memoryAssetViewerUtils.waitForAssetLoad(page, firstAssetOfSecond);
-
-      await memoryAssetViewerUtils.expectCurrentAssetId(page, firstAssetOfSecond.id);
-    });
-
-    test('can navigate from first asset of memory to last asset of previous memory', async ({ page }) => {
-      const firstMemory = memories[0];
-      const secondMemory = memories[1];
-      const lastAssetOfFirst = firstMemory.assets.at(-1)!;
-      const firstAssetOfSecond = secondMemory.assets[0];
-
-      await memoryViewerUtils.openMemoryPageWithAsset(page, firstAssetOfSecond.id);
-      await memoryGalleryUtils.clickThumbnail(page, firstAssetOfSecond.id);
-
-      await memoryAssetViewerUtils.waitForViewerOpen(page);
-      await memoryAssetViewerUtils.waitForAssetLoad(page, firstAssetOfSecond);
-
-      await memoryAssetViewerUtils.clickPreviousButton(page);
-      await memoryAssetViewerUtils.waitForAssetLoad(page, lastAssetOfFirst);
-    });
-
-    test('hides prev button at very first asset (first memory, first asset, no prev memory)', async ({ page }) => {
-      const firstMemory = memories[0];
-      const veryFirstAsset = firstMemory.assets[0];
-
-      await memoryViewerUtils.openMemoryPageWithAsset(page, veryFirstAsset.id);
-      await memoryGalleryUtils.clickThumbnail(page, veryFirstAsset.id);
-
-      await memoryAssetViewerUtils.waitForViewerOpen(page);
-      await memoryAssetViewerUtils.waitForAssetLoad(page, veryFirstAsset);
-
-      await memoryAssetViewerUtils.expectPreviousButtonNotVisible(page);
-      await memoryAssetViewerUtils.expectNextButtonVisible(page);
-    });
-
-    test('hides next button at very last asset (last memory, last asset, no next memory)', async ({ page }) => {
-      const lastMemory = memories.at(-1)!;
-      const veryLastAsset = lastMemory.assets.at(-1)!;
-
-      await memoryViewerUtils.openMemoryPageWithAsset(page, veryLastAsset.id);
-      await memoryGalleryUtils.clickThumbnail(page, veryLastAsset.id);
-
-      await memoryAssetViewerUtils.waitForViewerOpen(page);
-      await memoryAssetViewerUtils.waitForAssetLoad(page, veryLastAsset);
-
-      await memoryAssetViewerUtils.expectNextButtonNotVisible(page);
-      await memoryAssetViewerUtils.expectPreviousButtonVisible(page);
-    });
-  });
-
-  test.describe('Keyboard navigation', () => {
-    test('ArrowLeft navigates to previous asset across memory boundary', async ({ page }) => {
-      const firstMemory = memories[0];
-      const secondMemory = memories[1];
-      const lastAssetOfFirst = firstMemory.assets.at(-1)!;
-      const firstAssetOfSecond = secondMemory.assets[0];
-
-      await memoryViewerUtils.openMemoryPageWithAsset(page, firstAssetOfSecond.id);
-      await memoryGalleryUtils.clickThumbnail(page, firstAssetOfSecond.id);
-
-      await memoryAssetViewerUtils.waitForViewerOpen(page);
-      await memoryAssetViewerUtils.waitForAssetLoad(page, firstAssetOfSecond);
-
-      await page.keyboard.press('ArrowLeft');
-      await memoryAssetViewerUtils.waitForAssetLoad(page, lastAssetOfFirst);
-    });
-
-    test('ArrowRight navigates to next asset across memory boundary', async ({ page }) => {
-      const firstMemory = memories[0];
-      const secondMemory = memories[1];
-      const lastAssetOfFirst = firstMemory.assets.at(-1)!;
-      const firstAssetOfSecond = secondMemory.assets[0];
-
-      await memoryViewerUtils.openMemoryPageWithAsset(page, lastAssetOfFirst.id);
-      await memoryGalleryUtils.clickThumbnail(page, lastAssetOfFirst.id);
-
-      await memoryAssetViewerUtils.waitForViewerOpen(page);
-      await memoryAssetViewerUtils.waitForAssetLoad(page, lastAssetOfFirst);
-
-      await page.keyboard.press('ArrowRight');
-      await memoryAssetViewerUtils.waitForAssetLoad(page, firstAssetOfSecond);
-    });
-  });
-});
-
-test.describe('Memory Viewer - Single Asset Memory Edge Cases', () => {
-  let adminUserId: string;
-  let timelineRestData: TimelineData;
-  let memories: MemoryResponseDto[];
-  const assets: TimelineAssetConfig[] = [];
-  const testContext = new TimelineTestContext();
-  const changes: Changes = {
-    albumAdditions: [],
-    assetDeletions: [],
-    assetArchivals: [],
-    assetFavorites: [],
-  };
-  const memoryChanges: MemoryChanges = {
-    memoryDeletions: [],
-    assetRemovals: new Map(),
-  };
-
-  test.beforeAll(async () => {
-    adminUserId = faker.string.uuid();
-    testContext.adminId = adminUserId;
-
-    timelineRestData = generateTimelineData({
-      ...createDefaultTimelineConfig(),
-      ownerId: adminUserId,
-    });
-
-    for (const timeBucket of timelineRestData.buckets.values()) {
-      assets.push(...timeBucket);
-    }
-
-    memories = generateMemoriesFromTimeline(
-      assets,
-      adminUserId,
-      [
-        { year: 2024, assetCount: 2 },
-        { year: 2023, assetCount: 1 },
-        { year: 2022, assetCount: 2 },
-      ],
-      123,
-    );
-  });
-
-  test.beforeEach(async ({ context }) => {
-    await setupBaseMockApiRoutes(context, adminUserId);
-    await setupTimelineMockApiRoutes(context, timelineRestData, changes, testContext);
-    await setupMemoryMockApiRoutes(context, memories, memoryChanges);
-  });
-
-  test.afterEach(() => {
-    testContext.slowBucket = false;
-    changes.albumAdditions = [];
-    changes.assetDeletions = [];
-    changes.assetArchivals = [];
-    changes.assetFavorites = [];
-    memoryChanges.memoryDeletions = [];
-    memoryChanges.assetRemovals.clear();
-  });
-
-  test('single asset memory shows both prev/next when surrounded by other memories', async ({ page }) => {
-    const singleAssetMemory = memories[1];
-    const singleAsset = singleAssetMemory.assets[0];
-
-    await memoryViewerUtils.openMemoryPageWithAsset(page, singleAsset.id);
-    await memoryGalleryUtils.clickThumbnail(page, singleAsset.id);
-
-    await memoryAssetViewerUtils.waitForViewerOpen(page);
-    await memoryAssetViewerUtils.waitForAssetLoad(page, singleAsset);
-
-    await memoryAssetViewerUtils.expectPreviousButtonVisible(page);
-    await memoryAssetViewerUtils.expectNextButtonVisible(page);
-  });
-});

e2e/src/web/specs/memory/utils.ts

@@ -1,123 +0,0 @@
-import type { AssetResponseDto } from '@immich/sdk';
-import { expect, Page } from '@playwright/test';
-
-function getAssetIdFromUrl(url: URL): string | null {
-  const pathMatch = url.pathname.match(/\/memory\/photos\/([^/]+)/);
-  if (pathMatch) {
-    return pathMatch[1];
-  }
-  return url.searchParams.get('id');
-}
-
-export const memoryViewerUtils = {
-  locator(page: Page) {
-    return page.locator('#memory-viewer');
-  },
-
-  async waitForMemoryLoad(page: Page) {
-    await expect(this.locator(page)).toBeVisible();
-    await expect(page.locator('#memory-viewer img').first()).toBeVisible();
-  },
-
-  async openMemoryPage(page: Page) {
-    await page.goto('/memory');
-    await this.waitForMemoryLoad(page);
-  },
-
-  async openMemoryPageWithAsset(page: Page, assetId: string) {
-    await page.goto(`/memory?id=${assetId}`);
-    await this.waitForMemoryLoad(page);
-  },
-};
-
-export const memoryGalleryUtils = {
-  locator(page: Page) {
-    return page.locator('#gallery-memory');
-  },
-
-  thumbnailWithAssetId(page: Page, assetId: string) {
-    return page.locator(`#gallery-memory [data-thumbnail-focus-container][data-asset="${assetId}"]`);
-  },
-
-  async scrollToGallery(page: Page) {
-    const showGalleryButton = page.getByLabel('Show gallery');
-    if (await showGalleryButton.isVisible()) {
-      await showGalleryButton.click();
-    }
-    await expect(this.locator(page)).toBeInViewport();
-  },
-
-  async clickThumbnail(page: Page, assetId: string) {
-    await this.scrollToGallery(page);
-    await this.thumbnailWithAssetId(page, assetId).click();
-  },
-
-  async getAllThumbnails(page: Page) {
-    await this.scrollToGallery(page);
-    return page.locator('#gallery-memory [data-thumbnail-focus-container]');
-  },
-};
-
-export const memoryAssetViewerUtils = {
-  locator(page: Page) {
-    return page.locator('#immich-asset-viewer');
-  },
-
-  async waitForViewerOpen(page: Page) {
-    await expect(this.locator(page)).toBeVisible();
-  },
-
-  async waitForAssetLoad(page: Page, asset: AssetResponseDto) {
-    const viewer = this.locator(page);
-    const imgLocator = viewer.locator(`img[draggable="false"][src*="/api/assets/${asset.id}/thumbnail?size=preview"]`);
-    const videoLocator = viewer.locator(`video[poster*="/api/assets/${asset.id}/thumbnail?size=preview"]`);
-
-    await imgLocator.or(videoLocator).waitFor({ timeout: 10_000 });
-  },
-
-  nextButton(page: Page) {
-    return page.getByLabel('View next asset');
-  },
-
-  previousButton(page: Page) {
-    return page.getByLabel('View previous asset');
-  },
-
-  async expectNextButtonVisible(page: Page) {
-    await expect(this.nextButton(page)).toBeVisible();
-  },
-
-  async expectNextButtonNotVisible(page: Page) {
-    await expect(this.nextButton(page)).toHaveCount(0);
-  },
-
-  async expectPreviousButtonVisible(page: Page) {
-    await expect(this.previousButton(page)).toBeVisible();
-  },
-
-  async expectPreviousButtonNotVisible(page: Page) {
-    await expect(this.previousButton(page)).toHaveCount(0);
-  },
-
-  async clickNextButton(page: Page) {
-    await this.nextButton(page).click();
-  },
-
-  async clickPreviousButton(page: Page) {
-    await this.previousButton(page).click();
-  },
-
-  async closeViewer(page: Page) {
-    await page.keyboard.press('Escape');
-    await expect(this.locator(page)).not.toBeVisible();
-  },
-
-  getCurrentAssetId(page: Page): string | null {
-    const url = new URL(page.url());
-    return getAssetIdFromUrl(url);
-  },
-
-  async expectCurrentAssetId(page: Page, expectedAssetId: string) {
-    await expect.poll(() => this.getCurrentAssetId(page)).toBe(expectedAssetId);
-  },
-};

machine-learning/pyproject.toml

@@ -41,6 +41,7 @@ types = [
     "types-ujson>=5.10.0.20240515",
 ]
 lint = [
+    "black>=23.3.0",
     "mypy>=1.3.0",
     "ruff>=0.0.272",
     { include-group = "types" },
@@ -92,5 +93,9 @@ target-version = "py311"
 select = ["E", "F", "I"]
 per-file-ignores = { "test_main.py" = ["F403"] }
 
+[tool.black]
+line-length = 120
+target-version = ['py311']
+
 [tool.pytest.ini_options]
 markers = ["providers", "ov_device_ids"]

machine-learning/uv.lock

@@ -85,6 +85,43 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/99/37/e8730c3587a65eb5645d4aba2d27aae48e8003614d6aaf15dda67f702f1f/bidict-0.23.1-py3-none-any.whl", hash = "sha256:5dae8d4d79b552a71cbabc7deb25dfe8ce710b17ff41711e13010ead2abfc3e5", size = 32764, upload-time = "2024-02-18T19:09:04.156Z" },
 ]
 
+[[package]]
+name = "black"
+version = "25.12.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "click" },
+    { name = "mypy-extensions" },
+    { name = "packaging" },
+    { name = "pathspec" },
+    { name = "platformdirs" },
+    { name = "pytokens" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/c4/d9/07b458a3f1c525ac392b5edc6b191ff140b596f9d77092429417a54e249d/black-25.12.0.tar.gz", hash = "sha256:8d3dd9cea14bff7ddc0eb243c811cdb1a011ebb4800a5f0335a01a68654796a7", size = 659264, upload-time = "2025-12-08T01:40:52.501Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/60/ad/7ac0d0e1e0612788dbc48e62aef8a8e8feffac7eb3d787db4e43b8462fa8/black-25.12.0-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:d0cfa263e85caea2cff57d8f917f9f51adae8e20b610e2b23de35b5b11ce691a", size = 1877003, upload-time = "2025-12-08T01:43:29.967Z" },
+    { url = "https://files.pythonhosted.org/packages/e8/dd/a237e9f565f3617a88b49284b59cbca2a4f56ebe68676c1aad0ce36a54a7/black-25.12.0-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:1a2f578ae20c19c50a382286ba78bfbeafdf788579b053d8e4980afb079ab9be", size = 1712639, upload-time = "2025-12-08T01:52:46.756Z" },
+    { url = "https://files.pythonhosted.org/packages/12/80/e187079df1ea4c12a0c63282ddd8b81d5107db6d642f7d7b75a6bcd6fc21/black-25.12.0-cp311-cp311-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:d3e1b65634b0e471d07ff86ec338819e2ef860689859ef4501ab7ac290431f9b", size = 1758143, upload-time = "2025-12-08T01:45:29.137Z" },
+    { url = "https://files.pythonhosted.org/packages/93/b5/3096ccee4f29dc2c3aac57274326c4d2d929a77e629f695f544e159bfae4/black-25.12.0-cp311-cp311-win_amd64.whl", hash = "sha256:a3fa71e3b8dd9f7c6ac4d818345237dfb4175ed3bf37cd5a581dbc4c034f1ec5", size = 1420698, upload-time = "2025-12-08T01:45:53.379Z" },
+    { url = "https://files.pythonhosted.org/packages/7e/39/f81c0ffbc25ffbe61c7d0385bf277e62ffc3e52f5ee668d7369d9854fadf/black-25.12.0-cp311-cp311-win_arm64.whl", hash = "sha256:51e267458f7e650afed8445dc7edb3187143003d52a1b710c7321aef22aa9655", size = 1229317, upload-time = "2025-12-08T01:46:35.606Z" },
+    { url = "https://files.pythonhosted.org/packages/d1/bd/26083f805115db17fda9877b3c7321d08c647df39d0df4c4ca8f8450593e/black-25.12.0-cp312-cp312-macosx_10_13_x86_64.whl", hash = "sha256:31f96b7c98c1ddaeb07dc0f56c652e25bdedaac76d5b68a059d998b57c55594a", size = 1924178, upload-time = "2025-12-08T01:49:51.048Z" },
+    { url = "https://files.pythonhosted.org/packages/89/6b/ea00d6651561e2bdd9231c4177f4f2ae19cc13a0b0574f47602a7519b6ca/black-25.12.0-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:05dd459a19e218078a1f98178c13f861fe6a9a5f88fc969ca4d9b49eb1809783", size = 1742643, upload-time = "2025-12-08T01:49:59.09Z" },
+    { url = "https://files.pythonhosted.org/packages/6d/f3/360fa4182e36e9875fabcf3a9717db9d27a8d11870f21cff97725c54f35b/black-25.12.0-cp312-cp312-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:c1f68c5eff61f226934be6b5b80296cf6939e5d2f0c2f7d543ea08b204bfaf59", size = 1800158, upload-time = "2025-12-08T01:44:27.301Z" },
+    { url = "https://files.pythonhosted.org/packages/f8/08/2c64830cb6616278067e040acca21d4f79727b23077633953081c9445d61/black-25.12.0-cp312-cp312-win_amd64.whl", hash = "sha256:274f940c147ddab4442d316b27f9e332ca586d39c85ecf59ebdea82cc9ee8892", size = 1426197, upload-time = "2025-12-08T01:45:51.198Z" },
+    { url = "https://files.pythonhosted.org/packages/d4/60/a93f55fd9b9816b7432cf6842f0e3000fdd5b7869492a04b9011a133ee37/black-25.12.0-cp312-cp312-win_arm64.whl", hash = "sha256:169506ba91ef21e2e0591563deda7f00030cb466e747c4b09cb0a9dae5db2f43", size = 1237266, upload-time = "2025-12-08T01:45:10.556Z" },
+    { url = "https://files.pythonhosted.org/packages/c8/52/c551e36bc95495d2aa1a37d50566267aa47608c81a53f91daa809e03293f/black-25.12.0-cp313-cp313-macosx_10_13_x86_64.whl", hash = "sha256:a05ddeb656534c3e27a05a29196c962877c83fa5503db89e68857d1161ad08a5", size = 1923809, upload-time = "2025-12-08T01:46:55.126Z" },
+    { url = "https://files.pythonhosted.org/packages/a0/f7/aac9b014140ee56d247e707af8db0aae2e9efc28d4a8aba92d0abd7ae9d1/black-25.12.0-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:9ec77439ef3e34896995503865a85732c94396edcc739f302c5673a2315e1e7f", size = 1742384, upload-time = "2025-12-08T01:49:37.022Z" },
+    { url = "https://files.pythonhosted.org/packages/74/98/38aaa018b2ab06a863974c12b14a6266badc192b20603a81b738c47e902e/black-25.12.0-cp313-cp313-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:0e509c858adf63aa61d908061b52e580c40eae0dfa72415fa47ac01b12e29baf", size = 1798761, upload-time = "2025-12-08T01:46:05.386Z" },
+    { url = "https://files.pythonhosted.org/packages/16/3a/a8ac542125f61574a3f015b521ca83b47321ed19bb63fe6d7560f348bfe1/black-25.12.0-cp313-cp313-win_amd64.whl", hash = "sha256:252678f07f5bac4ff0d0e9b261fbb029fa530cfa206d0a636a34ab445ef8ca9d", size = 1429180, upload-time = "2025-12-08T01:45:34.903Z" },
+    { url = "https://files.pythonhosted.org/packages/e6/2d/bdc466a3db9145e946762d52cd55b1385509d9f9004fec1c97bdc8debbfb/black-25.12.0-cp313-cp313-win_arm64.whl", hash = "sha256:bc5b1c09fe3c931ddd20ee548511c64ebf964ada7e6f0763d443947fd1c603ce", size = 1239350, upload-time = "2025-12-08T01:46:09.458Z" },
+    { url = "https://files.pythonhosted.org/packages/35/46/1d8f2542210c502e2ae1060b2e09e47af6a5e5963cb78e22ec1a11170b28/black-25.12.0-cp314-cp314-macosx_10_15_x86_64.whl", hash = "sha256:0a0953b134f9335c2434864a643c842c44fba562155c738a2a37a4d61f00cad5", size = 1917015, upload-time = "2025-12-08T01:53:27.987Z" },
+    { url = "https://files.pythonhosted.org/packages/41/37/68accadf977672beb8e2c64e080f568c74159c1aaa6414b4cd2aef2d7906/black-25.12.0-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:2355bbb6c3b76062870942d8cc450d4f8ac71f9c93c40122762c8784df49543f", size = 1741830, upload-time = "2025-12-08T01:54:36.861Z" },
+    { url = "https://files.pythonhosted.org/packages/ac/76/03608a9d8f0faad47a3af3a3c8c53af3367f6c0dd2d23a84710456c7ac56/black-25.12.0-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:9678bd991cc793e81d19aeeae57966ee02909877cb65838ccffef24c3ebac08f", size = 1791450, upload-time = "2025-12-08T01:44:52.581Z" },
+    { url = "https://files.pythonhosted.org/packages/06/99/b2a4bd7dfaea7964974f947e1c76d6886d65fe5d24f687df2d85406b2609/black-25.12.0-cp314-cp314-win_amd64.whl", hash = "sha256:97596189949a8aad13ad12fcbb4ae89330039b96ad6742e6f6b45e75ad5cfd83", size = 1452042, upload-time = "2025-12-08T01:46:13.188Z" },
+    { url = "https://files.pythonhosted.org/packages/b2/7c/d9825de75ae5dd7795d007681b752275ea85a1c5d83269b4b9c754c2aaab/black-25.12.0-cp314-cp314-win_arm64.whl", hash = "sha256:778285d9ea197f34704e3791ea9404cd6d07595745907dd2ce3da7a13627b29b", size = 1267446, upload-time = "2025-12-08T01:46:14.497Z" },
+    { url = "https://files.pythonhosted.org/packages/68/11/21331aed19145a952ad28fca2756a1433ee9308079bd03bd898e903a2e53/black-25.12.0-py3-none-any.whl", hash = "sha256:48ceb36c16dbc84062740049eef990bb2ce07598272e673c17d1a7720c71c828", size = 206191, upload-time = "2025-12-08T01:40:50.963Z" },
+]
+
 [[package]]
 name = "blinker"
 version = "1.7.0"
@@ -924,6 +961,7 @@ rknn = [
 
 [package.dev-dependencies]
 dev = [
+    { name = "black" },
     { name = "httpx" },
     { name = "locust" },
     { name = "mypy" },
@@ -939,6 +977,7 @@ dev = [
     { name = "types-ujson" },
 ]
 lint = [
+    { name = "black" },
     { name = "mypy" },
     { name = "ruff" },
     { name = "types-pyyaml" },
@@ -992,6 +1031,7 @@ provides-extras = ["cpu", "cuda", "openvino", "armnn", "rknn", "rocm"]
 
 [package.metadata.requires-dev]
 dev = [
+    { name = "black", specifier = ">=23.3.0" },
     { name = "httpx", specifier = ">=0.24.1" },
     { name = "locust", specifier = ">=2.15.1" },
     { name = "mypy", specifier = ">=1.3.0" },
@@ -1007,6 +1047,7 @@ dev = [
     { name = "types-ujson", specifier = ">=5.10.0.20240515" },
 ]
 lint = [
+    { name = "black", specifier = ">=23.3.0" },
     { name = "mypy", specifier = ">=1.3.0" },
     { name = "ruff", specifier = ">=0.0.272" },
     { name = "types-pyyaml", specifier = ">=6.0.12.20241230" },
@@ -2191,6 +2232,15 @@ client = [
     { name = "websocket-client" },
 ]
 
+[[package]]
+name = "pytokens"
+version = "0.3.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/4e/8d/a762be14dae1c3bf280202ba3172020b2b0b4c537f94427435f19c413b72/pytokens-0.3.0.tar.gz", hash = "sha256:2f932b14ed08de5fcf0b391ace2642f858f1394c0857202959000b68ed7a458a", size = 17644, upload-time = "2025-11-05T13:36:35.34Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/84/25/d9db8be44e205a124f6c98bc0324b2bb149b7431c53877fc6d1038dddaf5/pytokens-0.3.0-py3-none-any.whl", hash = "sha256:95b2b5eaf832e469d141a378872480ede3f251a5a5041b8ec6e581d3ac71bbf3", size = 12195, upload-time = "2025-11-05T13:36:33.183Z" },
+]
+
 [[package]]
 name = "pywin32"
 version = "311"

mobile/lib/pages/backup/failed_backup_status.page.dart

@@ -2,10 +2,9 @@ import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/images/local_image_provider.dart';
 import 'package:immich_mobile/providers/backup/error_backup_list.provider.dart';
+import 'package:immich_mobile/providers/image/immich_local_thumbnail_provider.dart';
 import 'package:intl/intl.dart';
-import 'package:immich_mobile/domain/models/asset/base_asset.model.dart' as base_asset;
 
 @RoutePage()
 class FailedBackupStatusPage extends HookConsumerWidget {
@@ -59,7 +58,7 @@ class FailedBackupStatusPage extends HookConsumerWidget {
                       clipBehavior: Clip.hardEdge,
                       child: Image(
                         fit: BoxFit.cover,
-                        image: LocalThumbProvider(id: errorAsset.asset.localId!, assetType: base_asset.AssetType.video),
+                        image: ImmichLocalThumbnailProvider(asset: errorAsset.asset, height: 512, width: 512),
                       ),
                     ),
                   ),

mobile/lib/pages/common/gallery_stacked_children.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/asset_stack.provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/show_controls.provider.dart';
+import 'package:immich_mobile/providers/image/immich_remote_image_provider.dart';
 
 class GalleryStackedChildren extends HookConsumerWidget {
   final ValueNotifier<int> stackIndex;
@@ -70,7 +70,7 @@ class GalleryStackedChildren extends HookConsumerWidget {
                       borderRadius: const BorderRadius.all(Radius.circular(4)),
                       child: Image(
                         fit: BoxFit.cover,
-                        image: RemoteImageProvider.thumbnail(assetId: assetId, thumbhash: asset.thumbhash ?? ""),
+                        image: ImmichRemoteImageProvider(assetId: assetId),
                       ),
                     ),
                   ),

mobile/lib/pages/library/library.page.dart

@@ -11,7 +11,7 @@ import 'package:immich_mobile/providers/partner.provider.dart';
 import 'package:immich_mobile/providers/search/people.provider.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:immich_mobile/widgets/album/album_thumbnail_card.dart';
 import 'package:immich_mobile/widgets/common/immich_app_bar.dart';
@@ -221,7 +221,12 @@ class PeopleCollectionCard extends ConsumerWidget {
                       mainAxisSpacing: 8,
                       physics: const NeverScrollableScrollPhysics(),
                       children: people.take(4).map((person) {
-                        return CircleAvatar(backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)));
+                        return CircleAvatar(
+                          backgroundImage: NetworkImage(
+                            getFaceThumbnailUrl(person.id),
+                            headers: ApiService.getRequestHeaders(),
+                          ),
+                        );
                       }).toList(),
                     );
                   },

mobile/lib/pages/library/people/people_collection.page.dart

@@ -5,8 +5,8 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/providers/search/people.provider.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:immich_mobile/widgets/common/search_field.dart';
 import 'package:immich_mobile/widgets/search/person_name_edit_form.dart';
@@ -17,6 +17,7 @@ class PeopleCollectionPage extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final people = ref.watch(getAllPeopleProvider);
+    final headers = ApiService.getRequestHeaders();
     final formFocus = useFocusNode();
     final ValueNotifier<String?> search = useState(null);
 
@@ -87,7 +88,7 @@ class PeopleCollectionPage extends HookConsumerWidget {
                             elevation: 3,
                             child: CircleAvatar(
                               maxRadius: isTablet ? 120 / 2 : 96 / 2,
-                              backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)),
+                              backgroundImage: NetworkImage(getFaceThumbnailUrl(person.id), headers: headers),
                             ),
                           ),
                         ),

mobile/lib/pages/library/places/places_collection.page.dart

@@ -1,4 +1,5 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
@@ -9,10 +10,9 @@ import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/models/search/search_filter.model.dart';
 import 'package:immich_mobile/pages/common/large_leading_tile.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
-import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/providers/search/search_page_state.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/widgets/common/search_field.dart';
 import 'package:immich_mobile/widgets/map/map_thumbnail.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
@@ -125,10 +125,13 @@ class PlaceTile extends StatelessWidget {
       title: Text(name, style: context.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w500)),
       leading: ClipRRect(
         borderRadius: const BorderRadius.all(Radius.circular(20)),
-        child: SizedBox(
+        child: CachedNetworkImage(
           width: 80,
           height: 80,
-          child: Thumbnail(imageProvider: RemoteImageProvider(url: thumbnailUrl)),
+          fit: BoxFit.cover,
+          imageUrl: thumbnailUrl,
+          httpHeaders: ApiService.getRequestHeaders(),
+          errorWidget: (context, url, error) => const Icon(Icons.image_not_supported_outlined),
         ),
       ),
     );

mobile/lib/pages/search/person_result.page.dart

@@ -4,8 +4,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/providers/search/people.provider.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/widgets/search/person_name_edit_form.dart';
 import 'package:immich_mobile/widgets/asset_grid/multiselect_grid.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
@@ -88,7 +88,10 @@ class PersonResultPage extends HookConsumerWidget {
           padding: const EdgeInsets.only(left: 8.0, top: 24),
           child: Row(
             children: [
-              CircleAvatar(radius: 36, backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(personId))),
+              CircleAvatar(
+                radius: 36,
+                backgroundImage: NetworkImage(getFaceThumbnailUrl(personId), headers: ApiService.getRequestHeaders()),
+              ),
               Expanded(
                 child: Padding(padding: const EdgeInsets.only(left: 16.0, right: 16.0), child: buildTitleBlock()),
               ),

mobile/lib/presentation/pages/drift_library.page.dart

@@ -12,8 +12,8 @@ import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/partner.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:immich_mobile/widgets/common/immich_sliver_app_bar.dart';
 import 'package:immich_mobile/widgets/map/map_thumbnail.dart';
@@ -179,7 +179,12 @@ class _PeopleCollectionCard extends ConsumerWidget {
                       mainAxisSpacing: 8,
                       physics: const NeverScrollableScrollPhysics(),
                       children: people.take(4).map((person) {
-                        return CircleAvatar(backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)));
+                        return CircleAvatar(
+                          backgroundImage: NetworkImage(
+                            getFaceThumbnailUrl(person.id),
+                            headers: ApiService.getRequestHeaders(),
+                          ),
+                        );
                       }).toList(),
                     );
                   },

mobile/lib/presentation/pages/drift_people_collection.page.dart

@@ -4,8 +4,8 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:immich_mobile/utils/people.utils.dart';
 import 'package:immich_mobile/widgets/common/search_field.dart';
@@ -31,6 +31,7 @@ class _DriftPeopleCollectionPageState extends ConsumerState<DriftPeopleCollectio
   @override
   Widget build(BuildContext context) {
     final people = ref.watch(driftGetAllPeopleProvider);
+    final headers = ApiService.getRequestHeaders();
 
     return LayoutBuilder(
       builder: (context, constraints) {
@@ -89,7 +90,7 @@ class _DriftPeopleCollectionPageState extends ConsumerState<DriftPeopleCollectio
                             elevation: 3,
                             child: CircleAvatar(
                               maxRadius: isTablet ? 100 / 2 : 96 / 2,
-                              backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)),
+                              backgroundImage: NetworkImage(getFaceThumbnailUrl(person.id), headers: headers),
                             ),
                           ),
                         ),

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet/sheet_people_details.widget.dart

@@ -10,8 +10,8 @@ import 'package:immich_mobile/presentation/widgets/people/person_edit_name_modal
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
 import 'package:immich_mobile/providers/routes.provider.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:immich_mobile/utils/people.utils.dart';
 
@@ -108,6 +108,8 @@ class _PeopleAvatar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final headers = ApiService.getRequestHeaders();
+
     return ConstrainedBox(
       constraints: const BoxConstraints(maxWidth: 96),
       child: Padding(
@@ -125,7 +127,7 @@ class _PeopleAvatar extends StatelessWidget {
                   elevation: 3,
                   child: CircleAvatar(
                     maxRadius: imageSize / 2,
-                    backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)),
+                    backgroundImage: NetworkImage(getFaceThumbnailUrl(person.id), headers: headers),
                   ),
                 ),
               ),

mobile/lib/presentation/widgets/images/image_provider.dart

@@ -134,7 +134,7 @@ ImageProvider? getThumbnailImageProvider(BaseAsset asset, {Size size = kThumbnai
 
   final assetId = asset is RemoteAsset ? asset.id : (asset as LocalAsset).remoteId;
   final thumbhash = asset is RemoteAsset ? asset.thumbHash ?? "" : "";
-  return assetId != null ? RemoteImageProvider.thumbnail(assetId: assetId, thumbhash: thumbhash) : null;
+  return assetId != null ? RemoteThumbProvider(assetId: assetId, thumbhash: thumbhash) : null;
 }
 
 bool _shouldUseLocalAsset(BaseAsset asset) =>

mobile/lib/presentation/widgets/images/remote_image_provider.dart

@@ -10,48 +10,50 @@ import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:openapi/api.dart';
 
-class RemoteImageProvider extends CancellableImageProvider<RemoteImageProvider>
-    with CancellableImageProviderMixin<RemoteImageProvider> {
-  final String url;
+class RemoteThumbProvider extends CancellableImageProvider<RemoteThumbProvider>
+    with CancellableImageProviderMixin<RemoteThumbProvider> {
+  final String assetId;
+  final String thumbhash;
 
-  RemoteImageProvider({required this.url});
-
-  RemoteImageProvider.thumbnail({required String assetId, required String thumbhash})
-    : url = getThumbnailUrlForRemoteId(assetId, thumbhash: thumbhash);
+  RemoteThumbProvider({required this.assetId, required this.thumbhash});
 
   @override
-  Future<RemoteImageProvider> obtainKey(ImageConfiguration configuration) {
+  Future<RemoteThumbProvider> obtainKey(ImageConfiguration configuration) {
     return SynchronousFuture(this);
   }
 
   @override
-  ImageStreamCompleter loadImage(RemoteImageProvider key, ImageDecoderCallback decode) {
+  ImageStreamCompleter loadImage(RemoteThumbProvider key, ImageDecoderCallback decode) {
     return OneFramePlaceholderImageStreamCompleter(
       _codec(key, decode),
       informationCollector: () => <DiagnosticsNode>[
         DiagnosticsProperty<ImageProvider>('Image provider', this),
-        DiagnosticsProperty<String>('URL', key.url),
+        DiagnosticsProperty<String>('Asset Id', key.assetId),
       ],
       onDispose: cancel,
     );
   }
 
-  Stream<ImageInfo> _codec(RemoteImageProvider key, ImageDecoderCallback decode) {
-    final request = this.request = RemoteImageRequest(uri: key.url, headers: ApiService.getRequestHeaders());
+  Stream<ImageInfo> _codec(RemoteThumbProvider key, ImageDecoderCallback decode) {
+    final request = this.request = RemoteImageRequest(
+      uri: getThumbnailUrlForRemoteId(key.assetId, thumbhash: key.thumbhash),
+      headers: ApiService.getRequestHeaders(),
+    );
     return loadRequest(request, decode);
   }
 
   @override
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
-    if (other is RemoteImageProvider) {
-      return url == other.url;
+    if (other is RemoteThumbProvider) {
+      return assetId == other.assetId && thumbhash == other.thumbhash;
     }
+
     return false;
   }
 
   @override
-  int get hashCode => url.hashCode;
+  int get hashCode => assetId.hashCode ^ thumbhash.hashCode;
 }
 
 class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImageProvider>
@@ -71,7 +73,7 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
   ImageStreamCompleter loadImage(RemoteFullImageProvider key, ImageDecoderCallback decode) {
     return OneFramePlaceholderImageStreamCompleter(
       _codec(key, decode),
-      initialImage: getInitialImage(RemoteImageProvider.thumbnail(assetId: key.assetId, thumbhash: key.thumbhash)),
+      initialImage: getInitialImage(RemoteThumbProvider(assetId: key.assetId, thumbhash: key.thumbhash)),
       informationCollector: () => <DiagnosticsNode>[
         DiagnosticsProperty<ImageProvider>('Image provider', this),
         DiagnosticsProperty<String>('Asset Id', key.assetId),

mobile/lib/presentation/widgets/images/thumbnail.widget.dart

@@ -27,7 +27,7 @@ class Thumbnail extends StatefulWidget {
     this.fit = BoxFit.cover,
     Size size = kThumbnailResolution,
     super.key,
-  }) : imageProvider = RemoteImageProvider.thumbnail(assetId: remoteId, thumbhash: thumbhash),
+  }) : imageProvider = RemoteThumbProvider(assetId: remoteId, thumbhash: thumbhash),
        thumbhashProvider = null;
 
   Thumbnail.fromAsset({

mobile/lib/presentation/widgets/people/partner_user_avatar.widget.dart

@@ -1,9 +1,10 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/models/user.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/services/api.service.dart';
 
 class PartnerUserAvatar extends StatelessWidget {
   const PartnerUserAvatar({super.key, required this.partner});
@@ -17,7 +18,11 @@ class PartnerUserAvatar extends StatelessWidget {
     return CircleAvatar(
       radius: 16,
       backgroundColor: context.primaryColor.withAlpha(50),
-      foregroundImage: RemoteImageProvider(url: url),
+      foregroundImage: CachedNetworkImageProvider(
+        url,
+        headers: ApiService.getRequestHeaders(),
+        cacheKey: "user-${partner.id}-profile",
+      ),
       // silence errors if user has no profile image, use initials as fallback
       onForegroundImageError: (exception, stackTrace) {},
       child: Text(nameFirstLetter.toUpperCase()),

mobile/lib/providers/image/immich_local_image_provider.dart

@@ -0,0 +1,94 @@
+import 'dart:async';
+import 'dart:io';
+import 'dart:ui' as ui;
+
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/painting.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:logging/logging.dart';
+import 'package:photo_manager/photo_manager.dart' show ThumbnailSize;
+
+/// The local image provider for an asset
+class ImmichLocalImageProvider extends ImageProvider<ImmichLocalImageProvider> {
+  final Asset asset;
+  // only used for videos
+  final double width;
+  final double height;
+  final Logger log = Logger('ImmichLocalImageProvider');
+
+  ImmichLocalImageProvider({required this.asset, required this.width, required this.height})
+    : assert(asset.local != null, 'Only usable when asset.local is set');
+
+  /// Converts an [ImageProvider]'s settings plus an [ImageConfiguration] to a key
+  /// that describes the precise image to load.
+  @override
+  Future<ImmichLocalImageProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(ImmichLocalImageProvider key, ImageDecoderCallback decode) {
+    final chunkEvents = StreamController<ImageChunkEvent>();
+    return MultiImageStreamCompleter(
+      codec: _codec(key.asset, decode, chunkEvents),
+      scale: 1.0,
+      chunkEvents: chunkEvents.stream,
+      informationCollector: () sync* {
+        yield ErrorDescription(asset.fileName);
+      },
+    );
+  }
+
+  // Streams in each stage of the image as we ask for it
+  Stream<ui.Codec> _codec(
+    Asset asset,
+    ImageDecoderCallback decode,
+    StreamController<ImageChunkEvent> chunkEvents,
+  ) async* {
+    try {
+      final local = asset.local;
+      if (local == null) {
+        throw StateError('Asset ${asset.fileName} has no local data');
+      }
+
+      switch (asset.type) {
+        case AssetType.image:
+          final File? file = await local.originFile;
+          if (file == null) {
+            throw StateError("Opening file for asset ${asset.fileName} failed");
+          }
+          final buffer = await ui.ImmutableBuffer.fromFilePath(file.path);
+          yield await decode(buffer);
+          break;
+        case AssetType.video:
+          final size = ThumbnailSize(width.ceil(), height.ceil());
+          final thumbBytes = await local.thumbnailDataWithSize(size);
+          if (thumbBytes == null) {
+            throw StateError("Failed to load preview for ${asset.fileName}");
+          }
+          final buffer = await ui.ImmutableBuffer.fromUint8List(thumbBytes);
+          yield await decode(buffer);
+          break;
+        default:
+          throw StateError('Unsupported asset type ${asset.type}');
+      }
+    } catch (error, stack) {
+      log.severe('Error loading local image ${asset.fileName}', error, stack);
+    } finally {
+      unawaited(chunkEvents.close());
+    }
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is ImmichLocalImageProvider) {
+      return asset.id == other.asset.id && asset.localId == other.asset.localId;
+    }
+    return false;
+  }
+
+  @override
+  int get hashCode => Object.hash(asset.id, asset.localId);
+}

mobile/lib/providers/image/immich_local_thumbnail_provider.dart

@@ -0,0 +1,88 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter_cache_manager/flutter_cache_manager.dart';
+import 'package:immich_mobile/providers/image/cache/thumbnail_image_cache_manager.dart';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/painting.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:photo_manager/photo_manager.dart' show ThumbnailSize;
+import 'package:logging/logging.dart';
+
+/// The local image provider for an asset
+/// Only viable
+class ImmichLocalThumbnailProvider extends ImageProvider<ImmichLocalThumbnailProvider> {
+  final Asset asset;
+  final int height;
+  final int width;
+  final CacheManager? cacheManager;
+  final Logger log = Logger("ImmichLocalThumbnailProvider");
+  final String? userId;
+
+  ImmichLocalThumbnailProvider({
+    required this.asset,
+    this.height = 256,
+    this.width = 256,
+    this.cacheManager,
+    this.userId,
+  }) : assert(asset.local != null, 'Only usable when asset.local is set');
+
+  /// Converts an [ImageProvider]'s settings plus an [ImageConfiguration] to a key
+  /// that describes the precise image to load.
+  @override
+  Future<ImmichLocalThumbnailProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(ImmichLocalThumbnailProvider key, ImageDecoderCallback decode) {
+    final cache = cacheManager ?? ThumbnailImageCacheManager();
+    return MultiImageStreamCompleter(
+      codec: _codec(key.asset, cache, decode),
+      scale: 1.0,
+      informationCollector: () sync* {
+        yield ErrorDescription(key.asset.fileName);
+      },
+    );
+  }
+
+  // Streams in each stage of the image as we ask for it
+  Stream<ui.Codec> _codec(Asset assetData, CacheManager cache, ImageDecoderCallback decode) async* {
+    final cacheKey = '$userId${assetData.localId}${assetData.checksum}$width$height';
+    final fileFromCache = await cache.getFileFromCache(cacheKey);
+    if (fileFromCache != null) {
+      try {
+        final buffer = await ui.ImmutableBuffer.fromFilePath(fileFromCache.file.path);
+        final codec = await decode(buffer);
+        yield codec;
+        return;
+      } catch (error) {
+        log.severe('Found thumbnail in cache, but loading it failed', error);
+      }
+    }
+
+    final thumbnailBytes = await assetData.local?.thumbnailDataWithSize(ThumbnailSize(width, height), quality: 80);
+    if (thumbnailBytes == null) {
+      throw StateError("Loading thumb for local photo ${assetData.fileName} failed");
+    }
+
+    final buffer = await ui.ImmutableBuffer.fromUint8List(thumbnailBytes);
+    final codec = await decode(buffer);
+    yield codec;
+    await cache.putFile(cacheKey, thumbnailBytes);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is ImmichLocalThumbnailProvider) {
+      return asset.id == other.asset.id && asset.localId == other.asset.localId;
+    }
+    return false;
+  }
+
+  @override
+  int get hashCode => Object.hash(asset.id, asset.localId);
+}

mobile/lib/providers/image/immich_remote_image_provider.dart

@@ -0,0 +1,82 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter_cache_manager/flutter_cache_manager.dart';
+import 'package:immich_mobile/providers/image/cache/image_loader.dart';
+import 'package:immich_mobile/providers/image/cache/remote_image_cache_manager.dart';
+import 'package:openapi/api.dart' as api;
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/painting.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
+
+/// The remote image provider for full size remote images
+class ImmichRemoteImageProvider extends ImageProvider<ImmichRemoteImageProvider> {
+  /// The [Asset.remoteId] of the asset to fetch
+  final String assetId;
+
+  /// The image cache manager
+  final CacheManager? cacheManager;
+
+  const ImmichRemoteImageProvider({required this.assetId, this.cacheManager});
+
+  /// Converts an [ImageProvider]'s settings plus an [ImageConfiguration] to a key
+  /// that describes the precise image to load.
+  @override
+  Future<ImmichRemoteImageProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(ImmichRemoteImageProvider key, ImageDecoderCallback decode) {
+    final cache = cacheManager ?? RemoteImageCacheManager();
+    final chunkEvents = StreamController<ImageChunkEvent>();
+    return MultiImageStreamCompleter(
+      codec: _codec(key, cache, decode, chunkEvents),
+      scale: 1.0,
+      chunkEvents: chunkEvents.stream,
+    );
+  }
+
+  /// Whether to show the original file or load a compressed version
+  bool get _useOriginal => Store.get(AppSettingsEnum.loadOriginal.storeKey, AppSettingsEnum.loadOriginal.defaultValue);
+
+  // Streams in each stage of the image as we ask for it
+  Stream<ui.Codec> _codec(
+    ImmichRemoteImageProvider key,
+    CacheManager cache,
+    ImageDecoderCallback decode,
+    StreamController<ImageChunkEvent> chunkEvents,
+  ) async* {
+    // Load the higher resolution version of the image
+    final url = getThumbnailUrlForRemoteId(key.assetId, type: api.AssetMediaSize.preview);
+    final codec = await ImageLoader.loadImageFromCache(url, cache: cache, decode: decode, chunkEvents: chunkEvents);
+    yield codec;
+
+    // Load the final remote image
+    if (_useOriginal) {
+      // Load the original image
+      final url = getOriginalUrlForRemoteId(key.assetId);
+      final codec = await ImageLoader.loadImageFromCache(url, cache: cache, decode: decode, chunkEvents: chunkEvents);
+      yield codec;
+    }
+    await chunkEvents.close();
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is ImmichRemoteImageProvider) {
+      return assetId == other.assetId;
+    }
+
+    return false;
+  }
+
+  @override
+  int get hashCode => assetId.hashCode;
+}

mobile/lib/providers/image/immich_remote_thumbnail_provider.dart

@@ -0,0 +1,61 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter_cache_manager/flutter_cache_manager.dart';
+import 'package:immich_mobile/providers/image/cache/image_loader.dart';
+import 'package:immich_mobile/providers/image/cache/thumbnail_image_cache_manager.dart';
+import 'package:openapi/api.dart' as api;
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/painting.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
+
+/// The remote image provider
+class ImmichRemoteThumbnailProvider extends ImageProvider<ImmichRemoteThumbnailProvider> {
+  /// The [Asset.remoteId] of the asset to fetch
+  final String assetId;
+
+  final int? height;
+  final int? width;
+
+  /// The image cache manager
+  final CacheManager? cacheManager;
+
+  const ImmichRemoteThumbnailProvider({required this.assetId, this.height, this.width, this.cacheManager});
+
+  /// Converts an [ImageProvider]'s settings plus an [ImageConfiguration] to a key
+  /// that describes the precise image to load.
+  @override
+  Future<ImmichRemoteThumbnailProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(ImmichRemoteThumbnailProvider key, ImageDecoderCallback decode) {
+    final cache = cacheManager ?? ThumbnailImageCacheManager();
+    return MultiImageStreamCompleter(codec: _codec(key, cache, decode), scale: 1.0);
+  }
+
+  // Streams in each stage of the image as we ask for it
+  Stream<ui.Codec> _codec(ImmichRemoteThumbnailProvider key, CacheManager cache, ImageDecoderCallback decode) async* {
+    // Load a preview to the chunk events
+    final preview = getThumbnailUrlForRemoteId(key.assetId, type: api.AssetMediaSize.thumbnail);
+
+    yield await ImageLoader.loadImageFromCache(preview, cache: cache, decode: decode);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is ImmichRemoteThumbnailProvider) {
+      return assetId == other.assetId;
+    }
+
+    return false;
+  }
+
+  @override
+  int get hashCode => assetId.hashCode;
+}

mobile/lib/utils/cache/custom_image_cache.dart

@@ -2,6 +2,10 @@ import 'package:flutter/painting.dart';
 import 'package:immich_mobile/presentation/widgets/images/local_image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumb_hash_provider.dart';
+import 'package:immich_mobile/providers/image/immich_local_image_provider.dart';
+import 'package:immich_mobile/providers/image/immich_local_thumbnail_provider.dart';
+import 'package:immich_mobile/providers/image/immich_remote_image_provider.dart';
+import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart';
 
 /// [ImageCache] that uses two caches for small and large images
 /// so that a single large image does not evict all small images
@@ -35,9 +39,14 @@ final class CustomImageCache implements ImageCache {
   }
 
   /// Gets the cache for the given key
+  /// [_large] is used for [ImmichLocalImageProvider] and [ImmichRemoteImageProvider]
+  /// [_small] is used for [ImmichLocalThumbnailProvider] and [ImmichRemoteThumbnailProvider]
   ImageCache _cacheForKey(Object key) {
     return switch (key) {
-      LocalFullImageProvider() || RemoteFullImageProvider() => _large,
+      ImmichLocalImageProvider() ||
+      ImmichRemoteImageProvider() ||
+      LocalFullImageProvider() ||
+      RemoteFullImageProvider() => _large,
       ThumbHashProvider() => _thumbhash,
       _ => _small,
     };

mobile/lib/widgets/activities/activity_tile.dart

@@ -4,8 +4,8 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/datetime_extensions.dart';
 import 'package:immich_mobile/models/activities/activity.model.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/providers/activity_service.provider.dart';
+import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
 import 'package:immich_mobile/widgets/common/user_circle_avatar.dart';
 
@@ -102,7 +102,7 @@ class _ActivityAssetThumbnail extends StatelessWidget {
         decoration: BoxDecoration(
           borderRadius: const BorderRadius.all(Radius.circular(4)),
           image: DecorationImage(
-            image: RemoteImageProvider.thumbnail(assetId: assetId, thumbhash: ""),
+            image: ImmichRemoteThumbnailProvider(assetId: assetId),
             fit: BoxFit.cover,
           ),
         ),

mobile/lib/widgets/activities/comment_bubble.dart

@@ -4,9 +4,9 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/datetime_extensions.dart';
 import 'package:immich_mobile/models/activities/activity.model.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/providers/activity.provider.dart';
 import 'package:immich_mobile/providers/activity_service.provider.dart';
+import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart';
 import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/widgets/activities/dismissible_activity.dart';
@@ -56,7 +56,7 @@ class CommentBubble extends ConsumerWidget {
               child: ClipRRect(
                 borderRadius: const BorderRadius.all(Radius.circular(10)),
                 child: Image(
-                  image: RemoteImageProvider.thumbnail(assetId: activity.assetId!, thumbhash: ""),
+                  image: ImmichRemoteThumbnailProvider(assetId: activity.assetId!),
                   fit: BoxFit.cover,
                 ),
               ),

mobile/lib/widgets/album/album_thumbnail_listtile.dart

@@ -1,12 +1,12 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/entities/album.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
-import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:openapi/api.dart';
 
@@ -32,12 +32,15 @@ class AlbumThumbnailListTile extends StatelessWidget {
     }
 
     buildAlbumThumbnail() {
-      return SizedBox(
+      return CachedNetworkImage(
         width: cardSize,
         height: cardSize,
-        child: Thumbnail(
-          imageProvider: RemoteImageProvider(url: getAlbumThumbnailUrl(album, type: AssetMediaSize.thumbnail)),
-        ),
+        fit: BoxFit.cover,
+        fadeInDuration: const Duration(milliseconds: 200),
+        imageUrl: getAlbumThumbnailUrl(album, type: AssetMediaSize.thumbnail),
+        httpHeaders: ApiService.getRequestHeaders(),
+        cacheKey: getAlbumThumbNailCacheKey(album, type: AssetMediaSize.thumbnail),
+        errorWidget: (context, url, error) => const Icon(Icons.image_not_supported_outlined),
       );
     }
 

mobile/lib/widgets/common/immich_image.dart

@@ -1,11 +1,10 @@
 import 'package:flutter/material.dart';
-import 'package:immich_mobile/domain/models/asset/base_asset.model.dart' as base_asset;
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/images/local_image_provider.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/providers/image/immich_local_image_provider.dart';
+import 'package:immich_mobile/providers/image/immich_remote_image_provider.dart';
 import 'package:immich_mobile/widgets/asset_grid/thumbnail_placeholder.dart';
 import 'package:octo_image/octo_image.dart';
 
@@ -35,21 +34,13 @@ class ImmichImage extends StatelessWidget {
     }
 
     if (asset == null) {
-      return RemoteFullImageProvider(assetId: assetId!, thumbhash: '', assetType: base_asset.AssetType.video);
+      return ImmichRemoteImageProvider(assetId: assetId!);
     }
 
     if (useLocal(asset)) {
-      return LocalFullImageProvider(
-        id: asset.localId!,
-        assetType: base_asset.AssetType.video,
-        size: Size(width, height),
-      );
+      return ImmichLocalImageProvider(asset: asset, width: width, height: height);
     } else {
-      return RemoteFullImageProvider(
-        assetId: asset.remoteId!,
-        thumbhash: asset.thumbhash ?? '',
-        assetType: base_asset.AssetType.video,
-      );
+      return ImmichRemoteImageProvider(assetId: asset.remoteId!);
     }
   }
 

mobile/lib/widgets/common/immich_thumbnail.dart

@@ -2,15 +2,15 @@ import 'dart:typed_data';
 
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/presentation/widgets/images/local_image_provider.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/providers/image/immich_local_thumbnail_provider.dart';
+import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/utils/hooks/blurhash_hook.dart';
 import 'package:immich_mobile/utils/thumbnail_utils.dart';
 import 'package:immich_mobile/widgets/common/immich_image.dart';
 import 'package:immich_mobile/widgets/common/thumbhash_placeholder.dart';
 import 'package:octo_image/octo_image.dart';
-import 'package:immich_mobile/domain/models/asset/base_asset.model.dart' as base_asset;
+import 'package:immich_mobile/providers/user.provider.dart';
 
 class ImmichThumbnail extends HookConsumerWidget {
   const ImmichThumbnail({this.asset, this.width = 250, this.height = 250, this.fit = BoxFit.cover, super.key});
@@ -24,29 +24,26 @@ class ImmichThumbnail extends HookConsumerWidget {
   /// either by using the asset ID or the asset itself
   /// [asset] is the Asset to request, or else use [assetId] to get a remote
   /// image provider
-  static ImageProvider imageProvider({Asset? asset, String? assetId, int thumbnailSize = 256}) {
+  static ImageProvider imageProvider({Asset? asset, String? assetId, String? userId, int thumbnailSize = 256}) {
     if (asset == null && assetId == null) {
       throw Exception('Must supply either asset or assetId');
     }
 
     if (asset == null) {
-      return RemoteImageProvider.thumbnail(assetId: assetId!, thumbhash: "");
+      return ImmichRemoteThumbnailProvider(assetId: assetId!);
     }
 
     if (ImmichImage.useLocal(asset)) {
-      return LocalThumbProvider(
-        id: asset.localId!,
-        assetType: base_asset.AssetType.video,
-        size: Size(thumbnailSize.toDouble(), thumbnailSize.toDouble()),
-      );
+      return ImmichLocalThumbnailProvider(asset: asset, height: thumbnailSize, width: thumbnailSize, userId: userId);
     } else {
-      return RemoteImageProvider.thumbnail(assetId: asset.remoteId!, thumbhash: asset.thumbhash ?? "");
+      return ImmichRemoteThumbnailProvider(assetId: asset.remoteId!, height: thumbnailSize, width: thumbnailSize);
     }
   }
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     Uint8List? blurhash = useBlurHashRef(asset).value;
+    final userId = ref.watch(currentUserProvider)?.id;
 
     if (asset == null) {
       return Container(
@@ -59,7 +56,7 @@ class ImmichThumbnail extends HookConsumerWidget {
 
     final assetAltText = getAltText(asset!.exifInfo, asset!.fileCreatedAt, asset!.type, []);
 
-    final thumbnailProviderInstance = ImmichThumbnail.imageProvider(asset: asset);
+    final thumbnailProviderInstance = ImmichThumbnail.imageProvider(asset: asset, userId: userId);
 
     customErrorBuilder(BuildContext ctx, Object error, StackTrace? stackTrace) {
       thumbnailProviderInstance.evict();

mobile/lib/widgets/common/person_sliver_app_bar.dart

@@ -14,8 +14,8 @@ import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/people.utils.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 
@@ -230,7 +230,10 @@ class _ExpandedBackgroundState extends ConsumerState<_ExpandedBackground> with S
                     elevation: 3,
                     child: CircleAvatar(
                       maxRadius: 84 / 2,
-                      backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(widget.person.id)),
+                      backgroundImage: NetworkImage(
+                        getFaceThumbnailUrl(widget.person.id),
+                        headers: ApiService.getRequestHeaders(),
+                      ),
                     ),
                   ),
                 ),

mobile/lib/widgets/common/user_avatar.dart

@@ -1,9 +1,10 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/models/user.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/services/api.service.dart';
 
 Widget userAvatar(BuildContext context, UserDto u, {double? radius}) {
   final url = "${Store.get(StoreKey.serverEndpoint)}/users/${u.id}/profile-image";
@@ -11,7 +12,11 @@ Widget userAvatar(BuildContext context, UserDto u, {double? radius}) {
   return CircleAvatar(
     radius: radius,
     backgroundColor: context.primaryColor.withAlpha(50),
-    foregroundImage: RemoteImageProvider(url: url),
+    foregroundImage: CachedNetworkImageProvider(
+      url,
+      headers: ApiService.getRequestHeaders(),
+      cacheKey: "user-${u.id}-profile",
+    ),
     // silence errors if user has no profile image, use initials as fallback
     onForegroundImageError: (exception, stackTrace) {},
     child: Text(nameFirstLetter.toUpperCase()),

mobile/lib/widgets/common/user_circle_avatar.dart

@@ -1,11 +1,13 @@
 import 'dart:math';
 
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/models/user.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/widgets/common/transparent_image.dart';
 
 // ignore: must_be_immutable
 class UserCircleAvatar extends ConsumerWidget {
@@ -44,12 +46,16 @@ class UserCircleAvatar extends ConsumerWidget {
           child: user.hasProfileImage
               ? ClipRRect(
                   borderRadius: const BorderRadius.all(Radius.circular(50)),
-                  child: Image(
+                  child: CachedNetworkImage(
                     fit: BoxFit.cover,
+                    cacheKey: '${user.id}-${user.profileChangedAt.toIso8601String()}',
                     width: size,
                     height: size,
-                    image: RemoteImageProvider(url: profileImageUrl),
-                    errorBuilder: (context, error, stackTrace) => textIcon,
+                    placeholder: (_, __) => Image.memory(kTransparentImage),
+                    imageUrl: profileImageUrl,
+                    httpHeaders: ApiService.getRequestHeaders(),
+                    fadeInDuration: const Duration(milliseconds: 300),
+                    errorWidget: (context, error, stackTrace) => textIcon,
                   ),
                 )
               : textIcon,

mobile/lib/widgets/map/positioned_asset_marker_icon.dart

@@ -1,9 +1,10 @@
 import 'dart:io';
 import 'dart:math';
 
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 
 class PositionedAssetMarkerIcon extends StatelessWidget {
@@ -52,6 +53,7 @@ class _AssetMarkerIcon extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final imageUrl = getThumbnailUrlForRemoteId(id);
+    final cacheKey = getThumbnailCacheKeyForRemoteId(id, thumbhash);
     return LayoutBuilder(
       builder: (context, constraints) {
         return Stack(
@@ -77,7 +79,12 @@ class _AssetMarkerIcon extends StatelessWidget {
                 backgroundColor: context.colorScheme.onSurface,
                 child: CircleAvatar(
                   radius: constraints.maxHeight * 0.37,
-                  backgroundImage: RemoteImageProvider(url: imageUrl),
+                  backgroundImage: CachedNetworkImageProvider(
+                    imageUrl,
+                    cacheKey: cacheKey,
+                    headers: ApiService.getRequestHeaders(),
+                    errorListener: (_) => const Icon(Icons.image_not_supported_outlined),
+                  ),
                 ),
               ),
             ),

mobile/lib/widgets/search/curated_people_row.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/models/search/search_curated_content.model.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 
 class CuratedPeopleRow extends StatelessWidget {
@@ -29,6 +29,7 @@ class CuratedPeopleRow extends StatelessWidget {
           crossAxisAlignment: CrossAxisAlignment.start,
           children: List.generate(content.length, (index) {
             final person = content[index];
+            final headers = ApiService.getRequestHeaders();
             return Padding(
               padding: const EdgeInsets.only(right: 16.0),
               child: Column(
@@ -43,7 +44,7 @@ class CuratedPeopleRow extends StatelessWidget {
                         elevation: 3,
                         child: CircleAvatar(
                           maxRadius: imageSize / 2,
-                          backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)),
+                          backgroundImage: NetworkImage(getFaceThumbnailUrl(person.id), headers: headers),
                         ),
                       ),
                     ),

mobile/lib/widgets/search/search_filter/people_picker.dart

@@ -6,8 +6,8 @@ import 'package:immich_mobile/domain/models/person.model.dart';
 import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/pages/common/large_leading_tile.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/providers/search/people.provider.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:immich_mobile/widgets/common/search_field.dart';
 
@@ -23,6 +23,7 @@ class PeoplePicker extends HookConsumerWidget {
     final imageSize = 60.0;
     final searchQuery = useState('');
     final people = ref.watch(getAllPeopleProvider);
+    final headers = ApiService.getRequestHeaders();
     final selectedPeople = useState<Set<PersonDto>>(filter ?? {});
 
     return Column(
@@ -74,7 +75,7 @@ class PeoplePicker extends HookConsumerWidget {
                           elevation: 3,
                           child: CircleAvatar(
                             maxRadius: imageSize / 2,
-                            backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)),
+                            backgroundImage: NetworkImage(getFaceThumbnailUrl(person.id), headers: headers),
                           ),
                         ),
                       ),

mobile/lib/widgets/search/thumbnail_with_info.dart

@@ -1,8 +1,8 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
-import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/widgets/search/thumbnail_with_info_container.dart';
+import 'package:immich_mobile/services/api.service.dart';
 
 class ThumbnailWithInfo extends StatelessWidget {
   const ThumbnailWithInfo({
@@ -30,7 +30,14 @@ class ThumbnailWithInfo extends StatelessWidget {
       child: imageUrl != null
           ? ClipRRect(
               borderRadius: BorderRadius.circular(borderRadius),
-              child: Thumbnail(imageProvider: RemoteImageProvider(url: imageUrl!)),
+              child: CachedNetworkImage(
+                width: double.infinity,
+                height: double.infinity,
+                fit: BoxFit.cover,
+                imageUrl: imageUrl!,
+                httpHeaders: ApiService.getRequestHeaders(),
+                errorWidget: (context, url, error) => const Icon(Icons.image_not_supported_outlined),
+              ),
             )
           : Center(child: Icon(noImageIcon ?? Icons.not_listed_location, color: textAndIconColor)),
     );

mobile/pubspec.lock

@@ -201,6 +201,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "8.9.5"
+  cached_network_image:
+    dependency: "direct main"
+    description:
+      name: cached_network_image
+      sha256: "7c1183e361e5c8b0a0f21a28401eecdbde252441106a9816400dd4c2b2424916"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.4.1"
+  cached_network_image_platform_interface:
+    dependency: transitive
+    description:
+      name: cached_network_image_platform_interface
+      sha256: "35814b016e37fbdc91f7ae18c8caf49ba5c88501813f73ce8a07027a395e2829"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.1.1"
+  cached_network_image_web:
+    dependency: transitive
+    description:
+      name: cached_network_image_web
+      sha256: "980842f4e8e2535b8dbd3d5ca0b1f0ba66bf61d14cc3a17a9b4788a3685ba062"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.1"
   cancellation_token:
     dependency: transitive
     description:
@@ -1225,10 +1249,10 @@ packages:
     dependency: transitive
     description:
       name: meta
-      sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394"
+      sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
       url: "https://pub.dev"
     source: hosted
-    version: "1.17.0"
+    version: "1.16.0"
   mime:
     dependency: transitive
     description:
@@ -1918,10 +1942,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: ab2726c1a94d3176a45960b6234466ec367179b87dd74f1611adb1f3b5fb9d55
+      sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.7"
+    version: "0.7.6"
   thumbhash:
     dependency: "direct main"
     description:

mobile/pubspec.yaml

@@ -12,6 +12,7 @@ dependencies:
   async: ^2.13.0
   auto_route: ^9.2.0
   background_downloader: ^9.3.0
+  cached_network_image: ^3.4.1
   cancellation_token_http: ^2.1.0
   cast: ^2.1.0
   collection: ^1.19.1

server/src/services/person.service.ts

@@ -44,6 +44,7 @@ import { getDimensions } from 'src/utils/asset.util';
 import { ImmichFileResponse } from 'src/utils/file';
 import { mimeTypes } from 'src/utils/mime-types';
 import { isFacialRecognitionEnabled } from 'src/utils/misc';
+import { Point, transformPoints } from 'src/utils/transform';
 
 @Injectable()
 export class PersonService extends BaseService {
@@ -634,15 +635,50 @@ export class PersonService extends BaseService {
       this.requireAccess({ auth, permission: Permission.PersonRead, ids: [dto.personId] }),
     ]);
 
+    const asset = await this.assetRepository.getById(dto.assetId, { edits: true, exifInfo: true });
+    if (!asset) {
+      throw new NotFoundException('Asset not found');
+    }
+
+    const edits = asset.edits || [];
+
+    let p1: Point = { x: dto.x, y: dto.y };
+    let p2: Point = { x: dto.x + dto.width, y: dto.y + dto.height };
+
+    // the coordinates received from the client are based on the edited preview image
+    // we need to convert them to the coordinate space of the original unedited image
+    if (edits.length > 0) {
+      if (!asset.width || !asset.height || !asset.exifInfo?.exifImageWidth || !asset.exifInfo?.exifImageHeight) {
+        throw new BadRequestException('Asset does not have valid dimensions');
+      }
+
+      // convert from preview to full dimensions
+      const scaleFactor = asset.width / dto.imageWidth;
+      p1 = { x: p1.x * scaleFactor, y: p1.y * scaleFactor };
+      p2 = { x: p2.x * scaleFactor, y: p2.y * scaleFactor };
+
+      const {
+        points: [invertedP1, invertedP2],
+      } = transformPoints([p1, p2], edits, { width: asset.width, height: asset.height }, { inverse: true });
+
+      // make sure p1 is top-left and p2 is bottom-right
+      p1 = { x: Math.min(invertedP1.x, invertedP2.x), y: Math.min(invertedP1.y, invertedP2.y) };
+      p2 = { x: Math.max(invertedP1.x, invertedP2.x), y: Math.max(invertedP1.y, invertedP2.y) };
+
+      // now coordinates are in original image space
+      dto.imageHeight = asset.exifInfo.exifImageHeight;
+      dto.imageWidth = asset.exifInfo.exifImageWidth;
+    }
+
     await this.personRepository.createAssetFace({
       personId: dto.personId,
       assetId: dto.assetId,
       imageHeight: dto.imageHeight,
       imageWidth: dto.imageWidth,
-      boundingBoxX1: dto.x,
-      boundingBoxX2: dto.x + dto.width,
-      boundingBoxY1: dto.y,
-      boundingBoxY2: dto.y + dto.height,
+      boundingBoxX1: Math.round(p1.x),
+      boundingBoxX2: Math.round(p2.x),
+      boundingBoxY1: Math.round(p1.y),
+      boundingBoxY2: Math.round(p2.y),
       sourceType: SourceType.Manual,
     });
   }

server/src/utils/transform.ts

@@ -61,7 +61,7 @@ export const createAffineMatrix = (
   );
 };
 
-type Point = { x: number; y: number };
+export type Point = { x: number; y: number };
 
 type TransformState = {
   points: Point[];
@@ -73,29 +73,33 @@ type TransformState = {
  * Transforms an array of points through a series of edit operations (crop, rotate, mirror).
  * Points should be in absolute pixel coordinates relative to the starting dimensions.
  */
-const transformPoints = (
+export const transformPoints = (
   points: Point[],
   edits: AssetEditActionItem[],
   startingDimensions: ImageDimensions,
+  { inverse = false } = {},
 ): TransformState => {
   let currentWidth = startingDimensions.width;
   let currentHeight = startingDimensions.height;
   let transformedPoints = [...points];
 
-  // Handle crop first
-  const crop = edits.find((edit) => edit.action === 'crop');
-  if (crop) {
-    const { x: cropX, y: cropY, width: cropWidth, height: cropHeight } = crop.parameters;
-    transformedPoints = transformedPoints.map((p) => ({
-      x: p.x - cropX,
-      y: p.y - cropY,
-    }));
-    currentWidth = cropWidth;
-    currentHeight = cropHeight;
+  // Handle crop first if not inverting
+  if (!inverse) {
+    const crop = edits.find((edit) => edit.action === 'crop');
+    if (crop) {
+      const { x: cropX, y: cropY, width: cropWidth, height: cropHeight } = crop.parameters;
+      transformedPoints = transformedPoints.map((p) => ({
+        x: p.x - cropX,
+        y: p.y - cropY,
+      }));
+      currentWidth = cropWidth;
+      currentHeight = cropHeight;
+    }
   }
 
   // Apply rotate and mirror transforms
-  for (const edit of edits) {
+  const editSequence = inverse ? edits.toReversed() : edits;
+  for (const edit of editSequence) {
     let matrix: Matrix = identity();
     if (edit.action === 'rotate') {
       const angleDegrees = edit.parameters.angle;
@@ -105,7 +109,7 @@ const transformPoints = (
 
       matrix = compose(
         translate(newWidth / 2, newHeight / 2),
-        rotate(angleRadians),
+        rotate(inverse ? -angleRadians : angleRadians),
         translate(-currentWidth / 2, -currentHeight / 2),
       );
 
@@ -125,6 +129,18 @@ const transformPoints = (
     transformedPoints = transformedPoints.map((p) => applyToPoint(matrix, p));
   }
 
+  // Handle crop last if inverting
+  if (inverse) {
+    const crop = edits.find((edit) => edit.action === 'crop');
+    if (crop) {
+      const { x: cropX, y: cropY } = crop.parameters;
+      transformedPoints = transformedPoints.map((p) => ({
+        x: p.x + cropX,
+        y: p.y + cropY,
+      }));
+    }
+  }
+
   return {
     points: transformedPoints,
     currentWidth,

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -68,11 +68,7 @@
   let currentMemoryAssetFull = $derived.by(async () =>
     current?.asset ? await getAssetInfo({ ...authManager.params, id: current.asset.id }) : undefined,
   );
-  let currentTimelineAssets = $derived([
-    ...(current?.previousMemory?.assets ?? []),
-    ...(current?.memory.assets ?? []),
-    ...(current?.nextMemory?.assets ?? []),
-  ]);
+  let currentTimelineAssets = $derived(current?.memory.assets || []);
 
   let isSaved = $derived(current?.memory.isSaved);
   let viewerHeight = $state(0);

web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte

@@ -5,6 +5,7 @@
   import { changePinCode } from '@immich/sdk';
   import { Button, Heading, modalManager, Text, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
 
   let currentPinCode = $state('');
   let newPinCode = $state('');
@@ -37,23 +38,27 @@
   };
 </script>
 
-<form autocomplete="off" onsubmit={handleSubmit}>
-  <div class="flex flex-col gap-6 place-items-center place-content-center">
-    <Heading>{$t('change_pin_code')}</Heading>
-    <PinCodeInput label={$t('current_pin_code')} bind:value={currentPinCode} tabindexStart={1} pinLength={6} />
-    <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={7} pinLength={6} />
-    <PinCodeInput label={$t('confirm_new_pin_code')} bind:value={confirmPinCode} tabindexStart={13} pinLength={6} />
-    <button type="button" onclick={() => modalManager.show(PinCodeResetModal, {})}>
-      <Text color="muted" class="underline" size="small">{$t('forgot_pin_code_question')}</Text>
-    </button>
-  </div>
+<section class="my-4">
+  <div in:fade={{ duration: 200 }}>
+    <form autocomplete="off" onsubmit={handleSubmit} class="mt-6">
+      <div class="flex flex-col gap-6 place-items-center place-content-center">
+        <Heading>{$t('change_pin_code')}</Heading>
+        <PinCodeInput label={$t('current_pin_code')} bind:value={currentPinCode} tabindexStart={1} pinLength={6} />
+        <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={7} pinLength={6} />
+        <PinCodeInput label={$t('confirm_new_pin_code')} bind:value={confirmPinCode} tabindexStart={13} pinLength={6} />
+        <button type="button" onclick={() => modalManager.show(PinCodeResetModal, {})}>
+          <Text color="muted" class="underline" size="small">{$t('forgot_pin_code_question')}</Text>
+        </button>
+      </div>
 
-  <div class="flex justify-end gap-2 mt-4">
-    <Button shape="round" color="secondary" type="button" size="small" onclick={resetForm}>
-      {$t('clear')}
-    </Button>
-    <Button shape="round" type="submit" size="small" loading={isLoading} disabled={!canSubmit}>
-      {$t('save')}
-    </Button>
+      <div class="flex justify-end gap-2 mt-4">
+        <Button shape="round" color="secondary" type="button" size="small" onclick={resetForm}>
+          {$t('clear')}
+        </Button>
+        <Button shape="round" type="submit" size="small" loading={isLoading} disabled={!canSubmit}>
+          {$t('save')}
+        </Button>
+      </div>
+    </form>
   </div>
-</form>
+</section>

web/src/lib/components/user-settings-page/PinCodeSettings.svelte

@@ -20,7 +20,7 @@
 
 <OnEvents {onUserPinCodeReset} />
 
-<section class="my-4 sm:ms-8">
+<section>
   {#if hasPinCode}
     <div in:fade={{ duration: 200 }}>
       <PinCodeChangeForm />

web/src/lib/components/user-settings-page/app-settings.svelte

@@ -59,7 +59,7 @@
 
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
-    <div class="sm:ms-8 flex flex-col gap-6">
+    <div class="ms-8 mt-4 flex flex-col gap-6">
       <Field label={$t('theme_selection')} description={$t('theme_selection_description')}>
         <Switch checked={themeManager.theme.system} onCheckedChange={(checked) => themeManager.setSystem(checked)} />
       </Field>

web/src/lib/components/user-settings-page/change-password-settings.svelte

@@ -23,7 +23,7 @@
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" {onsubmit}>
-      <div class="sm:ms-8 flex flex-col gap-4">
+      <div class="ms-4 mt-4 flex flex-col gap-4">
         <Field label={$t('password')} required>
           <PasswordInput bind:value={password} autocomplete="current-password" />
         </Field>

web/src/lib/components/user-settings-page/device-list.svelte

@@ -3,7 +3,6 @@
   import { deleteAllSessions, deleteSession, getSessions, type SessionResponseDto } from '@immich/sdk';
   import { Button, modalManager, Text, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
   import DeviceCard from './device-card.svelte';
 
   interface Props {
@@ -51,39 +50,33 @@
 </script>
 
 <section class="my-4">
-  <div in:fade={{ duration: 500 }}>
-    <div class="sm:ms-8 flex flex-col gap-4">
-      {#if currentSession}
-        <div class="mb-6">
-          <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
-            {$t('current_device')}
-          </Text>
-          <DeviceCard session={currentSession} />
-        </div>
-      {/if}
-      {#if otherSessions.length > 0}
-        <div class="mb-6">
-          <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
-            {$t('other_devices')}
-          </Text>
-          {#each otherSessions as session, index (session.id)}
-            <DeviceCard {session} onDelete={() => handleDelete(session)} />
-            {#if index !== otherSessions.length - 1}
-              <hr class="my-3" />
-            {/if}
-          {/each}
-        </div>
-
-        <div class="my-3">
-          <hr />
-        </div>
-
-        <div class="flex justify-end">
-          <Button shape="round" color="danger" size="small" onclick={handleDeleteAll}
-            >{$t('log_out_all_devices')}</Button
-          >
-        </div>
-      {/if}
+  {#if currentSession}
+    <div class="mb-6">
+      <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
+        {$t('current_device')}
+      </Text>
+      <DeviceCard session={currentSession} />
     </div>
-  </div>
+  {/if}
+  {#if otherSessions.length > 0}
+    <div class="mb-6">
+      <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
+        {$t('other_devices')}
+      </Text>
+      {#each otherSessions as session, index (session.id)}
+        <DeviceCard {session} onDelete={() => handleDelete(session)} />
+        {#if index !== otherSessions.length - 1}
+          <hr class="my-3" />
+        {/if}
+      {/each}
+    </div>
+
+    <div class="my-3">
+      <hr />
+    </div>
+
+    <div class="flex justify-end">
+      <Button shape="round" color="danger" size="small" onclick={handleDeleteAll}>{$t('log_out_all_devices')}</Button>
+    </div>
+  {/if}
 </section>

web/src/lib/components/user-settings-page/download-settings.svelte

@@ -39,7 +39,7 @@
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" {onsubmit}>
-      <div class="sm:ms-8 flex flex-col gap-4">
+      <div class="ms-4 mt-4 flex flex-col gap-4">
         <SettingInputField
           inputType={SettingInputFieldType.NUMBER}
           label={$t('archive_size')}

web/src/lib/components/user-settings-page/feature-settings.svelte

@@ -67,9 +67,9 @@
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" {onsubmit}>
-      <div class="sm:ms-4 md:ms-8 flex flex-col">
+      <div class="ms-4 mt-4 flex flex-col">
         <SettingAccordion key="albums" title={$t('albums')} subtitle={$t('albums_feature_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-6 flex flex-col gap-4">
             <Field label={$t('albums_default_sort_order')} description={$t('albums_default_sort_order_description')}>
               <Select
                 options={[
@@ -83,7 +83,7 @@
         </SettingAccordion>
 
         <SettingAccordion key="folders" title={$t('folders')} subtitle={$t('folders_feature_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-6 flex flex-col gap-4">
             <Field label={$t('enable')}>
               <Switch bind:checked={foldersEnabled} />
             </Field>
@@ -97,7 +97,7 @@
         </SettingAccordion>
 
         <SettingAccordion key="memories" title={$t('time_based_memories')} subtitle={$t('photos_from_previous_years')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-6 flex flex-col gap-4">
             <Field label={$t('enable')}>
               <Switch bind:checked={memoriesEnabled} />
             </Field>
@@ -109,7 +109,7 @@
         </SettingAccordion>
 
         <SettingAccordion key="people" title={$t('people')} subtitle={$t('people_feature_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-6 flex flex-col gap-4">
             <Field label={$t('enable')}>
               <Switch bind:checked={peopleEnabled} />
             </Field>
@@ -123,7 +123,7 @@
         </SettingAccordion>
 
         <SettingAccordion key="rating" title={$t('rating')} subtitle={$t('rating_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-6 flex flex-col gap-4">
             <Field label={$t('enable')}>
               <Switch bind:checked={ratingsEnabled} />
             </Field>
@@ -131,7 +131,7 @@
         </SettingAccordion>
 
         <SettingAccordion key="shared-links" title={$t('shared_links')} subtitle={$t('shared_links_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-6 flex flex-col gap-4">
             <Field label={$t('enable')}>
               <Switch bind:checked={sharedLinksEnabled} />
             </Field>
@@ -145,7 +145,7 @@
         </SettingAccordion>
 
         <SettingAccordion key="tags" title={$t('tags')} subtitle={$t('tag_feature_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-6 flex flex-col gap-4">
             <Field label={$t('enable')}>
               <Switch bind:checked={tagsEnabled} />
             </Field>
@@ -159,7 +159,7 @@
         </SettingAccordion>
 
         <SettingAccordion key="cast" title={$t('cast')} subtitle={$t('cast_description')}>
-          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
+          <div class="ms-4 mt-6 flex flex-col gap-4">
             <Field label={$t('gcast_enabled')} description={$t('gcast_enabled_description')}>
               <Switch bind:checked={gCastEnabled} />
             </Field>

web/src/lib/components/user-settings-page/notifications-settings.svelte

@@ -42,7 +42,7 @@
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" {onsubmit}>
-      <div class="sm:ms-8 flex flex-col gap-6">
+      <div class="ms-4 mt-4 flex flex-col gap-6">
         <Field label={$t('enable')} description={$t('notification_toggle_setting_description')}>
           <Switch bind:checked={emailNotificationsEnabled} />
         </Field>

web/src/lib/components/user-settings-page/oauth-settings.svelte

@@ -45,7 +45,7 @@
 
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
-    <div class="sm:ms-8 flex justify-end">
+    <div class="flex justify-end">
       {#if loading}
         <div class="flex place-content-center place-items-center">
           <LoadingSpinner />

web/src/lib/components/user-settings-page/user-api-key-list.svelte

@@ -33,7 +33,7 @@
 <OnEvents {onApiKeyCreate} {onApiKeyUpdate} {onApiKeyDelete} />
 
 <section class="my-4">
-  <div class="sm:ms-8 flex flex-col gap-2" in:fade={{ duration: 500 }}>
+  <div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
     <div class="mb-2 flex justify-end">
       <Button leadingIcon={Create.icon} shape="round" size="small" onclick={() => Create.onAction(Create)}>
         {Create.title}

web/src/lib/components/user-settings-page/user-profile-settings.svelte

@@ -33,7 +33,7 @@
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" onsubmit={preventDefault(bubble('submit'))}>
-      <div class="sm:ms-8 flex flex-col gap-4">
+      <div class="ms-4 mt-4 flex flex-col gap-4">
         <Field label={$t('user_id')} disabled>
           <Input bind:value={editedUser.id} />
         </Field>

web/src/lib/components/user-settings-page/user-purchase-settings.svelte

@@ -105,7 +105,7 @@
 </script>
 
 <section class="my-4">
-  <div class="sm:ms-8" in:fade={{ duration: 500 }}>
+  <div in:fade={{ duration: 500 }}>
     {#if $isPurchased}
       <!-- BADGE TOGGLE -->
       <div class="mb-4">

web/src/lib/components/user-settings-page/user-usage-statistic.svelte

@@ -65,7 +65,7 @@
   </TableRow>
 {/snippet}
 
-<section class="my-4 w-full">
+<section class="my-6 w-full">
   <Heading size="tiny">{$t('photos_and_videos')}</Heading>
   <Table striped spacing="small" class="mt-4" size="small">
     <TableHeader>