refactor: search happens on enter

Author: MatteoGabriele

app/assets/main.css

@@ -280,11 +280,6 @@ p > span > code,
   border: 1px solid var(--border);
 }
 
-/* View transition for search box (includes / and input) */
-.search-box {
-  view-transition-name: search-box;
-}
-
 /* Safari search input fixes */
 input[type='search'] {
   -webkit-appearance: none;
@@ -313,13 +308,6 @@ input[type='search']::-webkit-search-results-decoration {
   animation: none;
 }
 
-/* Customize the view transition animations for specific elements */
-::view-transition-old(search-box),
-::view-transition-new(search-box) {
-  animation-duration: 0.3s;
-  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
-}
-
 /* Locking the scroll whenever any of the modals are open */
 html:has(dialog:modal) {
   overflow: hidden;

app/components/Header/SearchBox.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { debounce } from 'perfect-debounce'
 import { normalizeSearchParam } from '#shared/utils/url'
 
 withDefaults(
@@ -22,12 +21,14 @@ const showSearchBar = computed(() => {
 
 // Local input value (updates immediately as user types)
 const searchQuery = shallowRef('')
+onMounted(() => {
+  searchQuery.value = normalizeSearchParam(route.query.q)
+})
 
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
 
-// Debounced URL update for search query
-const updateUrlQuery = debounce((value: string) => {
+const updateUrlQuery = (value: string) => {
   // Don't navigate away from pages that use ?q for local filtering
   if (pagesWithLocalFilter.has(route.name as string)) {
     return
@@ -46,28 +47,7 @@ const updateUrlQuery = debounce((value: string) => {
       q: value,
     },
   })
-}, 250)
-
-// Sync input with URL when navigating (e.g., back button)
-watch(
-  () => route.query.q,
-  urlQuery => {
-    // Don't sync from pages that use ?q for local filtering
-    if (pagesWithLocalFilter.has(route.name as string)) {
-      return
-    }
-    const value = normalizeSearchParam(urlQuery)
-    if (searchQuery.value !== value) {
-      searchQuery.value = value
-    }
-  },
-  { immediate: true },
-)
-
-// Watch input and debounce URL updates
-watch(searchQuery, value => {
-  updateUrlQuery(value)
-})
+}
 
 function handleSearchBlur() {
   emit('blur')
@@ -76,6 +56,8 @@ function handleSearchFocus() {
   emit('focus')
 }
 
+const inputRef = useTemplateRef('inputRef')
+
 function handleSubmit() {
   if (pagesWithLocalFilter.has(route.name as string)) {
     router.push({
@@ -85,12 +67,13 @@ function handleSubmit() {
       },
     })
   } else {
-    updateUrlQuery.flush()
+    updateUrlQuery(searchQuery.value)
   }
+
+  inputRef.value?.focus()
 }
 
 // Expose focus method for parent components
-const inputRef = useTemplateRef('inputRef')
 function focus() {
   inputRef.value?.focus()
 }
@@ -103,8 +86,10 @@ defineExpose({ focus })
         {{ $t('search.label') }}
       </label>
 
-      <div class="relative group">
-        <div class="search-box relative flex items-center">
+      <div
+        class="relative group bg-bg-subtle border border-border rounded-md transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus-within:border-accent focus-visible:(outline-2 outline-accent/70)"
+      >
+        <div class="flex items-center">
           <span
             class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
           >
@@ -119,11 +104,15 @@ defineExpose({ focus })
             name="q"
             :placeholder="$t('search.placeholder')"
             v-bind="noCorrect"
-            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+            class="w-full ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle outline-none"
             @focus="handleSearchFocus"
             @blur="handleSearchBlur"
           />
-          <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
+
+          <button type="submit" class="flex items-center justify-center p-2">
+            <span class="sr-only">{{ $t('search.button') }}</span>
+            <span class="i-carbon-search w-4 h-4" aria-hidden="true" />
+          </button>
         </div>
       </div>
     </form>

app/pages/index.vue

@@ -69,7 +69,7 @@ defineOgImageComponent('Default', {
                 class="absolute -inset-px rounded-lg bg-gradient-to-r from-fg/0 via-fg/5 to-fg/0 opacity-0 transition-opacity duration-500 blur-sm group-[.is-focused]:opacity-100"
               />
 
-              <div class="search-box relative flex items-center">
+              <div class="relative flex items-center">
                 <span
                   class="absolute inset-is-4 text-fg-subtle font-mono text-lg pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
                 >

app/pages/search.vue

@@ -540,29 +540,6 @@ async function navigateToPackage(packageName: string) {
 // Track the input value when user pressed Enter (for navigating when results arrive)
 const pendingEnterQuery = shallowRef<string | null>(null)
 
-// Watch for results to navigate when Enter was pressed before results arrived
-watch(displayResults, results => {
-  if (!pendingEnterQuery.value) return
-
-  // Check if input is still focused (user hasn't started navigating or clicked elsewhere)
-  if (document.activeElement?.tagName !== 'INPUT') {
-    pendingEnterQuery.value = null
-    return
-  }
-
-  // Navigate if first result matches the query that was entered
-  const firstResult = results[0]
-  // eslint-disable-next-line no-console
-  console.log('[search] watcher fired', {
-    pending: pendingEnterQuery.value,
-    firstResult: firstResult?.package.name,
-  })
-  if (firstResult?.package.name === pendingEnterQuery.value) {
-    pendingEnterQuery.value = null
-    navigateToPackage(firstResult.package.name)
-  }
-})
-
 function handleResultsKeydown(e: KeyboardEvent) {
   // If the active element is an input, navigate to exact match or wait for results
   if (e.key === 'Enter' && document.activeElement?.tagName === 'INPUT') {