From bb01c2dd901bc43d35d06a895cc033b1f4caec16 Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Sat, 5 Sep 2026 21:55:50 +0200
Subject: [PATCH] Turn Compte/Type filters into hover dropdowns, add a clear
 button to each filter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A native <select multiple> can't collapse to a single-line trigger and
open as an overlay on hover -- it's either an always-open multi-row
list box or a single-value dropdown, not both. Replaced with a custom
dropdown: a trigger showing the current selection ("Tous" / "Maud,
Ouidade"), and a checkbox list shown on hover via a plain CSS :hover
rule (no open/close state needed). Checkboxes instead of ctrl/shift+click,
but same result -- several comptes/types at once -- with a more
discoverable interaction (no keyboard modifier to know about).

Also added a "✕ Effacer ce filtre" button next to Compte/Client/Type/
Année, shown only once that filter is active. Directly addresses the
Client filter specifically being painful to clear (select the text,
delete, press enter) -- one click now.
---
 .../custom/figli_compta_ledger/css/home.css   | 78 +++++++++++++++++--
 .../templates/figli-compta-home.html.twig     | 50 ++++++++----
 2 files changed, 108 insertions(+), 20 deletions(-)

diff --git a/web/modules/custom/figli_compta_ledger/css/home.css b/web/modules/custom/figli_compta_ledger/css/home.css
index 49e48a9..699286c 100644
--- a/web/modules/custom/figli_compta_ledger/css/home.css
+++ b/web/modules/custom/figli_compta_ledger/css/home.css
@@ -58,13 +58,79 @@ html.gin--dark-mode #figli-home-app {
   border-radius: 4px;
 }
 
-/* Compte/Type filters: <select multiple> so ctrl/shift+click can select
-   several values, rendered as a short scrollable list (size="4") rather
-   than the single-line native default -- needs an explicit width, since
-   a multi-row select sizes to its widest option's natural width
-   otherwise, unlike a single-line select's fixed line box. */
-#figli-home-app .figli-toolbar select[multiple] {
+/* Each filter control + its "✕ effacer" button, side by side. */
+#figli-home-app .figli-filter-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+#figli-home-app .figli-filter-clear {
+  background: transparent;
+  border: none;
+  color: var(--figli-text-light);
+  cursor: pointer;
+  font-size: 0.8rem;
+  line-height: 1;
+  padding: 0.15rem;
+}
+#figli-home-app .figli-filter-clear:hover {
+  color: var(--figli-error);
+}
+
+/* Compte/Type filters: a native <select multiple> can't collapse to a
+   single-line trigger and expand as an overlay -- it's either a
+   single-line dropdown, or an always-open multi-row list box. Custom
+   dropdown instead: a trigger showing the current selection, and a
+   checkbox list overlay shown on hover (pure CSS, no open/close state
+   needed) -- checkboxes rather than ctrl/shift+click, but same result
+   (several comptes/types at once) with an even more discoverable
+   interaction (no keyboard modifier to know about).*/
+#figli-home-app .figli-multiselect {
+  position: relative;
+}
+#figli-home-app .figli-multiselect-trigger {
+  font-size: 0.85rem;
+  padding: 0.2rem 0.4rem;
+  background: var(--figli-bg);
+  color: var(--figli-text);
+  border: 1px solid var(--figli-border);
+  border-radius: 4px;
   width: 9rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+}
+#figli-home-app .figli-multiselect-arrow {
+  float: right;
+  color: var(--figli-text-light);
+}
+#figli-home-app .figli-multiselect-panel {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 20;
+  min-width: 100%;
+  white-space: nowrap;
+  background: var(--figli-bg);
+  color: var(--figli-text);
+  border: 1px solid var(--figli-border);
+  border-radius: 4px;
+  padding: 0.3rem 0.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+#figli-home-app .figli-multiselect:hover .figli-multiselect-panel {
+  display: block;
+}
+#figli-home-app .figli-multiselect-option {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8rem;
+  font-weight: 400;
+  padding: 0.15rem 0;
 }
 
 #figli-home-app .figli-client-input {
diff --git a/web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig b/web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig
index d57dec0..5ecd9a3 100644
--- a/web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig
+++ b/web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig
@@ -20,29 +20,51 @@
     {% verbatim %}
 
     <label>Compte
-      <select v-model="filterCompte" multiple size="4" title="Ctrl/Cmd+clic ou Maj+clic pour plusieurs comptes">
-        <option v-for="c in allComptes" :key="c" :value="c">{{ c }}</option>
-      </select>
+      <span class="figli-filter-row">
+        <div class="figli-multiselect">
+          <div class="figli-multiselect-trigger">{{ filterCompte.length ? filterCompte.join(', ') : 'Tous' }} <span class="figli-multiselect-arrow">▾</span></div>
+          <div class="figli-multiselect-panel">
+            <label v-for="c in allComptes" :key="c" class="figli-multiselect-option">
+              <input type="checkbox" :value="c" v-model="filterCompte" /> {{ c }}
+            </label>
+          </div>
+        </div>
+        <button v-if="filterCompte.length" type="button" class="figli-filter-clear" @click="filterCompte = []" title="Effacer ce filtre">✕</button>
+      </span>
     </label>
 
     <label>Client
-      <input type="text" v-model.lazy="filterClient" list="figli-client-datalist" placeholder="Tous" autocomplete="off" class="figli-client-input" />
-      <datalist id="figli-client-datalist">
-        <option v-for="c in allClientsList" :key="c" :value="c"></option>
-      </datalist>
+      <span class="figli-filter-row">
+        <input type="text" v-model.lazy="filterClient" list="figli-client-datalist" placeholder="Tous" autocomplete="off" class="figli-client-input" />
+        <datalist id="figli-client-datalist">
+          <option v-for="c in allClientsList" :key="c" :value="c"></option>
+        </datalist>
+        <button v-if="filterClient" type="button" class="figli-filter-clear" @click="filterClient = ''" title="Effacer ce filtre">✕</button>
+      </span>
     </label>
 
     <label>Type
-      <select v-model="filterType" multiple size="4" title="Ctrl/Cmd+clic ou Maj+clic pour plusieurs types">
-        <option v-for="t in allTypes" :key="t.value" :value="t.value">{{ t.label }}</option>
-      </select>
+      <span class="figli-filter-row">
+        <div class="figli-multiselect">
+          <div class="figli-multiselect-trigger">{{ filterType.length ? filterType.map(typeLabel).join(', ') : 'Tous' }} <span class="figli-multiselect-arrow">▾</span></div>
+          <div class="figli-multiselect-panel">
+            <label v-for="t in allTypes" :key="t.value" class="figli-multiselect-option">
+              <input type="checkbox" :value="t.value" v-model="filterType" /> {{ t.label }}
+            </label>
+          </div>
+        </div>
+        <button v-if="filterType.length" type="button" class="figli-filter-clear" @click="filterType = []" title="Effacer ce filtre">✕</button>
+      </span>
     </label>
 
     <label>Année
-      <select v-model="filterYear">
-        <option value="">Toutes</option>
-        <option v-for="y in allYearsList" :key="y" :value="y">{{ y }}</option>
-      </select>
+      <span class="figli-filter-row">
+        <select v-model="filterYear">
+          <option value="">Toutes</option>
+          <option v-for="y in allYearsList" :key="y" :value="y">{{ y }}</option>
+        </select>
+        <button v-if="filterYear" type="button" class="figli-filter-clear" @click="filterYear = ''" title="Effacer ce filtre">✕</button>
+      </span>
     </label>
 
     <label>Aller à