Fixes the copy on new sessions, some additional styling work

src/components/documents/BasicRow.tsx

@@ -12,15 +12,15 @@ export type Props = {
  */
 export const BasicRow = ({ doc, title, description }: Props) => {
   return (
-    <li>
+    <div>
       <Link
         to="/document/$documentId"
         params={{ documentId: doc.id }}
-        className="text-lg"
+        className="text-lg !no-underline text-slate-100 hover:underline hover:text-violet-400"
       >
         <h4>{title}</h4>
       </Link>
       {description && <p>{description}</p>}
-    </li>
+    </div>
   );
 };

src/components/documents/NewRelatedDocumentForm.tsx

@@ -1,4 +1,8 @@
-import { RelationshipType, type CampaignId, type Document } from "@/lib/types";
+import {
+  RelationshipType,
+  type CampaignId,
+  type AnyDocument,
+} from "@/lib/types";
 import { NewLocationForm } from "./location/NewLocationForm";
 import { NewMonsterForm } from "./monsters/NewMonsterForm";
 import { NewNpcForm } from "./npc/NewNpcForm";
@@ -6,10 +10,6 @@ import { NewSceneForm } from "./scene/NewSceneForm";
 import { NewSecretForm } from "./secret/NewSecretForm";
 import { NewTreasureForm } from "./treasure/NewTreasureForm";
 
-function assertUnreachable(_x: never): never {
-  throw new Error("DocumentForm switch is not exhaustive");
-}
-
 /**
  * Renders a form for any document type depending on the relationship.
  */
@@ -20,7 +20,7 @@ export const NewRelatedDocumentForm = ({
 }: {
   campaignId: CampaignId;
   relationshipType: RelationshipType;
-  onCreate: (document: Document) => Promise<void>;
+  onCreate: (doc: AnyDocument) => Promise<void>;
 }) => {
   switch (relationshipType) {
     case RelationshipType.Locations:
@@ -38,6 +38,4 @@ export const NewRelatedDocumentForm = ({
     case RelationshipType.DiscoveredIn:
       return "Form not supported here";
   }
-
-  return assertUnreachable(relationshipType);
 };

src/components/documents/location/LocationPrintRow.tsx

@@ -5,9 +5,9 @@ import type { Location } from "@/lib/types";
  */
 export const LocationPrintRow = ({ location }: { location: Location }) => {
   return (
-    <li>
+    <div>
       <h4>{location.data.name}</h4>
       <p>{location.data.description}</p>
-    </li>
+    </div>
   );
 };

src/components/documents/monsters/MonsterPrintRow.tsx

@@ -4,5 +4,5 @@ import type { Monster } from "@/lib/types";
  * Renders an editable monster row
  */
 export const MonsterPrintRow = ({ monster }: { monster: Monster }) => {
-  return <li>{monster.data..name}</li>;
+  return <div>{monster.data.name}</div>;
 };

src/components/documents/npc/NpcPrintRow.tsx

@@ -5,9 +5,9 @@ import type { Npc } from "@/lib/types";
  */
 export const NpcPrintRow = ({ npc }: { npc: Npc }) => {
   return (
-    <li className="">
+    <div className="">
       <h4>{npc.data.name}</h4>
       <p>{npc.data.description}</p>
-    </li>
+    </div>
   );
 };

src/components/documents/scene/NewSceneForm.tsx

@@ -3,6 +3,8 @@
 import { useState } from "react";
 import type { CampaignId, Scene } from "@/lib/types";
 import { pb } from "@/lib/pocketbase";
+import { BaseForm } from "@/components/form/BaseForm";
+import { MultiLineInput } from "@/components/form/MultiLineInput";
 
 /**
  * Renders a form to add a new scene. Calls onCreate with the new scene document.
@@ -41,28 +43,22 @@ export const NewSceneForm = ({
   }
 
   return (
-    <form
-      className="flex flex-col items-left gap-2 mt-4"
+    <BaseForm
+      title="Create new scene"
       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>
+      error={error}
+      buttonText={adding ? "Adding..." : "Create"}
+      content={
+        <>
+          <MultiLineInput
+            value={text}
+            onChange={(v) => setText(v)}
+            disabled={adding}
+            placeholder="Scene description..."
+            aria-label="Add new scene"
+          />
+        </>
+      }
+    />
   );
 };

src/components/documents/scene/ScenePrintRow.tsx

@@ -4,5 +4,5 @@ import type { Scene } from "@/lib/types";
  * Renders an editable scene row
  */
 export const ScenePrintRow = ({ scene }: { scene: Scene }) => {
-  return <li className="">{scene.data.text}</li>;
+  return <div className="">{scene.data.text}</div>;
 };

src/components/documents/treasure/TreasurePrintRow.tsx

@@ -8,7 +8,7 @@ import type { Treasure } from "@/lib/types";
  */
 export const TreasurePrintRow = ({ treasure }: { treasure: Treasure }) => {
   return (
-    <li className="flex items-center gap-3">
+    <div className="flex items-center gap-3">
       <input
         type="checkbox"
         className="flex-none accent-emerald-500 w-5 h-5"
@@ -19,6 +19,6 @@ export const TreasurePrintRow = ({ treasure }: { treasure: Treasure }) => {
           <span className="italic text-slate-400">(No treasure text)</span>
         )}
       </span>
-    </li>
+    </div>
   );
 };