Polish UI, harden company creation, and add error pages

job-tracker-ui/src/layout/AppShell.tsx

@@ -24,6 +24,7 @@ import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 
 import { ReactComponent as JobbjaktMark } from "../assets/jobbbjakt-mark.svg";
+import { useI18n } from "../i18n/I18nProvider";
 
 export type NavItem = {
   to: string;
@@ -68,7 +69,7 @@ export default function AppShell({
   onNavigate: (to: string) => void;
   onToggleDrawer: (open: boolean) => void;
   drawerOpen: boolean;
-  user?: { email?: string; userName?: string; roleLabel?: string };
+  user?: { email?: string; userName?: string; displayName?: string; avatarImageDataUrl?: string; roleLabel?: string };
   notificationsCount?: number;
   onOpenNotifications?: () => void;
   onOpenSettings?: () => void;
@@ -77,6 +78,7 @@ export default function AppShell({
   rightActions?: React.ReactNode;
   children: React.ReactNode;
 }) {
+  const { t } = useI18n();
   const drawerWidth = 254;
 
   const grouped = useMemo(() => {
@@ -149,7 +151,7 @@ export default function AppShell({
           </Typography>
         </Box>
         <Typography variant="caption" sx={{ color: "text.secondary" }}>
-          Track your hunt
+          {t("appTagline")}
         </Typography>
       </Box>
 
@@ -165,7 +167,8 @@ export default function AppShell({
     </Box>
   );
 
-  const initials = initialsFrom(user?.userName || user?.email);
+  const nameForAvatar = user?.displayName || user?.userName || user?.email;
+  const initials = initialsFrom(nameForAvatar);
 
   const [userMenuAnchor, setUserMenuAnchor] = useState<null | HTMLElement>(null);
   const userMenuOpen = Boolean(userMenuAnchor);
@@ -194,14 +197,12 @@ export default function AppShell({
             <MenuIcon fontSize="small" />
           </IconButton>
 
-          <Box sx={{ flex: 1, display: "flex", alignItems: "center", gap: 1.25 }}>
-            {/* Top-bar search removed (unused). */}
-          </Box>
+          <Box sx={{ flex: 1, display: "flex", alignItems: "center", gap: 1.25 }} />
 
           <IconButton
             color="secondary"
             size="small"
-            title="Notifications"
+            title={t("notifications")}
             onClick={onOpenNotifications}
             sx={{ border: "1px solid", borderColor: "divider", borderRadius: 2 }}
           >
@@ -212,7 +213,7 @@ export default function AppShell({
           <IconButton
             color="secondary"
             size="small"
-            title="Settings"
+            title={t("settings")}
             onClick={onOpenSettings}
             sx={{ border: "1px solid", borderColor: "divider", borderRadius: 2 }}
           >
@@ -228,10 +229,10 @@ export default function AppShell({
                 onClick={(e) => setUserMenuAnchor(e.currentTarget)}
                 sx={{ borderRadius: 2, border: "1px solid", borderColor: "divider" }}
               >
-                <Avatar sx={{ width: 30, height: 30, fontWeight: 900 }}>{initials}</Avatar>
+                <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.userName || user.email || "User"}</Typography>
+                <Typography sx={{ fontWeight: 600, lineHeight: 1.2 }}>{user.displayName || user.userName || user.email || t("user")}</Typography>
                 <Typography variant="caption" sx={{ color: "text.secondary" }}>
                   {user.roleLabel || ""}
                 </Typography>
@@ -252,7 +253,7 @@ export default function AppShell({
                 onOpenProfile?.();
               }}
             >
-              Profile
+              {t("profileMenu")}
             </MenuItem>
             <MenuItem
               onClick={() => {
@@ -260,7 +261,7 @@ export default function AppShell({
                 onOpenSettings?.();
               }}
             >
-              Settings
+              {t("settingsMenu")}
             </MenuItem>
             <Divider />
             <MenuItem
@@ -269,7 +270,7 @@ export default function AppShell({
                 onSignOut?.();
               }}
             >
-              Sign out
+              {t("signOut")}
             </MenuItem>
           </Menu>
         </Toolbar>