Makes campaigns load all types of docs and then link to the docs

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

@@ -1,23 +1,20 @@
+import { CampaignDocuments } from "@/components/campaign/CampaignDocuments";
 import { DocumentPreview } from "@/components/documents/DocumentPreview";
-import { DocumentRow } from "@/components/documents/DocumentRow";
-import { SessionRow } from "@/components/documents/session/SessionRow";
 import { Tab, TabbedLayout } from "@/components/layout/TabbedLayout";
 import { Loader } from "@/components/Loader";
 import { DocumentLoader } from "@/context/document/DocumentLoader";
 import { useDocument } from "@/context/document/hooks";
 import { pb } from "@/lib/pocketbase";
 import type { Campaign, DocumentId, Relationship, Session } from "@/lib/types";
-import { Button } from "@headlessui/react";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { useCallback, useEffect, useState } from "react";
 import { z } from "zod";
 
 const CampaignTabs = {
-  sessions: "Sessions",
-  npcs: "NPCs",
-  locations: "Locations",
-  factions: "Factions",
-  threads: "Threads",
+  sessions: { label: "Sessions", docType: "session" },
+  secrets: { label: "Secrets", docType: "secret" },
+  npcs: { label: "NPCs", docType: "npc" },
+  locations: { label: "Locations", docType: "location" },
 } as const;
 
 const campaignSearchSchema = z.object({
@@ -50,11 +47,11 @@ function RouteComponent() {
         .collection("campaigns")
         .getOne(params.campaignId);
       // Fetch all documents for this campaign
-      const sessions = await pb.collection("documents").getFullList({
-        filter: `campaign = "${params.campaignId}" && type = 'session'`,
-        sort: "-created",
-      });
-      setSessions(sessions as Session[]);
+      // const sessions = await pb.collection("documents").getFullList({
+      //   filter: `campaign = "${params.campaignId}" && type = 'session'`,
+      //   sort: "-created",
+      // });
+      // setSessions(sessions as Session[]);
       setCampaign(campaign as Campaign);
       setLoading(false);
     }
@@ -115,8 +112,9 @@ function RouteComponent() {
           ← Back to campaigns
         </Link>
       }
-      tabs={Object.entries(CampaignTabs).map(([key, label]) => (
+      tabs={Object.entries(CampaignTabs).map(([key, { label }]) => (
         <Tab
+          key={key}
           label={label}
           active={tab === key}
           to={Route.to}
@@ -129,36 +127,10 @@ function RouteComponent() {
         />
       ))}
       content={
-        <div>
-          <div className="flex justify-between">
-            <h3 className="text-lg font-semibold mb-2 text-slate-200">
-              Sessions
-            </h3>
-            <div>
-              <Button
-                onClick={() => createNewSession()}
-                className="inline-flex items-center justify-center rounded bg-violet-600 hover:bg-violet-700 text-white px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-400"
-              >
-                New Session
-              </Button>
-            </div>
-          </div>
-          {sessions && sessions.length > 0 ? (
-            <div>
-              <ul className="space-y-2">
-                {sessions.map((s: any) => (
-                  <li key={s.id}>
-                    <SessionRow session={s} />
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ) : (
-            <div className="text-slate-400">
-              No sessions found for this campaign.
-            </div>
-          )}
-        </div>
+        <CampaignDocuments
+          campaignId={campaign.id}
+          docType={CampaignTabs[tab].docType}
+        />
       }
       flyout={docId && <Flyout key={docId} docId={docId} />}
     />