feat: header search bar + settings back button + hide connector (npmx-dev#251)

danielroe · fatfingers23 · commit bfb7af26a597 · 2026-01-28T20:06:59.000-06:00
diff --git 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
@@ -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
@@ -54,28 +72,28 @@ 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="/"
+      <!-- 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"
+            method="GET"
+            action="/search"
+            class="relative"
+            @submit.prevent="handleSearchInput"
           >
-            {{ $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>
+            <label for="header-search" class="sr-only">
+              {{ $t('search.label') }}
+            </label>
 
-        <!-- Packages dropdown (when connected) -->
-        <li v-if="isConnected && npmUser" class="flex items-center">
-          <HeaderPackagesDropdown :username="npmUser" />
-        </li>
+            <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>
 
         <!-- Orgs dropdown (when connected) -->
         <li v-if="isConnected && npmUser" class="flex items-center">
@@ -99,11 +117,31 @@ onKeyStroke('.', e => {
         </li>
       </ul>
 
+        <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') }}
@@ -115,19 +153,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/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">
diff --git 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
@@ -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 }">
diff --git 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,13 +8,27 @@ const availableLocales = computed(() =>
   locales.value.map(l => (typeof l === 'string' ? { code: l, name: l } : l)),
 )
 
+function goBack() {
+  router.back()
+}
+
 useSeoMeta({
   title: 'Settings - npmx',
 })
 </script>
 
 <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
@@ -41,7 +41,8 @@
     "popular_packages": "Popular packages",
     "blog": "blog",
     "search": "search",
-    "settings": "settings"
+    "settings": "settings",
+    "back": "Back"
   },
   "blog": {
     "title": "Blog",
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
@@ -41,7 +41,8 @@
     "popular_packages": "Paquets populaires",
     "blog": "blog",
     "search": "recherche",
-    "settings": "paramètres"
+    "settings": "paramètres",
+    "back": "Retour"
   },
   "blog": {
     "title": "Blog",
diff --git a/i18n/locales/it.json b/i18n/locales/it.json
@@ -34,7 +34,8 @@
     "popular_packages": "Pacchetti popolari",
     "blog": "blog",
     "search": "cerca",
-    "settings": "impostazioni"
+    "settings": "impostazioni",
+    "back": "Indietro"
   },
   "blog": {
     "title": "Blog",
diff --git 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": "相对时间",
