What happened?

When switching between sessions from the sidebar, the selected-row background appears to flicker. The previous active session row remains visibly highlighted while the newly clicked row is already hovered/active, so two rows briefly show row backgrounds at the same time.

This is visible when repeatedly clicking different session rows in the "All sessions" list. Navigation itself succeeds, but the sidebar reads as if the selection flashes between rows.

Which area seems affected?

UI or design system

How much does this affect you?

Minor issue or polish

Steps to reproduce

1. Open PawWork with several existing sessions in the sidebar.
2. Open the "All sessions" list.
3. Click a different session row.
4. Repeat across a few rows.
5. Observe the old selected row fading out while the new clicked row is highlighted.

What did you expect to happen?

Only the newly selected session row should read as active. The previous active row should not linger visually during session switching.

PawWork version

2026.5.23 dev checkout, commit 2d53e910ed

OS version

macOS 26.5

Can you reproduce it again?

Yes, every time

Diagnostics

Screen recording: /Users/yuhan/Downloads/录屏2026-05-24 15.30.40.mov

Root cause confirmed with a Playwright DOM/CSS probe:

• packages/app/src/pages/layout/sidebar-items.tsx:187 combines transition-colors, hover:bg-row-hover-overlay, and has-[.active]:bg-row-active-overlay on the session row.
• packages/app/src/pages/layout/sidebar.css:3-5 animates row background-color over var(--duration-fast) / 80ms.
• On click, the child router link's .active class moves immediately to the new row, but the previous row's background fades out over the transition window.
• Normal motion at click +16ms: both old and new rows still have row backgrounds.
• With row transition disabled, or with prefers-reduced-motion: reduce, only the new active row remains visible at the same point.

Ruled out:

• Route active-class delay: the previous row is no longer .active at click +0ms.
• Row duplication or reordering: DOM row order stays stable.
• Loading or skeleton state: no skeleton rows are present.
• Video encoding artifact: the same state is visible from computed DOM/CSS.