feat(ui): establish Settings page layout primitives

job-tracker-ui/src/components/AiUsageCard.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { Alert, Box, Button, LinearProgress, Paper, Skeleton, Stack, Typography } from "@mui/material";
+import { Alert, Box, Button, LinearProgress, Skeleton, Typography } from "@mui/material";
+import { PageSection } from "../layout/PageLayout";
 import { api } from "../api";
 import { useI18n } from "../i18n/I18nProvider";
 
@@ -59,11 +60,7 @@ export default function AiUsageCard() {
   const storagePercent = Math.min(100, usage.storageUsedBytes / usage.storageLimitBytes * 100);
 
   return (
-    <Paper sx={{ p: 2.5, borderRadius: 4, border: "none" }}>
-      <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: 2 }}>
-        <Typography variant="overline" sx={{ color: "text.secondary", fontWeight: 800 }}>{t("settingsUsageTitle")}</Typography>
-        <Typography variant="caption" sx={{ textTransform: "capitalize", fontWeight: 700 }}>{t("settingsUsagePlan", { plan: usage.plan })}</Typography>
-      </Stack>
+    <PageSection surface title={t("settingsUsageTitle")} actions={<Typography variant="caption" sx={{ textTransform: "capitalize", fontWeight: 700 }}>{t("settingsUsagePlan", { plan: usage.plan })}</Typography>}>
       {usage.monthlyCallLimit === 0 ? <Alert severity="info" sx={{ mb: 2 }}>{t("settingsUsageNoAi")}</Alert> : <><Box sx={{ mb: 2 }}>
         <Typography variant="body2">{t("settingsUsageGenerations", { used: usage.currentMonth.calls.toLocaleString(), limit: usage.monthlyCallLimit.toLocaleString() })}</Typography>
         <LinearProgress variant="determinate" value={callsPercent} aria-label={t("settingsUsageGenerationsProgress")} sx={{ mt: 0.75, height: 7, borderRadius: 99 }} />
@@ -85,6 +82,6 @@ export default function AiUsageCard() {
           {t("settingsBillingNotConfigured")}
         </Typography>
       ) : null}
-    </Paper>
+    </PageSection>
   );
 }