Improve active thread visual emphasis in sidebar

[juliusmarminge]

Summary

• update active sidebar thread button styles to use stronger accent background, medium text weight, and subtle border ring
• keep inactive thread styling unchanged with muted foreground text
• increase timestamp contrast for active threads while preserving muted timestamp color for inactive threads

Testing

• Not run (UI styling change only)

---

Note

Low Risk
Low risk UI-only change that adjusts Tailwind classes for the active thread item and its timestamp; no behavior or data flow changes.

Overview
Improves visual emphasis for the active thread in the sidebar by giving the selected thread row a stronger accent background, medium font weight, and a subtle border ring (including dark-mode tweaks).

Also increases timestamp contrast for the active thread while keeping inactive thread timestamps muted.

^{Written by Cursor Bugbot for commit b44353f. This will update automatically on new commits. Configure here.}

Note

Adjust Sidebar thread item styling to improve active thread visual emphasis in Sidebar.tsx

Update active thread list item classes to add accent background, ring border, and medium font weight; set timestamp to higher-contrast color when active.

📍Where to Start

Start with the render logic in Sidebar within Sidebar.tsx.

^{Macroscope summarized b44353f.}

Summary by CodeRabbit

• Style
  • Improved visual distinction for active threads in the sidebar with enhanced background color, text styling, font weight, and ring indicators
  • Enhanced timestamp visibility in active threads with dynamic color adjustments based on selection status

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5748a99 and b44353f.

📒 Files selected for processing (1)

• apps/web/src/components/Sidebar.tsx

---

Walkthrough

Updated active thread item styling in the Sidebar component to include background color, text color, font weight, and ring styling. Additionally made relative time label text color conditional based on active state with dark mode support.

Changes

Cohort / File(s)	Summary
Sidebar Active State Styling apps/web/src/components/Sidebar.tsx	Enhanced visual distinction for active thread items by applying background color (bg-accent/85), text formatting (text-foreground, font-medium), and ring styling (ring-1 ring-border/70). Updated relative time label to use conditional text color (text-muted-foreground/40 when inactive, text-foreground/65 when active).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: improving visual emphasis for active threads in the sidebar through styling updates.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codething/4d0317ed

---

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