feat: CommandPalette composite with search, filtering, keyboard navigation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
@@ -0,0 +1,304 @@
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(26, 22, 18, 0.55);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 12vh;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
width: 640px;
|
||||
max-width: 96vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 70vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Search area */
|
||||
.searchArea {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.searchIcon {
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
/* Scope filter tags */
|
||||
.scopeTag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
background: var(--amber-bg);
|
||||
border: 1px solid var(--amber-light);
|
||||
border-radius: 4px;
|
||||
padding: 1px 6px;
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.scopeField {
|
||||
color: var(--amber-deep);
|
||||
font-weight: 600;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.scopeValue {
|
||||
color: var(--amber);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.scopeRemove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--amber);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.scopeRemove:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Category tabs */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
flex-shrink: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
transition: color 0.12s, border-color 0.12s;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.tabActive {
|
||||
color: var(--amber);
|
||||
border-bottom-color: var(--amber);
|
||||
}
|
||||
|
||||
.tabCount {
|
||||
background: var(--bg-inset);
|
||||
border-radius: 10px;
|
||||
padding: 0 6px;
|
||||
font-size: 10px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.tabActive .tabCount {
|
||||
background: var(--amber-bg);
|
||||
color: var(--amber-deep);
|
||||
}
|
||||
|
||||
/* Results */
|
||||
.results {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.group {
|
||||
/* group container */
|
||||
}
|
||||
|
||||
.groupHeader {
|
||||
padding: 8px 16px 4px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--bg-surface);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Result item */
|
||||
.item {
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
transition: background 0.08s;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item:hover,
|
||||
.focused {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.itemMain {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.itemIcon {
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
margin-top: 1px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.itemContent {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.itemTop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.itemTitle {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.itemBadges {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
padding: 1px 7px;
|
||||
border-radius: 10px;
|
||||
font-size: 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 600;
|
||||
background: var(--bg-inset);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.itemTime {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-faint);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.itemMeta {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.expandBtn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
flex-shrink: 0;
|
||||
transition: color 0.1s, background 0.1s;
|
||||
}
|
||||
|
||||
.expandBtn:hover {
|
||||
background: var(--bg-inset);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.expanded {
|
||||
margin-top: 8px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Match highlight */
|
||||
.mark {
|
||||
background: none;
|
||||
color: var(--amber);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Shortcuts bar */
|
||||
.shortcutsBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 8px 16px;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
flex-shrink: 0;
|
||||
background: var(--bg-raised);
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { CommandPalette } from './CommandPalette'
|
||||
import type { SearchResult } from './types'
|
||||
|
||||
const mockData: SearchResult[] = [
|
||||
{
|
||||
id: '1',
|
||||
category: 'execution',
|
||||
title: 'order-intake execution',
|
||||
meta: 'cmr-1234 · 142ms',
|
||||
timestamp: '2s ago',
|
||||
badges: [{ label: 'Completed' }],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
category: 'route',
|
||||
title: 'content-based-routing',
|
||||
meta: 'Route · 3 processors',
|
||||
timestamp: '1m ago',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
category: 'agent',
|
||||
title: 'agent-eu-west-1',
|
||||
meta: 'v2.4.1 · live',
|
||||
expandedContent: '{"status": "live"}',
|
||||
},
|
||||
]
|
||||
|
||||
describe('CommandPalette', () => {
|
||||
it('renders nothing when closed', () => {
|
||||
render(
|
||||
<CommandPalette
|
||||
open={false}
|
||||
onClose={() => {}}
|
||||
onSelect={() => {}}
|
||||
data={mockData}
|
||||
/>,
|
||||
)
|
||||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders dialog when open', () => {
|
||||
render(
|
||||
<CommandPalette
|
||||
open={true}
|
||||
onClose={() => {}}
|
||||
onSelect={() => {}}
|
||||
data={mockData}
|
||||
/>,
|
||||
)
|
||||
expect(screen.getByRole('dialog')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows all results when open with no query', () => {
|
||||
render(
|
||||
<CommandPalette
|
||||
open={true}
|
||||
onClose={() => {}}
|
||||
onSelect={() => {}}
|
||||
data={mockData}
|
||||
/>,
|
||||
)
|
||||
expect(screen.getByText('order-intake execution')).toBeInTheDocument()
|
||||
expect(screen.getByText('content-based-routing')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('filters results by search query', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(
|
||||
<CommandPalette
|
||||
open={true}
|
||||
onClose={() => {}}
|
||||
onSelect={() => {}}
|
||||
data={mockData}
|
||||
/>,
|
||||
)
|
||||
await user.type(screen.getByRole('textbox', { name: 'Search' }), 'routing')
|
||||
// The title is split into fragments by mark highlight, so use a partial text match
|
||||
expect(screen.getByText(/content-based/)).toBeInTheDocument()
|
||||
expect(screen.queryByText('order-intake execution')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('calls onClose when Escape is pressed', async () => {
|
||||
const onClose = vi.fn()
|
||||
const user = userEvent.setup()
|
||||
render(
|
||||
<CommandPalette
|
||||
open={true}
|
||||
onClose={onClose}
|
||||
onSelect={() => {}}
|
||||
data={mockData}
|
||||
/>,
|
||||
)
|
||||
const input = screen.getByRole('textbox', { name: 'Search' })
|
||||
await user.click(input)
|
||||
await user.keyboard('{Escape}')
|
||||
expect(onClose).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('calls onClose when overlay is clicked', async () => {
|
||||
const onClose = vi.fn()
|
||||
const user = userEvent.setup()
|
||||
render(
|
||||
<CommandPalette
|
||||
open={true}
|
||||
onClose={onClose}
|
||||
onSelect={() => {}}
|
||||
data={mockData}
|
||||
/>,
|
||||
)
|
||||
await user.click(screen.getByTestId('command-palette-overlay'))
|
||||
expect(onClose).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('calls onSelect when a result is clicked', async () => {
|
||||
const onSelect = vi.fn()
|
||||
const onClose = vi.fn()
|
||||
const user = userEvent.setup()
|
||||
render(
|
||||
<CommandPalette
|
||||
open={true}
|
||||
onClose={onClose}
|
||||
onSelect={onSelect}
|
||||
data={mockData}
|
||||
/>,
|
||||
)
|
||||
await user.click(screen.getByText('content-based-routing'))
|
||||
expect(onSelect).toHaveBeenCalledWith(mockData[1])
|
||||
})
|
||||
|
||||
it('filters by category tab', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(
|
||||
<CommandPalette
|
||||
open={true}
|
||||
onClose={() => {}}
|
||||
onSelect={() => {}}
|
||||
data={mockData}
|
||||
/>,
|
||||
)
|
||||
await user.click(screen.getByRole('tab', { name: /Routes/i }))
|
||||
expect(screen.getByText('content-based-routing')).toBeInTheDocument()
|
||||
expect(screen.queryByText('order-intake execution')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows category tabs with counts', () => {
|
||||
render(
|
||||
<CommandPalette
|
||||
open={true}
|
||||
onClose={() => {}}
|
||||
onSelect={() => {}}
|
||||
data={mockData}
|
||||
/>,
|
||||
)
|
||||
// All tab should show total count
|
||||
expect(screen.getByRole('tab', { name: /All/i })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('navigates with arrow keys', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(
|
||||
<CommandPalette
|
||||
open={true}
|
||||
onClose={() => {}}
|
||||
onSelect={() => {}}
|
||||
data={mockData}
|
||||
/>,
|
||||
)
|
||||
const input = screen.getByRole('textbox', { name: 'Search' })
|
||||
await user.click(input)
|
||||
await user.keyboard('{ArrowDown}')
|
||||
// Second item gets focused
|
||||
const items = screen.getAllByRole('option')
|
||||
expect(items[1]).toHaveClass('focused')
|
||||
})
|
||||
|
||||
it('selects focused item on Enter', async () => {
|
||||
const onSelect = vi.fn()
|
||||
const onClose = vi.fn()
|
||||
const user = userEvent.setup()
|
||||
render(
|
||||
<CommandPalette
|
||||
open={true}
|
||||
onClose={onClose}
|
||||
onSelect={onSelect}
|
||||
data={mockData}
|
||||
/>,
|
||||
)
|
||||
const input = screen.getByRole('textbox', { name: 'Search' })
|
||||
await user.click(input)
|
||||
await user.keyboard('{Enter}')
|
||||
expect(onSelect).toHaveBeenCalledWith(mockData[0])
|
||||
})
|
||||
|
||||
it('shows expandable detail toggle for items with expandedContent', () => {
|
||||
render(
|
||||
<CommandPalette
|
||||
open={true}
|
||||
onClose={() => {}}
|
||||
onSelect={() => {}}
|
||||
data={mockData}
|
||||
/>,
|
||||
)
|
||||
expect(screen.getByRole('button', { name: 'Toggle detail' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('expands detail when expand button is clicked', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(
|
||||
<CommandPalette
|
||||
open={true}
|
||||
onClose={() => {}}
|
||||
onSelect={() => {}}
|
||||
data={mockData}
|
||||
/>,
|
||||
)
|
||||
const expandBtn = screen.getByRole('button', { name: 'Toggle detail' })
|
||||
await user.click(expandBtn)
|
||||
expect(expandBtn).toHaveAttribute('aria-expanded', 'true')
|
||||
})
|
||||
})
|
||||
359
src/design-system/composites/CommandPalette/CommandPalette.tsx
Normal file
359
src/design-system/composites/CommandPalette/CommandPalette.tsx
Normal file
@@ -0,0 +1,359 @@
|
||||
import { useState, useEffect, useRef, useMemo, type ReactNode } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import styles from './CommandPalette.module.css'
|
||||
import { SectionHeader } from '../../primitives/SectionHeader/SectionHeader'
|
||||
import { CodeBlock } from '../../primitives/CodeBlock/CodeBlock'
|
||||
import { KeyboardHint } from '../../primitives/KeyboardHint/KeyboardHint'
|
||||
import type { SearchResult, SearchCategory, ScopeFilter } from './types'
|
||||
|
||||
interface CommandPaletteProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
onSelect: (result: SearchResult) => void
|
||||
data: SearchResult[]
|
||||
onOpen?: () => void
|
||||
}
|
||||
|
||||
const CATEGORY_LABELS: Record<SearchCategory | 'all', string> = {
|
||||
all: 'All',
|
||||
execution: 'Executions',
|
||||
route: 'Routes',
|
||||
exchange: 'Exchanges',
|
||||
agent: 'Agents',
|
||||
}
|
||||
|
||||
const ALL_CATEGORIES: Array<SearchCategory | 'all'> = [
|
||||
'all',
|
||||
'execution',
|
||||
'route',
|
||||
'exchange',
|
||||
'agent',
|
||||
]
|
||||
|
||||
function highlightText(text: string, query: string, matchRanges?: [number, number][]): ReactNode {
|
||||
if (!query && (!matchRanges || matchRanges.length === 0)) return text
|
||||
|
||||
// Use matchRanges if provided, otherwise compute from query
|
||||
let ranges: [number, number][] = matchRanges ?? []
|
||||
if (!matchRanges && query) {
|
||||
const lowerText = text.toLowerCase()
|
||||
const lowerQuery = query.toLowerCase()
|
||||
let idx = 0
|
||||
while (idx < text.length) {
|
||||
const found = lowerText.indexOf(lowerQuery, idx)
|
||||
if (found === -1) break
|
||||
ranges.push([found, found + lowerQuery.length])
|
||||
idx = found + lowerQuery.length
|
||||
}
|
||||
}
|
||||
|
||||
if (ranges.length === 0) return text
|
||||
|
||||
const parts: ReactNode[] = []
|
||||
let last = 0
|
||||
for (const [start, end] of ranges) {
|
||||
if (start > last) parts.push(text.slice(last, start))
|
||||
parts.push(<mark key={start} className={styles.mark}>{text.slice(start, end)}</mark>)
|
||||
last = end
|
||||
}
|
||||
if (last < text.length) parts.push(text.slice(last))
|
||||
return <>{parts}</>
|
||||
}
|
||||
|
||||
export function CommandPalette({ open, onClose, onSelect, data, onOpen }: CommandPaletteProps) {
|
||||
const [query, setQuery] = useState('')
|
||||
const [activeCategory, setActiveCategory] = useState<SearchCategory | 'all'>('all')
|
||||
const [scopeFilters, setScopeFilters] = useState<ScopeFilter[]>([])
|
||||
const [focusedIdx, setFocusedIdx] = useState(0)
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null)
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
const listRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// Register global Ctrl+K / Cmd+K
|
||||
useEffect(() => {
|
||||
function handleKeyDown(e: KeyboardEvent) {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault()
|
||||
onOpen?.()
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}, [onOpen])
|
||||
|
||||
// Focus input when opened
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setTimeout(() => inputRef.current?.focus(), 10)
|
||||
setQuery('')
|
||||
setFocusedIdx(0)
|
||||
setExpandedId(null)
|
||||
}
|
||||
}, [open])
|
||||
|
||||
// Filter results
|
||||
const filtered = useMemo(() => {
|
||||
let results = data
|
||||
|
||||
if (activeCategory !== 'all') {
|
||||
results = results.filter((r) => r.category === activeCategory)
|
||||
}
|
||||
|
||||
if (query.trim()) {
|
||||
const q = query.toLowerCase()
|
||||
results = results.filter(
|
||||
(r) => r.title.toLowerCase().includes(q) || r.meta.toLowerCase().includes(q),
|
||||
)
|
||||
}
|
||||
|
||||
// Apply scope filters
|
||||
for (const sf of scopeFilters) {
|
||||
results = results.filter((r) =>
|
||||
r.category === sf.field || r.title.toLowerCase().includes(sf.value.toLowerCase()),
|
||||
)
|
||||
}
|
||||
|
||||
return results
|
||||
}, [data, query, activeCategory, scopeFilters])
|
||||
|
||||
// Group results by category
|
||||
const grouped = useMemo(() => {
|
||||
const map = new Map<SearchCategory, SearchResult[]>()
|
||||
for (const r of filtered) {
|
||||
if (!map.has(r.category)) map.set(r.category, [])
|
||||
map.get(r.category)!.push(r)
|
||||
}
|
||||
return map
|
||||
}, [filtered])
|
||||
|
||||
// Flatten for keyboard nav
|
||||
const flatResults = useMemo(() => filtered, [filtered])
|
||||
|
||||
// Counts per category
|
||||
const categoryCounts = useMemo(() => {
|
||||
const counts: Record<string, number> = { all: data.length }
|
||||
for (const r of data) {
|
||||
counts[r.category] = (counts[r.category] ?? 0) + 1
|
||||
}
|
||||
return counts
|
||||
}, [data])
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent) {
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
onClose()
|
||||
break
|
||||
case 'ArrowDown':
|
||||
e.preventDefault()
|
||||
setFocusedIdx((i) => Math.min(i + 1, flatResults.length - 1))
|
||||
break
|
||||
case 'ArrowUp':
|
||||
e.preventDefault()
|
||||
setFocusedIdx((i) => Math.max(i - 1, 0))
|
||||
break
|
||||
case 'Enter':
|
||||
e.preventDefault()
|
||||
if (flatResults[focusedIdx]) {
|
||||
onSelect(flatResults[focusedIdx])
|
||||
onClose()
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll focused item into view
|
||||
useEffect(() => {
|
||||
const el = listRef.current?.querySelector(`[data-idx="${focusedIdx}"]`) as HTMLElement | null
|
||||
el?.scrollIntoView({ block: 'nearest' })
|
||||
}, [focusedIdx])
|
||||
|
||||
function removeScopeFilter(idx: number) {
|
||||
setScopeFilters((prev) => prev.filter((_, i) => i !== idx))
|
||||
}
|
||||
|
||||
if (!open) return null
|
||||
|
||||
return createPortal(
|
||||
<div className={styles.overlay} onClick={onClose} data-testid="command-palette-overlay">
|
||||
<div
|
||||
className={styles.panel}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onKeyDown={handleKeyDown}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Command palette"
|
||||
>
|
||||
{/* Search input area */}
|
||||
<div className={styles.searchArea}>
|
||||
<span className={styles.searchIcon} aria-hidden="true">⌕</span>
|
||||
{scopeFilters.map((sf, i) => (
|
||||
<span key={i} className={styles.scopeTag}>
|
||||
<span className={styles.scopeField}>{sf.field}:</span>
|
||||
<span className={styles.scopeValue}>{sf.value}</span>
|
||||
<button
|
||||
className={styles.scopeRemove}
|
||||
onClick={() => removeScopeFilter(i)}
|
||||
aria-label={`Remove filter ${sf.field}:${sf.value}`}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
className={styles.input}
|
||||
placeholder="Search executions, routes, exchanges, agents…"
|
||||
value={query}
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value)
|
||||
setFocusedIdx(0)
|
||||
}}
|
||||
aria-label="Search"
|
||||
/>
|
||||
<KeyboardHint keys="Esc" />
|
||||
</div>
|
||||
|
||||
{/* Category tabs */}
|
||||
<div className={styles.tabs} role="tablist">
|
||||
{ALL_CATEGORIES.map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
role="tab"
|
||||
aria-selected={activeCategory === cat}
|
||||
className={[
|
||||
styles.tab,
|
||||
activeCategory === cat ? styles.tabActive : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
onClick={() => {
|
||||
setActiveCategory(cat)
|
||||
setFocusedIdx(0)
|
||||
}}
|
||||
>
|
||||
{CATEGORY_LABELS[cat]}
|
||||
{categoryCounts[cat] != null && (
|
||||
<span className={styles.tabCount}>{categoryCounts[cat]}</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div
|
||||
className={styles.results}
|
||||
ref={listRef}
|
||||
role="listbox"
|
||||
aria-label="Search results"
|
||||
>
|
||||
{filtered.length === 0 ? (
|
||||
<div className={styles.empty}>No results for "{query}"</div>
|
||||
) : (
|
||||
Array.from(grouped.entries()).map(([category, items]) => (
|
||||
<div key={category} className={styles.group}>
|
||||
<div className={styles.groupHeader}>
|
||||
<SectionHeader>{CATEGORY_LABELS[category]}</SectionHeader>
|
||||
</div>
|
||||
{items.map((result) => {
|
||||
const flatIdx = flatResults.indexOf(result)
|
||||
const isFocused = flatIdx === focusedIdx
|
||||
const isExpanded = expandedId === result.id
|
||||
|
||||
return (
|
||||
<div
|
||||
key={result.id}
|
||||
data-idx={flatIdx}
|
||||
className={[
|
||||
styles.item,
|
||||
isFocused ? styles.focused : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
role="option"
|
||||
aria-selected={isFocused}
|
||||
onClick={() => {
|
||||
onSelect(result)
|
||||
onClose()
|
||||
}}
|
||||
onMouseEnter={() => setFocusedIdx(flatIdx)}
|
||||
>
|
||||
<div className={styles.itemMain}>
|
||||
{result.icon && (
|
||||
<span className={styles.itemIcon}>{result.icon}</span>
|
||||
)}
|
||||
<div className={styles.itemContent}>
|
||||
<div className={styles.itemTop}>
|
||||
<span className={styles.itemTitle}>
|
||||
{highlightText(result.title, query, result.matchRanges)}
|
||||
</span>
|
||||
<div className={styles.itemBadges}>
|
||||
{result.badges?.map((b, bi) => (
|
||||
<span key={bi} className={styles.badge}>
|
||||
{b.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{result.timestamp && (
|
||||
<span className={styles.itemTime}>{result.timestamp}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.itemMeta}>
|
||||
{highlightText(result.meta, query)}
|
||||
</div>
|
||||
</div>
|
||||
{result.expandedContent && (
|
||||
<button
|
||||
className={styles.expandBtn}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setExpandedId((prev) => (prev === result.id ? null : result.id))
|
||||
}}
|
||||
aria-expanded={isExpanded}
|
||||
aria-label="Toggle detail"
|
||||
>
|
||||
{isExpanded ? '▲' : '▼'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{isExpanded && result.expandedContent && (
|
||||
<div className={styles.expanded} onClick={(e) => e.stopPropagation()}>
|
||||
<CodeBlock
|
||||
content={result.expandedContent}
|
||||
language="json"
|
||||
copyable
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Shortcuts bar */}
|
||||
<div className={styles.shortcutsBar}>
|
||||
<div className={styles.shortcut}>
|
||||
<KeyboardHint keys="↑↓" />
|
||||
<span>Navigate</span>
|
||||
</div>
|
||||
<div className={styles.shortcut}>
|
||||
<KeyboardHint keys="Enter" />
|
||||
<span>Open</span>
|
||||
</div>
|
||||
<div className={styles.shortcut}>
|
||||
<KeyboardHint keys="Esc" />
|
||||
<span>Close</span>
|
||||
</div>
|
||||
<div className={styles.shortcut}>
|
||||
<KeyboardHint keys="Tab" />
|
||||
<span>Filter</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
20
src/design-system/composites/CommandPalette/types.ts
Normal file
20
src/design-system/composites/CommandPalette/types.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
export type SearchCategory = 'execution' | 'route' | 'exchange' | 'agent'
|
||||
|
||||
export interface SearchResult {
|
||||
id: string
|
||||
category: SearchCategory
|
||||
title: string
|
||||
badges?: { label: string; color?: string }[]
|
||||
meta: string
|
||||
timestamp?: string
|
||||
icon?: ReactNode
|
||||
expandedContent?: string
|
||||
matchRanges?: [number, number][]
|
||||
}
|
||||
|
||||
export interface ScopeFilter {
|
||||
field: string
|
||||
value: string
|
||||
}
|
||||
Reference in New Issue
Block a user