perf: use focus to navigate search results (#587)

Author: danielroe

app/components/PackageCard.vue

@@ -7,7 +7,6 @@ const props = defineProps<{
   /** Whether to show the publisher username */
   showPublisher?: boolean
   prefetch?: boolean
-  selected?: boolean
   index?: number
   /** Search query for highlighting exact matches */
   searchQuery?: string
@@ -20,17 +19,12 @@ const isExactMatch = computed(() => {
   const name = props.result.package.name.toLowerCase()
   return query === name
 })
-
-const emit = defineEmits<{
-  focus: [index: number]
-}>()
 </script>
 
 <template>
   <article
-    class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
+    class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
     :class="{
-      'bg-bg-muted border-border-hover': selected,
       'border-accent/30 bg-accent/5': isExactMatch,
     }"
   >
@@ -50,8 +44,6 @@ const emit = defineEmits<{
           :prefetch-on="prefetch ? 'visibility' : 'interaction'"
           class="decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"
           :data-result-index="index"
-          @focus="index != null && emit('focus', index)"
-          @mouseenter="index != null && emit('focus', index)"
           >{{ result.package.name }}</NuxtLink
         >
         <span

app/components/PackageList.vue

@@ -29,8 +29,6 @@ const props = defineProps<{
   pageSize?: PageSize
   /** Initial page to scroll to (1-indexed) */
   initialPage?: number
-  /** Selected result index (for keyboard navigation) */
-  selectedIndex?: number
   /** Search query for highlighting exact matches */
   searchQuery?: string
   /** View mode: cards or table */
@@ -48,8 +46,6 @@ const emit = defineEmits<{
   'loadMore': []
   /** Emitted when the visible page changes */
   'pageChange': [page: number]
-  /** Emitted when a result is hovered/focused */
-  'select': [index: number]
   /** Emitted when sort option changes (table view) */
   'update:sortOption': [option: SortOption]
   /** Emitted when a keyword is clicked */
@@ -153,9 +149,7 @@ defineExpose({
         :results="displayedResults"
         :columns="columns"
         v-model:sort-option="sortOption"
-        :selected-index="selectedIndex"
         :is-loading="isLoading"
-        @select="emit('select', $event)"
         @click-keyword="emit('clickKeyword', $event)"
       />
     </template>
@@ -179,12 +173,10 @@ defineExpose({
                 :result="item as NpmSearchResult"
                 :heading-level="headingLevel"
                 :show-publisher="showPublisher"
-                :selected="index === (selectedIndex ?? -1)"
                 :index="index"
                 :search-query="searchQuery"
                 class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
                 :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
-                @focus="emit('select', $event)"
               />
             </div>
           </template>
@@ -199,7 +191,6 @@ defineExpose({
                   :result="item"
                   :heading-level="headingLevel"
                   :show-publisher="showPublisher"
-                  :selected="index === (selectedIndex ?? -1)"
                   :index="index"
                   :search-query="searchQuery"
                 />
@@ -230,12 +221,10 @@ defineExpose({
             :result="item"
             :heading-level="headingLevel"
             :show-publisher="showPublisher"
-            :selected="index === (selectedIndex ?? -1)"
             :index="index"
             :search-query="searchQuery"
             class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
             :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
-            @focus="emit('select', $event)"
           />
         </li>
       </ol>

app/components/PackageTable.vue

@@ -6,14 +6,12 @@ import { buildSortOption, parseSortOption, toggleDirection } from '#shared/types
 const props = defineProps<{
   results: NpmSearchResult[]
   columns: ColumnConfig[]
-  selectedIndex?: number
   isLoading?: boolean
 }>()
 
 const sortOption = defineModel<SortOption>('sortOption')
 
 const emit = defineEmits<{
-  select: [index: number]
   clickKeyword: [keyword: string]
 }>()
 
@@ -318,9 +316,7 @@ function getColumnLabelKey(id: ColumnId): string {
             :key="result.package.name"
             :result="result"
             :columns="columns"
-            :selected="selectedIndex === index"
             :index="index"
-            @focus="emit('select', index)"
             @click-keyword="emit('clickKeyword', $event)"
           />
         </template>

app/components/PackageTableRow.vue

@@ -5,12 +5,10 @@ import type { ColumnConfig } from '#shared/types/preferences'
 const props = defineProps<{
   result: NpmSearchResult
   columns: ColumnConfig[]
-  selected?: boolean
   index?: number
 }>()
 
 const emit = defineEmits<{
-  focus: []
   clickKeyword: [keyword: string]
 }>()
 
@@ -45,10 +43,9 @@ const allMaintainersText = computed(() => {
 
 <template>
   <tr
-    class="border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
-    :class="{ 'bg-bg-muted': selected }"
+    class="border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
     tabindex="0"
-    @focus="emit('focus')"
+    :data-result-index="index"
   >
     <!-- Name (always visible) -->
     <td class="py-2 px-3">

app/components/SearchSuggestionCard.vue

@@ -4,24 +4,17 @@ defineProps<{
   type: 'user' | 'org'
   /** The name (username or org name) */
   name: string
-  /** Whether this suggestion is currently selected (keyboard nav) */
-  selected?: boolean
   /** Whether this is an exact match for the query */
   isExactMatch?: boolean
   /** Index for keyboard navigation */
   index?: number
 }>()
-
-const emit = defineEmits<{
-  focus: [index: number]
-}>()
 </script>
 
 <template>
   <article
-    class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
+    class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
     :class="{
-      'bg-bg-muted border-border-hover': selected,
       'border-accent/30 bg-accent/5': isExactMatch,
     }"
   >
@@ -35,8 +28,6 @@ const emit = defineEmits<{
       :to="type === 'user' ? `/~${name}` : `/@${name}`"
       :data-suggestion-index="index"
       class="flex items-center gap-4 focus-visible:outline-none after:content-[''] after:absolute after:inset-0"
-      @focus="index != null && emit('focus', index)"
-      @mouseenter="index != null && emit('focus', index)"
     >
       <!-- Avatar placeholder -->
       <div