Show display name instead of email (#323)

* Show display name instead of email

* Properly pass displayName

* Show email on settings page too

* Show email on missing username

apps/web/src/components/UserMenu.tsx

@@ -17,6 +17,7 @@ import { getAvatarUrl } from "~/utils/helpers";
 
 interface UserMenuProps {
   imageUrl: string | undefined;
+  displayName: string | undefined;
   email: string;
   isLoading: boolean;
   isCollapsed?: boolean;
@@ -26,6 +27,7 @@ interface UserMenuProps {
 export default function UserMenu({
   imageUrl,
   email,
+  displayName,
   isLoading,
   isCollapsed = false,
   onCloseSideNav,
@@ -75,7 +77,7 @@ export default function UserMenu({
         ) : (
           <Menu.Button
             className="flex w-full items-center rounded-md p-1.5 text-neutral-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000"
-            title={isCollapsed ? email : undefined}
+            title={isCollapsed ? displayName ?? email : undefined}
           >
             {avatarUrl ? (
               <Image
@@ -102,7 +104,7 @@ export default function UserMenu({
                 isCollapsed && "md:hidden",
               )}
             >
-              {email}
+              {displayName ?? email}
             </span>
           </Menu.Button>
         )}