Optimize calendar refresh scheduling and cancel stale loads

Journal.App/src/lib/components/SidePanel.svelte

@@ -120,8 +120,10 @@
   let showSaveViewInput = false;
   let saveViewName = "";
   let hasLoadedSavedViews = false;
-  let lastCalendarTimelineKey = "";
   let calendarTimelineDebounce: ReturnType<typeof setTimeout> | null = null;
+  let calendarDataVersion = 0;
+  let calendarScheduleKey = "";
+  let calendarRefreshRequestId = 0;
   let lastActiveSection = "";
   let calendarLastRefreshedAt = "";
   let calendarDateExplicitlySelected = false;
@@ -310,11 +312,44 @@
     return tagTokens.some((token) => normalized.includes(token));
   }
 
+  function scheduleCalendarRefresh(delayMs = 200) {
+    if (activeSection !== "calendar") return;
+
+    const scheduleKey = [
+      selectedCalendarDate?.key ?? "",
+      calendarYear,
+      calendarMonth,
+      calendarViewMode,
+      calendarSortMode,
+      calendarQuery,
+      calendarTags,
+      calendarTypes,
+      calendarStartDate,
+      calendarEndDate,
+      calendarDataVersion,
+    ].join("|");
+
+    if (scheduleKey === calendarScheduleKey && calendarTimelineDebounce) {
+      return;
+    }
+
+    calendarScheduleKey = scheduleKey;
+    if (calendarTimelineDebounce) {
+      clearTimeout(calendarTimelineDebounce);
+    }
+
+    calendarTimelineDebounce = setTimeout(() => {
+      void refreshCalendarTimeline();
+    }, delayMs);
+  }
+
   async function refreshCalendarTimeline(): Promise<void> {
+    const requestId = ++calendarRefreshRequestId;
     calendarBusy = true;
     calendarError = "";
     try {
       const dataDirectory = await getDataDirectory();
+      if (requestId !== calendarRefreshRequestId) return;
       if (!dataDirectory) {
         calendarTimelineItems = [];
         return;
@@ -325,12 +360,14 @@
         dataDirectory,
         query: calendarQuery.trim() || undefined,
       });
+      if (requestId !== calendarRefreshRequestId) return;
 
       const [fragmentDtos, listDtos, todoDtos] = await Promise.all([
         listFragments(),
         listLists(),
         listTodoLists(),
       ]);
+      if (requestId !== calendarRefreshRequestId) return;
 
       const query = calendarQuery.trim();
       const tagTokens = splitFilterTokens(calendarTags);
@@ -425,10 +462,13 @@
         second: "2-digit",
       });
     } catch (error) {
+      if (requestId !== calendarRefreshRequestId) return;
       calendarError = String(error);
       calendarTimelineItems = [];
     } finally {
-      calendarBusy = false;
+      if (requestId === calendarRefreshRequestId) {
+        calendarBusy = false;
+      }
     }
   }
 
@@ -818,53 +858,45 @@
     loadSavedViews();
   }
 
-  $: calendarTimelineRefreshKey = JSON.stringify({
+  $: if (activeSection === "calendar") {
-    activeSection,
+    // Track store mutations without building large string signatures.
-    calendarYear,
+    const storeInvalidationTick = [
-    calendarMonth,
+      $entriesStore,
-    selectedCalendarDate,
+      $fragmentsStore,
-    calendarViewMode,
+      $listsStore,
-    calendarSortMode,
+      $todoListsStore,
-    calendarQuery,
+      $todosStore,
-    calendarTags,
+    ];
-    calendarTypes,
+    void storeInvalidationTick;
-    calendarStartDate,
+    calendarDataVersion += 1;
-    calendarEndDate,
+  }
-    entriesSig: $entriesStore
+
-      .map((item) => `${item.id}:${item.label}`)
+  $: if (activeSection === "calendar") {
-      .join("|"),
+    const calendarTrigger = [
-    fragmentsSig: $fragmentsStore
+      selectedCalendarDate?.key ?? "",
-      .map((item) => `${item.id}:${item.label}`)
+      calendarYear,
-      .join("|"),
+      calendarMonth,
-    listsSig: $listsStore.map((item) => `${item.id}:${item.label}`).join("|"),
+      calendarViewMode,
-    todosSig: $todoListsStore
+      calendarSortMode,
-      .map((item) => {
+      calendarQuery,
-        const todos = ($todosStore[item.id] ?? [])
+      calendarTags,
-          .map((todo) => `${todo.text}:${todo.done ? "1" : "0"}`)
+      calendarTypes,
-          .join("~");
+      calendarStartDate,
-        return `${item.id}:${item.label}:${todos}`;
+      calendarEndDate,
-      })
+      calendarDataVersion,
-      .join("|"),
+    ];
-  });
+    void calendarTrigger;
-  $: if (
+    scheduleCalendarRefresh(200);
-    activeSection === "calendar" &&
-    calendarTimelineRefreshKey !== lastCalendarTimelineKey
-  ) {
-    lastCalendarTimelineKey = calendarTimelineRefreshKey;
-    if (calendarTimelineDebounce) {
-      clearTimeout(calendarTimelineDebounce);
-    }
-    calendarTimelineDebounce = setTimeout(() => {
-      void refreshCalendarTimeline();
-    }, 200);
   }
 
   $: if (activeSection === "calendar" && lastActiveSection !== "calendar") {
     calendarDateExplicitlySelected = false;
+    calendarScheduleKey = "";
     void forceRefreshCalendar({ allowWhileBusy: true });
-    setTimeout(() => {
+  }
-      void forceRefreshCalendar({ allowWhileBusy: true });
+  $: if (activeSection !== "calendar" && calendarTimelineDebounce) {
-    }, 500);
+    clearTimeout(calendarTimelineDebounce);
+    calendarTimelineDebounce = null;
   }
   $: lastActiveSection = activeSection;