From 7af0f364cbe684b6b616b5fb3bbca496a701abd6 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 10 Jun 2026 17:41:58 +0200
Subject: [PATCH] fix(sidebar): full-width identity values with corner-offset
 legend badge

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>
---
 src/components/layout/ProfileSheetContent.vue | 81 ++++++++++---------
 1 file changed, 44 insertions(+), 37 deletions(-)

diff --git a/src/components/layout/ProfileSheetContent.vue b/src/components/layout/ProfileSheetContent.vue
index 76635c9..5bf0122 100644
--- a/src/components/layout/ProfileSheetContent.vue
+++ b/src/components/layout/ProfileSheetContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 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 { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
@@ -127,7 +127,7 @@ async function onLogout() {
 
   <!-- Identity card (logged in) — read-only summary. Editing happens
        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">
       <Avatar class="h-12 w-12 shrink-0">
         <AvatarImage v-if="pictureUrl" :src="pictureUrl" :alt="displayName ?? ''" />
@@ -141,42 +141,49 @@ async function onLogout() {
       </div>
     </div>
 
-    <!-- Lightning Address — this is also the NIP-05 in this stack, but
-         the @username above already signals the NIP-05 to the reader. -->
-    <button
-      v-if="lightningAddress"
-      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"
-      :aria-label="t('common.nav.copyLightning', 'Copy Lightning address')"
-      @click="copyToClipboard(lightningAddress, 'lightning')"
-    >
-      <span class="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0">
-        ⚡ Lightning
-      </span>
-      <span class="text-xs font-mono truncate flex-1 min-w-0">{{ lightningAddress }}</span>
-      <component
-        :is="copiedField === 'lightning' ? Check : Copy"
-        class="w-3.5 h-3.5 text-muted-foreground shrink-0"
-      />
-    </button>
+    <!-- Identifier rows: full-width value with a corner-offset "legend"
+         badge straddling the top border (fieldset-legend pattern). The
+         value gets the entire row so long bech32 / username@domain
+         strings have room to render. -->
+    <div class="space-y-3 pt-1">
+      <!-- Lightning Address — this is also the NIP-05 in this stack,
+           but the @username above already signals the NIP-05. -->
+      <button
+        v-if="lightningAddress"
+        type="button"
+        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.copyLightning', 'Copy Lightning address')"
+        @click="copyToClipboard(lightningAddress, 'lightning')"
+      >
+        <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">
+          <Zap class="w-3 h-3 text-yellow-500 fill-yellow-500" />
+          {{ t('common.nav.lightning', 'Lightning') }}
+        </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. -->
-    <button
-      v-if="npub"
-      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"
-      :aria-label="t('common.nav.copyNpub', 'Copy npub')"
-      @click="copyToClipboard(npub, 'npub')"
-    >
-      <span class="text-[10px] uppercase tracking-wide text-muted-foreground shrink-0">
-        npub
-      </span>
-      <span class="text-xs font-mono truncate flex-1 min-w-0">{{ npubPreview }}</span>
-      <component
-        :is="copiedField === 'npub' ? Check : Copy"
-        class="w-3.5 h-3.5 text-muted-foreground shrink-0"
-      />
-    </button>
+      <!-- npub — copy the full bech32 even though we display a preview. -->
+      <button
+        v-if="npub"
+        type="button"
+        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')"
+        @click="copyToClipboard(npub, 'npub')"
+      >
+        <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">
+          {{ t('common.nav.npub', 'npub') }}
+        </span>
+        <span class="block truncate pr-6 text-xs font-mono">{{ npubPreview }}</span>
+        <component
+          :is="copiedField === 'npub' ? Check : Copy"
+          class="absolute right-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground"
+        />
+      </button>
+    </div>
   </div>
 
   <!-- App-specific nav items (rendered by callers like StandaloneMenu) -->