From e213ad183e60d3c3beb406ce03156724a96a8553 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Mon, 27 Jul 2026 15:06:24 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20support=20multi-format=20=E2=80=94=20im?=
 =?UTF-8?q?ages,=20CSV,=20JSON,=20TXT=20+=20fix=20PDF=20embed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PDF: <iframe> → <embed> (plus compatible webview Tauri)
- Images: .png .jpg .gif .svg .webp .bmp .ico → rendu standalone avec toolbar
- CSV: rendu en tableau HTML avec headers sticky
- JSON: affichage formaté avec indentation (html.escape)
- Texte: .txt .log .yml .yaml .py .js .sh .toml .ini → <pre> mono
- CSS: .image-viewer-body, .csv-table, .text-viewer, .json-viewer, .file-toolbar
---
 backend/main.py       | 83 ++++++++++++++++++++++++++++++++++++++-
 build.sh              |  0
 data/users.json       | 20 ----------
 frontend/js/viewer.js | 67 ++++++++++++++++++++++++++++++-
 frontend/style.css    | 91 +++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 239 insertions(+), 22 deletions(-)
 mode change 100644 => 100755 build.sh
 delete mode 100644 data/users.json

diff --git a/backend/main.py b/backend/main.py
index fffb41d..07f2fb9 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -2364,6 +2364,37 @@ async def api_file(vault_name: str, path: str = Query(..., description="Relative
             logger.error(f"PDF read error for {path}: {e}")
             raise HTTPException(status_code=500, detail=f"Error reading PDF: {e!s}")
 
+    # === Images: return as viewable image ===
+    IMAGE_EXTENSIONS = {".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".bmp", ".ico"}
+    if ext in IMAGE_EXTENSIONS:
+        size = file_path.stat().st_size
+        mime_map = {
+            ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg",
+            ".gif": "image/gif", ".svg": "image/svg+xml", ".webp": "image/webp",
+            ".bmp": "image/bmp", ".ico": "image/x-icon",
+        }
+        mime = mime_map.get(ext, "application/octet-stream")
+        html = (
+            f'<div class="image-viewer">'
+            f'<img src="/api/file/{vault_name}/raw?path={path}" '
+            f'alt="{file_path.name}" style="max-width:100%;max-height:80vh;object-fit:contain" />'
+            f'</div>'
+        )
+        return {
+            "vault": vault_name,
+            "path": path,
+            "title": file_path.name,
+            "tags": [],
+            "frontmatter": {},
+            "html": html,
+            "raw_length": size,
+            "extension": ext,
+            "is_markdown": False,
+            "is_image": True,
+            "image_mime": mime,
+            "size_bytes": size,
+        }
+
     try:
         raw = file_path.read_text(encoding="utf-8", errors="replace")
     except PermissionError as e:
@@ -2388,7 +2419,57 @@ async def api_file(vault_name: str, path: str = Query(..., description="Relative
     except Exception as e:
         logger.error(f"Unexpected error reading file {path}: {e}")
         raise HTTPException(status_code=500, detail=f"Error reading file: {e!s}")
-    
+
+    # === CSV: render as HTML table ===
+    if ext == ".csv":
+        import csv, io as csv_io
+        reader = csv.reader(csv_io.StringIO(raw))
+        rows = list(reader)
+        if not rows:
+            html = "<p><em>Fichier CSV vide</em></p>"
+        else:
+            headers = rows[0]
+            data_rows = rows[1:]
+            html = '<div class="csv-table-wrapper"><table class="csv-table"><thead><tr>'
+            for h in headers:
+                html += f"<th>{h}</th>"
+            html += "</tr></thead><tbody>"
+            for row in data_rows:
+                html += "<tr>"
+                for cell in row:
+                    html += f"<td>{cell}</td>"
+                html += "</tr>"
+            html += "</tbody></table></div>"
+        return {
+            "vault": vault_name, "path": path,
+            "title": file_path.name, "tags": [], "frontmatter": {},
+            "html": html, "raw_length": len(raw), "extension": ext,
+            "is_markdown": False, "is_csv": True,
+        }
+
+    # === JSON: syntax-highlighted display ===
+    if ext == ".json":
+        import json as json_mod
+        try:
+            parsed = json_mod.loads(raw)
+            formatted = json_mod.dumps(parsed, indent=2, ensure_ascii=False)
+        except json_mod.JSONDecodeError:
+            formatted = raw
+        html = f"<pre class='json-viewer'><code>{html_mod.escape(formatted)}</code></pre>"
+        return {
+            "vault": vault_name, "path": path,
+            "title": file_path.name, "tags": [], "frontmatter": {},
+            "html": html, "raw_length": len(raw), "extension": ext,
+            "is_markdown": False, "is_json": True,
+        }
+
+    # === Plain text / other readable files ===
+    TEXT_EXTENSIONS = {".txt", ".log", ".yml", ".yaml", ".toml", ".ini", ".cfg",
+                       ".sh", ".bash", ".py", ".js", ".ts", ".html", ".css",
+                       ".xml", ".rst", ".tex", ".sql", ".conf", ".env"}
+    if ext in TEXT_EXTENSIONS or ext == ".md":
+        pass  # handled below or by markdown section
+
     if ext == ".md":
         post = parse_markdown_file(raw)
 
diff --git a/build.sh b/build.sh
old mode 100644
new mode 100755
diff --git a/data/users.json b/data/users.json
deleted file mode 100644
index cccdd1f..0000000
--- a/data/users.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "version": 1,
-  "users": {
-    "admin": {
-      "id": "f7b85dfa-bcf6-4e42-b861-7563673620a6",
-      "username": "admin",
-      "display_name": "admin",
-      "password_hash": "$argon2id$v=19$m=65536,t=2,p=2$H4Pa7H4HOWeQoEbj4Ndkbw$c61e9zRHuXXdrLB6uTrjIBo/FFQaaZMaNHkB7CZaHhM",
-      "role": "admin",
-      "vaults": [
-        "*"
-      ],
-      "active": true,
-      "created_at": "2026-03-23T19:38:00.742597+00:00",
-      "last_login": null,
-      "failed_attempts": 5,
-      "locked_until": "2026-06-02T14:01:43.472937+00:00"
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/js/viewer.js b/frontend/js/viewer.js
index cf8eaf8..3cd58ed 100644
--- a/frontend/js/viewer.js
+++ b/frontend/js/viewer.js
@@ -431,13 +431,78 @@ export function renderFile(data) {
         </div>
         <div class="pdf-body">
           ${tocHtml}
-          <iframe src="${pdfUrl}" class="pdf-iframe" title="${escapeHtml(data.title)}"></iframe>
+          <embed src="${pdfUrl}" class="pdf-iframe" type="application/pdf" title="${escapeHtml(data.title)}"></embed>
         </div>
       </div>`;
     lucide.createIcons();
     return;
   }
 
+  // Handle images
+  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();
+    return;
+  }
+
+  // Handle CSV
+  if (data.is_csv) {
+    area.innerHTML = `
+      <div class="text-viewer-container">
+        <div class="file-toolbar">
+          <span class="file-info">CSV — ${escapeHtml(data.title)}</span>
+          <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="text-viewer-body">${data.html}</div>
+      </div>`;
+    lucide.createIcons();
+    return;
+  }
+
+  // Handle JSON and plain text
+  if (data.is_json || data.extension === '.txt' || data.extension === '.log' || data.extension === '.yml' || data.extension === '.yaml' || data.extension === '.sh' || data.extension === '.py' || data.extension === '.js' || data.extension === '.toml' || data.extension === '.ini' || data.extension === '.cfg' || data.extension === '.conf' || data.extension === '.env') {
+    // Read raw content for plain text
+    fetch(`/api/file/${encodeURIComponent(data.vault)}/raw?path=${encodeURIComponent(data.path)}`)
+      .then(r => r.text())
+      .then(text => {
+        const extClass = `lang-${data.extension.replace('.', '')}`;
+        area.innerHTML = `
+          <div class="text-viewer-container">
+            <div class="file-toolbar">
+              <span class="file-info">${escapeHtml(data.title)}</span>
+              <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="text-viewer-body">
+              <pre class="${extClass}"><code>${escapeHtml(text)}</code></pre>
+            </div>
+          </div>`;
+        lucide.createIcons();
+      })
+      .catch(() => {
+        area.innerHTML = `<p class="error">Erreur lors du chargement du fichier.</p>`;
+      });
+    return;
+  }
+
   // Handle unsupported (binary) files
   if (data.unsupported) {
     const sizeStr = data.size_bytes
diff --git a/frontend/style.css b/frontend/style.css
index ae2d9f5..fcf8694 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -8539,6 +8539,97 @@ body.popup-mode .content-area {
   margin-left: 4px;
 }
 
+/* ── Image Viewer ── */
+.image-viewer-body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  background: var(--surface1);
+  padding: 20px;
+}
+.image-viewer-body img {
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
+}
+
+/* ── Text / CSV Viewer ── */
+.text-viewer-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.file-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--surface1);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.85rem;
+  flex-shrink: 0;
+}
+.file-info {
+  flex: 1;
+  color: var(--text-dim);
+}
+.text-viewer-body {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+  background: var(--surface2);
+}
+.text-viewer-body pre {
+  margin: 0;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+.text-viewer-body code {
+  color: var(--text);
+}
+
+/* ── CSV Table ── */
+.csv-table-wrapper {
+  overflow: auto;
+  max-height: 70vh;
+}
+.csv-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+.csv-table th {
+  background: var(--surface1);
+  color: var(--text-dim);
+  font-weight: 600;
+  padding: 8px 12px;
+  text-align: left;
+  border-bottom: 2px solid var(--border);
+  position: sticky;
+  top: 0;
+}
+.csv-table td {
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border-light, var(--border));
+}
+.csv-table tr:hover td {
+  background: var(--surface1);
+}
+
+/* ── JSON Viewer ── */
+.json-viewer {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  padding: 16px;
+  background: var(--surface2);
+  border-radius: 6px;
+  overflow: auto;
+  max-height: 70vh;
+}
+
 /* ── PaneManager — Split View ── */
 .pane-grid {
   display: grid;