feat(ui): redesign grouped application shell

job-tracker-ui/src/confirm.tsx

@@ -24,6 +24,7 @@ export function ConfirmProvider({ children }: { children: React.ReactNode }) {
   const i18n = useOptionalI18n();
   const messageId = useId();
   const resolverRef = useRef<((value: boolean) => void) | null>(null);
+  const cancelButtonRef = useRef<HTMLButtonElement>(null);
   const [state, setState] = useState<ConfirmState>({
     open: false,
     message: "",
@@ -60,7 +61,10 @@ export function ConfirmProvider({ children }: { children: React.ReactNode }) {
     <ConfirmContext.Provider value={value}>
       {children}
       <Dialog open={state.open} onClose={() => closeWith(false)} aria-describedby={messageId} fullWidth maxWidth="xs"
-        slotProps={{ paper: { sx: { borderRadius: 3, border: 1, borderColor: "divider", backgroundImage: "none" } } }}>
+        slotProps={{
+          paper: { sx: { borderRadius: 3, border: 1, borderColor: "divider", backgroundImage: "none" } },
+          transition: { onEntered: () => cancelButtonRef.current?.focus() },
+        }}>
         <DialogTitle sx={{ pb: 1, fontWeight: 800 }}>{state.title}</DialogTitle>
         <DialogContent>
           <Alert severity={state.destructive ? "warning" : "info"} variant="outlined" sx={{ mb: 2 }}>
@@ -71,7 +75,7 @@ export function ConfirmProvider({ children }: { children: React.ReactNode }) {
           <Typography id={messageId} sx={{ color: "text.secondary" }}>{state.message}</Typography>
         </DialogContent>
         <DialogActions sx={{ px: 3, pb: 2.5, gap: 1 }}>
-          <Button autoFocus onClick={() => closeWith(false)}>{state.cancelLabel}</Button>
+          <Button ref={cancelButtonRef} autoFocus onClick={() => closeWith(false)}>{state.cancelLabel}</Button>
           <Button color={state.destructive ? "error" : "primary"} variant="contained" onClick={() => closeWith(true)}>
             {state.confirmLabel}
           </Button>