From 95cbd0240f397b21b13c143a55f5b5d87dd2be1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E9=97=BB=E9=A3=8E?= <wuwenfengmi@gmail.com>
Date: Mon, 22 Jun 2026 19:01:24 +0800
Subject: [PATCH] feat: display user's display name next to avatar in
 navigation

- Show display name (or username as fallback) next to avatar
- Improve UI readability and user experience
- Avatar and name together act as dropdown trigger

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 templates/layouts/base.html | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index adaa894..4d0a955 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -30,14 +30,17 @@
                 {{if .IsLoggedIn}}
                     <!-- Avatar Dropdown (click to toggle) -->
                     <div class="relative" id="avatarDropdown">
-                        <button type="button" id="avatarBtn" class="w-9 h-9 rounded-full overflow-hidden border-2 border-gray-300 hover:border-blue-500 transition-colors flex items-center justify-center bg-gray-200 text-gray-600 font-bold text-sm cursor-pointer" onclick="toggleDropdown()">
-                            {{if .Avatar}}
-                                <img src="/uploads/avatars/{{.Avatar}}" alt="avatar" class="w-full h-full object-cover">
-                            {{else}}
-                                <svg class="w-5 h-5 text-gray-500 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
-                                    <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v1.2c0 .66.54 1.2 1.2 1.2h16.8c.66 0 1.2-.54 1.2-1.2v-1.2c0-3.2-6.4-4.8-9.6-4.8z"/>
-                                </svg>
-                            {{end}}
+                        <button type="button" id="avatarBtn" class="flex items-center gap-2 hover:opacity-80 transition-opacity cursor-pointer" onclick="toggleDropdown()">
+                            <div class="w-9 h-9 rounded-full overflow-hidden border-2 border-gray-300 hover:border-blue-500 transition-colors flex items-center justify-center bg-gray-200 text-gray-600 font-bold text-sm">
+                                {{if .Avatar}}
+                                    <img src="/uploads/avatars/{{.Avatar}}" alt="avatar" class="w-full h-full object-cover">
+                                {{else}}
+                                    <svg class="w-5 h-5 text-gray-500 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v1.2c0 .66.54 1.2 1.2 1.2h16.8c.66 0 1.2-.54 1.2-1.2v-1.2c0-3.2-6.4-4.8-9.6-4.8z"/>
+                                    </svg>
+                                {{end}}
+                            </div>
+                            <span class="text-sm font-medium text-gray-700">{{if .DisplayName}}{{.DisplayName}}{{else}}{{.Username}}{{end}}</span>
                         </button>
                         <div id="dropdownMenu" class="absolute right-0 mt-2 w-44 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50 hidden">
                             <a href="/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">