feat: add dedicated surgery routes for correct sidebar navigation

Add /surgeries/:surgeryId and /surgeries/:surgeryId/edit routes so that
navigating to a surgery from the Surgeries list keeps "Surgeries" active
in the sidebar, while navigating from a Patient detail keeps "Patients"
active. Components now detect navigation context and show appropriate
breadcrumbs and maintain context in internal links.

Author: kasvith

src/renderer/src/main.tsx

@@ -106,6 +106,14 @@ const router = createHashRouter([
         path: '/quick-surgery',
         element: <QuickAddSurgery />
       },
+      {
+        path: '/surgeries/:surgeryId',
+        element: <ViewSurgery />
+      },
+      {
+        path: '/surgeries/:surgeryId/edit',
+        element: <EditSurgery />
+      },
 
       {
         path: '/support',

src/renderer/src/routes/surgeries/edit-surgery.tsx

@@ -18,18 +18,25 @@ const getSurgeryByIdQuery = (id: number) => queries.surgeries.get(id)
 export const EditSurgery = () => {
   const queryClient = useQueryClient()
   const formRef = useRef<AddOrEditSurgeryRef>(null)
-  const { patientId, surgeryId } = useParams()
+  const { patientId: urlPatientId, surgeryId } = useParams()
   const { setBreadcrumbs } = useBreadcrumbs()
-  const { data: patient } = useQuery({
-    ...getPatientByIdQuery(parseInt(patientId!)),
-    enabled: !!patientId
-  })
+
+  // Detect navigation context - if urlPatientId is not present, we came from surgeries list
+  const isFromSurgeriesContext = !urlPatientId
 
   const { data: surgery } = useQuery({
     ...getSurgeryByIdQuery(parseInt(surgeryId!)),
     enabled: !!surgeryId
   })
 
+  // Derive patientId from URL or from surgery data
+  const patientId = urlPatientId ? parseInt(urlPatientId) : surgery?.patient_id
+
+  const { data: patient } = useQuery({
+    ...getPatientByIdQuery(patientId!),
+    enabled: !!patientId
+  })
+
   useKeyboardEvent({
     key: 's',
     ctrlKey: true,
@@ -47,8 +54,12 @@ export const EditSurgery = () => {
   const surgeryName = useMemo(() => surgery?.bht || 'Surgery', [surgery?.bht])
 
   useEffect(() => {
-    setBreadcrumbs([{ label: 'Surgeries', to: '/surgeries' }])
-  }, [setBreadcrumbs])
+    if (isFromSurgeriesContext) {
+      setBreadcrumbs([{ label: 'Surgeries', to: '/surgeries' }])
+    } else {
+      setBreadcrumbs([{ label: 'Patients', to: '/patients' }])
+    }
+  }, [setBreadcrumbs, isFromSurgeriesContext])
 
   return (
     <FormLayout
@@ -61,7 +72,11 @@ export const EditSurgery = () => {
             <>
               Editing{' '}
               <Link
-                to={`/patients/${patient?.id}/surgeries/${surgery?.id}`}
+                to={
+                  isFromSurgeriesContext
+                    ? `/surgeries/${surgery?.id}`
+                    : `/patients/${patient?.id}/surgeries/${surgery?.id}`
+                }
                 className="font-medium text-foreground font-mono hover:text-primary hover:underline transition-colors"
               >
                 {surgeryName}
@@ -96,7 +111,7 @@ export const EditSurgery = () => {
             surgery={surgery}
             onUpdated={async (_surgery) => {
               await queryClient.invalidateQueries({
-                queryKey: queries.surgeries.list({ patient_id: parseInt(patientId!) }).queryKey
+                queryKey: queries.surgeries.list({ patient_id: patientId! }).queryKey
               })
               await queryClient.invalidateQueries({
                 queryKey: queries.surgeries.get(parseInt(surgeryId!)).queryKey

src/renderer/src/routes/surgeries/list-surgeries.tsx

@@ -155,7 +155,7 @@ function SurgeryRow({
   return (
     <div
       className="group flex items-center gap-4 p-4 rounded-xl border bg-card hover:bg-accent/50 hover:border-primary/20 cursor-pointer"
-      onClick={() => onNavigate(`/patients/${surgery.patient_id}/surgeries/${surgery.id}`)}
+      onClick={() => onNavigate(`/surgeries/${surgery.id}`)}
     >
       <SurgeryIcon />
 
@@ -185,7 +185,7 @@ function SurgeryRow({
           className="h-8 w-8"
           onClick={(e) => {
             e.stopPropagation()
-            onNavigate(`/patients/${surgery.patient_id}/surgeries/${surgery.id}/edit`)
+            onNavigate(`/surgeries/${surgery.id}/edit`)
           }}
         >
           <Edit3 className="h-4 w-4" />

src/renderer/src/routes/surgeries/quick-add-surgery.tsx

@@ -94,7 +94,7 @@ export function QuickAddSurgery() {
       await queryClient.invalidateQueries({
         queryKey: queries.surgeries.list({ patient_id: selectedPatient.id }).queryKey
       })
-      navigate(`/patients/${selectedPatient.id}/surgeries/${surgery.id}`)
+      navigate(`/surgeries/${surgery.id}`)
     }
   }
 

src/renderer/src/routes/surgeries/view-surgery.tsx

@@ -214,21 +214,27 @@ const FollowupShimmer = () => (
 // ============================================================
 export const ViewSurgery = () => {
   const navigate = useNavigate()
-  const { patientId, surgeryId } = useParams()
+  const { patientId: urlPatientId, surgeryId } = useParams()
   const { setBreadcrumbs } = useBreadcrumbs()
   const { settings } = useSettings()
   const queryClient = useQueryClient()
 
-  const { data: patient } = useQuery({
-    ...getPatientByIdQuery(parseInt(patientId!)),
-    enabled: !!patientId
-  })
+  // Detect navigation context - if urlPatientId is not present, we came from surgeries list
+  const isFromSurgeriesContext = !urlPatientId
 
   const { data: surgery } = useQuery({
     ...getSurgeryByIdQuery(parseInt(surgeryId!)),
     enabled: !!surgeryId
   })
 
+  // Derive patientId from URL or from surgery data
+  const patientId = urlPatientId ? parseInt(urlPatientId) : surgery?.patient_id
+
+  const { data: patient } = useQuery({
+    ...getPatientByIdQuery(patientId!),
+    enabled: !!patientId
+  })
+
   const { data: followups, isLoading: isFollowupLoading } = useQuery({
     ...getSurgeryFollowupsQuery(parseInt(surgeryId!)),
     enabled: !!surgeryId
@@ -245,8 +251,12 @@ export const ViewSurgery = () => {
   )
 
   useEffect(() => {
-    setBreadcrumbs([{ label: 'Surgeries', to: '/surgeries' }])
-  }, [setBreadcrumbs])
+    if (isFromSurgeriesContext) {
+      setBreadcrumbs([{ label: 'Surgeries', to: '/surgeries' }])
+    } else {
+      setBreadcrumbs([{ label: 'Patients', to: '/patients' }])
+    }
+  }, [setBreadcrumbs, isFromSurgeriesContext])
 
   const surgeryContext = patient && surgery ? createSurgeryContext(patient, surgery, settings) : null
 
@@ -363,7 +373,13 @@ export const ViewSurgery = () => {
               )}
               <Button
                 variant="gradient"
-                onClick={() => navigate(`/patients/${patientId}/surgeries/${surgeryId}/edit`)}
+                onClick={() =>
+                  navigate(
+                    isFromSurgeriesContext
+                      ? `/surgeries/${surgeryId}/edit`
+                      : `/patients/${patientId}/surgeries/${surgeryId}/edit`
+                  )
+                }
               >
                 <Edit className="h-4 w-4 mr-2" />
                 Edit All