fix: reduce store rerenders and cleanup timers

src/hooks/useGenerationTasks.ts

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useCallback } from "react";
+import { useShallow } from "zustand/react/shallow";
 import type { GenerationQueueItem } from "../stores/useGenerationStore";
 import { useGenerationStore } from "../stores/useGenerationStore";
 import {
@@ -13,7 +14,17 @@ interface UseGenerationTasksOptions {
 
 export function useGenerationTasks(options: UseGenerationTasksOptions) {
   const { sourceView, autoResume = true } = options;
-  const store = useGenerationStore();
+  const {
+    queue,
+    addTask,
+    updateTask: updateStoredTask,
+    getRunningTasks,
+  } = useGenerationStore(useShallow((s) => ({
+    queue: s.queue,
+    addTask: s.addTask,
+    updateTask: s.updateTask,
+    getRunningTasks: s.getRunningTasks,
+  })));
   const pollingStartedRef = useRef(false);
 
   // ── Auto-resume: re-subscribe to running tasks on mount ────
@@ -21,7 +32,7 @@ export function useGenerationTasks(options: UseGenerationTasksOptions) {
     if (!autoResume || pollingStartedRef.current) return;
     pollingStartedRef.current = true;
 
-    const active = store.getRunningTasks().filter((t) => t.sourceView === sourceView);
+    const active = getRunningTasks().filter((t) => t.sourceView === sourceView);
     if (active.length > 0) {
       startBackgroundPolling();
     }
@@ -29,19 +40,19 @@ export function useGenerationTasks(options: UseGenerationTasksOptions) {
     return () => {
       pollingStartedRef.current = false;
     };
-  }, [autoResume, sourceView, store]);
+  }, [autoResume, sourceView, getRunningTasks]);
 
   // ── Subscribe to live updates ───────────────────────────
   useEffect(() => {
     return subscribeToTaskUpdates((updated) => {
-      store.updateTask(updated.id, updated);
+      updateStoredTask(updated.id, updated);
     });
-  }, [store]);
+  }, [updateStoredTask]);
 
   // ── View-scoped computed lists ──────────────────────────
   const myTasks = useMemo(
-    () => store.queue.filter((t) => t.sourceView === sourceView),
-    [store.queue, sourceView],
+    () => queue.filter((t) => t.sourceView === sourceView),
+    [queue, sourceView],
   );
 
   const activeTasks = useMemo(
@@ -63,41 +74,41 @@ export function useGenerationTasks(options: UseGenerationTasksOptions) {
   const submitTask = useCallback(
     (task: Omit<GenerationQueueItem, "id" | "createdAt">) => {
       const id = `gen-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-      store.addTask({ ...task, id, createdAt: Date.now() });
+      addTask({ ...task, id, createdAt: Date.now() });
       return id;
     },
-    [store],
+    [addTask],
   );
 
   const updateTask = useCallback(
     (id: string, patch: Partial<GenerationQueueItem>) => {
-      store.updateTask(id, patch);
+      updateStoredTask(id, patch);
     },
-    [store],
+    [updateStoredTask],
   );
 
   const markCompleted = useCallback(
     (id: string, resultUrl: string) => {
-      store.updateTask(id, { status: "completed", progress: 100, resultUrl });
+      updateStoredTask(id, { status: "completed", progress: 100, resultUrl });
     },
-    [store],
+    [updateStoredTask],
   );
 
   const markFailed = useCallback(
     (id: string, error: string) => {
-      store.updateTask(id, { status: "failed", error });
+      updateStoredTask(id, { status: "failed", error });
     },
-    [store],
+    [updateStoredTask],
   );
 
   const retryTask = useCallback(
     (id: string) => {
-      const task = store.queue.find((t) => t.id === id);
+      const task = queue.find((t) => t.id === id);
       if (task) {
-        store.updateTask(id, { status: "pending", progress: 0, error: null });
+        updateStoredTask(id, { status: "pending", progress: 0, error: null });
       }
     },
-    [store],
+    [queue, updateStoredTask],
   );
 
   return {