fix: make sidebar folder clicks predictable and flicker-free

[n00ki]

Rationale

Sidebar folder clicks previously combined selection and expansion into one action. Clicking an unselected expanded folder could collapse it unexpectedly, while expanding a collapsed folder briefly showed the previous row’s highlight in its new position.

This change separates selection intent from collapse intent while preserving convenient one-click expansion:

• Collapsed folders expand immediately.
• Clicking an unselected expanded folder selects it without collapsing it.
• Clicking the selected folder again collapses it.
• Clicking the chevron explicitly toggles the folder immediately.

The highlight flicker came from the row’s background-color transition. When expansion inserted new rows, the previous selection remained accented for one paint after moving. Sidebar selection backgrounds now update immediately, while opacity and filter transitions used for drag feedback remain animated.

Alternatives considered

I considered requiring two clicks before expanding any unselected folder. This avoided accidental toggles but added friction to the most common folder interaction.

I also considered preserving background transitions by sequencing selection and expansion separately. The previous highlight could still remain visible while rows moved, and delaying expansion made the interaction feel less responsive.

A separate chevron button would provide clearer event boundaries, but the row is already a button and nesting another button would be invalid. Restructuring the row would also affect keyboard navigation and drag behavior. The existing chevron region is therefore used as the explicit toggle target, with a larger hit area.

Summary

• Expand collapsed folders on the first click anywhere in the row.
• Select expanded folders before allowing a row click to collapse them.
• Toggle folders immediately when their chevron is clicked.
• Ignore the second click of a double-click to prevent expansion from immediately reversing.
• Remove background-color transitions that caused selection highlights to jump during expansion.
• Increase the chevron hit region without changing sidebar layout.
• Add DOM-level coverage for row clicks, chevron clicks, double-clicks, and multi-selection.

Testing

• pnpm --filter @hubble.md/ui test -- Sidebar.test.tsx
• pnpm check
• pnpm check:react-compiler
• pnpm build:desktop
• Verified row and chevron clicks in the Electron app.
• Verified frame-by-frame that the old selection becomes transparent and the folder highlight appears in the same expansion paint.

[vercel]

@n00ki is attempting to deploy a commit to the bholmesdev's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Overview

Separates sidebar folder selection from collapse: first row click expands/selects, second collapses only when that folder is already the sole selection; chevron toggles immediately; double-click second pulse ignored; selection bg no longer transitions (kills expansion flicker). DOM tests cover the main paths.

Audit

Comments

• Sidebar.tsx:605 — non-obvious select-before-collapse / chevron rule; matches local "why" style.
• Sidebar.tsx:1019 — why background-color left the transition list; same bar as nearby drag/selection notes.

Tests

• Mirrors existing Toolbar / useSidebarTree happy-dom + createRoot setup.
• Seeds expanded folders with the real storage key shape.
• Covers select-then-collapse, first-click expand, double-click, chevron collapse, multi-select reduce — distinct paths, not input-only variants.

Concerns

None material. Pre-click wasOnlySelectedRow is read before updateSelection, so sole-selection collapse and multi-select reduce both behave as described.

Verdict

Found: 0 critical, 0 important, 0 suggestions

Approve

---

Reviewed by a Warp Factory agent.