Moves editing into forms. Every doc has a page now. BUG: state not refreshed after mutation

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

@@ -1,16 +1,15 @@
-import _ from "lodash";
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { RelationshipList } from "@/components/RelationshipList";
+import { DocumentEditForm } from "@/components/documents/DocumentEditForm";
 import { pb } from "@/lib/pocketbase";
+import { displayName } from "@/lib/relationships";
 import {
   RelationshipType,
+  type AnyDocument,
   type Relationship,
-  type Session,
-  type Document,
 } from "@/lib/types";
-import { RelationshipList } from "@/components/RelationshipList";
-import { EditSessionForm } from "@/components/documents/session/EditSessionForm";
-import { displayName } from "@/lib/relationships";
-import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/react";
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import _ from "lodash";
 
 export const Route = createFileRoute(
   "/_app/_authenticated/document/$documentId",
@@ -36,17 +35,11 @@ export const Route = createFileRoute(
 });
 
 function RouteComponent() {
-  const { document: session, relationships } = Route.useLoaderData() as {
-    document: Session;
-    relationships: Record<RelationshipType, Document[]>;
+  const { document, relationships } = Route.useLoaderData() as {
+    document: AnyDocument;
+    relationships: Record<RelationshipType, AnyDocument[]>;
   };
 
-  async function handleSaveSession(data: Session["data"]) {
-    await pb.collection("documents").update(session.id, {
-      data,
-    });
-  }
-
   console.log("Parsed data: ", relationships);
 
   const relationshipList = [
@@ -62,15 +55,12 @@ function RouteComponent() {
     <div className="max-w-xl mx-auto py-2 px-4">
       <Link
         to="/document/$documentId/print"
-        params={{ documentId: session.id }}
+        params={{ documentId: document.id }}
         className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
       >
         Print
       </Link>
-      <EditSessionForm
-        session={session as Session}
-        onSubmit={handleSaveSession}
-      />
+      <DocumentEditForm document={document} />
       <TabGroup>
         <TabList className="flex flex-row flex-wrap gap-1 mt-2">
           {relationshipList.map((relationshipType) => (
@@ -84,7 +74,7 @@ function RouteComponent() {
             <TabPanel>
               <RelationshipList
                 key={relationshipType}
-                root={session}
+                root={document}
                 relationshipType={relationshipType}
                 items={relationships[relationshipType] ?? []}
               />