From 14cafca7409fe7fcd2f0455651a7be90765c77df Mon Sep 17 00:00:00 2001
From: Timothy <timothy.look@gmail.com>
Date: Tue, 7 Jul 2026 15:39:54 +0200
Subject: [PATCH] feat(web): media browse, global search & trash screens (#141)

- MediaBrowseScreen (/app/media): one parameterized screen for all 9 top-level
  kinds with an in-screen kind switcher, per-kind search box, 100/page paging
- SearchScreen (/app/search): grouped per-kind results with counts + 'See all';
  TopBar search input now navigates here
- TrashScreen (/app/trash): state:FileNotFound results, multi-select + Empty Trash
  via DELETE /api/media-items and /api/maintenance/empty_trash (confirm dialogs)
- Shared media/mediaKinds (icon/label maps, hueOf, duration helpers) + MediaPosterCard;
  ChannelBuilder and CollectionsScreen now reuse the single-source maps (their
  exhaustive Record<LibraryBrowseMediaType> had to cover the 6 new kinds anyway)
- api: search.ts, mediaItems.ts, maintenance.ts (+ URL-assert tests)
- One consolidated 'Browse' nav entry with an in-screen kind switcher instead of
  9 per-kind nav rows (deviation from Blazor's per-kind Media links)
- Nav: Media group gains Browse/Search/Trash; Settings Classic-UI help trimmed

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/App.tsx                       |  78 ++++++++-
 web/src/api/index.ts                  |   3 +
 web/src/api/maintenance.test.ts       |  25 +++
 web/src/api/maintenance.ts            |  17 ++
 web/src/api/mediaItems.test.ts        |  31 ++++
 web/src/api/mediaItems.ts             |  17 ++
 web/src/api/search.test.ts            |  63 +++++++
 web/src/api/search.ts                 |  33 ++++
 web/src/builder/ChannelBuilder.tsx    |  40 +----
 web/src/media/MediaPosterCard.tsx     |  73 ++++++++
 web/src/media/mediaKinds.ts           | 113 ++++++++++++
 web/src/screens/CollectionsScreen.tsx |  13 +-
 web/src/screens/MediaBrowseScreen.tsx | 201 +++++++++++++++++++++
 web/src/screens/SearchScreen.tsx      | 176 +++++++++++++++++++
 web/src/screens/SettingsScreen.tsx    |   2 +-
 web/src/screens/TrashScreen.tsx       | 243 ++++++++++++++++++++++++++
 web/src/shell.css                     | 104 +++++++++++
 17 files changed, 1178 insertions(+), 54 deletions(-)
 create mode 100644 web/src/api/maintenance.test.ts
 create mode 100644 web/src/api/maintenance.ts
 create mode 100644 web/src/api/mediaItems.test.ts
 create mode 100644 web/src/api/mediaItems.ts
 create mode 100644 web/src/api/search.test.ts
 create mode 100644 web/src/api/search.ts
 create mode 100644 web/src/media/MediaPosterCard.tsx
 create mode 100644 web/src/media/mediaKinds.ts
 create mode 100644 web/src/screens/MediaBrowseScreen.tsx
 create mode 100644 web/src/screens/SearchScreen.tsx
 create mode 100644 web/src/screens/TrashScreen.tsx

diff --git a/web/src/App.tsx b/web/src/App.tsx
index fbce3ee0b..b5a18844e 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -62,7 +62,10 @@ import { CollectionsScreen } from './screens/CollectionsScreen';
 import { FFmpegProfilesScreen } from './screens/FFmpegProfilesScreen';
 import { FillerPresetsScreen } from './screens/FillerPresetsScreen';
 import { LogsScreen } from './screens/LogsScreen';
+import { MediaBrowseScreen } from './screens/MediaBrowseScreen';
+import { SearchScreen } from './screens/SearchScreen';
 import { SettingsScreen } from './screens/SettingsScreen';
+import { TrashScreen } from './screens/TrashScreen';
 import { TroubleshootingScreen } from './screens/TroubleshootingScreen';
 import { WatermarksScreen } from './screens/WatermarksScreen';
 import { navigateToPath } from './routing';
@@ -138,6 +141,9 @@ type ScreenId =
   | 'guide'
   | 'schedules'
   | 'playouts'
+  | 'media'
+  | 'search'
+  | 'trash'
   | 'collections'
   | 'fillerPresets'
   | 'libraries'
@@ -246,6 +252,41 @@ const routes: ScreenRoute[] = [
     placeholder: 'Playouts workspace',
     badge: 3
   },
+  {
+    id: 'media',
+    path: '/app/media',
+    label: 'Browse',
+    title: 'Browse Media',
+    kicker: 'Media',
+    description: 'Browse indexed movies, shows, episodes, music and more by kind.',
+    icon: <Clapperboard aria-hidden="true" size={16} />,
+    primaryAction: '',
+    placeholder: 'Media browse workspace',
+    allowSubPaths: true
+  },
+  {
+    id: 'search',
+    path: '/app/search',
+    label: 'Search',
+    title: 'Search',
+    kicker: 'Media',
+    description: 'Search across every media kind at once.',
+    icon: <Search aria-hidden="true" size={16} />,
+    primaryAction: '',
+    placeholder: 'Search workspace',
+    allowSubPaths: true
+  },
+  {
+    id: 'trash',
+    path: '/app/trash',
+    label: 'Trash',
+    title: 'Trash',
+    kicker: 'Media',
+    description: 'Library items whose files have gone missing.',
+    icon: <Trash2 aria-hidden="true" size={16} />,
+    primaryAction: '',
+    placeholder: 'Trash workspace'
+  },
   {
     id: 'collections',
     path: '/app/collections',
@@ -350,7 +391,7 @@ const primaryNavIds: ScreenId[] = [
   'schedules',
   'playouts'
 ];
-const mediaNavIds: ScreenId[] = ['collections', 'fillerPresets', 'libraries'];
+const mediaNavIds: ScreenId[] = ['media', 'search', 'trash', 'collections', 'fillerPresets', 'libraries'];
 const systemNavIds: ScreenId[] = [
   'settings',
   'logs',
@@ -611,6 +652,7 @@ function TopBar({ route }: { route: ScreenRoute | null }) {
   const title = route?.title ?? 'Page not found';
   const kicker = route?.kicker ?? 'Unknown route';
   const primaryAction = route?.primaryAction ?? 'Go To Dashboard';
+  const [searchValue, setSearchValue] = useState('');
 
   return (
     <header className="ctv-topbar">
@@ -619,10 +661,26 @@ function TopBar({ route }: { route: ScreenRoute | null }) {
         <h1>{title}</h1>
       </div>
 
-      <label className="ctv-topbar-search">
+      <form
+        className="ctv-topbar-search"
+        onSubmit={(event) => {
+          event.preventDefault();
+          const trimmed = searchValue.trim();
+          if (trimmed) {
+            navigateToPath(`/app/search?query=${encodeURIComponent(trimmed)}`);
+          }
+        }}
+        role="search"
+      >
         <Search aria-hidden="true" size={15} />
-        <input type="search" aria-label="Search" placeholder="Search channels, schedules..." />
-      </label>
+        <input
+          aria-label="Search"
+          onChange={(event) => setSearchValue(event.target.value)}
+          placeholder="Search movies, shows, music..."
+          type="search"
+          value={searchValue}
+        />
+      </form>
 
       <div className="ctv-topbar-spacer" />
 
@@ -2960,6 +3018,18 @@ function ScreenContent({
     return <SettingsScreen />;
   }
 
+  if (route.id === 'media') {
+    return <MediaBrowseScreen key={window.location.search} />;
+  }
+
+  if (route.id === 'search') {
+    return <SearchScreen key={window.location.search} />;
+  }
+
+  if (route.id === 'trash') {
+    return <TrashScreen />;
+  }
+
   if (route.id === 'collections') {
     return <CollectionsScreen />;
   }
diff --git a/web/src/api/index.ts b/web/src/api/index.ts
index a63b46776..f63c17c02 100644
--- a/web/src/api/index.ts
+++ b/web/src/api/index.ts
@@ -11,9 +11,12 @@ export * from './guide';
 export * from './libraries';
 export * from './libraryBrowse';
 export * from './logs';
+export * from './maintenance';
+export * from './mediaItems';
 export * from './pickers';
 export * from './playouts';
 export * from './schedules';
+export * from './search';
 export * from './settings';
 export * from './troubleshoot';
 export * from './useChannelsQuery';
diff --git a/web/src/api/maintenance.test.ts b/web/src/api/maintenance.test.ts
new file mode 100644
index 000000000..8c1786564
--- /dev/null
+++ b/web/src/api/maintenance.test.ts
@@ -0,0 +1,25 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { emptyTrash } from './maintenance';
+
+describe('emptyTrash', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it('POSTs /api/maintenance/empty_trash', async () => {
+    const fetchSpy = vi.spyOn(window, 'fetch').mockResolvedValue(new Response(null, { status: 200 }));
+
+    await emptyTrash();
+
+    const [url, init] = fetchSpy.mock.calls[0];
+    expect(url).toBe('/api/maintenance/empty_trash');
+    expect((init?.method ?? 'GET').toUpperCase()).toBe('POST');
+  });
+
+  it('rejects with the ApiError status on failure', async () => {
+    vi.spyOn(window, 'fetch').mockResolvedValue(new Response(null, { status: 500 }));
+
+    await expect(emptyTrash()).rejects.toMatchObject({ status: 500 });
+  });
+});
diff --git a/web/src/api/maintenance.ts b/web/src/api/maintenance.ts
new file mode 100644
index 000000000..d82b5428a
--- /dev/null
+++ b/web/src/api/maintenance.ts
@@ -0,0 +1,17 @@
+import { ApiError, request } from './client';
+
+export function emptyTrash(): Promise<void> {
+  return request<void>('/api/maintenance/empty_trash', { method: 'POST' });
+}
+
+export function messageFromMaintenanceError(error: unknown, fallback = 'Maintenance action failed'): string {
+  if (error instanceof ApiError) {
+    return error.detail ?? error.message;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return fallback;
+}
diff --git a/web/src/api/mediaItems.test.ts b/web/src/api/mediaItems.test.ts
new file mode 100644
index 000000000..0b0437128
--- /dev/null
+++ b/web/src/api/mediaItems.test.ts
@@ -0,0 +1,31 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { deleteMediaItems } from './mediaItems';
+
+describe('deleteMediaItems', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it('DELETEs /api/media-items with the ids in the body', async () => {
+    const fetchSpy = vi.spyOn(window, 'fetch').mockResolvedValue(new Response(null, { status: 204 }));
+
+    await deleteMediaItems([1, 2, 3]);
+
+    const [url, init] = fetchSpy.mock.calls[0];
+    expect(url).toBe('/api/media-items');
+    expect((init?.method ?? 'GET').toUpperCase()).toBe('DELETE');
+    expect(JSON.parse(init?.body as string)).toEqual({ ids: [1, 2, 3] });
+  });
+
+  it('rejects with the ApiError status on failure', async () => {
+    vi.spyOn(window, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify({ status: 422, title: 'Validation failed' }), {
+        headers: { 'Content-Type': 'application/json' },
+        status: 422
+      })
+    );
+
+    await expect(deleteMediaItems([])).rejects.toMatchObject({ status: 422 });
+  });
+});
diff --git a/web/src/api/mediaItems.ts b/web/src/api/mediaItems.ts
new file mode 100644
index 000000000..e5bd30203
--- /dev/null
+++ b/web/src/api/mediaItems.ts
@@ -0,0 +1,17 @@
+import { ApiError, request } from './client';
+
+export function deleteMediaItems(ids: number[]): Promise<void> {
+  return request<void>('/api/media-items', { body: { ids }, method: 'DELETE' });
+}
+
+export function messageFromMediaItemsError(error: unknown, fallback = 'Unable to delete media items'): string {
+  if (error instanceof ApiError) {
+    return error.detail ?? error.message;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return fallback;
+}
diff --git a/web/src/api/search.test.ts b/web/src/api/search.test.ts
new file mode 100644
index 000000000..5ea895499
--- /dev/null
+++ b/web/src/api/search.test.ts
@@ -0,0 +1,63 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { getSearchResults } from './search';
+
+const emptyGroup = { totalCount: 0, items: [] };
+const sampleResults = {
+  movies: emptyGroup,
+  shows: emptyGroup,
+  seasons: emptyGroup,
+  artists: emptyGroup,
+  episodes: emptyGroup,
+  musicVideos: emptyGroup,
+  songs: emptyGroup,
+  otherVideos: emptyGroup,
+  images: emptyGroup,
+  remoteStreams: emptyGroup
+};
+
+describe('getSearchResults', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it('GETs /api/search with the query', async () => {
+    const fetchSpy = vi.spyOn(window, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify(sampleResults), {
+        headers: { 'Content-Type': 'application/json' },
+        status: 200
+      })
+    );
+
+    await getSearchResults({ query: 'star' });
+
+    const [url, init] = fetchSpy.mock.calls[0];
+    expect(url).toBe('/api/search?query=star');
+    expect((init?.method ?? 'GET').toUpperCase()).toBe('GET');
+  });
+
+  it('includes pageSize when provided', async () => {
+    const fetchSpy = vi.spyOn(window, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify(sampleResults), {
+        headers: { 'Content-Type': 'application/json' },
+        status: 200
+      })
+    );
+
+    await getSearchResults({ query: 'star wars', pageSize: 50 });
+
+    const [url] = fetchSpy.mock.calls[0];
+    expect(url).toBe('/api/search?query=star+wars&pageSize=50');
+  });
+
+  it('rejects with the ApiError status on failure', async () => {
+    vi.spyOn(window, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify({ status: 422, title: 'Validation failed' }), {
+        headers: { 'Content-Type': 'application/json' },
+        status: 422
+      })
+    );
+
+    await expect(getSearchResults({ query: '' })).rejects.toMatchObject({ status: 422 });
+  });
+});
diff --git a/web/src/api/search.ts b/web/src/api/search.ts
new file mode 100644
index 000000000..acefe1a4e
--- /dev/null
+++ b/web/src/api/search.ts
@@ -0,0 +1,33 @@
+import { ApiError, request } from './client';
+import type { components } from './generated/v1';
+
+export type SearchResults = components['schemas']['SearchResultsResponseModel'];
+export type SearchResultGroup = components['schemas']['SearchResultGroupResponseModel'];
+
+export interface GetSearchResultsParams {
+  query: string;
+  pageSize?: number;
+}
+
+export function getSearchResults(params: GetSearchResultsParams): Promise<SearchResults> {
+  const searchParams = new URLSearchParams();
+  searchParams.set('query', params.query);
+
+  if (params.pageSize != null) {
+    searchParams.set('pageSize', String(params.pageSize));
+  }
+
+  return request<SearchResults>(`/api/search?${searchParams.toString()}`);
+}
+
+export function messageFromSearchError(error: unknown, fallback = 'Unable to search library'): string {
+  if (error instanceof ApiError) {
+    return error.detail ?? error.message;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return fallback;
+}
diff --git a/web/src/builder/ChannelBuilder.tsx b/web/src/builder/ChannelBuilder.tsx
index bd6fd4826..105f7b982 100644
--- a/web/src/builder/ChannelBuilder.tsx
+++ b/web/src/builder/ChannelBuilder.tsx
@@ -20,26 +20,22 @@ import {
   GripVertical,
   Image as ImageIcon,
   Info,
-  Layers,
   Library,
   LayoutGrid,
   ListOrdered,
   ListVideo,
-  Music,
   Plus,
   Radio,
-  Repeat,
   Rows3,
   Save,
   Search,
   Shuffle,
   SlidersHorizontal,
-  Sparkles,
   SquarePen,
-  Tv,
   X
 } from 'lucide-react';
 import { navigateToPath } from '../routing';
+import { TYPE_ICON, TYPE_LABEL, hueOf } from '../media/mediaKinds';
 import {
   ApiError,
   createChannelFromLineup,
@@ -133,29 +129,8 @@ const STREAMING_MODE_LABELS: Record<StreamingMode, string> = {
 };
 
 // ---- Media-type presentation ----------------------------------------------
-const TYPE_ICON: Record<LibraryBrowseMediaType, typeof Film> = {
-  Movie: Film,
-  TelevisionShow: Tv,
-  TelevisionSeason: Tv,
-  Artist: Music,
-  Collection: FolderTree,
-  SmartCollection: Sparkles,
-  MultiCollection: Layers,
-  RerunCollection: Repeat,
-  Playlist: ListVideo
-};
-
-const TYPE_LABEL: Record<LibraryBrowseMediaType, string> = {
-  Movie: 'Movie',
-  TelevisionShow: 'Show',
-  TelevisionSeason: 'Season',
-  Artist: 'Artist',
-  Collection: 'Collection',
-  SmartCollection: 'Smart',
-  MultiCollection: 'Multi',
-  RerunCollection: 'Rerun',
-  Playlist: 'Playlist'
-};
+// TYPE_ICON / TYPE_LABEL / hueOf are shared with the media browse/search/trash screens
+// (see ../media/mediaKinds) so the per-kind icon+label map has a single source of truth.
 
 const COLLECTION_MEDIA_TYPES: LibraryBrowseMediaType[] = [
   'Collection',
@@ -168,15 +143,6 @@ const COLLECTION_MEDIA_TYPES: LibraryBrowseMediaType[] = [
 // ---- Small pure helpers ----------------------------------------------------
 const mono: CSSProperties = { fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums' };
 
-// deterministic low-chroma poster hue from a title (ported from prototype)
-function hueOf(value: string): number {
-  let hue = 0;
-  for (let index = 0; index < value.length; index += 1) {
-    hue = (hue * 31 + value.charCodeAt(index)) % 360;
-  }
-  return hue;
-}
-
 // Parse a .NET TimeSpan (`[d.]hh:mm:ss[.fffffff]`) or ISO8601 duration to seconds.
 function parseDurationSeconds(value: string | null | undefined): number | null {
   if (!value) {
diff --git a/web/src/media/MediaPosterCard.tsx b/web/src/media/MediaPosterCard.tsx
new file mode 100644
index 000000000..38d8d0d44
--- /dev/null
+++ b/web/src/media/MediaPosterCard.tsx
@@ -0,0 +1,73 @@
+import type { CSSProperties } from 'react';
+import { Film } from 'lucide-react';
+import type { LibraryBrowseItem } from '../api';
+import { TYPE_ICON, TYPE_LABEL, hueOf, itemSubtitle } from './mediaKinds';
+
+// A poster/thumbnail grid card for a browse/search item. Selectable + clickable for the media
+// browse/search/trash screens. Falls back to a deterministic gradient + type icon when no artwork.
+export function MediaPosterCard({
+  item,
+  selected,
+  onToggleSelect,
+  height = 150
+}: {
+  item: LibraryBrowseItem;
+  selected?: boolean;
+  onToggleSelect?: (item: LibraryBrowseItem) => void;
+  height?: number;
+}) {
+  const hue = hueOf(item.title);
+  const Icon = TYPE_ICON[item.mediaType] ?? Film;
+  const subtitle = itemSubtitle(item);
+  const posterStyle: CSSProperties = {
+    width: '100%',
+    height,
+    background: `linear-gradient(160deg, hsl(${hue} 24% 17%), hsl(${hue} 26% 12%))`
+  };
+
+  const selectable = typeof onToggleSelect === 'function';
+
+  return (
+    <div
+      className={`ctv-media-card${selected ? ' ctv-media-card-selected' : ''}${selectable ? ' ctv-press' : ''}`}
+      onClick={selectable ? () => onToggleSelect?.(item) : undefined}
+      role={selectable ? 'button' : undefined}
+      tabIndex={selectable ? 0 : undefined}
+      onKeyDown={
+        selectable
+          ? (event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onToggleSelect?.(item);
+              }
+            }
+          : undefined
+      }
+      aria-pressed={selectable ? selected ?? false : undefined}
+    >
+      <div className="ctv-media-card-poster" style={posterStyle}>
+        {item.artwork ? (
+          <img src={item.artwork} alt="" loading="lazy" />
+        ) : (
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              backgroundImage: `repeating-linear-gradient(135deg, hsl(${hue} 22% 10% / .55) 0 1px, transparent 1px 9px)`
+            }}
+          />
+        )}
+        <span className="ctv-media-card-icon" style={{ color: `hsl(${hue} 30% 68%)` }}>
+          <Icon size={15} aria-hidden="true" />
+        </span>
+        {selected && <div className="ctv-media-card-check">✓</div>}
+      </div>
+      <div className="ctv-media-card-body">
+        <div className="ctv-media-card-title" title={item.title}>
+          {item.title}
+        </div>
+        <div className="ctv-media-card-meta">{subtitle || TYPE_LABEL[item.mediaType]}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/media/mediaKinds.ts b/web/src/media/mediaKinds.ts
new file mode 100644
index 000000000..e7687b06a
--- /dev/null
+++ b/web/src/media/mediaKinds.ts
@@ -0,0 +1,113 @@
+import {
+  Film,
+  FolderTree,
+  Image as ImageIcon,
+  Layers,
+  ListVideo,
+  Music,
+  Radio,
+  Repeat,
+  Sparkles,
+  Tv,
+  Video
+} from 'lucide-react';
+import type { LibraryBrowseItem, LibraryBrowseMediaType } from '../api';
+
+export const TYPE_ICON: Record<LibraryBrowseMediaType, typeof Film> = {
+  Movie: Film,
+  TelevisionShow: Tv,
+  TelevisionSeason: Tv,
+  Artist: Music,
+  Collection: FolderTree,
+  SmartCollection: Sparkles,
+  MultiCollection: Layers,
+  RerunCollection: Repeat,
+  Playlist: ListVideo,
+  Episode: Tv,
+  MusicVideo: Video,
+  Song: Music,
+  OtherVideo: Film,
+  Image: ImageIcon,
+  RemoteStream: Radio
+};
+
+export const TYPE_LABEL: Record<LibraryBrowseMediaType, string> = {
+  Movie: 'Movie',
+  TelevisionShow: 'Show',
+  TelevisionSeason: 'Season',
+  Artist: 'Artist',
+  Collection: 'Collection',
+  SmartCollection: 'Smart',
+  MultiCollection: 'Multi',
+  RerunCollection: 'Rerun',
+  Playlist: 'Playlist',
+  Episode: 'Episode',
+  MusicVideo: 'Music Video',
+  Song: 'Song',
+  OtherVideo: 'Other Video',
+  Image: 'Image',
+  RemoteStream: 'Remote Stream'
+};
+
+// Deterministic hue so the same title always gets the same placeholder gradient.
+export function hueOf(value: string): number {
+  let hue = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hue = (hue * 31 + value.charCodeAt(index)) % 360;
+  }
+  return hue;
+}
+
+export function parseDurationSeconds(value: string | null | undefined): number | null {
+  if (!value) {
+    return null;
+  }
+
+  const timeSpan = /^(?:(\d+)\.)?(\d{1,2}):(\d{2}):(\d{2})(?:\.\d+)?$/.exec(value);
+  if (timeSpan) {
+    const [, days, hours, minutes, seconds] = timeSpan;
+    return (days ? Number(days) * 86400 : 0) + Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds);
+  }
+
+  const iso = /^P(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/.exec(value);
+  if (iso) {
+    const [, days, hours, minutes, seconds] = iso;
+    return (
+      (days ? Number(days) * 86400 : 0) +
+      (hours ? Number(hours) * 3600 : 0) +
+      (minutes ? Number(minutes) * 60 : 0) +
+      (seconds ? Number(seconds) : 0)
+    );
+  }
+
+  return null;
+}
+
+export function formatDuration(totalSeconds: number): string {
+  const totalMinutes = Math.round(totalSeconds / 60);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  if (hours && minutes) {
+    return `${hours}h ${String(minutes).padStart(2, '0')}m`;
+  }
+  if (hours) {
+    return `${hours}h`;
+  }
+  return `${minutes}m`;
+}
+
+// The subtitle the API supplies (episode "Show - S1E2", song "Artist - Album", …) with a duration
+// fallback so cards always have a useful second line.
+export function itemSubtitle(item: LibraryBrowseItem): string {
+  if (item.subtitle) {
+    return item.subtitle;
+  }
+  const durationSeconds = parseDurationSeconds(item.duration);
+  if (durationSeconds) {
+    return formatDuration(durationSeconds);
+  }
+  if (item.itemCount) {
+    return `${item.itemCount} item${item.itemCount === 1 ? '' : 's'}`;
+  }
+  return '';
+}
diff --git a/web/src/screens/CollectionsScreen.tsx b/web/src/screens/CollectionsScreen.tsx
index d0fc87b40..8a8f1eb3e 100644
--- a/web/src/screens/CollectionsScreen.tsx
+++ b/web/src/screens/CollectionsScreen.tsx
@@ -42,6 +42,7 @@ import {
   type MediaCollection,
   type SmartCollection
 } from '../api';
+import { TYPE_LABEL } from '../media/mediaKinds';
 
 type Tab = 'manual' | 'smart';
 
@@ -52,18 +53,6 @@ const ADDABLE_TYPES = new Set<LibraryBrowseItem['mediaType']>([
   'Artist'
 ]);
 
-const TYPE_LABEL: Record<LibraryBrowseItem['mediaType'], string> = {
-  Artist: 'Artist',
-  Collection: 'Collection',
-  Movie: 'Movie',
-  MultiCollection: 'Multi',
-  Playlist: 'Playlist',
-  RerunCollection: 'Rerun',
-  SmartCollection: 'Smart',
-  TelevisionSeason: 'Season',
-  TelevisionShow: 'Show'
-};
-
 function sortByName<T extends { name?: null | string }>(items: T[]): T[] {
   return [...items].sort((left, right) => (left.name ?? '').localeCompare(right.name ?? ''));
 }
diff --git a/web/src/screens/MediaBrowseScreen.tsx b/web/src/screens/MediaBrowseScreen.tsx
new file mode 100644
index 000000000..0e1f7150b
--- /dev/null
+++ b/web/src/screens/MediaBrowseScreen.tsx
@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ChevronLeft, ChevronRight, Info, RefreshCw, Search, TriangleAlert } from 'lucide-react';
+import { Button, Card, IconButton, Input, Select, Spinner } from '../components';
+import {
+  getLibraryBrowseItems,
+  messageFromLibraryBrowseError,
+  type LibraryBrowseItem,
+  type LibraryBrowseMediaType
+} from '../api';
+import { MediaPosterCard } from '../media/MediaPosterCard';
+
+const PAGE_SIZE = 100;
+
+interface MediaKind {
+  slug: string;
+  label: string;
+  mediaType: LibraryBrowseMediaType;
+}
+
+// Matches the legacy Blazor media IA (no top-level Seasons page; seasons live under a show).
+const KINDS: MediaKind[] = [
+  { slug: 'movies', label: 'Movies', mediaType: 'Movie' },
+  { slug: 'shows', label: 'TV Shows', mediaType: 'TelevisionShow' },
+  { slug: 'episodes', label: 'Episodes', mediaType: 'Episode' },
+  { slug: 'artists', label: 'Artists', mediaType: 'Artist' },
+  { slug: 'music-videos', label: 'Music Videos', mediaType: 'MusicVideo' },
+  { slug: 'songs', label: 'Songs', mediaType: 'Song' },
+  { slug: 'other-videos', label: 'Other Videos', mediaType: 'OtherVideo' },
+  { slug: 'images', label: 'Images', mediaType: 'Image' },
+  { slug: 'remote-streams', label: 'Remote Streams', mediaType: 'RemoteStream' }
+];
+
+function kindFromSlug(slug: string | null): MediaKind {
+  return KINDS.find((kind) => kind.slug === slug) ?? KINDS[0];
+}
+
+type BrowseState =
+  | { items: LibraryBrowseItem[]; error: null; status: 'success'; totalCount: number }
+  | { items: []; error: string; status: 'error'; totalCount: 0 }
+  | { items: []; error: null; status: 'loading'; totalCount: 0 };
+
+export function MediaBrowseScreen() {
+  const params = new URLSearchParams(window.location.search);
+  const initialKind = kindFromSlug(params.get('kind'));
+  const initialQuery = params.get('q') ?? '';
+
+  const [kind, setKind] = useState<MediaKind>(initialKind);
+  const [queryInput, setQueryInput] = useState(initialQuery);
+  const [query, setQuery] = useState(initialQuery);
+  const [pageNum, setPageNum] = useState(0);
+  const [state, setState] = useState<BrowseState>({ items: [], error: null, status: 'loading', totalCount: 0 });
+  const activeRef = useRef(true);
+  const seqRef = useRef(0);
+
+  useEffect(() => {
+    activeRef.current = true;
+    return () => {
+      activeRef.current = false;
+    };
+  }, []);
+
+  // Debounce the per-kind free-text box; it composes straight into the browse (Lucene) query.
+  useEffect(() => {
+    const handle = window.setTimeout(() => {
+      setPageNum(0);
+      setQuery(queryInput.trim());
+    }, 300);
+
+    return () => window.clearTimeout(handle);
+  }, [queryInput]);
+
+  const load = useCallback(() => {
+    const id = ++seqRef.current;
+    getLibraryBrowseItems({ mediaType: kind.mediaType, query: query || undefined, pageNum, pageSize: PAGE_SIZE })
+      .then((paged) => {
+        if (activeRef.current && id === seqRef.current) {
+          setState({ items: paged.page ?? [], error: null, status: 'success', totalCount: paged.totalCount ?? 0 });
+        }
+      })
+      .catch((error: unknown) => {
+        if (activeRef.current && id === seqRef.current) {
+          setState({ items: [], error: messageFromLibraryBrowseError(error), status: 'error', totalCount: 0 });
+        }
+      });
+  }, [kind.mediaType, query, pageNum]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const changeKind = (slug: string) => {
+    const next = kindFromSlug(slug);
+    setKind(next);
+    setPageNum(0);
+    setQueryInput('');
+    setQuery('');
+    // Keep the URL shareable/back-navigable without remounting the whole screen.
+    window.history.replaceState(null, '', `/app/media?kind=${next.slug}`);
+  };
+
+  const refresh = () => {
+    setState({ items: [], error: null, status: 'loading', totalCount: 0 });
+    load();
+  };
+
+  const totalPages = state.status === 'success' ? Math.max(1, Math.ceil(state.totalCount / PAGE_SIZE)) : 1;
+
+  return (
+    <div className="ctv-collections">
+      <div className="ctv-channels-actionbar">
+        <Select
+          fullWidth={false}
+          onChange={(event) => changeKind(event.target.value)}
+          options={KINDS.map((entry) => ({ label: entry.label, value: entry.slug }))}
+          style={{ width: 180 }}
+          value={kind.slug}
+        />
+        <Input
+          leadingIcon={<Search aria-hidden="true" size={14} />}
+          onChange={(event) => setQueryInput(event.target.value)}
+          placeholder={`Search ${kind.label.toLowerCase()}…`}
+          value={queryInput}
+        />
+        <span className="ctv-channels-spacer" />
+        <Button
+          onClick={refresh}
+          size="sm"
+          startIcon={<RefreshCw aria-hidden="true" size={14} />}
+          variant="secondary"
+        >
+          Refresh
+        </Button>
+      </div>
+
+      {state.status === 'error' && (
+        <div className="ctv-channels-error" role="alert">
+          <TriangleAlert aria-hidden="true" size={15} />
+          <span>{state.error}</span>
+          <span className="ctv-channels-spacer" />
+          <Button onClick={refresh} size="sm" variant="secondary">
+            Retry
+          </Button>
+        </div>
+      )}
+
+      {state.status === 'loading' ? (
+        <div className="ctv-collections-loading" role="status">
+          <Spinner size={18} />
+          <span>Loading {kind.label.toLowerCase()}…</span>
+        </div>
+      ) : state.items.length === 0 ? (
+        <Card>
+          <div className="ctv-collections-empty">
+            {query ? `No ${kind.label.toLowerCase()} match this search.` : `No ${kind.label.toLowerCase()} found.`}
+          </div>
+        </Card>
+      ) : (
+        <>
+          <div className="ctv-media-grid">
+            {state.items.map((item) => (
+              <MediaPosterCard item={item} key={`${item.mediaType}-${item.id}`} />
+            ))}
+          </div>
+          <div className="ctv-channels-footer" style={{ marginTop: 'var(--space-6, 12px)' }}>
+            <span>
+              {state.totalCount} {kind.label.toLowerCase()}
+            </span>
+            <span className="ctv-channels-spacer" />
+            <IconButton
+              disabled={pageNum === 0}
+              onClick={() => setPageNum((current) => Math.max(0, current - 1))}
+              size="sm"
+              title="Previous page"
+            >
+              <ChevronLeft aria-hidden="true" size={15} />
+            </IconButton>
+            <span>
+              Page <code>{pageNum + 1}</code> of <code>{totalPages}</code>
+            </span>
+            <IconButton
+              disabled={pageNum + 1 >= totalPages}
+              onClick={() => setPageNum((current) => current + 1)}
+              size="sm"
+              title="Next page"
+            >
+              <ChevronRight aria-hidden="true" size={15} />
+            </IconButton>
+          </div>
+        </>
+      )}
+
+      <div className="ctv-settings-callout">
+        <Info aria-hidden="true" size={14} />
+        <span>
+          Browsing indexed library items. Use the search box for a quick per-kind filter, or the global search for
+          results across every media kind.
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/screens/SearchScreen.tsx b/web/src/screens/SearchScreen.tsx
new file mode 100644
index 000000000..cd1acf4fb
--- /dev/null
+++ b/web/src/screens/SearchScreen.tsx
@@ -0,0 +1,176 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Search, TriangleAlert } from 'lucide-react';
+import { Button, Card, Input, Spinner } from '../components';
+import { getSearchResults, messageFromSearchError, type SearchResults } from '../api';
+import { navigateToPath } from '../routing';
+import { MediaPosterCard } from '../media/MediaPosterCard';
+
+const PAGE_SIZE = 50;
+
+interface GroupDef {
+  key: keyof SearchResults;
+  label: string;
+  // MediaBrowse slug for "See all"; null for kinds without a top-level browse page (seasons).
+  slug: string | null;
+}
+
+// Order + labels mirror the legacy Blazor search page.
+const GROUPS: GroupDef[] = [
+  { key: 'movies', label: 'Movies', slug: 'movies' },
+  { key: 'shows', label: 'TV Shows', slug: 'shows' },
+  { key: 'seasons', label: 'Seasons', slug: null },
+  { key: 'episodes', label: 'Episodes', slug: 'episodes' },
+  { key: 'artists', label: 'Artists', slug: 'artists' },
+  { key: 'musicVideos', label: 'Music Videos', slug: 'music-videos' },
+  { key: 'songs', label: 'Songs', slug: 'songs' },
+  { key: 'otherVideos', label: 'Other Videos', slug: 'other-videos' },
+  { key: 'images', label: 'Images', slug: 'images' },
+  { key: 'remoteStreams', label: 'Remote Streams', slug: 'remote-streams' }
+];
+
+type SearchState =
+  | { results: SearchResults; error: null; status: 'success' }
+  | { results: null; error: string; status: 'error' }
+  | { results: null; error: null; status: 'loading' };
+
+export function SearchScreen() {
+  const initialQuery = new URLSearchParams(window.location.search).get('query') ?? '';
+  const [queryInput, setQueryInput] = useState(initialQuery);
+  const [query, setQuery] = useState(initialQuery);
+  const [state, setState] = useState<SearchState>({ results: null, error: null, status: 'loading' });
+  const activeRef = useRef(true);
+  const seqRef = useRef(0);
+  const hasQuery = query.trim().length > 0;
+
+  useEffect(() => {
+    activeRef.current = true;
+    return () => {
+      activeRef.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const handle = window.setTimeout(() => {
+      const trimmed = queryInput.trim();
+      setQuery(trimmed);
+      // Keep the URL shareable without remounting.
+      const next = trimmed ? `/app/search?query=${encodeURIComponent(trimmed)}` : '/app/search';
+      window.history.replaceState(null, '', next);
+    }, 300);
+
+    return () => window.clearTimeout(handle);
+  }, [queryInput]);
+
+  // Fetch only; state updates happen in the async callbacks (never synchronously in the effect
+  // body) so results stay visible during a refetch. The empty-query "idle" case is derived from
+  // `hasQuery` in render rather than stored, so this never fires for a blank query.
+  const load = useCallback(() => {
+    const trimmed = query.trim();
+    if (!trimmed) {
+      return;
+    }
+
+    const id = ++seqRef.current;
+    getSearchResults({ query: trimmed, pageSize: PAGE_SIZE })
+      .then((results) => {
+        if (activeRef.current && id === seqRef.current) {
+          setState({ results, error: null, status: 'success' });
+        }
+      })
+      .catch((error: unknown) => {
+        if (activeRef.current && id === seqRef.current) {
+          setState({ results: null, error: messageFromSearchError(error), status: 'error' });
+        }
+      });
+  }, [query]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const seeAll = (slug: string) => {
+    navigateToPath(`/app/media?kind=${slug}&q=${encodeURIComponent(query.trim())}`);
+  };
+
+  const totalMatches =
+    state.status === 'success' && state.results
+      ? GROUPS.reduce((sum, group) => sum + (state.results?.[group.key].totalCount ?? 0), 0)
+      : 0;
+
+  return (
+    <div className="ctv-collections">
+      <div className="ctv-channels-actionbar">
+        <Input
+          leadingIcon={<Search aria-hidden="true" size={14} />}
+          onChange={(event) => setQueryInput(event.target.value)}
+          placeholder="Search movies, shows, episodes, music…"
+          value={queryInput}
+        />
+      </div>
+
+      {!hasQuery && (
+        <Card>
+          <div className="ctv-collections-empty">Type a query to search across every media kind.</div>
+        </Card>
+      )}
+
+      {hasQuery && state.status === 'error' && (
+        <div className="ctv-channels-error" role="alert">
+          <TriangleAlert aria-hidden="true" size={15} />
+          <span>{state.error}</span>
+          <span className="ctv-channels-spacer" />
+          <Button onClick={load} size="sm" variant="secondary">
+            Retry
+          </Button>
+        </div>
+      )}
+
+      {hasQuery && state.status === 'loading' && (
+        <div className="ctv-collections-loading" role="status">
+          <Spinner size={18} />
+          <span>Searching…</span>
+        </div>
+      )}
+
+      {hasQuery && state.status === 'success' && state.results && totalMatches === 0 && (
+        <Card>
+          <div className="ctv-collections-empty">No results for “{query.trim()}”.</div>
+        </Card>
+      )}
+
+      {hasQuery &&
+        state.status === 'success' &&
+        state.results &&
+        GROUPS.map((group) => {
+          const data = state.results![group.key];
+          if (data.totalCount === 0 || data.items.length === 0) {
+            return null;
+          }
+
+          const hasMore = group.slug !== null && data.totalCount > data.items.length;
+
+          return (
+            <section key={group.key}>
+              <div className="ctv-media-section-header">
+                <h2>{group.label}</h2>
+                <span className="ctv-media-section-count">
+                  {data.totalCount} result{data.totalCount === 1 ? '' : 's'}
+                </span>
+                <span className="ctv-channels-spacer" />
+                {hasMore && (
+                  <Button onClick={() => seeAll(group.slug!)} size="sm" variant="ghost">
+                    See all
+                  </Button>
+                )}
+              </div>
+              <div className="ctv-media-grid">
+                {data.items.map((item) => (
+                  <MediaPosterCard item={item} key={`${item.mediaType}-${item.id}`} />
+                ))}
+              </div>
+            </section>
+          );
+        })}
+    </div>
+  );
+}
diff --git a/web/src/screens/SettingsScreen.tsx b/web/src/screens/SettingsScreen.tsx
index fb940631c..b8faffc27 100644
--- a/web/src/screens/SettingsScreen.tsx
+++ b/web/src/screens/SettingsScreen.tsx
@@ -861,7 +861,7 @@ function SystemPane({
             Open Dashboard
           </Button>
         </Row>
-        <Row control={220} help="Media browse/search, trakt, blocks/decos/templates and playout editors still live here." label="Classic UI">
+        <Row control={220} help="Trakt, blocks/decos/templates and playout editors still live here." label="Classic UI">
           <a className="ctv-button ctv-button-secondary ctv-button-sm" href="/system/health">
             <span>Open Classic UI</span>
             <ExternalLink aria-hidden="true" size={13} />
diff --git a/web/src/screens/TrashScreen.tsx b/web/src/screens/TrashScreen.tsx
new file mode 100644
index 000000000..188a826ec
--- /dev/null
+++ b/web/src/screens/TrashScreen.tsx
@@ -0,0 +1,243 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { RefreshCw, Trash2, TriangleAlert } from 'lucide-react';
+import { Button, Card, ConfirmDialog, Spinner } from '../components';
+import {
+  deleteMediaItems,
+  emptyTrash,
+  getSearchResults,
+  messageFromSearchError,
+  type LibraryBrowseItem,
+  type SearchResults
+} from '../api';
+import { MediaPosterCard } from '../media/MediaPosterCard';
+
+const PAGE_SIZE = 50;
+// Lucene state filter for items whose files have gone missing (matches the legacy Blazor Trash page).
+const TRASH_QUERY = 'state:FileNotFound';
+
+interface GroupDef {
+  key: keyof SearchResults;
+  label: string;
+}
+
+const GROUPS: GroupDef[] = [
+  { key: 'movies', label: 'Movies' },
+  { key: 'shows', label: 'TV Shows' },
+  { key: 'seasons', label: 'Seasons' },
+  { key: 'episodes', label: 'Episodes' },
+  { key: 'artists', label: 'Artists' },
+  { key: 'musicVideos', label: 'Music Videos' },
+  { key: 'songs', label: 'Songs' },
+  { key: 'otherVideos', label: 'Other Videos' },
+  { key: 'images', label: 'Images' },
+  { key: 'remoteStreams', label: 'Remote Streams' }
+];
+
+type TrashState =
+  | { results: SearchResults; error: null; status: 'success' }
+  | { results: null; error: string; status: 'error' }
+  | { results: null; error: null; status: 'loading' };
+
+function mediaItemIdOf(item: LibraryBrowseItem): number | null {
+  return item.mediaItemId ?? null;
+}
+
+export function TrashScreen() {
+  const [state, setState] = useState<TrashState>({ results: null, error: null, status: 'loading' });
+  const [selected, setSelected] = useState<Set<number>>(new Set());
+  const [confirm, setConfirm] = useState<null | 'selected' | 'all'>(null);
+  const [busy, setBusy] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const activeRef = useRef(true);
+  const seqRef = useRef(0);
+
+  useEffect(() => {
+    activeRef.current = true;
+    return () => {
+      activeRef.current = false;
+    };
+  }, []);
+
+  // Fetch only; state updates happen in the async callbacks so the list stays visible during a
+  // refetch (the initial 'loading' state and the Refresh button provide the loading affordance).
+  const load = useCallback(() => {
+    const id = ++seqRef.current;
+    getSearchResults({ query: TRASH_QUERY, pageSize: PAGE_SIZE })
+      .then((results) => {
+        if (activeRef.current && id === seqRef.current) {
+          setState({ results, error: null, status: 'success' });
+        }
+      })
+      .catch((error: unknown) => {
+        if (activeRef.current && id === seqRef.current) {
+          setState({ results: null, error: messageFromSearchError(error), status: 'error' });
+        }
+      });
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const refresh = () => {
+    setState({ results: null, error: null, status: 'loading' });
+    load();
+  };
+
+  const toggle = (item: LibraryBrowseItem) => {
+    const mediaItemId = mediaItemIdOf(item);
+    if (mediaItemId == null) {
+      return;
+    }
+    setSelected((current) => {
+      const next = new Set(current);
+      if (next.has(mediaItemId)) {
+        next.delete(mediaItemId);
+      } else {
+        next.add(mediaItemId);
+      }
+      return next;
+    });
+  };
+
+  const totalMatches =
+    state.status === 'success' && state.results
+      ? GROUPS.reduce((sum, group) => sum + state.results![group.key].totalCount, 0)
+      : 0;
+
+  const runDelete = async () => {
+    setBusy(true);
+    setActionError(null);
+    try {
+      if (confirm === 'all') {
+        await emptyTrash();
+      } else {
+        await deleteMediaItems([...selected]);
+      }
+      if (activeRef.current) {
+        setSelected(new Set());
+        setConfirm(null);
+        load();
+      }
+    } catch (error: unknown) {
+      if (activeRef.current) {
+        setActionError(messageFromSearchError(error, 'Unable to delete items'));
+      }
+    } finally {
+      if (activeRef.current) {
+        setBusy(false);
+      }
+    }
+  };
+
+  return (
+    <div className="ctv-collections">
+      <div className="ctv-channels-actionbar">
+        {selected.size > 0 && (
+          <Button
+            onClick={() => setConfirm('selected')}
+            size="sm"
+            startIcon={<Trash2 aria-hidden="true" size={14} />}
+            variant="danger"
+          >
+            Delete {selected.size} selected
+          </Button>
+        )}
+        <span className="ctv-channels-spacer" />
+        <Button
+          onClick={refresh}
+          size="sm"
+          startIcon={<RefreshCw aria-hidden="true" size={14} />}
+          variant="secondary"
+        >
+          Refresh
+        </Button>
+        <Button
+          disabled={totalMatches === 0}
+          onClick={() => setConfirm('all')}
+          size="sm"
+          startIcon={<Trash2 aria-hidden="true" size={14} />}
+          variant="danger"
+        >
+          Empty Trash
+        </Button>
+      </div>
+
+      {(state.status === 'error' || actionError) && (
+        <div className="ctv-channels-error" role="alert">
+          <TriangleAlert aria-hidden="true" size={15} />
+          <span>{actionError ?? (state.status === 'error' ? state.error : '')}</span>
+          <span className="ctv-channels-spacer" />
+          <Button onClick={refresh} size="sm" variant="secondary">
+            Retry
+          </Button>
+        </div>
+      )}
+
+      {state.status === 'loading' && (
+        <div className="ctv-collections-loading" role="status">
+          <Spinner size={18} />
+          <span>Loading trash…</span>
+        </div>
+      )}
+
+      {state.status === 'success' && state.results && totalMatches === 0 && (
+        <Card>
+          <div className="ctv-collections-empty">Trash is empty — no missing files detected.</div>
+        </Card>
+      )}
+
+      {state.status === 'success' &&
+        state.results &&
+        GROUPS.map((group) => {
+          const data = state.results![group.key];
+          if (data.totalCount === 0 || data.items.length === 0) {
+            return null;
+          }
+
+          return (
+            <section key={group.key}>
+              <div className="ctv-media-section-header">
+                <h2>{group.label}</h2>
+                <span className="ctv-media-section-count">
+                  {data.totalCount} missing
+                </span>
+              </div>
+              <div className="ctv-media-grid">
+                {data.items.map((item) => {
+                  const mediaItemId = mediaItemIdOf(item);
+                  return (
+                    <MediaPosterCard
+                      item={item}
+                      key={`${item.mediaType}-${item.id}`}
+                      onToggleSelect={mediaItemId == null ? undefined : toggle}
+                      selected={mediaItemId != null && selected.has(mediaItemId)}
+                    />
+                  );
+                })}
+              </div>
+            </section>
+          );
+        })}
+
+      <ConfirmDialog
+        busy={busy}
+        confirmLabel={confirm === 'all' ? 'Empty Trash' : 'Delete'}
+        message={
+          confirm === 'all'
+            ? 'Permanently remove every item with a missing file from the database? This cannot be undone.'
+            : `Permanently remove ${selected.size} selected item${selected.size === 1 ? '' : 's'} from the database? This cannot be undone.`
+        }
+        onCancel={() => {
+          if (!busy) {
+            setConfirm(null);
+          }
+        }}
+        onConfirm={runDelete}
+        open={confirm !== null}
+        title={confirm === 'all' ? 'Empty Trash' : 'Delete selected items'}
+        tone="danger"
+      />
+    </div>
+  );
+}
diff --git a/web/src/shell.css b/web/src/shell.css
index 04045e2e0..c0fb14a1a 100644
--- a/web/src/shell.css
+++ b/web/src/shell.css
@@ -2443,6 +2443,110 @@
   }
 }
 
+/* media browse / search / trash poster grid */
+.ctv-media-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: var(--space-6, 12px);
+}
+
+.ctv-media-card {
+  position: relative;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-hairline);
+  background: var(--surface-card);
+  overflow: hidden;
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.ctv-media-card[role='button'] {
+  cursor: pointer;
+}
+
+.ctv-media-card-selected {
+  border-color: var(--action-primary);
+  box-shadow: 0 0 0 1px var(--action-primary);
+}
+
+.ctv-media-card-poster {
+  position: relative;
+  overflow: hidden;
+}
+
+.ctv-media-card-poster img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ctv-media-card-icon {
+  position: absolute;
+  top: 7px;
+  left: 7px;
+  display: inline-flex;
+  z-index: 1;
+}
+
+.ctv-media-card-check {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--action-primary);
+  color: var(--text-on-accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  box-shadow: var(--shadow-sm);
+  z-index: 2;
+}
+
+.ctv-media-card-body {
+  padding: 8px 10px 10px;
+}
+
+.ctv-media-card-title {
+  font: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-sans);
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctv-media-card-meta {
+  margin-top: 3px;
+  font: var(--text-2xs) / 1.2 var(--font-sans);
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctv-media-section-header {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-4, 8px);
+  margin: var(--space-7, 16px) 0 var(--space-5, 10px);
+}
+
+.ctv-media-section-header h2 {
+  font: var(--weight-semibold) var(--text-md) / 1.2 var(--font-sans);
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.ctv-media-section-count {
+  font: var(--text-xs) / 1 var(--font-sans);
+  color: var(--text-secondary);
+}
+
 /* lineup */
 .ctv-builder-lineup-list {
   display: flex;