feat(boards): add keyboard shortcuts for board switching - #6393
Conversation
- mod+shift+ArrowRight / mod+shift+ArrowLeft to cycle boards - mod+shift+1-9 to jump to board by index - Uses Mantine useHotkeys (ignores inputs, already in use in the codebase)
📝 WalkthroughWalkthroughBoard header actions now include keyboard shortcuts for switching between boards. Navigation supports previous and next board cycling and direct selection of up to nine boards, while edit-related controls remain gated by change access. ChangesBoard navigation
Sequence Diagram(s)sequenceDiagram
participant BoardContentHeaderActions
participant BoardNavigationHotkeys
participant Router
BoardContentHeaderActions->>BoardNavigationHotkeys: render navigation component
BoardNavigationHotkeys->>BoardNavigationHotkeys: query boards and register shortcuts
BoardNavigationHotkeys->>Router: navigate to selected board
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/nextjs/src/app/`[locale]/boards/(content)/_header-actions.tsx:
- Around line 226-229: Guard the ArrowRight and ArrowLeft hotkey registrations
in the boards header action flow so they are only added when both boards.length
> 1 and currentIndex !== -1. Preserve the existing wraparound navigation
calculations for valid currentIndex values.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 8cb723a3-bab8-454b-aed6-3b6c4b6059ea
📒 Files selected for processing (1)
apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx
| if (boards.length > 1) { | ||
| entries.push(["mod+shift+ArrowRight", () => navigateToBoard((currentIndex + 1) % boards.length)]); | ||
| entries.push(["mod+shift+ArrowLeft", () => navigateToBoard((currentIndex - 1 + boards.length) % boards.length)]); | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Prevent Arrow hotkeys from navigating to unexpected boards when the current board is not found.
If currentIndex evaluates to -1 (e.g., if the current board hasn't synced with the getAllBoards cache yet), the modulo arithmetic will yield incorrect target indices. For instance, if there are 3 boards, pressing "previous" would calculate (-1 - 1 + 3) % 3 = 1 and unexpectedly jump the user to the second board.
Add a check to ensure currentIndex !== -1 before registering the Arrow hotkeys.
🐛 Proposed fix
- if (boards.length > 1) {
+ if (boards.length > 1 && currentIndex !== -1) {
entries.push(["mod+shift+ArrowRight", () => navigateToBoard((currentIndex + 1) % boards.length)]);
entries.push(["mod+shift+ArrowLeft", () => navigateToBoard((currentIndex - 1 + boards.length) % boards.length)]);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (boards.length > 1) { | |
| entries.push(["mod+shift+ArrowRight", () => navigateToBoard((currentIndex + 1) % boards.length)]); | |
| entries.push(["mod+shift+ArrowLeft", () => navigateToBoard((currentIndex - 1 + boards.length) % boards.length)]); | |
| } | |
| if (boards.length > 1 && currentIndex !== -1) { | |
| entries.push(["mod+shift+ArrowRight", () => navigateToBoard((currentIndex + 1) % boards.length)]); | |
| entries.push(["mod+shift+ArrowLeft", () => navigateToBoard((currentIndex - 1 + boards.length) % boards.length)]); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/nextjs/src/app/`[locale]/boards/(content)/_header-actions.tsx around
lines 226 - 229, Guard the ArrowRight and ArrowLeft hotkey registrations in the
boards header action flow so they are only added when both boards.length > 1 and
currentIndex !== -1. Preserve the existing wraparound navigation calculations
for valid currentIndex values.
|
Just had the idea that we could also make a menu like on windows to switch between boards (but of course no need to implement this) |
Like what kind of menu ? The one to switch between spaces ? I think someone opened an issue about it recently |
Something like this, just for the boards
|
|
@Meierschlumpf its a good idea |
2 participants
Description
Adds keyboard shortcuts to quickly switch between boards without using the mouse.
Shortcuts
mod+shift+ArrowRight— switch to next boardmod+shift+ArrowLeft— switch to previous boardmod+shift+1throughmod+shift+9— jump to board by index (1-based)mod= Ctrl on Windows/Linux, Cmd on macOS.Implementation
useHotkeyshook (already used in the same file for edit mode toggle)BoardNavigationHotkeyscomponentCloses #6392
Summary by CodeRabbit
New Features
Improvements