feat(missions): add cover image and redesign mission detail page with hero header

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

src/app/(frontend)/intelligence/missions/[id]/page.tsx

@@ -11,6 +11,7 @@ import type {
   Faction,
   Qualification,
   Rank,
+  Media,
 } from "@/payload-types";
 import {
   ArrowLeftIcon,
@@ -31,7 +32,6 @@ import {
   ItemMedia,
   ItemTitle,
 } from "@/components/ui/item";
-import { MissionHeader } from "@/components/frontend/intelligence/MissionHeader";
 import { MissionBriefingSection } from "@/components/frontend/intelligence/MissionBriefingSection";
 import { MissionObjectives } from "@/components/frontend/intelligence/MissionObjectives";
 import { MissionFactions } from "@/components/frontend/intelligence/MissionFactions";
@@ -50,6 +50,10 @@ interface MissionDetailPageProps {
   params: Promise<{ id: string }>;
 }
 
+type MissionWithCoverImage = Mission & {
+  coverImage?: number | null | Media;
+};
+
 const statusColors: Record<string, string> = {
   Concept: "bg-muted text-muted-foreground",
   Planning: "bg-muted text-muted-foreground",
@@ -60,9 +64,19 @@ const statusColors: Record<string, string> = {
   Cancelled: "bg-red-500/20 text-red-400",
 };
 
-export default async function MissionDetailPage({
-  params,
-}: MissionDetailPageProps) {
+const operationTypeColors: Record<string, string> = {
+  main: "bg-primary/20 text-primary",
+  side: "bg-muted text-muted-foreground",
+  external: "bg-purple-500/20 text-purple-400",
+};
+
+const operationTypeLabels: Record<string, string> = {
+  main: "Main Operation",
+  side: "Side Operation",
+  external: "External Operation",
+};
+
+export default async function MissionDetailPage({ params }: MissionDetailPageProps) {
   const { id } = await params;
   const payload = await getPayload({ config });
 
@@ -79,13 +93,18 @@ export default async function MissionDetailPage({
   }
 
   const map =
-    typeof mission.classification.map === "object"
-      ? (mission.classification.map as Map)
-      : null;
+    typeof mission.classification.map === "object" ? (mission.classification.map as Map) : null;
   const campaign =
     typeof mission.classification.campaign === "object"
       ? (mission.classification.campaign as Campaign)
       : null;
+  const missionWithCoverImage = mission as MissionWithCoverImage;
+  const coverImage =
+    typeof missionWithCoverImage.coverImage === "object" &&
+    missionWithCoverImage.coverImage !== null
+      ? (missionWithCoverImage.coverImage as Media)
+      : null;
+  const coverImageUrl = coverImage?.url ?? null;
 
   const startDate = new Date(mission.classification.startDateTime);
   const dateStr = startDate.toLocaleDateString("en-US", {
@@ -98,14 +117,9 @@ export default async function MissionDetailPage({
     hour: "2-digit",
     minute: "2-digit",
   });
-  const durationHours = Math.floor(
-    mission.classification.estimatedDuration / 60,
-  );
+  const durationHours = Math.floor(mission.classification.estimatedDuration / 60);
   const durationMins = mission.classification.estimatedDuration % 60;
-  const durationStr =
-    durationMins > 0
-      ? `${durationHours}h ${durationMins}m`
-      : `${durationHours}h`;
+  const durationStr = durationMins > 0 ? `${durationHours}h ${durationMins}m` : `${durationHours}h`;
 
   // Fetch sibling missions in the same campaign
   const campaignId =
@@ -160,78 +174,114 @@ export default async function MissionDetailPage({
   };
 
   return (
-    <div className="p-5 flex flex-col gap-6 max-w-7xl">
+    <div className="flex flex-col">
+      <header className="relative min-h-[500px] w-full overflow-hidden bg-background">
+        <div className="absolute top-0 left-0 px-5 pt-5 pb-3 z-10">
           <Link
             href="/intelligence/missions"
-        className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center gap-1 w-fit"
+            className="flex w-fit items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-primary"
           >
             <ArrowLeftIcon className="size-3" />
             Back to Missions
           </Link>
-
-      <MissionHeader
-        name={mission.name}
-        codeName={mission.codeName}
-        operationType={mission.operationType}
-        status={mission.ownershipAndStatus.status}
+        </div>
+        {coverImageUrl ? (
+          <img
+            src={coverImageUrl}
+            alt=""
+            fetchPriority="high"
+            className="absolute inset-0 size-full object-cover opacity-70"
           />
+        ) : (
+          <div className="absolute inset-0 bg-gradient-to-b from-muted/40 to-background" />
+        )}
+        <div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-background" />
+        <div className="absolute inset-0 bg-gradient-to-r from-black/30 via-transparent to-black/40" />
 
-      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
-        {/* ── Main Content (2/3) ──────────────────────────── */}
-        <div className="xl:col-span-2 flex flex-col gap-6">
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-            <Item variant="muted" size="sm">
-              <ItemMedia variant="icon">
-                <CalendarDaysIcon />
-              </ItemMedia>
-              <ItemContent>
-                <ItemTitle>Date</ItemTitle>
-                <ItemDescription>{dateStr}</ItemDescription>
-              </ItemContent>
-            </Item>
-            <Item variant="muted" size="sm">
-              <ItemMedia variant="icon">
-                <ClockIcon />
-              </ItemMedia>
-              <ItemContent>
-                <ItemTitle>Time & Duration</ItemTitle>
-                <ItemDescription>
+        <div className="absolute top-4 right-4 z-20 flex gap-2">
+          <span
+            className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${statusColors[mission.ownershipAndStatus.status] ?? "bg-muted text-muted-foreground"}`}
+          >
+            {mission.ownershipAndStatus.status}
+          </span>
+          <span
+            className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${operationTypeColors[mission.operationType] ?? "bg-muted text-muted-foreground"}`}
+          >
+            {operationTypeLabels[mission.operationType] ?? mission.operationType}
+          </span>
+        </div>
+
+        <div className="absolute inset-0 flex flex-col justify-end p-6 md:p-10 lg:p-12">
+          <div className="mx-auto flex w-full max-w-7xl flex-col">
+            <div className="flex items-center gap-2 font-mono text-sm uppercase tracking-widest text-white/60">
+              <CrosshairIcon className="size-4" />
+              <span>{mission.codeName}</span>
+            </div>
+            <h1
+              id="mission-title"
+              className="mt-3 text-5xl font-bold tracking-tight text-white drop-shadow-2xl md:text-6xl"
+            >
+              {mission.name}
+            </h1>
+            <p className="mt-2 max-w-3xl text-lg leading-relaxed text-white/80">
+              {mission.summary}
+            </p>
+
+            <div className="mt-6 flex flex-wrap gap-3">
+              <div className="flex items-center gap-2 px-3 py-2">
+                <CalendarDaysIcon className="size-4 text-white/60" />
+                <span className="flex flex-col">
+                  <span className="text-[10px] font-semibold uppercase tracking-wider text-white/50">
+                    Date
+                  </span>
+                  <span className="text-sm text-white">{dateStr}</span>
+                </span>
+              </div>
+              <div className="flex items-center gap-2 px-3 py-2">
+                <ClockIcon className="size-4 text-white/60" />
+                <span className="flex flex-col">
+                  <span className="text-[10px] font-semibold uppercase tracking-wider text-white/50">
+                    Time
+                  </span>
+                  <span className="text-sm text-white">
                     {timeStr} · {durationStr}
-                </ItemDescription>
-              </ItemContent>
-            </Item>
+                  </span>
+                </span>
+              </div>
               {map && (
-              <Item variant="muted" size="sm">
-                <ItemMedia variant="icon">
-                  <MapPinIcon />
-                </ItemMedia>
-                <ItemContent>
-                  <ItemTitle>Map</ItemTitle>
-                  <ItemDescription>{map.name}</ItemDescription>
-                </ItemContent>
-              </Item>
+                <div className="flex items-center gap-2 px-3 py-2">
+                  <MapPinIcon className="size-4 text-white/60" />
+                  <span className="flex flex-col">
+                    <span className="text-[10px] font-semibold uppercase tracking-wider text-white/50">
+                      Map
+                    </span>
+                    <span className="text-sm text-white">{map.name}</span>
+                  </span>
+                </div>
               )}
               {campaign && (
-              <Link href={`/intelligence/campaigns/${campaign.id}`}>
-                <Item
-                  variant="muted"
-                  size="sm"
-                  className="cursor-pointer hover:border-primary/50 transition-colors"
+                <Link
+                  href={`/intelligence/campaigns/${campaign.id}`}
+                  className="flex items-center gap-2 px-3 py-2 transition-colors hover:border-white/30"
                 >
-                  <ItemMedia variant="icon">
-                    <CrosshairIcon />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle>Campaign</ItemTitle>
-                    <ItemDescription>{campaign.name}</ItemDescription>
-                  </ItemContent>
-                </Item>
+                  <FlagIcon className="size-4 text-white/60" />
+                  <span className="flex flex-col">
+                    <span className="text-[10px] font-semibold uppercase tracking-wider text-white/50">
+                      Campaign
+                    </span>
+                    <span className="max-w-56 truncate text-sm text-white">{campaign.name}</span>
+                  </span>
                 </Link>
               )}
             </div>
+          </div>
+        </div>
+      </header>
 
-          <p className="text-sm text-muted-foreground">{mission.summary}</p>
-
+      <div className="p-5 flex flex-col gap-6 max-w-7xl mx-auto w-full">
+        <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+          {/* ── Main Content (2/3) ──────────────────────────── */}
+          <div className="xl:col-span-2 flex flex-col gap-6">
             <Item variant="outline">
               <ItemHeader>
                 <ItemTitle>Mission Details</ItemTitle>
@@ -240,21 +290,15 @@ export default async function MissionDetailPage({
                 <div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
                   <div>
                     <span className="text-muted-foreground">Type</span>
-                  <p className="font-medium">
-                    {mission.classification.missionType}
-                  </p>
+                    <p className="font-medium">{mission.classification.missionType}</p>
                   </div>
                   <div>
                     <span className="text-muted-foreground">Operation Type</span>
-                  <p className="font-medium capitalize">
-                    {mission.operationType}
-                  </p>
+                    <p className="font-medium capitalize">{mission.operationType}</p>
                   </div>
                   <div>
                     <span className="text-muted-foreground">Max Players</span>
-                  <p className="font-medium">
-                    {mission.missionRoles?.maxPlayers ?? "—"}
-                  </p>
+                    <p className="font-medium">{mission.missionRoles?.maxPlayers ?? "—"}</p>
                   </div>
                 </div>
               </ItemContent>
@@ -264,9 +308,7 @@ export default async function MissionDetailPage({
 
             <MissionObjectives objectives={mission.missionObjectives ?? null} />
 
-          <MissionFactions
-            factionsInvolved={mission.factionsInvolved ?? null}
-          />
+            <MissionFactions factionsInvolved={mission.factionsInvolved ?? null} />
 
             <MissionRoles
               roles={mission.missionRoles?.providedRoles ?? null}
@@ -274,9 +316,7 @@ export default async function MissionDetailPage({
               maxPlayers={mission.missionRoles?.maxPlayers ?? 32}
             />
 
-          <MissionLogistics
-            logisticsAndSupport={mission.logisticsAndSupport ?? null}
-          />
+            <MissionLogistics logisticsAndSupport={mission.logisticsAndSupport ?? null} />
 
             <MissionComms commsAndDocs={mission.commsAndDocs ?? null} />
           </div>
@@ -313,14 +353,10 @@ export default async function MissionDetailPage({
                       <span
                         className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded mt-1 inline-block ${campaign.status === "inProgress" ? "bg-blue-500/20 text-blue-400" : "bg-muted text-muted-foreground"}`}
                       >
-                      {campaign.status === "inProgress"
-                        ? "In Progress"
-                        : campaign.status}
+                        {campaign.status === "inProgress" ? "In Progress" : campaign.status}
                       </span>
                     </div>
-                  <p className="text-xs text-muted-foreground line-clamp-3">
-                    {campaign.summary}
-                  </p>
+                    <p className="text-xs text-muted-foreground line-clamp-3">{campaign.summary}</p>
                   </div>
                 </ItemContent>
               </Item>
@@ -338,9 +374,7 @@ export default async function MissionDetailPage({
                 <ItemContent>
                   <div className="flex flex-col gap-1.5">
                     {siblingMissions.map((m) => {
-                    const mDate = new Date(
-                      m.classification.startDateTime,
-                    );
+                      const mDate = new Date(m.classification.startDateTime);
                       return (
                         <Link
                           key={m.id}
@@ -401,5 +435,6 @@ export default async function MissionDetailPage({
           </div>
         </div>
       </div>
+    </div>
   );
 }

src/collections/intelligence/Missions.ts

@@ -37,6 +37,7 @@ export const Missions: CollectionConfig = {
   slug: "missions",
   admin: {
     group: "Intelligence",
+    useAsTitle: "name",
   },
   access: {
     create: isDeveloper,
@@ -164,6 +165,15 @@ export const Missions: CollectionConfig = {
         hidden: true,
       },
     },
+    {
+      name: "coverImage",
+      type: "upload",
+      relationTo: "media",
+      admin: {
+        description:
+          "Background image for the mission page hero header. Renders translucent with a top-to-bottom fade to black. Recommended aspect ratio: 16:9 or wider.",
+      },
+    },
     {
       type: "tabs",
       tabs: [