Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MatteoGabriele wants to merge 4 commits into
base: main
Choose a base branch
from
+39 −71
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
da51b4c
refactor: simplify account menu avatars
MatteoGabriele Feb 12, 2026
ad49fa4
refactor: use colon-style icon names
MatteoGabriele Feb 12, 2026
c7fe63f
feat: general icon when both services are connected
MatteoGabriele Feb 12, 2026
9254398
refactor: simplify avatars checks
MatteoGabriele Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 36 additions & 68 deletions app/components/Header/AccountMenu.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -64,53 +61,34 @@ 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"
v-if="npmAvatar && !atprotoUser?.avatar"
: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"
v-else-if="atprotoUser?.avatar && !npmAvatar"
: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 }"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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>
Comment on lines +164 to +178
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# Search for UnoCSS icon class usage patterns in Vue components
rg 'class=".*i-carbon' app/components --type vue -A 1 -B 1 | head -50

Repository: npmx-dev/npmx.dev

Length of output: 88

🏁 Script executed:

# Specifically check AccountMenu.client.vue for icon usage
cat -n app/components/Header/AccountMenu.client.vue | grep -E '(i-carbon|class=)' | head -20

Repository: npmx-dev/npmx.dev

Length of output: 1661

🏁 Script executed:

# Check for both colon and dash syntax usage across the codebase
rg 'i-carbon[:|-]' app/ -o | sort | uniq -c

Repository: npmx-dev/npmx.dev

Length of output: 4817

Use UnoCSS colon syntax for the Carbon icon classes.
The colon form provides better performance for icons with dashes. Use i-carbon:circle-dash and i-carbon:terminal instead of the dash-separated form.

Proposed fix 
-                <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
+                  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" />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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>
<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"
Expand Down Expand Up @@ -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"
Expand Down
6 changes: 3 additions & 3 deletions app/components/Header/MobileMenu.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Loading