v0.2.28 - enforce mission visibility rules, accept plain-text mod lists, add voiceover spoiler gate, document dossier style

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

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

AGENTS.md

@@ -356,6 +356,33 @@ shadcn/ui components live in `src/components/ui/`. Use `bunx shadcn@latest add <
 
 **Rule**: always prefer shadcn/ui components (Dialog, Button, Input, Textarea, Select, etc.) over raw HTML elements or custom-built alternatives. Only build new components when no existing shadcn component fits the need. Do not override shadcn's default dark theme classes with custom `bg-*` `border-*` overrides — the admin panel's theme handles styling.
 
+### Tactical "dossier" style (Battlefield-style UI)
+
+An approved militaristic/intel-interface style for feature surfaces. The user (Jason) likes it a lot. Reference implementation: the official campaign cards (v0.2.27):
+
+- Component: `src/components/frontend/intelligence/CampaignCard.tsx` (official variant, `size="lg"`; community cards keep the conventional style for contrast)
+- Effects CSS: `src/app/(frontend)/styles.css` (`.glitch-hover`, `.glitch-ghost`, `.glitch-shard-a/b/c`, `.glitch-soft`, `.glitch-soft-late`, `.glitch-ghost-img-a/b` + their keyframes; trust the file for current values, the list here describes intent)
+
+The recipe (each piece is separable; use subsets, do not feel obliged to use all):
+
+1. **Classification strip**: full-width top bar (`bg-black/50 backdrop-blur-sm border-b border-white/15`), 9px `font-mono uppercase tracking-widest text-white/60` labels at both ends (e.g. `OFFICIAL // UNIT COMMAND` left, a deterministic `REF ###` derived from the record id right).
+2. **Corner brackets**: four 1px `white/25` L-marks inset from the edges (`inset-2`, `size-3`, per-corner border sides), brightening to `white/60` on hover. `pointer-events-none` + `aria-hidden`.
+3. **Squared corners**: `rounded-none` on the tactical surface only; sibling/secondary surfaces keep `rounded-lg`. The contrast is deliberate.
+4. **Military status language**: squared pill (`rounded-sm`) or plain colored text, uppercase relabels (e.g. Concept → Planning, In Progress → Active Deployment, Completed → Concluded). The status color renders as **text** (`text-blue-400` / `text-emerald-400` / `text-muted-foreground`); do not duplicate status in two places on one card.
+5. **Readout footer**: a permanent (not hover-only) single-line bar (`border-t border-white/15 bg-black/60 py-1.5 backdrop-blur-sm`), cells `flex-1` separated by hairline `border-r border-white/15`, each cell a `font-mono text-xs tabular-nums text-white/80` value plus a 9px uppercase `text-white/50` label (e.g. `3 MSNS`, `4h 0m DURATION`). No owner/DIR cell unless the user wants it.
+6. **Darkened cover imagery**: image at `opacity-15` (hover 25) under a heavy gradient (`from-black/85 via-black/60 to-black/25`) so text stays readable.
+7. **Faint grid texture**: 1px white grid lines, 28px cells, `opacity-[0.04]` (hover 0.07), `motion-reduce` honored.
+8. **One-shot glitch hover** (only with explicit user opt-in; it is extra motion): every layer fires instantly at 0% then decays; steps-based chaos only in the first ~15-20% of the animation; title/soft text restore to readable within ~25-35%; chromatic aberration via paired cyan/rose `text-shadow`; title shards are duplicated absolutely-positioned `aria-hidden` spans clipped by slanted `clip-path` polygons (cyan `#22d3ee`, rose `#f43f5e`, white); image tears use two ghost `<img>` copies clipped to horizontal bands so pieces shift but nothing ever disappears (never animate `opacity: inherit` on an image, it flashes to full brightness). Image band decay may run longer (2s) than text (1s). Everything is one-shot (no `infinite`) and fully disabled under `prefers-reduced-motion`.
+
+Where it fits: large feature/hero cards, section headers, showcase surfaces. Where it does not: dense data UI, tables, forms, dialogs, buttons, or anything shadcn-styled (the shadcn rule above still governs those). Consistency rule: within one page, secondary surfaces stay conventional so the tactical surface stands out.
+
+#### Protocol: offer, demo, or default (MANDATORY)
+
+Whenever creating a new component or refactoring an existing component's styling, **ask the user** whether they want to try applying the tactical dossier style to it. Concretely:
+
+- **Yes**: demo similar styling on that component first (same approach as the campaign cards: build it, let the user eyeball it, iterate on tuning). 
+- **No, or no answer**: stick with the existing styling conventions (shadcn + the site's dark theme conventions). Do not apply tactical styling unasked, and do not nag: ask once, then proceed either way.
+
 ## Environment
 
 - `.env` — local dev (PostgreSQL connection string + PAYLOAD_SECRET)

bun.lock

@@ -16,6 +16,7 @@
         "@payloadcms/plugin-mcp": "^3.88.0",
         "@payloadcms/richtext-lexical": "3.88.0",
         "@payloadcms/ui": "3.88.0",
+        "@radix-ui/react-alert-dialog": "^1.1.23",
         "@radix-ui/react-avatar": "^1.2.6",
         "@radix-ui/react-checkbox": "^1.3.11",
         "@radix-ui/react-collapsible": "^1.1.20",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polaris-task-force",
-  "version": "0.2.27",
+  "version": "0.2.28",
   "description": "Web app for the Arma 3 unit Polaris Task Force. Uses Next.js for client- and server-side rendering, with a Postgres database and some other neat libraries.",
   "license": "MIT",
   "type": "module",
@@ -40,6 +40,7 @@
     "@payloadcms/plugin-mcp": "^3.88.0",
     "@payloadcms/richtext-lexical": "3.88.0",
     "@payloadcms/ui": "3.88.0",
+    "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-avatar": "^1.2.6",
     "@radix-ui/react-checkbox": "^1.3.11",
     "@radix-ui/react-collapsible": "^1.1.20",

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

@@ -2,6 +2,7 @@ import config from "@payload-config";
 import { getPayload } from "payload";
 import { notFound } from "next/navigation";
 import Link from "next/link";
+import { headers as nextHeaders } from "next/headers";
 import type { Faction, Media, Mission } from "@/payload-types";
 import { RichText } from "@payloadcms/richtext-lexical/react";
 import { ClientDate } from "@/components/frontend/ClientDate";
@@ -37,6 +38,10 @@ const factionTypeColors: Record<string, string> = {
 export default async function CampaignDetailPage({ params }: CampaignDetailPageProps) {
   const { id } = await params;
   const payload = await getPayload({ config });
+  const { user } = await payload.auth({
+    headers: await nextHeaders(),
+    canSetHeaders: false,
+  });
 
   const campaign = await payload
     .findByID({
@@ -81,6 +86,8 @@ export default async function CampaignDetailPage({ params }: CampaignDetailPageP
         sort: "-classification.startDateTime",
         limit: 100,
         depth: 1,
+        user,
+        overrideAccess: false,
         select: {
           name: true,
           codeName: true,

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

@@ -1,5 +1,6 @@
 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 { CreateCampaignDialog } from "@/components/frontend/intelligence/CreateCampaignDialog";
@@ -12,6 +13,10 @@ export const metadata = {
 
 export default async function CampaignsPage() {
   const payload = await getPayload({ config });
+  const { user } = await payload.auth({
+    headers: await nextHeaders(),
+    canSetHeaders: false,
+  });
 
   const campaignsRes = await payload.find({
     collection: "campaigns",
@@ -49,6 +54,8 @@ export default async function CampaignsPage() {
         where: { "classification.campaign": { equals: campaign.id } },
         depth: 0,
         limit: 100,
+        user,
+        overrideAccess: false,
         select: {
           missionRoles: true,
           classification: true,

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

@@ -2,6 +2,7 @@ import config from "@payload-config";
 import { getPayload } from "payload";
 import { notFound } from "next/navigation";
 import Link from "next/link";
+import { headers as nextHeaders } from "next/headers";
 import type { BankAccount, Campaign, Faction, Media, Mission, Resource } from "@/payload-types";
 import { RichText } from "@payloadcms/richtext-lexical/react";
 import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
@@ -72,6 +73,10 @@ function relationshipTone(value: number): { bar: string; text: string; label: st
 export default async function FactionDetailPage({ params }: FactionDetailPageProps) {
   const { id } = await params;
   const payload = await getPayload({ config });
+  const { user } = await payload.auth({
+    headers: await nextHeaders(),
+    canSetHeaders: false,
+  });
 
   const faction = await payload
     .findByID({
@@ -126,6 +131,8 @@ export default async function FactionDetailPage({ params }: FactionDetailPagePro
       sort: "-classification.startDateTime",
       limit: 100,
       depth: 1,
+      user,
+      overrideAccess: false,
       select: {
         name: true,
         codeName: true,

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

@@ -70,11 +70,18 @@ export default async function MissionDetailPage({ params }: MissionDetailPagePro
   const { id } = await params;
   const payload = await getPayload({ config });
 
+  const { user: currentUser } = await payload.auth({
+    headers: await nextHeaders(),
+    canSetHeaders: false,
+  });
+
   const mission = await payload
     .findByID({
       collection: "missions",
       id: Number(id),
       depth: 2,
+      user: currentUser,
+      overrideAccess: false,
     })
     .catch(() => null);
 
@@ -127,6 +134,8 @@ export default async function MissionDetailPage({ params }: MissionDetailPagePro
             sort: "-classification.startDateTime",
             limit: 5,
             depth: 0,
+            user: currentUser,
+            overrideAccess: false,
             select: {
               name: true,
               codeName: true,
@@ -139,11 +148,6 @@ export default async function MissionDetailPage({ params }: MissionDetailPagePro
 
   const siblingMissions = siblingMissionsRes.docs;
 
-  const { user: currentUser } = await payload.auth({
-    headers: await nextHeaders(),
-    canSetHeaders: false,
-  });
-
   const canManage = currentUser
     ? await hasPermission(payload, currentUser, "missions:update")
     : false;

src/app/(frontend)/intelligence/missions/actions.ts

@@ -234,6 +234,13 @@ export async function uploadSideOpModlist(
     return { success: true, data: { modlistId: created.id, modlistName: created.modlistName } };
   } catch (error) {
     const message = error instanceof Error ? error.message : "Unknown error";
+    if (/invalid: file/i.test(message)) {
+      return {
+        success: false,
+        error:
+          "That file type is not accepted. Please upload the .html file exported from the Arma 3 launcher, or a .txt mod list.",
+      };
+    }
     return message === "Unauthorized"
       ? { success: false, error: "You must be logged in." }
       : { success: false, error: message };

src/app/(frontend)/intelligence/missions/calendar/page.tsx

@@ -62,6 +62,8 @@ export default async function FridayCalendarPage() {
     sort: "classification.startDateTime",
     depth: 1,
     limit: 200,
+    user,
+    overrideAccess: false,
     select: {
       name: true,
       codeName: true,

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

@@ -1,5 +1,6 @@
 import config from "@payload-config";
 import { getPayload } from "payload";
+import { headers as nextHeaders } from "next/headers";
 import type { Campaign, Mission } from "@/payload-types";
 import { CrosshairIcon } from "lucide-react";
 import { MissionsList } from "@/components/frontend/intelligence/MissionsList";
@@ -10,6 +11,10 @@ export const metadata = {
 
 export default async function MissionsPage() {
   const payload = await getPayload({ config });
+  const { user } = await payload.auth({
+    headers: await nextHeaders(),
+    canSetHeaders: false,
+  });
 
   const missionsRes = await payload
     .find({
@@ -17,6 +22,8 @@ export default async function MissionsPage() {
       sort: "-classification.startDateTime",
       limit: 500,
       depth: 2,
+      user,
+      overrideAccess: false,
     })
     .catch(() => ({ docs: [] }));
 

src/app/(frontend)/page.tsx

@@ -74,6 +74,8 @@ export default async function HomePage() {
       sort: "classification.startDateTime",
       limit: 5,
       depth: 2,
+      user,
+      overrideAccess: false,
     })
     .catch(() => ({ docs: [] }));
 
@@ -89,6 +91,8 @@ export default async function HomePage() {
         sort: "-classification.startDateTime",
         limit: 1,
         depth: 2,
+        user,
+        overrideAccess: false,
       })
       .catch(() => ({ docs: [] }));
     briefingMission = completedRes.docs[0] ?? null;
@@ -185,6 +189,8 @@ export default async function HomePage() {
         .find({
           collection: "missions",
           limit: 0,
+          user,
+          overrideAccess: false,
         })
         .catch(() => ({ totalDocs: 0 })),
       payload.find({

src/collections/intelligence/Missions.ts

@@ -1,8 +1,10 @@
-import type { CollectionConfig, Payload } from "payload";
-import { requirePermission, hasPermission } from "@/utils/access-control/hasPermission";
+import type { CollectionConfig, Payload, PayloadRequest, Where } from "payload";
+import { requirePermission, hasPermission, isSuperuser } from "@/utils/access-control/hasPermission";
 
 type AssignmentRef = { id: number } | number;
 
+const DRAFT_STATUSES = ["Concept", "Planning"];
+
 async function isInAssignments(
   payload: Payload,
   userId: number,
@@ -32,6 +34,56 @@ function extractIds(refs: unknown[] | undefined): number[] {
   );
 }
 
+/**
+ * Per-document read access for missions, expressed as a Payload Where
+ * constraint so it applies to both list queries and single-doc reads.
+ *
+ * Visibility rules (per ownershipAndStatus.visibility):
+ * - authors / zeus always see their own missions.
+ * - unit: every authenticated user.
+ * - leadership: command or intel assignment members (+ authors/zeus).
+ * - intel: intel assignment members (+ authors/zeus).
+ * - private: authors/zeus only.
+ *
+ * Drafts (Concept / Planning) are only visible to authors/zeus and
+ * command/intel members. Superusers bypass everything.
+ */
+async function missionReadFilter(req: PayloadRequest): Promise<boolean | Where> {
+  if (!req.user) return false;
+  if (await isSuperuser(req.payload, req.user)) return true;
+
+  const userId = req.user.id as number;
+
+  const gameRules = await req.payload.findGlobal({ slug: "game-rules" });
+  const commandIds = extractIds(gameRules.commandAssignments as AssignmentRef[] | undefined);
+  const intelIds = extractIds(gameRules.intelAssignments as AssignmentRef[] | undefined);
+
+  const [isCommand, isIntel] = await Promise.all([
+    isInAssignments(req.payload, userId, commandIds),
+    isInAssignments(req.payload, userId, intelIds),
+  ]);
+
+  const isLeader = isCommand || isIntel;
+
+  const notDraft = { "ownershipAndStatus.status": { not_in: DRAFT_STATUSES } };
+
+  const or: Where["or"] = [
+    { "ownershipAndStatus.authors": { in: [userId] } },
+    { "ownershipAndStatus.zeus": { in: [userId] } },
+    { and: [notDraft, { "ownershipAndStatus.visibility": { equals: "unit" } }] },
+  ];
+
+  if (isLeader) {
+    or.push({ and: [notDraft, { "ownershipAndStatus.visibility": { equals: "leadership" } }] });
+    or.push({ "ownershipAndStatus.status": { in: DRAFT_STATUSES } });
+  }
+  if (isIntel) {
+    or.push({ and: [notDraft, { "ownershipAndStatus.visibility": { equals: "intel" } }] });
+  }
+
+  return { or };
+}
+
 export const Missions: CollectionConfig = {
   slug: "missions",
   admin: {
@@ -71,45 +123,8 @@ export const Missions: CollectionConfig = {
     delete: async ({ req }) => {
       return await hasPermission(req.payload, req.user, "missions:delete");
     },
-    read: async ({ req, data }) => {
-      if (!req.user) return false;
-      if (await hasPermission(req.payload, req.user, "missions:read")) return true;
-
-      const userId = req.user.id;
-
-      const gameRules = await req.payload.findGlobal({ slug: "game-rules" });
-      const commandIds = extractIds(gameRules.commandAssignments as AssignmentRef[] | undefined);
-      const intelIds = extractIds(gameRules.intelAssignments as AssignmentRef[] | undefined);
-
-      const [isCommand, isIntel] = await Promise.all([
-        isInAssignments(req.payload, userId, commandIds),
-        isInAssignments(req.payload, userId, intelIds),
-      ]);
-
-      const authorIds = extractIds(data?.ownershipAndStatus?.authors as unknown[] | undefined);
-      const zeusIds = extractIds(data?.ownershipAndStatus?.zeus as unknown[] | undefined);
-      const isAuthorOrZeus = authorIds.includes(userId) || zeusIds.includes(userId);
-
-      const status = data?.ownershipAndStatus?.status;
-      const isDraft = status === "Concept" || status === "Planning";
-
-      if (isDraft) {
-        return isAuthorOrZeus || isCommand || isIntel;
-      }
-
-      const visibility = data?.ownershipAndStatus?.visibility;
-      switch (visibility) {
-        case "unit":
-          return true;
-        case "leadership":
-          return isCommand || isIntel || isAuthorOrZeus;
-        case "intel":
-          return isIntel || isAuthorOrZeus;
-        case "private":
-          return isAuthorOrZeus;
-        default:
-          return true;
-      }
+    read: async ({ req }: { req: PayloadRequest }): Promise<boolean | Where> => {
+      return missionReadFilter(req);
     },
   },
   fields: [

src/collections/server/ModLists.ts

@@ -29,6 +29,6 @@ export const ModLists: CollectionConfig = {
     },
   ],
   upload: {
-    mimeTypes: ["text/html"],
+    mimeTypes: ["text/html", "text/plain"],
   },
 };

src/components/frontend/intelligence/CreateSideOpDialog.tsx

@@ -144,7 +144,7 @@ export function CreateSideOpDialog({
   useEffect(() => {
     if (open) {
       setError(null);
-      setNarrativeOpen(initial !== undefined);
+      setNarrativeOpen(false);
       if (initial) {
         setName(initial.name);
         setCodeName(initial.codeName);
@@ -174,6 +174,9 @@ export function CreateSideOpDialog({
   }, [open, initial]);
 
   function narrativeInput() {
+    if (!narrativeOpen) {
+      return {};
+    }
     return {
       briefing: narrative.briefing
         .filter((e) => e.sectionName.trim() !== "" || e.details.trim() !== "")
@@ -469,7 +472,7 @@ export function CreateSideOpDialog({
             </Select>
             <Input
               type="file"
-              accept=".html,.htm,text/html"
+              accept=".html,.htm,.txt,text/html,text/plain"
               disabled={modlistUploading}
               onChange={(e) => {
                 const file = e.target.files?.[0];
@@ -478,14 +481,15 @@ export function CreateSideOpDialog({
               }}
             />
             <p className="text-xs text-muted-foreground">
-              Upload the HTML mod list exported from the Arma 3 launcher, or pick an existing one.
+              Upload the mod list file exported from the Arma 3 launcher (.html) or a .txt mod
+              list, or pick an existing one.
             </p>
           </div>
 
           <Collapsible open={narrativeOpen} onOpenChange={setNarrativeOpen}>
             <CollapsibleTrigger asChild>
               <Button type="button" variant="outline" className="w-full justify-between">
-                Narrative &amp; logistics (briefing, objectives, infil/exfil)
+                Narrative &amp; logistics (optional)
                 <span className="text-xs text-muted-foreground">
                   {narrativeOpen ? "Hide" : "Show"}
                 </span>

src/components/frontend/voiceover/VoiceoverRecorder.tsx

@@ -1,13 +1,31 @@
 "use client";
 
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { useRouter } from "next/navigation";
-import { CheckCircle2Icon, LockKeyholeIcon, MicIcon, SparklesIcon } from "lucide-react";
+import {
+  CheckCircle2Icon,
+  LockKeyholeIcon,
+  MicIcon,
+  SparklesIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
 import { toast } from "sonner";
 
 import { submitVoiceRecording, withdrawSubmission } from "@/app/(frontend)/voiceover/actions";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { buttonVariants } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import type { VoiceoverScriptView } from "@/lib/voiceover";
+import { cn } from "@/lib/utils";
 import { TeleprompterReader } from "@/components/frontend/voiceover/TeleprompterReader";
 import {
   VoiceCapture,
@@ -15,9 +33,105 @@ import {
 } from "@/components/frontend/voiceover/VoiceCapture";
 import { VoiceoverTakes } from "@/components/frontend/voiceover/VoiceoverTakes";
 
+const HOLD_CONFIRM_MS = 1000;
+
+function HoldToConfirmButton({
+  onConfirm,
+  children,
+}: {
+  readonly onConfirm: () => void;
+  readonly children: ReactNode;
+}) {
+  const [holding, setHolding] = useState(false);
+  const timerRef = useRef<number | null>(null);
+  const doneRef = useRef(false);
+
+  const cancel = useCallback(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    setHolding(false);
+  }, []);
+
+  const begin = useCallback(() => {
+    if (timerRef.current !== null || doneRef.current) return;
+    setHolding(true);
+    timerRef.current = window.setTimeout(() => {
+      timerRef.current = null;
+      doneRef.current = true;
+      onConfirm();
+    }, HOLD_CONFIRM_MS);
+  }, [onConfirm]);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  return (
+    <button
+      type="button"
+      className={cn(buttonVariants(), "relative touch-none select-none overflow-hidden")}
+      onPointerDown={(event) => {
+        if (event.button === 0) begin();
+      }}
+      onPointerUp={cancel}
+      onPointerLeave={cancel}
+      onPointerCancel={cancel}
+      onContextMenu={(event) => event.preventDefault()}
+      onKeyDown={(event) => {
+        if ((event.key === " " || event.key === "Enter") && !event.repeat) begin();
+      }}
+      onKeyUp={(event) => {
+        if (event.key === " " || event.key === "Enter") cancel();
+      }}
+      onBlur={cancel}
+    >
+      <span aria-hidden="true" className="absolute inset-0">
+        <span
+          className={cn(
+            "absolute inset-0 origin-left bg-primary-foreground/40 transition-transform ease-linear",
+            holding ? "scale-x-100 duration-[1000ms]" : "scale-x-0 duration-0",
+          )}
+        />
+      </span>
+      <span className="relative">{children}</span>
+    </button>
+  );
+}
+
 export function VoiceoverRecorder({ script }: { readonly script: VoiceoverScriptView }) {
   const router = useRouter();
   const isOpen = script.status === "open";
+  const [spoilerAcknowledged, setSpoilerAcknowledged] = useState(false);
+
+  if (script.spoiler && !spoilerAcknowledged) {
+    return (
+      <AlertDialog open>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2">
+              <TriangleAlertIcon className="size-5 text-amber-400" />
+              Potential campaign spoilers
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              This recording page may include, infer, or otherwise expose campaign spoilers.
+              Continue only if you are comfortable with that. Press and hold the confirmation button
+              for one second to continue.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => router.push("/voiceover")}>Go back</AlertDialogCancel>
+            <HoldToConfirmButton onConfirm={() => setSpoilerAcknowledged(true)}>
+              I understand
+            </HoldToConfirmButton>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+  }
 
   async function handleSubmitTake(
     source: VoiceCaptureSource,

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};