Refactor sidebar rerender boundaries anad reduce the re-renders

[justsomelegs]

What Changed

Refactored the sidebar to make updates much more atomic and remove broad rerender paths.

Before: before.sidebar.improvements.mp4

After: after.sidebar.improvements.mp4

Main changes:

• Split sidebar state access so rows, project sections, and keyboard hint UI subscribe closer to where data is rendered
• Added sidebar-specific selector/controller modules for project ordering, thread row snapshots, keyboard traversal, and sidebar-local view state
• Moved volatile thread UI like shortcut hints, running state, and relative activity time into smaller leaf components/selectors
• Removed the mirrored project-ordering path through the sidebar view store and now derive ordered project keys directly from source state
• Tightened logical project key typing across the sidebar so grouped project keys stay distinct from physical project IDs

Files added/extracted:

• apps/web/src/components/sidebar/sidebarConstants.ts
• apps/web/src/components/sidebar/sidebarControllers.tsx
• apps/web/src/components/sidebar/sidebarProjectSnapshots.ts
• apps/web/src/components/sidebar/sidebarSelectors.ts
• apps/web/src/components/sidebar/sidebarViewStore.ts

Files heavily updated:

• apps/web/src/components/Sidebar.tsx
• apps/web/src/components/Sidebar.logic.ts
• apps/web/src/logicalProject.ts

Why

The sidebar was still subscribed to broad Zustand state even after the move toward atomic stores. In practice that meant:

• switching threads rerendered too much of the sidebar
• holding Ctrl for jump hints rerendered more than the affected thread metadata
• streaming updates in chat caused overly broad sidebar work and rerenders

This change narrows subscriptions and moves derived/volatile state closer to the leaf components that actually need it. The result is a sidebar that is more predictable under load, rerenders less broadly, and is better aligned with the atomic-store direction of the app.

This approach was chosen because it improves performance without introducing new product behavior, and it keeps the refactor focused on existing sidebar ownership/render boundaries rather than expanding scope into chat/composer work.

UI Changes

Sidebar behavior is visually mostly unchanged, but render/update behavior is much narrower.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Note

Refactor sidebar to reduce re-renders via selector-driven state and dedicated controllers

• Replaces inline prop-drilling and local state in Sidebar.tsx with a new Zustand view store (sidebarViewStore.ts) and a suite of memoized selectors (sidebarSelectors.ts) so each component subscribes only to the data it needs.
• Extracts global keyboard and mouse event listeners into SidebarKeyboardController and SidebarSelectionController components (sidebarControllers.tsx), removing them from the root Sidebar component.
• Decomposes SidebarThreadRow and SidebarProjectItem into smaller focused components (SidebarThreadMetaCluster, SidebarThreadStatusIndicator, SidebarProjectHeader, SidebarProjectThreadSection) that each derive their own data from selectors.
• Adds buildSidebarProjectSnapshots (sidebarProjectSnapshots.ts) to compute stable logical-project groupings with cache reuse, replacing ad-hoc inline grouping logic in the root component.
• Behavioral Change: the sidebar now resets view state (resetSidebarViewState) on unmount instead of removing a mousedown listener; thread jump hint delay drops from 100ms to 75ms.

^{Macroscope summarized 6f1805a.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 7ad8eb64-f84d-4c9c-8e1c-cfc09e6a5ac7

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This is a major architectural refactor of the sidebar component that introduces new state management (Zustand store), new selector patterns with complex memoization, and restructures component boundaries. While the intent is performance optimization, the scope significantly changes shared infrastructure and warrants human review to validate the new patterns work correctly across all sidebar interactions.

^{You can customize Macroscope's approvability policy. Learn more.}

[juliusmarminge]

is the before here from the latest version? i did a bunch of fixes for this release. it shouldn't be like that

[justsomelegs]

yeah it was from the latest version of main, the chat composer was fixed but the sidebar would re-render on every update just cause it was not using the new atomic stores in the best way.

[justsomelegs]

correction it was 3 commits behind but it still does now after pulling those down unless, i could be wrong though let me know :)