feat(ui): use icon-only when connected to services

Author: MatteoGabriele

app/components/Header/AccountMenu.client.vue

@@ -65,48 +65,16 @@ function openAuthModal() {
       class="border-none"
     >
       <!-- Stacked avatars when connected -->
-      <div
-        v-if="hasAnyConnection"
-        class="flex items-center"
-        :class="hasBothConnections ? '-space-x-2' : ''"
-      >
-        <!-- npm avatar (first/back) -->
-        <img
-          v-if="isNpmConnected && npmAvatar"
-          :src="npmAvatar"
-          :alt="npmUser || $t('account_menu.npm_cli')"
-          width="24"
-          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"
-          :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' : ''"
-        />
+      <div v-if="hasAnyConnection" class="flex items-center relative">
         <span
-          v-else-if="atprotoUser"
           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="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" aria-hidden="true" />
         </span>
       </div>
-
-      <!-- "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>