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"
@@ -85,7 +93,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,110 @@
+<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)
+
+async function loadOrgs() {
+  if (hasLoaded.value || isLoading.value) return
+
+  isLoading.value = true
+  try {
+    const orgList = await listUserOrgs()
+    if (orgList) {
+      // Already sorted alphabetically by server, take top 10
+      orgs.value = orgList.slice(0, 10)
+    }
+    hasLoaded.value = true
+  } 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 }"
+      />
+    </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 mt-2 w-56 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 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>
+
+        <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" />
+          </NuxtLink>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>

app/components/HeaderPackagesDropdown.vue

@@ -0,0 +1,110 @@
+<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)
+
+async function loadPackages() {
+  if (hasLoaded.value || isLoading.value) return
+
+  isLoading.value = true
+  try {
+    const pkgMap = await listUserPackages()
+    if (pkgMap) {
+      // Sort alphabetically and take top 10
+      packages.value = Object.keys(pkgMap).sort().slice(0, 10)
+    }
+    hasLoaded.value = true
+  } 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 }"
+      />
+    </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 mt-2 w-64 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 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>
+
+        <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" />
+          </NuxtLink>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>

app/composables/useConnector.ts

@@ -350,6 +350,19 @@ export const useConnector = createSharedComposable(function useConnector() {
     return response?.success ? (response.data ?? null) : null
   }
 
+  async function listUserPackages(): Promise<Record<string, 'read-write' | 'read-only'> | null> {
+    const response =
+      await connectorFetch<ApiResponse<Record<string, 'read-write' | 'read-only'>>>(
+        '/user/packages',
+      )
+    return response?.success ? (response.data ?? null) : null
+  }
+
+  async function listUserOrgs(): Promise<string[] | null> {
+    const response = await connectorFetch<ApiResponse<string[]>>('/user/orgs')
+    return response?.success ? (response.data ?? null) : null
+  }
+
   // Computed helpers for operations
   const pendingOperations = computed(() =>
     state.value.operations.filter(op => op.status === 'pending'),
@@ -427,6 +440,8 @@ export const useConnector = createSharedComposable(function useConnector() {
     listOrgTeams,
     listTeamUsers,
     listPackageCollaborators,
+    listUserPackages,
+    listUserOrgs,
   }
 })