Command palette category tabs

Area: Navigation UX

Context

Problem: The command palette shows all ~76 commands in a flat list. As more commands are added, finding the right one requires more typing. Users who know they want a navigation command shouldn't have to scroll past reader commands.

Solution: Add a tab bar above the command list (All / Navigation / Reader / Global / Books) to filter commands by category. Tab key cycles between tabs.

Not included: User-customizable categories or pinned/favorite commands.

Functional

Expected user flow:

User opens command palette (Ctrl+K)
Sees tab bar: All | Navigation | Reader | Global | Books
"All" is selected by default (current behavior)
Clicks or Tab-cycles to a category → list filters to only those commands
Typing still filters within the active category

Edge cases:

Empty category after filtering → show "No commands found"
Tab key cycles tabs (not focus), Shift+Tab cycles backwards
Search query persists across tab switches

UX & Design

Tab bar: Horizontal tabs above the command list, below the search input. Same style as commentary tabs. Active tab underlined.

Reference: BibleGame CommandPalette.cs had category tabs.

Technical

Implementation:

Add activeCategory state to CommandPalette.svelte
Filter commands by category before rendering
Add Tab key handler to cycle activeCategory
Data already has category field on each command

Files:

apps/web/src/lib/components/layout/CommandPalette.svelte (modify)

Status

Current: PLANNED Milestone: Foundation Priority: Low — current flat list works, this is a polish feature

Dependencies:

Requires: command palette (DONE)

← Back to Navigation UX features