Feat: Add keyboard navigation

[nekojin116]

-Adds keyboard navigation to switch pages with left and right arrow
-Adds keyboard navigation for fonts list with instant font application so user preview the font

2026-08-22.14-17-06.mp4

[github-actions]

Thanks for your first PR to Koharu.

Please review our contribution guide before review:
https://koharu.rs/contribute/introduction/

In the PR description, include:

• what changed
• any user-visible behavior differences
• how you verified the change

If AI helped produce the patch, a human still needs to review and understand it before submission.

[Copilot]

🟡 Changes recommended

Page transitions have synchronization and focus-handling defects, while font navigation commits unintended settings changes.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds keyboard navigation for page switching and font previewing.

Changes:

• Adds Left/Right page navigation.
• Adds Up/Down font navigation with live application.
• Updates tests and lockfile dependencies.

File summaries

File	Description
CanvasWorkspace.tsx	Implements keyboard page switching.
FontPicker.tsx	Implements keyboard font navigation and preview.
workspace.test.tsx	Tests right-arrow page navigation.
bun.lock	Updates oxlint and prunes dependencies.

Review details

Suppressed comments (3)

packages/koharu/components/editor/CanvasWorkspace.tsx:399

• This global shortcut also runs for focused composite controls. For example, the Base UI slider thumbs in StatusBar.tsx:22-30 are not inputs, so pressing Left/Right adjusts the slider and then bubbles here to switch pages as well. Gate page navigation to the canvas/non-interactive target (and respect event.defaultPrevented) so arrow-key operation of sliders, tabs, menus, and other controls is not hijacked.

      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {

packages/koharu/components/editor/CanvasWorkspace.tsx:409

• This path bypasses the selection-state updates performed by PageRail.select: selectedPages still points at the old page and selectedLayers retains layer IDs from it. After an arrow switch, the rail therefore shows stale selection and subsequent layer shortcuts can act on stale IDs. Update both selections as part of the page transition.

        if (nextPage && nextPage.id !== page.id) {
          event.preventDefault()
          moveToPage(nextPage)
        }

packages/koharu/components/editor/CanvasWorkspace.tsx:161

• When showCanvasPage succeeds, the canvas changes immediately but projectKey and pageKey remain on the previous page until the delayed IPC request resolves. During that interval overlays and inspector commands are backed by the wrong page. Mirror PageRail.tsx:135-143: read the prepared page and optimistically update both query entries before starting synchronization.

      if (activated) {
        requestAnimationFrame(() => window.setTimeout(synchronize, 0))
      } else {
        synchronize()

• Files reviewed: 3/4 changed files
• Comments generated: 3
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.