fix: board image event listener registered once and dedupes by captureId/url

src/store.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, ReactNode, useEffect, useCallback } from 'react';
+import React, { createContext, useContext, useState, ReactNode, useEffect, useCallback, useRef } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
 import { RefImage, ContextMenuState, AnnotationPath, Palette, TextNote } from './types';
@@ -37,7 +37,6 @@ interface AppState {
 
 const AppContext = createContext<AppState | undefined>(undefined);
 function emitError(msg: string) { window.dispatchEvent(new CustomEvent('muse:error', { detail: msg })); }
-
 function normalizeUrl(v: any): string { return String(v || '').trim(); }
 
 export const AppProvider = ({ children }: { children: ReactNode }) => {
@@ -72,27 +71,42 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
   const [activeProjectId, setActiveProjectId] = useState<string | null>(null);
   const [boardTitle, setBoardTitle] = useState('Untitled Board');
 
+  const panRef = useRef(pan);
+  const zoomRef = useRef(zoom);
+  useEffect(() => { panRef.current = pan; }, [pan]);
+  useEffect(() => { zoomRef.current = zoom; }, [zoom]);
+
+  // Register exactly once. Use refs for current pan/zoom to avoid duplicate listeners.
   useEffect(() => {
     const un = listen<any>('board://image_added', (event) => {
       const p = event.payload || {};
       const dataUrl = normalizeUrl(p.dataUrl || p.data_url || p.url);
       const originalUrl = normalizeUrl(p.url || p.originalUrl || p.original_url || dataUrl);
       const sourceUrl = normalizeUrl(p.sourceUrl || p.source_url || p.source || p.pageUrl || p.page_url);
+      const captureId = normalizeUrl(p.captureId || p.capture_id);
       if (!dataUrl) return;
       const width = Number(p.width || 300);
       const height = Number(p.height || 200);
       const ratio = width > 0 && height > 0 ? width / height : 1.5;
       const targetW = Math.min(480, Math.max(160, width > 0 ? width / 3 : 300));
       const targetH = targetW / ratio;
+      const currentPan = panRef.current;
+      const currentZoom = zoomRef.current;
       setImages(prev => {
-        // Strong dedupe: same source/original/data URL within board means same capture.
-        if (prev.some(img => normalizeUrl(img.url) === dataUrl || normalizeUrl(img.url) === originalUrl || normalizeUrl(img.sourceUrl) === sourceUrl || normalizeUrl(img.sourceUrl) === originalUrl)) return prev;
+        if (prev.some(img =>
+          (captureId && img.captureId === captureId) ||
+          normalizeUrl(img.url) === dataUrl ||
+          normalizeUrl(img.url) === originalUrl ||
+          (sourceUrl && normalizeUrl(img.sourceUrl) === sourceUrl) ||
+          normalizeUrl(img.sourceUrl) === originalUrl
+        )) return prev;
         return [...prev, {
           id: crypto.randomUUID(),
+          captureId,
           url: dataUrl,
           sourceUrl: sourceUrl || originalUrl,
-          x: (-pan.x + window.innerWidth / 2 - targetW / 2) / zoom,
-          y: (-pan.y + window.innerHeight / 2 - targetH / 2) / zoom,
+          x: (-currentPan.x + window.innerWidth / 2 - targetW / 2) / currentZoom,
+          y: (-currentPan.y + window.innerHeight / 2 - targetH / 2) / currentZoom,
           width: Math.round(targetW),
           height: Math.round(targetH),
           aspectRatio: ratio,
@@ -101,11 +115,11 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
       setCurrentScreen('board');
     });
     return () => { un.then(fn => fn()); };
-  }, [pan, zoom]);
+  }, []);
 
   useEffect(() => { invoke<string | null>('projects_get_active_id').then(id => { if (!id) return; setActiveProjectId(id); invoke<string>('project_load', { id }).then(json => { try { const saved = JSON.parse(json); if (saved.images) setImages(saved.images); if (saved.textNotes) setTextNotes(saved.textNotes); if (saved.annotations) setAnnotations(saved.annotations); if (saved.palettes) setPalettes(saved.palettes); if (saved.zoom) setZoom(saved.zoom); if (saved.pan) setPan(saved.pan); if (saved.title) setBoardTitle(saved.title); if (saved.valueMirrorIds) setValueMirrorIds(saved.valueMirrorIds); setCurrentScreen('board'); } catch (e) { console.error('Failed to parse project state:', e); emitError('Failed to load project — file may be corrupted'); } }).catch(e => { console.error('project_load failed:', e); emitError(`Failed to load project: ${e}`); }); }).catch(() => {}); }, []);
 
-  const saveFailedRef = React.useRef(false);
+  const saveFailedRef = useRef(false);
   useEffect(() => { if (isUndoing) { setIsUndoing(false); return; } if (!activeProjectId) return; const timer = setTimeout(() => { const stateToSave = { textNotes, images, annotations, palettes, zoom, pan, valueMirrorIds, title: boardTitle }; invoke('project_save', { id: activeProjectId, state: JSON.stringify(stateToSave), title: boardTitle }).then(() => { saveFailedRef.current = false; }).catch(e => { if (!saveFailedRef.current) { emitError(`Auto-save failed: ${e}`); saveFailedRef.current = true; } console.error('Auto-save failed:', e); }); setHistory(prev => { const nh = prev.slice(0, historyIndex + 1 > 0 ? historyIndex + 1 : undefined); if (JSON.stringify(nh[nh.length - 1]) !== JSON.stringify(stateToSave)) { nh.push(stateToSave); if (nh.length > 200) nh.shift(); setHistoryIndex(nh.length - 1); } return nh; }); }, 800); return () => clearTimeout(timer); }, [textNotes, images, annotations, palettes, zoom, pan, valueMirrorIds, activeProjectId, boardTitle]);
 
   const undo = useCallback(() => { if (historyIndex > 0) { setIsUndoing(true); const s = history[historyIndex - 1]; setTextNotes(s.textNotes); setImages(s.images); setAnnotations(s.annotations); setPalettes(s.palettes); setZoom(s.zoom); setPan(s.pan); if (s.valueMirrorIds) setValueMirrorIds(s.valueMirrorIds); setHistoryIndex(historyIndex - 1); } }, [history, historyIndex]);