Projects › BibleWeb › Navigation UX › Command palette (Ctrl+K)
Done

Command palette (Ctrl+K)

Area: Navigation UX

Context

Problem: Power users want a fast way to navigate anywhere in the app without clicking through menus. They're accustomed to command palettes in tools like VS Code, Notion, and Linear.

Solution: A global command palette triggered by Ctrl+K (or Cmd+K on Mac) that provides instant access to navigation, reader commands, and all 66 Bible books — all searchable by typing.

Not included: Actions that modify data (creating notes, bookmarks) or application settings. This is navigation-only.

Functional

A search-and-navigate overlay that appears when the user presses Ctrl+K from anywhere in the app.

User flow:

  1. User presses Ctrl+K (or Cmd+K) from any page
  2. Command palette appears as a centered modal with a search input
  3. Shows a list of ~76 commands: navigation links, reader commands, and all 66 books
  4. User types to filter — client-side substring matching on label + category
  5. Arrow up/down to navigate, Enter to execute, Escape to close
  6. Mouse hover also updates the selection

Command categories:

  • Navigation: Go to Main Menu, Open Search, Chapter Select, My Notes, Bookmarks, Ask AI, Theme Browser, Parables, Settings
  • Reader: various reader-specific commands
  • Books: all 66 Bible books (navigates to /read/[1-66]/1)

Edge cases:

  • Palette captures keyboard focus — typing goes to the filter input
  • Closing restores focus to where the user was before
  • String actions navigate via goto(path), function actions execute directly (e.g., open BookPicker)

UX & Design

Appearance:

  • Centered modal overlay with backdrop
  • Search input at top with magnifying glass icon and "Esc" hint
  • Command list below with category labels right-aligned (e.g., "Navigation", "Reader")
  • Selected item highlighted with accent background

Keyboard navigation:

  • Arrow up/down to move selection
  • Enter to execute selected command
  • Escape to close
  • Typing filters the list

Technical

Component: CommandPalette.svelte at apps/web/src/lib/components/layout/CommandPalette.svelte

Trigger: Global svelte:window onkeydown listener in (app)/+layout.svelte — checks for Ctrl+K / Cmd+K.

Commands: Static array of ~76 commands, each with label, action (string URL or function), and category. Includes 66 book entries generated from bible constants.

Filter: Client-side substring match on label and category.

Execution: String actions → goto(path), function actions → called directly.

Files:

  • apps/web/src/lib/components/layout/CommandPalette.svelte — component
  • apps/web/src/routes/(app)/+layout.svelte — keyboard listener mount

Status

Current: DONE Milestone: Foundation (pre-v1) Priority: Medium — power-user feature, improves navigation speed

History:

  • BibleGame had a command palette (CommandPalette.cs) with similar functionality
  • Web version preserves the same keyboard-first navigation philosophy

Dependencies:

  • Requires: SvelteKit routing (DONE), bible constants (DONE)
← Back to Navigation UX features