feat(campaigns): extract CampaignsList with hide-completed toggle

The campaigns page now renders a client-side CampaignsList that keeps the
official/community sections and adds a hide-completed switch.

src/app/(frontend)/intelligence/campaigns/page.tsx

@@ -2,7 +2,7 @@ import config from "@payload-config";
 import { getPayload } from "payload";
 import { headers as nextHeaders } from "next/headers";
 import { ShieldIcon } from "lucide-react";
-import { CampaignCard } from "@/components/frontend/intelligence/CampaignCard";
+import { CampaignsList } from "@/components/frontend/intelligence/CampaignsList";
 import { CreateCampaignDialog } from "@/components/frontend/intelligence/CreateCampaignDialog";
 import type { Media } from "@/payload-types";
 import { Button } from "@/components/ui/button";
@@ -100,13 +100,6 @@ export default async function CampaignsPage() {
     }),
   );
 
-  const officialCampaigns = campaignsWithStats.filter(
-    (campaign) => campaign.campaignMode === "official",
-  );
-  const communityCampaigns = campaignsWithStats.filter(
-    (campaign) => campaign.campaignMode !== "official",
-  );
-
   return (
     <div className="p-5 flex flex-col gap-8">
       <div className="flex flex-row justify-between gap-2">
@@ -125,51 +118,7 @@ export default async function CampaignsPage() {
           <CreateCampaignDialog />
         </div>
       </div>
-      {campaignsWithStats.length > 0 ? (
+      <CampaignsList campaigns={campaignsWithStats} />
-        <>
-          {officialCampaigns.length > 0 && (
-            <section className="flex flex-col items-center gap-4">
-              <div className="flex flex-col items-center gap-1 text-center">
-                <h2 className="text-xl font-semibold uppercase tracking-wider text-white">
-                  Official Campaigns
-                </h2>
-                <p className="text-sm text-muted-foreground">
-                  Command-sanctioned operations at the heart of the unit&apos;s story.
-                </p>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 w-full max-w-6xl mx-auto">
-                {officialCampaigns.map((campaign) => (
-                  <CampaignCard key={campaign.id} campaign={campaign} size="lg" />
-                ))}
-              </div>
-            </section>
-          )}
-          {officialCampaigns.length > 0 && communityCampaigns.length > 0 && (
-            <hr className="w-48 mx-auto border-border/60" />
-          )}
-          {communityCampaigns.length > 0 && (
-            <section className="flex flex-col items-center gap-4">
-              <div className="flex flex-col items-center gap-1 text-center">
-                <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
-                  Community Campaigns
-                </h2>
-                <p className="text-xs text-muted-foreground">
-                  Player-made side operations and stories, open to everyone.
-                </p>
-              </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 w-full max-w-6xl mx-auto">
-                {communityCampaigns.map((campaign) => (
-                  <CampaignCard key={campaign.id} campaign={campaign} size="sm" />
-                ))}
-              </div>
-            </section>
-          )}
-        </>
-      ) : (
-        <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-          <p className="text-sm">No campaigns found.</p>
-        </div>
-      )}
     </div>
   );
 }

src/components/frontend/intelligence/CampaignsList.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useState } from "react";
+import { CampaignCard } from "@/components/frontend/intelligence/CampaignCard";
+import { Switch } from "@/components/ui/switch";
+
+export interface CampaignListEntry {
+  readonly id: number;
+  readonly name: string;
+  readonly summary: string;
+  readonly status: "concept" | "inProgress" | "completed";
+  readonly campaignMode: "official" | "custom";
+  readonly startDate?: string | null;
+  readonly endDate?: string | null;
+  readonly coverImageUrl: string | null;
+  readonly missionCount: number;
+  readonly completedMissions: number;
+  readonly avgPlayers: number;
+  readonly avgDurationMinutes: number;
+  readonly ownerName: string;
+}
+
+interface CampaignsListProps {
+  readonly campaigns: CampaignListEntry[];
+}
+
+export function CampaignsList({ campaigns }: CampaignsListProps) {
+  const [hideCompleted, setHideCompleted] = useState(false);
+
+  const visible = hideCompleted
+    ? campaigns.filter((campaign) => campaign.status !== "completed")
+    : campaigns;
+  const officialCampaigns = visible.filter(
+    (campaign) => campaign.campaignMode === "official",
+  );
+  const communityCampaigns = visible.filter(
+    (campaign) => campaign.campaignMode !== "official",
+  );
+
+  return (
+    <>
+      <div className="flex items-center justify-end gap-2">
+        <Switch
+          id="hide-completed-campaigns"
+          checked={hideCompleted}
+          onCheckedChange={setHideCompleted}
+          aria-label="Hide completed campaigns"
+        />
+        <label
+          htmlFor="hide-completed-campaigns"
+          className="cursor-pointer select-none text-sm text-muted-foreground"
+        >
+          Hide completed
+        </label>
+      </div>
+      {visible.length > 0 ? (
+        <>
+          {officialCampaigns.length > 0 && (
+            <section className="flex flex-col items-center gap-4">
+              <div className="flex flex-col items-center gap-1 text-center">
+                <h2 className="text-xl font-semibold uppercase tracking-wider text-white">
+                  Official Campaigns
+                </h2>
+                <p className="text-sm text-muted-foreground">
+                  Command-sanctioned operations at the heart of the unit&apos;s story.
+                </p>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 w-full max-w-6xl mx-auto">
+                {officialCampaigns.map((campaign) => (
+                  <CampaignCard key={campaign.id} campaign={campaign} size="lg" />
+                ))}
+              </div>
+            </section>
+          )}
+          {officialCampaigns.length > 0 && communityCampaigns.length > 0 && (
+            <hr className="w-48 mx-auto border-border/60" />
+          )}
+          {communityCampaigns.length > 0 && (
+            <section className="flex flex-col items-center gap-4">
+              <div className="flex flex-col items-center gap-1 text-center">
+                <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+                  Community Campaigns
+                </h2>
+                <p className="text-xs text-muted-foreground">
+                  Player-made side operations and stories, open to everyone.
+                </p>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 w-full max-w-6xl mx-auto">
+                {communityCampaigns.map((campaign) => (
+                  <CampaignCard key={campaign.id} campaign={campaign} size="sm" />
+                ))}
+              </div>
+            </section>
+          )}
+        </>
+      ) : campaigns.length > 0 ? (
+        <div className="flex flex-col items-center justify-center gap-2 py-12 text-muted-foreground">
+          <p className="text-sm">No campaigns match the current filter.</p>
+          <button
+            onClick={() => setHideCompleted(false)}
+            className="text-sm text-primary hover:underline"
+          >
+            Show completed
+          </button>
+        </div>
+      ) : (
+        <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+          <p className="text-sm">No campaigns found.</p>
+        </div>
+      )}
+    </>
+  );
+}