[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: reduce cls in account menu dropdown

+3 -111
-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
··· 1 - <template> 2 - <div class="w-8 h-8 flex items-center justify-center"> 3 - <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" /> 4 - </div> 5 - </template>
+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
··· 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>