From ebc5a0f071ee299e8cd2b5fe53b2fbbdda88f2c5 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Mon, 15 Jun 2026 23:13:46 +0200
Subject: [PATCH] feat(profile): move edit affordance into identity card as a
 pencil

Replace the gear (Settings) button in the profile sheet header with a
pencil button inside the identity card, by the avatar/name row. A pencil
reads as "edit your profile" more intuitively than a header gear, and
co-locating it with the identity it edits is clearer. Opens the same
edit-profile dialog.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/layout/ProfileSheetContent.vue | 33 +++++++++----------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/layout/ProfileSheetContent.vue b/src/components/layout/ProfileSheetContent.vue
index 5bf0122..ce082b7 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, Zap } from 'lucide-vue-next'
+import { Check, Copy, Home, LogIn, LogOut, Pencil, Zap } from 'lucide-vue-next'
 import { nip19 } from 'nostr-tools'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
@@ -104,19 +104,7 @@ async function onLogout() {
 
 <template>
   <SheetHeader>
-    <div class="flex items-center justify-between gap-2">
-      <SheetTitle>{{ t('common.nav.profile') }}</SheetTitle>
-      <Button
-        v-if="isAuthenticated"
-        variant="ghost"
-        size="icon"
-        class="h-8 w-8 shrink-0"
-        :aria-label="t('common.nav.editProfile', 'Edit profile')"
-        @click="editProfileOpen = true"
-      >
-        <Settings class="h-4 w-4" />
-      </Button>
-    </div>
+    <SheetTitle>{{ t('common.nav.profile') }}</SheetTitle>
     <SheetDescription v-if="isAuthenticated">
       {{ t('common.nav.profileDescription') }}
     </SheetDescription>
@@ -125,8 +113,8 @@ async function onLogout() {
     </SheetDescription>
   </SheetHeader>
 
-  <!-- Identity card (logged in) — read-only summary. Editing happens
-       through the gear button next to the title. -->
+  <!-- Identity card (logged in) — summary with an inline edit (pencil)
+       button that opens the profile form. -->
   <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">
@@ -139,6 +127,15 @@ async function onLogout() {
           @{{ user.username }}
         </p>
       </div>
+      <Button
+        variant="ghost"
+        size="icon"
+        class="h-8 w-8 shrink-0 self-start text-muted-foreground"
+        :aria-label="t('common.nav.editProfile', 'Edit profile')"
+        @click="editProfileOpen = true"
+      >
+        <Pencil class="h-4 w-4" />
+      </Button>
     </div>
 
     <!-- Identifier rows: full-width value with a corner-offset "legend"
@@ -246,8 +243,8 @@ async function onLogout() {
     </AlertDialog>
   </div>
 
-  <!-- Edit-profile popup (gear icon) — the full form lives here so the
-       sheet stays scannable. -->
+  <!-- Edit-profile popup (pencil button in the identity card) — the full
+       form lives here so the sheet stays scannable. -->
   <Dialog v-model:open="editProfileOpen">
     <DialogContent class="max-w-md max-h-[90vh] overflow-y-auto overflow-x-hidden">
       <DialogHeader>