Gabriel Kaszewski
957737ac9b
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
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo } from "react"
|
|
import { useTimeline, useDateSummary } from "@/hooks/use-timeline"
|
|
import { groupByDate } from "@/lib/timeline"
|
|
import { PhotoGrid } from "@/components/photo-grid"
|
|
import { DateScrubber } from "@/components/date-scrubber"
|
|
|
|
export default function TimelinePage() {
|
|
const { assets, isLoading, hasMore, loadMore, total } = useTimeline()
|
|
const { data: dateSummary } = useDateSummary()
|
|
const groups = useMemo(() => groupByDate(assets), [assets])
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-lg font-semibold">Timeline</h1>
|
|
{total > 0 && (
|
|
<span className="text-sm text-muted-foreground">
|
|
{total} photos
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-1">
|
|
<PhotoGrid
|
|
groups={groups}
|
|
isLoading={isLoading}
|
|
hasMore={hasMore}
|
|
onLoadMore={() => loadMore()}
|
|
/>
|
|
<DateScrubber dates={dateSummary ?? []} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|