Adds NPCs

pb_migrations/1748755724_updated_relationships.js

@@ -0,0 +1,48 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_617371094")
+
+  // update field
+  collection.fields.addAt(3, new Field({
+    "hidden": false,
+    "id": "select2363381545",
+    "maxSelect": 1,
+    "name": "type",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "select",
+    "values": [
+      "discoveredIn",
+      "secrets",
+      "treasures",
+      "scenes",
+      "npcs",
+      "locations"
+    ]
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_617371094")
+
+  // update field
+  collection.fields.addAt(3, new Field({
+    "hidden": false,
+    "id": "select2363381545",
+    "maxSelect": 1,
+    "name": "type",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "select",
+    "values": [
+      "discoveredIn",
+      "secrets",
+      "treasures",
+      "scenes"
+    ]
+  }))
+
+  return app.save(collection)
+})

src/components/AutoSaveTextarea.tsx

@@ -9,12 +9,14 @@ export function AutoSaveTextarea({
   onSave,
   delay = 500,
   className = "",
+  multiline = true,
   ...props
 }: {
   value: string;
   onSave: (value: string) => Promise<void>;
   delay?: number;
   className?: string;
+  multiline?: boolean;
   [key: string]: any;
 }) {
   const [value, setValue] = useState(initialValue || "");
@@ -35,7 +37,9 @@ export function AutoSaveTextarea({
     };
   }, []);
 
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => {
     setValue(e.target.value);
     setSaved(false);
     setFlash(false);
@@ -55,12 +59,21 @@ export function AutoSaveTextarea({
 
   return (
     <div className="relative">
+      {multiline ? (
         <textarea
           value={value}
           onChange={handleChange}
           className={`w-full min-h-[4rem] p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${flash ? "ring-2 ring-emerald-400 border-emerald-400 bg-emerald-950" : ""} ${className}`}
           {...props}
         />
+      ) : (
+        <input
+          value={value}
+          onChange={handleChange}
+          className={`w-full p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${flash ? "ring-2 ring-emerald-400 border-emerald-400 bg-emerald-950" : ""} ${className}`}
+          {...props}
+        />
+      )}
       {saved && !saving && (
         <span className="absolute bottom-1 right-2 text-emerald-400 text-xs bg-slate-900 bg-opacity-80 px-2 py-0.5 rounded shadow">
           Saved

src/components/documents/DocumentForm.tsx

@@ -2,6 +2,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";
+import { NpcForm } from "./npc/NpcForm";
 
 function assertUnreachable(_x: never): never {
   throw new Error("DocumentForm switch is not exhaustive");
@@ -20,6 +21,8 @@ export const DocumentForm = ({
   onCreate: (document: Document) => Promise<void>;
 }) => {
   switch (relationshipType) {
+    case RelationshipType.Npcs:
+      return <NpcForm campaign={campaignId} onCreate={onCreate} />;
     case RelationshipType.Secrets:
       return <SecretForm campaign={campaignId} onCreate={onCreate} />;
     case RelationshipType.DiscoveredIn:

src/components/documents/DocumentRow.tsx

@@ -3,6 +3,7 @@
 import { SessionRow } from "@/components/documents/session/SessionRow";
 import { SecretRow } from "@/components/documents/secret/SecretRow";
 import {
+  isNpc,
   isScene,
   isSecret,
   isSession,
@@ -12,6 +13,7 @@ import {
 } from "@/lib/types";
 import { TreasureRow } from "./treasure/TreasureRow";
 import { SceneRow } from "./scene/SceneRow";
+import { NpcRow } from "./npc/NpcRow";
 
 /**
  * Renders a row for any document type. Prioritizes Session, then Secret, then falls back to ID and creation time.
@@ -24,10 +26,14 @@ export const DocumentRow = ({
   document: Document;
   session?: Session;
 }) => {
+  if (isNpc(document)) {
+    return <NpcRow npc={document} />;
+  }
+
   if (isSession(document)) {
-    // Use SessionRow for session documents
     return <SessionRow session={document} />;
   }
+
   if (isSecret(document)) {
     return <SecretRow secret={document} session={session} />;
   }

src/components/documents/npc/NpcForm.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import type { CampaignId, Npc } from "@/lib/types";
+import { pb } from "@/lib/pocketbase";
+
+/**
+ * Renders a form to add a new npc. Calls onCreate with the new npc document.
+ */
+export const NpcForm = ({
+  campaign,
+  onCreate,
+}: {
+  campaign: CampaignId;
+  onCreate: (npc: Npc) => Promise<void>;
+}) => {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [adding, setAdding] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) return;
+    setAdding(true);
+    setError(null);
+    try {
+      const npcDoc: Npc = await pb.collection("documents").create({
+        campaign,
+        data: {
+          npc: {
+            name,
+            description,
+          },
+        },
+      });
+      setName("");
+      setDescription("");
+      await onCreate(npcDoc);
+    } catch (e: any) {
+      setError(e?.message || "Failed to add npc.");
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <form
+      className="flex items-left flex-col gap-2 mt-4"
+      onSubmit={handleSubmit}
+    >
+      <h3>Create new npc</h3>
+      <div className="flex gap-5 w-full">
+        <label>Name</label>
+        <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="Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          disabled={adding}
+          aria-label="Name"
+        />
+      </div>
+      <div className="flex gap-5 w-full">
+        <label>Description</label>
+        <textarea
+          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="Description"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          disabled={adding}
+          aria-label="Description"
+        />
+      </div>
+      {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 || !name.trim()}
+      >
+        {adding ? "Adding..." : "Create"}
+      </button>
+    </form>
+  );
+};

src/components/documents/npc/NpcRow.tsx

@@ -0,0 +1,46 @@
+import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
+import { pb } from "@/lib/pocketbase";
+import type { Npc } from "@/lib/types";
+
+/**
+ * Renders an editable npc row
+ */
+export const NpcRow = ({ npc }: { npc: Npc }) => {
+  async function saveNpcName(name: string) {
+    await pb.collection("documents").update(npc.id, {
+      data: {
+        ...npc.data,
+        npc: {
+          ...npc.data.npc,
+          name,
+        },
+      },
+    });
+  }
+
+  async function saveNpcDescription(description: string) {
+    await pb.collection("documents").update(npc.id, {
+      data: {
+        ...npc.data,
+        npc: {
+          ...npc.data.npc,
+          description,
+        },
+      },
+    });
+  }
+
+  return (
+    <div className="">
+      <AutoSaveTextarea
+        multiline={false}
+        value={npc.data.npc.name}
+        onSave={saveNpcName}
+      />
+      <AutoSaveTextarea
+        value={npc.data.npc.description}
+        onSave={saveNpcDescription}
+      />
+    </div>
+  );
+};

src/lib/types.ts

@@ -23,6 +23,7 @@ export const RelationshipType = {
   Scenes: "scenes",
   Secrets: "secrets",
   Treasures: "treasures",
+  Npcs: "npcs",
 } as const;
 
 export type RelationshipType =
@@ -51,6 +52,21 @@ export type Document = RecordModel & {
   updated: ISO8601Date;
 };
 
+/** NPCs **/
+
+export type Npc = Document &
+  DocumentData<
+    "npc",
+    {
+      name: string;
+      description: string;
+    }
+  >;
+
+export function isNpc(doc: Document): doc is Npc {
+  return Object.hasOwn(doc.data, "npc");
+}
+
 /** Session **/
 
 export type Session = Document &

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

@@ -51,6 +51,7 @@ function RouteComponent() {
       {[
         RelationshipType.Scenes,
         RelationshipType.Secrets,
+        RelationshipType.Npcs,
         RelationshipType.Treasures,
       ].map((relationshipType) => (
         <RelationshipList