Skip to content

refactor: use buttons and links components in account menu #1451

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

Merged
danielroe merged 7 commits into from
Feb 13, 2026
Merged

refactor: use buttons and links components in account menu #1451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e1e02df
refactor: replace buttons in account menu
essenmitsosse Feb 12, 2026
ddda962
refactor: unify use of bluesky icon
essenmitsosse Feb 12, 2026
1f81b90
style: remove multiple primary buttons
essenmitsosse Feb 13, 2026
750294a
refactor: replace copy button
essenmitsosse Feb 13, 2026
ef77ff4
refactor: use radio button
essenmitsosse Feb 13, 2026
17e1995
refactor: use link components
essenmitsosse Feb 13, 2026
44cbba0
Revert "refactor: use radio button"
essenmitsosse Feb 13, 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
2 changes: 1 addition & 1 deletion app/components/AppHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
target: '_blank',
type: 'link',
external: true,
iconClass: 'i-simple-icons:bluesky',
iconClass: 'i-carbon:logo-bluesky',
},
{
name: 'Chat',
Expand Down
2 changes: 1 addition & 1 deletion app/components/CallToAction.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const socialLinks = computed(() => [
{
id: 'bluesky',
href: 'https://social.npmx.dev',
icon: 'i-simple-icons:bluesky',
icon: 'i-carbon:logo-bluesky',
titleKey: $t('about.get_involved.follow.title'),
descriptionKey: $t('about.get_involved.follow.description'),
ctaKey: $t('about.get_involved.follow.cta'),
Expand Down
29 changes: 13 additions & 16 deletions app/components/Header/AccountMenu.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,12 +142,12 @@ function openAuthModal() {
<!-- Connected accounts section -->
<div v-if="hasAnyConnection" class="py-1">
<!-- npm CLI connection -->
<button
<ButtonBase
v-if="isNpmConnected && npmUser"
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"
class="w-full text-start gap-x-3 border-none"
@click="openConnectorModal"
out
>
<img
v-if="npmAvatar"
Expand Down Expand Up @@ -182,14 +182,13 @@ function openAuthModal() {
})
}}
</span>
</button>
</ButtonBase>

<!-- Atmosphere connection -->
<button
<ButtonBase
v-if="atprotoUser"
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"
class="w-full text-start gap-x-3 border-none"
@click="openAuthModal"
>
<img
Expand All @@ -212,7 +211,7 @@ function openAuthModal() {
>
<span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</span>
</span>
</button>
</ButtonBase>
</div>

<!-- Divider (only if we have connections AND options to connect) -->
Expand All @@ -223,11 +222,10 @@ function openAuthModal() {

<!-- Connect options -->
<div v-if="!isNpmConnected || !atprotoUser" class="py-1">
<button
<ButtonBase
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"
class="w-full text-start gap-x-3 border-none"
@click="openConnectorModal"
>
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
Expand All @@ -248,13 +246,12 @@ function openAuthModal() {
</span>
<span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</span>
</span>
</button>
</ButtonBase>

<button
<ButtonBase
v-if="!atprotoUser"
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"
class="w-full text-start gap-x-3 border-none"
@click="openAuthModal"
>
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
Expand All @@ -266,7 +263,7 @@ function openAuthModal() {
</span>
<span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</span>
</span>
</button>
</ButtonBase>
</div>
</div>
</div>
Expand Down
34 changes: 12 additions & 22 deletions app/components/Header/AuthModal.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,9 @@ watch(handleInput, newHandleInput => {
</p>
</div>
</div>
<button
class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
@click="logout"
>
<ButtonBase class="w-full" @click="logout">
{{ $t('auth.modal.disconnect') }}
</button>
</ButtonBase>
</div>

<!-- Disconnected state -->
Expand Down Expand Up @@ -111,19 +108,13 @@ watch(handleInput, newHandleInput => {
<span class="font-bold">npmx.dev</span>
</template>
<template #atproto>
<a :href="atprotoLink" target="_blank" class="text-blue-400 hover:underline">
AT Protocol
</a>
<LinkBase :to="atprotoLink"> AT Protocol </LinkBase>
</template>
<template #bluesky>
<a href="https://bsky.app" target="_blank" class="text-blue-400 hover:underline">
Bluesky
</a>
<LinkBase to="https://bsky.app"> Bluesky </LinkBase>
</template>
<template #tangled>
<a href="https://tangled.org" target="_blank" class="text-blue-400 hover:underline">
Tangled
</a>
<LinkBase to="https://tangled.org"> Tangled </LinkBase>
</template>
</i18n-t>
</div>
Expand All @@ -133,18 +124,17 @@ watch(handleInput, newHandleInput => {
<ButtonBase type="submit" variant="primary" :disabled="!handleInput.trim()" class="w-full">
{{ $t('auth.modal.connect') }}
</ButtonBase>
<ButtonBase type="button" variant="primary" class="w-full" @click="handleCreateAccount">
<ButtonBase type="button" class="w-full" @click="handleCreateAccount">
{{ $t('auth.modal.create_account') }}
</ButtonBase>
<hr class="color-border" />
<ButtonBase type="button" variant="primary" class="w-full" @click="handleBlueskySignIn" block>
<ButtonBase
type="button"
class="w-full"
@click="handleBlueskySignIn"
classicon="i-carbon:logo-bluesky"
>
{{ $t('auth.modal.connect_bluesky') }}
<svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
<path
fill="#0F73FF"
d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
></path>
</svg>
</ButtonBase>
</form>
</Modal>
Expand Down
28 changes: 9 additions & 19 deletions app/components/Header/ConnectorModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,9 @@ function handleDisconnect() {
{{ $t('connector.modal.connected_hint') }}
</div>

<button
type="button"
class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
@click="handleDisconnect"
>
<ButtonBase type="button" class="w-full" @click="handleDisconnect">
{{ $t('connector.modal.disconnect') }}
</button>
</ButtonBase>
</div>

<!-- Disconnected state -->
Expand All @@ -100,14 +96,11 @@ function handleDisconnect() {
<p class="text-sm text-fg-muted">
<i18n-t keypath="connector.modal.contributor_notice" scope="global">
<template #link>
<a
href="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
target="_blank"
rel="noopener noreferrer"
class="text-blue-400 hover:underline"
<LinkBase
to="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
>
{{ $t('connector.modal.contributor_link') }}
</a>
</LinkBase>
</template>
</i18n-t>
</p>
Expand All @@ -124,15 +117,12 @@ function handleDisconnect() {
>
<span class="text-fg-subtle">$</span>
<span class="text-fg-subtle ms-2">pnpm npmx-connector</span>
<button
type="button"
<ButtonBase
:aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
class="ms-auto text-fg-subtle p-1.5 -m-1.5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
@click="copy('pnpm npmx-connector')"
>
<span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
<span v-else class="i-carbon:checkmark block w-5 h-5 text-green-500" aria-hidden="true" />
</button>
class="ms-auto"
:classicon="copied ? 'i-carbon:checkmark text-green-500' : 'i-carbon:copy'"
/>
</div>

<!-- TODO: Uncomment when npmx-connector is published to npm
Expand Down
Loading