Highlight first settings search result

Author: Whiteknight07

src/components/preferences/PreferencesDialog.test.tsx

@@ -102,7 +102,7 @@ describe('PreferencesDialog', () => {
 
     const dialog = screen.getByRole('dialog')
     const desktopHeaderActions = dialog.querySelector<HTMLElement>(
-      'div[class~=\"ml-auto\"][class~=\"md:flex\"]'
+      'div[class~="ml-auto"][class~="md:flex"]'
     )
 
     if (!desktopHeaderActions) {
@@ -133,7 +133,7 @@ describe('PreferencesDialog', () => {
       const dialog = screen.getByRole('dialog')
       const mobileSearchInput =
         dialog.querySelector<HTMLInputElement>(
-          'div.md\\:hidden input[placeholder=\"Search settings...\"]'
+          'div.md\\:hidden input[placeholder="Search settings..."]'
         )
 
       if (!mobileSearchInput) {
@@ -152,4 +152,30 @@ describe('PreferencesDialog', () => {
       window.dispatchEvent(new Event('resize'))
     }
   })
+
+  it('highlights the first desktop search result after typing', async () => {
+    const user = userEvent.setup()
+
+    render(<PreferencesDialog />)
+
+    const dialog = screen.getByRole('dialog')
+    const desktopHeaderActions = dialog.querySelector<HTMLElement>(
+      'div[class~="ml-auto"][class~="md:flex"]'
+    )
+
+    if (!desktopHeaderActions) {
+      throw new Error('Expected desktop header actions to be rendered')
+    }
+
+    const desktopSearchInput =
+      within(desktopHeaderActions).getByPlaceholderText('Search settings...')
+    await user.type(desktopSearchInput, 'provider')
+
+    await waitFor(() => {
+      const searchItems =
+        desktopHeaderActions.querySelectorAll<HTMLElement>('[cmdk-item]')
+      expect(searchItems.length).toBeGreaterThan(0)
+      expect(searchItems[0]).toHaveAttribute('aria-selected', 'true')
+    })
+  })
 })

src/components/preferences/PreferencesDialog.tsx

@@ -213,6 +213,7 @@ export function PreferencesDialog() {
   const [activePane, setActivePane] = useState<PreferencePane>('general')
   const [searchValue, setSearchValue] = useState('')
   const [searchOpen, setSearchOpen] = useState(false)
+  const [searchSelection, setSearchSelection] = useState('')
   const [pendingJump, setPendingJump] = useState<PreferenceSearchEntry | null>(
     null
   )
@@ -237,10 +238,19 @@ export function PreferencesDialog() {
     [searchResults]
   )
   const isSearching = searchValue.trim().length > 0
+  const effectiveSearchSelection =
+    searchOpen &&
+    isSearching &&
+    searchResults.some(result => result.id === searchSelection)
+      ? searchSelection
+      : searchOpen && isSearching
+        ? (searchResults[0]?.id ?? '')
+        : ''
 
   const resetSearch = useCallback((options?: { blurActive?: boolean }) => {
     setSearchValue('')
     setSearchOpen(false)
+    setSearchSelection('')
     if (options?.blurActive && document.activeElement instanceof HTMLElement) {
       document.activeElement.blur()
     }
@@ -473,6 +483,8 @@ export function PreferencesDialog() {
                     className="relative shrink-0"
                   >
                     <Command
+                      value={effectiveSearchSelection}
+                      onValueChange={setSearchSelection}
                       shouldFilter={false}
                       className="bg-transparent overflow-visible h-auto w-auto"
                     >
@@ -561,6 +573,8 @@ export function PreferencesDialog() {
                 className="relative md:hidden"
               >
                 <Command
+                  value={effectiveSearchSelection}
+                  onValueChange={setSearchSelection}
                   shouldFilter={false}
                   className="bg-transparent overflow-visible"
                 >