Makes session row and form components

src/components/documents/session/SessionForm.tsx

@@ -0,0 +1,22 @@
+import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
+import type { Session } from "@/lib/types";
+
+export const SessionForm = ({
+  session,
+  onSubmit,
+}: {
+  session: Session;
+  onSubmit: (data: Session["data"]) => Promise<void>;
+}) => {
+  return (
+    <form>
+      <h3 className="text-lg font-bold mb-4 text-slate-100">Strong Start</h3>
+      <AutoSaveTextarea
+        value={session.data.session.strongStart}
+        onSave={(value) => onSubmit({ session: { strongStart: value } })}
+        placeholder="Enter a strong start for this session..."
+        aria-label="Strong Start"
+      />
+    </form>
+  );
+};

src/components/documents/session/SessionRow.tsx

@@ -0,0 +1,17 @@
+import type { Session } from "@/lib/types";
+import { Link } from "@tanstack/react-router";
+
+export const SessionRow = ({ session }: { session: Session }) => {
+  return (
+    <div>
+      <Link
+        to="/document/$documentId"
+        params={{ documentId: session.id }}
+        className="block font-semibold text-lg text-slate-300"
+      >
+        {session.created}
+      </Link>
+      <div className="">{session.data.session.strongStart}</div>
+    </div>
+  );
+};

src/lib/types.ts

@@ -16,6 +16,9 @@ export type Document = RecordModel & {
   id: DocumentId;
   campaign: Campaign;
   data: {};
+  // These two are not in Pocketbase's types, but they seem to always be present
+  created: string;
+  updated: string;
 };
 
 export type DocumentData<K extends string, V> = {

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
+                <SessionRow session={s} />
-                  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>
               </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 { document: session }: { document: Session } = Route.useLoaderData();
-  const doc = session as import("@/lib/types").Document;
-  const strongStart = (doc.data as any)?.session?.strongStart || "";
   const [newSecret, setNewSecret] = useState("");
   const [adding, setAdding] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  async function handleSaveStrongStart(newValue: string) {
+  async function handleSaveSession(data: Session["data"]) {
-    await pb.collection("documents").update(doc.id, {
+    await pb.collection("documents").update(session.id, {
-      data: {
+      data,
-        ...doc.data,
-        session: {
-          ...(doc.data as any).session,
-          strongStart: newValue,
-        },
-      },
     });
   }
 
   return (
     <div className="max-w-xl mx-auto py-8">
-      <h2 className="text-2xl font-bold mb-4 text-slate-100">
+      <SessionForm session={session as Session} onSubmit={handleSaveSession} />
-        Session Strong Start
-      </h2>
-      <AutoSaveTextarea
-        value={strongStart}
-        onSave={handleSaveStrongStart}
-        placeholder="Enter a strong start for this session..."
-        aria-label="Strong Start"
-      />
       <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,