Adds scenes

src/components/RelationshipList.tsx

@@ -1,13 +1,14 @@
-import { useEffect, useState } from "react";
+import { DocumentList } from "@/components/DocumentList";
 import { pb } from "@/lib/pocketbase";
 import type { Document, RelationshipType } from "@/lib/types";
-import { DocumentList } from "@/components/DocumentList";
+import { useState } from "react";
 import { Loader } from "./Loader";
-import { DocumentRow } from "./documents/DocumentRow";
 import { DocumentForm } from "./documents/DocumentForm";
+import { DocumentRow } from "./documents/DocumentRow";
 
 interface RelationshipListProps {
   root: Document;
+  items: Document[];
   relationshipType: RelationshipType;
 }
 
@@ -17,50 +18,13 @@ interface RelationshipListProps {
  */
 export function RelationshipList({
   root,
+  items: initialItems,
   relationshipType,
 }: RelationshipListProps) {
-  const [items, setItems] = useState<Document[]>([]);
+  const [items, setItems] = useState<Document[]>(initialItems);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // Fetch related documents on mount or when root/relationshipType changes
-  useEffect(() => {
-    let cancelled = false;
-    async function fetchRelated() {
-      setLoading(true);
-      setError(null);
-      try {
-        const relationships = await pb
-          .collection("relationships")
-          .getList(1, 1, {
-            filter: `primary = "${root.id}" && type = "${relationshipType}"`,
-          });
-        const secondaryIds =
-          relationships.items.length > 0
-            ? relationships.items[0].secondary
-            : [];
-        let docs: Document[] = [];
-        if (Array.isArray(secondaryIds) && secondaryIds.length > 0) {
-          docs = (await pb.collection("documents").getFullList({
-            filter: secondaryIds
-              .map((id: string) => `id = "${id}"`)
-              .join(" || "),
-          })) as Document[];
-        }
-        if (!cancelled) setItems(docs);
-      } catch (e: any) {
-        if (!cancelled)
-          setError(e?.message || "Failed to load related documents.");
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    }
-    fetchRelated();
-    return () => {
-      cancelled = true;
-    };
-  }, [root.id, relationshipType]);
-
   // Handles creation of a new document and adds it to the relationship
   const handleCreate = async (doc: Document) => {
     setLoading(true);

src/components/documents/DocumentForm.tsx

@@ -1,6 +1,7 @@
 import { RelationshipType, type CampaignId, type Document } from "@/lib/types";
 import { SecretForm } from "./secret/SecretForm";
 import { TreasureForm } from "./treasure/TreasureForm";
+import { SceneForm } from "./scene/SceneForm";
 
 function assertUnreachable(_x: never): never {
   throw new Error("DocumentForm switch is not exhaustive");
@@ -25,6 +26,8 @@ export const DocumentForm = ({
       return "Form not supported here";
     case RelationshipType.Treasures:
       return <TreasureForm campaign={campaignId} onCreate={onCreate} />;
+    case RelationshipType.Scenes:
+      return <SceneForm campaign={campaignId} onCreate={onCreate} />;
   }
 
   return assertUnreachable(relationshipType);

src/components/documents/DocumentRow.tsx

@@ -3,6 +3,7 @@
 import { SessionRow } from "@/components/documents/session/SessionRow";
 import { SecretRow } from "@/components/documents/secret/SecretRow";
 import {
+  isScene,
   isSecret,
   isSession,
   isTreasure,
@@ -10,6 +11,7 @@ import {
   type Session,
 } from "@/lib/types";
 import { TreasureRow } from "./treasure/TreasureRow";
+import { SceneRow } from "./scene/SceneRow";
 
 /**
  * Renders a row for any document type. Prioritizes Session, then Secret, then falls back to ID and creation time.
@@ -29,6 +31,11 @@ export const DocumentRow = ({
   if (isSecret(document)) {
     return <SecretRow secret={document} session={session} />;
   }
+
+  if (isScene(document)) {
+    return <SceneRow scene={document} />;
+  }
+
   if (isTreasure(document)) {
     return <TreasureRow treasure={document} session={session} />;
   }

src/components/documents/scene/SceneForm.tsx

@@ -0,0 +1,66 @@
+// SceneForm.tsx
+// Form for adding a new scene to a session.
+import { useState } from "react";
+import type { CampaignId, Scene } from "@/lib/types";
+import { pb } from "@/lib/pocketbase";
+
+/**
+ * Renders a form to add a new scene. Calls onCreate with the new scene document.
+ */
+export const SceneForm = ({
+  campaign,
+  onCreate,
+}: {
+  campaign: CampaignId;
+  onCreate: (scene: Scene) => Promise<void>;
+}) => {
+  const [text, setText] = useState("");
+  const [adding, setAdding] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!text.trim()) return;
+    setAdding(true);
+    setError(null);
+    try {
+      const sceneDoc: Scene = await pb.collection("documents").create({
+        campaign,
+        data: {
+          scene: {
+            text,
+          },
+        },
+      });
+      setText("");
+      await onCreate(sceneDoc);
+    } catch (e: any) {
+      setError(e?.message || "Failed to add scene.");
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <form className="flex items-center gap-2 mt-4" onSubmit={handleSubmit}>
+      <h3>Create new scene</h3>
+      <input
+        type="text"
+        className="flex-1 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"
+        placeholder="Add a new scene..."
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        disabled={adding}
+        aria-label="Add new scene"
+      />
+      {error && <div className="text-red-400 mt-2 text-sm">{error}</div>}
+      <button
+        type="submit"
+        className="px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
+        disabled={adding || !text.trim()}
+      >
+        {adding ? "Adding..." : "Create"}
+      </button>
+    </form>
+  );
+};

src/components/documents/scene/SceneRow.tsx

@@ -0,0 +1,25 @@
+import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
+import { pb } from "@/lib/pocketbase";
+import type { Scene } from "@/lib/types";
+
+/**
+ * Renders an editable scene row
+ */
+export const SceneRow = ({ scene }: { scene: Scene }) => {
+  async function saveScene(text: string) {
+    await pb.collection("documents").update(scene.id, {
+      data: {
+        ...scene.data,
+        scene: {
+          text,
+        },
+      },
+    });
+  }
+
+  return (
+    <div className="">
+      <AutoSaveTextarea value={scene.data.scene.text} onSave={saveScene} />
+    </div>
+  );
+};

src/lib/types.ts

@@ -19,8 +19,9 @@ export type Campaign = RecordModel & {
  ******************************************/
 
 export const RelationshipType = {
-  Secrets: "secrets",
   DiscoveredIn: "discoveredIn",
+  Scenes: "scenes",
+  Secrets: "secrets",
   Treasures: "treasures",
 } as const;
 
@@ -50,6 +51,8 @@ export type Document = RecordModel & {
   updated: ISO8601Date;
 };
 
+/** Session **/
+
 export type Session = Document &
   DocumentData<
     "session",
@@ -62,6 +65,22 @@ export function isSession(doc: Document): doc is Session {
   return Object.hasOwn(doc.data, "session");
 }
 
+/** Scene **/
+
+export type Scene = Document &
+  DocumentData<
+    "scene",
+    {
+      text: string;
+    }
+  >;
+
+export function isScene(doc: Document): doc is Scene {
+  return Object.hasOwn(doc.data, "scene");
+}
+
+/** Secret **/
+
 export type Secret = Document &
   DocumentData<
     "secret",
@@ -75,6 +94,8 @@ export function isSecret(doc: Document): doc is Secret {
   return Object.hasOwn(doc.data, "secret");
 }
 
+/** Treasure **/
+
 export type Treasure = Document &
   DocumentData<
     "treasure",

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

@@ -1,19 +1,41 @@
+import _ from "lodash";
 import { createFileRoute } from "@tanstack/react-router";
 import { pb } from "@/lib/pocketbase";
-import { RelationshipType, type Session } from "@/lib/types";
+import {
+  RelationshipType,
+  type Relationship,
+  type Session,
+  type Document,
+} from "@/lib/types";
 import { RelationshipList } from "@/components/RelationshipList";
 import { SessionForm } from "@/components/documents/session/SessionForm";
 
 export const Route = createFileRoute("/_authenticated/document/$documentId")({
   loader: async ({ params }) => {
     const doc = await pb.collection("documents").getOne(params.documentId);
-    return { document: doc };
+    const relationships: Relationship[] = await pb
+      .collection("relationships")
+      .getFullList({
+        filter: `primary = "${params.documentId}"`,
+        expand: "secondary",
+      });
+    console.log("Fetched data: ", relationships);
+    return {
+      document: doc,
+      relationships: _.mapValues(
+        _.groupBy(relationships, (r) => r.type),
+        (rs: Relationship[]) => rs.flatMap((r) => r.expand?.secondary),
+      ),
+    };
   },
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  const { document: session }: { document: Session } = Route.useLoaderData();
+  const { document: session, relationships } = Route.useLoaderData() as {
+    document: Session;
+    relationships: Record<RelationshipType, Document[]>;
+  };
 
   async function handleSaveSession(data: Session["data"]) {
     await pb.collection("documents").update(session.id, {
@@ -21,17 +43,23 @@ function RouteComponent() {
     });
   }
 
+  console.log("Parsed data: ", relationships);
+
   return (
     <div className="max-w-xl mx-auto py-8">
       <SessionForm session={session as Session} onSubmit={handleSaveSession} />
-      <RelationshipList
-        root={session}
-        relationshipType={RelationshipType.Secrets}
-      />
-      <RelationshipList
-        root={session}
-        relationshipType={RelationshipType.Treasures}
-      />
+      {[
+        RelationshipType.Scenes,
+        RelationshipType.Secrets,
+        RelationshipType.Treasures,
+      ].map((relationshipType) => (
+        <RelationshipList
+          key={relationshipType}
+          root={session}
+          relationshipType={relationshipType}
+          items={relationships[relationshipType] ?? []}
+        />
+      ))}
     </div>
   );
 }