From 8fe01d5337f8a87be385b4f63365b0dd4e207b3e Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Fri, 3 Oct 2025 02:02:15 +0200
Subject: [PATCH] feat(ui): replace user text with profile image in sidebar
 header

- Replace 'Logged in as: [user]' text with profile avatar
- Use applesauce ProfileModel to fetch user's profile picture
- Display profile image in 33px square (same size as IconButton)
- Show fallback user icon when no profile image available
- Style avatar with same border radius and styling as IconButton
- Add tooltip showing user display name on hover
---
 src/components/SidebarHeader.tsx | 32 ++++++++++++++++++--------------
 src/index.css                    | 27 +++++++++++++++++++++------
 2 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/components/SidebarHeader.tsx b/src/components/SidebarHeader.tsx
index 5d583f41..534c6ca8 100644
--- a/src/components/SidebarHeader.tsx
+++ b/src/components/SidebarHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faRightFromBracket } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faRightFromBracket, faUser } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
@@ -15,22 +15,20 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
   const activeAccount = Hooks.useActiveAccount()
   const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null)
 
-  const formatUserDisplay = () => {
+  const getProfileImage = () => {
+    return profile?.picture || null
+  }
+
+  const getUserDisplayName = () => {
     if (!activeAccount) return 'Unknown User'
-
-    if (profile?.name) {
-      return profile.name
-    }
-    if (profile?.display_name) {
-      return profile.display_name
-    }
-    if (profile?.nip05) {
-      return profile.nip05
-    }
-
+    if (profile?.name) return profile.name
+    if (profile?.display_name) return profile.display_name
+    if (profile?.nip05) return profile.nip05
     return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
   }
 
+  const profileImage = getProfileImage()
+
   return (
     <div className="sidebar-header-bar">
       <button 
@@ -41,7 +39,13 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
       >
         <FontAwesomeIcon icon={faChevronLeft} />
       </button>
-      <p className="user-info">Logged in as: {formatUserDisplay()}</p>
+      <div className="profile-avatar" title={getUserDisplayName()}>
+        {profileImage ? (
+          <img src={profileImage} alt={getUserDisplayName()} />
+        ) : (
+          <FontAwesomeIcon icon={faUser} />
+        )}
+      </div>
       <IconButton
         icon={faRightFromBracket}
         onClick={onLogout}
diff --git a/src/index.css b/src/index.css
index ba992d88..86cbac1e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -110,13 +110,28 @@ body {
   margin-bottom: 1rem;
 }
 
-.sidebar-header-bar .user-info {
-  flex: 1;
-  margin: 0;
-  font-size: 0.85rem;
-  white-space: nowrap;
+.profile-avatar {
+  width: 33px;
+  height: 33px;
+  border-radius: 6px;
   overflow: hidden;
-  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #2a2a2a;
+  border: 1px solid #444;
+  flex-shrink: 0;
+  color: #ddd;
+}
+
+.profile-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.profile-avatar svg {
+  font-size: 1rem;
 }
 
 .sidebar-header-bar .toggle-sidebar-btn {