refactor: update user references from username to name

- Replaced instances of `user.username` with `user.name` in `SidebarUser`, `UserButton`, and `UpdateNameCard` components for consistency and clarity.
- Adjusted the default values in the form handling to reflect the change from username to name.
- Updated comments in `auth.ts` to clarify the implementation status of username support.

src/components/dashboard/sidebar-user.tsx

@@ -93,14 +93,14 @@ export function SidebarUser() {
               data-[state=open]:text-sidebar-accent-foreground"
             >
               <UserAvatar
-                name={user.username || undefined}
+                name={user.name || undefined}
                 image={user.image || undefined}
                 className="size-8 border"
               />
 
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-semibold">
-                  {user.username}
+                  {user.name}
                 </span>
                 <span className="truncate text-xs">
                   {user.email}
@@ -118,12 +118,12 @@ export function SidebarUser() {
             <DropdownMenuLabel className="p-0 font-normal">
               <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                 <UserAvatar
-                  name={user.username || undefined}
+                  name={user.name || undefined}
                   image={user.image || undefined}
                   className="size-8 border"
                 />
                 <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-semibold">{user.username}</span>
+                  <span className="truncate font-semibold">{user.name}</span>
                   <span className="truncate text-xs">{user.email}</span>
                 </div>
               </div>

src/components/layout/user-button.tsx

@@ -62,7 +62,7 @@ export function UserButton() {
       <Drawer open={open} onClose={closeDrawer}>
         <DrawerTrigger onClick={() => setOpen(true)}>
           <UserAvatar
-            name={user?.username || undefined}
+            name={user?.name || undefined}
             image={user?.image || undefined}
             className="size-8 border"
           />
@@ -78,13 +78,13 @@ export function UserButton() {
             </DrawerHeader>
             <div className="flex items-center justify-start gap-4 p-2">
               <UserAvatar
-                name={user?.username || undefined}
+                name={user?.name || undefined}
                 image={user?.image || undefined}
                 className="size-8 border"
               />
               <div className="flex flex-col">
-                {user?.username && <p className="font-medium">
-                  {user.username}
+                {user?.name && <p className="font-medium">
+                  {user.name}
                 </p>}
                 {user?.email && (
                   <p className="w-[200px] truncate text-muted-foreground">
@@ -141,7 +141,7 @@ export function UserButton() {
     <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger>
         <UserAvatar
-          name={user?.username || undefined}
+          name={user?.name || undefined}
           image={user?.image || undefined}
           className="size-8 border"
         />
@@ -149,8 +149,8 @@ export function UserButton() {
       <DropdownMenuContent align="end">
         <div className="flex items-center justify-start gap-2 p-2">
           <div className="flex flex-col space-y-1 leading-none">
-            {user?.username && <p className="font-medium">
-              {user.username}
+            {user?.name && <p className="font-medium">
+              {user.name}
             </p>}
             {user?.email && (
               <p className="w-[200px] truncate text-sm text-muted-foreground">

src/components/settings/account/update-name-card.tsx

@@ -28,12 +28,6 @@ import { z } from 'zod';
 
 /**
  * update user name
- * 
- * NOTICE: we update username instead of name in user table
- * 
- * TODO: by default, username is empty, how can we show the username after signup?
- * 
- * https://www.better-auth.com/docs/plugins/username
  */
 export function UpdateNameCard() {
   const t = useTranslations('Dashboard.sidebar.settings.items.account');
@@ -53,13 +47,13 @@ export function UpdateNameCard() {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      name: session?.user?.username || '',
+      name: session?.user?.name || '',
     },
   });
 
   useEffect(() => {
-    if (session?.user?.username) {
-      form.setValue('name', session.user.username);
+    if (session?.user?.name) {
+      form.setValue('name', session.user.name);
     }
   }, [session, form]);
 
@@ -72,14 +66,14 @@ export function UpdateNameCard() {
   // Handle form submission
   const onSubmit = async (values: z.infer<typeof formSchema>) => {
     // Don't update if the name hasn't changed
-    if (values.name === session?.user?.username) {
+    if (values.name === session?.user?.name) {
       console.log("No changes to save");
       return;
     }
 
     const { data, error } = await authClient.updateUser(
       {
-        username: values.name,
+        name: values.name,
       },
       {
         onRequest: (ctx) => {

src/lib/auth.ts

@@ -101,6 +101,7 @@ export const auth = betterAuth({
   },
   plugins: [
     // https://www.better-auth.com/docs/plugins/username
+    // support sign in and sign up with username, but not implemented
     username({
       minUsernameLength: 3,
       maxUsernameLength: 30,
@@ -112,6 +113,7 @@ export const auth = betterAuth({
       }
     }),
     // https://www.better-auth.com/docs/plugins/admin
+    // support user management, ban/unban user, manage user roles, etc.
     admin(),
   ],
   onAPIError: {