Copy page

Frontend

Command Palette

Command Palette

Relevant source files

The following files were used as context for generating this wiki page:

• src/lib/components/CommandPalette.svelte
• src/lib/components/ui/button/button.svelte
• src/lib/components/ui/input/input-chrome.ts
• src/lib/components/ui/input/input.svelte
• src/lib/components/ui/kbd/index.ts
• src/lib/components/ui/kbd/kbd.svelte
• src/lib/components/ui/sidebar/sidebar-inset.svelte
• src/lib/components/ui/sidebar/sidebar-provider.svelte

The Command Palette is a central navigation and utility interface that provides quick access to application modules, settings, and tools via a keyboard-driven search interface. It is implemented in CommandPalette.svelte and integrates with the global application shell to provide a consistent shortcut-first experience.

Technical Overview

The component uses bits-ui for the underlying accessible command menu primitives src/lib/components/CommandPalette.svelte:4-4. It functions as a detached panel: while the search input remains part of the top bar layout, the results list overlays the page content using absolute positioning and a high z-index src/lib/components/CommandPalette.svelte:185-192.

Data Flow and Activation

The palette is activated via global keyboard listeners or direct interaction with the input field.

Activation Method	Logic / Trigger
Shortcut (Cmd/Ctrl + K)	Toggles the open state src/lib/components/CommandPalette.svelte:55-59.
Shortcut (Alt + )	Toggles open if the focus is not in an editable field src/lib/components/CommandPalette.svelte:61-73.
Direct Input	Typing in the input field automatically sets open = true src/lib/components/CommandPalette.svelte:175-177.
Pointer Interaction	Clicking the input field sets open = true src/lib/components/CommandPalette.svelte:178-180.

Component Logic Bridge

The following diagram maps user interactions and OS-level detection to the internal state management of the component.

Diagram: Activation and OS Logic

Code
graph TD
    subgraph "Natural Language Space"
        "User presses Ctrl+K"
        "User types in search"
        "User clicks outside"
        "Mac vs Windows UI"
    end

    subgraph "Code Entity Space [src/lib/components/CommandPalette.svelte]"
        "onGlobalKeydown"["onGlobalKeydown()"]
        "isAppleOs"["isAppleOs()"]
        "onDocPointerDown"["onDocPointerDown()"]
        "openState"["$state open"]
        "syncOverflow"["syncCommandListOverflow()"]
    end

    "User presses Ctrl+K" --> "onGlobalKeydown"
    "User types in search" --> "openState"
    "User clicks outside" --> "onDocPointerDown"
    "Mac vs Windows UI" --> "isAppleOs"
    
    "onGlobalKeydown" -- "sets" --> "openState"
    "onDocPointerDown" -- "closes" --> "openState"
    "openState" -- "triggers effect" --> "syncOverflow"

Sources: src/lib/components/CommandPalette.svelte:34-116

Search Interface & Commands

The interface is divided into the persistent Search Input and the Command List.

Search Input

The input field mimics the styling of standard UI inputs via inputControlHoverClasses src/lib/components/ui/input/input-chrome.ts:5-6. It includes visual indicators for the current platform's shortcuts using the Kbd component src/lib/components/CommandPalette.svelte:151-160.

Available Commands

Commands are grouped into logical sections within the Command.List.

Group	Commands	Target / Action
Suggestions	Calendar, Calculator	Utility tools src/lib/components/CommandPalette.svelte:206-225
Settings	Profile, Billing, Settings	User/System configuration src/lib/components/CommandPalette.svelte:227-248
Theme	Light, Dark, System	UI Appearance src/lib/components/CommandPalette.svelte:250-264

Implementation Details

Scroll and Overflow Management

Because the palette uses a custom detached panel, it must manually manage scroll behavior to avoid double scrollbars or clipped content. The syncCommandListOverflow function calculates if the scrollHeight exceeds the clientHeight (plus a 2px tolerance) to toggle overflow-y between auto and hidden src/lib/components/CommandPalette.svelte:26-32. This is handled reactively via a ResizeObserver src/lib/components/CommandPalette.svelte:99-102.

Keyboard Shortcut Display (Kbd Component)

The Kbd component src/lib/components/ui/kbd/kbd.svelte:1-35 is used extensively within the palette to show keybindings. It supports three sizes:

• key: Standard single character keys (e.g., "K") src/lib/components/ui/kbd/kbd.svelte:8-8.
• modifier: Longer text for keys like "Ctrl" or "Shift" src/lib/components/ui/kbd/kbd.svelte:9-9.
• icon: Used for glyphs like the Command symbol (⌘) src/lib/components/ui/kbd/kbd.svelte:10-10.

Diagram: UI Component Hierarchy

Code
graph BT
    subgraph "Internal Components"
        K["Kbd.svelte"]
        CI["Command.Input (bits-ui)"]
        CL["Command.List (bits-ui)"]
    end

    subgraph "CommandPalette.svelte [src/lib/components/CommandPalette.svelte]"
        R["Command.Root"]
        W["svelte:window (Global Listeners)"]
    end

    K --> R
    CI --> R
    CL --> R
    W -- "Triggers" --> R

Sources: src/lib/components/CommandPalette.svelte:122-201, src/lib/components/ui/kbd/kbd.svelte:1-35

Integration with Shell

The CommandPalette is designed to be placed within the AppTopbar or a similar global header. It maintains its own focus management; when opened, it automatically focuses the input field using a Svelte $effect and tick() to ensure the DOM is ready src/lib/components/CommandPalette.svelte:76-80.

Sources:

• src/lib/components/CommandPalette.svelte
• src/lib/components/ui/kbd/kbd.svelte
• src/lib/components/ui/input/input-chrome.ts

---