feat: panneau de facettes repliable + facette Extensions exposee par l'API #157

frontend/js/search.js

@@ -1035,7 +1035,26 @@ export function renderAdvancedSearchResults(data, query, tagFilter) {
 
   // Facets panel
   if (data.facets && (Object.keys(data.facets.tags || {}).length > 0 || Object.keys(data.facets.vaults || {}).length > 0 || Object.keys(data.facets.extensions || {}).length > 0)) {
-    const facetsDiv = el("div", { class: "search-facets" });
+    const collapsed = localStorage.getItem("obsigate_facets_collapsed") === "1";
+    const facetsDiv = el("div", { class: "search-facets", "data-collapsed": collapsed ? "true" : "false" });
+
+    // Discreet collapse toggle for the whole panel (vaults + tags + extensions)
+    const toggleBtn = el("button", {
+      class: "search-facets__toggle",
+      type: "button",
+      "aria-expanded": String(!collapsed),
+      title: collapsed ? t("search.facets_expand") : t("search.facets_collapse"),
+    });
+    toggleBtn.innerHTML = '<i data-lucide="chevron-down" style="width:12px;height:12px"></i>';
+    toggleBtn.addEventListener("click", () => {
+      const nowCollapsed = facetsDiv.getAttribute("data-collapsed") !== "true";
+      facetsDiv.setAttribute("data-collapsed", nowCollapsed ? "true" : "false");
+      toggleBtn.setAttribute("aria-expanded", String(!nowCollapsed));
+      toggleBtn.title = nowCollapsed ? t("search.facets_expand") : t("search.facets_collapse");
+      localStorage.setItem("obsigate_facets_collapsed", nowCollapsed ? "1" : "0");
+    });
+    facetsDiv.appendChild(toggleBtn);
+    const facetsBody = el("div", { class: "search-facets__body" });
 
     // Vault facets
     const vaultFacets = data.facets.vaults || {};
@@ -1056,7 +1075,7 @@ export function renderAdvancedSearchResults(data, query, tagFilter) {
         });
         group.appendChild(item);
       }
-      facetsDiv.appendChild(group);
+      facetsBody.appendChild(group);
     }
 
     // Tag facets
@@ -1075,7 +1094,7 @@ export function renderAdvancedSearchResults(data, query, tagFilter) {
         });
         group.appendChild(item);
       }
-      facetsDiv.appendChild(group);
+      facetsBody.appendChild(group);
     }
 
     // Extension facets
@@ -1101,9 +1120,10 @@ export function renderAdvancedSearchResults(data, query, tagFilter) {
         });
         group.appendChild(item);
       }
-      facetsDiv.appendChild(group);
+      facetsBody.appendChild(group);
     }
 
+    facetsDiv.appendChild(facetsBody);
     area.appendChild(facetsDiv);
   }
 

frontend/locales/en.json

@@ -1609,6 +1609,8 @@
   "search.exclude_placeholder": "Exclude: vendor/*, *.lock",
   "search.facet_tags": "Tags",
   "search.facet_vaults": "Vaults",
+  "search.facets_collapse": "Collapse facets",
+  "search.facets_expand": "Expand facets",
   "search.files_filtered": "{count} file(s) with filters",
   "search.filter_path_title": "Path filters (Alt-F)",
   "search.filters": "Filters",

frontend/locales/fr.json

@@ -1609,6 +1609,8 @@
   "search.exclude_placeholder": "Exclure: vendor/*, *.lock",
   "search.facet_tags": "Tags",
   "search.facet_vaults": "Vaults",
+  "search.facets_collapse": "Réduire les facettes",
+  "search.facets_expand": "Afficher les facettes",
   "search.files_filtered": "{count} fichier(s) avec filtres",
   "search.filter_path_title": "Filtres de chemin (Alt-F)",
   "search.filters": "Filtres",

frontend/style.css

@@ -5476,6 +5476,38 @@ body.resizing-v {
   font-size: 0.68rem;
   color: var(--text-muted);
 }
+.search-facets__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-secondary);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition:
+    transform 120ms,
+    border-color 120ms,
+    color 120ms;
+}
+.search-facets__toggle:hover {
+  border-color: var(--accent);
+  color: var(--text-secondary);
+}
+.search-facets[data-collapsed="true"] .search-facets__toggle {
+  transform: rotate(-90deg);
+}
+.search-facets__body {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.search-facets[data-collapsed="true"] .search-facets__body {
+  display: none;
+}
 
 /* ---------------------------------------------------------------------------
    Advanced Search — Pagination