From a2804d8c1b1b5fadc6bc4864ed7502dfc2c16064 Mon Sep 17 00:00:00 2001
From: LyAhn <admin@jezz.wtf>
Date: Mon, 8 Jun 2026 22:26:28 +0100
Subject: [PATCH] fix(timeline): CodeRabbit review corrections

- Fix cols overflow: use (containerWidth - GAP) formula so the grid
  never exceeds the container width
- Explicitly pin "unknown" date keys to the end of the sort rather than
  relying on alphabetical accident ("u" > digits)
- Guard buildLabel against non-YYYY-MM keys with finite/range checks
  and an isNaN fallback to "Unknown Date"
- Clear similarSourceFolderId, similarFolderId, and similarCrop when
  switching to the timeline view so all similar-state is consistently
  reset
---
 src/components/Timeline.tsx | 14 +++++++++++---
 src/store.ts                |  2 +-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index 1855eb0..edd4f6b 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -15,7 +15,11 @@ interface TimelineGroup {
 function buildLabel(key: string): string {
   if (key === "unknown") return "Unknown Date";
   const [yearStr, monthStr] = key.split("-");
-  const date = new Date(Number(yearStr), Number(monthStr) - 1);
+  const year = Number(yearStr);
+  const month = Number(monthStr);
+  if (!isFinite(year) || !isFinite(month) || month < 1 || month > 12) return "Unknown Date";
+  const date = new Date(year, month - 1);
+  if (isNaN(date.getTime())) return "Unknown Date";
   return date.toLocaleDateString(undefined, { month: "long", year: "numeric" });
 }
 
@@ -32,7 +36,11 @@ function groupImages(images: ImageRecord[]): TimelineGroup[] {
     bucket.push(img);
   }
   return Array.from(map.entries())
-    .sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0))
+    .sort(([a], [b]) => {
+      if (a === "unknown") return 1;
+      if (b === "unknown") return -1;
+      return a < b ? -1 : a > b ? 1 : 0;
+    })
     .map(([key, imgs]) => ({ key, label: buildLabel(key), images: imgs }));
 }
 
@@ -67,7 +75,7 @@ export function Timeline() {
 
   const tileSize = tileSizeForZoom(zoomPreset);
   const cols = useMemo(
-    () => Math.max(1, Math.floor((containerWidth + GAP) / (tileSize + GAP))),
+    () => Math.max(1, Math.floor((containerWidth - GAP) / (tileSize + GAP))),
     [containerWidth, tileSize],
   );
 
diff --git a/src/store.ts b/src/store.ts
index a3f6f43..c82494d 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -906,7 +906,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
 
   setView: (activeView) => {
     if (activeView === "timeline") {
-      set({ activeView, sort: "taken_asc", images: [], loadedCount: 0, collectionTitle: null, similarSourceImageId: null, similarHasMore: false, imageLoadError: null });
+      set({ activeView, sort: "taken_asc", images: [], loadedCount: 0, collectionTitle: null, similarSourceImageId: null, similarSourceFolderId: null, similarFolderId: null, similarHasMore: false, similarCrop: null, imageLoadError: null });
       void get().loadImages(true);
       return;
     }