release: v0.19.0

Release v0.19.0. See the `## [0.19.0] — 2026-09-29` section of
[CHANGELOG.md](https://github.com/ralksta/immich-folio/blob/dev/CHANGELOG.md)
for the full list.

Highlights: client proofing links (#683), custom content pages (#738),
asset picker search (#740), concurrent-edit detection (#742), env-locked
settings (#739), an accessibility baseline (#741), three security fixes
with advisories (#737, #755, #759), and a pre-release quality pass
(#780–#797).

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: ralksta <ralksta@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Ralf <rohlenbo79@gmail.com>
Co-authored-by: Paul Thies <110185070+ImScheinox@users.noreply.github.com>
Co-authored-by: lancetm714 <108419425+lancetm714@users.noreply.github.com>
Co-authored-by: Lance Martin <lancetaylor95@gmail.com>

app/[...path]/__tests__/lightbox-filtered-unheart.test.tsx

@@ -0,0 +1,85 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, within } from '@testing-library/react';
+import { PhotoGrid, type PhotoItem } from '../PhotoGrid';
+
+/**
+ * With "show selected" on, the lightbox walks the favourites only. Un-hearting
+ * the photo on screen takes it out of that list while the viewer is open: on
+ * the last favourite the index pointed past the end and the viewer crashed the
+ * page (`current` undefined), and on the only one the list was empty.
+ */
+
+vi.mock('next/image', () => ({
+  // eslint-disable-next-line @next/next/no-img-element
+  default: ({ alt }: { alt?: string }) => <img alt={alt ?? ''} />,
+}));
+vi.mock('@/components/FadeIn', () => ({
+  FadeIn: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+const photo = (id: string): PhotoItem => ({
+  id,
+  type: 'image',
+  thumbUrl: `/t/${id}`,
+  previewUrl: `/p/${id}`,
+  exifUrl: `/e/${id}`,
+  aspectRatio: 1.5,
+});
+
+const ASSETS = [photo('a1'), photo('a2'), photo('a3')];
+
+let store: Map<string, string>;
+
+beforeEach(() => {
+  // Node 26 defines its own global localStorage (undefined without
+  // --localstorage-file), which shadows jsdom's; give the test a working one.
+  store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+  window.history.replaceState(null, '', '/wedding');
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+async function openFilteredLightboxOn(n: number) {
+  render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+  fireEvent.click(await screen.findByText(/❤️ \d Selected/));
+  fireEvent.click(screen.getByLabelText(`View photo ${n}`));
+  return screen.getByRole('dialog');
+}
+
+const shownPhoto = (dialog: HTMLElement) =>
+  dialog.querySelector('img')?.getAttribute('src')?.split('?')[0];
+
+describe('un-hearting inside the filtered lightbox', () => {
+  it('moves to the previous favourite when the last one is removed', async () => {
+    store.set('folio_fav_wedding', JSON.stringify(['a1', 'a3']));
+    const dialog = await openFilteredLightboxOn(2);
+    expect(shownPhoto(dialog)).toBe('/p/a3');
+
+    fireEvent.click(within(dialog).getByLabelText('Remove from favorites'));
+
+    const after = screen.getByRole('dialog');
+    expect(shownPhoto(after)).toBe('/p/a1');
+    expect(within(after).getByText('1 / 1')).toBeTruthy();
+    expect(new URLSearchParams(window.location.search).get('photo')).toBe('a1');
+  });
+
+  it('closes the viewer when the only favourite is removed', async () => {
+    store.set('folio_fav_wedding', JSON.stringify(['a2']));
+    const dialog = await openFilteredLightboxOn(1);
+
+    fireEvent.click(within(dialog).getByLabelText('Remove from favorites'));
+
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(new URLSearchParams(window.location.search).get('photo')).toBeNull();
+  });
+});

app/[...path]/__tests__/loadAlbumBlocks.test.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { JournalBlock } from '@/lib/journal';
+
+const getAlbumAssetsRaw = vi.fn();
+vi.mock('@/lib/immich', () => ({
+  immich: {
+    get getAlbumAssetsRaw() {
+      return getAlbumAssetsRaw;
+    },
+  },
+}));
+
+import { loadAlbumBlocks } from '../essayPayload';
+
+const album = (albumId: string) => ({ type: 'album', albumId, line: 0 }) as unknown as JournalBlock;
+const photo = { type: 'photo', line: 0 } as unknown as JournalBlock;
+
+describe('loadAlbumBlocks', () => {
+  beforeEach(() => {
+    getAlbumAssetsRaw.mockReset();
+  });
+
+  // It used to await each album before asking for the next, so a page with
+  // three album blocks waited for three Immich round trips in a row.
+  it('asks for every album before any answer arrives', async () => {
+    const pending: Array<() => void> = [];
+    getAlbumAssetsRaw.mockImplementation(
+      (id: string) =>
+        new Promise((resolve) => pending.push(() => resolve([{ id: `${id}-asset` }]))),
+    );
+
+    const result = loadAlbumBlocks([album('a'), photo, album('b'), album('c')], () => {});
+    await Promise.resolve();
+
+    expect(getAlbumAssetsRaw).toHaveBeenCalledTimes(3);
+    pending.forEach((resolve) => resolve());
+    expect([...(await result).keys()]).toEqual(['a', 'b', 'c']);
+  });
+
+  it('loads an album named by two blocks once', async () => {
+    getAlbumAssetsRaw.mockResolvedValue([]);
+
+    await loadAlbumBlocks([album('a'), album('a')], () => {});
+
+    expect(getAlbumAssetsRaw).toHaveBeenCalledTimes(1);
+  });
+
+  it('leaves out an album that fails and reports it, keeping the rest', async () => {
+    const failure = new Error('immich down');
+    getAlbumAssetsRaw.mockImplementation(async (id: string) => {
+      if (id === 'b') throw failure;
+      return [{ id: `${id}-asset` }];
+    });
+    const onError = vi.fn();
+
+    const result = await loadAlbumBlocks([album('a'), album('b'), album('c')], onError);
+
+    expect([...result.keys()]).toEqual(['a', 'c']);
+    expect(onError).toHaveBeenCalledWith('b', failure);
+  });
+});

app/[...path]/__tests__/metadata-title.test.ts

@@ -0,0 +1,161 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { Metadata } from 'next';
+
+/**
+ * generateMetadata runs for any URL a visitor types. It used to start from
+ * `title = slug` and keep that whenever nothing matched, so an unknown path,
+ * an offline subpage or a locked album put the requested slug in the
+ * `<title>` and in a validly signed share-card URL. Every branch that finds
+ * nothing — or finds it locked — now answers with a dictionary title and no
+ * card of its own.
+ */
+
+vi.mock('next/navigation', () => ({
+  notFound: () => {
+    throw new Error('NEXT_NOT_FOUND');
+  },
+}));
+vi.mock('next/headers', () => ({
+  cookies: async () => ({ get: () => undefined }),
+}));
+vi.mock('@/lib/admin/auth', () => ({ isAdminAuthenticated: async () => false }));
+vi.mock('@/lib/i18n/server', async () => {
+  const { getDictionary } = await import('@/lib/i18n');
+  return { getServerDictionary: () => getDictionary('en') };
+});
+vi.mock('@/lib/ogImage', () => ({
+  ogImageUrl: (title: string, subtitle = '') =>
+    `/api/og?title=${encodeURIComponent(title)}&subtitle=${encodeURIComponent(subtitle)}&sig=x`,
+}));
+vi.mock('../contentPage', () => ({
+  contentPageMetadata: vi.fn(async () => null),
+  renderContentPage: vi.fn(async () => null),
+}));
+
+const locked = vi.hoisted(() => ({ keys: new Set<string>() }));
+vi.mock('@/lib/auth', () => ({
+  isProtected: (key: string) => locked.keys.has(key),
+  isAuthenticated: () => false,
+  withoutLockedAlbums: <T>(albums: T[]) => albums,
+}));
+
+const immich = vi.hoisted(() => ({
+  isSubpageSlug: vi.fn((slug: string) => slug === 'travel' || slug === 'solo'),
+  getSubpageAlbums: vi.fn(),
+  getAlbumBySlug: vi.fn(),
+}));
+vi.mock('@/lib/immich', () => ({ immich }));
+
+const ICELAND = {
+  id: 'album-1',
+  albumName: 'Iceland',
+  slug: 'iceland',
+  assets: [{ id: 'a1', type: 'IMAGE' }],
+  albumThumbnailAssetId: null,
+};
+
+import { generateMetadata } from '../page';
+import { getDictionary } from '@/lib/i18n';
+
+const en = getDictionary('en');
+
+const meta = (path: string[]) =>
+  generateMetadata({ params: Promise.resolve({ path }), searchParams: Promise.resolve({}) });
+
+/** Every string the metadata would put in the page head or a share URL. */
+function emitted(m: Metadata): string {
+  return JSON.stringify(m);
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  locked.keys.clear();
+  immich.getAlbumBySlug.mockImplementation(async (slug: string) =>
+    slug === 'iceland' ? ICELAND : null,
+  );
+  immich.getSubpageAlbums.mockImplementation(async (slug: string) => {
+    if (slug === 'travel') {
+      return {
+        subpage: { slug: 'travel', name: 'travel', title: 'Travel', albumIds: ['album-1', 'b'] },
+        albums: [ICELAND, { ...ICELAND, id: 'b', slug: 'norway', albumName: 'Norway' }],
+      };
+    }
+    if (slug === 'solo') {
+      return { subpage: { slug: 'solo', name: 'solo', albumIds: ['album-1'] }, albums: [ICELAND] };
+    }
+    return null;
+  });
+});
+
+describe('page metadata never echoes the requested path', () => {
+  it.each([
+    ['an unknown slug', ['unknown-visitor-text']],
+    ['an unknown album under a real subpage', ['travel', 'nope']],
+    ['a three-segment path', ['iceland', 'x', 'y']],
+  ])('gives %s the generic not-found title and no card', async (_, path) => {
+    const m = await meta(path);
+
+    expect(m.title).toBe(en.error.notFoundTitle);
+    expect(m.openGraph).toBeUndefined();
+    expect(m.twitter).toBeUndefined();
+    for (const segment of path) expect(emitted(m)).not.toContain(encodeURIComponent(segment));
+  });
+
+  it('drops the layout robots tag on a not-found path, leaving only Next’s noindex', async () => {
+    const m = await meta(['nope']);
+    expect(m.robots).toBeNull();
+  });
+
+  it('treats an offline subpage like any unknown slug', async () => {
+    // isSubpageSlug is false for `enabled: false`, and no album has the slug.
+    const m = await meta(['dubai']);
+    expect(m.title).toBe(en.error.notFoundTitle);
+    expect(emitted(m)).not.toContain('dubai');
+  });
+
+  it('gives a locked standalone album the generic protected title', async () => {
+    locked.keys.add('album-1');
+    const m = await meta(['iceland']);
+
+    expect(m.title).toBe(en.password.protectedPage);
+    expect(emitted(m)).not.toContain('iceland');
+    expect(emitted(m)).not.toContain('Iceland');
+    expect(m.openGraph).toBeUndefined();
+  });
+
+  it('gives a locked multi-album subpage the protected title, not its slug', async () => {
+    locked.keys.add('travel');
+    const m = await meta(['travel']);
+
+    expect(m.title).toBe(en.password.protectedPage);
+    expect(emitted(m)).not.toContain('travel');
+  });
+
+  it('gives an album under a locked subpage the protected title', async () => {
+    locked.keys.add('travel');
+    const m = await meta(['travel', 'iceland']);
+
+    expect(m.title).toBe(en.password.protectedPage);
+    expect(emitted(m)).not.toContain('Iceland');
+  });
+
+  it('gives a locked album on a single-album subpage the protected title', async () => {
+    locked.keys.add('album-1');
+    const m = await meta(['solo']);
+
+    expect(m.title).toBe(en.password.protectedPage);
+    expect(emitted(m)).not.toContain('solo');
+  });
+
+  it('still describes published content by its own name', async () => {
+    const album = await meta(['iceland']);
+    expect(album.title).toBe('Iceland');
+    expect(emitted(album)).toContain(encodeURIComponent('Iceland'));
+
+    const subpage = await meta(['travel']);
+    expect(subpage.title).toBe('Travel');
+
+    const nested = await meta(['travel', 'iceland']);
+    expect(nested.title).toBe('Iceland');
+  });
+});

app/[...path]/__tests__/path-depth.test.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+/**
+ * The catch-all answers one segment (subpage, content page, standalone album)
+ * and two (subpage/album). A third segment used to fall through to the
+ * one-segment branch, which only reads `path[0]`: `/travel/iceland/anything`
+ * rendered the Travel subpage and `/iceland/x/y` the Iceland album, each with
+ * a 200, under an endless supply of URLs.
+ */
+
+const NOT_FOUND = new Error('NEXT_NOT_FOUND');
+
+vi.mock('next/navigation', () => ({
+  notFound: () => {
+    throw NOT_FOUND;
+  },
+}));
+vi.mock('next/headers', () => ({
+  cookies: async () => ({ get: () => undefined }),
+}));
+vi.mock('@/lib/admin/auth', () => ({ isAdminAuthenticated: async () => false }));
+
+const immich = vi.hoisted(() => ({
+  isSubpageSlug: vi.fn((slug: string) => slug === 'travel'),
+  getSubpageAlbums: vi.fn(),
+  getAlbumBySlug: vi.fn(),
+  getStandaloneAlbums: vi.fn(async () => []),
+  getSubpages: vi.fn(async () => []),
+  getAssetInfo: vi.fn(async () => null),
+}));
+vi.mock('@/lib/immich', () => ({ immich }));
+
+const ALBUM = {
+  id: 'album-1',
+  albumName: 'Iceland',
+  slug: 'iceland',
+  assets: [],
+  albumThumbnailAssetId: null,
+};
+
+import PathPage, { generateMetadata } from '../page';
+import { getServerDictionary } from '@/lib/i18n/server';
+
+const call = (path: string[]) => ({
+  params: Promise.resolve({ path }),
+  searchParams: Promise.resolve({}),
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  immich.getAlbumBySlug.mockResolvedValue(ALBUM);
+  immich.getSubpageAlbums.mockResolvedValue({
+    subpage: { slug: 'travel', name: 'Travel', albumIds: ['album-1', 'album-2'] },
+    albums: [ALBUM, { ...ALBUM, id: 'album-2', slug: 'norway', albumName: 'Norway' }],
+  });
+});
+
+describe('catch-all path depth', () => {
+  it.each([[['iceland', 'x', 'y']], [['travel', 'iceland', 'extra']], [['travel', 'a', 'b', 'c']]])(
+    'answers %j with a 404',
+    async (path) => {
+      await expect(PathPage(call(path))).rejects.toBe(NOT_FOUND);
+      expect(immich.getAlbumBySlug).not.toHaveBeenCalled();
+      expect(immich.getSubpageAlbums).not.toHaveBeenCalled();
+    },
+  );
+
+  it('gives a three-segment path no album metadata, only the not-found title', async () => {
+    const meta = await generateMetadata(call(['iceland', 'x', 'y']));
+    expect(meta.title).toBe(getServerDictionary().error.notFoundTitle);
+    expect(immich.getAlbumBySlug).not.toHaveBeenCalled();
+  });
+
+  it('still renders one and two segments', async () => {
+    await expect(PathPage(call(['iceland']))).resolves.toBeTruthy();
+    await expect(PathPage(call(['travel', 'iceland']))).resolves.toBeTruthy();
+  });
+});

app/[...path]/__tests__/proofing-count.test.tsx

@@ -0,0 +1,121 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, within } from '@testing-library/react';
+import { PhotoGrid, type PhotoItem } from '../PhotoGrid';
+import { EssayView } from '../EssayView';
+import { parseEssayMarkdown } from '@/lib/essay';
+import { encodeEmail } from '@/lib/emailObfuscation';
+
+/**
+ * The anonymous proofing selection lives under `folio_fav_<albumName>`, so it
+ * can hold tokens this grid does not show: a photo since removed from the
+ * album, or a favourite from another album whose name slugs the same way.
+ * Every count the visitor sees must be the photos of *this* album that are
+ * selected — the modal's download button already counted that way, while the
+ * bar, the title and the email subject counted the whole stored set.
+ */
+
+vi.mock('next/image', () => ({
+  // eslint-disable-next-line @next/next/no-img-element
+  default: ({ alt }: { alt?: string }) => <img alt={alt ?? ''} />,
+}));
+vi.mock('@/components/Lightbox', () => ({ Lightbox: () => null }));
+vi.mock('@/components/LeafletMap', () => ({
+  LeafletMap: () => null,
+  escapeHtml: (s: string) => s,
+}));
+vi.mock('@/components/FadeIn', () => ({
+  FadeIn: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+const photo = (id: string): PhotoItem => ({
+  id,
+  type: 'image',
+  thumbUrl: `/t/${id}`,
+  previewUrl: `/p/${id}`,
+  exifUrl: `/e/${id}`,
+  aspectRatio: 1.5,
+});
+
+const ASSETS = [photo('a1'), photo('a2'), photo('a3')];
+
+let store: Map<string, string>;
+
+beforeEach(() => {
+  // Node 26 defines its own global localStorage (undefined without
+  // --localstorage-file), which shadows jsdom's; give the test a working one.
+  store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe('proofing counts in the album grid', () => {
+  it('counts only this album’s photos, not stale or foreign favourites', async () => {
+    // One photo of this album, one removed photo, one from a same-named album.
+    store.set('folio_fav_wedding', JSON.stringify(['a2', 'gone', 'other-album']));
+    render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+
+    expect(await screen.findByText('❤️ 1 Selected')).toBeTruthy();
+
+    fireEvent.click(screen.getByText('Share & Export'));
+    expect(screen.getByText('❤️ Selection (1)')).toBeTruthy();
+    expect(screen.getByText(/You have selected 1 photo\./)).toBeTruthy();
+  });
+
+  it('shows no selection bar when only foreign favourites are stored', () => {
+    store.set('folio_fav_wedding', JSON.stringify(['gone', 'other-album']));
+    render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+    // `render` flushes the hydration effect, so the stored set is loaded here.
+    expect(screen.queryByText(/Selected/)).toBeNull();
+    expect(screen.queryByText('Share & Export')).toBeNull();
+  });
+
+  it('keeps "Show All" reachable after the last favourite is removed in the filter', async () => {
+    store.set('folio_fav_wedding', JSON.stringify(['a1']));
+    render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+    fireEvent.click(await screen.findByText('❤️ 1 Selected'));
+    // Filtered to the one favourite; un-heart it and the grid is empty.
+    fireEvent.click(screen.getByLabelText('Remove favorite'));
+    expect(screen.queryByLabelText('Add favorite')).toBeNull();
+    // The empty state offers "Show All" too; this is about the bar's own.
+    const bar = document.querySelector<HTMLElement>('.proofing-sticky-bar')!;
+    fireEvent.click(within(bar).getByText('Show All'));
+    expect(screen.getAllByLabelText('Add favorite')).toHaveLength(3);
+  });
+
+  it('puts the album count into the email subject', async () => {
+    store.set('folio_fav_wedding', JSON.stringify(['a1', 'gone']));
+    render(
+      <PhotoGrid
+        assets={ASSETS}
+        proofing
+        albumName="Wedding"
+        allowMailto
+        encodedMailto={encodeEmail('hello@example.com')}
+      />,
+    );
+    fireEvent.click(await screen.findByText('Share & Export'));
+    const location = { href: 'http://localhost/wedding' };
+    vi.stubGlobal('location', location);
+    fireEvent.click(screen.getByText('✉️ Send Email to Photographer'));
+    expect(decodeURIComponent(location.href)).toMatch(/Photo Selection \(1 items?\)/);
+  });
+});
+
+describe('proofing counts in an essay', () => {
+  it('counts only the essay’s photos', async () => {
+    store.set('folio_fav_story', JSON.stringify(['a3', 'gone']));
+    const essay = parseEssayMarkdown('---\ntitle: Story\n---\n\n![a1, a3](caption)\n');
+    render(<EssayView essay={essay} assets={ASSETS} title="Story" proofing />);
+    expect(await screen.findByText('❤️ 1 Selected')).toBeTruthy();
+  });
+});

app/[...path]/__tests__/proofing-filter-empty.test.tsx

@@ -0,0 +1,77 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, within } from '@testing-library/react';
+import { PhotoGrid, type PhotoItem } from '../PhotoGrid';
+
+/**
+ * With "show selected" on, un-hearting the last favourite emptied the grid and
+ * left nothing between the album header and the footer — no word on why, and
+ * the only way back a small pill in the corner.
+ */
+
+vi.mock('next/image', () => ({
+  // eslint-disable-next-line @next/next/no-img-element
+  default: ({ alt }: { alt?: string }) => <img alt={alt ?? ''} />,
+}));
+vi.mock('@/components/FadeIn', () => ({
+  FadeIn: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+const photo = (id: string): PhotoItem => ({
+  id,
+  type: 'image',
+  thumbUrl: `/t/${id}`,
+  previewUrl: `/p/${id}`,
+  exifUrl: `/e/${id}`,
+  aspectRatio: 1.5,
+});
+
+const ASSETS = [photo('a1'), photo('a2'), photo('a3')];
+
+let store: Map<string, string>;
+
+beforeEach(() => {
+  // Node 26 defines its own global localStorage (undefined without
+  // --localstorage-file), which shadows jsdom's; give the test a working one.
+  store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+  window.history.replaceState(null, '', '/wedding');
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe('favourites filter with nothing left', () => {
+  it('says nothing is selected and offers the way back to all photos', async () => {
+    store.set('folio_fav_wedding', JSON.stringify(['a2']));
+    render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+
+    fireEvent.click(await screen.findByText('❤️ 1 Selected'));
+    expect(screen.getAllByLabelText(/^View photo/)).toHaveLength(1);
+
+    fireEvent.click(screen.getByLabelText('Remove favorite'));
+
+    const empty = screen.getByRole('status');
+    expect(within(empty).getByText('No photos selected.')).toBeTruthy();
+    expect(screen.queryAllByLabelText(/^View photo/)).toHaveLength(0);
+
+    fireEvent.click(within(empty).getByRole('button', { name: 'Show All' }));
+    expect(screen.getAllByLabelText(/^View photo/)).toHaveLength(3);
+    expect(screen.queryByText('No photos selected.')).toBeNull();
+  });
+
+  it('shows no empty state while the filter still has photos', async () => {
+    store.set('folio_fav_wedding', JSON.stringify(['a1', 'a2']));
+    render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+    fireEvent.click(await screen.findByText('❤️ 2 Selected'));
+    expect(screen.getAllByLabelText(/^View photo/)).toHaveLength(2);
+    expect(screen.queryByText('No photos selected.')).toBeNull();
+  });
+});

app/[...path]/__tests__/proofing-lazy.test.tsx

@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import { renderToReadableStream } from 'react-dom/server';
+import type { ReactNode } from 'react';
+import { PhotoGrid, type PhotoItem } from '../PhotoGrid';
+import { EssayView } from '../EssayView';
+import { parseEssayMarkdown } from '@/lib/essay';
+
+/**
+ * Proofing is off on most album pages, but its provider, modal and session
+ * controls used to be imported statically by the grid and the essay, so every
+ * album, essay and journal page shipped them (~5 KB gzip). They now load
+ * through `next/dynamic` only where proofing is on.
+ *
+ * The mocks below pass every module through unchanged and only note that it
+ * was loaded: a page without proofing must not load any of them, and a page
+ * with proofing must still render the hearts — on the server too, so they are
+ * in the HTML before the chunk arrives.
+ */
+
+const loaded = vi.hoisted(() => new Set<string>());
+
+vi.mock('@/components/ProofingContext', async (importOriginal) => {
+  loaded.add('ProofingContext');
+  return importOriginal();
+});
+vi.mock('@/components/ProofingModal', async (importOriginal) => {
+  loaded.add('ProofingModal');
+  return importOriginal();
+});
+vi.mock('@/components/ProofSessionControls', async (importOriginal) => {
+  loaded.add('ProofSessionControls');
+  return importOriginal();
+});
+
+// The build aliases `next/dynamic` to the App Router implementation in app/;
+// the bare package resolves to the Pages Router one.
+vi.mock('next/dynamic', async () => ({
+  default: (await import('next/dist/shared/lib/app-dynamic')).default,
+}));
+vi.mock('next/image', () => ({
+  // eslint-disable-next-line @next/next/no-img-element
+  default: ({ alt }: { alt?: string }) => <img alt={alt ?? ''} />,
+}));
+vi.mock('@/components/LeafletMap', () => ({
+  LeafletMap: () => null,
+  escapeHtml: (s: string) => s,
+}));
+vi.mock('@/components/FadeIn', () => ({
+  FadeIn: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+
+const photo = (id: string): PhotoItem => ({
+  id,
+  type: 'image',
+  thumbUrl: `/t/${id}`,
+  previewUrl: `/p/${id}`,
+  exifUrl: `/e/${id}`,
+  aspectRatio: 1.5,
+});
+
+const ASSETS = [photo('a1'), photo('a2'), photo('a3')];
+const ESSAY = parseEssayMarkdown('---\ntitle: Story\n---\n\n![a1, a3](caption)\n');
+
+async function serverHtml(node: ReactNode): Promise<string> {
+  const stream = await renderToReadableStream(node);
+  await stream.allReady;
+  return new Response(stream).text();
+}
+
+const hearts = (html: string) => html.match(/aria-label="Add favorite"/g)?.length ?? 0;
+
+beforeEach(() => {
+  // Node defines its own global localStorage (undefined without
+  // --localstorage-file), which shadows jsdom's; give the test a working one.
+  const store = new Map<string, string>();
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, String(v)),
+    removeItem: (k: string) => void store.delete(k),
+    clear: () => store.clear(),
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+// Runs first: the set records loads for the whole file.
+describe('proofing off', () => {
+  it('loads neither the provider nor the modal nor the session controls', async () => {
+    const grid = render(<PhotoGrid assets={ASSETS} albumName="Wedding" />);
+    const essay = render(<EssayView essay={ESSAY} assets={ASSETS} title="Story" />);
+    expect(grid.container.querySelectorAll('img')).toHaveLength(3);
+    expect(essay.container.querySelectorAll('img')).toHaveLength(2);
+    expect(screen.queryByLabelText('Add favorite')).toBeNull();
+
+    await serverHtml(<PhotoGrid assets={ASSETS} albumName="Wedding" />);
+    expect([...loaded]).toEqual([]);
+  });
+});
+
+describe('proofing on', () => {
+  it('renders the hearts on the server', async () => {
+    const html = await serverHtml(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+    expect(hearts(html)).toBe(3);
+    const essay = await serverHtml(
+      <EssayView essay={ESSAY} assets={ASSETS} title="Story" proofing />,
+    );
+    expect(hearts(essay)).toBe(2);
+  });
+
+  it('shares one context between the grid and the lazily loaded provider and modal', async () => {
+    render(<PhotoGrid assets={ASSETS} proofing albumName="Wedding" />);
+    const [first] = await screen.findAllByLabelText('Add favorite');
+    fireEvent.click(first);
+    // The heart, the selection bar and the modal all read the same state.
+    expect(screen.getAllByLabelText('Remove favorite')).toHaveLength(1);
+    fireEvent.click(await screen.findByText('Share & Export'));
+    expect(await screen.findByText(/You have selected 1 photo\./)).toBeTruthy();
+    expect(loaded).toContain('ProofingContext');
+    expect(loaded).toContain('ProofingModal');
+  });
+});

app/[...path]/__tests__/proofing-mailto-wiring.test.ts

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * The page renders albums and essays from several branches — subpage album,
+ * essay, single-album subpage, standalone album — and each one passes the
+ * proofing props by hand. The dialog hides its email button without a
+ * recipient (#736), so a branch that forwards `allowMailto` but forgets
+ * `encodedMailto` silently loses the button on that kind of page. #746 missed
+ * two of the four; this keeps the next branch from doing the same.
+ */
+
+const source = fs.readFileSync(path.join(__dirname, '..', 'page.tsx'), 'utf8');
+
+/** Every `<AlbumDetailView … />` and `<EssayView … />` element in the page. */
+const elements = source.match(/<(AlbumDetailView|EssayView)\b[\s\S]*?\/>/g) ?? [];
+
+describe('proofing email wiring in the catch-all page', () => {
+  it('finds the album and essay views', () => {
+    expect(elements.length).toBeGreaterThanOrEqual(4);
+  });
+
+  it('passes the recipient wherever it passes the email switch', () => {
+    const missing = elements
+      .filter((el) => el.includes('allowMailto='))
+      .filter((el) => !el.includes('encodedMailto='))
+      .map((el) => el.split('\n').slice(0, 3).join(' ').trim());
+    expect(missing).toEqual([]);
+  });
+});