Makes session row and form components

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

@@ -1,9 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { pb } from "@/lib/pocketbase";
-import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
 import { useState } from "react";
-import { RelationshipType, type Secret } from "@/lib/types";
+import { RelationshipType, type Secret, type Session } from "@/lib/types";
 import { RelationshipList } from "@/components/RelationshipList";
+import { SessionForm } from "@/components/documents/session/SessionForm";
 
 export const Route = createFileRoute("/_authenticated/document/$documentId")({
   loader: async ({ params }) => {
@@ -14,38 +14,22 @@ export const Route = createFileRoute("/_authenticated/document/$documentId")({
 });
 
 function RouteComponent() {
-  const { document: session } = Route.useLoaderData();
-  const doc = session as import("@/lib/types").Document;
-  const strongStart = (doc.data as any)?.session?.strongStart || "";
+  const { document: session }: { document: Session } = Route.useLoaderData();
   const [newSecret, setNewSecret] = useState("");
   const [adding, setAdding] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  async function handleSaveStrongStart(newValue: string) {
-    await pb.collection("documents").update(doc.id, {
-      data: {
-        ...doc.data,
-        session: {
-          ...(doc.data as any).session,
-          strongStart: newValue,
-        },
-      },
+  async function handleSaveSession(data: Session["data"]) {
+    await pb.collection("documents").update(session.id, {
+      data,
     });
   }
 
   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>
-      <AutoSaveTextarea
-        value={strongStart}
-        onSave={handleSaveStrongStart}
-        placeholder="Enter a strong start for this session..."
-        aria-label="Strong Start"
-      />
+      <SessionForm session={session as Session} onSubmit={handleSaveSession} />
       <RelationshipList
-        root={doc}
+        root={session}
         relationshipType={RelationshipType.Secrets}
         renderRow={(secret) => (
           <div className="flex items-center gap-3">
@@ -75,7 +59,7 @@ function RouteComponent() {
                 if (checked) {
                   await pb.collection("relationships").create({
                     primary: secret.id,
-                    secondary: [doc.id],
+                    secondary: [session.id],
                     type: "discoveredIn",
                   });
                 }
@@ -104,7 +88,7 @@ function RouteComponent() {
                 const secretDoc: Secret = await pb
                   .collection("documents")
                   .create({
-                    campaign: doc.campaign,
+                    campaign: session.campaign,
                     data: {
                       secret: {
                         text: newSecret,