feat: multi-user auth with per-user media isolation

Introduce username/password authentication with admin and user roles.
Each user gets their own media directory under /photos/{username}/ with
isolated photos, folders, heaps, and tags. Admins manage users and
observe the full library from a dedicated Settings page.

Backend:
- User model with bcrypt passwords and JWT access/refresh tokens
- Auth router (login, refresh, setup, change-password, status)
- Admin router (user CRUD with last-admin protection)
- user_id FK added to photos, folders, source_roots, heaps, tags
- All data routers scoped by authenticated user
- Scanner inherits user_id from source root owner
- Thumbnails stored under user-prefixed paths for isolation
- Library endpoints accept ?scope=global for admin cross-user view
- Alembic migration 0009 with data migration for existing installs
- Defensive bootstrap.py handles fresh vs existing DB startup

Frontend:
- AuthContext with token lifecycle, auto-refresh, login/logout
- Login page, first-run setup page, auth gate in App.tsx
- Bearer token interceptor on all API requests
- User identity + logout in left sidebar
- Admin-only Settings page with Library Management and Users tabs
- UserManagement panel (add, edit role, reset password, deactivate)
- Settings shows global stats across all users for admin
- Filter bar, right sidebar, keyboard hints hidden on settings page

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

frontend/src/components/dialogs/SettingsDialog.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState, useCallback, useRef } from 'react'
 import {
-  X,
   RefreshCw,
   Wrench,
   Film,
@@ -15,6 +14,7 @@ import {
   Sparkles,
   Activity,
   FolderSearch,
+  Shield,
 } from 'lucide-react'
 import clsx from 'clsx'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
@@ -26,6 +26,8 @@ import {
   type WorkerStatus,
 } from '../../services/api'
 import { toast } from '../ToastContainer'
+import { useAuth } from '../../contexts/AuthContext'
+import { UserManagement } from '../admin/UserManagement'
 
 // React Query keys for the settings panels. Kept here (not in a shared
 // hook module) since they're internal to this dialog and used by the
@@ -40,24 +42,22 @@ const SETTINGS_SCAN_STATUS_KEY = ['settings', 'scan-status'] as const
 // the grid renders from. Imported via the canonical hook key.
 import { DUPLICATE_GROUPS_QUERY_KEY } from '../../hooks/useDuplicateGroupsQuery'
 
-interface SettingsDialogProps {
-  isOpen: boolean
-  onClose: () => void
-}
+type SettingsTab = 'library' | 'users'
+
+const TABS: { id: SettingsTab; label: string; adminOnly?: boolean }[] = [
+  { id: 'library', label: 'Library Management' },
+  { id: 'users', label: 'Users', adminOnly: true },
+]
 
 /**
- * Catch-all "settings + admin" panel. Currently exposes the maintenance
- * endpoints exposed by /api/v1/library/maintenance/* — regenerate
- * thumbnails (with filters), run the data-integrity cleanup, and trigger
- * a full library re-scan. The thumbnail stats block is the entry point
- * users will look at to understand what's going on after a scan.
- *
- * Each action is gated by an in-flight flag so double-clicks don't
- * stack background jobs, and the stats block re-fetches whenever the
- * dialog opens or after any action completes.
+ * Full-page settings view with tabbed navigation. Replaces the old
+ * modal dialog — renders as a top-level section in the main content
+ * area (like Timeline or MapView).
  */
-export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
+export function SettingsPage() {
+  const { isAdmin } = useAuth()
   const queryClient = useQueryClient()
+  const [activeTab, setActiveTab] = useState<SettingsTab>('library')
   const [showAllErrors, setShowAllErrors] = useState(false)
   // One key per action so each button has its own spinner without
   // blocking the others.
@@ -65,67 +65,45 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
 
   // All four panels fetch through React Query so cached data shows
   // instantly on reopen while a background refetch updates the numbers.
-  // `enabled: isOpen` avoids firing requests while the dialog is closed,
-  // but the cache entries survive between opens (default gcTime = 5m).
+  // All queries use scope=global so the admin sees cross-user totals.
   const thumbStatsQuery = useQuery({
     queryKey: SETTINGS_THUMB_STATS_KEY,
-    queryFn: library.maintenance.thumbnailStats,
-    enabled: isOpen,
-    // Treat as stale immediately so reopening the dialog triggers a
-    // background refetch on top of the cached view.
+    queryFn: () => library.maintenance.thumbnailStats('global'),
     staleTime: 0,
   })
   const libStatsQuery = useQuery({
     queryKey: SETTINGS_LIB_STATS_KEY,
-    queryFn: library.stats,
-    enabled: isOpen,
+    queryFn: () => library.stats('global'),
     staleTime: 0,
   })
-  // Worker status polls every 5s while the dialog is open — `refetchInterval`
-  // replaces the old setInterval loop. Missing-stats is relatively cheap
-  // but shares the same 5s rhythm to keep the orphan banner live.
   const workerStatusQuery = useQuery({
     queryKey: SETTINGS_WORKER_STATUS_KEY,
-    queryFn: library.maintenance.workerStatus,
-    enabled: isOpen,
-    refetchInterval: isOpen ? 5000 : false,
+    queryFn: () => library.maintenance.workerStatus('global'),
+    refetchInterval: 5000,
     staleTime: 0,
   })
   const missingStatsQuery = useQuery({
     queryKey: SETTINGS_MISSING_STATS_KEY,
     queryFn: library.maintenance.missingStats,
-    enabled: isOpen,
-    refetchInterval: isOpen ? 5000 : false,
+    refetchInterval: 5000,
     staleTime: 0,
   })
-  // Pipeline progress polls on the same 5s cadence as the worker status
-  // so both cards update together. Cheap query — ten COUNT(*)s on
-  // indexed columns.
   const pipelineStatsQuery = useQuery({
     queryKey: SETTINGS_PIPELINE_STATS_KEY,
-    queryFn: library.maintenance.pipelineStats,
-    enabled: isOpen,
-    refetchInterval: isOpen ? 5000 : false,
+    queryFn: () => library.maintenance.pipelineStats('global'),
+    refetchInterval: 5000,
     staleTime: 0,
   })
-  // Scan status — polls fast (2s) so the progress bar feels live during
-  // a scan, and slow (15s) when idle to cut chatter. `isScanning` is
-  // read from the latest fetched value so the cadence flips on its own
-  // the moment a scan kicks off or finishes.
   const scanStatusQuery = useQuery<ScanStatus>({
     queryKey: SETTINGS_SCAN_STATUS_KEY,
     queryFn: library.scanStatus,
-    enabled: isOpen,
     refetchInterval: (q) =>
-      isOpen ? ((q.state.data as ScanStatus | undefined)?.is_scanning ? 2000 : 15000) : false,
+      (q.state.data as ScanStatus | undefined)?.is_scanning ? 2000 : 15000,
     staleTime: 0,
   })
-  // Duplicates: shares the cache with DuplicatesView so a regroup
-  // triggered from Settings updates the grid view immediately.
   const duplicatesQuery = useQuery({
-    queryKey: DUPLICATE_GROUPS_QUERY_KEY,
-    queryFn: library.duplicates.groups,
-    enabled: isOpen,
+    queryKey: [...DUPLICATE_GROUPS_QUERY_KEY, 'global'],
+    queryFn: () => library.duplicates.groups('global'),
     staleTime: 0,
   })
 
@@ -170,29 +148,17 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
   // Surface fetch errors once (React Query de-dupes retries but we still
   // want a single toast so the user knows something went wrong).
   useEffect(() => {
-    if (!isOpen) return
     if (thumbStatsQuery.error || libStatsQuery.error) {
       console.error('Failed to load settings stats', thumbStatsQuery.error ?? libStatsQuery.error)
       toast.error('Could not load library stats')
     }
-  }, [isOpen, thumbStatsQuery.error, libStatsQuery.error])
+  }, [thumbStatsQuery.error, libStatsQuery.error])
   useEffect(() => {
-    if (!isOpen) return
     if (workerStatusQuery.error || missingStatsQuery.error) {
       console.error('Failed to load worker status', workerStatusQuery.error ?? missingStatsQuery.error)
       toast.error('Could not load worker status')
     }
-  }, [isOpen, workerStatusQuery.error, missingStatsQuery.error])
-
-  // Esc closes.
-  useEffect(() => {
-    if (!isOpen) return
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [isOpen, onClose])
+  }, [workerStatusQuery.error, missingStatsQuery.error])
 
   const runAction = useCallback(
     async <T,>(
@@ -229,39 +195,40 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     ) =>
       runAction(
         key,
-        () => library.maintenance.regenerateThumbnails(body),
+        () => library.maintenance.regenerateThumbnails(body, 'global'),
         'Regeneration queued',
         (r) => `${r.queued} photos queued, ${r.cleared_dirs} thumb dirs cleared`
       ),
     [runAction]
   )
 
-  if (!isOpen) return null
+  const visibleTabs = TABS.filter((t) => !t.adminOnly || isAdmin)
 
   return (
-    <div className="fixed inset-0 z-[2000]">
-      <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
-        onClick={onClose}
-      />
-      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-        <div className="relative z-10 flex max-h-[85vh] w-[640px] flex-col rounded-lg border border-border bg-surface shadow-2xl">
-          {/* Header */}
-          <div className="flex items-center justify-between border-b border-border px-5 py-3">
-            <h2 className="text-base font-semibold text-text">Settings</h2>
-            <button
-              onClick={onClose}
-              className="rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text"
-              title="Close (Esc)"
-            >
-              <X className="h-4 w-4" />
-            </button>
-          </div>
+    <div className="flex h-full flex-col">
+      {/* Tab bar */}
+      <div className="flex items-center gap-1 border-b border-border bg-surface px-4 py-1.5">
+        {visibleTabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={clsx(
+              'rounded px-3 py-1 text-xs font-medium transition-colors',
+              activeTab === tab.id
+                ? 'bg-primary/20 text-primary'
+                : 'text-text-muted hover:bg-surface-2 hover:text-text',
+            )}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
 
-          <div className="flex-1 overflow-y-auto p-5">
-            {/* ----------------------------------------------------- */}
-            {/* Library overview                                       */}
-            {/* ----------------------------------------------------- */}
+      {/* Tab content */}
+      <div className="flex-1 overflow-y-auto p-5">
+        <div className="mx-auto max-w-2xl">
+
+        {activeTab === 'library' && (<>
             <Section
               icon={<Database className="h-4 w-4" />}
               title="Library"
@@ -334,9 +301,6 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
               </div>
             </Section>
 
-            {/* ----------------------------------------------------- */}
-            {/* Pipeline progress — per-stage done/total               */}
-            {/* ----------------------------------------------------- */}
             <Section
               icon={<Activity className="h-4 w-4" />}
               title="Pipeline progress"
@@ -379,9 +343,6 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
               )}
             </Section>
 
-            {/* ----------------------------------------------------- */}
-            {/* Duplicate detection                                    */}
-            {/* ----------------------------------------------------- */}
             <Section
               icon={<Copy className="h-4 w-4" />}
               title="Duplicates"
@@ -433,9 +394,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
               </div>
             </Section>
 
-            {/* ----------------------------------------------------- */}
-            {/* Thumbnail maintenance                                  */}
-            {/* ----------------------------------------------------- */}
+
             <Section
               icon={<ImageIcon className="h-4 w-4" />}
               title="Thumbnails"
@@ -524,9 +483,6 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
               </div>
             </Section>
 
-            {/* ----------------------------------------------------- */}
-            {/* Worker fleet diagnostics                               */}
-            {/* ----------------------------------------------------- */}
             <Section
               icon={<Cpu className="h-4 w-4" />}
               title="Workers"
@@ -848,9 +804,6 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
               )}
             </Section>
 
-            {/* ----------------------------------------------------- */}
-            {/* Data integrity                                         */}
-            {/* ----------------------------------------------------- */}
             <Section
               icon={<Wrench className="h-4 w-4" />}
               title="Maintenance"
@@ -876,7 +829,17 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                 </ActionButton>
               </div>
             </Section>
-          </div>
+        </>)}
+
+        {activeTab === 'users' && isAdmin && (
+            <Section
+              icon={<Shield className="h-4 w-4" />}
+              title="User Management"
+            >
+              <UserManagement />
+            </Section>
+        )}
+
         </div>
       </div>
     </div>