feat: editable taken_at + folder-based date repair and filter

Lets operators fix corrupted capture dates at scale. Adds an editable
Date Taken field with a folder/filename-derived suggestion hint, a bulk
Date Taken section in the multi-select sidebar that either applies one
date to the whole selection or infers a per-photo date from each path,
a warning badge on thumbnails whose stored date disagrees with the
path, and a "Date issues" filter pill so suspicious photos can be
surfaced and fixed as a group. Edits are written back to EXIF on disk
so rescans don't clobber the fix.

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

frontend/src/components/sidebar/PhotoInfoPanel.tsx

@@ -11,7 +11,12 @@ import {
   Trash2,
 } from 'lucide-react'
 import clsx from 'clsx'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  useQuery,
+  useMutation,
+  useQueryClient,
+  keepPreviousData,
+} from '@tanstack/react-query'
 import { format } from 'date-fns'
 import {
   photos as photosApi,
@@ -28,6 +33,10 @@ import {
   COLOR_LABEL_OPTIONS,
   type ColorLabel,
 } from '../../constants/colorLabels'
+import {
+  guessDateFromPath,
+  toDatetimeLocalValue,
+} from '../../lib/guessDateFromPath'
 
 interface PhotoTagSummary {
   id: string
@@ -43,6 +52,7 @@ interface PhotoDetails {
   height: number | null
   file_size: number | null
   taken_at: string | null
+  taken_at_source: string | null
   rating: number
   is_discarded: boolean
   user_title: string | null
@@ -137,12 +147,16 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
     setExpandedSections(next)
   }
 
-  // Fetch the photo's full record (with EXIF) on demand.
-  const { data: photo } = useQuery<PhotoDetails>({
+  // Fetch the photo's full record (with EXIF) on demand. `keepPreviousData`
+  // holds the last photo on screen while the next one loads, so arrow-nav
+  // through the preview doesn't flash the "Loading…" placeholder between
+  // every neighbour — the panel swaps in place once the new record arrives.
+  const { data: photo, isPlaceholderData } = useQuery<PhotoDetails>({
     queryKey: ['photo', photoId],
     queryFn: () => photosApi.get(photoId),
     enabled: !!photoId,
     staleTime: 60_000,
+    placeholderData: keepPreviousData,
   })
 
   // Mutation for any patchable field. Invalidates both the photo detail
@@ -155,6 +169,7 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
       user_title?: string | null
       user_notes?: string | null
       color_label?: string | null
+      taken_at?: string
     }) => photosApi.update(photoId, data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['photo', photoId] })
@@ -240,12 +255,22 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
   const [filenameDraft, setFilenameDraft] = useState('')
   const [titleDraft, setTitleDraft] = useState('')
   const [notesDraft, setNotesDraft] = useState('')
+  const [takenAtDraft, setTakenAtDraft] = useState('')
 
   useEffect(() => {
     setFilenameDraft(photo?.filename ?? '')
     setTitleDraft(photo?.user_title ?? '')
     setNotesDraft(photo?.user_notes ?? '')
-  }, [photo?.id, photo?.filename, photo?.user_title, photo?.user_notes])
+    setTakenAtDraft(
+      photo?.taken_at ? toDatetimeLocalValue(new Date(photo.taken_at)) : ''
+    )
+  }, [
+    photo?.id,
+    photo?.filename,
+    photo?.user_title,
+    photo?.user_notes,
+    photo?.taken_at,
+  ])
 
   const commitFilename = () => {
     const next = filenameDraft.trim()
@@ -287,6 +312,44 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
     updateMutation.mutate({ user_notes: next || null })
   }
 
+  /** Commit a datetime-local draft back to the server. The backend also
+   *  rewrites EXIF on disk, so a failure here rolls the draft back to the
+   *  server value — we never want the UI to silently disagree with the
+   *  file. An empty string is a no-op because the input's `required` is
+   *  off and we don't yet have a "clear date" affordance. */
+  const commitTakenAt = (rawValue?: string) => {
+    const source = rawValue ?? takenAtDraft
+    if (!source) return
+    const parsed = new Date(source)
+    if (Number.isNaN(parsed.getTime())) {
+      toast.error('Invalid date', 'Could not parse the value')
+      setTakenAtDraft(
+        photo?.taken_at ? toDatetimeLocalValue(new Date(photo.taken_at)) : ''
+      )
+      return
+    }
+    const iso = parsed.toISOString()
+    if (photo?.taken_at && new Date(photo.taken_at).toISOString() === iso) {
+      return
+    }
+    updateMutation.mutate(
+      { taken_at: iso },
+      {
+        onError: (e: any) => {
+          toast.error(
+            'Date update failed',
+            e?.response?.data?.detail || e.message || 'Unknown error'
+          )
+          setTakenAtDraft(
+            photo?.taken_at
+              ? toDatetimeLocalValue(new Date(photo.taken_at))
+              : ''
+          )
+        },
+      }
+    )
+  }
+
   const exif = useMemo(() => parseExif(photo?.exif_json ?? null), [photo?.exif_json])
 
   if (!photo) {
@@ -313,7 +376,12 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
   )
 
   return (
-    <div className="flex h-full flex-col">
+    <div
+      className={clsx(
+        'flex h-full flex-col transition-opacity duration-150',
+        isPlaceholderData && 'opacity-70'
+      )}
+    >
       {/* Edit fields */}
       <div className="space-y-2.5 border-b border-border p-3">
         <div>
@@ -505,15 +573,14 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
                   : '—'
               }
             />
-            <Field
-              label="Date Taken"
-              value={
-                photo.taken_at
-                  ? format(new Date(photo.taken_at), 'MMM d, yyyy HH:mm')
-                  : '—'
-              }
-            />
           </div>
+          <TakenAtEditor
+            photo={photo}
+            draft={takenAtDraft}
+            onDraftChange={setTakenAtDraft}
+            onCommit={commitTakenAt}
+            darkTheme={darkTheme}
+          />
           {/* Filepath spans the full sidebar width — most paths are long
            *  enough that the two-column grid above wraps them painfully.
            *  Mono so each character lines up under the next, break-all
@@ -761,3 +828,114 @@ function Field({ label, value }: { label: string; value: string }) {
     </div>
   )
 }
+
+interface TakenAtEditorProps {
+  photo: PhotoDetails
+  draft: string
+  onDraftChange: (v: string) => void
+  onCommit: (raw?: string) => void
+  darkTheme: boolean
+}
+
+/** Editable Date Taken field with a source badge (EXIF / filesystem / manual)
+ *  and a folder-guess suggestion row that only shows up when the filepath
+ *  implies a different date than what's currently stored. The suggestion
+ *  hint is the whole point of this feature — epoch-reset phones and
+ *  corrupted EXIF dumps end up clustered in the wrong corner of the
+ *  timeline until someone rewrites them from the folder name. */
+function TakenAtEditor({
+  photo,
+  draft,
+  onDraftChange,
+  onCommit,
+  darkTheme,
+}: TakenAtEditorProps) {
+  const source = photo.taken_at_source ?? null
+  const sourceLabel =
+    source === 'exif'
+      ? 'EXIF'
+      : source === 'filesystem'
+        ? 'FILE'
+        : source === 'manual'
+          ? 'MANUAL'
+          : null
+
+  const guess = useMemo(
+    () => guessDateFromPath(photo.filepath),
+    [photo.filepath]
+  )
+
+  // Show the suggestion when:
+  //   - there's no stored date at all, OR
+  //   - the guess disagrees with the stored date by more than a day.
+  // A same-day match is treated as "already correct enough" so we don't
+  // nag the user on photos that happen to sit in a dated folder.
+  const showSuggestion = useMemo(() => {
+    if (!guess) return false
+    if (!photo.taken_at) return true
+    const current = new Date(photo.taken_at).getTime()
+    const suggested = guess.date.getTime()
+    return Math.abs(current - suggested) > 24 * 60 * 60 * 1000
+  }, [guess, photo.taken_at])
+
+  const inputClass = clsx(
+    'flex-1 rounded border px-2 py-1 text-xs focus:outline-none',
+    darkTheme
+      ? 'border-white/15 bg-black/40 text-white focus:border-primary'
+      : 'border-border bg-bg text-text focus:border-primary'
+  )
+
+  return (
+    <div className="mt-2 text-xs">
+      <label className="mb-1 block text-text-muted">Date Taken</label>
+      <div className="flex items-center gap-1.5">
+        <input
+          type="datetime-local"
+          value={draft}
+          onChange={(e) => onDraftChange(e.target.value)}
+          onBlur={() => onCommit()}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.currentTarget.blur()
+            } else if (e.key === 'Escape') {
+              onDraftChange(
+                photo.taken_at
+                  ? toDatetimeLocalValue(new Date(photo.taken_at))
+                  : ''
+              )
+              e.currentTarget.blur()
+            }
+          }}
+          className={inputClass}
+        />
+        {sourceLabel && (
+          <span
+            className="rounded-sm bg-black/60 px-1.5 py-0.5 text-[9px] font-semibold tracking-wider text-white"
+            title={`Source: ${sourceLabel.toLowerCase()}`}
+          >
+            {sourceLabel}
+          </span>
+        )}
+      </div>
+      {showSuggestion && guess && (
+        <button
+          onClick={() => {
+            const next = toDatetimeLocalValue(guess.date)
+            onDraftChange(next)
+            onCommit(next)
+          }}
+          className={clsx(
+            'mt-1.5 flex w-full items-center justify-between gap-2 rounded border border-dashed px-2 py-1 text-[11px] transition-colors',
+            'border-primary/50 text-primary hover:bg-primary/10'
+          )}
+          title={`Match "${guess.matched}" in path (${guess.source}, ${guess.confidence} confidence)`}
+        >
+          <span className="truncate">
+            Folder suggests {format(guess.date, 'MMM d, yyyy')}
+          </span>
+          <span className="shrink-0 font-semibold">Apply</span>
+        </button>
+      )}
+    </div>
+  )
+}