feat: implement initial frontend application with comprehensive styling, theming, and core structure.

frontend/app.js

@@ -330,6 +330,7 @@
         li.addEventListener("click", () => {
           const input = document.getElementById("search-input");
           input.value = entry;
+          input.dispatchEvent(new Event('input', { bubbles: true }));
           this.hide();
           _triggerAdvancedSearch(entry);
         });
@@ -391,6 +392,7 @@
           } else {
             input.value = (current ? current + " " : "") + "tag:" + item.tag + " ";
           }
+          input.dispatchEvent(new Event('input', { bubbles: true }));
           this.hide();
           input.focus();
           _triggerAdvancedSearch(input.value);
@@ -944,17 +946,22 @@
       }
       userMenu.innerHTML =
         '<span class="user-display-name">' + (user.display_name || user.username) + '</span>' +
-        (user.role === 'admin'
-          ? '<button class="user-menu-link" id="admin-btn" title="Administration"><i data-lucide="shield" style="width:14px;height:14px"></i></button>'
-          : '') +
         '<button class="btn-logout" id="logout-btn" title="Déconnexion"><i data-lucide="log-out" style="width:14px;height:14px"></i></button>';
       safeCreateIcons();
 
       const logoutBtn = document.getElementById('logout-btn');
       if (logoutBtn) logoutBtn.addEventListener('click', () => AuthManager.logout());
 
-      const adminBtn = document.getElementById('admin-btn');
-      if (adminBtn) adminBtn.addEventListener('click', () => AdminPanel.show());
+      const adminRow = document.getElementById('admin-menu-row');
+      if (adminRow) {
+        if (user.role === 'admin') {
+          adminRow.classList.remove('hidden');
+          // Important: use an inline function to ensure we don't bind multiple identical listeners on rerenders, or clean up before
+          adminRow.onclick = () => { closeHeaderMenu(); AdminPanel.show(); };
+        } else {
+          adminRow.classList.add('hidden');
+        }
+      }
     },
 
     // ── Initialization ──────────────────────────────────────────────
@@ -3862,6 +3869,10 @@
       panel.remove();
       return;
     }
+    // Auto reconnect if disconnected when user opens the panel
+    if (IndexUpdateManager.getState() === "disconnected") {
+      IndexUpdateManager.connect();
+    }
     panel = document.createElement("div");
     panel.id = "sync-panel";
     panel.className = "sync-panel";