Add display name support for user management and update related components

src/components/Sidebar.jsx

@@ -106,10 +106,10 @@ export default function Sidebar({ open, onClose }) {
                 className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0"
                 style={{ backgroundColor: user?.avatar_color || '#6366f1' }}
               >
-                {user?.name?.[0]?.toUpperCase() || '?'}
+                {(user?.display_name || user?.name)?.[0]?.toUpperCase() || '?'}
               </div>
               <div className="min-w-0">
-                <p className="text-sm font-medium text-th-text truncate">{user?.name}</p>
+                <p className="text-sm font-medium text-th-text truncate">{user?.display_name || user?.name}</p>
                 <p className="text-xs text-th-text-s truncate">{user?.email}</p>
               </div>
             </div>