I think I have a working document cache solution that's actually pretty good.

src/components/documents/secret/NewSecretForm.tsx

@@ -5,7 +5,7 @@ import type { CampaignId, Secret } from "@/lib/types";
 import { pb } from "@/lib/pocketbase";
 import { BaseForm } from "@/components/form/BaseForm";
 import { SingleLineInput } from "@/components/form/SingleLineInput";
-import { useDocument } from "@/context/document/DocumentContext";
+import { useDocumentCache } from "@/context/document/hooks";
 
 /**
  * Renders a form to add a new secret. Calls onCreate with the new secret document.
@@ -17,7 +17,7 @@ export const NewSecretForm = ({
   campaign: CampaignId;
   onCreate: (secret: Secret) => Promise<void>;
 }) => {
-  const { dispatch } = useDocument();
+  const { dispatch } = useDocumentCache();
   const [newSecret, setNewSecret] = useState("");
   const [adding, setAdding] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -37,7 +37,7 @@ export const NewSecretForm = ({
         },
       });
       setNewSecret("");
-      dispatch({ type: "setDocument", doc: secretDoc as Secret});
+      dispatch({ type: "setDocument", doc: secretDoc as Secret });
       await onCreate(secretDoc);
     } catch (e: any) {
       setError(e?.message || "Failed to add secret.");

src/components/documents/secret/SecretEditForm.tsx

@@ -1,6 +1,6 @@
 // Displays a single secret with discovered checkbox and text.
 import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
-import { useDocument } from "@/context/document/DocumentContext";
+import { useDocumentCache } from "@/context/document/hooks";
 import { pb } from "@/lib/pocketbase";
 import type { Secret } from "@/lib/types";
 import { useState } from "react";
@@ -10,7 +10,7 @@ import { useState } from "react";
  * Handles updating the discovered state and discoveredIn relationship.
  */
 export const SecretEditForm = ({ secret }: { secret: Secret }) => {
-  const { dispatch } = useDocument();
+  const { dispatch } = useDocumentCache();
   const [checked, setChecked] = useState(
     !!(secret.data as any)?.secret?.discovered,
   );

src/components/documents/secret/SecretToggleRow.tsx

@@ -1,7 +1,7 @@
 // SecretRow.tsx
 // Displays a single secret with discovered checkbox and text.
-import type { Secret, Session } from "@/lib/types";
 import { pb } from "@/lib/pocketbase";
+import type { Secret, Session } from "@/lib/types";
 import { useState } from "react";
 
 /**
@@ -21,6 +21,8 @@ export const SecretToggleRow = ({
   const [loading, setLoading] = useState(false);
 
   async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    e.stopPropagation();
+    e.preventDefault();
     const newChecked = e.target.checked;
     setLoading(true);
     setChecked(newChecked);
@@ -59,7 +61,7 @@ export const SecretToggleRow = ({
   }
 
   return (
-    <div className="flex items-center gap-3">
+    <div className="flex items-center justify-stretch gap-3 w-full">
       <input
         type="checkbox"
         checked={checked}
@@ -68,7 +70,7 @@ export const SecretToggleRow = ({
         aria-label="Discovered"
         disabled={loading}
       />
-      <span>{secret.data.text}</span>
+      {secret.data.text}
     </div>
   );
 };