Edit strong-starts

src/components/AutoSaveTextarea.tsx

@@ -0,0 +1,71 @@
+import { useState, useRef, useEffect } from "react";
+
+/**
+ * AutoSaveTextarea is a textarea that auto-saves its value after the user stops typing for a short delay.
+ * Shows a green flash and a "saved" message when the save is successful.
+ */
+export function AutoSaveTextarea({
+  value: initialValue,
+  onSave,
+  delay = 500,
+  className = "",
+  ...props
+}: {
+  value: string;
+  onSave: (value: string) => Promise<void>;
+  delay?: number;
+  className?: string;
+  [key: string]: any;
+}) {
+  const [value, setValue] = useState(initialValue || "");
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [flash, setFlash] = useState(false);
+  const timeoutRef = useRef<number | null>(null);
+  const saveTimeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    setValue(initialValue || "");
+  }, [initialValue]);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+      if (saveTimeoutRef.current) window.clearTimeout(saveTimeoutRef.current);
+    };
+  }, []);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    setSaved(false);
+    setFlash(false);
+    if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+    timeoutRef.current = window.setTimeout(async () => {
+      setSaving(true);
+      try {
+        await onSave(e.target.value);
+        setSaved(true);
+        setFlash(true);
+        saveTimeoutRef.current = window.setTimeout(() => setFlash(false), 600);
+      } finally {
+        setSaving(false);
+      }
+    }, delay);
+  };
+
+  return (
+    <div className="relative">
+      <textarea
+        value={value}
+        onChange={handleChange}
+        className={`w-full min-h-[4rem] p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${flash ? "ring-2 ring-emerald-400 border-emerald-400 bg-emerald-950" : ""} ${className}`}
+        {...props}
+      />
+      {saved && !saving && (
+        <span className="absolute bottom-1 right-2 text-emerald-400 text-xs bg-slate-900 bg-opacity-80 px-2 py-0.5 rounded shadow">
+          Saved
+        </span>
+      )}
+    </div>
+  );
+}

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