From af58145fe14d73f8615c450ae8e1fb30b414a504 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sun, 12 Apr 2026 23:07:28 +0200
Subject: [PATCH] feat: show avatar image in top nav when user has one

UserMenu now fetches the user's profile and displays their avatar
image in the nav button instead of the default circle-user icon.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/components/UserMenu.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/client/components/UserMenu.tsx b/src/client/components/UserMenu.tsx
index 6bf2918..2e68492 100644
--- a/src/client/components/UserMenu.tsx
+++ b/src/client/components/UserMenu.tsx
@@ -1,12 +1,17 @@
 import { Link } from "@tanstack/react-router";
 import { useEffect, useRef, useState } from "react";
-import { useLogout } from "../hooks/useAuth";
+import { useAuth, useLogout } from "../hooks/useAuth";
+import { usePublicProfile } from "../hooks/useProfile";
 import { LucideIcon } from "../lib/iconData";
 
 export function UserMenu() {
 	const [open, setOpen] = useState(false);
 	const menuRef = useRef<HTMLDivElement>(null);
 	const { logout } = useLogout();
+	const { data: auth } = useAuth();
+	const userId = auth?.user?.id ? Number(auth.user.id) : null;
+	const { data: profile } = usePublicProfile(userId);
+	const avatarUrl = profile?.avatarImageUrl;
 
 	useEffect(() => {
 		if (!open) return;
@@ -24,9 +29,17 @@ export function UserMenu() {
 			<button
 				type="button"
 				onClick={() => setOpen((prev) => !prev)}
-				className="flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors"
+				className="flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors overflow-hidden"
 			>
-				<LucideIcon name="circle-user" size={22} />
+				{avatarUrl ? (
+					<img
+						src={avatarUrl}
+						alt="Profile"
+						className="w-8 h-8 rounded-full object-cover"
+					/>
+				) : (
+					<LucideIcon name="circle-user" size={22} />
+				)}
 			</button>
 			{open && (
 				<div className="absolute right-0 mt-1 w-40 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">