feat: add user, orgs, and packages to nav

app/components/AppHeader.vue

@@ -9,23 +9,29 @@ withDefaults(
     showConnector: true,
   },
 )
+
+const { isConnected, npmUser } = useConnector()
 </script>
 
 <template>
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
-    <nav aria-label="Main navigation" class="container h-14 flex items-center justify-between">
-      <NuxtLink
-        v-if="showLogo"
-        to="/"
-        aria-label="npmx home"
-        class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
-      >
-        <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
-      </NuxtLink>
-      <!-- Spacer when logo is hidden -->
-      <span v-else class="w-1" />
+    <nav aria-label="Main navigation" class="container h-14 flex items-center">
+      <!-- Left: Logo -->
+      <div class="flex-shrink-0">
+        <NuxtLink
+          v-if="showLogo"
+          to="/"
+          aria-label="npmx home"
+          class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
+        >
+          <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
+        </NuxtLink>
+        <!-- Spacer when logo is hidden -->
+        <span v-else class="w-1" />
+      </div>
 
-      <ul class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0">
+      <!-- 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"
@@ -41,26 +47,38 @@ withDefaults(
             </kbd>
           </NuxtLink>
         </li>
-        <li class="flex items-center">
-          <ClientOnly>
-            <SettingsMenu />
-          </ClientOnly>
-        </li>
-        <li v-if="showConnector" class="flex items-center">
-          <ConnectorStatus />
+
+        <!-- Packages dropdown (when connected) -->
+        <li v-if="isConnected && npmUser" class="flex items-center">
+          <HeaderPackagesDropdown :username="npmUser" />
         </li>
-        <li v-else class="flex items-center">
-          <a
-            href="https://github.com/npmx-dev/npmx.dev"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-            aria-label="GitHub"
-          >
-            <span class="i-carbon-logo-github w-4 h-4" aria-hidden="true" />
-            <span class="hidden sm:inline" aria-hidden="true">github</span>
-          </a>
+
+        <!-- Orgs dropdown (when connected) -->
+        <li v-if="isConnected && npmUser" class="flex items-center">
+          <HeaderOrgsDropdown :username="npmUser" />
         </li>
       </ul>
+
+      <!-- Right: User status + GitHub -->
+      <div class="flex-shrink-0 flex items-center gap-6">
+        <ClientOnly>
+          <SettingsMenu />
+        </ClientOnly>
+
+        <div v-if="showConnector">
+          <ConnectorStatus />
+        </div>
+
+        <a
+          href="https://github.com/npmx-dev/npmx.dev"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="link-subtle"
+          aria-label="GitHub repository"
+        >
+          <span class="i-carbon-logo-github w-5 h-5" aria-hidden="true" />
+        </a>
+      </div>
     </nav>
   </header>
 </template>

app/components/ConnectorStatus.client.vue

@@ -12,9 +12,8 @@ const {
 const showModal = shallowRef(false)
 const showTooltip = shallowRef(false)
 
-const statusText = computed(() => {
+const tooltipText = computed(() => {
   if (isConnecting.value) return 'connecting…'
-  if (isConnected.value && npmUser.value) return `connected as @${npmUser.value}`
   if (isConnected.value) return 'connected'
   return 'connect local CLI'
 })
@@ -37,7 +36,16 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <div class="relative">
+  <div class="relative flex items-center gap-2">
+    <!-- Username link (when connected) -->
+    <NuxtLink
+      v-if="isConnected && npmUser"
+      :to="`/~${npmUser}`"
+      class="link-subtle font-mono text-sm hidden sm:inline"
+    >
+      @{{ npmUser }}
+    </NuxtLink>
+
     <button
       type="button"
       class="relative flex items-center justify-center w-8 h-8 rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
@@ -53,6 +61,8 @@ const ariaLabel = computed(() => {
         v-if="isConnected && avatar"
         :src="avatar"
         :alt="`${npmUser}'s avatar`"
+        width="24"
+        height="24"
         class="w-6 h-6 rounded-full"
       />
       <!-- Status dot (when not connected or no avatar) -->
@@ -85,7 +95,7 @@ const ariaLabel = computed(() => {
         role="tooltip"
         class="absolute right-0 top-full mt-2 px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-50"
       >
-        {{ statusText }}
+        {{ tooltipText }}
       </div>
     </Transition>
 

app/components/HeaderOrgsDropdown.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+const props = defineProps<{
+  username: string
+}>()
+
+const { listUserOrgs } = useConnector()
+
+const isOpen = ref(false)
+const isLoading = ref(false)
+const orgs = ref<string[]>([])
+const hasLoaded = ref(false)
+const error = ref<string | null>(null)
+
+async function loadOrgs() {
+  if (hasLoaded.value || isLoading.value) return
+
+  isLoading.value = true
+  error.value = null
+  try {
+    const orgList = await listUserOrgs()
+    if (orgList) {
+      // Already sorted alphabetically by server, take top 10
+      orgs.value = orgList.slice(0, 10)
+    } else {
+      error.value = 'Failed to load organizations'
+    }
+    hasLoaded.value = true
+  } catch {
+    error.value = 'Failed to load organizations'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function handleMouseEnter() {
+  isOpen.value = true
+  if (!hasLoaded.value) {
+    loadOrgs()
+  }
+}
+
+function handleMouseLeave() {
+  isOpen.value = false
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isOpen.value) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <div
+    class="relative"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @keydown="handleKeydown"
+  >
+    <NuxtLink
+      :to="`/~${username}/orgs`"
+      class="link-subtle font-mono text-sm inline-flex items-center gap-1"
+    >
+      orgs
+      <span
+        class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
+        :class="{ 'rotate-180': isOpen }"
+        aria-hidden="true"
+      />
+    </NuxtLink>
+
+    <Transition
+      enter-active-class="transition-all duration-150"
+      leave-active-class="transition-all duration-100"
+      enter-from-class="opacity-0 translate-y-1"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div v-if="isOpen" class="absolute right-0 top-full pt-2 w-56 z-50">
+        <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
+          <div class="px-3 py-2 border-b border-border">
+            <span class="font-mono text-xs text-fg-subtle">Your Organizations</span>
+          </div>
+
+          <div v-if="isLoading" class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">Loading…</span>
+          </div>
+
+          <div v-else-if="error" class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">{{ error }}</span>
+          </div>
+
+          <ul v-else-if="orgs.length > 0" class="py-1 max-h-80 overflow-y-auto">
+            <li v-for="org in orgs" :key="org">
+              <NuxtLink
+                :to="`/@${org}`"
+                class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors"
+              >
+                @{{ org }}
+              </NuxtLink>
+            </li>
+          </ul>
+
+          <div v-else class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">No organizations found</span>
+          </div>
+
+          <div class="px-3 py-2 border-t border-border">
+            <NuxtLink
+              :to="`/~${username}/orgs`"
+              class="link-subtle font-mono text-xs inline-flex items-center gap-1"
+            >
+              View all
+              <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>

app/components/HeaderPackagesDropdown.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+const props = defineProps<{
+  username: string
+}>()
+
+const { listUserPackages } = useConnector()
+
+const isOpen = ref(false)
+const isLoading = ref(false)
+const packages = ref<string[]>([])
+const hasLoaded = ref(false)
+const error = ref<string | null>(null)
+
+async function loadPackages() {
+  if (hasLoaded.value || isLoading.value) return
+
+  isLoading.value = true
+  error.value = null
+  try {
+    const pkgMap = await listUserPackages()
+    if (pkgMap) {
+      // Sort alphabetically and take top 10
+      packages.value = Object.keys(pkgMap).sort().slice(0, 10)
+    } else {
+      error.value = 'Failed to load packages'
+    }
+    hasLoaded.value = true
+  } catch {
+    error.value = 'Failed to load packages'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function handleMouseEnter() {
+  isOpen.value = true
+  if (!hasLoaded.value) {
+    loadPackages()
+  }
+}
+
+function handleMouseLeave() {
+  isOpen.value = false
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isOpen.value) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <div
+    class="relative"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @keydown="handleKeydown"
+  >
+    <NuxtLink
+      :to="`/~${username}`"
+      class="link-subtle font-mono text-sm inline-flex items-center gap-1"
+    >
+      packages
+      <span
+        class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
+        :class="{ 'rotate-180': isOpen }"
+        aria-hidden="true"
+      />
+    </NuxtLink>
+
+    <Transition
+      enter-active-class="transition-all duration-150"
+      leave-active-class="transition-all duration-100"
+      enter-from-class="opacity-0 translate-y-1"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div v-if="isOpen" class="absolute right-0 top-full pt-2 w-64 z-50">
+        <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
+          <div class="px-3 py-2 border-b border-border">
+            <span class="font-mono text-xs text-fg-subtle">Your Packages</span>
+          </div>
+
+          <div v-if="isLoading" class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">Loading…</span>
+          </div>
+
+          <div v-else-if="error" class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">{{ error }}</span>
+          </div>
+
+          <ul v-else-if="packages.length > 0" class="py-1 max-h-80 overflow-y-auto">
+            <li v-for="pkg in packages" :key="pkg">
+              <NuxtLink
+                :to="`/${pkg}`"
+                class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors truncate"
+              >
+                {{ pkg }}
+              </NuxtLink>
+            </li>
+          </ul>
+
+          <div v-else class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">No packages found</span>
+          </div>
+
+          <div class="px-3 py-2 border-t border-border">
+            <NuxtLink
+              :to="`/~${username}`"
+              class="link-subtle font-mono text-xs inline-flex items-center gap-1"
+            >
+              View all
+              <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>