Finally gets the routing working in a somewhat reasonable way

src/components/documents/DocumentView.tsx

@@ -1,15 +1,22 @@
-import { DocumentEditForm } from "@/components/documents/DocumentEditForm";
 import { useDocument } from "@/context/document/hooks";
 import { displayName, relationshipsForDocument } from "@/lib/relationships";
-import type { DocumentId } from "@/lib/types";
+import { RelationshipType, type DocumentId } from "@/lib/types";
 import { Route as CampaignRoute } from "@/routes/_app/_authenticated/campaigns.$campaignId";
 import { Link } from "@tanstack/react-router";
 import _ from "lodash";
 import { Loader } from "../Loader";
-import { Route as RelationshipRoute } from "@/routes/_app/_authenticated/document.$documentId/$relationshipType";
 import { DocumentTitle } from "./DocumentTitle";
+import { TabbedLayout } from "../layout/TabbedLayout";
+import { DocumentEditForm } from "./DocumentEditForm";
+import { RelatedDocumentList } from "./RelatedDocumentList";
 
-export function DocumentView({ documentId }: { documentId: DocumentId }) {
+export function DocumentView({
+  documentId,
+  relationshipType,
+}: {
+  documentId: DocumentId;
+  relationshipType: RelationshipType | null;
+}) {
   const { docResult } = useDocument(documentId);
 
   if (docResult?.type !== "ready") {
@@ -19,52 +26,72 @@ export function DocumentView({ documentId }: { documentId: DocumentId }) {
   const doc = docResult.value.doc;
   const relationshipCounts = _.mapValues(docResult.value.relationships, (v) => {
     if (v.type === "ready") {
-      return v.value.secondary.length;
+      return v.value.secondary.length.toString();
     }
-    return 0;
+    return "...";
   });
 
   const relationshipList = relationshipsForDocument(doc);
 
   return (
-    <div key={doc.id} className="max-w-xl mx-auto py-2 px-4">
-      <DocumentTitle document={doc} />
-      <div>
+    <TabbedLayout
+      navigation={
+        <>
+          <Link
+            to={CampaignRoute.to}
+            params={{ campaignId: doc.campaign }}
+            className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
+          >
+            Back to campaign
+          </Link>
+          <Link
+            to="/document/$documentId/print"
+            params={{ documentId: doc.id }}
+            className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
+          >
+            Print
+          </Link>
+        </>
+      }
+      title={<DocumentTitle document={doc} />}
+      tabs={[
         <Link
-          to={CampaignRoute.to}
-          params={{ campaignId: doc.campaign }}
-          className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
+          key={""}
+          to="/document/$documentId"
+          params={{
+            documentId,
+          }}
         >
-          Back to campaign
-        </Link>
-        <Link
-          to="/document/$documentId/print"
-          params={{ documentId: doc.id }}
-          className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
-        >
-          Print
-        </Link>
-      </div>
-      <DocumentEditForm document={doc} />
-      <nav>
-        <ul className="flex flex-row gap-1">
-          {relationshipList.map((relationshipType) => (
-            <Link
-              key={relationshipType}
-              to={RelationshipRoute.to}
-              params={{
-                documentId,
-                relationshipType,
-              }}
-            >
-              <div className="px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 data-selected:bg-violet-900 data-selected:border-violet-700 whitespace-nowrap">
-                {displayName(relationshipType)} (
-                {relationshipCounts[relationshipType] ?? 0})
-              </div>
-            </Link>
-          ))}
-        </ul>
-      </nav>
-    </div>
+          <div className="px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 data-selected:bg-violet-900 data-selected:border-violet-700 whitespace-nowrap">
+            Attributes
+          </div>
+        </Link>,
+        ...relationshipList.map((relationshipType) => (
+          <Link
+            key={relationshipType}
+            to="/document/$documentId/$relationshipType"
+            params={{
+              documentId,
+              relationshipType,
+            }}
+          >
+            <div className="px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 data-selected:bg-violet-900 data-selected:border-violet-700 whitespace-nowrap">
+              {displayName(relationshipType)} (
+              {relationshipCounts[relationshipType] ?? 0})
+            </div>
+          </Link>
+        )),
+      ]}
+      content={
+        relationshipType === null ? (
+          <DocumentEditForm document={doc} />
+        ) : (
+          <RelatedDocumentList
+            documentId={doc.id}
+            relationshipType={relationshipType}
+          />
+        )
+      }
+    />
   );
 }

src/components/layout/TabbedLayout.tsx

@@ -0,0 +1,16 @@
+export type Props = {
+  title: React.ReactNode;
+  navigation: React.ReactNode;
+  tabs: React.ReactNode[];
+  content: React.ReactNode;
+};
+export function TabbedLayout({ navigation, title, tabs, content }: Props) {
+  return (
+    <div>
+      <div>{navigation}</div>
+      <div>{title}</div>
+      <div>{tabs}</div>
+      <div>{content}</div>
+    </div>
+  );
+}