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 ? `` : ''; + // 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 ? `${emoji}` : ''; - if (list.id === state.currentListId) { + if (isActive) { tab.innerHTML = ` - ${dot}${prefix} + ${prefix} ${esc(list.name)} `; } else { - tab.innerHTML = `${dot}${prefix}${esc(list.name)}`; + tab.innerHTML = `${prefix}${esc(list.name)}`; tab.addEventListener('click', () => switchList(list.id)); } container.appendChild(tab);