Converts using full document state management

src/components/documents/DocumentView.tsx

@@ -0,0 +1,55 @@
+import { RelationshipList } from "@/components/RelationshipList";
+import { DocumentEditForm } from "@/components/documents/DocumentEditForm";
+import { useDocument } from "@/context/document/DocumentContext";
+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";
+
+export function DocumentView() {
+  const { state } = useDocument();
+
+  if (state.status === "loading") {
+    return <Loader />;
+  }
+
+  const doc = state.doc;
+
+  const relationshipList = relationshipsForDocument(doc);
+
+  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>
+  );
+}

src/components/documents/secret/NewSecretForm.tsx

@@ -45,7 +45,7 @@ export const NewSecretForm = ({
 
   return (
     <BaseForm
-      title="Create new treasure"
+      title="Create new secret"
       isLoading={adding || !newSecret.trim()}
       onSubmit={handleSubmit}
       error={error}
@@ -53,7 +53,7 @@ export const NewSecretForm = ({
         <SingleLineInput
           value={newSecret}
           onChange={setNewSecret}
-          placeholder="Treasure description"
+          placeholder="Secret description"
         />
       }
     />

src/components/documents/session/SessionEditForm.tsx

@@ -1,10 +1,8 @@
 import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
-import { useCache } from "@/context/cache/CacheContext";
 import { pb } from "@/lib/pocketbase";
 import type { Session } from "@/lib/types";
 
 export const SessionEditForm = ({ session }: { session: Session }) => {
-  const cache = useCache();
   async function saveStrongStart(strongStart: string) {
     const freshRecord: Session = await pb
       .collection("documents")
@@ -14,7 +12,6 @@ export const SessionEditForm = ({ session }: { session: Session }) => {
           strongStart,
         },
       });
-    cache.set(freshRecord);
   }
 
   return (