feat(jobs): persist list state in URL

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

@@ -104,6 +104,37 @@ interface Props {
   mode?: "jobs" | "trash";
 }
 
+type JobSortKey = "dateApplied" | "company" | "jobTitle" | "status" | "daysSince" | "location";
+type ReadinessFilter = "all" | "needs-work" | "interview";
+
+const JOB_SORT_KEYS: JobSortKey[] = ["dateApplied", "company", "jobTitle", "status", "daysSince", "location"];
+const JOB_STATUS_FILTERS = ["Applied", "Waiting", "Interview", "Offer", "Rejected", "Ghosted"];
+
+function queryPage(search: string): number {
+  const value = Number(new URLSearchParams(search).get("page"));
+  return Number.isInteger(value) && value > 1 ? value - 1 : 0;
+}
+
+function queryCompany(search: string): number | "All" {
+  const value = Number(new URLSearchParams(search).get("companyId"));
+  return Number.isInteger(value) && value > 0 ? value : "All";
+}
+
+function queryStatus(search: string): string {
+  const value = new URLSearchParams(search).get("status");
+  return value && JOB_STATUS_FILTERS.includes(value) ? value : "All";
+}
+
+function queryReadiness(search: string): ReadinessFilter {
+  const value = new URLSearchParams(search).get("readiness");
+  return value === "needs-work" || value === "interview" ? value : "all";
+}
+
+function querySort(search: string): JobSortKey {
+  const value = new URLSearchParams(search).get("sortBy") as JobSortKey | null;
+  return value && JOB_SORT_KEYS.includes(value) ? value : "dateApplied";
+}
+
 function parseTags(raw?: string | null): string[] {
   if (!raw) return [];
   try {
@@ -160,20 +191,20 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
   const navigate = useNavigate();
   const [jobs, setJobs] = useState<JobApplication[]>([]);
   const [total, setTotal] = useState(0);
-  const [page, setPage] = useState(0);
+  const [page, setPage] = useState(() => queryPage(location.search));
   const [expanded, setExpanded] = useState<number[]>([]);
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState(() => new URLSearchParams(location.search).get("q") ?? "");
   const debouncedSearch = useDebouncedValue(search, 250);
-  const [includeDeleted, setIncludeDeleted] = useState(mode === "trash");
+  const [includeDeleted, setIncludeDeleted] = useState(() => mode === "trash" || new URLSearchParams(location.search).get("includeDeleted") === "1");
   const [columnsAnchor, setColumnsAnchor] = useState<null | HTMLElement>(null);
-  const [statusFilter, setStatusFilter] = useState("All");
-  const [locationFilter, setLocationFilter] = useState("");
+  const [statusFilter, setStatusFilter] = useState(() => queryStatus(location.search));
+  const [locationFilter, setLocationFilter] = useState(() => new URLSearchParams(location.search).get("location") ?? "");
   const debouncedLocation = useDebouncedValue(locationFilter, 250);
-  const [needsFollowUpOnly, setNeedsFollowUpOnly] = useState(false);
-  const [readinessFilter, setReadinessFilter] = useState<"all" | "needs-work" | "interview">("all");
+  const [needsFollowUpOnly, setNeedsFollowUpOnly] = useState(() => new URLSearchParams(location.search).get("needsFollowUp") === "1");
+  const [readinessFilter, setReadinessFilter] = useState<ReadinessFilter>(() => queryReadiness(location.search));
   const { companies, error: companiesError, reload: reloadCompanies } = useCompanies();
-  const [companyFilterId, setCompanyFilterId] = useState<number | "All">("All");
+  const [companyFilterId, setCompanyFilterId] = useState<number | "All">(() => queryCompany(location.search));
   const [detailsJobId, setDetailsJobId] = useState<number | null>(null);
   const [detailsInitialTab, setDetailsInitialTab] = useState(0);
   const [detailsFollowUpMode, setDetailsFollowUpMode] = useState<string | undefined>(undefined);
@@ -181,12 +212,95 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
   const [reloadToken, setReloadToken] = useState(0);
   const [statusAnchor, setStatusAnchor] = useState<null | HTMLElement>(null);
   const [statusJobId, setStatusJobId] = useState<number | null>(null);
-  const [sortBy, setSortBy] = useState<"dateApplied" | "company" | "jobTitle" | "status" | "daysSince" | "location">("dateApplied");
-  const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
+  const [sortBy, setSortBy] = useState<JobSortKey>(() => querySort(location.search));
+  const [sortDir, setSortDir] = useState<"asc" | "desc">(() => new URLSearchParams(location.search).get("sortDir") === "asc" ? "asc" : "desc");
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
   const workspaceJobId = Number(searchParams.get("workspace")) || null;
   const workspaceSectionKey = workspaceSection(searchParams.get("section"));
 
+  const updateListRoute = useCallback((updates: Record<string, string | null>) => {
+    const next = new URLSearchParams(location.search);
+    Object.entries(updates).forEach(([key, value]) => {
+      if (value) next.set(key, value);
+      else next.delete(key);
+    });
+    navigate({ pathname: location.pathname, search: next.toString() ? `?${next.toString()}` : "" }, { replace: true, state: location.state });
+  }, [location.pathname, location.search, location.state, navigate]);
+
+  useEffect(() => {
+    const next = new URLSearchParams(location.search);
+    setSearch(next.get("q") ?? "");
+    setStatusFilter(queryStatus(location.search));
+    setCompanyFilterId(queryCompany(location.search));
+    setLocationFilter(next.get("location") ?? "");
+    setNeedsFollowUpOnly(next.get("needsFollowUp") === "1");
+    setReadinessFilter(queryReadiness(location.search));
+    setIncludeDeleted(mode === "trash" || next.get("includeDeleted") === "1");
+    setSortBy(querySort(location.search));
+    setSortDir(next.get("sortDir") === "asc" ? "asc" : "desc");
+    setPage(queryPage(location.search));
+  }, [location.search, mode]);
+
+  const changeSearch = (value: string) => {
+    setSearch(value);
+    setPage(0);
+    updateListRoute({ q: value || null, page: null });
+  };
+
+  const changeStatus = (value: string) => {
+    setStatusFilter(value);
+    setPage(0);
+    updateListRoute({ status: value === "All" ? null : value, page: null });
+  };
+
+  const changeCompany = (value: number | "All") => {
+    setCompanyFilterId(value);
+    setPage(0);
+    updateListRoute({ companyId: value === "All" ? null : String(value), page: null });
+  };
+
+  const changeLocation = (value: string) => {
+    setLocationFilter(value);
+    setPage(0);
+    updateListRoute({ location: value || null, page: null });
+  };
+
+  const changeNeedsFollowUp = (value: boolean) => {
+    setNeedsFollowUpOnly(value);
+    setPage(0);
+    updateListRoute({ needsFollowUp: value ? "1" : null, page: null });
+  };
+
+  const changeReadiness = (value: ReadinessFilter) => {
+    setReadinessFilter(value);
+    setPage(0);
+    updateListRoute({ readiness: value === "all" ? null : value, page: null });
+  };
+
+  const changeIncludeDeleted = (value: boolean) => {
+    setIncludeDeleted(value);
+    setPage(0);
+    updateListRoute({ includeDeleted: value && mode !== "trash" ? "1" : null, page: null });
+  };
+
+  const applySavedView = (view: SavedViewParams) => {
+    const nextCompany = view.companyId ?? "All";
+    setSearch(view.q ?? "");
+    setStatusFilter(view.status ?? "All");
+    setCompanyFilterId(nextCompany);
+    setLocationFilter(view.location ?? "");
+    setNeedsFollowUpOnly(Boolean(view.needsFollowUp));
+    setPage(0);
+    updateListRoute({
+      q: view.q || null,
+      status: view.status || null,
+      companyId: nextCompany === "All" ? null : String(nextCompany),
+      location: view.location || null,
+      needsFollowUp: view.needsFollowUp ? "1" : null,
+      page: null,
+    });
+  };
+
   const updateWorkspaceRoute = (jobId: number, section: WorkspaceSectionKey = "overview") => {
     const next = new URLSearchParams(location.search);
     next.set("workspace", String(jobId));
@@ -265,13 +379,12 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
     navigate({ pathname: location.pathname, search: paramsSearch.toString() ? `?${paramsSearch.toString()}` : "" }, { replace: true });
   }, [jobs, location.pathname, location.search, navigate]);
 
-  const requestSort = (key: typeof sortBy) => {
-    if (sortBy === key) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
-    else {
-      setSortBy(key);
-      setSortDir("asc");
-    }
+  const requestSort = (key: JobSortKey) => {
+    const nextDirection = sortBy === key ? (sortDir === "asc" ? "desc" : "asc") : "asc";
+    setSortBy(key);
+    setSortDir(nextDirection);
     setPage(0);
+    updateListRoute({ sortBy: key === "dateApplied" ? null : key, sortDir: key === "dateApplied" && nextDirection === "desc" ? null : nextDirection, page: null });
   };
 
   const toggleExpanded = (id: number) => {
@@ -395,6 +508,7 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
 
   const statusOptions = ["Waiting", "Interview", "Offer", "Rejected", "Ghosted"] as const;
   const visibleDesktopColumns = 4 + Number(columns.status) + Number(columns.dateApplied) + Number(columns.daysSince) + Number(columns.jobUrl);
+  const selectedCompanyIsLoading = companyFilterId !== "All" && !companies.some((company) => company.id === companyFilterId);
 
   return (
     <Box>
@@ -404,7 +518,7 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
             <TextField
               label={t("jobTableSearch")}
               value={search}
-              onChange={(e) => { setSearch(e.target.value); setPage(0); }}
+              onChange={(e) => changeSearch(e.target.value)}
               placeholder={t("jobTableSearchPlaceholder")}
               size="small"
               InputProps={{ startAdornment: <InputAdornment position="start"><SearchIcon fontSize="small" /></InputAdornment> }}
@@ -414,15 +528,16 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
             <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }}>
               <FormControl fullWidth size="small">
                 <InputLabel>{t("jobTableStatus")}</InputLabel>
-                <Select value={statusFilter} label={t("jobTableStatus")} onChange={(e) => { setStatusFilter(e.target.value); setPage(0); }}>
+                <Select value={statusFilter} label={t("jobTableStatus")} onChange={(e) => changeStatus(e.target.value)}>
                   {[t("jobTableAll"), t("statusApplied"), t("statusWaiting"), t("statusInterview"), t("statusOffer"), t("statusRejected"), t("statusGhosted")].map((s) => <MenuItem key={s} value={s === t("jobTableAll") ? "All" : s === t("statusApplied") ? "Applied" : s === t("statusWaiting") ? "Waiting" : s === t("statusInterview") ? "Interview" : s === t("statusOffer") ? "Offer" : s === t("statusRejected") ? "Rejected" : "Ghosted"}>{s}</MenuItem>)}
                 </Select>
               </FormControl>
 
               <FormControl fullWidth size="small">
                 <InputLabel>{t("jobTableCompany")}</InputLabel>
-                <Select value={companyFilterId} label={t("jobTableCompany")} onChange={(e) => { setCompanyFilterId(e.target.value as any); setPage(0); }}>
+                <Select value={companyFilterId} label={t("jobTableCompany")} onChange={(e) => changeCompany(e.target.value as number | "All")}>
                   <MenuItem value="All">{t("jobTableAll")}</MenuItem>
+                  {selectedCompanyIsLoading ? <MenuItem value={companyFilterId}>Company {companyFilterId}</MenuItem> : null}
                   {companies.map((c) => <MenuItem key={c.id} value={c.id}>{c.name}</MenuItem>)}
                 </Select>
               </FormControl>
@@ -432,14 +547,14 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
               <TextField
                 label={t("jobTableLocation")}
                 value={locationFilter}
-                onChange={(e) => { setLocationFilter(e.target.value); setPage(0); }}
+                onChange={(e) => changeLocation(e.target.value)}
                 fullWidth
               />
 
               {mode === "jobs" ? (
                 <FormControl fullWidth size="small">
                   <InputLabel>{t("jobTableReadiness")}</InputLabel>
-                  <Select value={readinessFilter} label={t("jobTableReadiness")} onChange={(e) => setReadinessFilter(e.target.value as any)}>
+                  <Select value={readinessFilter} label={t("jobTableReadiness")} onChange={(e) => changeReadiness(e.target.value as ReadinessFilter)}>
                     <MenuItem value="all">{t("jobTableAllReadiness")}</MenuItem>
                     <MenuItem value="needs-work">{t("jobTableNeedsWork")}</MenuItem>
                     <MenuItem value="interview">{t("jobTableInterviewStage")}</MenuItem>
@@ -462,14 +577,14 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
                   borderColor: alpha(theme.palette.primary.main, 0.1),
                 }}
               >
-                <FormControlLabel control={<Checkbox checked={needsFollowUpOnly} onChange={(e) => { setNeedsFollowUpOnly(e.target.checked); setPage(0); }} />} label={t("jobTableNeedsFollowUp")} sx={{ mr: 0, ml: -0.5 }} />
-                <FormControlLabel control={<Checkbox checked={includeDeleted} onChange={(e) => { setIncludeDeleted(e.target.checked); setPage(0); }} />} label={t("jobTableShowDeleted")} sx={{ mr: 0, ml: -0.5 }} />
+                <FormControlLabel control={<Checkbox checked={needsFollowUpOnly} onChange={(e) => changeNeedsFollowUp(e.target.checked)} />} label={t("jobTableNeedsFollowUp")} sx={{ mr: 0, ml: -0.5 }} />
+                <FormControlLabel control={<Checkbox checked={includeDeleted} onChange={(e) => changeIncludeDeleted(e.target.checked)} />} label={t("jobTableShowDeleted")} sx={{ mr: 0, ml: -0.5 }} />
               </Box>
             ) : null}
 
             <Box sx={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto", gap: 0.75, alignItems: "center", pt: 0.25 }}>
               <Box sx={{ minWidth: 0 }}>
-                <SavedViewsMenu current={{ q: search.trim() || undefined, status: statusFilter !== "All" ? statusFilter : undefined, companyId: companyFilterId === "All" ? undefined : (companyFilterId as number), location: locationFilter.trim() || undefined, needsFollowUp: needsFollowUpOnly ? true : undefined }} onApply={(p: SavedViewParams) => { setSearch(p.q ?? ""); setStatusFilter(p.status ?? "All"); setCompanyFilterId(p.companyId ?? "All"); setLocationFilter(p.location ?? ""); setNeedsFollowUpOnly(Boolean(p.needsFollowUp)); setPage(0); }} />
+                <SavedViewsMenu current={{ q: search.trim() || undefined, status: statusFilter !== "All" ? statusFilter : undefined, companyId: companyFilterId === "All" ? undefined : (companyFilterId as number), location: locationFilter.trim() || undefined, needsFollowUp: needsFollowUpOnly ? true : undefined }} onApply={applySavedView} />
               </Box>
               <Button variant="text" size="small" startIcon={<ViewColumnIcon />} onClick={(e) => setColumnsAnchor(e.currentTarget)} sx={{ justifySelf: "end", minHeight: 40, px: 1 }}>
                 {t("jobTableColumns")}
@@ -482,7 +597,7 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
           <TextField
             label={t("jobTableSearch")}
             value={search}
-            onChange={(e) => { setSearch(e.target.value); setPage(0); }}
+            onChange={(e) => changeSearch(e.target.value)}
             placeholder={t("jobTableSearchPlaceholder")}
             size="small"
             InputProps={{ startAdornment: <InputAdornment position="start"><SearchIcon fontSize="small" /></InputAdornment> }}
@@ -491,15 +606,16 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
 
           <FormControl sx={{ width: { xs: "100%", sm: 180 } }} size="small">
             <InputLabel>{t("jobTableStatus")}</InputLabel>
-            <Select value={statusFilter} label={t("jobTableStatus")} onChange={(e) => { setStatusFilter(e.target.value); setPage(0); }}>
+            <Select value={statusFilter} label={t("jobTableStatus")} onChange={(e) => changeStatus(e.target.value)}>
               {[t("jobTableAll"), t("statusApplied"), t("statusWaiting"), t("statusInterview"), t("statusOffer"), t("statusRejected"), t("statusGhosted")].map((s) => <MenuItem key={s} value={s === t("jobTableAll") ? "All" : s === t("statusApplied") ? "Applied" : s === t("statusWaiting") ? "Waiting" : s === t("statusInterview") ? "Interview" : s === t("statusOffer") ? "Offer" : s === t("statusRejected") ? "Rejected" : "Ghosted"}>{s}</MenuItem>)}
             </Select>
           </FormControl>
 
           <FormControl sx={{ width: { xs: "100%", sm: 220 } }} size="small">
             <InputLabel>{t("jobTableCompany")}</InputLabel>
-            <Select value={companyFilterId} label={t("jobTableCompany")} onChange={(e) => { setCompanyFilterId(e.target.value as any); setPage(0); }}>
+            <Select value={companyFilterId} label={t("jobTableCompany")} onChange={(e) => changeCompany(e.target.value as number | "All")}>
               <MenuItem value="All">{t("jobTableAll")}</MenuItem>
+              {selectedCompanyIsLoading ? <MenuItem value={companyFilterId}>Company {companyFilterId}</MenuItem> : null}
               {companies.map((c) => <MenuItem key={c.id} value={c.id}>{c.name}</MenuItem>)}
             </Select>
           </FormControl>
@@ -507,24 +623,24 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
           <TextField
             label={t("jobTableLocation")}
             value={locationFilter}
-            onChange={(e) => { setLocationFilter(e.target.value); setPage(0); }}
+            onChange={(e) => changeLocation(e.target.value)}
             sx={{ width: { xs: "100%", sm: 220 }, flex: { xs: "1 1 100%", md: "1 1 200px" } }}
           />
 
           <Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap", width: { xs: "100%", xl: "auto" } }}>
-            {mode === "jobs" ? <FormControlLabel control={<Checkbox checked={needsFollowUpOnly} onChange={(e) => { setNeedsFollowUpOnly(e.target.checked); setPage(0); }} />} label={t("jobTableNeedsFollowUp")} sx={{ mr: 0 }} /> : null}
+            {mode === "jobs" ? <FormControlLabel control={<Checkbox checked={needsFollowUpOnly} onChange={(e) => changeNeedsFollowUp(e.target.checked)} />} label={t("jobTableNeedsFollowUp")} sx={{ mr: 0 }} /> : null}
             {mode === "jobs" ? (
               <FormControl size="small" sx={{ width: { xs: "100%", sm: 180 } }}>
                 <InputLabel>{t("jobTableReadiness")}</InputLabel>
-                <Select value={readinessFilter} label={t("jobTableReadiness")} onChange={(e) => setReadinessFilter(e.target.value as any)}>
+                <Select value={readinessFilter} label={t("jobTableReadiness")} onChange={(e) => changeReadiness(e.target.value as ReadinessFilter)}>
                   <MenuItem value="all">{t("jobTableAllReadiness")}</MenuItem>
                   <MenuItem value="needs-work">{t("jobTableNeedsWork")}</MenuItem>
                   <MenuItem value="interview">{t("jobTableInterviewStage")}</MenuItem>
                 </Select>
               </FormControl>
             ) : null}
-            {mode === "jobs" ? <FormControlLabel control={<Checkbox checked={includeDeleted} onChange={(e) => { setIncludeDeleted(e.target.checked); setPage(0); }} />} label={t("jobTableShowDeleted")} sx={{ mr: 0 }} /> : null}
-            <SavedViewsMenu current={{ q: search.trim() || undefined, status: statusFilter !== "All" ? statusFilter : undefined, companyId: companyFilterId === "All" ? undefined : (companyFilterId as number), location: locationFilter.trim() || undefined, needsFollowUp: needsFollowUpOnly ? true : undefined }} onApply={(p: SavedViewParams) => { setSearch(p.q ?? ""); setStatusFilter(p.status ?? "All"); setCompanyFilterId(p.companyId ?? "All"); setLocationFilter(p.location ?? ""); setNeedsFollowUpOnly(Boolean(p.needsFollowUp)); setPage(0); }} />
+            {mode === "jobs" ? <FormControlLabel control={<Checkbox checked={includeDeleted} onChange={(e) => changeIncludeDeleted(e.target.checked)} />} label={t("jobTableShowDeleted")} sx={{ mr: 0 }} /> : null}
+            <SavedViewsMenu current={{ q: search.trim() || undefined, status: statusFilter !== "All" ? statusFilter : undefined, companyId: companyFilterId === "All" ? undefined : (companyFilterId as number), location: locationFilter.trim() || undefined, needsFollowUp: needsFollowUpOnly ? true : undefined }} onApply={applySavedView} />
             {!isMobile ? <Tooltip title={t("jobTableColumns")}><IconButton onClick={(e) => setColumnsAnchor(e.currentTarget)}><ViewColumnIcon /></IconButton></Tooltip> : null}
           </Box>
         </Box>
@@ -808,7 +924,7 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
             </Table>
           </Box>
         )}
-        <TablePagination component="div" count={total} page={page} onPageChange={(_, next) => setPage(next)} rowsPerPage={pageSize} onRowsPerPageChange={(e) => { onPageSizeChange(Number(e.target.value) as 15 | 20 | 25); setPage(0); }} rowsPerPageOptions={[15, 20, 25]} />
+        <TablePagination component="div" count={total} page={page} onPageChange={(_, next) => { setPage(next); updateListRoute({ page: next > 0 ? String(next + 1) : null }); }} rowsPerPage={pageSize} onRowsPerPageChange={(e) => { onPageSizeChange(Number(e.target.value) as 15 | 20 | 25); setPage(0); updateListRoute({ page: null }); }} rowsPerPageOptions={[15, 20, 25]} />
       </Paper>
 
       <JobDetailsDialog open={detailsJobId !== null} jobId={detailsJobId} initialTab={detailsInitialTab} initialFollowUpMode={detailsFollowUpMode} onClose={() => { setDetailsJobId(null); setDetailsInitialTab(0); setDetailsFollowUpMode(undefined); }} onOpenWorkspace={(id) => { setDetailsJobId(null); updateWorkspaceRoute(id); }} />