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);