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.

[bholmesdev]

Merge risk: medium

Impact: medium 👀

• Changes click behavior for every sidebar folder in desktop and web. Clicking an unselected expanded folder now selects it instead of collapsing it.
• Removes background-color transitions from every row, so hover and selection highlights now snap instead of fading.
• The chevron hit area grows via -m-1 size-5.
• Conflicts with main, and overlaps Add expand and collapse all to the sidebar #271, Add “Copy folder path” to sidebar folder menus #304 and Add an inbox view to the desktop sidebar #307 in Sidebar.tsx.

Rollback cost: low ✅

Error detection: N/A

Verification: poor ⚠️

• Good DOM tests for row, chevron, double-click, and multi-select.
• This is a visual fix with no before/after recording. The frame-by-frame check and the "layout unchanged" claim are only described.
• Not covered: keyboard activation (Enter/Space, detail === 0) on an expanded unselected folder.

Alignment: decent 👀

• The description documents the change and the alternatives considered.
• No linked issue for an opinionated UX change (select-before-collapse), so it needs maintainer sign-off.