Add display name support for user management and update related components

src/components/Navbar.jsx

@@ -27,8 +27,8 @@ export default function Navbar({ onMenuClick }) {
     navigate('/');
   };
 
-  const initials = user?.name
-    ? user.name
+  const initials = (user?.display_name || user?.name)
+    ? (user.display_name || user.name)
         .split(' ')
         .map(n => n[0])
         .join('')
@@ -72,14 +72,14 @@ export default function Navbar({ onMenuClick }) {
                 )}
               </div>
               <span className="hidden md:block text-sm font-medium text-th-text">
-                {user?.name}
+                {user?.display_name || user?.name}
               </span>
             </button>
 
             {dropdownOpen && (
               <div className="absolute right-0 mt-2 w-56 bg-th-card rounded-xl border border-th-border shadow-th-lg overflow-hidden">
                 <div className="px-4 py-3 border-b border-th-border">
-                  <p className="text-sm font-medium text-th-text">{user?.name}</p>
+                  <p className="text-sm font-medium text-th-text">{user?.display_name || user?.name}</p>
                   <p className="text-xs text-th-text-s">{user?.email}</p>
                 </div>
                 <div className="py-1">

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>