Moves secrets into it's own files.

src/components/documents/secret/SecretForm.tsx

@@ -0,0 +1,60 @@
+// SecretForm.tsx
+// Form for adding a new secret to a session.
+import { useState } from "react";
+import type { Session, Secret } from "@/lib/types";
+import { pb } from "@/lib/pocketbase";
+
+/**
+ * Renders a form to add a new secret. Calls onCreate with the new secret document.
+ */
+export const SecretForm = ({ session, onCreate }: { session: Session; onCreate: (secret: Secret) => Promise<void>; }) => {
+  const [newSecret, setNewSecret] = useState("");
+  const [adding, setAdding] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!newSecret.trim()) return;
+    setAdding(true);
+    setError(null);
+    try {
+      const secretDoc: Secret = await pb.collection("documents").create({
+        campaign: session.campaign,
+        data: {
+          secret: {
+            text: newSecret,
+            discovered: false,
+          },
+        },
+      });
+      setNewSecret("");
+      await onCreate(secretDoc);
+    } catch (e: any) {
+      setError(e?.message || "Failed to add secret.");
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  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>
+  );
+};

src/components/documents/secret/SecretRow.tsx

@@ -0,0 +1,65 @@
+// SecretRow.tsx
+// Displays a single secret with discovered checkbox and text.
+import type { Secret, Session } from "@/lib/types";
+import { pb } from "@/lib/pocketbase";
+import { useState } from "react";
+
+/**
+ * Renders a secret row with a discovered checkbox and secret text.
+ * Handles updating the discovered state and discoveredIn relationship.
+ */
+export const SecretRow = ({ secret, session }: { secret: Secret; session: Session }) => {
+  const [checked, setChecked] = useState(!!(secret.data as any)?.secret?.discovered);
+  const [loading, setLoading] = useState(false);
+
+  async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const newChecked = e.target.checked;
+    setLoading(true);
+    setChecked(newChecked);
+    try {
+      await pb.collection("documents").update(secret.id, {
+        data: {
+          ...secret.data,
+          secret: {
+            ...(secret.data as any).secret,
+            discovered: newChecked,
+          },
+        },
+      });
+      // Remove any existing discoveredIn relationship
+      const rels = await pb.collection("relationships").getList(1, 1, {
+        filter: `primary = "${secret.id}" && type = "discoveredIn"`,
+      });
+      if (rels.items.length > 0) {
+        await pb.collection("relationships").delete(rels.items[0].id);
+      }
+      if (newChecked) {
+        await pb.collection("relationships").create({
+          primary: secret.id,
+          secondary: [session.id],
+          type: "discoveredIn",
+        });
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={handleChange}
+        className="accent-emerald-500 w-5 h-5"
+        aria-label="Discovered"
+        disabled={loading}
+      />
+      <span>
+        {(secret.data as any)?.secret?.text || (
+          <span className="italic text-slate-400">(No secret text)</span>
+        )}
+      </span>
+    </div>
+  );
+};

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

@@ -1,9 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { pb } from "@/lib/pocketbase";
-import { useState } from "react";
+import { RelationshipType, type Session } from "@/lib/types";
-import { RelationshipType, type Secret, type Session } from "@/lib/types";
 import { RelationshipList } from "@/components/RelationshipList";
 import { SessionForm } from "@/components/documents/session/SessionForm";
+import { SecretRow } from "@/components/documents/secret/SecretRow";
+import { SecretForm } from "@/components/documents/secret/SecretForm";
 
 export const Route = createFileRoute("/_authenticated/document/$documentId")({
   loader: async ({ params }) => {
@@ -15,9 +16,6 @@ export const Route = createFileRoute("/_authenticated/document/$documentId")({
 
 function RouteComponent() {
   const { document: session }: { document: Session } = Route.useLoaderData();
-  const [newSecret, setNewSecret] = useState("");
-  const [adding, setAdding] = useState(false);
-  const [error, setError] = useState<string | null>(null);
 
   async function handleSaveSession(data: Session["data"]) {
     await pb.collection("documents").update(session.id, {
@@ -31,97 +29,12 @@ function RouteComponent() {
       <RelationshipList
         root={session}
         relationshipType={RelationshipType.Secrets}
-        renderRow={(secret) => (
+        renderRow={(secret) => {
-          <div className="flex items-center gap-3">
+          if (!(secret.data as any)?.secret) return null;
-            <input
+          return <SecretRow secret={secret as any} session={session} />;
-              type="checkbox"
-              checked={!!(secret.data as any)?.secret?.discovered}
-              onChange={async (e) => {
-                const checked = e.target.checked;
-                await pb.collection("documents").update(secret.id, {
-                  data: {
-                    ...secret.data,
-                    secret: {
-                      ...(secret.data as any).secret,
-                      discovered: checked,
-                    },
-                  },
-                });
-                // Remove any existing discoveredIn relationship
-                const rels = await pb
-                  .collection("relationships")
-                  .getList(1, 1, {
-                    filter: `primary = "${secret.id}" && type = "discoveredIn"`,
-                  });
-                if (rels.items.length > 0) {
-                  await pb.collection("relationships").delete(rels.items[0].id);
-                }
-                if (checked) {
-                  await pb.collection("relationships").create({
-                    primary: secret.id,
-                    secondary: [session.id],
-                    type: "discoveredIn",
-                  });
-                }
         }}
-              className="accent-emerald-500 w-5 h-5"
-              aria-label="Discovered"
-            />
-            <span>
-              {(secret.data as any)?.secret?.text || (
-                <span className="italic text-slate-400">(No secret text)</span>
-              )}
-            </span>
-          </div>
-        )}
         newItemForm={(onCreate) => (
-          <form
+          <SecretForm session={session} onCreate={onCreate} />
-            className="flex items-center gap-2 mt-4"
-            onSubmit={async (e) => {
-              e.preventDefault();
-              if (!newSecret.trim()) return;
-              setAdding(true);
-              setError(null);
-              try {
-                console.debug("Creating new secret");
-                // Create the secret document
-                const secretDoc: Secret = await pb
-                  .collection("documents")
-                  .create({
-                    campaign: session.campaign,
-                    data: {
-                      secret: {
-                        text: newSecret,
-                        discovered: false,
-                      },
-                    },
-                  });
-                setNewSecret("");
-                await onCreate(secretDoc);
-              } catch (e: any) {
-                setError(e?.message || "Failed to add secret.");
-              } finally {
-                setAdding(false);
-              }
-            }}
-          >
-            <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}
-            />
-            {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>
         )}
       />
     </div>