Makes a generic document row

src/components/RelationshipList.tsx

@@ -3,11 +3,11 @@ import { pb } from "@/lib/pocketbase";
 import type { Document } from "@/lib/types";
 import { DocumentList } from "@/components/DocumentList";
 import { Loader } from "./Loader";
+import { DocumentRow } from "./documents/DocumentRow";
 
 interface RelationshipListProps<T extends Document> {
   root: Document;
   relationshipType: string;
-  renderRow: (item: T) => React.ReactNode;
   newItemForm: (onCreate: (doc: T) => Promise<void>) => React.ReactNode;
 }
 
@@ -18,7 +18,6 @@ interface RelationshipListProps<T extends Document> {
 export function RelationshipList<T extends Document>({
   root,
   relationshipType,
-  renderRow,
   newItemForm,
 }: RelationshipListProps<T>) {
   const [items, setItems] = useState<T[]>([]);
@@ -104,7 +103,7 @@ export function RelationshipList<T extends Document>({
       }
       items={items}
       error={error}
-      renderRow={renderRow}
+      renderRow={(document) => <DocumentRow document={document} />}
       newItemForm={(onSubmit) =>
         newItemForm(async (doc: T) => {
           await handleCreate(doc);

src/components/documents/DocumentRow.tsx

@@ -0,0 +1,35 @@
+// DocumentRow.tsx
+// Generic row component for displaying any document type.
+import { SessionRow } from "@/components/documents/session/SessionRow";
+import { SecretRow } from "@/components/documents/secret/SecretRow";
+import { isSecret, isSession, type Document, type Session } from "@/lib/types";
+
+/**
+ * Renders a row for any document type. Prioritizes Session, then Secret, then falls back to ID and creation time.
+ * If rendering a SecretRow, uses the provided session prop if available.
+ */
+export const DocumentRow = ({
+  document,
+  session,
+}: {
+  document: Document;
+  session?: Session;
+}) => {
+  if (isSession(document)) {
+    // Use SessionRow for session documents
+    return <SessionRow session={document} />;
+  }
+  if (isSecret(document)) {
+    return <SecretRow secret={document} session={session} />;
+  }
+  // Fallback: show ID and creation time
+  return (
+    <div>
+      <div className="font-semibold text-lg text-slate-300">
+        Unrecognized Document
+      </div>
+      <div className="text-slate-400 text-sm">ID: {document.id}</div>
+      <div className="text-slate-400 text-sm">Created: {document.created}</div>
+    </div>
+  );
+};

src/components/documents/secret/SecretForm.tsx

@@ -1,13 +1,19 @@
 // SecretForm.tsx
 // Form for adding a new secret to a session.
 import { useState } from "react";
-import type { Session, Secret } from "@/lib/types";
+import type { Secret } from "@/lib/types";
 import { pb } from "@/lib/pocketbase";
 
 /**
  * Renders a form to add a new secret. Calls onCreate with the new secret document.
  */
-export const SecretForm = ({ session, onCreate }: { session: Session; onCreate: (secret: Secret) => Promise<void>; }) => {
+export const SecretForm = ({
+  campaign,
+  onCreate,
+}: {
+  campaign: string;
+  onCreate: (secret: Secret) => Promise<void>;
+}) => {
   const [newSecret, setNewSecret] = useState("");
   const [adding, setAdding] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -19,7 +25,7 @@ export const SecretForm = ({ session, onCreate }: { session: Session; onCreate:
     setError(null);
     try {
       const secretDoc: Secret = await pb.collection("documents").create({
-        campaign: session.campaign,
+        campaign,
         data: {
           secret: {
             text: newSecret,

src/components/documents/secret/SecretRow.tsx

@@ -8,8 +8,16 @@ import { useState } from "react";
  * Renders a secret row with a discovered checkbox and secret text.
  * Handles updating the discovered state and discoveredIn relationship.
  */
-export const SecretRow = ({ secret, session }: { secret: Secret; session: Session }) => {
-  const [checked, setChecked] = useState(!!(secret.data as any)?.secret?.discovered);
+export const SecretRow = ({
+  secret,
+  session,
+}: {
+  secret: Secret;
+  session?: Session;
+}) => {
+  const [checked, setChecked] = useState(
+    !!(secret.data as any)?.secret?.discovered,
+  );
   const [loading, setLoading] = useState(false);
 
   async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
@@ -26,13 +34,17 @@ export const SecretRow = ({ secret, session }: { secret: Secret; session: Sessio
           },
         },
       });
-      // Remove any existing discoveredIn relationship
+      if (session || !newChecked) {
+        // If the session exists or the element is being unchecked, remove any
+        // existing discoveredIn relationship
         const rels = await pb.collection("relationships").getList(1, 1, {
           filter: `primary = "${secret.id}" && type = "discoveredIn"`,
         });
         if (rels.items.length > 0) {
           await pb.collection("relationships").delete(rels.items[0].id);
         }
+      }
+      if (session) {
         if (newChecked) {
           await pb.collection("relationships").create({
             primary: secret.id,
@@ -40,6 +52,7 @@ export const SecretRow = ({ secret, session }: { secret: Secret; session: Sessio
             type: "discoveredIn",
           });
         }
+      }
     } finally {
       setLoading(false);
     }

src/lib/types.ts

@@ -33,6 +33,10 @@ export type Session = Document &
     }
   >;
 
+export function isSession(doc: Document): doc is Session {
+  return Object.hasOwn(doc.data, "session");
+}
+
 export type ISO8601Date = string & { __type: "iso8601date" };
 
 export type Secret = Document &
@@ -44,6 +48,10 @@ export type Secret = Document &
     }
   >;
 
+export function isSecret(doc: Document): doc is Secret {
+  return Object.hasOwn(doc.data, "secret");
+}
+
 export const RelationshipType = {
   Secrets: "secrets",
   DiscoveredIn: "discoveredIn",

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

@@ -3,7 +3,6 @@ import { pb } from "@/lib/pocketbase";
 import { RelationshipType, type Session } from "@/lib/types";
 import { RelationshipList } from "@/components/RelationshipList";
 import { SessionForm } from "@/components/documents/session/SessionForm";
-import { SecretRow } from "@/components/documents/secret/SecretRow";
 import { SecretForm } from "@/components/documents/secret/SecretForm";
 
 export const Route = createFileRoute("/_authenticated/document/$documentId")({
@@ -29,12 +28,8 @@ function RouteComponent() {
       <RelationshipList
         root={session}
         relationshipType={RelationshipType.Secrets}
-        renderRow={(secret) => {
-          if (!(secret.data as any)?.secret) return null;
-          return <SecretRow secret={secret as any} session={session} />;
-        }}
         newItemForm={(onCreate) => (
-          <SecretForm session={session} onCreate={onCreate} />
+          <SecretForm campaign={session.campaign.id} onCreate={onCreate} />
         )}
       />
     </div>