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

src/components/RelationshipList.tsx

@@ -1,15 +1,16 @@
 import { DocumentList } from "@/components/DocumentList";
 import { pb } from "@/lib/pocketbase";
-import type { Document, RelationshipType } from "@/lib/types";
+import { displayName } from "@/lib/relationships";
+import type { Document, DocumentId, RelationshipType } from "@/lib/types";
+import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { Loader } from "./Loader";
-import { NewRelatedDocumentForm } from "./documents/NewRelatedDocumentForm";
 import { DocumentRow } from "./documents/DocumentRow";
-import { displayName } from "@/lib/relationships";
+import { NewRelatedDocumentForm } from "./documents/NewRelatedDocumentForm";
 
 interface RelationshipListProps {
   root: Document;
-  items: Document[];
+  items: DocumentId[];
   relationshipType: RelationshipType;
 }
 

src/components/documents/DocumentEditForm.tsx

@@ -0,0 +1,56 @@
+import {
+  isLocation,
+  isMonster,
+  isNpc,
+  isScene,
+  isSecret,
+  isSession,
+  isTreasure,
+  type AnyDocument,
+} from "@/lib/types";
+import { LocationEditForm } from "./location/LocationEditForm";
+import { MonsterEditForm } from "./monsters/MonsterEditForm";
+import { NpcEditForm } from "./npc/NpcEditForm";
+import { SceneEditForm } from "./scene/SceneEditForm";
+import { SecretEditForm } from "./secret/SecretEditForm";
+import { SessionEditForm } from "./session/SessionEditForm";
+import { TreasureEditForm } from "./treasure/TreasureEditForm";
+
+function assertUnreachable(_x: never): never {
+  throw new Error("DocumentForm switch is not exhaustive");
+}
+
+/**
+ * Renders a form for any document type depending on the relationship.
+ */
+export const DocumentEditForm = ({ document }: { document: AnyDocument }) => {
+  if (isLocation(document)) {
+    return <LocationEditForm location={document} />;
+  }
+
+  if (isMonster(document)) {
+    return <MonsterEditForm monster={document} />;
+  }
+
+  if (isNpc(document)) {
+    return <NpcEditForm npc={document} />;
+  }
+
+  if (isScene(document)) {
+    return <SceneEditForm scene={document} />;
+  }
+
+  if (isSecret(document)) {
+    return <SecretEditForm secret={document} />;
+  }
+
+  if (isSession(document)) {
+    return <SessionEditForm session={document} />;
+  }
+
+  if (isTreasure(document)) {
+    return <TreasureEditForm treasure={document} />;
+  }
+
+  return assertUnreachable(document);
+};

src/components/documents/DocumentRow.tsx

@@ -1,7 +1,6 @@
 // DocumentRow.tsx
 // Generic row component for displaying any document type.
-import { SecretRow } from "@/components/documents/secret/SecretRow";
+import { SecretToggleRow } from "@/components/documents/secret/SecretToggleRow";
-import { SessionRow } from "@/components/documents/session/SessionRow";
 import {
   isLocation,
   isMonster,
@@ -13,11 +12,12 @@ import {
   type Document,
   type Session,
 } from "@/lib/types";
-import { LocationRow } from "./location/LocationRow";
+import { LocationPrintRow } from "./location/LocationPrintRow";
-import { MonsterRow } from "./monsters/MonsterRow";
+import { MonsterPrintRow } from "./monsters/MonsterPrintRow";
-import { NpcRow } from "./npc/NpcRow";
+import { NpcPrintRow } from "./npc/NpcPrintRow";
-import { SceneRow } from "./scene/SceneRow";
+import { ScenePrintRow } from "./scene/ScenePrintRow";
-import { TreasureRow } from "./treasure/TreasureRow";
+import { SessionPrintRow } from "./session/SessionPrintRow";
+import { TreasureToggleRow } from "./treasure/TreasureToggleRow";
 
 /**
  * Renders a row for any document type. Prioritizes Session, then Secret, then falls back to ID and creation time.
@@ -31,31 +31,31 @@ export const DocumentRow = ({
   session?: Session;
 }) => {
   if (isLocation(document)) {
-    return <LocationRow location={document} />;
+    return <LocationPrintRow location={document} />;
   }
 
   if (isMonster(document)) {
-    return <MonsterRow monster={document} />;
+    return <MonsterPrintRow monster={document} />;
   }
 
   if (isNpc(document)) {
-    return <NpcRow npc={document} />;
+    return <NpcPrintRow npc={document} />;
   }
 
   if (isSession(document)) {
-    return <SessionRow session={document} />;
+    return <SessionPrintRow session={document} />;
   }
 
   if (isSecret(document)) {
-    return <SecretRow secret={document} session={session} />;
+    return <SecretToggleRow secret={document} session={session} />;
   }
 
   if (isScene(document)) {
-    return <SceneRow scene={document} />;
+    return <ScenePrintRow scene={document} />;
   }
 
   if (isTreasure(document)) {
-    return <TreasureRow treasure={document} session={session} />;
+    return <TreasureToggleRow treasure={document} session={session} />;
   }
 
   // Fallback: show ID and creation time

src/components/documents/location/LocationEditForm.tsx

@@ -3,9 +3,9 @@ import { pb } from "@/lib/pocketbase";
 import type { Location } from "@/lib/types";
 
 /**
- * Renders an editable location row
+ * Renders an editable location form
  */
-export const LocationRow = ({ location }: { location: Location }) => {
+export const LocationEditForm = ({ location }: { location: Location }) => {
   async function saveLocationName(name: string) {
     await pb.collection("documents").update(location.id, {
       data: {

src/components/documents/monsters/MonsterEditForm.tsx

@@ -5,7 +5,7 @@ import type { Monster } from "@/lib/types";
 /**
  * Renders an editable monster row
  */
-export const MonsterRow = ({ monster }: { monster: Monster }) => {
+export const MonsterEditForm = ({ monster }: { monster: Monster }) => {
   async function saveMonsterName(name: string) {
     await pb.collection("documents").update(monster.id, {
       data: {

src/components/documents/npc/NpcEditForm.tsx

@@ -3,9 +3,9 @@ import { pb } from "@/lib/pocketbase";
 import type { Npc } from "@/lib/types";
 
 /**
- * Renders an editable npc row
+ * Renders an editable npc form
  */
-export const NpcRow = ({ npc }: { npc: Npc }) => {
+export const NpcEditForm = ({ npc }: { npc: Npc }) => {
   async function saveNpcName(name: string) {
     await pb.collection("documents").update(npc.id, {
       data: {

src/components/documents/scene/SceneEditForm.tsx

@@ -3,9 +3,9 @@ import { pb } from "@/lib/pocketbase";
 import type { Scene } from "@/lib/types";
 
 /**
- * Renders an editable scene row
+ * Renders an editable scene form
  */
-export const SceneRow = ({ scene }: { scene: Scene }) => {
+export const SceneEditForm = ({ scene }: { scene: Scene }) => {
   async function saveScene(text: string) {
     await pb.collection("documents").update(scene.id, {
       data: {

src/components/documents/secret/SecretEditForm.tsx

@@ -0,0 +1,90 @@
+// Displays a single secret with discovered checkbox and text.
+import type { Secret, Session } from "@/lib/types";
+import { pb } from "@/lib/pocketbase";
+import { useState } from "react";
+import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
+
+/**
+ * Renders an editable secret form.
+ * Handles updating the discovered state and discoveredIn relationship.
+ */
+export const SecretEditForm = ({
+  secret,
+  session,
+}: {
+  secret: Secret;
+  session?: Session;
+}) => {
+  const [checked, setChecked] = useState(
+    !!(secret.data as any)?.secret?.discovered,
+  );
+  const [loading, setLoading] = useState(false);
+
+  async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const newChecked = e.target.checked;
+    setLoading(true);
+    setChecked(newChecked);
+    try {
+      await pb.collection("documents").update(secret.id, {
+        data: {
+          ...secret.data,
+          secret: {
+            ...(secret.data as any).secret,
+            discovered: newChecked,
+          },
+        },
+      });
+      if (session || !newChecked) {
+        // If the session exists or the element is being unchecked, remove any
+        // existing discoveredIn relationship
+        const rels = await pb.collection("relationships").getList(1, 1, {
+          filter: `primary = "${secret.id}" && type = "discoveredIn"`,
+        });
+        if (rels.items.length > 0) {
+          await pb.collection("relationships").delete(rels.items[0].id);
+        }
+      }
+      if (session) {
+        if (newChecked) {
+          await pb.collection("relationships").create({
+            primary: secret.id,
+            secondary: [session.id],
+            type: "discoveredIn",
+          });
+        }
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function saveText(text: string) {
+    await pb.collection("documents").update(secret.id, {
+      data: {
+        ...secret.data,
+        secret: {
+          ...secret.data.secret,
+          text,
+        },
+      },
+    });
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={handleChange}
+        className="accent-emerald-500 w-5 h-5"
+        aria-label="Discovered"
+        disabled={loading}
+      />
+      <AutoSaveTextarea
+        multiline={false}
+        value={secret.data.secret.text}
+        onSave={saveText}
+      />
+    </div>
+  );
+};

src/components/documents/secret/SecretToggleRow.tsx

@@ -8,7 +8,7 @@ import { useState } from "react";
  * Renders a secret row with a discovered checkbox and secret text.
  * Handles updating the discovered state and discoveredIn relationship.
  */
-export const SecretRow = ({
+export const SecretToggleRow = ({
   secret,
   session,
 }: {

src/components/documents/session/SessionEditForm.tsx

@@ -1,19 +1,26 @@
 import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
+import { pb } from "@/lib/pocketbase";
 import type { Session } from "@/lib/types";
 
-export const EditSessionForm = ({
+export const SessionEditForm = ({ session }: { session: Session }) => {
-  session,
+  async function saveStrongStart(strongStart: string) {
-  onSubmit,
+    await pb.collection("documents").update(session.id, {
-}: {
+      data: {
-  session: Session;
+        ...session.data,
-  onSubmit: (data: Session["data"]) => Promise<void>;
+        session: {
-}) => {
+          ...session.data.session,
+          strongStart,
+        },
+      },
+    });
+  }
+
   return (
     <form>
       <h3 className="text-lg font-bold mb-4 text-slate-100">Strong Start</h3>
       <AutoSaveTextarea
         value={session.data.session.strongStart}
-        onSave={(value) => onSubmit({ session: { strongStart: value } })}
+        onSave={saveStrongStart}
         placeholder="Enter a strong start for this session..."
         aria-label="Strong Start"
       />

src/components/documents/treasure/TreasureEditForm.tsx

@@ -0,0 +1,90 @@
+// Displays a single treasure with discovered checkbox and text.
+import type { Treasure, Session } from "@/lib/types";
+import { pb } from "@/lib/pocketbase";
+import { useState } from "react";
+import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
+
+/**
+ * Renders an editable treasure form.
+ * Handles updating the discovered state and discoveredIn relationship.
+ */
+export const TreasureEditForm = ({
+  treasure,
+  session,
+}: {
+  treasure: Treasure;
+  session?: Session;
+}) => {
+  const [checked, setChecked] = useState(
+    !!(treasure.data as any)?.treasure?.discovered,
+  );
+  const [loading, setLoading] = useState(false);
+
+  async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const newChecked = e.target.checked;
+    setLoading(true);
+    setChecked(newChecked);
+    try {
+      await pb.collection("documents").update(treasure.id, {
+        data: {
+          ...treasure.data,
+          treasure: {
+            ...(treasure.data as any).treasure,
+            discovered: newChecked,
+          },
+        },
+      });
+      if (session || !newChecked) {
+        // If the session exists or the element is being unchecked, remove any
+        // existing discoveredIn relationship
+        const rels = await pb.collection("relationships").getList(1, 1, {
+          filter: `primary = "${treasure.id}" && type = "discoveredIn"`,
+        });
+        if (rels.items.length > 0) {
+          await pb.collection("relationships").delete(rels.items[0].id);
+        }
+      }
+      if (session) {
+        if (newChecked) {
+          await pb.collection("relationships").create({
+            primary: treasure.id,
+            secondary: [session.id],
+            type: "discoveredIn",
+          });
+        }
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function saveText(text: string) {
+    await pb.collection("documents").update(treasure.id, {
+      data: {
+        ...treasure.data,
+        treasure: {
+          ...treasure.data.treasure,
+          text,
+        },
+      },
+    });
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={handleChange}
+        className="accent-emerald-500 w-5 h-5"
+        aria-label="Discovered"
+        disabled={loading}
+      />
+      <AutoSaveTextarea
+        multiline={false}
+        value={treasure.data.treasure.text}
+        onSave={saveText}
+      />
+    </div>
+  );
+};

src/components/documents/treasure/TreasureToggleRow.tsx

@@ -8,7 +8,7 @@ import { useState } from "react";
  * Renders a treasure row with a discovered checkbox and treasure text.
  * Handles updating the discovered state and discoveredIn relationship.
  */
-export const TreasureRow = ({
+export const TreasureToggleRow = ({
   treasure,
   session,
 }: {

src/lib/types.ts

@@ -48,12 +48,32 @@ export type DocumentData<K extends string, V> = {
 export type Document = RecordModel & {
   id: DocumentId;
   campaign: CampaignId;
-  data: {};
+  data: {
+    [K in DocumentType]?: unknown;
+  };
   // These two are not in Pocketbase's types, but they seem to always be present
   created: ISO8601Date;
   updated: ISO8601Date;
 };
 
+export type DocumentType =
+  | "location"
+  | "monster"
+  | "npc"
+  | "scene"
+  | "secret"
+  | "session"
+  | "treasure";
+
+export type AnyDocument =
+  | Location
+  | Monster
+  | Npc
+  | Scene
+  | Secret
+  | Session
+  | Treasure;
+
 /** Locations **/
 
 export type Location = Document &

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

@@ -1,16 +1,15 @@
-import _ from "lodash";
+import { RelationshipList } from "@/components/RelationshipList";
-import { createFileRoute, Link } from "@tanstack/react-router";
+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 { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
-import { EditSessionForm } from "@/components/documents/session/EditSessionForm";
+import { createFileRoute, Link } from "@tanstack/react-router";
-import { displayName } from "@/lib/relationships";
+import _ from "lodash";
-import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/react";
 
 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 {
+  const { document, relationships } = Route.useLoaderData() as {
-    document: Session;
+    document: AnyDocument;
-    relationships: Record<RelationshipType, Document[]>;
+    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
+      <DocumentEditForm document={document} />
-        session={session as Session}
-        onSubmit={handleSaveSession}
-      />
       <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] ?? []}
               />