Moves secrets into it's own files.

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>
+  );
+};