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

frontend/index.html

@@ -12,11 +12,43 @@
   
   <!-- CodeMirror 6 -->
   <script type="module">
-    import { EditorView, basicSetup } from "https://esm.sh/@codemirror/[email protected].0";
+    import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine } from "https://esm.sh/@codemirror/[email protected].0";
     import { EditorState } from "https://esm.sh/@codemirror/[email protected]";
+    import { defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching, foldGutter, foldKeymap } from "https://esm.sh/@codemirror/[email protected]";
+    import { defaultKeymap, history, historyKeymap } from "https://esm.sh/@codemirror/[email protected]";
+    import { searchKeymap, highlightSelectionMatches } from "https://esm.sh/@codemirror/[email protected]";
+    import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from "https://esm.sh/@codemirror/[email protected]";
     import { markdown } from "https://esm.sh/@codemirror/[email protected]";
     import { oneDark } from "https://esm.sh/@codemirror/[email protected]";
-    import { keymap } from "https://esm.sh/@codemirror/[email protected]";
+    
+    const basicSetup = [
+      lineNumbers(),
+      highlightActiveLineGutter(),
+      highlightSpecialChars(),
+      history(),
+      foldGutter(),
+      drawSelection(),
+      dropCursor(),
+      EditorState.allowMultipleSelections.of(true),
+      indentOnInput(),
+      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+      bracketMatching(),
+      closeBrackets(),
+      autocompletion(),
+      rectangularSelection(),
+      crosshairCursor(),
+      highlightActiveLine(),
+      highlightSelectionMatches(),
+      keymap.of([
+        ...closeBracketsKeymap,
+        ...defaultKeymap,
+        ...searchKeymap,
+        ...historyKeymap,
+        ...foldKeymap,
+        ...completionKeymap,
+      ])
+    ];
+    
     window.CodeMirror = { EditorView, EditorState, basicSetup, markdown, oneDark, keymap };
   </script>
 </head>
@@ -39,13 +71,27 @@
         <input type="text" id="search-input" placeholder="Recherche..." autocomplete="off">
       </div>
 
-      <select id="vault-filter" class="search-vault-filter">
-        <option value="all">Toutes les vaults</option>
-      </select>
-
-      <button class="theme-toggle" id="theme-toggle" title="Changer le thème">
-        <i data-lucide="moon" id="theme-icon" style="width:18px;height:18px"></i>
-      </button>
+      <div class="header-menu">
+        <button class="header-menu-btn" id="header-menu-btn" title="Options">
+          <i data-lucide="settings" style="width:18px;height:18px"></i>
+        </button>
+        <div class="header-menu-dropdown" id="header-menu-dropdown">
+          <div class="menu-section">
+            <div class="menu-label">Vault</div>
+            <select id="vault-filter" class="menu-select">
+              <option value="all">Tous les vaults</option>
+            </select>
+          </div>
+          <div class="menu-divider"></div>
+          <div class="menu-section">
+            <div class="menu-label">Thème</div>
+            <button class="menu-theme-btn" id="theme-toggle">
+              <i data-lucide="sun" style="width:16px;height:16px"></i>
+              <span id="theme-label">Clair</span>
+            </button>
+          </div>
+        </div>
+      </div>
     </header>
 
     <!-- Main -->