From 6d5d0e03a023734f1b18ad92c244325d0ffcdfee Mon Sep 17 00:00:00 2001
From: Drew Haven <periodic@blazestar.net>
Date: Wed, 23 Jul 2025 15:46:22 -0700
Subject: [PATCH] Restructures the campaign page

---
 src/components/layout/TabbedLayout.tsx        | 10 +--
 .../_authenticated/campaigns.$campaignId.tsx  | 79 +++++++++++--------
 2 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/src/components/layout/TabbedLayout.tsx b/src/components/layout/TabbedLayout.tsx
index 54e0381..3870ed3 100644
--- a/src/components/layout/TabbedLayout.tsx
+++ b/src/components/layout/TabbedLayout.tsx
@@ -15,12 +15,10 @@ export function TabbedLayout({
   flyout,
 }: Props) {
   return (
-    <div className="grow p-2 flex flex-col">
-      <div>
-        <div className="flex flex-row gap-2">{navigation}</div>
-        <div>{title}</div>
-      </div>
-      <div className="flex flex-row justify-start m-2 grow">
+    <div className="grow p-2 flex flex-col gap-2">
+      <div className="flex flex-row gap-2">{navigation}</div>
+      <div>{title}</div>
+      <div className="flex flex-row justify-start 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`}
diff --git a/src/routes/_app/_authenticated/campaigns.$campaignId.tsx b/src/routes/_app/_authenticated/campaigns.$campaignId.tsx
index 1704303..21f9312 100644
--- a/src/routes/_app/_authenticated/campaigns.$campaignId.tsx
+++ b/src/routes/_app/_authenticated/campaigns.$campaignId.tsx
@@ -5,6 +5,7 @@ import { SessionRow } from "@/components/documents/session/SessionRow";
 import { Button } from "@headlessui/react";
 import { Loader } from "@/components/Loader";
 import type { Campaign, Relationship, Session } from "@/lib/types";
+import { Tab, TabbedLayout } from "@/components/layout/TabbedLayout";
 
 export const Route = createFileRoute(
   "/_app/_authenticated/campaigns/$campaignId",
@@ -80,44 +81,60 @@ function RouteComponent() {
   }
 
   return (
-    <div className="max-w-xl mx-auto py-8">
-      <div className="mb-2">
+    <TabbedLayout
+      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">
-        {campaign.name}
-      </h2>
-      <div className="flex justify-between">
-        <h3 className="text-lg font-semibold mb-2 text-slate-200">Sessions</h3>
+      }
+      tabs={[
+        <Tab
+          label="sessions"
+          active
+          to="/campaigns/$campaignId"
+          params={{
+            campaignId: campaign.id,
+          }}
+        />,
+      ]}
+      content={
         <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 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>
-      </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>
+      }
+    />
   );
 }