Merge branch 'main' into contrasty-switches

Author: jellydeck

app/components/OgImage/Package.vue

@@ -112,7 +112,7 @@ try {
         style="font-family: 'Geist Sans', sans-serif"
       >
         <span
-          class="px-3 py-1 mr-2 rounded-lg border font-bold opacity-90"
+          class="px-3 py-1 me-2 rounded-lg border font-bold opacity-90"
           :style="{
             color: primaryColor,
             backgroundColor: primaryColor + '10',

app/pages/index.vue

@@ -101,7 +101,7 @@ defineOgImageComponent('Default', {
                   class="absolute group inset-ie-2.5 px-2.5 sm:ps-4 sm:pe-4 py-2 font-mono text-sm text-bg bg-fg/90 rounded-md transition-[background-color,transform] duration-200 hover:bg-fg! group-focus-within:bg-fg/80 active:scale-95 focus-visible:outline-accent/70"
                 >
                   <span
-                    class="inline-block i-carbon:search align-middle w-4 h-4 sm:mr-2"
+                    class="inline-block i-carbon:search align-middle w-4 h-4 sm:me-2"
                     aria-hidden="true"
                   ></span>
                   <span class="sr-only sm:not-sr-only">

app/pages/search.vue

@@ -541,7 +541,59 @@ function focusElement(el: HTMLElement) {
   el.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
 }
 
+// Navigate to package page
+async function navigateToPackage(packageName: string) {
+  await navigateTo({
+    name: 'package',
+    params: { package: packageName.split('/') },
+  })
+}
+
+// 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') {
+    // Get value directly from input (not from route query, which may be debounced)
+    const inputValue = (document.activeElement as HTMLInputElement).value.trim()
+    if (!inputValue) return
+
+    // Check if first result matches the input value exactly
+    const firstResult = displayResults.value[0]
+    if (firstResult?.package.name === inputValue) {
+      pendingEnterQuery.value = null
+      return navigateToPackage(firstResult.package.name)
+    }
+
+    // No match yet - store input value, watcher will handle navigation when results arrive
+    pendingEnterQuery.value = inputValue
+    return
+  }
+
   if (totalSelectableCount.value <= 0) return
 
   const elements = getFocusableElements()

codecov.yml

@@ -1,5 +1,7 @@
 coverage:
   status:
+    changes:
+      informational: true
     project:
       default:
         informational: true

uno.config.ts

@@ -35,6 +35,7 @@ export default defineConfig({
   ].filter(Boolean),
   transformers: [transformerDirectives(), transformerVariantGroup()],
   theme: {
+    spacing: { DEFAULT: '4px' },
     font: {
       mono: "'Geist Mono', monospace",
       sans: "'Geist', system-ui, -apple-system, sans-serif",