aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

fix(sidebar): full-width identity values with corner-offset legend badge

Browse source 
Restyle the Lightning / npub rows so the value gets the entire row
and the field-name label sits as a small badge straddling the top
border (fieldset-legend pattern). Long bech32 / username@domain
strings now have room to render without truncation crowding.

The bolt icon picks up a yellow tint so the Lightning row reads at
a glance alongside the neutral npub row.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-06-10 17:41:58 +02:00
commit 7af0f364cb
1 changed files with 45 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

81
src/components/layout/ProfileSheetContent.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { Check, Copy, Home, LogIn, LogOut, Settings } from 'lucide-vue-next' import { Check, Copy, Home, LogIn, LogOut, Settings, Zap } from 'lucide-vue-next'
import { nip19 } from 'nostr-tools' import { nip19 } from 'nostr-tools'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
@ -127,7 +127,7 @@ async function onLogout() {
<!-- Identity card (logged in) — read-only summary. Editing happens <!-- Identity card (logged in) — read-only summary. Editing happens
through the gear button next to the title. --> through the gear button next to the title. -->
<div v-if="isAuthenticated" class="mt-4 rounded-lg border bg-muted/30 p-3 space-y-3"> <div v-if="isAuthenticated" class="mt-4 rounded-lg border bg-muted/30 p-3 space-y-4">
<div class="flex items-center gap-3 min-w-0"> <div class="flex items-center gap-3 min-w-0">
<Avatar class="h-12 w-12 shrink-0"> <Avatar class="h-12 w-12 shrink-0">
<AvatarImage v-if="pictureUrl" :src="pictureUrl" :alt="displayName ?? ''" /> <AvatarImage v-if="pictureUrl" :src="pictureUrl" :alt="displayName ?? ''" />
@ -141,42 +141,49 @@ async function onLogout() {
</div> </div>
</div> </div>
<!-- Lightning Address — this is also the NIP-05 in this stack, but <!-- Identifier rows: full-width value with a corner-offset "legend"
the @username above already signals the NIP-05 to the reader. --> badge straddling the top border (fieldset-legend pattern). The
<button value gets the entire row so long bech32 / username@domain
v-if="lightningAddress" strings have room to render. -->
type="button" <div class="space-y-3 pt-1">
class="w-full flex items-center gap-2 rounded-md bg-background/60 px-2 py-1.5 text-left hover:bg-background transition-colors min-w-0" <!-- Lightning Address — this is also the NIP-05 in this stack,
:aria-label="t('common.nav.copyLightning', 'Copy Lightning address')" but the @username above already signals the NIP-05. -->
@click="copyToClipboard(lightningAddress, 'lightning')" <button
> v-if="lightningAddress"
<span class="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0"> type="button"
⚡ Lightning class="relative w-full rounded-md border bg-background/60 px-3 pt-3 pb-2 text-left hover:bg-background transition-colors min-w-0"
</span> :aria-label="t('common.nav.copyLightning', 'Copy Lightning address')"
<span class="text-xs font-mono truncate flex-1 min-w-0">{{ lightningAddress }}</span> @click="copyToClipboard(lightningAddress, 'lightning')"
<component >
:is="copiedField === 'lightning' ? Check : Copy" <span class="absolute -top-2 left-2 inline-flex items-center gap-1 rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground leading-none">
class="w-3.5 h-3.5 text-muted-foreground shrink-0" <Zap class="w-3 h-3 text-yellow-500 fill-yellow-500" />
/> {{ t('common.nav.lightning', 'Lightning') }}
</button> </span>
<span class="block truncate pr-6 text-xs font-mono">{{ lightningAddress }}</span>
<component
:is="copiedField === 'lightning' ? Check : Copy"
class="absolute right-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground"
/>
</button>
<!-- npub — copy full bech32 even though we display a preview. --> <!-- npub — copy the full bech32 even though we display a preview. -->
<button <button
v-if="npub" v-if="npub"
type="button" type="button"
class="w-full flex items-center gap-2 rounded-md bg-background/60 px-2 py-1.5 text-left hover:bg-background transition-colors min-w-0" class="relative w-full rounded-md border bg-background/60 px-3 pt-3 pb-2 text-left hover:bg-background transition-colors min-w-0"
:aria-label="t('common.nav.copyNpub', 'Copy npub')" :aria-label="t('common.nav.copyNpub', 'Copy npub')"
@click="copyToClipboard(npub, 'npub')" @click="copyToClipboard(npub, 'npub')"
> >
<span class="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0"> <span class="absolute -top-2 left-2 inline-flex items-center rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground leading-none">
npub {{ t('common.nav.npub', 'npub') }}
</span> </span>
<span class="text-xs font-mono truncate flex-1 min-w-0">{{ npubPreview }}</span> <span class="block truncate pr-6 text-xs font-mono">{{ npubPreview }}</span>
<component <component
:is="copiedField === 'npub' ? Check : Copy" :is="copiedField === 'npub' ? Check : Copy"
class="w-3.5 h-3.5 text-muted-foreground shrink-0" class="absolute right-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground"
/> />
</button> </button>
</div>
</div> </div>
<!-- App-specific nav items (rendered by callers like StandaloneMenu) --> <!-- App-specific nav items (rendered by callers like StandaloneMenu) -->