Edit strong-starts

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

@@ -1,5 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { pb } from "@/lib/pocketbase";
+import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
 
 export const Route = createFileRoute(
   '/_authenticated/document/$documentId',
@@ -13,17 +14,30 @@ export const Route = createFileRoute(
 
 function RouteComponent() {
   const { document } = Route.useLoaderData();
-  const strongStart = document?.data?.session?.strongStart;
+  const strongStart = document?.data?.session?.strongStart || "";
+
+  async function handleSaveStrongStart(newValue: string) {
+    // Update the document in Pocketbase
+    await pb.collection("documents").update(document.id, {
+      data: {
+        ...document.data,
+        session: {
+          ...document.data.session,
+          strongStart: newValue,
+        },
+      },
+    });
+  }
+
   return (
     <div className="max-w-xl mx-auto py-8">
       <h2 className="text-2xl font-bold mb-4 text-slate-100">Session Strong Start</h2>
-      {strongStart ? (
-        <div className="text-lg text-slate-200 bg-slate-800 rounded p-4">
-          {strongStart}
-        </div>
-      ) : (
-        <div className="text-slate-400">No strong start found for this session.</div>
-      )}
+      <AutoSaveTextarea
+        value={strongStart}
+        onSave={handleSaveStrongStart}
+        placeholder="Enter a strong start for this session..."
+        aria-label="Strong Start"
+      />
     </div>
   );
 }