From 2bcee6e07c67b20e50d5465415e55f53d32801eb Mon Sep 17 00:00:00 2001
From: cesnimda <connor.babbington@cesnimda.co.uk>
Date: Mon, 23 Mar 2026 21:07:21 +0100
Subject: [PATCH] Prefer usernames in shell and admin flows

---
 job-tracker-ui/src/components/AuthStatusCard.tsx | 2 +-
 job-tracker-ui/src/components/GoogleAuthCard.tsx | 2 +-
 job-tracker-ui/src/i18n/translations.ts          | 2 ++
 job-tracker-ui/src/layout/AppShell.tsx           | 4 ++--
 job-tracker-ui/src/pages/AdminUsersPage.tsx      | 3 ++-
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/job-tracker-ui/src/components/AuthStatusCard.tsx b/job-tracker-ui/src/components/AuthStatusCard.tsx
index eac3021..0bdddcf 100644
--- a/job-tracker-ui/src/components/AuthStatusCard.tsx
+++ b/job-tracker-ui/src/components/AuthStatusCard.tsx
@@ -39,7 +39,7 @@ export default function AuthStatusCard() {
       .catch(() => setMe(null));
   }, [token]);
 
-  const label = useMemo(() => me?.displayName || [me?.firstName, me?.lastName].filter(Boolean).join(" ") || me?.userName || me?.email, [me]);
+  const label = useMemo(() => me?.userName || me?.displayName || [me?.firstName, me?.lastName].filter(Boolean).join(" ") || me?.email, [me]);
 
   return (
     <Paper sx={{ mt: 2, p: 2 }}>
diff --git a/job-tracker-ui/src/components/GoogleAuthCard.tsx b/job-tracker-ui/src/components/GoogleAuthCard.tsx
index 8fbf654..ba4a9d7 100644
--- a/job-tracker-ui/src/components/GoogleAuthCard.tsx
+++ b/job-tracker-ui/src/components/GoogleAuthCard.tsx
@@ -154,7 +154,7 @@ export default function GoogleAuthCard({ onSignedIn }: { onSignedIn?: () => void
     };
   }, [clientId, me?.provider, me?.googleLink?.linked, onSignedIn, isRawGoogleToken, token, toast, t]);
 
-  const signedInName = me?.displayName || [me?.firstName, me?.lastName].filter(Boolean).join(" ") || me?.userName || me?.email || "";
+  const signedInName = me?.userName || me?.displayName || [me?.firstName, me?.lastName].filter(Boolean).join(" ") || me?.email || "";
 
   return (
     <Paper sx={{ mt: 2, p: 2 }}>
diff --git a/job-tracker-ui/src/i18n/translations.ts b/job-tracker-ui/src/i18n/translations.ts
index 0871e51..eb47ca4 100644
--- a/job-tracker-ui/src/i18n/translations.ts
+++ b/job-tracker-ui/src/i18n/translations.ts
@@ -278,6 +278,7 @@ export const translations = {
     adminUsersAdminYes: "Admin: Yes",
     adminUsersAdminNo: "Admin: No",
     adminUsersDeleteConfirmBody: "Delete this user?",
+    adminUsersDeleteConfirmNamed: "Delete user {name}?",
     adminUsersPassword: "Password",
     kanbanHint: "Drag cards between columns to update status.",
     kanbanDropHere: "Drop here",
@@ -990,6 +991,7 @@ export const translations = {
     adminUsersAdminYes: "Admin: Ja",
     adminUsersAdminNo: "Admin: Nei",
     adminUsersDeleteConfirmBody: "Slette denne brukeren?",
+    adminUsersDeleteConfirmNamed: "Slette bruker {name}?",
     adminUsersPassword: "Passord",
     kanbanHint: "Dra kort mellom kolonnene for å oppdatere status.",
     kanbanDropHere: "Slipp her",
diff --git a/job-tracker-ui/src/layout/AppShell.tsx b/job-tracker-ui/src/layout/AppShell.tsx
index 00b1a0d..bed598d 100644
--- a/job-tracker-ui/src/layout/AppShell.tsx
+++ b/job-tracker-ui/src/layout/AppShell.tsx
@@ -167,7 +167,7 @@ export default function AppShell({
     </Box>
   );
 
-  const nameForAvatar = user?.displayName || user?.userName || user?.email;
+  const nameForAvatar = user?.userName || user?.displayName || user?.email;
   const initials = initialsFrom(nameForAvatar);
 
   const [userMenuAnchor, setUserMenuAnchor] = useState<null | HTMLElement>(null);
@@ -232,7 +232,7 @@ export default function AppShell({
                 <Avatar src={user.avatarImageDataUrl || undefined} sx={{ width: 30, height: 30, fontWeight: 900 }}>{initials}</Avatar>
               </IconButton>
               <Box sx={{ display: { xs: "none", sm: "block" } }}>
-                <Typography sx={{ fontWeight: 600, lineHeight: 1.2 }}>{user.displayName || user.userName || user.email || t("user")}</Typography>
+                <Typography sx={{ fontWeight: 600, lineHeight: 1.2 }}>{user.userName || user.displayName || user.email || t("user")}</Typography>
                 <Typography variant="caption" sx={{ color: "text.secondary" }}>
                   {user.roleLabel || ""}
                 </Typography>
diff --git a/job-tracker-ui/src/pages/AdminUsersPage.tsx b/job-tracker-ui/src/pages/AdminUsersPage.tsx
index d83c18b..ebcf568 100644
--- a/job-tracker-ui/src/pages/AdminUsersPage.tsx
+++ b/job-tracker-ui/src/pages/AdminUsersPage.tsx
@@ -80,7 +80,8 @@ export default function AdminUsersPage() {
   };
 
   const remove = async (u: UserDto) => {
-    if (!(await confirmAction(`Delete user ${u.email || u.userName || u.id}?`, { title: t("adminUsersDeleteConfirmTitle"), confirmLabel: t("adminUsersDelete"), destructive: true }))) return;
+    const name = u.userName || u.email || u.id;
+    if (!(await confirmAction(t("adminUsersDeleteConfirmNamed", { name }), { title: t("adminUsersDeleteConfirmTitle"), confirmLabel: t("adminUsersDelete"), destructive: true }))) return;
     try {
       await api.delete(`/users/${u.id}`);
       toast(t("adminUsersDeleted"), "info");