ui: migrate to shadcn/ui primitives across dialogs, filters, and forms

Adopts shadcn/ui components (Dialog, Button, Input, Select, Popover,
Command, Checkbox, Switch, Toggle, Calendar, etc.) across the app,
replacing hand-rolled modals, dropdowns, and form controls. Adds a
reusable cmdk-backed MultiSelect for the Type, Tags, and Flag filters
so all multi-value filter popovers share one component and layout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/sidebar/PhotoInfoPanel.tsx

@@ -29,6 +29,13 @@ import { HEAPS_QUERY_KEY } from '../../hooks/useHeapsQuery'
 import { LIBRARY_STATS_QUERY_KEY } from '../../hooks/useLibraryStatsQuery'
 import { useTagsQuery, TAGS_QUERY_KEY } from '../../hooks/useTagsQuery'
 import { toast } from '../ToastContainer'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
 import {
   COLOR_LABEL_OPTIONS,
   type ColorLabel,
@@ -386,7 +393,7 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
       <div className="space-y-2.5 border-b border-border p-3">
         <div>
           <label className="mb-1 block text-xs text-text-muted">Filename</label>
-          <input
+          <Input
             type="text"
             value={filenameDraft}
             onChange={(e) => setFilenameDraft(e.target.value)}
@@ -405,7 +412,7 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
 
         <div>
           <label className="mb-1 block text-xs text-text-muted">Title</label>
-          <input
+          <Input
             type="text"
             value={titleDraft}
             onChange={(e) => setTitleDraft(e.target.value)}
@@ -425,7 +432,7 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
 
         <div>
           <label className="mb-1 block text-xs text-text-muted">Notes</label>
-          <textarea
+          <Textarea
             value={notesDraft}
             onChange={(e) => setNotesDraft(e.target.value)}
             onBlur={commitNotes}
@@ -680,20 +687,23 @@ function Section({
   children: React.ReactNode
 }) {
   return (
-    <div className="border-b border-border">
-      <button
-        onClick={onToggle}
-        className="flex w-full items-center justify-between px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-text-muted hover:bg-surface-2 hover:text-text"
-      >
+    <Collapsible
+      open={expanded}
+      onOpenChange={onToggle}
+      className="border-b border-border"
+    >
+      <CollapsibleTrigger className="flex w-full items-center justify-between px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-text-muted hover:bg-surface-2 hover:text-text">
         <span>{title}</span>
         {expanded ? (
           <ChevronDown className="h-3 w-3" />
         ) : (
           <ChevronRight className="h-3 w-3" />
         )}
-      </button>
-      {expanded && <div className="px-3 pb-2.5">{children}</div>}
-    </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="px-3 pb-2.5">
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
   )
 }
 
@@ -776,7 +786,7 @@ function TagsEditor({
       )}
 
       <div className="relative">
-        <input
+        <Input
           type="text"
           value={tagInput}
           onChange={(e) => onTagInputChange(e.target.value)}
@@ -789,7 +799,7 @@ function TagsEditor({
             }
           }}
           placeholder="Add tag…"
-          className="w-full rounded border border-border bg-bg px-2 py-1 text-xs text-text placeholder-text-faint focus:border-primary focus:outline-none"
+          className="h-7 bg-bg text-xs"
         />
         {suggestions.length > 0 && (
           <div className="mt-1 rounded border border-border bg-bg shadow-md">