feat(settings): add category sidebar with fuzzy search to settings pages

Merged
GN
4mo ago
+1780-904

Summary

Both settings surfaces (AppPreferences.tsx and ProjectSettings.tsx) rendered as a single long, vertically-stacked column. With large space-y-12 gaps and a two-column-per-section layout, the page grew very tall — the Keyboard Shortcuts section alone renders ~30 ShortcutRecorder rows, pushing everything below it far down. That meant heavy scrolling, high mouse travel to reach late sections (Updates/Reset), and no way to find a specific setting without visually scanning.

This PR redesigns both pages with a left sidebar of setting categories plus a fuzzy search box, extracted into a shared SettingsLayout so both pages stay consistent.

Related Issue

Closes #249

Type of Change

  • feat: new feature

What Changed

  • New SettingsLayout + SettingsSection (src/renderer/components/settings/SettingsLayout.tsx): left sidebar listing categories with the active one highlighted (aria-current), a fuzzy search input, and a scroll-spy content area. Clicking a category or a search result scrolls the matching section into view; an IntersectionObserver keeps the active category in sync while scrolling (programmatic scrolls briefly suppress it so the highlight follows the click target). Categories are keyboard-navigable (arrow keys + focus ring) and the search field is labeled.
  • New settings-search matcher (src/renderer/lib/settings-search.ts): a dependency-free fuzzy subsequence matcher with proximity/word-boundary scoring. Kept runtime-neutral so it unit-tests cleanly under Vitest + jsdom rather than coupling to cmdk's React primitives. Powers a flat { categoryId, label, description, keywords } index so a query like "font" surfaces Font Family/Font Size.
  • AppPreferences.tsx: 9 categories + search index; each section wrapped in SettingsSection.
  • ProjectSettings.tsx: 5 categories + search index; sections wrapped. The save bar and unsaved-changes guard stay outside the layout and are unchanged, so that behavior is preserved.
  • Compact layout + scrollable AI Agents: tightened section spacing (p-8→p-6, space-y-12→space-y-8, pb-8→pb-6, space-y-6→space-y-4) and constrained the AI Agents list to a max-h-80 overflow-y-auto area so it scrolls internally instead of stretching the page.

Design note: content remains a single scrollable column with scroll-spy navigation (rather than show-one-at-a-time) specifically so ProjectSettings' save bar and unsaved-changes flow, which span all sections, keep working without rework.

How It Was Tested

  • bun run ci (Biome lint + format + imports, strict mode)
  • bun run typecheck
  • bun run test
  • cargo clippy --all-targets -- -D warnings (in src-tauri) — not applicable, renderer-only change
  • cargo test (in src-tauri) — not applicable, renderer-only change
  • Manual verification completed

Added 23 unit tests: settings-search.test.ts (14) covers scoring, keyword matching, sorting, and empty queries; SettingsLayout.test.tsx (9) covers rendering, active state, click-to-scroll, search filtering/keywords, empty state, and clear. Full suite: 1719 passing. Production frontend build (vite build --config vite.config.tauri.ts) succeeds.

Screenshots or Recordings

image image image

CI & Review Gate

  • All CI checks pass (PR Validation, Rust Checks, Build Verification, Security Scans)
  • Code review comments from CodeRabbit / Claude have been addressed or resolved
  • No unresolved review findings remain

Checklist

  • My PR title follows the conventional commit format used by this repo
  • I linked the related issue or explained why none exists
  • I updated docs when needed — no user-facing docs require changes for this UI refactor
  • I added or updated tests when needed
  • I verified the change does not introduce unrelated modifications
  • I read AGENTS.md and followed the contributor guidelines
  • A human reviewed the complete diff before submission

Summary by CodeRabbit

Summary by CodeRabbit

  • New Features

    • Added searchable settings for both preferences and project settings.
    • Organized settings into categorized sections with sidebar navigation.
    • Added keyboard navigation for switching categories (Arrow keys).

  • Improvements

    • Enhanced fuzzy search quality using labels, descriptions, and keywords with ranked results.
    • Improved active-category tracking and smoother jump-to-section behavior.
    • Improved display of long agent lists with a constrained, scrollable layout.

  • Tests

    • Added coverage for fuzzy scoring/search and settings layout + scrolling behavior.