feat(dashboard): add full-size media preview

apps/dashboard/src/features/media/media-page.tsx

@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react';
 import { filterMedia, mediaConversation, type MediaFilters } from './filters.js';
 import { FullSyncDialog } from './full-sync-dialog.js';
 import { MediaCard } from './media-card.js';
+import { MediaPreviewDialog } from './media-preview-dialog.js';
 import { useMediaQuery, useMediaSyncStatusQuery, useTriggerMediaSyncMutation } from './queries.js';
 import './media.css';
 
@@ -34,6 +35,7 @@ export function MediaPage({ filters: controlledFilters, onFiltersChange }: Media
   const [revealedIds, setRevealedIds] = useState<Set<string>>(() => new Set());
   const [isRevealAll, setIsRevealAll] = useState(false);
   const [isFullSyncDialogOpen, setIsFullSyncDialogOpen] = useState(false);
+  const [previewItemId, setPreviewItemId] = useState<string | null>(null);
 
   const items = mediaQuery.data ?? [];
   const visibleItems = useMemo(() => filterMedia(items, filters, Date.now()), [items, filters]);
@@ -46,6 +48,7 @@ export function MediaPage({ filters: controlledFilters, onFiltersChange }: Media
     [items],
   );
   const isSyncBusy = statusQuery.data?.isSyncing === true || syncMutation.isPending;
+  const previewItem = items.find((item) => item.id === previewItemId) ?? null;
 
   function updateFilter<Key extends keyof MediaFilters>(key: Key, value: MediaFilters[Key]) {
     const next = { ...filters, [key]: value };
@@ -196,6 +199,7 @@ export function MediaPage({ filters: controlledFilters, onFiltersChange }: Media
                   isRevealed={isRevealAll || revealedIds.has(item.id)}
                   item={item}
                   key={item.id}
+                  onOpenPreview={() => setPreviewItemId(item.id)}
                   onToggleReveal={() => toggleItem(item.id)}
                 />
               ))}
@@ -211,6 +215,7 @@ export function MediaPage({ filters: controlledFilters, onFiltersChange }: Media
           onConfirm={() => runSync(true)}
         />
       ) : null}
+      {previewItem ? <MediaPreviewDialog item={previewItem} onClose={() => setPreviewItemId(null)} /> : null}
     </div>
   );
 }