Uses the router to handle tab state

src/components/documents/DocumentView.tsx

@@ -1,11 +1,12 @@
-import { RelationshipList } from "@/components/RelationshipList";
 import { DocumentEditForm } from "@/components/documents/DocumentEditForm";
 import { useDocument } from "@/context/document/hooks";
 import { displayName, relationshipsForDocument } from "@/lib/relationships";
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
-import { Link } from "@tanstack/react-router";
-import { Loader } from "../Loader";
 import type { DocumentId } from "@/lib/types";
+import { Route as CampaignRoute } from "@/routes/_app/_authenticated/campaigns.$campaignId";
+import { Link } from "@tanstack/react-router";
+import * as _ from "lodash";
+import { Loader } from "../Loader";
+import { Route as RelationshipRoute } from "@/routes/_app/_authenticated/document.$documentId/$relationshipType";
 
 export function DocumentView({ documentId }: { documentId: DocumentId }) {
   const { docResult } = useDocument(documentId);
@@ -17,6 +18,12 @@ 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 0;
+  });
 
   const relationshipList = relationshipsForDocument(doc);
 
@@ -24,8 +31,8 @@ export function DocumentView({ documentId }: { documentId: DocumentId }) {
     <div key={doc.id} className="max-w-xl mx-auto py-2 px-4">
       <div>
         <Link
-          to="/document/$documentId/print"
-          params={{ documentId: doc.id }}
+          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
@@ -39,29 +46,27 @@ export function DocumentView({ documentId }: { documentId: DocumentId }) {
         </Link>
       </div>
       <DocumentEditForm document={doc} />
-      <TabGroup>
-        <TabList className="flex flex-row flex-wrap gap-1 mt-2">
+      <nav>
+        <ul className="flex flex-row gap-1">
           {relationshipList.map((relationshipType) => (
-            <Tab
-              key={relationshipType}
-              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"
+            <Link
+              to={RelationshipRoute.to}
+              params={{
+                documentId,
+                relationshipType,
+              }}
             >
-              {displayName(relationshipType)}
-            </Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {relationshipList.map((relationshipType) => (
-            <TabPanel key={relationshipType}>
-              <RelationshipList
+              <div
                 key={relationshipType}
-                root={doc}
-                relationshipType={relationshipType}
-              />
-            </TabPanel>
+                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>
           ))}
-        </TabPanels>
-      </TabGroup>
+        </ul>
+      </nav>
     </div>
   );
 }

src/components/documents/RelatedDocumentList.tsx

@@ -0,0 +1,31 @@
+import { useDocument, useDocumentCache } from "@/context/document/hooks";
+import type { DocumentId, RelationshipType } from "@/lib/types";
+import { RelationshipList } from "../RelationshipList";
+import { Loader } from "../Loader";
+
+export type Props = {
+  documentId: DocumentId;
+  relationshipType: RelationshipType;
+};
+
+export function RelatedDocumentList({ documentId, relationshipType }: Props) {
+  const { docResult } = useDocument(documentId);
+
+  const { cache } = useDocumentCache();
+
+  console.log(documentId, docResult, cache);
+
+  if (docResult?.type !== "ready") {
+    return <Loader />;
+  }
+
+  const doc = docResult.value.doc;
+
+  return (
+    <RelationshipList
+      key={relationshipType}
+      root={doc}
+      relationshipType={relationshipType}
+    />
+  );
+}