refactor: use service icon

Author: MatteoGabriele

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)
 
@@ -62,17 +65,31 @@ function openAuthModal() {
       class="border-none"
     >
       <!-- Stacked avatars when connected -->
-      <div v-if="hasAnyConnection" class="flex items-center relative">
+      <div
+        v-if="hasAnyConnection"
+        class="flex items-center"
+        :class="hasBothConnections ? '-space-x-2' : ''"
+      >
+        <!-- npm avatar (first/back) -->
+        <span
+          v-if="isNpmConnected"
+          class="w-6 h-6 rounded-full bg-bg-muted ring-2 ring-bg flex items-center justify-center"
+        >
+          <span class="i-simple-icons:npm w-3 h-3 text-fg-muted" aria-hidden="true" />
+        </span>
+
+        <!-- Atmosphere avatar (second/front, overlapping) -->
         <span
+          v-if="atprotoUser"
           class="w-6 h-6 rounded-full bg-bg-muted ring-2 ring-bg flex items-center justify-center"
-          aria-hidden="true"
+          :class="hasBothConnections ? 'relative z-10' : ''"
         >
-          <span class="size-1.5 rounded-full bg-green-600 absolute top-0 -inset-ie-0"></span>
-          <span class="i-carbon-cloud w-3 h-3 text-fg-muted" />
+          <span class="i-simple-icons:maildotru w-3 h-3 text-fg-muted" aria-hidden="true" />
         </span>
-        <span class="sr-only">{{ $t('account_menu.connected') }}</span>
       </div>
-      <span v-else class="font-mono text-sm">
+
+      <!-- "connect" text when not connected -->
+      <span v-if="!hasAnyConnection" class="font-mono text-sm">
         {{ $t('account_menu.connect') }}
       </span>
 
@@ -115,19 +132,8 @@ function openAuthModal() {
               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"
             >
-              <img
-                v-if="npmAvatar"
-                :src="npmAvatar"
-                :alt="npmUser"
-                width="32"
-                height="32"
-                class="w-8 h-8 rounded-full object-cover"
-              />
-              <span
-                v-else
-                class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center"
-              >
-                <span class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
+              <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
+                <span class="i-simple-icons:npm w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <div class="flex-1 min-w-0">
                 <div class="font-mono text-sm text-fg truncate">~{{ npmUser }}</div>
@@ -158,19 +164,8 @@ function openAuthModal() {
               class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
               @click="openAuthModal"
             >
-              <img
-                v-if="atprotoUser.avatar"
-                :src="atprotoUser.avatar"
-                :alt="atprotoUser.handle"
-                width="32"
-                height="32"
-                class="w-8 h-8 rounded-full object-cover"
-              />
-              <span
-                v-else
-                class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center"
-              >
-                <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
+              <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
+                <span class="i-simple-icons:maildotru w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <div class="flex-1 min-w-0">
                 <div class="font-mono text-sm text-fg truncate">@{{ atprotoUser.handle }}</div>
@@ -200,7 +195,7 @@ function openAuthModal() {
                   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 v-else class="i-simple-icons:npm w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <div class="flex-1 min-w-0">
                 <div class="font-mono text-sm text-fg">
@@ -222,7 +217,7 @@ function openAuthModal() {
               @click="openAuthModal"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
-                <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
+                <span class="i-simple-icons:maildotru w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <div class="flex-1 min-w-0">
                 <div class="font-mono text-sm text-fg">