From 6bbee271e3a5d77d43499c970465684dbb409ce0 Mon Sep 17 00:00:00 2001
From: perco <perco@percoNAS.home>
Date: Tue, 19 May 2026 22:08:42 +0200
Subject: [PATCH] =?UTF-8?q?fix(liste):=20couleur=20appliqu=C3=A9e=20sur=20?=
 =?UTF-8?q?tout=20le=20tab=20(pas=20juste=20un=20point)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tab actif coloré : background + border = couleur choisie, texte blanc
- Tab inactif coloré : border + texte = couleur choisie
- Suppression du .liste-tab-dot inutilisé

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 modules/liste/assets/liste.css |  9 +--------
 modules/liste/assets/liste.js  | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/modules/liste/assets/liste.css b/modules/liste/assets/liste.css
index 8bacfb6..66479c6 100644
--- a/modules/liste/assets/liste.css
+++ b/modules/liste/assets/liste.css
@@ -435,15 +435,8 @@
 }
 .liste-color-swatch-none.active { outline-color: var(--primary, #4361ee); }
 
-/* ── Tab dot + type emoji ──────────────────────────────────────────────────── */
+/* ── Tab type emoji ────────────────────────────────────────────────────────── */
 
-.liste-tab-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  display: inline-block;
-}
 .liste-tab-type { font-size: .85rem; line-height: 1; }
 
 /* ── Category section headers ──────────────────────────────────────────────── */
diff --git a/modules/liste/assets/liste.js b/modules/liste/assets/liste.js
index 4dfdf49..59640b3 100644
--- a/modules/liste/assets/liste.js
+++ b/modules/liste/assets/liste.js
@@ -253,22 +253,31 @@ function renderTabs() {
   container.innerHTML = '';
 
   state.lists.forEach(list => {
+    const isActive = list.id === state.currentListId;
     const tab = document.createElement('div');
-    tab.className = 'liste-tab' + (list.id === state.currentListId ? ' active' : '');
+    tab.className = 'liste-tab' + (isActive ? ' active' : '');
     tab.dataset.id = list.id;
 
-    const dot   = list.color ? `<span class="liste-tab-dot" style="background:${esc(list.color)}"></span>` : '';
+    // Apply custom color to entire tab
+    if (list.color) {
+      if (isActive) {
+        tab.style.cssText = `background:${list.color};border-color:${list.color};color:#fff`;
+      } else {
+        tab.style.cssText = `border-color:${list.color};color:${list.color}`;
+      }
+    }
+
     const emoji = typeEmoji(list.list_type);
     const prefix = emoji ? `<span class="liste-tab-type">${emoji}</span>` : '';
 
-    if (list.id === state.currentListId) {
+    if (isActive) {
       tab.innerHTML = `
-        ${dot}${prefix}
+        ${prefix}
         <span class="liste-tab-name">${esc(list.name)}</span>
         <button class="liste-tab-btn liste-tab-edit" title="Modifier" data-id="${list.id}">✏</button>
       `;
     } else {
-      tab.innerHTML = `${dot}${prefix}<span class="liste-tab-name">${esc(list.name)}</span>`;
+      tab.innerHTML = `${prefix}<span class="liste-tab-name">${esc(list.name)}</span>`;
       tab.addEventListener('click', () => switchList(list.id));
     }
     container.appendChild(tab);