@startsimpli/ui 0.4.7 → 0.4.8

package/src/components/command-palette/CommandPalette.tsx

@@ -1,8 +1,12 @@
 'use client'
 
-import { useState, useEffect, useRef, useCallback } from 'react'
-import { Search, ArrowRight } from 'lucide-react'
+import { useState, useEffect, useRef, useMemo, useCallback, Fragment } from 'react'
+import { Search } from 'lucide-react'
 import { useCommandPalette } from './command-palette-context'
+import { useCommandPaletteSearch } from './useCommandPaletteSearch'
+import { CommandGroup } from './CommandGroup'
+import { CommandResultItem } from './CommandResultItem'
+import type { CommandItem } from './useCommandPaletteSearch'
 
 export interface SearchResult {
   id: string
@@ -38,6 +42,79 @@ export interface CommandPaletteProps {
   onNavigate: (path: string) => void
 }
 
+/**
+ * Convert the heterogeneous props into a unified CommandItem[] for the hook.
+ * Async search results are injected separately since they arrive after debounce.
+ */
+function buildCommands(
+  results: SearchResult[],
+  quickActions: QuickAction[],
+  navigationItems: NavigationItem[],
+  recentItems: SearchResult[],
+  hasQuery: boolean,
+  typeIcons: Record<string, React.ElementType>,
+  typeColors: Record<string, string>,
+): CommandItem[] {
+  const commands: CommandItem[] = []
+
+  // Search results (only when query is active - injected externally)
+  for (const r of results) {
+    commands.push({
+      id: r.id,
+      icon: typeIcons[r.type],
+      label: r.name,
+      detail: r.detail,
+      group: '__results__',
+      onSelect: r.path,
+      colorClass: typeColors[r.type] || 'bg-gray-100 text-gray-600',
+    })
+  }
+
+  // Quick actions (always shown)
+  for (const a of quickActions) {
+    commands.push({
+      id: a.id,
+      icon: a.icon,
+      label: a.name,
+      shortcut: a.shortcut,
+      group: 'Quick Actions',
+      onSelect: () => a.action(),
+      colorClass: 'bg-gray-100 text-gray-600',
+    })
+  }
+
+  // Recent items (only when no query)
+  if (!hasQuery) {
+    for (const r of recentItems.slice(0, 5)) {
+      commands.push({
+        id: r.id,
+        icon: typeIcons[r.type],
+        label: r.name,
+        detail: r.detail,
+        group: 'Recent',
+        onSelect: r.path,
+        colorClass: 'bg-gray-100 text-gray-600',
+      })
+    }
+  }
+
+  // Navigation items (only included when query is active - filtered by hook)
+  if (hasQuery) {
+    for (const n of navigationItems) {
+      commands.push({
+        id: n.id,
+        icon: n.icon,
+        label: n.name,
+        group: 'Go to',
+        onSelect: n.path,
+        colorClass: 'bg-gray-100 text-gray-600',
+      })
+    }
+  }
+
+  return commands
+}
+
 export function CommandPalette({
   searchFn,
   quickActions = [],
@@ -50,37 +127,67 @@ export function CommandPalette({
 }: CommandPaletteProps) {
   const { isOpen, close } = useCommandPalette()
   const inputRef = useRef<HTMLInputElement>(null)
-  const [query, setQuery] = useState('')
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const [results, setResults] = useState<SearchResult[]>([])
+  const [asyncResults, setAsyncResults] = useState<SearchResult[]>([])
   const [isLoading, setIsLoading] = useState(false)
+  // Track query locally so we can build commands with the right hasQuery flag
+  const [localQuery, setLocalQuery] = useState('')
+
+  const commands = useMemo(
+    () =>
+      buildCommands(
+        asyncResults,
+        quickActions,
+        navigationItems,
+        recentItems,
+        !!localQuery,
+        typeIcons,
+        typeColors,
+      ),
+    [asyncResults, quickActions, navigationItems, recentItems, localQuery, typeIcons, typeColors]
+  )
+
+  const handleExecute = useCallback(
+    (command: CommandItem) => {
+      if (typeof command.onSelect === 'string') {
+        onNavigate(command.onSelect)
+      } else {
+        command.onSelect()
+      }
+      close()
+    },
+    [onNavigate, close]
+  )
 
-  // Calculate all items for keyboard navigation
-  const filteredNav = query
-    ? navigationItems.filter(n => n.name.toLowerCase().includes(query.toLowerCase()))
-    : []
+  const {
+    query,
+    setQuery,
+    filteredGroups,
+    selectedIndex,
+    onKeyDown,
+  } = useCommandPaletteSearch({
+    commands,
+    onExecute: handleExecute,
+    isOpen,
+  })
 
-  const allItems = [
-    ...results.map(r => ({ ...r, itemType: 'result' as const })),
-    ...quickActions.map(a => ({ ...a, itemType: 'action' as const })),
-    ...(!query ? recentItems.slice(0, 5).map(r => ({ ...r, itemType: 'recent' as const })) : []),
-    ...filteredNav.map(n => ({ ...n, itemType: 'nav' as const })),
-  ]
+  // Sync local query with hook query
+  useEffect(() => {
+    setLocalQuery(query)
+  }, [query])
 
   // Focus input when opened
   useEffect(() => {
     if (isOpen) {
-      setQuery('')
-      setSelectedIndex(0)
-      setResults([])
+      setAsyncResults([])
+      setLocalQuery('')
       setTimeout(() => inputRef.current?.focus(), 0)
     }
   }, [isOpen])
 
-  // Search debounce
+  // Search debounce for async results
   useEffect(() => {
     if (!query.trim() || !searchFn) {
-      setResults([])
+      setAsyncResults([])
       return
     }
 
@@ -88,10 +195,10 @@ export function CommandPalette({
       setIsLoading(true)
       try {
         const data = await searchFn(query)
-        setResults(data)
+        setAsyncResults(data)
       } catch (error) {
         console.error('Search error:', error)
-        setResults([])
+        setAsyncResults([])
       } finally {
         setIsLoading(false)
       }
@@ -100,34 +207,10 @@ export function CommandPalette({
     return () => clearTimeout(timer)
   }, [query, searchFn])
 
-  // Keyboard navigation
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      setSelectedIndex(prev => Math.min(prev + 1, allItems.length - 1))
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      setSelectedIndex(prev => Math.max(prev - 1, 0))
-    } else if (e.key === 'Enter' && allItems[selectedIndex]) {
-      e.preventDefault()
-      const item = allItems[selectedIndex]
-      if (item.itemType === 'action') {
-        (item as unknown as QuickAction).action()
-      } else if ('path' in item) {
-        onNavigate(item.path)
-      }
-      close()
-    }
-  }, [allItems, selectedIndex, onNavigate, close])
-
-  // Reset selection when results change
-  useEffect(() => {
-    setSelectedIndex(0)
-  }, [results])
-
   if (!isOpen) return null
 
-  const DefaultIcon = Search
+  // Compute flat index offset for each group to match selectedIndex
+  let flatIndex = 0
 
   return (
     <div
@@ -143,7 +226,7 @@ export function CommandPalette({
         aria-modal="true"
         aria-label="Command palette"
         className="relative w-full max-w-xl bg-white rounded-xl shadow-2xl border border-gray-200 overflow-hidden"
-        onClick={e => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
       >
         {/* Search input */}
         <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-200">
@@ -152,8 +235,11 @@ export function CommandPalette({
             ref={inputRef}
             type="text"
             value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            onKeyDown={handleKeyDown}
+            onChange={(e) => {
+              setQuery(e.target.value)
+              setLocalQuery(e.target.value)
+            }}
+            onKeyDown={onKeyDown}
             placeholder={placeholder}
             className="flex-1 outline-none text-lg bg-transparent"
           />
@@ -162,44 +248,13 @@ export function CommandPalette({
 
         {/* Results */}
         <div role="listbox" aria-label="Search results" className="max-h-96 overflow-y-auto">
-          {/* Search Results */}
-          {query && results.length > 0 && (
-            <>
-              <div className="px-3 py-2">
-                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Results for &quot;{query}&quot;
-                </p>
-              </div>
-              {results.map((result, i) => {
-                const Icon = typeIcons[result.type] || DefaultIcon
-                const colorClass = typeColors[result.type] || 'bg-gray-100 text-gray-600'
-                const itemIndex = i
-
-                return (
-                  <div
-                    key={result.id}
-                    role="option"
-                    aria-selected={selectedIndex === itemIndex}
-                    className={`flex items-center gap-3 px-4 py-3 cursor-pointer ${
-                      selectedIndex === itemIndex ? 'bg-blue-50' : 'hover:bg-gray-50'
-                    }`}
-                    onClick={() => {
-                      onNavigate(result.path)
-                      close()
-                    }}
-                  >
-                    <div className={`w-8 h-8 rounded-full flex items-center justify-center ${colorClass}`}>
-                      <Icon className="w-4 h-4" />
-                    </div>
-                    <div className="flex-1">
-                      <p className="font-medium text-gray-900">{result.name}</p>
-                      <p className="text-sm text-gray-500">{result.detail}</p>
-                    </div>
-                    <ArrowRight className="w-4 h-4 text-gray-400" />
-                  </div>
-                )
-              })}
-            </>
+          {/* Search results group header with query text */}
+          {query && asyncResults.length > 0 && (
+            <div className="px-3 py-2">
+              <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Results for &quot;{query}&quot;
+              </p>
+            </div>
           )}
 
           {/* Loading state */}
@@ -210,123 +265,51 @@ export function CommandPalette({
           )}
 
           {/* No results */}
-          {query && !isLoading && results.length === 0 && (
+          {query && !isLoading && asyncResults.length === 0 && (
             <div className="px-4 py-3 text-gray-500 text-sm">
               No results found for &quot;{query}&quot;
             </div>
           )}
 
-          {/* Quick Actions */}
-          {quickActions.length > 0 && (
-            <>
-              <div className="px-3 py-2 border-t border-gray-100">
-                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Quick Actions
-                </p>
-              </div>
-              {quickActions.map((action, i) => {
-                const itemIndex = results.length + i
-                return (
-                  <div
-                    key={action.id}
-                    role="option"
-                    aria-selected={selectedIndex === itemIndex}
-                    className={`flex items-center gap-3 px-4 py-3 cursor-pointer ${
-                      selectedIndex === itemIndex ? 'bg-blue-50' : 'hover:bg-gray-50'
-                    }`}
-                    onClick={() => {
-                      action.action()
-                      close()
-                    }}
-                  >
-                    <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
-                      <action.icon className="w-4 h-4 text-gray-600" />
-                    </div>
-                    <p className="flex-1 font-medium text-gray-700">{action.name}</p>
-                    {action.shortcut && (
-                      <kbd className="px-2 py-1 bg-gray-100 text-gray-500 text-xs rounded font-mono">
-                        {action.shortcut}
-                      </kbd>
-                    )}
-                  </div>
-                )
-              })}
-            </>
-          )}
+          {filteredGroups.map((group, gi) => {
+            // Skip the __results__ group label -- we render a custom header above
+            const isResultsGroup = group.label === '__results__'
+            const showBorder = !isResultsGroup && gi > 0
 
-          {/* Recent Items (when no query) */}
-          {!query && recentItems.length > 0 && (
-            <>
-              <div className="px-3 py-2 border-t border-gray-100">
-                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Recent
-                </p>
-              </div>
-              {recentItems.slice(0, 5).map((item, i) => {
-                const Icon = typeIcons[item.type] || DefaultIcon
-                const itemIndex = results.length + quickActions.length + i
-
-                return (
-                  <div
-                    key={item.id}
-                    role="option"
-                    aria-selected={selectedIndex === itemIndex}
-                    className={`flex items-center gap-3 px-4 py-3 cursor-pointer ${
-                      selectedIndex === itemIndex ? 'bg-blue-50' : 'hover:bg-gray-50'
-                    }`}
-                    onClick={() => {
-                      onNavigate(item.path)
-                      close()
-                    }}
-                  >
-                    <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
-                      <Icon className="w-4 h-4 text-gray-600" />
-                    </div>
-                    <div className="flex-1">
-                      <p className="font-medium text-gray-700">{item.name}</p>
-                      <p className="text-sm text-gray-500">{item.detail}</p>
-                    </div>
-                    <ArrowRight className="w-4 h-4 text-gray-400" />
-                  </div>
-                )
-              })}
-            </>
-          )}
+            const groupStartIndex = flatIndex
 
-          {/* Filtered Navigation (when query matches) */}
-          {filteredNav.length > 0 && (
-            <>
-              <div className="px-3 py-2 border-t border-gray-100">
-                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Go to
-                </p>
-              </div>
-              {filteredNav.map((navItem, i) => {
-                const itemIndex = results.length + quickActions.length + i
-
-                return (
-                  <div
-                    key={navItem.id}
-                    role="option"
-                    aria-selected={selectedIndex === itemIndex}
-                    className={`flex items-center gap-3 px-4 py-3 cursor-pointer ${
-                      selectedIndex === itemIndex ? 'bg-blue-50' : 'hover:bg-gray-50'
-                    }`}
-                    onClick={() => {
-                      onNavigate(navItem.path)
-                      close()
-                    }}
-                  >
-                    <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
-                      <navItem.icon className="w-4 h-4 text-gray-600" />
-                    </div>
-                    <p className="flex-1 font-medium text-gray-700">{navItem.name}</p>
-                    <ArrowRight className="w-4 h-4 text-gray-400" />
-                  </div>
-                )
-              })}
-            </>
-          )}
+            const renderedItems = group.items.map((item, i) => {
+              const itemIndex = groupStartIndex + i
+              const showArrow = typeof item.onSelect === 'string'
+
+              return (
+                <CommandResultItem
+                  key={item.id}
+                  icon={item.icon}
+                  label={item.label}
+                  detail={item.detail}
+                  shortcut={item.shortcut}
+                  selected={selectedIndex === itemIndex}
+                  colorClass={item.colorClass}
+                  showArrow={showArrow}
+                  onClick={() => handleExecute(item)}
+                />
+              )
+            })
+
+            flatIndex += group.items.length
+
+            if (isResultsGroup) {
+              // Results rendered with custom header above
+              return <Fragment key={group.label}>{renderedItems}</Fragment>
+            }
+
+            return (
+              <CommandGroup key={group.label} label={group.label} showBorder={showBorder}>
+                {renderedItems}
+              </CommandGroup>
+            )
+          })}
         </div>
 
         {/* Footer */}
@@ -336,7 +319,7 @@ export function CommandPalette({
             <span><kbd className="px-1.5 py-0.5 bg-white border rounded">&crarr;</kbd> Select</span>
             <span><kbd className="px-1.5 py-0.5 bg-white border rounded">ESC</kbd> Close</span>
           </div>
-          <span>Press <kbd className="px-1.5 py-0.5 bg-white border rounded">&amp;#8984;K</kbd> anywhere</span>
+          <span>Press <kbd className="px-1.5 py-0.5 bg-white border rounded">&#8984;K</kbd> anywhere</span>
         </div>
       </div>
     </div>

package/src/components/command-palette/CommandResultItem.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import React from 'react'
+import { Search, ArrowRight } from 'lucide-react'
+
+export interface CommandResultItemProps {
+  icon?: React.ElementType
+  label: string
+  detail?: string
+  shortcut?: string
+  selected: boolean
+  /** Color class for icon container, e.g. 'bg-blue-100 text-blue-600' */
+  colorClass?: string
+  /** Whether to show a trailing arrow (for navigation items) */
+  showArrow?: boolean
+  onClick: () => void
+}
+
+export function CommandResultItem({
+  icon,
+  label,
+  detail,
+  shortcut,
+  selected,
+  colorClass = 'bg-gray-100 text-gray-600',
+  showArrow = false,
+  onClick,
+}: CommandResultItemProps) {
+  const Icon = icon || Search
+
+  return (
+    <div
+      role="option"
+      aria-selected={selected}
+      className={`flex items-center gap-3 px-4 py-3 cursor-pointer ${
+        selected ? 'bg-blue-50' : 'hover:bg-gray-50'
+      }`}
+      onClick={onClick}
+    >
+      <div
+        className={`w-8 h-8 rounded-full flex items-center justify-center ${colorClass}`}
+      >
+        <Icon className="w-4 h-4" />
+      </div>
+      <div className="flex-1">
+        <p className={detail ? 'font-medium text-gray-900' : 'font-medium text-gray-700'}>
+          {label}
+        </p>
+        {detail && <p className="text-sm text-gray-500">{detail}</p>}
+      </div>
+      {shortcut && (
+        <kbd className="px-2 py-1 bg-gray-100 text-gray-500 text-xs rounded font-mono">
+          {shortcut}
+        </kbd>
+      )}
+      {showArrow && <ArrowRight className="w-4 h-4 text-gray-400" />}
+    </div>
+  )
+}

package/src/components/command-palette/__tests__/CommandGroup.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react'
+import { CommandGroup } from '../CommandGroup'
+
+describe('CommandGroup', () => {
+  describe('label', () => {
+    it('renders the provided label text', () => {
+      render(<CommandGroup label="Navigation"><div /></CommandGroup>)
+      expect(screen.getByText('Navigation')).toBeInTheDocument()
+    })
+
+    it('renders label in uppercase via CSS class', () => {
+      render(<CommandGroup label="Actions"><div /></CommandGroup>)
+      const label = screen.getByText('Actions')
+      expect(label.className).toMatch(/uppercase/)
+    })
+
+    it('applies text-xs styling to the label', () => {
+      render(<CommandGroup label="Recent"><div /></CommandGroup>)
+      const label = screen.getByText('Recent')
+      expect(label.className).toMatch(/text-xs/)
+    })
+  })
+
+  describe('children', () => {
+    it('renders children inside the fragment', () => {
+      render(
+        <CommandGroup label="Navigation">
+          <div data-testid="child-item">Item A</div>
+        </CommandGroup>
+      )
+      expect(screen.getByTestId('child-item')).toBeInTheDocument()
+    })
+
+    it('renders multiple children', () => {
+      render(
+        <CommandGroup label="Navigation">
+          <div data-testid="item-1">One</div>
+          <div data-testid="item-2">Two</div>
+          <div data-testid="item-3">Three</div>
+        </CommandGroup>
+      )
+      expect(screen.getByTestId('item-1')).toBeInTheDocument()
+      expect(screen.getByTestId('item-2')).toBeInTheDocument()
+      expect(screen.getByTestId('item-3')).toBeInTheDocument()
+    })
+  })
+
+  describe('showBorder prop', () => {
+    it('does not add border class by default', () => {
+      const { container } = render(
+        <CommandGroup label="First"><div /></CommandGroup>
+      )
+      const header = container.querySelector('.px-3.py-2')
+      expect(header?.className).not.toMatch(/border-t/)
+    })
+
+    it('does not add border class when showBorder is false', () => {
+      const { container } = render(
+        <CommandGroup label="First" showBorder={false}><div /></CommandGroup>
+      )
+      const header = container.querySelector('.px-3.py-2')
+      expect(header?.className).not.toMatch(/border-t/)
+    })
+
+    it('adds border-t class when showBorder is true', () => {
+      const { container } = render(
+        <CommandGroup label="Second" showBorder><div /></CommandGroup>
+      )
+      const header = container.querySelector('.px-3.py-2')
+      expect(header?.className).toMatch(/border-t/)
+    })
+
+    it('adds border-gray-100 class when showBorder is true', () => {
+      const { container } = render(
+        <CommandGroup label="Second" showBorder><div /></CommandGroup>
+      )
+      const header = container.querySelector('.px-3.py-2')
+      expect(header?.className).toMatch(/border-gray-100/)
+    })
+  })
+})