jason/polaris-task-force
1
0
Fork 0
Code Issues Wiki Activity

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

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

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
Jason Fraley 2026-08-12 16:21:07 -04:00
parent cce00861c2
commit dcf8a03dea
2 changed files with 286 additions and 241 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

10
src/collections/intelligence/Missions.ts
View file

@ -37,6 +37,7 @@ export const Missions: CollectionConfig = {
slug: "missions", slug: "missions",
admin: { admin: {
group: "Intelligence", group: "Intelligence",
useAsTitle: "name",
}, },
access: { access: {
create: isDeveloper, create: isDeveloper,
@ -164,6 +165,15 @@ export const Missions: CollectionConfig = {
hidden: true, 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", type: "tabs",
tabs: [ tabs: [