From 667d62291892110d2862e347b984cdf7f15bf212 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Fri, 7 Aug 2026 12:48:34 +0000
Subject: [PATCH] make the jobs back button a link, delete the backbutton
 nobody used

The audit said adopt the shared BackButton. It is not shared: zero importers
since the initial commit, no barrel entry, and a label-plus-underline shape
that fits none of the icon-only back controls here. Adopting it would have
redesigned the Jobs header under cover of a navigation fix.

So: a Link, matching what ScriptJobDetail and DownloadJobDetail already do,
and the dead component goes. useNavigate had no other caller in
PipelineJobDetail and goes with it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 docs/navigation-audit.md                            |  7 ++++++-
 .../Screens/Dashboard/Jobs/JobDetail.tsx            |  8 ++++----
 src/workspaces/components/BackButton.tsx            | 13 -------------
 3 files changed, 10 insertions(+), 18 deletions(-)
 delete mode 100644 src/workspaces/components/BackButton.tsx

diff --git a/docs/navigation-audit.md b/docs/navigation-audit.md
index f1e415da..0cffdeaf 100644
--- a/docs/navigation-audit.md
+++ b/docs/navigation-audit.md
@@ -234,7 +234,12 @@ publishers means changing the chat panel, which is another agent's, so it is wri
 ### Phase 4 — Polish + borderline decisions
 - [x] Dock + Header + mobile sheet → react-router `<NavLink>`; both `isActive` helpers and their `useLocation`s deleted. `end` on Home only. **Needs runtime test.**
 - [ ] "New Chat" → `<Link to="/chat/new">` (`SessionList.tsx:68`) once H4's channel cleanup lands.
-- [ ] Jobs back button + any `navigate('/jobs')` → shared `BackButton` (`JobDetail.tsx:709`).
+- [x] Jobs back button → `<Link to="/jobs">`, and `useNavigate` dropped from `PipelineJobDetail` (it had no
+      other caller). **Not** the shared `BackButton`, which turned out to be the second dead component this
+      audit has found: zero importers since the initial commit, no barrel entry, and a label-plus-underline
+      shape that fits none of the icon-only back controls in the app. Adopting it would have been a visual
+      redesign of the Jobs header dressed up as a navigation fix, so it is deleted instead. The two sibling
+      panes (`ScriptJobDetail`, `DownloadJobDetail`) were already `<Link to="/jobs">`; this was the odd one out.
 - [ ] Decide/skip: Jobs step deep-link, Preview slug, FileBrowser widget. (Browser tabs: **done** — see the LOW section. Monitor scope: **done** as M10, it was not a view toggle. Music favorites: **decided** — stays a channel, reasoning in the LOW section.)
 
 ### Cross-cutting for the refactor itself
diff --git a/src/apps/officer-web/Screens/Dashboard/Jobs/JobDetail.tsx b/src/apps/officer-web/Screens/Dashboard/Jobs/JobDetail.tsx
index e86f991c..399157b5 100644
--- a/src/apps/officer-web/Screens/Dashboard/Jobs/JobDetail.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Jobs/JobDetail.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext } from 'react';
-import { useParams, useNavigate, Link } from 'react-router';
+import { useParams, Link } from 'react-router';
 import {
   ArrowLeft, CheckCircle2, AlertCircle, Loader2, StopCircle, AlertTriangle, Clock, Square,
   ChevronRight, Wrench,
@@ -332,7 +332,6 @@ const OutputPanel = () => {
 
 export const PipelineJobDetail = () => {
   const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
   const client = useClient();
 
   const [job, setJob] = useState<JobData | null>(null);
@@ -706,9 +705,10 @@ export const PipelineJobDetail = () => {
       {/* Header + stats bar */}
       <Card className="px-4 py-3 shrink-0">
         <div className="flex items-center gap-3">
-          <button onClick={() => navigate('/jobs')} className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer">
+          {/* The other two job detail panes already do this; this was the last imperative back in Jobs. */}
+          <Link to="/jobs" aria-label="Back to jobs" className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer">
             <ArrowLeft className="h-4 w-4 text-duck-dark/60" />
-          </button>
+          </Link>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2">
               <StatusIcon status={displayStatus} className="h-5 w-5" />
diff --git a/src/workspaces/components/BackButton.tsx b/src/workspaces/components/BackButton.tsx
deleted file mode 100644
index 5a73db99..00000000
--- a/src/workspaces/components/BackButton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Link } from 'react-router';
-import { ArrowLeft } from 'lucide-react';
-import { cn } from 'helpers/cn';
-
-type BackButtonProps = { label: string; href: string; className?: string };
-export const BackButton = ({ label, href, className }: BackButtonProps) => {
-  return (
-    <Link to={href} className={cn('flex items-center text-lg text-gray-600 underline dark:text-gray-300', className)}>
-      <ArrowLeft className="mr-1 h-4 w-4" />
-      {label}
-    </Link>
-  );
-};