Add share, webhook, and conflict management features

frontend/app.js

@@ -3257,6 +3257,10 @@
       RightSidebarManager.toggle();
     });
 
+    // Share button
+    const shareBtn = el("button", { class: "btn-action", title: "Partager ce document" }, [icon("share-2", 14), document.createTextNode("Partager")]);
+    shareBtn.addEventListener("click", () => openShareDialog(data.vault, data.path));
+
     // Frontmatter — Accent Card
     let fmSection = null;
     if (data.frontmatter && Object.keys(data.frontmatter).length > 0) {
@@ -3297,7 +3301,7 @@
     // Assemble
     area.innerHTML = "";
     area.appendChild(breadcrumb);
-    area.appendChild(el("div", { class: "file-header" }, [el("div", { class: "file-title" }, [document.createTextNode(data.title)]), tagsDiv, el("div", { class: "file-actions" }, [copyBtn, sourceBtn, downloadBtn, editBtn, openNewWindowBtn, tocBtn])]));
+    area.appendChild(el("div", { class: "file-header" }, [el("div", { class: "file-title" }, [document.createTextNode(data.title)]), tagsDiv, el("div", { class: "file-actions" }, [copyBtn, sourceBtn, downloadBtn, editBtn, openNewWindowBtn, tocBtn, shareBtn])]));
     if (fmSection) area.appendChild(fmSection);
     area.appendChild(mdDiv);
     area.appendChild(rawDiv);
@@ -3339,6 +3343,81 @@
   // ---------------------------------------------------------------------------
   // Dashboard Recent Files Widget
   // ---------------------------------------------------------------------------
+  // ── Dashboard Stats Widget ──
+  const DashboardStatsWidget = {
+    async load() {
+      const grid = document.getElementById("dashboard-stats-grid");
+      if (!grid) return;
+      grid.innerHTML = '<div class="dashboard-stats-loading">Chargement...</div>';
+      try {
+        const data = await api("/api/dashboard");
+        this.render(data);
+      } catch (err) {
+        grid.innerHTML = `<div class="dashboard-recent-empty">Erreur: ${escapeHtml(err.message)}</div>`;
+      }
+    },
+    render(data) {
+      const grid = document.getElementById("dashboard-stats-grid");
+      if (!grid) return;
+      const fmtSize = (bytes) => bytes < 1024 ? `${bytes} o` : bytes < 1048576 ? `${(bytes/1024).toFixed(1)} Ko` : bytes < 1073741824 ? `${(bytes/1048576).toFixed(1)} Mo` : `${(bytes/1073741824).toFixed(1)} Go`;
+      const items = [
+        { icon: "files", label: "Fichiers", value: data.total_files.toLocaleString() },
+        { icon: "tags", label: "Tags uniques", value: data.total_tags.toLocaleString() },
+        { icon: "hard-drive", label: "Taille totale", value: fmtSize(data.total_size_bytes) },
+        { icon: "folder-open", label: "Vaults", value: data.vaults.length.toString() },
+      ];
+      grid.innerHTML = items.map(i => `
+        <div class="stat-card">
+          <i data-lucide="${i.icon}" class="stat-icon"></i>
+          <span class="stat-value">${i.value}</span>
+          <span class="stat-label">${i.label}</span>
+        </div>
+      `).join("");
+      safeCreateIcons();
+    }
+  };
+
+  // ── Dashboard Conflicts Widget ──
+  const DashboardConflictsWidget = {
+    async load() {
+      const section = document.getElementById("dashboard-conflicts-section");
+      if (!section) return;
+      try {
+        const data = await api("/api/conflicts");
+        if (data.total === 0) { section.style.display = "none"; return; }
+        section.style.display = "";
+        document.getElementById("dashboard-conflicts-count").textContent = data.total;
+        this.render(data.conflicts);
+      } catch (err) { section.style.display = "none"; }
+    },
+    render(conflicts) {
+      const grid = document.getElementById("dashboard-conflicts-grid");
+      if (!grid) return;
+      grid.innerHTML = conflicts.map(c => `
+        <div class="conflict-card">
+          <div class="conflict-info">
+            <span class="conflict-vault">${escapeHtml(c.vault)}</span>
+            <span class="conflict-name">${escapeHtml(c.conflict_path.split("/").pop())}</span>
+            <span class="conflict-date">Conflit du ${c.conflict_date.replace(/(\d{4})(\d{2})(\d{2})-(\d{2})(\d{2})/, "$3/$2/$1 $4:$5")}</span>
+          </div>
+          <div class="conflict-actions">
+            <button class="conflict-btn keep-local" data-vault="${escapeHtml(c.vault)}" data-conflict="${escapeHtml(c.conflict_path)}" data-original="${escapeHtml(c.original_path)}">Garder l'original</button>
+            <button class="conflict-btn keep-conflict" data-vault="${escapeHtml(c.vault)}" data-conflict="${escapeHtml(c.conflict_path)}" data-original="${escapeHtml(c.original_path)}">Garder le conflit</button>
+          </div>
+        </div>
+      `).join("");
+      grid.querySelectorAll(".keep-local").forEach(btn => btn.addEventListener("click", () => this._resolve(btn.dataset, "keep_local")));
+      grid.querySelectorAll(".keep-conflict").forEach(btn => btn.addEventListener("click", () => this._resolve(btn.dataset, "keep_conflict")));
+    },
+    async _resolve(d, action) {
+      try {
+        await api("/api/conflicts/resolve", { method: "POST", body: JSON.stringify({ vault: d.vault, conflict_path: d.conflict, original_path: d.original, action }) });
+        showToast("Conflit résolu", "success");
+        this.load();
+      } catch (err) { showToast("Erreur: " + err.message, "error"); }
+    }
+  };
+
   const DashboardRecentWidget = {
     _cache: [],
     _currentFilter: "",
@@ -3919,6 +3998,8 @@
       loadDiagnostics();
       loadAbout();
       await loadHiddenFilesSettings();
+      loadWebhooksUI();
+      loadSharesUI();
       safeCreateIcons();
     });
 
@@ -4380,6 +4461,96 @@
     }
   }
 
+  // ── Webhooks UI ──
+  async function loadWebhooksUI() {
+    const list = document.getElementById("webhooks-list");
+    if (!list) return;
+    try {
+      const webhooks = await api("/api/webhooks");
+      renderWebhooksUI(webhooks);
+    } catch { list.innerHTML = '<div class="config-description">Admin uniquement</div>'; }
+  }
+  function renderWebhooksUI(webhooks) {
+    const list = document.getElementById("webhooks-list");
+    if (!list) return;
+    if (!webhooks.length) { list.innerHTML = '<div class="config-description">Aucun webhook configuré.</div>'; return; }
+    list.innerHTML = webhooks.map(w => `
+      <div class="webhook-item">
+        <span class="webhook-name">${escapeHtml(w.name)}</span>
+        <span class="webhook-url">${escapeHtml(w.url)}</span>
+        <span class="webhook-events">${(w.events||[]).join(", ")}</span>
+        <button class="webhook-delete" data-id="${w.id}">✕</button>
+      </div>
+    `).join("");
+    list.querySelectorAll(".webhook-delete").forEach(b => b.addEventListener("click", async () => {
+      await api(`/api/webhooks/${b.dataset.id}`, { method: "DELETE" });
+      loadWebhooksUI();
+    }));
+  }
+  document.addEventListener("click", function(e) {
+    if (e.target.id === "webhook-add-btn") {
+      const name = document.getElementById("webhook-name-input").value.trim();
+      const url = document.getElementById("webhook-url-input").value.trim();
+      if (!url) { showToast("URL requise", "error"); return; }
+      api("/api/webhooks", { method: "POST", body: JSON.stringify({ name: name || "Webhook", url, events: ["file_created","file_deleted","file_modified","file_renamed"] }) }).then(() => { loadWebhooksUI(); document.getElementById("webhook-name-input").value = ""; document.getElementById("webhook-url-input").value = ""; }).catch(err => showToast(err.message, "error"));
+    }
+  });
+
+  // ── Shares UI ──
+  async function loadSharesUI() {
+    const list = document.getElementById("shares-list");
+    if (!list) return;
+    try {
+      const shares = await api("/api/shares");
+      renderSharesUI(shares);
+    } catch { list.innerHTML = '<div class="config-description">Chargement...</div>'; }
+  }
+  function renderSharesUI(shares) {
+    const list = document.getElementById("shares-list");
+    if (!list) return;
+    if (!shares.length) { list.innerHTML = '<div class="config-description">Aucun partage actif.</div>'; return; }
+    list.innerHTML = shares.map(s => `
+      <div class="share-item">
+        <span class="share-path">${escapeHtml(s.vault)}/${escapeHtml(s.path)}</span>
+        <span class="share-url"><a href="${s.url}" target="_blank">${s.url}</a></span>
+        <span class="share-meta">${s.access_count} vue(s)${s.expires_at ? ' · Expire' : ''}</span>
+        <button class="share-revoke" data-id="${s.id}">Révoquer</button>
+      </div>
+    `).join("");
+    list.querySelectorAll(".share-revoke").forEach(b => b.addEventListener("click", async () => {
+      await api(`/api/share/${b.dataset.id}`, { method: "DELETE" });
+      loadSharesUI();
+    }));
+  }
+
+  // ── Share Dialog ──
+  async function openShareDialog(vault, path) {
+    try {
+      const share = await api(`/api/share/${encodeURIComponent(vault)}`, { method: "POST", body: JSON.stringify({ path }) });
+      const url = window.location.origin + share.url;
+      const div = document.createElement("div");
+      div.className = "share-dialog-overlay";
+      div.innerHTML = `
+        <div class="share-dialog">
+          <h3>📤 Lien de partage</h3>
+          <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:8px">${escapeHtml(vault)}/${escapeHtml(path)}</p>
+          <input type="text" class="share-url-input" value="${url}" readonly onclick="this.select()">
+          <div class="share-dialog-actions">
+            <button class="share-copy-btn">📋 Copier</button>
+            <button class="share-close-btn">Fermer</button>
+          </div>
+        </div>`;
+      document.body.appendChild(div);
+      div.querySelector(".share-copy-btn").addEventListener("click", async () => {
+        await navigator.clipboard.writeText(url);
+        showToast("Lien copié !", "success");
+        div.remove();
+      });
+      div.querySelector(".share-close-btn").addEventListener("click", () => div.remove());
+      div.addEventListener("click", (e) => { if (e.target === div) div.remove(); });
+    } catch (err) { showToast("Erreur: " + err.message, "error"); }
+  }
+
   function renderConfigFilters() {
     const config = TagFilterService.getConfig();
     const filters = config.tagFilters || TagFilterService.defaultFilters;
@@ -5480,6 +5651,12 @@
     }
 
     // Show the dashboard widgets
+    if (typeof DashboardStatsWidget !== "undefined") {
+      DashboardStatsWidget.load();
+    }
+    if (typeof DashboardConflictsWidget !== "undefined") {
+      DashboardConflictsWidget.load();
+    }
     if (typeof DashboardRecentWidget !== "undefined") {
       DashboardRecentWidget.load(selectedContextVault);
     }

frontend/index.html

@@ -358,6 +358,19 @@
         <!-- Content -->
         <main class="content-area" id="content-area" aria-label="Contenu principal">
         <div id="dashboard-home" class="dashboard-home" role="region" aria-label="Tableau de bord">
+          <!-- Stats Section -->
+          <div id="dashboard-stats-section" class="dashboard-section">
+            <div class="dashboard-header">
+              <div class="dashboard-title-row">
+                <i data-lucide="bar-chart-3" class="dashboard-icon" style="color:var(--accent)"></i>
+                <h2>Statistiques</h2>
+              </div>
+            </div>
+            <div id="dashboard-stats-grid" class="dashboard-stats-grid">
+              <div class="dashboard-stats-loading">Chargement...</div>
+            </div>
+          </div>
+
           <!-- Bookmarks Section -->
           <div id="dashboard-bookmarks-section" class="dashboard-section">
             <div class="dashboard-header">
@@ -374,6 +387,21 @@
             </div>
           </div>
 
+            </div>
+          </div>
+
+          <!-- Sync Conflicts Section -->
+          <div id="dashboard-conflicts-section" class="dashboard-section" style="display:none">
+            <div class="dashboard-header">
+              <div class="dashboard-title-row">
+                <i data-lucide="alert-triangle" class="dashboard-icon" style="color:var(--accent-orange)"></i>
+                <h2>Conflits de synchronisation</h2>
+                <span id="dashboard-conflicts-count" class="dashboard-badge" style="background:var(--accent-orange)"></span>
+              </div>
+            </div>
+            <div id="dashboard-conflicts-grid" class="dashboard-conflicts-grid"></div>
+          </div>
+
           <!-- Recently Opened Section -->
           <div id="dashboard-recent-section" class="dashboard-section">
             <div class="dashboard-header">
@@ -636,6 +664,25 @@
             </div>
           </section>
 
+          <!-- Webhooks -->
+          <section class="config-section">
+            <h2>🔔 Webhooks</h2>
+            <p class="config-description">Notifications HTTP vers des services externes lors des changements de fichiers.</p>
+            <div id="webhooks-list"></div>
+            <div class="config-add-row">
+              <input type="text" id="webhook-name-input" placeholder="Nom" class="config-input" style="width:100px">
+              <input type="text" id="webhook-url-input" placeholder="https://..." class="config-input" style="flex:1">
+              <button id="webhook-add-btn" class="config-btn config-btn-add">Ajouter</button>
+            </div>
+          </section>
+
+          <!-- Partages publics -->
+          <section class="config-section">
+            <h2>📤 Partages publics</h2>
+            <p class="config-description">Liens de partage publics pour des documents (lecture seule, sans authentification).</p>
+            <div id="shares-list"></div>
+          </section>
+
         </div>
       </div>
     </div>

frontend/style.css

@@ -5560,3 +5560,187 @@ body.popup-mode .content-area {
   margin-top: 12px;
   display: inline-flex;
 }
+
+/* ── Dashboard Stats Grid ── */
+.dashboard-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+}
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 12px;
+  background: var(--bg-card, var(--bg-secondary));
+  border-radius: 8px;
+  border: 1px solid var(--border);
+}
+.stat-icon {
+  width: 24px;
+  height: 24px;
+  opacity: 0.6;
+  margin-bottom: 8px;
+  color: var(--accent);
+}
+.stat-value {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+.stat-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+.dashboard-stats-loading {
+  padding: 16px;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+/* ── Dashboard Conflicts ── */
+.dashboard-conflicts-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.conflict-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: var(--bg-card, var(--bg-secondary));
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  gap: 12px;
+}
+.conflict-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.conflict-vault {
+  font-size: 0.7rem;
+  color: var(--accent);
+  background: var(--accent-bg, rgba(99,102,241,0.1));
+  padding: 1px 6px;
+  border-radius: 3px;
+  align-self: flex-start;
+}
+.conflict-name {
+  font-size: 0.85rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.conflict-date {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+}
+.conflict-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.conflict-btn {
+  padding: 4px 10px;
+  font-size: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+.conflict-btn:hover { background: var(--bg-hover); }
+
+/* ── Webhooks UI ── */
+.webhook-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  background: var(--bg-card, var(--bg-secondary));
+  border-radius: 6px;
+  margin-bottom: 6px;
+  font-size: 0.8rem;
+}
+.webhook-name { font-weight: 500; min-width: 80px; }
+.webhook-url { color: var(--accent); overflow: hidden; text-overflow: ellipsis; flex: 1; }
+.webhook-events { color: var(--text-muted); font-size: 0.7rem; }
+.webhook-delete { background: none; border: none; color: var(--text-error); cursor: pointer; font-size: 1rem; padding: 2px 6px; }
+.config-add-row { display: flex; gap: 8px; margin-top: 8px; }
+.config-btn-add { padding: 6px 14px; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.8rem; }
+
+/* ── Shares UI ── */
+.share-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  background: var(--bg-card, var(--bg-secondary));
+  border-radius: 6px;
+  margin-bottom: 6px;
+  font-size: 0.8rem;
+}
+.share-path { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.share-url a { color: var(--accent); font-size: 0.75rem; }
+.share-meta { color: var(--text-muted); font-size: 0.7rem; }
+.share-revoke { background: none; border: 1px solid var(--text-error); color: var(--text-error); cursor: pointer; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; }
+
+/* ── Share Dialog ── */
+.share-dialog-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+.share-dialog {
+  background: var(--bg-primary);
+  border-radius: 12px;
+  padding: 24px;
+  max-width: 480px;
+  width: 90%;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+}
+.share-dialog h3 { margin: 0 0 4px; }
+.share-url-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  box-sizing: border-box;
+}
+.share-dialog-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  justify-content: flex-end;
+}
+.share-copy-btn {
+  padding: 6px 16px;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+.share-close-btn {
+  padding: 6px 16px;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}