🚸(frontend) display email with username to clarify logged-in account

Show email alongside full name when available to prevent user confusion
about which account is currently logged in. Enhances general app UX.

src/frontend/src/features/settings/components/SettingsDialog.tsx

@@ -10,6 +10,10 @@ export const SettingsDialog = (props: SettingsDialogProps) => {
   const { t, i18n } = useTranslation('settings')
   const { user, isLoggedIn, logout } = useUser()
   const { languagesList, currentLanguage } = useLanguageLabels()
+  const userDisplay =
+    user?.full_name && user?.email
+      ? `${user.full_name} (${user.email})`
+      : user?.email
   return (
     <Dialog title={t('dialog.heading')} {...props}>
       <H lvl={2}>{t('account.heading')}</H>
@@ -18,7 +22,7 @@ export const SettingsDialog = (props: SettingsDialogProps) => {
           <P>
             <Trans
               i18nKey="settings:account.currentlyLoggedAs"
-              values={{ user: user?.full_name ?? user?.email }}
+              values={{ user: userDisplay }}
               components={[<Badge />]}
             />
           </P>

src/frontend/src/features/settings/components/tabs/AccountTab.tsx

@@ -18,6 +18,10 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
   const room = useRoomContext()
   const { user, isLoggedIn, logout } = useUser()
   const [name, setName] = useState(room?.localParticipant.name ?? '')
+  const userDisplay =
+    user?.full_name && user?.email
+      ? `${user.full_name} (${user.email})`
+      : user?.email
 
   const handleOnSubmit = () => {
     if (room) room.localParticipant.setName(name)
@@ -46,7 +50,7 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
           <P>
             <Trans
               i18nKey="settings:account.currentlyLoggedAs"
-              values={{ user: user?.full_name || user?.email }}
+              values={{ user: userDisplay }}
               components={[<Badge />]}
             />
           </P>