feat: add initial frontend SPA for vault browsing, advanced search, and markdown rendering.

frontend/app.js

@@ -3,6 +3,8 @@
 (function () {
   "use strict";
 
+  const APP_VERSION = "1.5.0";
+
   // ---------------------------------------------------------------------------
   // State
   // ---------------------------------------------------------------------------
@@ -4762,29 +4764,68 @@
   function showWelcome() {
     hideProgressBar();
     
-    // Ensure the dashboard container exists (it might have been wiped by renderFile)
+    // Ensure the dashboard container exists and has the correct structure (it might have been wiped by renderFile or be an old version)
     const area = document.getElementById("content-area");
-    if (area && !document.getElementById("dashboard-home")) {
+    const home = document.getElementById("dashboard-home");
+    const bookmarksSection = document.getElementById("dashboard-bookmarks-section");
+    
+    if (area && (!home || !bookmarksSection)) {
       area.innerHTML = `
-        <div id="dashboard-home" class="dashboard-home" role="region" aria-label="Derniers fichiers ouverts">
+        <div id="dashboard-home" class="dashboard-home" role="region" aria-label="Tableau de bord">
+          <!-- Bookmarks Section -->
+          <div id="dashboard-bookmarks-section" class="dashboard-section">
             <div class="dashboard-header">
               <div class="dashboard-title-row">
-              <i data-lucide="clock" class="dashboard-icon"></i>
+                <i data-lucide="bookmark" class="dashboard-icon" style="color:var(--accent-green)"></i>
-              <h2>Derniers fichiers ouverts</h2>
+                <h2>Bookmarks</h2>
               </div>
             </div>
-          <div id="dashboard-recent-grid" class="dashboard-recent-grid"></div>
+            <div id="dashboard-bookmarks-grid" class="dashboard-recent-grid"></div>
-          <div id="dashboard-loading" class="dashboard-loading">
+            <div id="dashboard-bookmarks-empty" class="dashboard-recent-empty">
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-          </div>
-          <div id="dashboard-bookmarks-empty" class="dashboard-recent-empty hidden">
               <i data-lucide="pin"></i>
               <span>Aucun bookmark</span>
               <p>Épinglez des fichiers pour les retrouver ici.</p>
             </div>
+          </div>
+
+          <!-- Recently Opened Section -->
+          <div id="dashboard-recent-section" class="dashboard-section">
+            <div class="dashboard-header">
+              <div class="dashboard-title-row">
+                <i data-lucide="clock" class="dashboard-icon"></i>
+                <h2>Derniers fichiers ouverts</h2>
+                <span id="dashboard-count" class="dashboard-badge"></span>
+              </div>
+              <div class="dashboard-actions">
+                <select id="dashboard-vault-filter" class="dashboard-filter" aria-label="Filtrer par vault">
+                  <option value="all">Tous les vaults</option>
+                </select>
+              </div>
+            </div>
+            
+            <div id="dashboard-recent-grid" class="dashboard-recent-grid"></div>
+            
+            <div id="dashboard-loading" class="dashboard-loading">
+              <div class="skeleton-card"></div>
+              <div class="skeleton-card"></div>
+              <div class="skeleton-card"></div>
+              <div class="skeleton-card"></div>
+              <div class="skeleton-card"></div>
+              <div class="skeleton-card"></div>
+            </div>
+
+            <div id="dashboard-recent-empty" class="dashboard-recent-empty hidden">
+              <i data-lucide="inbox"></i>
+              <span>Aucun fichier récent</span>
+              <p>Ouvrez un fichier pour le voir apparaître ici</p>
+            </div>
+          </div>
         </div>`;
+      
+      // Re-initialize widgets which might need to bind events to new elements
+      if (typeof DashboardRecentWidget !== "undefined") {
+        DashboardRecentWidget.init();
+      }
       safeCreateIcons();
     }
 
@@ -5825,6 +5866,8 @@
     initCustomDropdowns();
     document.getElementById("theme-toggle").addEventListener("click", toggleTheme);
     document.getElementById("header-logo").addEventListener("click", goHome);
+    const refreshBtn = document.getElementById("header-refresh-btn");
+    if (refreshBtn) refreshBtn.addEventListener("click", goHome);
     initSearch();
     initSidebarToggle();
     initMobile();
@@ -5848,6 +5891,11 @@
       try {
         await Promise.all([loadVaultSettings(), loadVaults(), loadTags()]);
 
+        // Initialize dashboard widgets now that vaults are loaded
+        if (typeof DashboardRecentWidget !== "undefined") {
+          DashboardRecentWidget.init();
+        }
+
         // Check for popup mode query parameter
         const urlParams = new URLSearchParams(window.location.search);
         if (urlParams.get("popup") === "true") {
@@ -5863,6 +5911,9 @@
             const path = decodeURIComponent(hashVal.substring(sepIndex + 1));
             openFile(vault, path);
           }
+        } else if (urlParams.get("popup") !== "true") {
+          // Default to dashboard if no deep link and not in popup mode
+          showWelcome();
         }
       } catch (err) {
         console.error("Failed to initialize ObsiGate:", err);
@@ -5958,9 +6009,5 @@
   document.addEventListener("DOMContentLoaded", () => {
     init();
     registerServiceWorker();
-    // Initialize the dashboard recent files widget
-    if (typeof DashboardRecentWidget !== "undefined") {
-      DashboardRecentWidget.init();
-    }
   });
 })();

frontend/index.html

@@ -373,9 +373,17 @@
               <div class="dashboard-title-row">
                 <i data-lucide="clock" class="dashboard-icon"></i>
                 <h2>Derniers fichiers ouverts</h2>
+                <span id="dashboard-count" class="dashboard-badge"></span>
+              </div>
+              <div class="dashboard-actions">
+                <select id="dashboard-vault-filter" class="dashboard-filter" aria-label="Filtrer par vault">
+                  <option value="all">Tous les vaults</option>
+                </select>
               </div>
             </div>
+            
             <div id="dashboard-recent-grid" class="dashboard-recent-grid"></div>
+            
             <div id="dashboard-loading" class="dashboard-loading">
               <div class="skeleton-card"></div>
               <div class="skeleton-card"></div>
@@ -384,12 +392,14 @@
               <div class="skeleton-card"></div>
               <div class="skeleton-card"></div>
             </div>
+
             <div id="dashboard-recent-empty" class="dashboard-recent-empty hidden">
               <i data-lucide="inbox"></i>
               <span>Aucun fichier récent</span>
               <p>Ouvrez un fichier pour le voir apparaître ici</p>
             </div>
           </div>
+        </div>
       </main>
 
       <!-- Right sidebar resize handle -->

frontend/sw.js

@@ -1,6 +1,6 @@
 /* ObsiGate Service Worker - PWA Support */
 
-const CACHE_VERSION = 'obsigate-v1.4.0';
+const CACHE_VERSION = 'obsigate-v1.5.0';
 const STATIC_CACHE = `${CACHE_VERSION}-static`;
 const DYNAMIC_CACHE = `${CACHE_VERSION}-dynamic`;
 const MAX_DYNAMIC_CACHE_SIZE = 50;