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>

public/plugins/tests/super-buckets.test.js

@@ -180,7 +180,7 @@ describe('Super-buckets: Bar rendering', () => {
         expect(superTile.textContent).toContain('__sb_active_child__');
     });
 
-    it('clicking the super-tile opens a popover with parent + child entries', async () => {
+    it('clicking the caret opens a popover with parent + child entries', async () => {
         const parent = await makeBucket('__sb_pop_parent__');
         const child1 = await makeBucket('__sb_pop_child1__');
         const child2 = await makeBucket('__sb_pop_child2__');
@@ -191,15 +191,15 @@ describe('Super-buckets: Bar rendering', () => {
 
         const superTile = document.querySelector(`#bucket-bar [data-bucket-super="${parent.id}"]`);
         if (!superTile) return;
-        click(superTile);
+        const caret = superTile.querySelector('[data-super-caret]');
+        expect(caret).toExist();
+        click(caret);
         await sleep(100);
 
         const popover = document.getElementById('bucket-super-popover');
         expect(popover).toExist();
-        // Parent + 2 children = 3 entries
         const entries = popover.querySelectorAll('[data-bucket]');
         expect(entries.length).toBe(3);
-        // All three names appear
         const text = popover.textContent;
         expect(text).toContain('__sb_pop_parent__');
         expect(text).toContain('__sb_pop_child1__');
@@ -215,7 +215,8 @@ describe('Super-buckets: Bar rendering', () => {
 
         const superTile = document.querySelector(`#bucket-bar [data-bucket-super="${parent.id}"]`);
         if (!superTile) return;
-        click(superTile);
+        const caret = superTile.querySelector('[data-super-caret]');
+        click(caret);
         await sleep(100);
 
         const childEntry = document.querySelector(`#bucket-super-popover [data-bucket="${child.id}"]`);
@@ -226,7 +227,25 @@ describe('Super-buckets: Bar rendering', () => {
         expect(String(state.activeBucket)).toBe(String(child.id));
     });
 
-    it('clicking the super-tile twice toggles the popover closed', async () => {
+    it('clicking the super-tile activates the shown bucket', async () => {
+        const parent = await makeBucket('__sb_direct_parent__');
+        const child  = await makeBucket('__sb_direct_child__');
+        await patchBucket(child.id, { parent_id: parent.id });
+        await window._reloadAll?.();
+        await sleep(200);
+
+        state.activeBucket = 'all';
+        const superTile = document.querySelector(`#bucket-bar [data-bucket-super="${parent.id}"]`);
+        if (!superTile) return;
+        click(superTile);
+        await sleep(150);
+
+        const shownId = superTile.dataset.superShown;
+        expect(String(state.activeBucket)).toBe(String(shownId));
+        expect(document.getElementById('bucket-super-popover')).toBe(null);
+    });
+
+    it('clicking the caret twice toggles the popover closed', async () => {
         const parent = await makeBucket('__sb_toggle_parent__');
         const child  = await makeBucket('__sb_toggle_child__');
         await patchBucket(child.id, { parent_id: parent.id });
@@ -235,10 +254,11 @@ describe('Super-buckets: Bar rendering', () => {
 
         const superTile = document.querySelector(`#bucket-bar [data-bucket-super="${parent.id}"]`);
         if (!superTile) return;
-        click(superTile);
+        const caret = superTile.querySelector('[data-super-caret]');
+        click(caret);
         await sleep(100);
         expect(document.getElementById('bucket-super-popover')).toExist();
-        click(superTile);
+        click(caret);
         await sleep(100);
         expect(document.getElementById('bucket-super-popover')).toBe(null);
     });