feat: add search bar in header, hide connector on mobile, add back button to settings page

Author: danielroe

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 => {

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>

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"

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",

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",

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",

i18n/locales/zh-CN.json

@@ -40,7 +40,8 @@
   "nav": {
     "popular_packages": "热门软件包",
     "search": "搜索",
-    "settings": "设置"
+    "settings": "设置",
+    "back": "返回"
   },
   "settings": {
     "relative_dates": "相对时间",