feat: support complet des images — arborescence, visionneuse, indexation #108

frontend/js/utils.js

@@ -201,17 +201,17 @@ const EXT_ICONS = {
   ".tex": "file-text",
   ".latex": "file-text",
 
-  // Image files
-  ".png": "file-image",
-  ".jpg": "file-image",
-  ".jpeg": "file-image",
-  ".gif": "file-image",
-  ".svg": "file-image",
-  ".webp": "file-image",
-  ".bmp": "file-image",
-  ".ico": "file-image",
-  ".tiff": "file-image",
-  ".tif": "file-image",
+  // Image files (roadmap #108-D1)
+  ".png": "image",
+  ".jpg": "image",
+  ".jpeg": "image",
+  ".gif": "image",
+  ".svg": "image",
+  ".webp": "image",
+  ".bmp": "image",
+  ".ico": "image",
+  ".tiff": "image",
+  ".tif": "image",
 
   // Audio files
   ".mp3": "file-music",

frontend/js/viewer.js

@@ -540,12 +540,257 @@ export function navigatePdfToPage(area, page) {
   iframe.src = `${base}${sep}_pdfpage=${Date.now()}#page=${page}`;
 }
 
+// ---------------------------------------------------------------------------
+// Image viewer (roadmap #108-D)
+// ---------------------------------------------------------------------------
+const IMAGE_EXTS = new Set([".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".bmp", ".ico"]);
+const IMAGE_ZOOM_MIN = 0.1;
+const IMAGE_ZOOM_MAX = 8;
+let _imageViewerCleanup = null;
+
+/** Clamp a zoom factor into the supported [0.1, 8] range. */
+export function clampImageZoom(value) {
+  if (!Number.isFinite(value)) return 1;
+  return Math.min(IMAGE_ZOOM_MAX, Math.max(IMAGE_ZOOM_MIN, value));
+}
+
+/** True when *p* has a viewable image extension. */
+export function isImagePath(p) {
+  const lower = (p || "").toLowerCase();
+  const dot = lower.lastIndexOf(".");
+  return dot !== -1 && IMAGE_EXTS.has(lower.slice(dot));
+}
+
+/** Build the byte-serving URL used by <img> / thumbnails. */
+export function buildImageUrl(vault, path) {
+  return `/api/image/${encodeURIComponent(vault)}?path=${encodeURIComponent(path)}`;
+}
+
+function buildThumbUrl(vault, path, size) {
+  return `/api/media/${encodeURIComponent(vault)}/thumb?path=${encodeURIComponent(path)}&size=${size}`;
+}
+
+function formatBytes(n) {
+  if (!n && n !== 0) return "";
+  if (n < 1024) return `${n} o`;
+  if (n < 1048576) return `${(n / 1024).toFixed(1)} Ko`;
+  return `${(n / 1048576).toFixed(1)} Mo`;
+}
+
+/**
+ * Render a full image viewer: centered image, wheel zoom (0.1×–8×), drag pan,
+ * double-click reset, ←/→ navigation between siblings, thumbnail filmstrip,
+ * collapsible metadata panel and a full-viewport lightbox.
+ */
+export function renderImageViewer(area, data) {
+  const vault = data.vault;
+  const path = data.path;
+  const fileName = (path || "").split("/").pop();
+  const imgUrl = buildImageUrl(vault, path);
+
+  area.innerHTML = "";
+  const container = el("div", { class: "image-viewer-container", tabindex: "0" });
+
+  // ── Toolbar ────────────────────────────────────────────────────────────
+  const toolbar = el("div", { class: "image-toolbar" });
+  toolbar.appendChild(el("span", { class: "image-title", title: path }, [
+    document.createTextNode(data.title || fileName),
+  ]));
+  toolbar.appendChild(el("div", { class: "image-toolbar-spacer" }));
+
+  const zoomBadge = el("span", { class: "image-zoom-badge" }, [document.createTextNode("100%")]);
+  toolbar.appendChild(zoomBadge);
+
+  const mkBtn = (iconName, label, cls) => {
+    const b = el("button", { class: `btn-action${cls ? " " + cls : ""}`, type: "button", title: label, "aria-label": label }, [icon(iconName, 14)]);
+    return b;
+  };
+
+  const zoomOutBtn = mkBtn("zoom-out", t("viewer.image_zoom_out"));
+  const zoomInBtn = mkBtn("zoom-in", t("viewer.image_zoom_in"));
+  const zoomResetBtn = mkBtn("rotate-ccw", t("viewer.image_zoom_reset"));
+  const prevBtn = mkBtn("chevron-left", t("viewer.image_prev"));
+  const nextBtn = mkBtn("chevron-right", t("viewer.image_next"));
+  const originalBtn = mkBtn("external-link", t("viewer.image_open_original"));
+  const downloadBtn = mkBtn("download", t("viewer.download"));
+  const metaBtn = mkBtn("info", t("viewer.image_metadata"));
+  const lightboxBtn = mkBtn("maximize", t("viewer.image_fullscreen"));
+  [prevBtn, nextBtn, zoomOutBtn, zoomInBtn, zoomResetBtn, metaBtn, originalBtn, downloadBtn, lightboxBtn]
+    .forEach((b) => toolbar.appendChild(b));
+  container.appendChild(toolbar);
+
+  // ── Stage (image + pan/zoom) ───────────────────────────────────────────
+  const stage = el("div", { class: "image-stage" });
+  const img = el("img", { class: "image-main", src: imgUrl, alt: data.title || fileName, draggable: "false" });
+  stage.appendChild(img);
+  container.appendChild(stage);
+
+  // ── Thumbnail filmstrip (navigation) ───────────────────────────────────
+  const strip = el("div", { class: "image-nav-strip", hidden: true });
+  container.appendChild(strip);
+
+  // ── Metadata panel ─────────────────────────────────────────────────────
+  const metaPanel = el("div", { class: "image-meta-panel" });
+  metaPanel.hidden = true;
+  container.appendChild(metaPanel);
+
+  let scale = 1;
+  let tx = 0;
+  let ty = 0;
+
+  const applyTransform = () => {
+    img.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
+    zoomBadge.textContent = `${Math.round(scale * 100)}%`;
+  };
+  const resetView = () => { scale = 1; tx = 0; ty = 0; applyTransform(); };
+  const setZoom = (next) => {
+    scale = clampImageZoom(next);
+    if (scale === 1) { tx = 0; ty = 0; }
+    applyTransform();
+  };
+
+  const renderMeta = () => {
+    const rows = [
+      [t("viewer.image_type"), data.image_mime || ""],
+      [t("viewer.image_dimensions"), img.naturalWidth ? `${img.naturalWidth} × ${img.naturalHeight}` : ""],
+      [t("viewer.metadata_size"), formatBytes(data.size_bytes)],
+      [t("viewer.metadata_path"), path],
+    ];
+    if (data.modified) rows.push([t("viewer.metadata_modified"), data.modified]);
+    metaPanel.innerHTML = "";
+    const dl = el("dl", {});
+    rows.forEach(([k, v]) => {
+      dl.appendChild(el("dt", {}, [document.createTextNode(k)]));
+      dl.appendChild(el("dd", {}, [document.createTextNode(v || "—")]));
+    });
+    metaPanel.appendChild(dl);
+  };
+
+  // ── Sibling navigation ─────────────────────────────────────────────────
+  let siblings = [];
+  let currentIndex = -1;
+
+  const go = (delta) => {
+    if (siblings.length < 2 || currentIndex < 0) return;
+    const next = (currentIndex + delta + siblings.length) % siblings.length;
+    openFile(vault, siblings[next].path);
+  };
+
+  const renderStrip = () => {
+    if (siblings.length < 2) { strip.hidden = true; return; }
+    strip.hidden = false;
+    strip.innerHTML = "";
+    siblings.forEach((s, i) => {
+      const thumb = el("img", {
+        class: `image-thumb${i === currentIndex ? " active" : ""}`,
+        src: buildThumbUrl(vault, s.path, 96),
+        alt: s.name,
+        title: s.name,
+        loading: "lazy",
+      });
+      thumb.addEventListener("click", () => { if (s.path !== path) openFile(vault, s.path); });
+      strip.appendChild(thumb);
+    });
+  };
+
+  (async () => {
+    try {
+      const dir = path.includes("/") ? path.slice(0, path.lastIndexOf("/")) : "";
+      const res = await api(`/api/browse/${encodeURIComponent(vault)}?path=${encodeURIComponent(dir)}`);
+      siblings = (res.items || []).filter((it) => it.type === "file" && isImagePath(it.path));
+      currentIndex = siblings.findIndex((it) => it.path === path);
+      prevBtn.disabled = nextBtn.disabled = siblings.length < 2;
+      renderStrip();
+    } catch (_) { /* navigation is best-effort */ }
+  })();
+
+  // ── Interactions ───────────────────────────────────────────────────────
+  stage.addEventListener("wheel", (e) => {
+    e.preventDefault();
+    const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+    setZoom(scale * factor);
+  }, { passive: false });
+
+  let dragging = false;
+  let startX = 0;
+  let startY = 0;
+  let startTx = 0;
+  let startTy = 0;
+  stage.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0) return;
+    dragging = true;
+    startX = e.clientX; startY = e.clientY; startTx = tx; startTy = ty;
+    stage.classList.add("panning");
+    if (stage.setPointerCapture) stage.setPointerCapture(e.pointerId);
+  });
+  stage.addEventListener("pointermove", (e) => {
+    if (!dragging) return;
+    tx = startTx + (e.clientX - startX);
+    ty = startTy + (e.clientY - startY);
+    applyTransform();
+  });
+  const endDrag = (e) => {
+    dragging = false;
+    stage.classList.remove("panning");
+    if (stage.releasePointerCapture && e.pointerId != null) {
+      try { stage.releasePointerCapture(e.pointerId); } catch (_) { /* already released */ }
+    }
+  };
+  stage.addEventListener("pointerup", endDrag);
+  stage.addEventListener("pointercancel", endDrag);
+  stage.addEventListener("dblclick", resetView);
+
+  zoomInBtn.addEventListener("click", () => setZoom(scale * 1.25));
+  zoomOutBtn.addEventListener("click", () => setZoom(scale / 1.25));
+  zoomResetBtn.addEventListener("click", resetView);
+  prevBtn.addEventListener("click", () => go(-1));
+  nextBtn.addEventListener("click", () => go(1));
+  originalBtn.addEventListener("click", () => window.open(imgUrl, "_blank"));
+  downloadBtn.addEventListener("click", () => {
+    const dlUrl = `/api/file/${encodeURIComponent(vault)}/download?path=${encodeURIComponent(path)}`;
+    window.open(dlUrl, "_blank");
+  });
+  metaBtn.addEventListener("click", () => {
+    metaPanel.hidden = !metaPanel.hidden;
+    if (!metaPanel.hidden) renderMeta();
+  });
+  lightboxBtn.addEventListener("click", () => {
+    container.classList.toggle("lightbox");
+    lightboxBtn.setAttribute("aria-pressed", container.classList.contains("lightbox") ? "true" : "false");
+  });
+
+  img.addEventListener("load", () => { if (!metaPanel.hidden) renderMeta(); });
+  img.addEventListener("error", () => {
+    stage.innerHTML = "";
+    stage.appendChild(el("div", { class: "image-error" }, [document.createTextNode(t("viewer.image_error"))]));
+  });
+
+  const onKey = (e) => {
+    if (e.key === "ArrowLeft") { e.preventDefault(); go(-1); }
+    else if (e.key === "ArrowRight") { e.preventDefault(); go(1); }
+    else if (e.key === "+" || e.key === "=") { e.preventDefault(); setZoom(scale * 1.25); }
+    else if (e.key === "-") { e.preventDefault(); setZoom(scale / 1.25); }
+    else if (e.key === "0") { e.preventDefault(); resetView(); }
+    else if (e.key === "Escape") { container.classList.remove("lightbox"); }
+  };
+  document.addEventListener("keydown", onKey);
+  _imageViewerCleanup = () => document.removeEventListener("keydown", onKey);
+
+  area.appendChild(container);
+  safeCreateIcons();
+  applyTransform();
+  try { container.focus({ preventScroll: true }); } catch (_) { /* non-fatal */ }
+}
+
 export function renderFile(data) {
   // #93 — An inline edition session (#editor-container mounted in the content
   // area) is destroyed by this very re-render: release it first so the editor
   // state (CodeMirror view, Forge iframe, Yjs session) is torn down cleanly
   // instead of being wiped mid-session by a tab switch / sidebar click.
   if (isInlineEditorActive()) detachInlineEditor();
+  // #108 — release the image viewer's document-level shortcuts before swapping
+  // the content area (otherwise they leak on every re-render).
+  if (_imageViewerCleanup) { _imageViewerCleanup(); _imageViewerCleanup = null; }
   const area = getContentArea();
 
   // Handle PDF files — render in iframe with TOC sidebar
@@ -596,25 +841,9 @@ export function renderFile(data) {
     return;
   }
 
-  // Handle images
+  // Handle images — dedicated zoom/pan viewer (roadmap #108-D)
   if (data.is_image) {
-    const imgUrl = `/api/file/${encodeURIComponent(data.vault)}/raw?path=${encodeURIComponent(data.path)}`;
-    area.innerHTML = `
-      <div class="image-viewer-container">
-        <div class="file-toolbar">
-          <span class="file-info">${escapeHtml(data.title)}</span>
-          <button class="btn-action" onclick="window.open('${imgUrl}', '_blank')">
-            <i data-lucide="maximize" style="width:14px;height:14px"></i> Plein écran
-          </button>
-          <button class="btn-action" onclick="window.open('/api/file/${encodeURIComponent(data.vault)}/download?path=${encodeURIComponent(data.path)}', '_blank')">
-            <i data-lucide="download" style="width:14px;height:14px"></i> Télécharger
-          </button>
-        </div>
-        <div class="image-viewer-body">
-          ${data.html}
-        </div>
-      </div>`;
-    lucide.createIcons();
+    renderImageViewer(area, data);
     return;
   }
 

frontend/locales/en.json

@@ -1823,6 +1823,17 @@
   "viewer.export_title": "Export document",
   "viewer.forge_brand": "Forge",
   "viewer.forge_title": "Forge (new editor)",
+  "viewer.image_dimensions": "Dimensions",
+  "viewer.image_error": "Unable to load the image",
+  "viewer.image_fullscreen": "Full screen (lightbox)",
+  "viewer.image_metadata": "Metadata",
+  "viewer.image_next": "Next image",
+  "viewer.image_open_original": "Open original",
+  "viewer.image_prev": "Previous image",
+  "viewer.image_type": "Type",
+  "viewer.image_zoom_in": "Zoom in",
+  "viewer.image_zoom_out": "Zoom out",
+  "viewer.image_zoom_reset": "Reset zoom",
   "viewer.index_start": "Starting index...",
   "viewer.index_updated": "Updated",
   "viewer.loaded_from_cache": "File loaded from offline cache",
@@ -2116,7 +2127,7 @@
     "guide105.lib_h3_conflicts": "Sync conflicts",
     "guide105.lib_conflicts": "If you sync the vault with Syncthing, ObsiGate detects conflict files (\"sync-conflict\" copies) and offers to compare then resolve them from a dedicated page in the Options menu.",
     "guide105.lib_h3_attach": "Attachments & media",
-    "guide105.lib_attach": "Inline <code>![[image.png]]</code> images, attachments and media (audio, video, embedded PDFs) are rendered in the viewer and indexed for search; the \"Rescan attachments\" button in Configuration rebuilds the attachment index.",
+    "guide105.lib_attach": "Inline <code>![[image.png]]</code> images, attachments and media (audio, video, embedded PDFs) are rendered in the viewer and indexed for search. Images also appear in the file tree and open in a dedicated viewer (wheel zoom, pan, navigation between images in the folder, thumbnails, metadata, lightbox); the \"Rescan attachments\" button in Configuration rebuilds the attachment index.",
     "guide105.off_pwa": "ObsiGate is a PWA: install it (install icon in the address bar) to open it like an app. The service worker caches the UI and your recently viewed documents.",
     "guide105.off_edit": "Offline you can read cached documents and even edit them: changes are queued in IndexedDB.",
     "guide105.off_sync": "When back online the queue replays automatically (sync badge in the header). If the server version diverged meanwhile, the file is flagged as conflict and the server copy is kept as a backup.",

frontend/locales/fr.json

@@ -1823,6 +1823,17 @@
   "viewer.export_title": "Exporter le document",
   "viewer.forge_brand": "Forge",
   "viewer.forge_title": "Forge (nouvel éditeur)",
+  "viewer.image_dimensions": "Dimensions",
+  "viewer.image_error": "Impossible de charger l'image",
+  "viewer.image_fullscreen": "Plein écran (lightbox)",
+  "viewer.image_metadata": "Métadonnées",
+  "viewer.image_next": "Image suivante",
+  "viewer.image_open_original": "Ouvrir l'original",
+  "viewer.image_prev": "Image précédente",
+  "viewer.image_type": "Type",
+  "viewer.image_zoom_in": "Zoom avant",
+  "viewer.image_zoom_out": "Zoom arrière",
+  "viewer.image_zoom_reset": "Réinitialiser le zoom",
   "viewer.index_start": "Démarrage index.",
   "viewer.index_updated": "Mise à jour",
   "viewer.loaded_from_cache": "Fichier chargé depuis le cache hors-ligne",
@@ -2116,7 +2127,7 @@
     "guide105.lib_h3_conflicts": "Conflits de synchronisation",
     "guide105.lib_conflicts": "Si vous synchronisez le vault avec Syncthing, ObsiGate détecte les fichiers de conflit (copies « sync-conflict ») et propose de les comparer puis résoudre depuis la page dédiée du menu Options.",
     "guide105.lib_h3_attach": "Fichiers joints & médias",
-    "guide105.lib_attach": "Les images <code>![[image.png]]</code>, pièces jointes et médias (audio, vidéo, PDF intégrés) dans les notes sont rendus dans le viewer et indexés pour la recherche ; le bouton « Rescan attachments » de la configuration recrée l'index des pièces jointes.",
+    "guide105.lib_attach": "Les images <code>![[image.png]]</code>, pièces jointes et médias (audio, vidéo, PDF intégrés) dans les notes sont rendus dans le viewer et indexés pour la recherche. Les images apparaissent aussi dans l'arborescence et s'ouvrent dans une visionneuse dédiée (zoom molette, pan, navigation entre images du dossier, miniatures, métadonnées, lightbox) ; le bouton « Rescan attachments » de la configuration recrée l'index des pièces jointes.",
     "guide105.off_pwa": "ObsiGate est une PWA : installez-la (icône d'installation de la barre d'adresse) pour l'ouvrir comme une application. Le service worker met en cache l'interface et vos derniers documents consultés.",
     "guide105.off_edit": "Hors-ligne, vous pouvez lire les documents en cache et même les éditer : les modifications sont mises en file d'attente dans IndexedDB.",
     "guide105.off_sync": "Au retour en ligne, la file se rejoue automatiquement (badge de synchronisation dans l'en-tête). Si la version serveur a divergé entre-temps, le fichier est marqué en conflit et la version serveur est préservée en backup.",

frontend/style.css

@@ -9639,6 +9639,133 @@ body.desktop-mode .editor-container {
   box-shadow: 0 2px 12px rgba(0,0,0,0.15);
 }
 
+/* #108-D — dedicated image viewer: zoom, pan, filmstrip, metadata, lightbox */
+.image-viewer-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  outline: none;
+}
+.image-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--surface1);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.image-toolbar .image-title {
+  color: var(--text);
+  font-size: 0.85rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 40%;
+}
+.image-toolbar-spacer {
+  flex: 1;
+}
+.image-zoom-badge {
+  font-variant-numeric: tabular-nums;
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  min-width: 46px;
+  text-align: center;
+}
+.image-stage {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  background: var(--surface2);
+  cursor: grab;
+  touch-action: none;
+}
+.image-stage.panning {
+  cursor: grabbing;
+}
+.image-main {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  transform-origin: center center;
+  user-select: none;
+  -webkit-user-drag: none;
+  will-change: transform;
+}
+.image-error {
+  color: var(--text-dim);
+  font-size: 0.9rem;
+}
+.image-nav-strip {
+  display: flex;
+  gap: 6px;
+  padding: 8px;
+  overflow-x: auto;
+  background: var(--surface1);
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.image-nav-strip[hidden] {
+  display: none;
+}
+.image-thumb {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  opacity: 0.65;
+  flex-shrink: 0;
+}
+.image-thumb:hover {
+  opacity: 1;
+}
+.image-thumb.active {
+  border-color: var(--accent);
+  opacity: 1;
+}
+.image-meta-panel {
+  padding: 10px 16px;
+  background: var(--surface1);
+  border-top: 1px solid var(--border);
+  font-size: 0.8rem;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+.image-meta-panel[hidden] {
+  display: none;
+}
+.image-meta-panel dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 12px;
+  margin: 0;
+}
+.image-meta-panel dt {
+  color: var(--text-dim);
+}
+.image-meta-panel dd {
+  margin: 0;
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+.image-viewer-container.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  background: rgba(0, 0, 0, 0.9);
+}
+.image-viewer-container.lightbox .image-nav-strip,
+.image-viewer-container.lightbox .image-meta-panel {
+  display: none;
+}
+
 /* ── Text / CSV Viewer ── */
 .text-viewer-container {
   display: flex;