feat(ui): redesign job workspace sections

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

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useState } from "react";
 
 import {
-  Alert, Box, Button, Checkbox, Chip, Divider, IconButton, LinearProgress, MenuItem, Paper,
-  Skeleton, Stack, TextField, Tooltip, Typography,
+  Alert, Box, Button, Checkbox, Chip, IconButton, LinearProgress, MenuItem, Paper,
+  Stack, TextField, Tooltip, Typography,
 } from "@mui/material";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
@@ -16,6 +16,8 @@ import { aiWorkspaceApi } from "../aiWorkspace";
 import { useAccountPlan } from "../accountPlan";
 import { useI18n } from "../i18n/I18nProvider";
 import { useConfirm } from "../confirm";
+import { PageSection } from "../layout/PageLayout";
+import ViewStateNotice from "./ViewStateNotice";
 
 // Phase 5.5 — Interview preparation and follow-up.
 //
@@ -31,18 +33,10 @@ function Shell({ title, subtitle, loading, error, children }: {
   children: React.ReactNode;
 }) {
   return (
-    <Paper sx={{ p: { xs: 2, sm: 2.5 }, borderRadius: 3 }}>
-      <Typography variant="subtitle2" sx={{ fontWeight: 800 }}>{title}</Typography>
-      {subtitle && <Typography variant="caption" color="text.secondary">{subtitle}</Typography>}
-      <Divider sx={{ my: 1.5 }} />
-      {loading ? (
-        <Stack spacing={1}>{[0, 1, 2].map((i) => <Skeleton key={i} variant="rounded" height={44} />)}</Stack>
-      ) : error ? (
-        <Alert severity="error">{error}</Alert>
-      ) : (
-        children
-      )}
-    </Paper>
+    <PageSection surface title={title} description={subtitle} level="h3">
+      <ViewStateNotice title={title} loading={loading} error={error ? { kind: "error", message: error, retryable: false } : null} compact />
+      {!loading && !error && children}
+    </PageSection>
   );
 }
 
@@ -367,6 +361,7 @@ function PrepRow({ jobId, item, busy, onChanged, onError }: {
             fullWidth
             size="small"
             placeholder={t("interviewPrepAnswerPlaceholder")}
+            inputProps={{ "aria-label": t("interviewPrepAnswerFor", { title: item.title }) }}
             value={content}
             disabled={busy || saving}
             onChange={(e) => setDraft(e.target.value)}