From da51b4cf89791432b12a2d21c0ade4983c15aa4c Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Thu, 12 Feb 2026 21:24:35 +0100
Subject: [PATCH 1/4] refactor: simplify account menu avatars

---
 app/components/Header/AccountMenu.client.vue | 102 +++++++------------
 1 file changed, 35 insertions(+), 67 deletions(-)

diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 3d5446e07..bbdab9335 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -18,9 +18,6 @@ const isOpen = shallowRef(false)
 /** Check if connected to at least one service */
 const hasAnyConnection = computed(() => isNpmConnected.value || !!atprotoUser.value)
 
-/** Check if connected to both services */
-const hasBothConnections = computed(() => isNpmConnected.value && !!atprotoUser.value)
-
 /** Only show count of active (pending/approved/running) operations */
 const operationCount = computed(() => activeOperations.value.length)
 
@@ -64,13 +61,7 @@ function openAuthModal() {
       @click="isOpen = !isOpen"
       class="border-none"
     >
-      <!-- Stacked avatars when connected -->
-      <span
-        v-if="hasAnyConnection"
-        class="flex items-center"
-        :class="hasBothConnections ? '-space-x-2' : ''"
-      >
-        <!-- npm avatar (first/back) -->
+      <span v-if="hasAnyConnection" class="flex items-center">
         <img
           v-if="isNpmConnected && npmAvatar"
           :src="npmAvatar"
@@ -79,38 +70,25 @@ function openAuthModal() {
           height="24"
           class="w-6 h-6 rounded-full ring-2 ring-bg object-cover"
         />
-        <span
-          v-else-if="isNpmConnected"
-          class="w-6 h-6 rounded-full bg-bg-muted ring-2 ring-bg flex items-center justify-center"
-        >
-          <span class="i-carbon-terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
-        </span>
-
-        <!-- Atmosphere avatar (second/front, overlapping) -->
         <img
-          v-if="atprotoUser?.avatar"
+          v-else-if="atprotoUser?.avatar"
           :src="atprotoUser.avatar"
           :alt="atprotoUser.handle"
           width="24"
           height="24"
           class="w-6 h-6 rounded-full ring-2 ring-bg object-cover"
-          :class="hasBothConnections ? 'relative z-10' : ''"
         />
         <span
-          v-else-if="atprotoUser"
+          v-else
           class="w-6 h-6 rounded-full bg-bg-muted ring-2 ring-bg flex items-center justify-center"
-          :class="hasBothConnections ? 'relative z-10' : ''"
         >
           <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
         </span>
       </span>
-
-      <!-- "connect" text when not connected -->
-      <span v-if="!hasAnyConnection" class="font-mono text-sm">
+      <span v-else class="font-mono text-sm">
         {{ $t('account_menu.connect') }}
       </span>
 
-      <!-- Chevron -->
       <span
         class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
@@ -139,9 +117,8 @@ function openAuthModal() {
         <div
           class="bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-bg-elevated/50 overflow-hidden px-1"
         >
-          <!-- Connected accounts section -->
-          <div v-if="hasAnyConnection" class="py-1">
-            <!-- npm CLI connection -->
+          <div class="py-1">
+            <!-- npm CLI - Connected or Connect option -->
             <button
               v-if="isNpmConnected && npmUser"
               type="button"
@@ -184,7 +161,34 @@ function openAuthModal() {
               </span>
             </button>
 
-            <!-- Atmosphere connection -->
+            <button
+              v-else
+              type="button"
+              role="menuitem"
+              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              @click="openConnectorModal"
+            >
+              <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
+                <span
+                  v-if="isNpmConnecting"
+                  class="i-carbon-circle-dash w-4 h-4 text-yellow-500 animate-spin"
+                  aria-hidden="true"
+                />
+                <span v-else class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
+              </span>
+              <span class="flex-1 min-w-0">
+                <span class="font-mono text-sm text-fg block">
+                  {{
+                    isNpmConnecting
+                      ? $t('account_menu.connecting')
+                      : $t('account_menu.connect_npm_cli')
+                  }}
+                </span>
+                <span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</span>
+              </span>
+            </button>
+
+            <!-- Atmosphere - Connected or Connect option -->
             <button
               v-if="atprotoUser"
               type="button"
@@ -213,45 +217,9 @@ function openAuthModal() {
                 <span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</span>
               </span>
             </button>
-          </div>
-
-          <!-- Divider (only if we have connections AND options to connect) -->
-          <div
-            v-if="hasAnyConnection && (!isNpmConnected || !atprotoUser)"
-            class="border-t border-border"
-          />
-
-          <!-- Connect options -->
-          <div v-if="!isNpmConnected || !atprotoUser" class="py-1">
-            <button
-              v-if="!isNpmConnected"
-              type="button"
-              role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
-              @click="openConnectorModal"
-            >
-              <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
-                <span
-                  v-if="isNpmConnecting"
-                  class="i-carbon-circle-dash w-4 h-4 text-yellow-500 animate-spin"
-                  aria-hidden="true"
-                />
-                <span v-else class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
-              </span>
-              <span class="flex-1 min-w-0">
-                <span class="font-mono text-sm text-fg block">
-                  {{
-                    isNpmConnecting
-                      ? $t('account_menu.connecting')
-                      : $t('account_menu.connect_npm_cli')
-                  }}
-                </span>
-                <span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</span>
-              </span>
-            </button>
 
             <button
-              v-if="!atprotoUser"
+              v-else
               type="button"
               role="menuitem"
               class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"

From ad49fa40f3b5c49c2b004a3baf335295a47601d4 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Thu, 12 Feb 2026 21:47:42 +0100
Subject: [PATCH 2/4] refactor: use colon-style icon names

---
 app/components/Header/MobileMenu.client.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/Header/MobileMenu.client.vue b/app/components/Header/MobileMenu.client.vue
index 36579ccbc..e29f683bf 100644
--- a/app/components/Header/MobileMenu.client.vue
+++ b/app/components/Header/MobileMenu.client.vue
@@ -130,7 +130,7 @@ onUnmounted(deactivate)
                   v-else
                   class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
                 >
-                  <span class="i-carbon-terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
+                  <span class="i-carbon:terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
                 </span>
                 <span class="flex-1">~{{ npmUser }}</span>
                 <span class="w-2 h-2 rounded-full bg-green-500" aria-hidden="true" />
@@ -155,7 +155,7 @@ onUnmounted(deactivate)
                   v-else
                   class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
                 >
-                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
+                  <span class="i-carbon:cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
                 </span>
                 <span class="flex-1 truncate">@{{ atprotoUser.handle }}</span>
               </button>
@@ -168,7 +168,7 @@ onUnmounted(deactivate)
                 @click="handleShowAuth"
               >
                 <span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
-                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
+                  <span class="i-carbon:cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
                 </span>
                 <span class="flex-1">{{ $t('account_menu.connect_atmosphere') }}</span>
               </button>

From c7fe63faa59c6141aa69f6927ea76bfe7b3d86cb Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Thu, 12 Feb 2026 22:02:50 +0100
Subject: [PATCH 3/4] feat: general icon when both services are connected

---
 app/components/Header/AccountMenu.client.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index bbdab9335..5c7173886 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -18,6 +18,9 @@ const isOpen = shallowRef(false)
 /** Check if connected to at least one service */
 const hasAnyConnection = computed(() => isNpmConnected.value || !!atprotoUser.value)
 
+/** Check if connected to both services */
+const hasBothConnections = computed(() => isNpmConnected.value && !!atprotoUser.value)
+
 /** Only show count of active (pending/approved/running) operations */
 const operationCount = computed(() => activeOperations.value.length)
 
@@ -63,7 +66,7 @@ function openAuthModal() {
     >
       <span v-if="hasAnyConnection" class="flex items-center">
         <img
-          v-if="isNpmConnected && npmAvatar"
+          v-if="isNpmConnected && npmAvatar && !hasBothConnections"
           :src="npmAvatar"
           :alt="npmUser || $t('account_menu.npm_cli')"
           width="24"
@@ -71,7 +74,7 @@ function openAuthModal() {
           class="w-6 h-6 rounded-full ring-2 ring-bg object-cover"
         />
         <img
-          v-else-if="atprotoUser?.avatar"
+          v-else-if="atprotoUser?.avatar && !hasBothConnections"
           :src="atprotoUser.avatar"
           :alt="atprotoUser.handle"
           width="24"

From 92543988e25cfd41e0139586cfc0fc2cbfb778bb Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Thu, 12 Feb 2026 22:10:50 +0100
Subject: [PATCH 4/4] refactor: simplify avatars checks

---
 app/components/Header/AccountMenu.client.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 5c7173886..651fe9a65 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -18,9 +18,6 @@ const isOpen = shallowRef(false)
 /** Check if connected to at least one service */
 const hasAnyConnection = computed(() => isNpmConnected.value || !!atprotoUser.value)
 
-/** Check if connected to both services */
-const hasBothConnections = computed(() => isNpmConnected.value && !!atprotoUser.value)
-
 /** Only show count of active (pending/approved/running) operations */
 const operationCount = computed(() => activeOperations.value.length)
 
@@ -66,7 +63,7 @@ function openAuthModal() {
     >
       <span v-if="hasAnyConnection" class="flex items-center">
         <img
-          v-if="isNpmConnected && npmAvatar && !hasBothConnections"
+          v-if="npmAvatar && !atprotoUser?.avatar"
           :src="npmAvatar"
           :alt="npmUser || $t('account_menu.npm_cli')"
           width="24"
@@ -74,7 +71,7 @@ function openAuthModal() {
           class="w-6 h-6 rounded-full ring-2 ring-bg object-cover"
         />
         <img
-          v-else-if="atprotoUser?.avatar && !hasBothConnections"
+          v-else-if="atprotoUser?.avatar && !npmAvatar"
           :src="atprotoUser.avatar"
           :alt="atprotoUser.handle"
           width="24"