feat(web): add arrow-key navigation for sidebar

[Xanacas]

Summary

• Add keyboard arrow navigation (Up/Down/Left/Right) for the sidebar project/thread tree
• ArrowLeft collapses a project or jumps to its parent; ArrowRight expands or focuses the first child thread
• Skips collapsed project threads when navigating with Up/Down
• Uses aria-expanded for accessibility instead of a custom data-expanded attribute
• Extracted navigation logic into Sidebar.logic.ts with 12 unit tests

Note

Add arrow-key navigation for sidebar projects and threads

• Adds handleSidebarArrowNavigation in Sidebar.logic.ts to handle ArrowUp/ArrowDown/ArrowLeft/ArrowRight key events on the sidebar menu.
• ArrowUp/ArrowDown move focus between projects and threads, skipping threads under collapsed projects.
• ArrowLeft on a thread focuses its parent project; on an expanded project, collapses it. ArrowRight expands a collapsed project or focuses its first thread.
• Navigation is wired in Sidebar.tsx via an onKeyDown handler on SidebarMenu, with data-nav-item and aria-expanded attributes added to project and thread buttons.
• Navigation ignores events when focus is on an input or textarea.

^{Macroscope summarized ce62140.}

[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: d6e72740-0970-4b69-a6cc-53d1d2d0ec3c

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]

@juliusmarminge as you already merged #1079 and mostlikely did read the comment in that PR: This PR is the implementation of the arrow keys, but without the change of the tab order /without limiting the sidebar to only be focusable as one element.

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 this one is really only adding arrow-key navigation following best practices for tree view navigation.
If you'd be willing to also accept the mentioned change towards the tree view only be one focusable entry, please let me know.

[juliusmarminge]

Should these be configurable and integrated into the centralized keybindigns system?

[Xanacas]

from my perspective not. I've never come across a different set of key bindings for walking along a tree view and as the arrow keys are bond to just the tree view, I currently can't come up with a scenario where I would want to bind my arrow keys to something other globally.

But what I'm thinking of:
Add some more global actions for key bindings:

• sidebar.treeView.focus
• sidebar.treeView.up
• sidebar.treeView.down
• sidebar.treeView.threadNext
• sidebar.treeView.threadPrev

For those I would immediately activate/load the thread (denounced). But I wanted to see if you're ok with this one 😅

Also I saw PR #69, what are your thoughts on Tanstack keyboard?