feat(dashboard): close legacy parity gaps

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

@@ -5,7 +5,7 @@ import { MediaCard } from './media-card.js';
 import { useMediaQuery, useMediaSyncStatusQuery, useTriggerMediaSyncMutation } from './queries.js';
 import './media.css';
 
-const initialFilters: MediaFilters = {
+export const initialMediaFilters: MediaFilters = {
   conversation: 'all',
   sender: 'all',
   type: 'all',
@@ -20,11 +20,17 @@ function formatLastSync(timestamp: number): string {
   return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(timestamp);
 }
 
-export function MediaPage() {
+export interface MediaPageProps {
+  filters?: MediaFilters;
+  onFiltersChange?(filters: MediaFilters): void;
+}
+
+export function MediaPage({ filters: controlledFilters, onFiltersChange }: MediaPageProps) {
   const mediaQuery = useMediaQuery();
   const statusQuery = useMediaSyncStatusQuery();
   const syncMutation = useTriggerMediaSyncMutation();
-  const [filters, setFilters] = useState<MediaFilters>(initialFilters);
+  const [localFilters, setLocalFilters] = useState<MediaFilters>(initialMediaFilters);
+  const filters = controlledFilters ?? localFilters;
   const [revealedIds, setRevealedIds] = useState<Set<string>>(() => new Set());
   const [isRevealAll, setIsRevealAll] = useState(false);
   const [isFullSyncDialogOpen, setIsFullSyncDialogOpen] = useState(false);
@@ -42,7 +48,9 @@ export function MediaPage() {
   const isSyncBusy = statusQuery.data?.isSyncing === true || syncMutation.isPending;
 
   function updateFilter<Key extends keyof MediaFilters>(key: Key, value: MediaFilters[Key]) {
-    setFilters((current) => ({ ...current, [key]: value }));
+    const next = { ...filters, [key]: value };
+    if (controlledFilters === undefined) setLocalFilters(next);
+    onFiltersChange?.(next);
   }
 
   function toggleItem(itemId: string) {