fix: dedupe board image add events by original/source/data URL

src/store.tsx

@@ -38,6 +38,8 @@ 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 }) => {
   const [textNotes, setTextNotes] = useState<TextNote[]>([]);
   const [images, setImages] = useState<RefImage[]>([]);
@@ -70,22 +72,25 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
   const [activeProjectId, setActiveProjectId] = useState<string | null>(null);
   const [boardTitle, setBoardTitle] = useState('Untitled Board');
 
-  // Browser hover overlay -> Rust -> board://image_added -> active canvas state.
-  // The native browser capture path cannot directly mutate this React store, so this is the bridge.
   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);
+      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;
       setImages(prev => {
-        if (prev.some(img => img.url === p.url || img.url === p.dataUrl || img.id === p.id)) return 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;
         return [...prev, {
           id: crypto.randomUUID(),
-          url: p.dataUrl || p.data_url || p.url,
-          sourceUrl: p.sourceUrl || p.source_url || p.source || p.originalUrl || p.original_url,
+          url: dataUrl,
+          sourceUrl: sourceUrl || originalUrl,
           x: (-pan.x + window.innerWidth / 2 - targetW / 2) / zoom,
           y: (-pan.y + window.innerHeight / 2 - targetH / 2) / zoom,
           width: Math.round(targetW),
@@ -98,59 +103,16 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     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(() => {});
-  }, []);
+  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);
-  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]);
+  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]);
   const redo = useCallback(() => { if (historyIndex < history.length - 1) { 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]);
+  const updateSelectedNodes = useCallback((dx: number, dy: number, explicitTargetId: string) => { const ids = new Set([...selectedNodeIds, explicitTargetId]); setImages(prev => { const gids = new Set<string>(); prev.forEach(i => { if (ids.has(i.id) && i.groupId) gids.add(i.groupId); }); return prev.map(i => (ids.has(i.id) || (i.groupId && gids.has(i.groupId))) ? { ...i, x: i.x + dx, y: i.y + dy } : i); }); setTextNotes(prev => { const gids = new Set<string>(); prev.forEach(i => { if (ids.has(i.id) && i.groupId) gids.add(i.groupId); }); return prev.map(i => (ids.has(i.id) || (i.groupId && gids.has(i.groupId))) ? { ...i, x: i.x + dx, y: i.y + dy } : i); }); }, [selectedNodeIds]);
 
-  const updateSelectedNodes = useCallback((dx: number, dy: number, explicitTargetId: string) => {
-    const ids = new Set([...selectedNodeIds, explicitTargetId]);
-    setImages(prev => { const gids = new Set<string>(); prev.forEach(i => { if (ids.has(i.id) && i.groupId) gids.add(i.groupId); }); return prev.map(i => (ids.has(i.id) || (i.groupId && gids.has(i.groupId))) ? { ...i, x: i.x + dx, y: i.y + dy } : i); });
-    setTextNotes(prev => { const gids = new Set<string>(); prev.forEach(i => { if (ids.has(i.id) && i.groupId) gids.add(i.groupId); }); return prev.map(i => (ids.has(i.id) || (i.groupId && gids.has(i.groupId))) ? { ...i, x: i.x + dx, y: i.y + dy } : i); });
-  }, [selectedNodeIds]);
-
-  return (
-    <AppContext.Provider value={{ textNotes, setTextNotes, images, setImages, annotations, setAnnotations, palettes, setPalettes, zoom, setZoom, pan, setPan, isSettingsOpen, setIsSettingsOpen, isBrowserOpen, setIsBrowserOpen, isLibraryOpen, setIsLibraryOpen, selectedNodeIds, setSelectedNodeIds, globalDesaturate, setGlobalDesaturate, contextMenu, setContextMenu, isAlwaysOnTop, setIsAlwaysOnTop, bgOpacity, setBgOpacity, isClickThrough, setIsClickThrough, isAnnotationMode, setIsAnnotationMode, annotationColor, setAnnotationColor, annotationSize, setAnnotationSize, isEraser, setIsEraser, isHighlighter, setIsHighlighter, undo, redo, currentScreen, setCurrentScreen, updateSelectedNodes, focusedImageId, setFocusedImageId, valueMirrorIds, setValueMirrorIds, isZoomLensActive, setIsZoomLensActive, isWhisperBrowser, setIsWhisperBrowser, activeProjectId, setActiveProjectId, boardTitle, setBoardTitle }}>
-      {children}
-    </AppContext.Provider>
-  );
+  return <AppContext.Provider value={{ textNotes, setTextNotes, images, setImages, annotations, setAnnotations, palettes, setPalettes, zoom, setZoom, pan, setPan, isSettingsOpen, setIsSettingsOpen, isBrowserOpen, setIsBrowserOpen, isLibraryOpen, setIsLibraryOpen, selectedNodeIds, setSelectedNodeIds, globalDesaturate, setGlobalDesaturate, contextMenu, setContextMenu, isAlwaysOnTop, setIsAlwaysOnTop, bgOpacity, setBgOpacity, isClickThrough, setIsClickThrough, isAnnotationMode, setIsAnnotationMode, annotationColor, setAnnotationColor, annotationSize, setAnnotationSize, isEraser, setIsEraser, isHighlighter, setIsHighlighter, undo, redo, currentScreen, setCurrentScreen, updateSelectedNodes, focusedImageId, setFocusedImageId, valueMirrorIds, setValueMirrorIds, isZoomLensActive, setIsZoomLensActive, isWhisperBrowser, setIsWhisperBrowser, activeProjectId, setActiveProjectId, boardTitle, setBoardTitle }}>{children}</AppContext.Provider>;
 };
 
 export const useAppStore = () => { const ctx = useContext(AppContext); if (!ctx) throw new Error('useAppStore must be used within AppProvider'); return ctx; };