Redesign header UI with dropdown menu for vault filter and theme toggle

frontend/app.js

@@ -94,9 +94,15 @@
     document.documentElement.setAttribute("data-theme", theme);
     localStorage.setItem("obsigate-theme", theme);
 
-    const icon = document.getElementById("theme-icon");
-    if (icon) {
-      icon.setAttribute("data-lucide", theme === "dark" ? "moon" : "sun");
+    // Update theme button icon and label
+    const themeBtn = document.getElementById("theme-toggle");
+    const themeLabel = document.getElementById("theme-label");
+    if (themeBtn && themeLabel) {
+      const icon = themeBtn.querySelector("i");
+      if (icon) {
+        icon.setAttribute("data-lucide", theme === "dark" ? "moon" : "sun");
+      }
+      themeLabel.textContent = theme === "dark" ? "Sombre" : "Clair";
       safeCreateIcons();
     }
 
@@ -114,6 +120,32 @@
     applyTheme(current === "dark" ? "light" : "dark");
   }
 
+  function initHeaderMenu() {
+    const menuBtn = document.getElementById("header-menu-btn");
+    const menuDropdown = document.getElementById("header-menu-dropdown");
+
+    if (!menuBtn || !menuDropdown) return;
+
+    menuBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      menuBtn.classList.toggle("active");
+      menuDropdown.classList.toggle("active");
+    });
+
+    // Close menu when clicking outside
+    document.addEventListener("click", (e) => {
+      if (!menuDropdown.contains(e.target) && e.target !== menuBtn) {
+        menuBtn.classList.remove("active");
+        menuDropdown.classList.remove("active");
+      }
+    });
+
+    // Prevent menu from closing when clicking inside
+    menuDropdown.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+  }
+
   // ---------------------------------------------------------------------------
   // API helpers
   // ---------------------------------------------------------------------------
@@ -948,6 +980,7 @@
   // ---------------------------------------------------------------------------
   async function init() {
     initTheme();
+    initHeaderMenu();
     document.getElementById("theme-toggle").addEventListener("click", toggleTheme);
     document.getElementById("header-logo").addEventListener("click", goHome);
     initSearch();