super-buckets: split tab click (activate) from caret click (dropdown)

Clicking the super-bucket tab now activates the last-shown child
directly. Only the caret arrow on the right opens the dropdown popover.
Caret has its own hit area with accent hover highlight.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
thandClaude Opus 4.6 committed 2026-04-12 19:37:38 +02:00
1 parent 04b52ecc19
commit 527305355c
5 files changed
+64 -16

No files matched your search

+16 -6
View File
@@ -309,7 +309,7 @@ function renderBar() {
const shown = tileFor(b);
const c = shown.color || '#64748b';
const groupActive = state.activeBucket == b.id || kids.some(k => k.id == state.activeBucket);
return `<button class="${tab(groupActive)} bucket-super" data-bucket-super="${b.id}" data-super-shown="${shown.id}" draggable="true" data-bucket-drag="${b.id}" style="border-top:3px solid ${c};${groupActive ? `background:${c};color:var(--t-bg);border-color:${c}` : ''}"><i class="ph ph-stack text-sm"></i><span class="font-pixel text-[10px]">${esc(shown.name)}</span><i class="ph ph-caret-down text-[10px] ml-0.5 opacity-70"></i></button>`;
return `<button class="${tab(groupActive)} bucket-super" data-bucket-super="${b.id}" data-super-shown="${shown.id}" draggable="true" data-bucket-drag="${b.id}" style="border-top:3px solid ${c};${groupActive ? `background:${c};color:var(--t-bg);border-color:${c}` : ''}"><i class="ph ph-stack text-sm"></i><span class="font-pixel text-[10px]">${esc(shown.name)}</span><span class="super-caret" data-super-caret="${b.id}"><i class="ph ph-caret-down text-[10px]"></i></span></button>`;
}
const c = b.color || '#64748b';
const active = state.activeBucket == b.id;
@@ -462,11 +462,21 @@ function renderBar() {
const isUser = isSuperTile || !SPECIAL.includes(bid);
if (isSuperTile) {
// Click opens the dropdown popover instead of activating the
// parent directly. The dropdown lists parent + every child.
t.addEventListener('click', (e) => {
e.stopPropagation();
openSuperDropdown(t, parseInt(bid, 10));
// Caret arrow opens the dropdown; clicking the rest of the
// tab activates the last-shown child (or parent).
const caret = t.querySelector('[data-super-caret]');
if (caret) {
caret.addEventListener('click', (e) => {
e.stopPropagation();
openSuperDropdown(t, parseInt(bid, 10));
});
}
t.addEventListener('click', () => {
const shownId = t.dataset.superShown;
setActiveBucket(shownId || bid);
state.activeGroup = null;
renderBar();
window._renderBoard();
});
} else {
t.addEventListener('click', () => { setActiveBucket(bid); state.activeGroup = null; renderBar(); window._renderBoard(); });