Moves editing into forms. Every doc has a page now. BUG: state not refreshed after mutation

src/components/documents/secret/SecretEditForm.tsx

@@ -0,0 +1,90 @@
+// 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";
+import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
+
+/**
+ * Renders an editable secret form.
+ * Handles updating the discovered state and discoveredIn relationship.
+ */
+export const SecretEditForm = ({
+  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,
+          },
+        },
+      });
+      if (session || !newChecked) {
+        // If the session exists or the element is being unchecked, 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 (session) {
+        if (newChecked) {
+          await pb.collection("relationships").create({
+            primary: secret.id,
+            secondary: [session.id],
+            type: "discoveredIn",
+          });
+        }
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function saveText(text: string) {
+    await pb.collection("documents").update(secret.id, {
+      data: {
+        ...secret.data,
+        secret: {
+          ...secret.data.secret,
+          text,
+        },
+      },
+    });
+  }
+
+  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}
+      />
+      <AutoSaveTextarea
+        multiline={false}
+        value={secret.data.secret.text}
+        onSave={saveText}
+      />
+    </div>
+  );
+};

src/components/documents/secret/SecretToggleRow.tsx

@@ -8,7 +8,7 @@ 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 = ({
+export const SecretToggleRow = ({
   secret,
   session,
 }: {