fix: add error handling to dropdowns

Author: danielroe

app/components/HeaderOrgsDropdown.vue

@@ -9,18 +9,24 @@ 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
   }
@@ -80,6 +86,10 @@ function handleKeydown(event: KeyboardEvent) {
           <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

app/components/HeaderPackagesDropdown.vue

@@ -9,18 +9,24 @@ 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
   }
@@ -80,6 +86,10 @@ function handleKeydown(event: KeyboardEvent) {
           <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