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

src/components/documents/location/LocationEditForm.tsx

@@ -1,30 +1,34 @@
 import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
 import { pb } from "@/lib/pocketbase";
 import type { Location } from "@/lib/types";
-import { useDocument } from "@/context/document/DocumentContext";
+import { useDocumentCache } from "@/context/document/hooks";
 
 /**
  * Renders an editable location form
  */
 export const LocationEditForm = ({ location }: { location: Location }) => {
-  const { dispatch } = useDocument();
+  const { dispatch } = useDocumentCache();
   async function saveLocationName(name: string) {
-    const updated: Location = await pb.collection("documents").update(location.id, {
-      data: {
-        ...location.data,
-        name,
-      },
-    });
+    const updated: Location = await pb
+      .collection("documents")
+      .update(location.id, {
+        data: {
+          ...location.data,
+          name,
+        },
+      });
     dispatch({ type: "setDocument", doc: updated });
   }
 
   async function saveLocationDescription(description: string) {
-    const updated: Location = await pb.collection("documents").update(location.id, {
-      data: {
-        ...location.data,
-        description,
-      },
-    });
+    const updated: Location = await pb
+      .collection("documents")
+      .update(location.id, {
+        data: {
+          ...location.data,
+          description,
+        },
+      });
     dispatch({ type: "setDocument", doc: updated });
   }
 

src/components/documents/location/NewLocationForm.tsx

@@ -4,7 +4,7 @@ import { pb } from "@/lib/pocketbase";
 import { BaseForm } from "@/components/form/BaseForm";
 import { MultiLineInput } from "@/components/form/MultiLineInput";
 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 location. Calls onCreate with the new location document.
@@ -16,7 +16,7 @@ export const NewLocationForm = ({
   campaign: CampaignId;
   onCreate: (location: Location) => Promise<void>;
 }) => {
-  const { dispatch } = useDocument();
+  const { dispatch } = useDocumentCache();
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [adding, setAdding] = useState(false);
@@ -38,7 +38,7 @@ export const NewLocationForm = ({
       });
       setName("");
       setDescription("");
-      dispatch({ type: "setDocument", doc: locationDoc});
+      dispatch({ type: "setDocument", doc: locationDoc });
       await onCreate(locationDoc);
     } catch (e: any) {
       setError(e?.message || "Failed to add location.");