Uses the router to handle tab state

src/routes/_app/_authenticated/document.$documentId.tsx

@@ -1,7 +1,7 @@
 import { DocumentView } from "@/components/documents/DocumentView";
 import { DocumentLoader } from "@/context/document/DocumentLoader";
 import type { DocumentId } from "@/lib/types";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute(
   "/_app/_authenticated/document/$documentId",
@@ -15,6 +15,7 @@ function RouteComponent() {
   return (
     <DocumentLoader documentId={documentId as DocumentId}>
       <DocumentView documentId={documentId as DocumentId} />
+      <Outlet />
     </DocumentLoader>
   );
 }

src/routes/_app/_authenticated/document.$documentId/$relationshipType.tsx

@@ -0,0 +1,19 @@
+import { RelatedDocumentList } from "@/components/documents/RelatedDocumentList";
+import type { DocumentId, RelationshipType } from "@/lib/types";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute(
+  "/_app/_authenticated/document/$documentId/$relationshipType",
+)({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { documentId, relationshipType } = Route.useParams();
+  return (
+    <RelatedDocumentList
+      documentId={documentId as DocumentId}
+      relationshipType={relationshipType as RelationshipType}
+    />
+  );
+}