fix: preview navigation walks the timeline's visible order

Previously the preview view walked the raw API photos array for arrow
navigation and the filmstrip. In tag-grouped mode (and any future
layout where the visible grid order diverges from the API sort) that
diverged from the order the user actually saw — they'd hit ← / → and
land on a photo that wasn't adjacent in the grid.

Fix: Timeline publishes its flat visible-order id sequence into the
photo store as visiblePhotoIds whenever its layout items change
(including duplicates from tag buckets, which is what the user wants
in tag mode — landing on a photo's second appearance in the next
bucket is the right behavior). PreviewView resolves that sequence
back to Photo objects via the rawPhotos map and uses the result for
both arrow nav and the filmstrip. Falls back to the raw photos list
when the sequence isn't populated yet.

Also clean up the lingering hardcoded http://localhost:8001 in
usePhotosQuery — switched to the shared axios instance with the
relative /api/v1 baseURL so the hook works cross-machine through the
nginx / vite proxy.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-08 21:13:08 +02:00
parent 7a0f738aa8
commit a56062d353
5 changed files with 53 additions and 7 deletions

View File

@@ -10,6 +10,12 @@ interface PhotoStore {
lastSelectedIndex: number | null
rangeStartIndex: number | null
viewMode: ViewMode
/** Flat sequence of photo ids in the order they currently appear in
* the timeline grid (including duplicates from tag-grouping). The
* preview view walks this sequence so arrow nav matches the order
* the user actually sees. Owned by the Timeline component, which
* rewrites it whenever its layout items change. */
visiblePhotoIds: string[]
setPhotos: (photos: Photo[]) => void
selectPhoto: (id: string, index: number) => void
@@ -19,6 +25,7 @@ interface PhotoStore {
clearSelection: () => void
setActivePhoto: (id: string | null) => void
setViewMode: (mode: ViewMode) => void
setVisiblePhotoIds: (ids: string[]) => void
openPreview: (id: string) => void
closePreview: () => void
}
@@ -30,6 +37,7 @@ export const usePhotoStore = create<PhotoStore>((set) => ({
lastSelectedIndex: null,
rangeStartIndex: null,
viewMode: 'grid',
visiblePhotoIds: [],
setPhotos: (photos) => set({ photos }),
@@ -73,6 +81,8 @@ export const usePhotoStore = create<PhotoStore>((set) => ({
setViewMode: (mode) => set({ viewMode: mode }),
setVisiblePhotoIds: (visiblePhotoIds) => set({ visiblePhotoIds }),
openPreview: (id) => set({ viewMode: 'preview', activePhotoId: id }),
closePreview: () => set({ viewMode: 'grid' }),