Makes session row and form components

src/routes/_authenticated/campaigns.$campaignId.tsx

@@ -1,6 +1,7 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { pb } from "@/lib/pocketbase";
 import type { Campaign } from "@/lib/types";
+import { SessionRow } from "@/components/documents/session/SessionRow";
 
 export const Route = createFileRoute("/_authenticated/campaigns/$campaignId")({
   loader: async ({ params }) => {
@@ -31,26 +32,24 @@ function RouteComponent() {
           ← Back to campaigns
         </Link>
       </div>
-      <h2 className="text-2xl font-bold mb-4 text-slate-100">{campaign.name}</h2>
+      <h2 className="text-2xl font-bold mb-4 text-slate-100">
+        {campaign.name}
+      </h2>
       <h3 className="text-lg font-semibold mb-2 text-slate-200">Sessions</h3>
       {sessions && sessions.length > 0 ? (
         <div>
           <ul className="space-y-2">
             {sessions.map((s: any) => (
               <li key={s.id}>
-                <Link
-                  to="/document/$documentId"
-                  params={{ documentId: s.id }}
-                  className="block px-4 py-2 rounded bg-slate-800 hover:bg-violet-700 text-slate-100 transition-colors"
-                >
-                  {s.data.session.strongStart || <span className="italic text-slate-400">(No strong start)</span>}
-                </Link>
+                <SessionRow session={s} />
               </li>
             ))}
           </ul>
         </div>
       ) : (
-        <div className="text-slate-400">No sessions found for this campaign.</div>
+        <div className="text-slate-400">
+          No sessions found for this campaign.
+        </div>
       )}
       {/* More campaign details can go here */}
     </div>

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,