feat(ui): establish Settings page layout primitives

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

@@ -31,6 +31,7 @@ import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 
 import JobbjaktMark from "../assets/JobbjaktMark";
+import { PageHeader, type PageWidth } from "./PageLayout";
 import { useI18n } from "../i18n/I18nProvider";
 
 export type NavItem = {
@@ -78,6 +79,7 @@ const SIDEBAR_SELECTED_ICON = "var(--palette-navigation-selectedIcon)";
 export default function AppShell({
   pageTitle,
   pageSubtitle,
+  pageLayout,
   breadcrumbs,
   pathname,
   nav,
@@ -97,6 +99,7 @@ export default function AppShell({
 }: {
   pageTitle: string;
   pageSubtitle?: string;
+  pageLayout?: PageWidth;
   breadcrumbs: string[];
   pathname: string;
   nav: NavItem[];
@@ -527,7 +530,7 @@ export default function AppShell({
           minWidth: 0,
         }}
       >
-        <Box sx={{ mx: "auto", maxWidth: 1320, width: "100%", minWidth: 0 }}>
+        <Box sx={{ mx: "auto", maxWidth: pageLayout ? `var(--app-page-width-${pageLayout})` : 1320, width: "100%", minWidth: 0 }}>
           <Toolbar sx={{ minHeight: { xs: isMobile ? 124 : 68, md: 76 } }} />
           <Box sx={{ display: "flex", flexDirection: "column", gap: 0.75, mb: "var(--app-section-gap)", minWidth: 0 }}>
             <Box sx={{ minWidth: 0 }}>
@@ -538,14 +541,18 @@ export default function AppShell({
                   </Typography>
                 ))}
               </Breadcrumbs>
-              <Typography variant="h5" sx={{ fontWeight: 600, overflowWrap: "anywhere" }}>
-                {pageTitle}
-              </Typography>
-              {pageSubtitle ? (
-                <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.25, overflowWrap: "anywhere" }}>
-                  {pageSubtitle}
-                </Typography>
-              ) : null}
+              {pageLayout ? <PageHeader title={pageTitle} description={pageSubtitle} /> : (
+                <>
+                  <Typography variant="h5" sx={{ fontWeight: 600, overflowWrap: "anywhere" }}>
+                    {pageTitle}
+                  </Typography>
+                  {pageSubtitle ? (
+                    <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.25, overflowWrap: "anywhere" }}>
+                      {pageSubtitle}
+                    </Typography>
+                  ) : null}
+                </>
+              )}
             </Box>
           </Box>