forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: reduce cls in account menu dropdown
+3
-111
-104
app/components/ConnectorStatus.client.vue
-104
app/components/ConnectorStatus.client.vue
···
1
-
<script setup lang="ts">
2
-
const {
3
-
isConnected,
4
-
isConnecting,
5
-
npmUser,
6
-
avatar,
7
-
error,
8
-
activeOperations,
9
-
hasPendingOperations,
10
-
} = useConnector()
11
-
12
-
const showModal = shallowRef(false)
13
-
const showTooltip = shallowRef(false)
14
-
15
-
const tooltipText = computed(() => {
16
-
if (isConnecting.value) return $t('connector.status.connecting')
17
-
if (isConnected.value) return $t('connector.status.connected')
18
-
return $t('connector.status.connect_cli')
19
-
})
20
-
21
-
const statusColor = computed(() => {
22
-
if (isConnecting.value) return 'bg-yellow-500'
23
-
if (isConnected.value) return 'bg-green-500'
24
-
return 'bg-fg-subtle'
25
-
})
26
-
27
-
/** Only show count of active (pending/approved/running) operations */
28
-
const operationCount = computed(() => activeOperations.value.length)
29
-
30
-
const ariaLabel = computed(() => {
31
-
if (error.value) return error.value
32
-
if (isConnecting.value) return $t('connector.status.aria_connecting')
33
-
if (isConnected.value) return $t('connector.status.aria_connected')
34
-
return $t('connector.status.aria_click_to_connect')
35
-
})
36
-
</script>
37
-
38
-
<template>
39
-
<div class="relative flex items-center gap-2">
40
-
<!-- Username link (when connected) -->
41
-
<NuxtLink
42
-
v-if="isConnected && npmUser"
43
-
:to="`/~${npmUser}`"
44
-
class="link-subtle font-mono text-sm hidden sm:inline"
45
-
>
46
-
@{{ npmUser }}
47
-
</NuxtLink>
48
-
49
-
<button
50
-
type="button"
51
-
class="relative flex items-center justify-center w-8 h-8 rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
52
-
:aria-label="ariaLabel"
53
-
@click="showModal = true"
54
-
@mouseenter="showTooltip = true"
55
-
@mouseleave="showTooltip = false"
56
-
@focus="showTooltip = true"
57
-
@blur="showTooltip = false"
58
-
>
59
-
<!-- Avatar (when connected with avatar) -->
60
-
<img
61
-
v-if="isConnected && avatar"
62
-
:src="avatar"
63
-
:alt="$t('connector.status.avatar_alt', { user: npmUser })"
64
-
width="24"
65
-
height="24"
66
-
class="w-6 h-6 rounded-full"
67
-
/>
68
-
<!-- Status dot (when not connected or no avatar) -->
69
-
<span
70
-
v-else
71
-
class="w-2.5 h-2.5 rounded-full transition-colors duration-200"
72
-
:class="statusColor"
73
-
aria-hidden="true"
74
-
/>
75
-
<!-- Operation count badge (overlaid) -->
76
-
<span
77
-
v-if="isConnected && operationCount > 0"
78
-
class="absolute -top-0.5 -inset-ie-0.5 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-[10px] rounded-full"
79
-
:class="hasPendingOperations ? 'bg-yellow-500 text-black' : 'bg-blue-500 text-white'"
80
-
aria-hidden="true"
81
-
>
82
-
{{ operationCount }}
83
-
</span>
84
-
</button>
85
-
86
-
<!-- Tooltip -->
87
-
<Transition
88
-
enter-active-class="transition-opacity duration-150"
89
-
leave-active-class="transition-opacity duration-100"
90
-
enter-from-class="opacity-0"
91
-
leave-to-class="opacity-0"
92
-
>
93
-
<div
94
-
v-if="showTooltip"
95
-
role="tooltip"
96
-
class="absolute inset-ie-0 top-full mt-2 px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-50"
97
-
>
98
-
{{ tooltipText }}
99
-
</div>
100
-
</Transition>
101
-
102
-
<ConnectorModal v-model:open="showModal" />
103
-
</div>
104
-
</template>
-5
app/components/ConnectorStatus.server.vue
-5
app/components/ConnectorStatus.server.vue
+1
-1
app/components/HeaderAccountMenu.client.vue
+1
-1
app/components/HeaderAccountMenu.client.vue
···
59
59
<div class="account-menu relative" @keydown="handleKeydown">
60
60
<button
61
61
type="button"
62
-
class="relative flex items-center gap-2 px-2 py-1.5 rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
62
+
class="relative flex items-center justify-end gap-2 px-2 py-1.5 min-w-24 rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
63
63
:aria-expanded="isOpen"
64
64
aria-haspopup="true"
65
65
@click="isOpen = !isOpen"
+2
-1
app/components/HeaderAccountMenu.server.vue
+2
-1
app/components/HeaderAccountMenu.server.vue
···
1
1
<template>
2
-
<div class="flex items-center gap-2 px-2 py-1.5">
2
+
<div class="flex items-center justify-end gap-2 px-2 py-1.5 min-w-24">
3
3
<span class="font-mono text-sm text-fg-muted">{{ $t('account_menu.connect') }}</span>
4
+
<span class="i-carbon-chevron-down w-3 h-3 text-fg-muted" aria-hidden="true" />
4
5
</div>
5
6
</template>