From 0dc7220a819c147e0a4a95b89c28b7d6fe14a813 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 28 Jan 2026 21:03:23 +0000
Subject: [PATCH 1/5] feat: add search bar in header, hide connector on mobile,
 add back button to settings page

---
 app/app.vue                  |   2 +-
 app/components/AppHeader.vue | 116 ++++++++++++++++++++++-------------
 app/pages/settings.vue       |  15 +++++
 i18n/locales/en.json         |   3 +-
 i18n/locales/fr.json         |   3 +-
 i18n/locales/it.json         |   3 +-
 i18n/locales/zh-CN.json      |   3 +-
 7 files changed, 99 insertions(+), 46 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index b8582a1719..3a860a9c9b 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -7,7 +7,7 @@ const router = useRouter()
 // Initialize accent color before hydration to prevent flash
 initAccentOnPrehydrate()
 
-const isHomepage = computed(() => route.path === '/')
+const isHomepage = computed(() => route.name === 'index')
 
 useHead({
   titleTemplate: titleChunk => {
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 332cdda933..71c37345be 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -13,6 +13,24 @@ withDefaults(
 const { isConnected, npmUser } = useConnector()
 
 const router = useRouter()
+const route = useRoute()
+
+const searchQuery = ref('')
+const isSearchFocused = ref(false)
+
+const showSearchBar = computed(() => {
+  return route.name === 'search' || route.name === 'index'
+})
+
+async function handleSearchInput() {
+  const query = searchQuery.value.trim()
+  await router.push({
+    name: 'search',
+    query: query ? { q: query } : undefined,
+  })
+  searchQuery.value = ''
+}
+
 onKeyStroke(',', e => {
   // Don't trigger if user is typing in an input
   const target = e.target as HTMLElement
@@ -45,40 +63,66 @@ onKeyStroke(',', e => {
         <span v-else class="w-1" />
       </div>
 
-      <!-- Center: Main nav items -->
-      <ul class="flex-1 flex items-center justify-center gap-4 sm:gap-6 list-none m-0 p-0">
-        <li class="flex items-center">
-          <NuxtLink
-            to="/search"
-            class="link-subtle font-mono text-sm inline-flex items-center gap-2"
-            aria-keyshortcuts="/"
-          >
-            {{ $t('nav.search') }}
-            <kbd
-              class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
-              aria-hidden="true"
-            >
-              /
-            </kbd>
-          </NuxtLink>
-        </li>
-
-        <!-- Packages dropdown (when connected) -->
-        <li v-if="isConnected && npmUser" class="flex items-center">
-          <HeaderPackagesDropdown :username="npmUser" />
-        </li>
-
-        <!-- Orgs dropdown (when connected) -->
-        <li v-if="isConnected && npmUser" class="flex items-center">
-          <HeaderOrgsDropdown :username="npmUser" />
-        </li>
-      </ul>
+      <!-- Center: Search bar + nav items -->
+      <div class="flex-1 flex items-center justify-center gap-4 sm:gap-6">
+        <!-- Search bar (shown on all pages except home and search) -->
+        <search v-if="showSearchBar" class="hidden sm:block flex-1 max-w-md">
+          <form role="search" class="relative" @submit.prevent="handleSearchInput">
+            <label for="header-search" class="sr-only">
+              {{ $t('search.label') }}
+            </label>
+
+            <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
+              <div class="search-box relative flex items-center">
+                <span
+                  class="absolute left-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1"
+                >
+                  /
+                </span>
+
+                <input
+                  id="header-search"
+                  v-model="searchQuery"
+                  type="search"
+                  name="q"
+                  :placeholder="$t('search.placeholder')"
+                  v-bind="noCorrect"
+                  class="w-full bg-bg-subtle border border-border rounded-md pl-7 pr-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                  autocomplete="off"
+                  @input="handleSearchInput"
+                  @focus="isSearchFocused = true"
+                  @blur="isSearchFocused = false"
+                />
+              </div>
+            </div>
+          </form>
+        </search>
+
+        <ul class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0">
+          <!-- Packages dropdown (when connected) -->
+          <li v-if="isConnected && npmUser" class="flex items-center">
+            <HeaderPackagesDropdown :username="npmUser" />
+          </li>
+
+          <!-- Orgs dropdown (when connected) -->
+          <li v-if="isConnected && npmUser" class="flex items-center">
+            <HeaderOrgsDropdown :username="npmUser" />
+          </li>
+        </ul>
+      </div>
 
       <!-- Right: User status + GitHub -->
-      <div class="flex-shrink-0 flex items-center gap-6">
+      <div class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ml-auto sm:ml-0">
+        <NuxtLink
+          to="/about"
+          class="sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+        >
+          {{ $t('footer.about') }}
+        </NuxtLink>
+
         <NuxtLink
           to="/settings"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-2"
+          class="link-subtle font-mono text-sm inline-flex items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           aria-keyshortcuts=","
         >
           {{ $t('nav.settings') }}
@@ -90,19 +134,9 @@ onKeyStroke(',', e => {
           </kbd>
         </NuxtLink>
 
-        <div v-if="showConnector">
+        <div v-if="showConnector" class="hidden sm:block">
           <ConnectorStatus />
         </div>
-
-        <a
-          href="https://github.com/npmx-dev/npmx.dev"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="link-subtle"
-          :aria-label="$t('header.github')"
-        >
-          <span class="i-carbon-logo-github w-5 h-5" aria-hidden="true" />
-        </a>
       </div>
     </nav>
   </header>
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index c1aed8450a..3c801075ce 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const router = useRouter()
 const { settings } = useSettings()
 const { locale, locales, setLocale } = useI18n()
 const colorMode = useColorMode()
@@ -7,6 +8,10 @@ const availableLocales = computed(() =>
   locales.value.map(l => (typeof l === 'string' ? { code: l, name: l } : l)),
 )
 
+function goBack() {
+  router.back()
+}
+
 useSeoMeta({
   title: 'Settings - npmx',
 })
@@ -14,6 +19,16 @@ useSeoMeta({
 
 <template>
   <main class="container py-8 sm:py-12 w-full">
+    <!-- Back button -->
+    <button
+      type="button"
+      class="inline-flex items-center gap-2 mb-6 text-sm text-fg-muted hover:text-fg transition-colors duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+      @click="goBack"
+    >
+      <span class="i-carbon-arrow-left w-4 h-4" aria-hidden="true" />
+      {{ $t('nav.back') }}
+    </button>
+
     <div class="space-y-1 p-4 rounded-lg bg-bg-muted border border-border">
       <button
         type="button"
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 89ecd43a80..fb2bc773d3 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -40,7 +40,8 @@
   "nav": {
     "popular_packages": "Popular packages",
     "search": "search",
-    "settings": "settings"
+    "settings": "settings",
+    "back": "Back"
   },
   "settings": {
     "relative_dates": "Relative dates",
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
index f17514f63a..3652e57d44 100644
--- a/i18n/locales/fr.json
+++ b/i18n/locales/fr.json
@@ -40,7 +40,8 @@
   "nav": {
     "popular_packages": "Paquets populaires",
     "search": "recherche",
-    "settings": "paramètres"
+    "settings": "paramètres",
+    "back": "Retour"
   },
   "settings": {
     "relative_dates": "Dates relatives",
diff --git a/i18n/locales/it.json b/i18n/locales/it.json
index 2479b40fba..6f7ee8fc6f 100644
--- a/i18n/locales/it.json
+++ b/i18n/locales/it.json
@@ -33,7 +33,8 @@
   "nav": {
     "popular_packages": "Pacchetti popolari",
     "search": "cerca",
-    "settings": "impostazioni"
+    "settings": "impostazioni",
+    "back": "Indietro"
   },
   "settings": {
     "relative_dates": "Date relative",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index fb0b98ee1d..82bb17afb1 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -40,7 +40,8 @@
   "nav": {
     "popular_packages": "热门软件包",
     "search": "搜索",
-    "settings": "设置"
+    "settings": "设置",
+    "back": "返回"
   },
   "settings": {
     "relative_dates": "相对时间",

From 022c67e0418a611b088dd11586d849f033097359 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 28 Jan 2026 21:05:54 +0000
Subject: [PATCH 2/5] fix: add hidden search button

---
 app/components/AppHeader.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 71c37345be..842c112c46 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -93,6 +93,7 @@ onKeyStroke(',', e => {
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"
                 />
+                <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
               </div>
             </div>
           </form>

From c008b456fe8229d1a2ac9d9b43f7a4d9606b8efc Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 28 Jan 2026 21:09:39 +0000
Subject: [PATCH 3/5] chore: oops

---
 app/components/AppHeader.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 842c112c46..4b49624f78 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -19,7 +19,7 @@ const searchQuery = ref('')
 const isSearchFocused = ref(false)
 
 const showSearchBar = computed(() => {
-  return route.name === 'search' || route.name === 'index'
+  return route.name !== 'search' && route.name !== 'index'
 })
 
 async function handleSearchInput() {
@@ -67,7 +67,7 @@ onKeyStroke(',', e => {
       <div class="flex-1 flex items-center justify-center gap-4 sm:gap-6">
         <!-- Search bar (shown on all pages except home and search) -->
         <search v-if="showSearchBar" class="hidden sm:block flex-1 max-w-md">
-          <form role="search" class="relative" @submit.prevent="handleSearchInput">
+          <form role="search" method="GET" action="/search" class="relative">
             <label for="header-search" class="sr-only">
               {{ $t('search.label') }}
             </label>

From e0b85b578fe70418a0f29d1cccf2cef4caf036d2 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 28 Jan 2026 21:13:58 +0000
Subject: [PATCH 4/5] fix: make searches work without JS

---
 app/components/AppHeader.vue | 8 +++++++-
 app/pages/index.vue          | 8 +++++++-
 app/pages/search.vue         | 2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 4b49624f78..1a0800b563 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -67,7 +67,13 @@ onKeyStroke(',', e => {
       <div class="flex-1 flex items-center justify-center gap-4 sm:gap-6">
         <!-- Search bar (shown on all pages except home and search) -->
         <search v-if="showSearchBar" class="hidden sm:block flex-1 max-w-md">
-          <form role="search" method="GET" action="/search" class="relative">
+          <form
+            role="search"
+            method="GET"
+            action="/search"
+            class="relative"
+            @submit.prevent="handleSearchInput"
+          >
             <label for="header-search" class="sr-only">
               {{ $t('search.label') }}
             </label>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 1c70aab34a..cf820f3611 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -41,7 +41,13 @@ defineOgImageComponent('Default')
         class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
         style="animation-delay: 0.2s"
       >
-        <form role="search" class="relative" @submit.prevent="handleSearch">
+        <form
+          role="search"
+          method="GET"
+          action="/search"
+          class="relative"
+          @submit.prevent="handleSearch"
+        >
           <label for="home-search" class="sr-only">
             {{ $t('search.label') }}
           </label>
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 4249f82ec2..3c60f71f9a 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -706,7 +706,7 @@ defineOgImageComponent('Default', {
         <h1 class="font-mono text-xl sm:text-2xl font-medium mb-4">search</h1>
 
         <search>
-          <form role="search" class="relative" @submit.prevent>
+          <form role="search" method="GET" action="/search" class="relative" @submit.prevent>
             <label for="search-input" class="sr-only">{{ $t('search.label') }}</label>
 
             <div class="relative group" :class="{ 'is-focused': isSearchFocused }">

From b054c19f20f346c9cafb8492134714483fc2db5a Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 28 Jan 2026 21:26:19 +0000
Subject: [PATCH 5/5] fix: render static search list on ssr

---
 app/components/PackageList.vue | 72 ++++++++++++++++++++++------------
 1 file changed, 48 insertions(+), 24 deletions(-)

diff --git a/app/components/PackageList.vue b/app/components/PackageList.vue
index c697ba789d..4a5c221dd1 100644
--- a/app/components/PackageList.vue
+++ b/app/components/PackageList.vue
@@ -3,6 +3,9 @@ import type { NpmSearchResult } from '#shared/types'
 import type { WindowVirtualizerHandle } from '~/composables/useVirtualInfiniteScroll'
 import { WindowVirtualizer } from 'virtua/vue'
 
+/** Number of items to render statically during SSR */
+const SSR_COUNT = 20
+
 const props = defineProps<{
   /** List of search results to display */
   results: NpmSearchResult[]
@@ -96,31 +99,52 @@ defineExpose({
 
 <template>
   <div>
-    <WindowVirtualizer
-      ref="listRef"
-      :data="results"
-      :item-size="140"
-      as="ol"
-      item="li"
-      class="list-none m-0 p-0"
-      @scroll="handleScroll"
-    >
-      <template #default="{ item, index }">
-        <div class="pb-4">
-          <PackageCard
-            :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>
+    <!-- SSR: Render static list for first page, replaced by virtual list on client -->
+    <ClientOnly>
+      <WindowVirtualizer
+        ref="listRef"
+        :data="results"
+        :item-size="140"
+        as="ol"
+        item="li"
+        class="list-none m-0 p-0"
+        @scroll="handleScroll"
+      >
+        <template #default="{ item, index }">
+          <div class="pb-4">
+            <PackageCard
+              :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>
+      </WindowVirtualizer>
+
+      <!-- SSR fallback: static list of first page results -->
+      <template #fallback>
+        <ol class="list-none m-0 p-0">
+          <li v-for="(item, index) in results.slice(0, SSR_COUNT)" :key="item.package.name">
+            <div class="pb-4">
+              <PackageCard
+                :result="item"
+                :heading-level="headingLevel"
+                :show-publisher="showPublisher"
+                :selected="index === (selectedIndex ?? -1)"
+                :index="index"
+                :search-query="searchQuery"
+              />
+            </div>
+          </li>
+        </ol>
       </template>
-    </WindowVirtualizer>
+    </ClientOnly>
 
     <!-- Loading indicator -->
     <div v-if="isLoading" class="py-4 flex items-center justify-center">