feat: frontend MVP — auth, timeline, upload, albums, admin, image viewer
Backend: - user roles (DB + JWT + first-user-is-admin) - volume-aware file resolver (multi-volume asset serving) - directory scanner uses volume URI directly - date-summary endpoint (capture date from EXIF) - timeline ordered by capture date - list endpoints: volumes, plugins, pipelines, library paths - delete endpoints: volumes, library paths - configurable upload body limit (MAX_UPLOAD_BYTES) Frontend: - auth: login/register, token refresh, role-based admin gate - timeline: date-grouped grid, infinite scroll, date scrubber - image viewer: fullscreen zoom/pan/pinch, metadata sidebar - upload: drag-drop, sequential upload, progress tracking - albums: create, add/remove photos, asset picker dialog - admin: storage (import library), jobs (pagination, error details), plugins (list + toggle), pipelines, sidecars, duplicates - multi-select mode with add-to-album action - TanStack Query for all data fetching
This commit is contained in:
178
k-photos-frontend/app/(app)/admin/sidecars/page.tsx
Normal file
178
k-photos-frontend/app/(app)/admin/sidecars/page.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import {
|
||||
useDetectChanges,
|
||||
useFullExport,
|
||||
useFullImport,
|
||||
useExportSidecar,
|
||||
useImportSidecar,
|
||||
useResolveSidecarConflict,
|
||||
} from "@/hooks/use-sidecars"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { toast } from "sonner"
|
||||
|
||||
export default function SidecarsPage() {
|
||||
const detectChanges = useDetectChanges()
|
||||
const fullExport = useFullExport()
|
||||
const fullImport = useFullImport()
|
||||
const exportSidecar = useExportSidecar()
|
||||
const importSidecar = useImportSidecar()
|
||||
const resolveConflict = useResolveSidecarConflict()
|
||||
|
||||
const [assetId, setAssetId] = useState("")
|
||||
const [conflictPolicy, setConflictPolicy] = useState("keep_local")
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<h1 className="text-lg font-semibold">Sidecar Management</h1>
|
||||
|
||||
{/* Bulk actions */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Bulk Operations</CardTitle>
|
||||
<CardDescription>
|
||||
Manage sidecar metadata across all assets
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={detectChanges.isPending}
|
||||
onClick={async () => {
|
||||
try {
|
||||
const res = await detectChanges.mutateAsync()
|
||||
toast.success(`Detected ${res.changed_count} change(s)`)
|
||||
} catch {
|
||||
toast.error("Detection failed")
|
||||
}
|
||||
}}
|
||||
>
|
||||
Detect Changes
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={fullExport.isPending}
|
||||
onClick={async () => {
|
||||
try {
|
||||
await fullExport.mutateAsync()
|
||||
toast.success("Full export started")
|
||||
} catch {
|
||||
toast.error("Export failed")
|
||||
}
|
||||
}}
|
||||
>
|
||||
Full Export
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={fullImport.isPending}
|
||||
onClick={async () => {
|
||||
try {
|
||||
await fullImport.mutateAsync()
|
||||
toast.success("Full import started")
|
||||
} catch {
|
||||
toast.error("Import failed")
|
||||
}
|
||||
}}
|
||||
>
|
||||
Full Import
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Per-asset */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Per-Asset Operations</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<Label className="text-xs">Asset ID</Label>
|
||||
<Input
|
||||
value={assetId}
|
||||
onChange={(e) => setAssetId(e.target.value)}
|
||||
placeholder="uuid"
|
||||
className="h-8"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={!assetId || exportSidecar.isPending}
|
||||
onClick={async () => {
|
||||
try {
|
||||
const res = await exportSidecar.mutateAsync(assetId)
|
||||
toast.success(
|
||||
<>
|
||||
Exported: <Badge variant="secondary">{res.status}</Badge>
|
||||
</>,
|
||||
)
|
||||
} catch {
|
||||
toast.error("Export failed")
|
||||
}
|
||||
}}
|
||||
>
|
||||
Export
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={!assetId || importSidecar.isPending}
|
||||
onClick={async () => {
|
||||
try {
|
||||
const res = await importSidecar.mutateAsync(assetId)
|
||||
toast.success(`Import: ${res.status}`)
|
||||
} catch {
|
||||
toast.error("Import failed")
|
||||
}
|
||||
}}
|
||||
>
|
||||
Import
|
||||
</Button>
|
||||
<div className="flex items-center gap-1">
|
||||
<Input
|
||||
value={conflictPolicy}
|
||||
onChange={(e) => setConflictPolicy(e.target.value)}
|
||||
placeholder="keep_local"
|
||||
className="h-8 w-32"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={!assetId || resolveConflict.isPending}
|
||||
onClick={async () => {
|
||||
try {
|
||||
await resolveConflict.mutateAsync({
|
||||
assetId,
|
||||
policy: conflictPolicy,
|
||||
})
|
||||
toast.success("Conflict resolved")
|
||||
} catch {
|
||||
toast.error("Resolve failed")
|
||||
}
|
||||
}}
|
||||
>
|
||||
Resolve
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user