Converts secrets list to something more generic

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

@@ -2,14 +2,15 @@ import { createFileRoute } from "@tanstack/react-router";
 import { pb } from "@/lib/pocketbase";
 import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
 import { useState } from "react";
-import type { Secret } from "@/lib/types";
+import { RelationshipType, type Secret } from "@/lib/types";
+import { DocumentList } from "@/components/DocumentList";
 
 export const Route = createFileRoute("/_authenticated/document/$documentId")({
   loader: async ({ params }) => {
     const doc = await pb.collection("documents").getOne(params.documentId);
     // Fetch the unique relationship where this document is the primary and type is "plannedSecrets"
     const relationships = await pb.collection("relationships").getList(1, 1, {
-      filter: `primary = "${params.documentId}" && type = "plannedSecrets"`,
+      filter: `primary = "${params.documentId}" && type = "${RelationshipType.Secrets}"`,
     });
     // Get all related secret document IDs from the secondary field
     const secretIds =
@@ -31,7 +32,7 @@ function RouteComponent() {
   const strongStart = session?.data?.session?.strongStart || "";
   const [newSecret, setNewSecret] = useState("");
   const [adding, setAdding] = useState(false);
-  const [secretList, setSecretList] = useState(secrets);
+  const [secretList, setSecretList] = useState<Secret[]>(secrets);
   const [error, setError] = useState<string | null>(null);
 
   async function handleSaveStrongStart(newValue: string) {
@@ -63,7 +64,7 @@ function RouteComponent() {
       });
       // 2. Check for existing relationship
       const existing = await pb.collection("relationships").getFullList({
-        filter: `primary = "${session.id}" && type = "plannedSecrets"`,
+        filter: `primary = "${session.id}" && type = "${RelationshipType.Secrets}"`,
       });
       if (existing.length > 0) {
         // Update existing relationship to add new secret to secondary array
@@ -75,7 +76,7 @@ function RouteComponent() {
         await pb.collection("relationships").create({
           primary: session.id,
           secondary: [secretDoc.id],
-          type: "plannedSecrets",
+          type: RelationshipType.Secrets,
         });
       }
       setSecretList([...secretList, secretDoc]);
@@ -132,12 +133,40 @@ function RouteComponent() {
         placeholder="Enter a strong start for this session..."
         aria-label="Strong Start"
       />
-      <h3 className="text-lg font-semibold mt-8 mb-2 text-slate-200">
-        Planned Secrets
-      </h3>
-      {secretList && secretList.length > 0 ? (
-        <ul className="space-y-2">
-          {secretList.map((secret: any) => (
+      {secretList && (
+        <DocumentList
+          title="Secrets and Clues"
+          items={secretList}
+          newItemForm={(onSubmit) => (
+            <form
+              className="flex items-center gap-2 mt-4"
+              onSubmit={(e) => {
+                e.preventDefault();
+                handleAddSecret();
+                onSubmit();
+              }}
+            >
+              <input
+                type="text"
+                className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
+                placeholder="Add a new secret..."
+                value={newSecret}
+                onChange={(e) => setNewSecret(e.target.value)}
+                disabled={adding}
+              />
+              {error && (
+                <div className="text-red-400 mt-2 text-sm">{error}</div>
+              )}
+              <button
+                type="submit"
+                className="px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
+                disabled={adding || !newSecret.trim()}
+              >
+                {adding ? "Adding..." : "Add Secret"}
+              </button>
+            </form>
+          )}
+          renderRow={(secret) => (
             <li
               key={secret.id}
               className="bg-slate-800 rounded p-4 text-slate-100 flex items-center gap-3"
@@ -159,37 +188,9 @@ function RouteComponent() {
                 )}
               </span>
             </li>
-          ))}
-        </ul>
-      ) : (
-        <div className="text-slate-400">
-          No planned secrets for this session.
-        </div>
-      )}
-      <form
-        className="flex items-center gap-2 mt-4"
-        onSubmit={(e) => {
-          e.preventDefault();
-          handleAddSecret();
-        }}
-      >
-        <input
-          type="text"
-          className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
-          placeholder="Add a new secret..."
-          value={newSecret}
-          onChange={(e) => setNewSecret(e.target.value)}
-          disabled={adding}
+          )}
         />
-        <button
-          type="submit"
-          className="px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
-          disabled={adding || !newSecret.trim()}
-        >
-          {adding ? "Adding..." : "Add Secret"}
-        </button>
-      </form>
-      {error && <div className="text-red-400 mt-2 text-sm">{error}</div>}
+      )}
     </div>
   );
 }