Translate job details and saved views flows

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

@@ -14,6 +14,8 @@ import {
 import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 
+import { useI18n } from "../i18n/I18nProvider";
+
 export type SavedViewParams = {
   q?: string;
   status?: string;
@@ -54,6 +56,7 @@ export default function SavedViewsMenu({
   current: SavedViewParams;
   onApply: (p: SavedViewParams) => void;
 }) {
+  const { t } = useI18n();
   const [anchor, setAnchor] = useState<HTMLElement | null>(null);
   const [name, setName] = useState("");
   const [views, setViews] = useState<SavedView[]>(() => loadViews());
@@ -86,7 +89,7 @@ export default function SavedViewsMenu({
 
   return (
     <>
-      <Tooltip title="Saved views">
+      <Tooltip title={t("savedViewsTooltip")}>
         <IconButton size="small" onClick={(e) => setAnchor(e.currentTarget)}>
           <BookmarkBorderIcon fontSize="small" />
         </IconButton>
@@ -100,15 +103,15 @@ export default function SavedViewsMenu({
       >
         <MenuItem disableRipple sx={{ cursor: "default", alignItems: "flex-start" }}>
           <ListItemText
-            primary="Saved views"
-            secondary="Save the current filters as a 1-click view."
+            primary={t("savedViewsTitle")}
+            secondary={t("savedViewsSubtitle")}
           />
         </MenuItem>
 
         <MenuItem disableRipple sx={{ cursor: "default" }}>
           <TextField
             size="small"
-            label="Name"
+            label={t("savedViewsName")}
             value={name}
             onChange={(e) => setName(e.target.value)}
             fullWidth
@@ -116,14 +119,14 @@ export default function SavedViewsMenu({
         </MenuItem>
         <MenuItem disableRipple sx={{ cursor: "default", justifyContent: "flex-end" }}>
           <Button variant="contained" size="small" onClick={add} disabled={!canSave}>
-            Save current
+            {t("savedViewsSaveCurrent")}
           </Button>
         </MenuItem>
 
         <Divider />
 
         {!hasAny && (
-          <MenuItem disabled>No saved views yet.</MenuItem>
+          <MenuItem disabled>{t("savedViewsEmpty")}</MenuItem>
         )}
 
         {views.map((v) => (
@@ -139,12 +142,12 @@ export default function SavedViewsMenu({
               primary={v.name}
               secondary={
                 [
-                  v.params.status ? `Status: ${v.params.status}` : null,
-                  v.params.location ? `Loc: ${v.params.location}` : null,
-                  v.params.needsFollowUp ? "Needs follow-up" : null,
+                  v.params.status ? t("savedViewsStatusLabel", { value: v.params.status }) : null,
+                  v.params.location ? t("savedViewsLocationLabel", { value: v.params.location }) : null,
+                  v.params.needsFollowUp ? t("savedViewsNeedsFollowUp") : null,
                 ]
                   .filter(Boolean)
-                  .join(" · ") || "No filters"
+                  .join(" · ") || t("savedViewsNoFilters")
               }
             />
             <IconButton