From f8130f0ba96f25f2bfe731ccdebca062482c13f9 Mon Sep 17 00:00:00 2001
From: Drew Haven <drew.haven@gmail.com>
Date: Sat, 28 Jun 2025 18:01:15 -0700
Subject: [PATCH] Cleans up the new-doc forms.

---
 .../documents/location/NewLocationForm.tsx    | 62 ++++++++-----------
 .../documents/monsters/NewMonsterForm.tsx     | 38 ++++--------
 src/components/documents/npc/NewNpcForm.tsx   | 62 ++++++++-----------
 .../documents/secret/NewSecretForm.tsx        | 34 +++++-----
 .../documents/treasure/NewTreasureForm.tsx    | 33 ++++------
 src/components/form/BaseForm.tsx              |  6 +-
 src/components/form/MultiLineInput.tsx        | 18 ++++--
 src/components/form/SingleLineInput.tsx       | 29 +++++++++
 8 files changed, 135 insertions(+), 147 deletions(-)
 create mode 100644 src/components/form/SingleLineInput.tsx

diff --git a/src/components/documents/location/NewLocationForm.tsx b/src/components/documents/location/NewLocationForm.tsx
index a9021df..d6c1f6d 100644
--- a/src/components/documents/location/NewLocationForm.tsx
+++ b/src/components/documents/location/NewLocationForm.tsx
@@ -1,6 +1,9 @@
 import { useState } from "react";
 import type { CampaignId, Location } from "@/lib/types";
 import { pb } from "@/lib/pocketbase";
+import { BaseForm } from "@/components/form/BaseForm";
+import { MultiLineInput } from "@/components/form/MultiLineInput";
+import { SingleLineInput } from "@/components/form/SingleLineInput";
 
 /**
  * Renders a form to add a new location. Calls onCreate with the new location document.
@@ -42,42 +45,29 @@ export const NewLocationForm = ({
   }
 
   return (
-    <form
-      className="flex items-left flex-col gap-2 mt-4"
+    <BaseForm
+      title="Create new Location"
       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>
+      isLoading={adding || !name.trim()}
+      error={error}
+      content={
+        <>
+          <SingleLineInput
+            label="Name"
+            value={name}
+            onChange={setName}
+            disabled={adding}
+            placeholder="Enter location name"
+          />
+          <MultiLineInput
+            label="Description"
+            value={description}
+            placeholder="Enter location description"
+            onChange={setDescription}
+            disabled={adding}
+          />
+        </>
+      }
+    />
   );
 };
diff --git a/src/components/documents/monsters/NewMonsterForm.tsx b/src/components/documents/monsters/NewMonsterForm.tsx
index 893f382..09a638f 100644
--- a/src/components/documents/monsters/NewMonsterForm.tsx
+++ b/src/components/documents/monsters/NewMonsterForm.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
 import type { CampaignId, Monster } from "@/lib/types";
 import { pb } from "@/lib/pocketbase";
+import { BaseForm } from "@/components/form/BaseForm";
+import { SingleLineInput } from "@/components/form/SingleLineInput";
 
 /**
  * Renders a form to add a new monster. Calls onCreate with the new monster document.
@@ -13,7 +15,6 @@ export const NewMonsterForm = ({
   onCreate: (monster: Monster) => Promise<void>;
 }) => {
   const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
   const [adding, setAdding] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -28,11 +29,9 @@ export const NewMonsterForm = ({
         type: "monster",
         data: {
           name,
-          description,
         },
       });
       setName("");
-      setDescription("");
       await onCreate(monsterDoc);
     } catch (e: any) {
       setError(e?.message || "Failed to add monster.");
@@ -42,31 +41,18 @@ export const NewMonsterForm = ({
   }
 
   return (
-    <form
-      className="flex items-left flex-col gap-2 mt-4"
+    <BaseForm
+      title="Create new monster"
+      isLoading={adding || !name.trim()}
       onSubmit={handleSubmit}
-    >
-      <h3>Create new monster</h3>
-      <div className="flex gap-5 w-full align-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"
+      error={error}
+      content={
+        <SingleLineInput
           value={name}
-          onChange={(e) => setName(e.target.value)}
-          disabled={adding}
-          aria-label="Name"
+          onChange={setName}
+          placeholder="Monster 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>
+      }
+    />
   );
 };
diff --git a/src/components/documents/npc/NewNpcForm.tsx b/src/components/documents/npc/NewNpcForm.tsx
index 9c964a0..fa934f5 100644
--- a/src/components/documents/npc/NewNpcForm.tsx
+++ b/src/components/documents/npc/NewNpcForm.tsx
@@ -1,6 +1,9 @@
 import { useState } from "react";
 import type { CampaignId, Npc } from "@/lib/types";
 import { pb } from "@/lib/pocketbase";
+import { BaseForm } from "@/components/form/BaseForm";
+import { SingleLineInput } from "@/components/form/SingleLineInput";
+import { MultiLineInput } from "@/components/form/MultiLineInput";
 
 /**
  * Renders a form to add a new npc. Calls onCreate with the new npc document.
@@ -42,42 +45,29 @@ export const NewNpcForm = ({
   }
 
   return (
-    <form
-      className="flex items-left flex-col gap-2 mt-4"
+    <BaseForm
+      title="Create new NPC"
       onSubmit={handleSubmit}
-    >
-      <h3>Create new npc</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>
+      isLoading={adding}
+      error={error}
+      content={
+        <>
+          <SingleLineInput
+            label="Name"
+            value={name}
+            onChange={setName}
+            disabled={adding}
+            placeholder="Enter NPC name"
+          />
+          <MultiLineInput
+            label="Description"
+            value={description}
+            placeholder="Enter NPC description"
+            onChange={setDescription}
+            disabled={adding}
+          />
+        </>
+      }
+    />
   );
 };
diff --git a/src/components/documents/secret/NewSecretForm.tsx b/src/components/documents/secret/NewSecretForm.tsx
index fe6c63f..234182d 100644
--- a/src/components/documents/secret/NewSecretForm.tsx
+++ b/src/components/documents/secret/NewSecretForm.tsx
@@ -3,6 +3,8 @@
 import { useState } from "react";
 import type { CampaignId, Secret } from "@/lib/types";
 import { pb } from "@/lib/pocketbase";
+import { BaseForm } from "@/components/form/BaseForm";
+import { SingleLineInput } from "@/components/form/SingleLineInput";
 
 /**
  * Renders a form to add a new secret. Calls onCreate with the new secret document.
@@ -42,24 +44,18 @@ export const NewSecretForm = ({
   }
 
   return (
-    <form className="flex items-center gap-2 mt-4" onSubmit={handleSubmit}>
-      <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 secret..."
-        value={newSecret}
-        onChange={(e) => setNewSecret(e.target.value)}
-        disabled={adding}
-        aria-label="Add new secret"
-      />
-      {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 || !newSecret.trim()}
-      >
-        {adding ? "Adding..." : "Add Secret"}
-      </button>
-    </form>
+    <BaseForm
+      title="Create new treasure"
+      isLoading={adding || !newSecret.trim()}
+      onSubmit={handleSubmit}
+      error={error}
+      content={
+        <SingleLineInput
+          value={newSecret}
+          onChange={setNewSecret}
+          placeholder="Treasure description"
+        />
+      }
+    />
   );
 };
diff --git a/src/components/documents/treasure/NewTreasureForm.tsx b/src/components/documents/treasure/NewTreasureForm.tsx
index 2de22ab..28bf60b 100644
--- a/src/components/documents/treasure/NewTreasureForm.tsx
+++ b/src/components/documents/treasure/NewTreasureForm.tsx
@@ -3,6 +3,8 @@
 import { useState } from "react";
 import type { CampaignId, Treasure } from "@/lib/types";
 import { pb } from "@/lib/pocketbase";
+import { BaseForm } from "@/components/form/BaseForm";
+import { SingleLineInput } from "@/components/form/SingleLineInput";
 
 /**
  * Renders a form to add a new treasure. Calls onCreate with the new treasure document.
@@ -42,29 +44,18 @@ export const NewTreasureForm = ({
   }
 
   return (
-    <form
-      className="flex flex-col items-center gap-2 mt-4 w-full"
+    <BaseForm
+      title="Create new treasure"
+      isLoading={adding || !newTreasure.trim()}
       onSubmit={handleSubmit}
-    >
-      <div>
-        <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 treasure..."
+      error={error}
+      content={
+        <SingleLineInput
           value={newTreasure}
-          onChange={(e) => setNewTreasure(e.target.value)}
-          disabled={adding}
-          aria-label="Add new treasure"
+          onChange={setNewTreasure}
+          placeholder="Treasure 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 || !newTreasure.trim()}
-      >
-        {adding ? "Adding..." : "Add Treasure"}
-      </button>
-    </form>
+      }
+    />
   );
 };
diff --git a/src/components/form/BaseForm.tsx b/src/components/form/BaseForm.tsx
index 6f4f3fa..0b4e3d3 100644
--- a/src/components/form/BaseForm.tsx
+++ b/src/components/form/BaseForm.tsx
@@ -17,12 +17,12 @@ export const BaseForm = ({
 }: Props) => {
   return (
     <form className="flex flex-col items-left gap-2" onSubmit={onSubmit}>
-      <h3 className="text-lg font-semibold text-slate-100 mb-4">{title}</h3>
-      <div>{content}</div>
+      <h3 className="text-lg font-semibold text-slate-100">{title}</h3>
+      <div className="flex flex-col gap-2 w-full items-stretch">{content}</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"
+        className="mt-2 px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
         disabled={isLoading}
       >
         {buttonText ? buttonText : "Submit"}
diff --git a/src/components/form/MultiLineInput.tsx b/src/components/form/MultiLineInput.tsx
index 654b1ed..3fe8132 100644
--- a/src/components/form/MultiLineInput.tsx
+++ b/src/components/form/MultiLineInput.tsx
@@ -1,6 +1,7 @@
 export type Props = {
   value: string;
   onChange: (value: string) => void;
+  label?: string;
   className?: string;
 } & Omit<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
@@ -11,12 +12,17 @@ export const MultiLineInput = ({
   value,
   onChange,
   className = "",
+  label,
   ...props
 }: Props) => (
-  <textarea
-    value={value}
-    onChange={(e) => onChange(e.target.value)}
-    className={`w-full min-h-[10em] field-sizing-content 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 ${className}`}
-    {...props}
-  />
+  <>
+    {label && <label>{label}</label>}
+    <textarea
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className={`w-full min-h-[10em] field-sizing-content 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 ${className}`}
+      aria-label={label}
+      {...props}
+    />
+  </>
 );
diff --git a/src/components/form/SingleLineInput.tsx b/src/components/form/SingleLineInput.tsx
new file mode 100644
index 0000000..fddc327
--- /dev/null
+++ b/src/components/form/SingleLineInput.tsx
@@ -0,0 +1,29 @@
+export type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+  className?: string;
+} & Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "value" | "onChange" | "className"
+>;
+
+export const SingleLineInput = ({
+  value,
+  onChange,
+  className = "",
+  label,
+  ...props
+}: Props) => (
+  <>
+    {label && <label>{label}</label>}
+    <input
+      type="text"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      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 ${className}`}
+      aria-label={label}
+      {...props}
+    />
+  </>
+);