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

MatteoGabriele · 2026-02-08T16:26:06Z

Adding avatars for each connected service has several problems:

Visually, when a user has the same avatar everywhere, it creates multiple copies of the same image to be rendered
The feature won't scale if we add more services

My proposal is to retain only the single cloud icon and add a green dot to indicate to the user that it is connected.

before

after

vercel · 2026-02-08T16:26:14Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 8, 2026 6:14pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 8, 2026 6:14pm
npmx-lunaria	Ignored		Feb 8, 2026 6:14pm

codecov · 2026-02-08T16:28:41Z

Codecov Report

❌ Patch coverage is 20.00000% with 8 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Header/AccountMenu.client.vue	14.28%	6 Missing ⚠️
app/components/Header/MobileMenu.client.vue	33.33%	2 Missing ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-02-08T16:29:10Z

Warning

Rate limit exceeded

@MatteoGabriele has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 4 minutes and 46 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

This change removes avatar image usage from header components (AccountMenu and MobileMenu) by no longer extracting the avatar (npmAvatar) from useConnector() and by replacing conditional avatar <img> elements with inline icon spans. All instances that previously rendered npm or atproto/Atmosphere avatars now render fixed inline icons; accessibility attributes and existing textual/structural elements are preserved.

Possibly related PRs

fix: reorder Mobile Menu #1185: Modifies app/components/Header/MobileMenu.client.vue and overlaps on account/avatar rendering and mobile menu avatar logic.
fix(ui): fix squashed avatars & add missing mobile bluesky avatar #1022: Adjusts avatar rendering and image classes in AccountMenu.client.vue/header components, touching the same avatar markup targeted here.
feat: show bluesky avatar in header #896: Adds Bluesky/atproto avatar handling to header components, directly relating to prior conditional avatar logic replaced by this PR.

Suggested reviewers

danielroe
zeucapua

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the rationale (avoiding duplicate avatars, poor scalability) and proposes a concrete solution (single cloud icon with green dot indicator). The description is directly related to the changeset, which removes avatar data and replaces avatar images with icons.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/components/Header/AccountMenu.client.vue (1)
68-76: Consider adding accessible text for connection status.

The green dot visually indicates that the user is connected to services, but screen reader users have no equivalent indication. Consider adding visually hidden text to convey this status.
Proposed fix
       <div v-if="hasAnyConnection" class="flex items-center relative">
         <span
           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="size-1.5 rounded-full bg-green-600 absolute top-0 -inset-ie-0" aria-hidden="true"></span>
           <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
         </span>
+        <span class="sr-only">{{ $t('account_menu.connected') }}</span>
       </div>
This requires adding a connected translation key to your i18n files.

app/components/Header/AccountMenu.client.vue

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/Header/AccountMenu.client.vue (1)
60-79: ⚠️ Potential issue | 🟡 Minor

Connection status is not accessible to screen readers.

The green dot indicator conveys the connected state visually but provides no accessible alternative. Screen reader users cannot perceive this status change. Consider adding an aria-label to the button that reflects the current connection state.
Suggested fix
     <ButtonBase
       type="button"
       :aria-expanded="isOpen"
       aria-haspopup="true"
+      :aria-label="hasAnyConnection ? $t('account_menu.connected') : $t('account_menu.connect')"
       `@click`="isOpen = !isOpen"
       class="border-none"
     >
This assumes the appropriate translation keys exist. Adjust key names as needed.

🧹 Nitpick comments (1)

app/components/Header/AccountMenu.client.vue (1)
69-75: Consider removing vestigial z-10 conditional class.

The conditional hasBothConnections ? 'relative z-10' : '' appears to be leftover from the previous multi-avatar stacking design. Since the UI now renders a single cloud icon regardless of how many services are connected, the z-index logic no longer serves a purpose. The parent div at line 68 already provides the relative positioning context needed for the status dot.
Suggested simplification
         <span
           class="w-6 h-6 rounded-full bg-bg-muted ring-2 ring-bg flex items-center justify-center"
-          :class="hasBothConnections ? 'relative z-10' : ''"
         >

github-actions · 2026-02-08T16:39:26Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
lunaria/files/en-GB.json	Localization changed, will be marked as complete.
lunaria/files/en-US.json	Source changed, localizations will be marked as outdated.
lunaria/files/it-IT.json	Localization changed, will be marked as complete.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

danielroe · 2026-02-08T16:44:13Z

what about instead displaying the logo of the connected service? (npm, bluesky or atproto) and we revisit when we get lots more... (could display a +4 or something)

MatteoGabriele · 2026-02-08T16:49:58Z

That could indeed be a valid alternative. I will use the logos

Tobbe · 2026-02-08T17:27:40Z

what about instead displaying the logo of the connected service? (npm, bluesky or atproto) and we revisit when we get lots more... (could display a +4 or something)

How do you pick what logo to display though, if the user is connected to more than one thing? (assuming they can be)

Could also have overlapping avatars. (But then again it gets tricky - which one do we show on top?)

MatteoGabriele · 2026-02-08T17:32:34Z

There's also an "issue" with the ATProto icon: it kinda looks like I want to connect my email.

coderabbitai

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/Header/AccountMenu.client.vue (1)
60-88: ⚠️ Potential issue | 🟠 Major

Add an explicit accessible label for the icon-only button.

When connected, the button contains only aria-hidden icons, so it has no accessible name. Please add an aria-label (you already added account_menu.connected in i18n).
✅ Proposed fix
     <ButtonBase
       type="button"
       :aria-expanded="isOpen"
       aria-haspopup="true"
+      :aria-label="hasAnyConnection ? $t('account_menu.connected') : $t('account_menu.connect')"
       `@click`="isOpen = !isOpen"
       class="border-none"
     >

app/components/Header/AccountMenu.client.vue

MatteoGabriele · 2026-02-08T17:51:30Z

@danielroe I've updated the PR with icons.
The npm icon is fine, but the one I picked for the ATProto might be misunderstood. Let me know what you think. I could use the Bluesky icon, but that would technically not be correct.

danielroe · 2026-02-08T17:54:28Z

we need to update the mobile menu as well:

I think the icon looks good.

…teoGabriele/npmx.dev into feat/use-icon-when-connected

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/Header/MobileMenu.client.vue (1)
125-135: ⚠️ Potential issue | 🟡 Minor

Missing green status indicator for visual consistency.

The npm CLI connection (line 121) displays a green status dot to indicate active connection, but the Atmosphere connection lacks this indicator. For consistent UX, consider adding the same visual cue here.
💡 Suggested fix to add status indicator
               <span class="flex-1 truncate">@{{ atprotoUser.handle }}</span>
+              <span class="w-2 h-2 rounded-full bg-green-500" aria-hidden="true" />
             </button>

danielroe · 2026-02-08T18:22:03Z

app/components/Header/AccountMenu.client.vue

  isConnected: isNpmConnected,
  isConnecting: isNpmConnecting,
  npmUser,
-  avatar: npmAvatar,


still wondering if it makes sense to show avatars in the dropdown, even if not in the top level .... 🤔

wdyt?

I think it may look a bit confusing and inconsistent.
If I have to go with avatars, which I do like because they give the impression that I've actually connected, I prefer the initial proposal.

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

ec7873b

vercel bot deployed to Preview – npmx.dev February 8, 2026 16:28 View deployment

coderabbitai bot reviewed Feb 8, 2026

View reviewed changes

app/components/Header/AccountMenu.client.vue Outdated Show resolved Hide resolved

refactor: use top-0

ecefee3

vercel bot deployed to Preview – npmx.dev February 8, 2026 16:32 View deployment

coderabbitai bot reviewed Feb 8, 2026

View reviewed changes

feat: add connected text a11y

8a23424

vercel bot deployed to Preview – npmx.dev February 8, 2026 16:40 View deployment

fix: remove unused computed

86a9319

vercel bot deployed to Preview – npmx.dev February 8, 2026 16:42 View deployment

MatteoGabriele added 2 commits February 8, 2026 18:46

refactor: use service icon

daddc9e

refactor: remove unused variable

6ee38bb

vercel bot deployed to Preview – npmx.dev February 8, 2026 17:48 View deployment

chore: remove unused translation

4618252

coderabbitai bot reviewed Feb 8, 2026

View reviewed changes

app/components/Header/AccountMenu.client.vue Show resolved Hide resolved

vercel bot deployed to Preview – npmx.dev February 8, 2026 17:51 View deployment

MatteoGabriele added 2 commits February 8, 2026 19:01

feat: change icons on mobile menu

7a2b77d

Merge branch 'main' into feat/use-icon-when-connected

a16e4df

vercel bot deployed to Preview – npmx.dev February 8, 2026 18:04 View deployment

fix: remove unused variable

3a4e132

Merge branch 'feat/use-icon-when-connected' of https://github.com/Mat…

69e4934

…teoGabriele/npmx.dev into feat/use-icon-when-connected

vercel bot deployed to Preview – npmx.dev February 8, 2026 18:07 View deployment

coderabbitai bot reviewed Feb 8, 2026

View reviewed changes

MatteoGabriele added 2 commits February 8, 2026 19:11

fix(a11y): add label when there are connections

56b3ec9

chore: remove comment

84fe0f9

vercel bot deployed to Preview – npmx.dev February 8, 2026 18:14 View deployment

danielroe reviewed Feb 8, 2026

View reviewed changes

Uh oh!

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

Are you sure you want to change the base?

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

Conversation

MatteoGabriele commented Feb 8, 2026

Uh oh!

vercel bot commented Feb 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai bot commented Feb 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

danielroe commented Feb 8, 2026

Uh oh!

MatteoGabriele commented Feb 8, 2026

Uh oh!

Tobbe commented Feb 8, 2026

Uh oh!

MatteoGabriele commented Feb 8, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MatteoGabriele commented Feb 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

danielroe commented Feb 8, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

danielroe Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

MatteoGabriele Feb 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Feb 8, 2026 •

edited

Loading

codecov bot commented Feb 8, 2026 •

edited

Loading

coderabbitai bot commented Feb 8, 2026 •

edited

Loading

github-actions bot commented Feb 8, 2026 •

edited

Loading

MatteoGabriele commented Feb 8, 2026 •

edited

Loading

MatteoGabriele Feb 8, 2026 •

edited

Loading