feat: panneaux sticky + boutons close ✕

frontend/js/graph.js

@@ -53,7 +53,9 @@ export const GraphViewManager = {
   _tagFilter: '',
   _hoveredNode: null,
   _infoPanel: null,
+  _infoContent: null,
   _previewPanel: null,
+  _previewContent: null,
   _previewCache: {},
   _previewPending: null,
   _ctrlHoverNode: null,
@@ -71,7 +73,9 @@ export const GraphViewManager = {
     if (!modal || !canvas) return;
 
     this._infoPanel = document.getElementById('graph-info-panel');
+    this._infoContent = document.getElementById('graph-info-content');
     this._previewPanel = document.getElementById('graph-preview-panel');
+    this._previewContent = document.getElementById('graph-preview-content');
     this._depth = depthSlider ? parseInt(depthSlider.value) : 1;
     this._scope = 'directory';
 
@@ -535,7 +539,7 @@ export const GraphViewManager = {
 
   _showTooltip(node, screenX, screenY, isPreview) {
     if (isPreview) return; // Handled by _showPreviewTooltip
-    if (!this._infoPanel) return;
+    if (!this._infoContent) return;
     const cacheKey = `${this._vault}:${node.path}`;
     const cached = this._previewCache[cacheKey];
     const meta = cached?.meta;
@@ -558,8 +562,8 @@ export const GraphViewManager = {
     const typeIcon = node.type === 'directory' ? '📁' : '📄';
     const typeLabel = node.type === 'directory' ? 'Dossier' : (node.path || '').endsWith('.md') ? 'Markdown' : 'Fichier';
     
-    this._infoPanel.innerHTML = `
-      <div style="display:flex;align-items:flex-start;gap:8px;margin-bottom:8px">
+    this._infoContent.innerHTML = `
+      <div style="display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;padding-right:16px">
         <span style="font-size:1.2rem">${typeIcon}</span>
         <div style="flex:1;min-width:0">
           <div style="font-weight:600;font-size:0.85rem;word-break:break-word">${meta?.title || node.name}</div>
@@ -578,12 +582,11 @@ export const GraphViewManager = {
   },
 
   _hideTooltip() {
-    if (this._infoPanel) this._infoPanel.style.display = 'none';
-    if (this._previewPanel) this._previewPanel.style.display = 'none';
+    // Panels are now sticky — only hide via close button
   },
 
   _showPreviewTooltip(node, preview, screenX, screenY) {
-    if (!this._previewPanel || this._ctrlHoverNode !== node) return;
+    if (!this._previewContent || this._ctrlHoverNode !== node) return;
     const cacheKey = `${this._vault}:${node.path}`;
     const cached = this._previewCache[cacheKey];
     const meta = cached?.meta;
@@ -600,7 +603,7 @@ export const GraphViewManager = {
       if (items.length > 0) fmSummary = `<div style="font-size:0.7rem;color:var(--text-muted);margin:4px 0">${items.join(' · ')}</div>`;
     }
     const tags = (meta?.tags || node.tags || []).slice(0, 8);
-    this._previewPanel.innerHTML = `
+    this._previewContent.innerHTML = `
       <div style="font-weight:700;font-size:0.95rem;margin-bottom:4px;word-break:break-word">${meta?.title || node.name}</div>
       <div style="color:var(--text-muted);font-size:0.7rem;margin-bottom:6px;word-break:break-all">${node.path}</div>
       ${fmSummary}
@@ -843,7 +846,7 @@ export function initGraphView() {
       gm._dragNode = null;
       gm._panning = false;
       canvas.style.cursor = 'grab';
-      gm._hideTooltip();
+      // Panels stay visible until closed via button
     });
     canvas.addEventListener('wheel', (e) => gm._onWheel(e), { passive: false });
     window.addEventListener('resize', () => gm._onResize());
@@ -854,4 +857,10 @@ export function initGraphView() {
       gm.close();
     }
   });
+
+  // Close buttons for sticky panels
+  const infoClose = document.getElementById('graph-info-close');
+  if (infoClose) infoClose.addEventListener('click', () => { if (gm._infoPanel) gm._infoPanel.style.display = 'none'; });
+  const previewClose = document.getElementById('graph-preview-close');
+  if (previewClose) previewClose.addEventListener('click', () => { if (gm._previewPanel) gm._previewPanel.style.display = 'none'; });
 }