feat(graph): add interactive notebook filters and detail panel tags to graph view

memento-note/components/note-graph-view.tsx

@@ -27,6 +27,7 @@ export function NoteGraphView() {
   const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null)
   const [notePreview, setNotePreview] = useState<NotePreview | null>(null)
   const [previewLoading, setPreviewLoading] = useState(false)
+  const [selectedNotebookId, setSelectedNotebookId] = useState<string | null>(null)
 
   // ─── Resize ───────────────────────────────────────────────────────────────
   useEffect(() => {
@@ -89,9 +90,17 @@ export function NoteGraphView() {
   // ─── Graph data ───────────────────────────────────────────────────────────
   const graphData = useMemo(() => {
     if (!rawData) return { nodes: [], links: [] }
-    const filtered = searchFilter.trim()
-      ? rawData.nodes.filter(n => n.title.toLowerCase().includes(searchFilter.toLowerCase()))
+
+    // Filter by notebook
+    let filtered = selectedNotebookId
+      ? rawData.nodes.filter(n => n.notebookId === selectedNotebookId)
       : rawData.nodes
+
+    // Filter by text search
+    filtered = searchFilter.trim()
+      ? filtered.filter(n => n.title.toLowerCase().includes(searchFilter.toLowerCase()))
+      : filtered
+
     const filteredIds = new Set(filtered.map(n => n.id))
     return {
       nodes: filtered.map(n => ({
@@ -134,7 +143,12 @@ export function NoteGraphView() {
           }
         }),
     }
-  }, [rawData, searchFilter, colorMap])
+  }, [rawData, searchFilter, colorMap, selectedNotebookId])
+
+  const selectedNotebookName = useMemo(() => {
+    if (!selectedNode || !rawData) return null
+    return rawData.clusters.find(c => c.id === selectedNode.notebookId)?.name ?? null
+  }, [selectedNode, rawData])
 
   // ─── Handlers (double-click via timer) ──────────────────────────────────
   const lastClickRef = useRef<{ id: string; time: number } | null>(null)
@@ -325,15 +339,43 @@ export function NoteGraphView() {
           </button>
         )}
 
-        {/* Cluster legend */}
+        {/* Cluster legend (Interactive Notebook Filter) */}
         {rawData && rawData.clusters && rawData.clusters.length > 0 && (
-          <div className="absolute top-4 left-4 z-10 flex flex-col gap-1.5 max-h-[50vh] overflow-y-auto pr-1">
-            {rawData.clusters.map(c => (
-              <div key={c.id} className="flex items-center gap-1.5 px-2 py-0.5 bg-white/90 border border-border/30 rounded-full shadow-sm">
-                <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: colorMap.get(c.id) ?? '#94a3b8' }} />
-                <span className="text-[9px] font-medium text-concrete/70 whitespace-nowrap">{c.name}</span>
-              </div>
-            ))}
+          <div className="absolute top-4 left-4 z-10 flex flex-col gap-2 max-h-[50vh] overflow-y-auto pr-1">
+            <span className="text-[9px] font-bold text-slate-800 uppercase tracking-wider pl-1 select-none">Carnets</span>
+            {selectedNotebookId && (
+              <button
+                onClick={() => setSelectedNotebookId(null)}
+                className="flex items-center gap-1.5 px-2.5 py-1 bg-white border border-rose-200 text-rose-600 rounded-full shadow-sm hover:bg-rose-50 transition-all text-[9px] font-semibold w-fit"
+              >
+                <X size={10} />
+                Réinitialiser
+              </button>
+            )}
+            <div className="flex flex-col gap-1.5">
+              {rawData.clusters.map(c => {
+                const isSelected = selectedNotebookId === c.id
+                const isAnySelected = selectedNotebookId !== null
+                const color = colorMap.get(c.id) ?? '#94a3b8'
+                return (
+                  <button
+                    key={c.id}
+                    onClick={() => setSelectedNotebookId(isSelected ? null : c.id)}
+                    className={`flex items-center gap-2 px-3 py-1 bg-white border rounded-full shadow-sm transition-all duration-200 hover:scale-105 w-fit text-left ${
+                      isSelected
+                        ? 'border-indigo-500 ring-2 ring-indigo-500/20 font-semibold'
+                        : isAnySelected
+                        ? 'border-border/30 opacity-40 hover:opacity-100'
+                        : 'border-border/30 hover:border-concrete/40'
+                    }`}
+                  >
+                    <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: color }} />
+                    <span className="text-[10px] text-concrete/80 whitespace-nowrap">{c.name}</span>
+                    {isSelected && <X size={10} className="text-concrete/40 ml-0.5 shrink-0" />}
+                  </button>
+                )
+              })}
+            </div>
           </div>
         )}
 
@@ -376,6 +418,15 @@ export function NoteGraphView() {
                   {new Date(selectedNode.createdAt).toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' })}
                   {' · '}{selectedNode.degree} connexion{selectedNode.degree !== 1 ? 's' : ''}
                 </p>
+                {selectedNotebookName && (
+                  <button
+                    onClick={() => setSelectedNotebookId(selectedNode.notebookId === selectedNotebookId ? null : selectedNode.notebookId)}
+                    className="mt-2 inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[9px] font-semibold bg-slate-100 hover:bg-slate-200 text-concrete transition-colors border border-border/30 hover:scale-105 transition-all"
+                  >
+                    <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ backgroundColor: colorMap.get(selectedNode.notebookId) ?? '#94a3b8' }} />
+                    {selectedNotebookName}
+                  </button>
+                )}
               </div>
               <button onClick={() => setSelectedNode(null)} className="p-1 rounded text-concrete/40 hover:text-ink hover:bg-black/5">
                 <X size={14} />