From ff7944a4a26362d42e59be2b54eb8bb8e34690f1 Mon Sep 17 00:00:00 2001
From: Redox <69946827+wrefgtzweve@users.noreply.github.com>
Date: Sat, 24 Jan 2026 22:34:38 +0100
Subject: [PATCH] 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/Dashboard.tsx           | 2 +-
 apps/web/src/components/SideNavigation.tsx      | 4 +++-
 apps/web/src/components/UserMenu.tsx            | 6 ++++--
 apps/web/src/views/settings/AccountSettings.tsx | 7 +++++++
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/Dashboard.tsx b/apps/web/src/components/Dashboard.tsx
index 7d2bb5f1..b35b12b0 100644
--- a/apps/web/src/components/Dashboard.tsx
+++ b/apps/web/src/components/Dashboard.tsx
@@ -155,7 +155,7 @@ export default function Dashboard({
             className={`fixed top-12 z-40 h-[calc(100dvh-3rem)] w-[calc(100vw-1.5rem)] transform transition-transform duration-300 ease-in-out md:relative md:top-0 md:h-full md:w-auto md:translate-x-0 ${isSideNavOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"} `}
           >
             <SideNavigation
-              user={{ email: session?.user.email, image: session?.user.image }}
+              user={{ displayName: session?.user.name, email: session?.user.email, image: session?.user.image }}
               isLoading={sessionLoading}
               onCloseSideNav={closeSideNav}
             />
diff --git a/apps/web/src/components/SideNavigation.tsx b/apps/web/src/components/SideNavigation.tsx
index 7b9361dd..76a3bfe1 100644
--- a/apps/web/src/components/SideNavigation.tsx
+++ b/apps/web/src/components/SideNavigation.tsx
@@ -39,6 +39,7 @@ interface SideNavigationProps {
 }
 
 interface UserType {
+  displayName?: string | null | undefined;
   email?: string | null | undefined;
   image?: string | null | undefined;
 }
@@ -206,7 +207,8 @@ export default function SideNavigation({
 
         <div className="space-y-2">
           <UserMenu
-            email={user.email ?? ""}
+            displayName={user.displayName ?? undefined}
+            email={user.email ?? "Email not provided?"}
             imageUrl={user.image ?? undefined}
             isLoading={isLoading}
             isCollapsed={isCollapsed}
diff --git a/apps/web/src/components/UserMenu.tsx b/apps/web/src/components/UserMenu.tsx
index 1fec9f1c..ddce97c4 100644
--- a/apps/web/src/components/UserMenu.tsx
+++ b/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>
         )}
diff --git a/apps/web/src/views/settings/AccountSettings.tsx b/apps/web/src/views/settings/AccountSettings.tsx
index d291c646..e28abb76 100644
--- a/apps/web/src/views/settings/AccountSettings.tsx
+++ b/apps/web/src/views/settings/AccountSettings.tsx
@@ -37,6 +37,13 @@ export default function AccountSettings() {
           <UpdateDisplayNameForm displayName={data?.name ?? ""} />
         </div>
 
+        <div className="mb-4">
+          <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+            {t`Email`}
+          </h2>
+          <p className="text-sm text-neutral-700 dark:text-dark-900">{data?.email}</p>
+        </div>
+
         <div className="mb-8 border-t border-light-300 dark:border-dark-300">
           <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
             {t`Language`}