Converts using full document state management

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

@@ -1,10 +1,7 @@
-import { RelationshipList } from "@/components/RelationshipList";
-import { DocumentEditForm } from "@/components/documents/DocumentEditForm";
-import { displayName, relationshipsForDocument } from "@/lib/relationships";
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { useDocument } from "@/context/cache/CacheContext";
+import { DocumentView } from "@/components/documents/DocumentView";
+import { DocumentProvider } from "@/context/document/DocumentContext";
 import type { DocumentId } from "@/lib/types";
+import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute(
   "/_app/_authenticated/document/$documentId",
@@ -14,44 +11,11 @@ export const Route = createFileRoute(
 
 function RouteComponent() {
   const { documentId } = Route.useParams();
-
-  const doc = useDocument(documentId as DocumentId);
-
-  const relationshipList = relationshipsForDocument(doc);
+  console.info("Rendering document route: ", documentId);
 
   return (
-    <div key={doc.id} className="max-w-xl mx-auto py-2 px-4">
-      <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>
-      <DocumentEditForm document={doc} />
-      <TabGroup>
-        <TabList className="flex flex-row flex-wrap gap-1 mt-2">
-          {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"
-            >
-              {displayName(relationshipType)}
-            </Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {relationshipList.map((relationshipType) => (
-            <TabPanel key={relationshipType}>
-              <RelationshipList
-                key={relationshipType}
-                root={doc}
-                relationshipType={relationshipType}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </TabGroup>
-    </div>
+    <DocumentProvider documentId={documentId as DocumentId}>
+      <DocumentView />
+    </DocumentProvider>
   );
 }