Finally gets the routing working in a somewhat reasonable way

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

@@ -0,0 +1,49 @@
+import { DocumentView } from "@/components/documents/DocumentView";
+import { DocumentLoader } from "@/context/document/DocumentLoader";
+import type { DocumentId } from "@/lib/types";
+import { RelationshipType } from "@/lib/types";
+import { createFileRoute } from "@tanstack/react-router";
+import * as z from "zod";
+
+export const Route = createFileRoute(
+  "/_app/_authenticated/document/$documentId/$",
+)({
+  component: RouteComponent,
+});
+
+const documentParams = z
+  .templateLiteral([
+    z.string(),
+    z.optional(z.literal("/")),
+    z.optional(z.string()),
+  ])
+  .pipe(
+    z.transform((path: string) => {
+      if (path === "") {
+        return {
+          relationshipType: null,
+          childDoc: null,
+        };
+      }
+      const [relationshipType, childDoc] = path.split("/");
+      return {
+        relationshipType: (relationshipType ?? null) as RelationshipType | null,
+        childDoc: (childDoc ?? null) as DocumentId | null,
+      };
+    }),
+  );
+
+function RouteComponent() {
+  const { documentId, _splat } = Route.useParams();
+
+  const { relationshipType, childDoc } = documentParams.parse(_splat);
+
+  return (
+    <DocumentLoader documentId={documentId as DocumentId}>
+      <DocumentView
+        documentId={documentId as DocumentId}
+        relationshipType={relationshipType}
+      />
+    </DocumentLoader>
+  );
+}

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

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

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

@@ -1,19 +0,0 @@
-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}
-    />
-  );
-}

src/routes/_app_._authenticated.document_.$documentId.print.tsx

@@ -1,67 +0,0 @@
-import { DocumentPrintRow } from "@/components/documents/DocumentPrintRow";
-import { SessionPrintRow } from "@/components/documents/session/SessionPrintRow";
-import { Loader } from "@/components/Loader";
-import { useDocument, useDocumentCache } from "@/context/document/hooks";
-import { RelationshipType, type DocumentId, type Session } from "@/lib/types";
-import { createFileRoute } from "@tanstack/react-router";
-import _ from "lodash";
-
-export const Route = createFileRoute(
-  "/_app_/_authenticated/document_/$documentId/print",
-)({
-  component: RouteComponent,
-  pendingComponent: Loader,
-});
-
-function RouteComponent() {
-  const params = Route.useParams();
-
-  const { cache } = useDocumentCache();
-  const { docResult } = useDocument(params.documentId as DocumentId);
-
-  if (docResult.type !== "ready") {
-    return <Loader />;
-  }
-
-  const session = docResult.value.doc as Session;
-  const relationships = _.mapValues(
-    docResult.value.relationships,
-    (relResult) => {
-      if (relResult.type != "ready") {
-        return [];
-      }
-      return relResult.value.secondary
-        .map((id) => cache.documents[id])
-        .flatMap((docResult) =>
-          docResult.type === "ready" ? [docResult.value.doc] : [],
-        );
-    },
-  );
-
-  return (
-    <div className="fill-w py-8 columns-2 gap-8 text-sm">
-      <SessionPrintRow session={session}></SessionPrintRow>
-      {[
-        RelationshipType.Scenes,
-        RelationshipType.Secrets,
-        RelationshipType.Locations,
-        RelationshipType.Npcs,
-        RelationshipType.Monsters,
-        RelationshipType.Treasures,
-      ].map((relationshipType) => (
-        <div className="break-inside-avoid">
-          <h3 className="text-lg font-bold text-slate-600">
-            {relationshipType.charAt(0).toUpperCase() +
-              relationshipType.slice(1)}
-          </h3>
-
-          <ul className="list-disc pl-5">
-            {(relationships[relationshipType] ?? []).map((item) => (
-              <DocumentPrintRow document={item} />
-            ))}
-          </ul>
-        </div>
-      ))}
-    </div>
-  );
-}