From 304349fce80fb1e30866cc7346efc2f12db12898 Mon Sep 17 00:00:00 2001
From: Michelle <michelle.winkler@miichelle.moe>
Date: Mon, 2 Mar 2026 16:22:20 +0100
Subject: [PATCH] feat(sidebar): enhance user avatar display with image support
 and overflow handling

---
 src/components/Sidebar.jsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index d4cd0c0..428d0eb 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -104,10 +104,18 @@ export default function Sidebar({ open, onClose }) {
           <div className="p-4 border-t border-th-border">
             <div className="flex items-center gap-3">
               <div
-                className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0"
+                className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 overflow-hidden"
                 style={{ backgroundColor: user?.avatar_color || '#6366f1' }}
               >
-                {(user?.display_name || user?.name)?.[0]?.toUpperCase() || '?'}
+                {user?.avatar_image ? (
+                  <img
+                    src={`${api.defaults.baseURL}/auth/avatar/${user.avatar_image}`}
+                    alt="Avatar"
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  (user?.display_name || user?.name)?.[0]?.toUpperCase() || '?'
+                )}
               </div>
               <div className="min-w-0">
                 <p className="text-sm font-medium text-th-text truncate">{user?.display_name || user?.name}</p>