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>
This commit is contained in:
Padreug 2026-06-15 23:13:46 +02:00
commit 2e55a45ed6

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, Zap } from 'lucide-vue-next' import { Check, Copy, Home, LogIn, LogOut, Pencil, 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'
@ -104,19 +104,7 @@ async function onLogout() {
<template> <template>
<SheetHeader> <SheetHeader>
<div class="flex items-center justify-between gap-2">
<SheetTitle>{{ t('common.nav.profile') }}</SheetTitle> <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>
<SheetDescription v-if="isAuthenticated"> <SheetDescription v-if="isAuthenticated">
{{ t('common.nav.profileDescription') }} {{ t('common.nav.profileDescription') }}
</SheetDescription> </SheetDescription>
@ -125,8 +113,8 @@ async function onLogout() {
</SheetDescription> </SheetDescription>
</SheetHeader> </SheetHeader>
<!-- Identity card (logged in) read-only summary. Editing happens <!-- Identity card (logged in) summary with an inline edit (pencil)
through the gear button next to the title. --> 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 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">
@ -139,6 +127,15 @@ async function onLogout() {
@{{ user.username }} @{{ user.username }}
</p> </p>
</div> </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> </div>
<!-- Identifier rows: full-width value with a corner-offset "legend" <!-- Identifier rows: full-width value with a corner-offset "legend"
@ -246,8 +243,8 @@ async function onLogout() {
</AlertDialog> </AlertDialog>
</div> </div>
<!-- Edit-profile popup (gear icon) the full form lives here so the <!-- Edit-profile popup (pencil button in the identity card) the full
sheet stays scannable. --> form lives here so the sheet stays scannable. -->
<Dialog v-model:open="editProfileOpen"> <Dialog v-model:open="editProfileOpen">
<DialogContent class="max-w-md max-h-[90vh] overflow-y-auto overflow-x-hidden"> <DialogContent class="max-w-md max-h-[90vh] overflow-y-auto overflow-x-hidden">
<DialogHeader> <DialogHeader>