From 601393ece3c3854171e90ca6144266fe0e3d8285 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Fri, 30 Oct 2026 20:51:21 +0700
Subject: [PATCH] ui(header): make the user avatar open the profile

---
 src/components/Layout.tsx | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index e776aa1..8560f2a 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -52,6 +52,7 @@ import {
   MessagesSquare,
   ChevronLeft,
   ChevronRight,
+  ChevronDown,
   Search,
 } from 'lucide-react';
 import { OfflineIndicator } from '@/components/OfflineIndicator';
@@ -220,8 +221,12 @@ function MobileHeaderUserMenu({
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button className="touch-manipulation relative flex items-center gap-2 px-2 py-1.5 rounded-full bg-green-500/10 border border-green-500/30 active:scale-95 transition-transform">
+      <div className="flex items-center gap-0.5">
+        <Link
+          to={`/${nip19.npubEncode(pubkey)}`}
+          aria-label={t('chromeUi.viewMyProfile')}
+          className="touch-manipulation relative flex items-center gap-1.5 rounded-l-full rounded-r-md border border-green-500/30 bg-green-500/10 px-1.5 py-1.5 transition-transform active:scale-95"
+        >
           <Avatar className="h-7 w-7 border-2 border-green-500/50">
             <AvatarImage src={avatar} alt={displayName} />
             <AvatarFallback className="bg-green-500/20 text-green-400 text-[10px] font-bold">
@@ -230,14 +235,19 @@ function MobileHeaderUserMenu({
           </Avatar>
           {/* Status indicator */}
           <UserStatusIndicator pubkey={pubkey} size="sm" />
-          <span className="text-green-400 text-xs font-bold uppercase tracking-wide hidden xs:inline">
-            <CheckCircle2 className="h-3 w-3 inline mr-1" />
-            {t('chromeUi.inBadge')}
-          </span>
           {/* Green online indicator dot */}
-          <span className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-green-500 border-2 border-black rounded-full xs:hidden" />
-        </button>
-      </DropdownMenuTrigger>
+          <span className="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border-2 border-black bg-green-500 xs:hidden" />
+        </Link>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            aria-label={t('chromeUi.menu')}
+            className="flex h-9 w-5 items-center justify-center rounded-r-full text-green-400/80 transition-colors hover:text-green-300 active:scale-95"
+          >
+            <ChevronDown className="h-4 w-4" />
+          </button>
+        </DropdownMenuTrigger>
+      </div>
       <DropdownMenuContent align="end" className="w-56 p-2 [&_[role=menuitem]]:min-h-11">
         {/* User info header */}
         <div className="px-2 py-3 mb-2 rounded-lg bg-green-500/10 border border-green-500/20">