Restructures the campaign page

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="grow p-2 flex flex-col gap-2">
       <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="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`}

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,20 +81,34 @@ 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>
+      }
+      tabs={[
+        <Tab
+          label="sessions"
+          active
+          to="/campaigns/$campaignId"
+          params={{
+            campaignId: campaign.id,
+          }}
+        />,
+      ]}
+      content={
+        <div>
           <div className="flex justify-between">
-        <h3 className="text-lg font-semibold mb-2 text-slate-200">Sessions</h3>
+            <h3 className="text-lg font-semibold mb-2 text-slate-200">
+              Sessions
+            </h3>
             <div>
               <Button
                 onClick={() => createNewSession()}
@@ -119,5 +134,7 @@ function RouteComponent() {
             </div>
           )}
         </div>
+      }
+    />
   );
 }