feat(sidebar): enhance user avatar display with image support and overflow handling

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>