feat(jobs): add dedicated workspace page

Make /jobs/:id the canonical application workspace while preserving list state and compatibility links. Replace popup and expandable-row navigation with accessible whole-row routing and richer job details.

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import {
@@ -6,9 +6,6 @@ import {
   Button,
   Checkbox,
   Chip,
-  Collapse,
-  Dialog,
-  DialogContent,
   FormControl,
   FormControlLabel,
   IconButton,
@@ -34,9 +31,6 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import { alpha, useTheme } from "@mui/material/styles";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
-import LaunchIcon from "@mui/icons-material/Launch";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import RestoreFromTrashOutlinedIcon from "@mui/icons-material/RestoreFromTrashOutlined";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import ViewColumnIcon from "@mui/icons-material/ViewColumn";
@@ -49,7 +43,6 @@ import { useCompanies } from "../hooks/useCompanies";
 import { useDebouncedValue } from "../hooks/useDebouncedValue";
 import { formatSalary } from "../salary";
 import { statusLabel, statusTone } from "../pipeline";
-import JobDetailsDialog from "./JobDetailsDialog";
 import EditJobDialog from "./EditJobDialog";
 import { useToast } from "../toast";
 import SavedViewsMenu, { SavedViewParams } from "./SavedViewsMenu";
@@ -58,8 +51,6 @@ import { useI18n } from "../i18n/I18nProvider";
 import { JobApplication } from "../types";
 import { useViewResource } from "../hooks/useViewResource";
 import { getWorkflowAction, needsInterviewPrep, needsWorkflowWork } from "../jobWorkflowSignals";
-import { ApplicationWorkspace } from "../views/ApplicationWorkspacePage";
-import { workspaceSection, WorkspaceSectionKey } from "../applicationWorkspace";
 
 interface PagedResult<T> {
   items: T[];
@@ -79,13 +70,10 @@ type RowActionSignal = {
 type JobRowViewModel = {
   job: JobApplication;
   toneName: string;
-  overview: string;
   tags: string[];
   actionSignals: RowActionSignal[];
-  primaryAction: RowActionSignal | null;
   appliedDateLabel: string;
   isSelected: boolean;
-  isExpanded: boolean;
 };
 
 export type JobTableColumns = {
@@ -174,11 +162,8 @@ function EmptyJobsState({ firstTime, onOpenSettings, t }: { firstTime: boolean;
   );
 }
 
-function generateOverview(job: JobApplication): string {
-  if (job.fullSummary) return job.fullSummary;
-  if (job.shortSummary) return job.shortSummary;
-  const src = (job.description || job.notes || "").replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
-  return src.length > 220 ? `${src.slice(0, 220)}...` : src;
+function isInteractiveTarget(target: EventTarget | null): boolean {
+  return target instanceof Element && Boolean(target.closest("button, a, input, select, textarea, [role='button'], [role='menuitem'], [role='checkbox']"));
 }
 
 export default function JobTable({ refreshToken, pageSize, onPageSizeChange, columns, onColumnsChange, mode = "jobs" }: Props) {
@@ -189,10 +174,10 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
   const { confirmAction } = useDialogActions();
   const location = useLocation();
   const navigate = useNavigate();
+  const listRouteRef = useRef(`${location.pathname}${location.search}`);
   const [jobs, setJobs] = useState<JobApplication[]>([]);
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(() => queryPage(location.search));
-  const [expanded, setExpanded] = useState<number[]>([]);
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
   const [search, setSearch] = useState(() => new URLSearchParams(location.search).get("q") ?? "");
   const debouncedSearch = useDebouncedValue(search, 250);
@@ -205,18 +190,12 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
   const [readinessFilter, setReadinessFilter] = useState<ReadinessFilter>(() => queryReadiness(location.search));
   const { companies, error: companiesError, reload: reloadCompanies } = useCompanies();
   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);
   const [editJobId, setEditJobId] = useState<number | null>(null);
   const [reloadToken, setReloadToken] = useState(0);
   const [statusAnchor, setStatusAnchor] = useState<null | HTMLElement>(null);
   const [statusJobId, setStatusJobId] = useState<number | null>(null);
   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);
@@ -224,9 +203,15 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
       if (value) next.set(key, value);
       else next.delete(key);
     });
-    navigate({ pathname: location.pathname, search: next.toString() ? `?${next.toString()}` : "" }, { replace: true, state: location.state });
+    const search = next.toString() ? `?${next.toString()}` : "";
+    listRouteRef.current = `${location.pathname}${search}`;
+    navigate({ pathname: location.pathname, search }, { replace: true, state: location.state });
   }, [location.pathname, location.search, location.state, navigate]);
 
+  useEffect(() => {
+    listRouteRef.current = `${location.pathname}${location.search}`;
+  }, [location.pathname, location.search]);
+
   useEffect(() => {
     const next = new URLSearchParams(location.search);
     setSearch(next.get("q") ?? "");
@@ -301,33 +286,9 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
     });
   };
 
-  const updateWorkspaceRoute = (jobId: number, section: WorkspaceSectionKey = "overview") => {
-    const next = new URLSearchParams(location.search);
-    next.set("workspace", String(jobId));
-    if (section === "overview") next.delete("section");
-    else next.set("section", section);
-    navigate({ pathname: location.pathname, search: `?${next.toString()}` }, { state: { workspaceOverlay: true } });
-  };
-
-  const updateWorkspaceSection = (section: WorkspaceSectionKey) => {
-    if (!workspaceJobId) return;
-    const next = new URLSearchParams(location.search);
-    next.set("workspace", String(workspaceJobId));
-    if (section === "overview") next.delete("section");
-    else next.set("section", section);
-    navigate({ pathname: location.pathname, search: `?${next.toString()}` }, { replace: true, state: location.state });
-  };
-
-  const closeWorkspace = () => {
-    if (location.state?.workspaceOverlay) {
-      navigate(-1);
-      return;
-    }
-    const next = new URLSearchParams(location.search);
-    next.delete("workspace");
-    next.delete("section");
-    navigate({ pathname: location.pathname, search: next.toString() ? `?${next.toString()}` : "" }, { replace: true });
-  };
+  const openJob = useCallback((jobId: number, path?: string) => {
+    navigate(path ?? `/jobs/${jobId}`, { state: { from: listRouteRef.current } });
+  }, [navigate]);
 
   const params = useMemo(() => ({
     page: page + 1,
@@ -363,22 +324,6 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
     }
   }, [jobsResource.data, jobsResource.error]);
 
-  useEffect(() => {
-    const paramsSearch = new URLSearchParams(location.search);
-    const openId = Number(paramsSearch.get("open") || 0);
-    const tabIndex = Number(paramsSearch.get("tab") || 0);
-    const followMode = paramsSearch.get("followMode") || undefined;
-    if (!openId || jobs.length === 0) return;
-    const job = jobs.find((j) => j.id === openId);
-    if (!job) return;
-    setDetailsJobId(openId);
-    setDetailsInitialTab(Number.isFinite(tabIndex) ? Math.max(0, Math.min(9, tabIndex)) : 0);
-    setDetailsFollowUpMode(followMode);
-    paramsSearch.delete("open");
-    paramsSearch.delete("tab");
-    navigate({ pathname: location.pathname, search: paramsSearch.toString() ? `?${paramsSearch.toString()}` : "" }, { replace: true });
-  }, [jobs, location.pathname, location.search, navigate]);
-
   const requestSort = (key: JobSortKey) => {
     const nextDirection = sortBy === key ? (sortDir === "asc" ? "desc" : "asc") : "asc";
     setSortBy(key);
@@ -387,10 +332,6 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
     updateListRoute({ sortBy: key === "dateApplied" ? null : key, sortDir: key === "dateApplied" && nextDirection === "desc" ? null : nextDirection, page: null });
   };
 
-  const toggleExpanded = (id: number) => {
-    setExpanded((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
-  };
-
   const filteredJobs = useMemo(() => {
     if (readinessFilter === "all") return jobs;
     if (readinessFilter === "interview") return jobs.filter((job) => needsInterviewPrep(job));
@@ -485,29 +426,26 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
     return {
       label: action.label,
       detail: action.detail,
-      onClick: () => navigate(action.path),
+      onClick: () => openJob(job.id, action.path),
       variant: action.key === "follow-up" ? "contained" : "outlined",
       color: action.key === "follow-up" ? "warning" : "primary",
     };
-  }, [navigate, t]);
+  }, [openJob, t]);
 
   const rowModels = useMemo<JobRowViewModel[]>(() => filteredJobs.map((job) => {
     const actionSignal = buildWorkflowActionSignal(job);
     return {
       job,
       toneName: statusTone(job.status),
-      overview: generateOverview(job),
       tags: parseTags(job.tags),
       actionSignals: actionSignal ? [actionSignal] : [],
-      primaryAction: actionSignal,
       appliedDateLabel: job.dateApplied ? new Date(job.dateApplied).toLocaleDateString() : "—",
       isSelected: selectedIdSet.has(job.id),
-      isExpanded: expanded.includes(job.id),
     };
-  }), [buildWorkflowActionSignal, expanded, filteredJobs, selectedIdSet]);
+  }), [buildWorkflowActionSignal, filteredJobs, selectedIdSet]);
 
   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 visibleDesktopColumns = 6 + Number(columns.status) + Number(columns.dateApplied) + Number(columns.daysSince) + Number(columns.jobUrl);
   const selectedCompanyIsLoading = companyFilterId !== "All" && !companies.some((company) => company.id === companyFilterId);
 
   return (
@@ -697,17 +635,32 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
             </Box>
 
             {jobsResource.loading ? <Typography sx={{ py: 2, textAlign: "center" }}>{t("loading")}</Typography> : null}
-            {!jobsResource.loading && !jobsResource.error && rowModels.map(({ job, toneName, actionSignals, tags, overview, primaryAction, appliedDateLabel, isSelected }) => {
+            {!jobsResource.loading && !jobsResource.error && rowModels.map(({ job, toneName, actionSignals, tags, appliedDateLabel, isSelected }) => {
               const compactTags = tags.slice(0, 6);
               return (
                 <Paper
                   key={job.id}
+                  role={mode === "jobs" && !job.isDeleted ? "link" : undefined}
+                  tabIndex={mode === "jobs" && !job.isDeleted ? 0 : undefined}
+                  aria-label={mode === "jobs" && !job.isDeleted ? `Open ${job.jobTitle} at ${job.company?.name ?? "company"}` : undefined}
+                  onClick={(event) => {
+                    if (mode === "jobs" && !job.isDeleted && !isInteractiveTarget(event.target)) openJob(job.id);
+                  }}
+                  onKeyDown={(event) => {
+                    if (mode === "jobs" && !job.isDeleted && event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+                      event.preventDefault();
+                      openJob(job.id);
+                    }
+                  }}
                   sx={{
                     p: 1.5,
                     borderRadius: 3.5,
+                    cursor: mode === "jobs" && !job.isDeleted ? "pointer" : "default",
                     backgroundColor: alpha(theme.palette.primary.main, 0.03),
                     borderColor: alpha(theme.palette.primary.main, 0.08),
                     boxShadow: `0 10px 24px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.18 : 0.06)}`,
+                    "&:hover": mode === "jobs" && !job.isDeleted ? { backgroundColor: "action.hover" } : undefined,
+                    "&:focus-visible": { outline: "3px solid", outlineColor: "primary.main", outlineOffset: 2 },
                   }}
                 >
                   <Stack spacing={1.25}>
@@ -778,27 +731,6 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
                       </Box>
                     ) : null}
 
-                    <Box>
-                      <Typography variant="overline" sx={{ color: "text.secondary" }}>{t("jobTableOverview")}</Typography>
-                      <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.25, whiteSpace: "pre-wrap", textWrap: "pretty" }}>
-                        {overview || t("jobTableNoSummaryYet")}
-                      </Typography>
-                    </Box>
-
-                    {primaryAction ? (
-                      <Box>
-                        <Typography variant="caption" sx={{ color: "text.secondary", fontWeight: 700, display: "block", mb: 0.5 }}>
-                          {t("editJobNextAction")}
-                        </Typography>
-                        <Button variant={primaryAction.variant} color={primaryAction.color} onClick={primaryAction.onClick} fullWidth sx={{ minHeight: 42, fontWeight: 700 }}>
-                          {primaryAction.label}
-                        </Button>
-                        <Typography variant="caption" sx={{ color: "text.secondary", display: "block", mt: 0.75, textWrap: "pretty" }}>
-                          {primaryAction.detail}
-                        </Typography>
-                      </Box>
-                    ) : null}
-
                     <Box sx={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: 1 }}>
                       <Button variant="outlined" startIcon={<EditOutlinedIcon />} onClick={() => setEditJobId(job.id)} sx={{ minHeight: 42, fontWeight: 700 }}>
                         {t("jobTableEdit")}
@@ -806,9 +738,6 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
                       <Button variant="outlined" startIcon={<MoreHorizIcon />} onClick={(e) => { setStatusJobId(job.id); setStatusAnchor(e.currentTarget); }} sx={{ minHeight: 42, fontWeight: 700 }}>
                         {t("jobTableQuickStatus")}
                       </Button>
-                      <Button variant="outlined" startIcon={<LaunchIcon />} onClick={() => updateWorkspaceRoute(job.id)} sx={{ minHeight: 42, fontWeight: 700 }}>
-                        {t("jobTableOpen")}
-                      </Button>
                       {(mode === "trash" || (includeDeleted && job.isDeleted)) ? (
                         <Button variant="outlined" startIcon={<RestoreFromTrashOutlinedIcon />} onClick={() => void restore(job.id)} sx={{ minHeight: 42, fontWeight: 700 }}>
                           {t("jobTableRestore")}
@@ -833,30 +762,47 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
               <TableHead>
                 <TableRow>
                   <TableCell padding="checkbox"><Checkbox checked={selectedAllOnPage} indeterminate={selectedIds.length > 0 && !selectedAllOnPage} onChange={(e) => toggleSelectAll(e.target.checked)} /></TableCell>
-                  <TableCell width={1} />
                   <TableCell sortDirection={sortBy === "company" ? sortDir : false}><TableSortLabel active={sortBy === "company"} direction={sortBy === "company" ? sortDir : "asc"} onClick={() => requestSort("company")}>{t("jobTableCompany")}</TableSortLabel></TableCell>
                   <TableCell sortDirection={sortBy === "jobTitle" ? sortDir : false}><TableSortLabel active={sortBy === "jobTitle"} direction={sortBy === "jobTitle" ? sortDir : "asc"} onClick={() => requestSort("jobTitle")}>{t("jobTableRole")}</TableSortLabel></TableCell>
+                  <TableCell sortDirection={sortBy === "location" ? sortDir : false}><TableSortLabel active={sortBy === "location"} direction={sortBy === "location" ? sortDir : "asc"} onClick={() => requestSort("location")}>{t("jobTableLocation")}</TableSortLabel></TableCell>
                   {columns.status ? <TableCell sortDirection={sortBy === "status" ? sortDir : false}><TableSortLabel active={sortBy === "status"} direction={sortBy === "status" ? sortDir : "asc"} onClick={() => requestSort("status")}>{t("jobTableStatus")}</TableSortLabel></TableCell> : null}
                   {columns.dateApplied ? <TableCell sortDirection={sortBy === "dateApplied" ? sortDir : false}><TableSortLabel active={sortBy === "dateApplied"} direction={sortBy === "dateApplied" ? sortDir : "asc"} onClick={() => requestSort("dateApplied")}>{t("jobTableDateApplied")}</TableSortLabel></TableCell> : null}
                   {columns.daysSince ? <TableCell sortDirection={sortBy === "daysSince" ? sortDir : false}><TableSortLabel active={sortBy === "daysSince"} direction={sortBy === "daysSince" ? sortDir : "asc"} onClick={() => requestSort("daysSince")}>{t("jobTableDays")}</TableSortLabel></TableCell> : null}
+                  <TableCell>{t("jobDetailsDeadline")}</TableCell>
                   {columns.jobUrl ? <TableCell>{t("settingsColumnJobUrl")}</TableCell> : null}
                   <TableCell align="right">{t("jobTableActions")}</TableCell>
                 </TableRow>
               </TableHead>
               <TableBody>
                 {jobsResource.loading ? <TableRow><TableCell colSpan={visibleDesktopColumns}><Typography sx={{ py: 2, textAlign: "center" }}>{t("loading")}</Typography></TableCell></TableRow> : null}
-                {!jobsResource.loading && !jobsResource.error && rowModels.map(({ job, toneName, actionSignals, primaryAction, appliedDateLabel, overview, tags, isSelected, isExpanded }) => {
+                {!jobsResource.loading && !jobsResource.error && rowModels.map(({ job, toneName, actionSignals, appliedDateLabel, isSelected }) => {
                   const tone = toneName === "error" ? theme.palette.error.main : toneName === "warning" ? theme.palette.warning.main : toneName === "success" ? theme.palette.success.main : toneName === "info" ? theme.palette.info.main : theme.palette.primary.main;
-                  const detailTags = tags.slice(0, 8);
                   return (
-                    <React.Fragment key={job.id}>
-                      <TableRow sx={{ backgroundColor: alpha(tone, theme.palette.mode === "dark" ? 0.1 : 0.06) }}>
+                      <TableRow
+                        key={job.id}
+                        hover={mode === "jobs" && !job.isDeleted}
+                        tabIndex={mode === "jobs" && !job.isDeleted ? 0 : undefined}
+                        aria-label={mode === "jobs" && !job.isDeleted ? `Open ${job.jobTitle} at ${job.company?.name ?? "company"}` : undefined}
+                        onClick={(event) => {
+                          if (mode === "jobs" && !job.isDeleted && !isInteractiveTarget(event.target)) openJob(job.id);
+                        }}
+                        onKeyDown={(event) => {
+                          if (mode === "jobs" && !job.isDeleted && event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+                            event.preventDefault();
+                            openJob(job.id);
+                          }
+                        }}
+                        sx={{
+                          cursor: mode === "jobs" && !job.isDeleted ? "pointer" : "default",
+                          backgroundColor: alpha(tone, theme.palette.mode === "dark" ? 0.1 : 0.06),
+                          "&:focus-visible": { outline: "3px solid", outlineColor: "primary.main", outlineOffset: -3 },
+                        }}
+                      >
                         <TableCell padding="checkbox"><Checkbox checked={isSelected} onChange={(e) => toggleSelected(job.id, e.target.checked)} /></TableCell>
-                        <TableCell><IconButton size="small" onClick={() => toggleExpanded(job.id)}>{isExpanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}</IconButton></TableCell>
-                        <TableCell>{job.company?.name ?? ""}</TableCell>
+                        <TableCell sx={{ minWidth: 140, fontWeight: 700 }}>{job.company?.name ?? ""}</TableCell>
                         <TableCell>
                           <Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
-                            <span>{job.jobTitle}</span>
+                            <Typography component="span" sx={{ fontWeight: 800, overflowWrap: "anywhere" }}>{job.jobTitle}</Typography>
                             {actionSignals.map((signal) => (
                               <Chip
                                 key={`${job.id}-${signal.label}-${signal.detail}`}
@@ -873,48 +819,20 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
                             ))}
                           </Box>
                         </TableCell>
+                        <TableCell sx={{ minWidth: 130 }}>{job.location || "—"}</TableCell>
                         {columns.status ? <TableCell><Chip label={statusLabel(t, job.status)} size="small" color={toneName as any} /></TableCell> : null}
                         {columns.dateApplied ? <TableCell>{appliedDateLabel}</TableCell> : null}
-                        {columns.daysSince ? <TableCell>{job.daysSince}</TableCell> : null}
+                        {columns.daysSince ? <TableCell>{job.daysSince ?? "—"}</TableCell> : null}
+                        <TableCell>{job.deadline ? new Date(job.deadline).toLocaleDateString() : "—"}</TableCell>
                         {columns.jobUrl ? <TableCell>{job.jobUrl ? <a href={job.jobUrl} target="_blank" rel="noreferrer">{t("jobTableLink")}</a> : ""}</TableCell> : null}
                         <TableCell align="right">
-                          <Box sx={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 0.75 }}>
-                            {primaryAction ? (
-                              <>
-                                <Typography variant="caption" sx={{ color: "text.secondary", fontWeight: 700 }}>
-                                  {t("editJobNextAction")}
-                                </Typography>
-                                <Button size="small" variant={primaryAction.variant} color={primaryAction.color} onClick={primaryAction.onClick} aria-label={`${t("editJobNextAction")}: ${job.jobTitle} — ${primaryAction.label}`}>
-                                  {primaryAction.label}
-                                </Button>
-                                <Typography variant="caption" sx={{ color: "text.secondary", maxWidth: 220, textAlign: "right" }}>
-                                  {primaryAction.detail}
-                                </Typography>
-                              </>
-                            ) : null}
-                            <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 0.5 }}>
+                            <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 0.5, whiteSpace: "nowrap" }}>
                               <Tooltip title={t("jobTableEdit")}><IconButton size="small" onClick={() => setEditJobId(job.id)}><EditOutlinedIcon fontSize="small" /></IconButton></Tooltip>
                               <Tooltip title={t("jobTableQuickStatus")}><IconButton size="small" onClick={(e) => { setStatusJobId(job.id); setStatusAnchor(e.currentTarget); }}><MoreHorizIcon fontSize="small" /></IconButton></Tooltip>
-                              <Tooltip title={t("jobTableOpen")}><IconButton size="small" aria-label={`${t("jobTableOpen")}: ${job.jobTitle}`} onClick={() => updateWorkspaceRoute(job.id)}><LaunchIcon fontSize="small" /></IconButton></Tooltip>
                               {(mode === "trash" || (includeDeleted && job.isDeleted)) ? <Tooltip title={t("jobTableRestore")}><IconButton size="small" onClick={() => void restore(job.id)}><RestoreFromTrashOutlinedIcon fontSize="small" /></IconButton></Tooltip> : <Tooltip title={t("jobTableSoftDelete")}><IconButton size="small" onClick={() => void softDelete(job)}><DeleteOutlineIcon fontSize="small" /></IconButton></Tooltip>}
                             </Box>
-                          </Box>
                         </TableCell>
                       </TableRow>
-                      <TableRow>
-                        <TableCell sx={{ py: 0 }} colSpan={visibleDesktopColumns}>
-                          <Collapse in={isExpanded} timeout="auto" unmountOnExit>
-                            <Box sx={{ p: 2, display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr 1fr" }, gap: 2 }}>
-                              <Box><Typography variant="overline">{t("jobTableLocation")}</Typography><Typography>{job.location ?? "-"}</Typography></Box>
-                              <Box><Typography variant="overline">{t("addJobModalSalary")}</Typography><Typography>{formatSalary(job) ?? "-"}</Typography></Box>
-                              <Box><Typography variant="overline">{t("settingsColumnJobUrl")}</Typography><Typography>{job.jobUrl ? <a href={job.jobUrl} target="_blank" rel="noreferrer">{t("jobTableOpenListing")}</a> : "-"}</Typography></Box>
-                              <Box sx={{ gridColumn: "1 / -1" }}><Typography variant="overline">{t("jobTableSkills")}</Typography><Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 0.5 }}>{detailTags.length ? detailTags.map((tag) => <Chip key={tag} label={tag} size="small" />) : <Typography sx={{ color: "text.secondary" }}>{t("jobTableNoTags")}</Typography>}</Box></Box>
-                              <Box sx={{ gridColumn: "1 / -1" }}><Typography variant="overline">{t("jobTableOverview")}</Typography><Typography sx={{ whiteSpace: "pre-wrap" }}>{overview || t("jobTableNoSummaryYet")}</Typography></Box>
-                            </Box>
-                          </Collapse>
-                        </TableCell>
-                      </TableRow>
-                    </React.Fragment>
                   );
                 })}
                 {filteredJobs.length === 0 && !jobsResource.loading && !jobsResource.error ? (
@@ -927,27 +845,6 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
         <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); }} />
-      <Dialog
-        open={workspaceJobId !== null}
-        onClose={closeWorkspace}
-        fullScreen={isMobile}
-        fullWidth
-        maxWidth="xl"
-        slotProps={{ paper: { "aria-label": "Application workspace" } }}
-      >
-        <DialogContent sx={{ p: { xs: 1.5, sm: 2.5 } }}>
-          {workspaceJobId ? (
-            <ApplicationWorkspace
-              jobIdOverride={workspaceJobId}
-              sectionOverride={workspaceSectionKey}
-              onSectionChange={updateWorkspaceSection}
-              onClose={closeWorkspace}
-              fullPageHref={`/applications/${workspaceJobId}?section=${workspaceSectionKey}`}
-            />
-          ) : null}
-        </DialogContent>
-      </Dialog>
       <EditJobDialog open={editJobId !== null} jobId={editJobId} onClose={() => setEditJobId(null)} onSaved={() => setReloadToken((token) => token + 1)} />
       <Menu anchorEl={statusAnchor} open={Boolean(statusAnchor)} onClose={() => { setStatusAnchor(null); setStatusJobId(null); }}>
         {statusOptions.map((status) => <MenuItem key={status} onClick={() => { if (statusJobId) void setStatusQuick(statusJobId, status); setStatusAnchor(null); setStatusJobId(null); }}>{t("jobTableSetStatus", { status })}</MenuItem>)}

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

@@ -103,7 +103,7 @@ export default function QuickCommandDialog({ open, onClose, onNavigate, onOpenAd
       id: `job-${job.id}`,
       label: `${job.company?.name ?? t("company")} - ${job.jobTitle}`,
       hint: t("openJobListAndSearchResult"),
-      action: () => onNavigate(`/jobs?open=${job.id}`),
+      action: () => onNavigate(`/jobs/${job.id}`),
     })),
     ...companies.slice(0, 6).map((company) => ({
       id: `company-${company.id}`,