feat(sidebar): pin chats within projects

[12ya]

What Changed

• Persist pinned chat state per logical project.
• Keep pinned chats above the normal thread sort order for each project.
• Add hover pin and unpin controls without consuming title space.
• Support pinning and unpinning by dragging a chat across the pinned divider.
• Show a compact divider with a centered pin icon and distinct pin/unpin feedback colors.
• Animate chats moving between pinned and regular sections.

Why

Important chats should stay easy to reach without being pinned globally across unrelated projects. Project-scoped pinning keeps each sidebar group predictable while preserving the existing thread sort order for unpinned chats.

The hover control provides a quick direct action, while divider-crossing drag behavior makes bulk sidebar organization feel natural.

UI Changes

Interaction demo:

Screen.Recording.2026-07-12.at.11.51.13.PM.mp4

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

[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: 0a2840b7-f3e9-46fa-8a2e-16e36e7f7608

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.}

[macroscopeapp]

🟡 Medium components/Sidebar.tsx:717

Spreading threadDrag.listeners onto the entire row makes every descendant a drag activator, including the inline rename <input>. During renaming, dragging more than 6px to select text starts a thread drag instead, disrupting text selection and causing drops to unexpectedly pin or unpin the thread. Consider attaching drag listeners to a dedicated handle or preventing drag activation from interactive descendants.

🤖 Copy this AI Prompt to have your agent fix this:

In file @apps/web/src/components/Sidebar.tsx around line 717:

Spreading `threadDrag.listeners` onto the entire row makes every descendant a drag activator, including the inline rename `<input>`. During renaming, dragging more than 6px to select text starts a thread drag instead, disrupting text selection and causing drops to unexpectedly pin or unpin the thread. Consider attaching drag listeners to a dedicated handle or preventing drag activation from interactive descendants.