Adds tabs to the campaign page, but they don't do much yet

src/components/layout/TabbedLayout.tsx

@@ -15,12 +15,10 @@ export function TabbedLayout({
   flyout,
 }: Props) {
   return (
-    <div className="grow p-2 flex flex-col">
+    <div className="grow p-2 flex flex-col gap-2">
-      <div>
+      <div className="flex flex-row gap-2">{navigation}</div>
-        <div className="flex flex-row gap-2">{navigation}</div>
+      <div>{title}</div>
-        <div>{title}</div>
+      <div className="flex flex-row justify-start grow">
-      </div>
-      <div className="flex flex-row justify-start m-2 grow">
         <div className="shrink-0 grow-0 w-40 p-0">{tabs}</div>
         <div
           className={`grow p-2 bg-slate-800 border-t border-b border-r border-slate-700`}
@@ -41,6 +39,7 @@ export type TabProps = {
   label: string;
   to: string;
   params: Record<string, any>;
+  search: Record<string, any>;
   active?: boolean;
 };
 
@@ -48,12 +47,13 @@ const activeTabClass =
   "text-slate-100 font-bold bg-slate-800 border-t border-b border-l";
 const inactiveTabClass = "text-slate-300 bg-slate-900 border";
 
-export function Tab({ label, to, params, active }: TabProps) {
+export function Tab({ label, to, params, active, search }: TabProps) {
   return (
     <Link
       key={label}
       to={to}
       params={params}
+      search={search}
       className={`block p-2 border-slate-700 whitespace-nowrap ${active ? activeTabClass : inactiveTabClass}`}
     >
       {label}

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

@@ -1,20 +1,41 @@
-import { useCallback, useEffect, useState } from "react";
+import { DocumentRow } from "@/components/documents/DocumentRow";
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { pb } from "@/lib/pocketbase";
 import { SessionRow } from "@/components/documents/session/SessionRow";
-import { Button } from "@headlessui/react";
+import { Tab, TabbedLayout } from "@/components/layout/TabbedLayout";
 import { Loader } from "@/components/Loader";
-import type { Campaign, Relationship, Session } from "@/lib/types";
+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",
+} as const;
+
+const campaignSearchSchema = z.object({
+  tab: z
+    .enum(Object.keys(CampaignTabs) as (keyof typeof CampaignTabs)[])
+    .default("sessions"),
+  docId: z.optional(z.string().transform((s) => s as DocumentId)),
+});
 
 export const Route = createFileRoute(
   "/_app/_authenticated/campaigns/$campaignId",
 )({
   component: RouteComponent,
   pendingComponent: Loader,
+  validateSearch: (s) => campaignSearchSchema.parse(s),
 });
 
 function RouteComponent() {
   const params = Route.useParams();
+  const { tab, docId } = Route.useSearch();
 
   const [loading, setLoading] = useState(true);
   const [campaign, setCampaign] = useState<Campaign | null>(null);
@@ -80,44 +101,76 @@ function RouteComponent() {
   }
 
   return (
-    <div className="max-w-xl mx-auto py-8">
+    <TabbedLayout
-      <div className="mb-2">
+      title={
+        <h2 className="text-2xl font-bold text-slate-100">{campaign.name}</h2>
+      }
+      navigation={
         <Link
           to="/campaigns"
           className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors"
         >
           ← Back to campaigns
         </Link>
-      </div>
+      }
-      <h2 className="text-2xl font-bold mb-4 text-slate-100">
+      tabs={Object.entries(CampaignTabs).map(([key, label]) => (
-        {campaign.name}
+        <Tab
-      </h2>
+          label={label}
-      <div className="flex justify-between">
+          active={tab === key}
-        <h3 className="text-lg font-semibold mb-2 text-slate-200">Sessions</h3>
+          to={Route.to}
+          params={{
+            campaignId: campaign.id,
+          }}
+          search={{
+            tab: key,
+          }}
+        />
+      ))}
+      content={
         <div>
-          <Button
+          <div className="flex justify-between">
-            onClick={() => createNewSession()}
+            <h3 className="text-lg font-semibold mb-2 text-slate-200">
-            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"
+              Sessions
-          >
+            </h3>
-            New Session
+            <div>
-          </Button>
+              <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>
-      </div>
+      }
-      {sessions && sessions.length > 0 ? (
+      flyout={docId && <Flyout key={docId} docId={docId} />}
-        <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>
   );
 }
+function Flyout({ docId }: { docId: DocumentId }) {
+  const { docResult } = useDocument(docId);
+
+  if (docResult?.type !== "ready") {
+    return <Loader />;
+  }
+
+  const doc = docResult.value.doc;
+
+  // TODO: Document preview
+  return <DocumentRow document={doc} root={doc} />;
+}