Adds Monsters and Locations

src/components/documents/location/LocationForm.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import type { CampaignId, Location } from "@/lib/types";
+import { pb } from "@/lib/pocketbase";
+
+/**
+ * Renders a form to add a new location. Calls onCreate with the new location document.
+ */
+export const LocationForm = ({
+  campaign,
+  onCreate,
+}: {
+  campaign: CampaignId;
+  onCreate: (location: Location) => 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 locationDoc: Location = await pb.collection("documents").create({
+        campaign,
+        data: {
+          location: {
+            name,
+            description,
+          },
+        },
+      });
+      setName("");
+      setDescription("");
+      await onCreate(locationDoc);
+    } catch (e: any) {
+      setError(e?.message || "Failed to add location.");
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <form
+      className="flex items-left flex-col gap-2 mt-4"
+      onSubmit={handleSubmit}
+    >
+      <h3>Create new location</h3>
+      <div className="flex gap-5 w-full items-center">
+        <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 items-center">
+        <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/location/LocationRow.tsx

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