fix(web): unify focus ring styles across sidebar and app

[Xanacas]

Summary

• Replace ring-sidebar-ring with ring-ring in all sidebar UI primitives — --sidebar-ring was never defined in the theme CSS, causing focus rings to silently fall back to currentColor (grey) instead of the app's blue --ring token
• Restore focus visibility on thread rows which had focus-visible:ring-0 suppressing the indicator entirely — now uses ring-1 ring-inset to avoid clipping on first/last items

Details:

Unified focus-ring colors

Everywhere except in the sidebar, the focus ring in the app is shown blue. In the sidebar, the shadcn components were using a different css class for the focus-ring (ring-sidebar-ring), which had no color configured and was therefore falling back to current color which is grey instead of blue.

Threads

Threads didn't show they were focused. Pressing Tab after the "new" button of a project seemed to "vanish" any focus, because threads didn't show a focus state

Even though these are two "different" changes, I thought they might be small enough and and not questionable, so i made just one pr

Note

Unify focus ring styles across sidebar components and thread rows

Replaces ring-sidebar-ring with the generic ring-ring Tailwind variable across multiple sidebar components in sidebar.tsx, and adds a visible focus-visible:ring-1 focus-visible:ring-inset ring to thread rows in Sidebar.logic.ts, which previously had ring-0. This makes focus ring styling consistent across the sidebar and the rest of the app.

^{Macroscope summarized c9c4a4a.}

[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: 7095ba8c-e260-4094-bf5e-30dee12a689f

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
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

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

[Xanacas]

While I was continuing with better sidebar navigation. I thought it might make sense to actually keep the difference in focus-color:

My preference would be:
Tab just focuses the project-list, not an individual entry. switching "focus" between projects happens then by standard WAI-ARIA Treeview pattern (up,down,left,right arrow keys). This would make tab navigation much more practical especially if there are a lot of projects/threads in the sidebar.
Color wise I then would prefer to have the current focused projects/threads ring being the grey tone it currently had accidentally.
Following this concept, there is a minor change that could matter for some users. currently I can tab to the "new thread" butten behind the project name. this would work anymore. My perspective: If I am using keyboard shortcuts to navigate, I can easily learn (or would have learned already) that mod+shift+n does the same thing. I'd probably just add a "n" keyboard shortcut that works when on a project to create a new thread even if I'm not on a thread of the current focused project.

So if you're open for proper keyboard navigation in the projects treeview, i'd partly reverse my own PR before it's even merged 😂