From 6d8e92940a770373e1ed2df71f9efeaf5ef55a3f Mon Sep 17 00:00:00 2001 From: dtoro Date: Thu, 9 Apr 2026 17:47:16 +0200 Subject: [PATCH] feat: auto-focus first photo on timeline mount Arrow-key navigation required a click to establish an active photo first. Now the grid auto-selects photos[0] on initial mount when no active photo is set, so the user can land on the app and immediately walk the grid with arrows. Guarded on viewMode === 'grid' and !activePhotoId so we never clobber an existing selection or fight with PreviewView. Co-Authored-By: Claude Opus 4.6 (1M context) --- frontend/src/components/timeline/Timeline.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/frontend/src/components/timeline/Timeline.tsx b/frontend/src/components/timeline/Timeline.tsx index 74169c4..7b09bf3 100644 --- a/frontend/src/components/timeline/Timeline.tsx +++ b/frontend/src/components/timeline/Timeline.tsx @@ -220,6 +220,17 @@ export function Timeline() { // they share one cache entry, regardless of filter state. const { data: photos = [], isLoading } = usePhotosQuery() + // Auto-focus the first photo on initial grid load so arrow-key nav + // works immediately without a pre-click. Only fires when there's no + // current active photo — we never clobber the user's selection or + // the one they restored by navigating back from preview. + useEffect(() => { + if (viewMode !== 'grid') return + if (activePhotoId) return + if (photos.length === 0) return + selectPhoto(photos[0].id) + }, [viewMode, activePhotoId, photos, selectPhoto]) + // Membership in the active heap (for the basket affordance). Subscribed // once at this level so we don't have hundreds of thumbnails each // subscribing to the same query.