Context Menu

TSX
"use client";

import { ClipboardPaste, Copy, CopyPlus, Scissors, Trash2 } from "lucide-react";
import type * as React from "react";

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

// macOS browsers never turn Shift+F10 into a contextmenu event (Windows and
// Linux do), so the shortcut the hint advertises is forwarded by hand there.
function openMenuWithShiftF10(event: React.KeyboardEvent<HTMLElement>) {
  if (event.key !== "F10" || !event.shiftKey) return;
  if (!/Mac|iPhone|iPad/.test(navigator.userAgent)) return;
  event.preventDefault();
  const rect = event.currentTarget.getBoundingClientRect();
  event.currentTarget.dispatchEvent(
    new MouseEvent("contextmenu", {
      bubbles: true,
      cancelable: true,
      clientX: rect.left + 8,
      clientY: rect.top + 8,
    }),
  );
}

const clipboardActions = [
  { label: "Cut", icon: Scissors, shortcut: "⌘X" },
  { label: "Copy", icon: Copy, shortcut: "⌘C" },
  { label: "Paste", icon: ClipboardPaste, shortcut: "⌘V" },
];

export default function ContextMenu01() {
  return (
    <ContextMenu>
      <ContextMenuTrigger
        onKeyDown={openMenuWithShiftF10}
        tabIndex={0}
        aria-label="Hero banner layer. Right-click or press Shift+F10 for actions."
        className="flex aspect-video w-full max-w-sm flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-border bg-muted/40 p-6 text-center outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
      >
        <span className="text-sm font-medium">Hero banner</span>
        <span className="text-xs text-muted-foreground">
          Right-click the layer or press Shift+F10
        </span>
      </ContextMenuTrigger>
      <ContextMenuContent className="w-52">
        <ContextMenuGroup>
          {clipboardActions.map(({ label, icon: Icon, shortcut }) => (
            <ContextMenuItem key={label}>
              <Icon aria-hidden="true" />
              {label}
              <ContextMenuShortcut>{shortcut}</ContextMenuShortcut>
            </ContextMenuItem>
          ))}
          <ContextMenuItem>
            <CopyPlus aria-hidden="true" />
            Duplicate
            <ContextMenuShortcut>⌘D</ContextMenuShortcut>
          </ContextMenuItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">
          <Trash2 aria-hidden="true" />
          Delete layer
          <ContextMenuShortcut>⌫</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

TSX
"use client";

import * as React from "react";

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

// macOS browsers never turn Shift+F10 into a contextmenu event (Windows and
// Linux do), so the shortcut the hint advertises is forwarded by hand there.
function openMenuWithShiftF10(event: React.KeyboardEvent<HTMLElement>) {
  if (event.key !== "F10" || !event.shiftKey) return;
  if (!/Mac|iPhone|iPad/.test(navigator.userAgent)) return;
  event.preventDefault();
  const rect = event.currentTarget.getBoundingClientRect();
  event.currentTarget.dispatchEvent(
    new MouseEvent("contextmenu", {
      bubbles: true,
      cancelable: true,
      clientX: rect.left + 8,
      clientY: rect.top + 8,
    }),
  );
}

type ViewOption = "grid" | "rulers" | "guides" | "snap";

const options: { key: ViewOption; label: string; shortcut: string }[] = [
  { key: "grid", label: "Pixel grid", shortcut: "⌘'" },
  { key: "rulers", label: "Rulers", shortcut: "⇧R" },
  { key: "guides", label: "Layout guides", shortcut: "⌘G" },
  { key: "snap", label: "Snap to grid", shortcut: "⇧S" },
];

export default function ContextMenu02() {
  const [view, setView] = React.useState<Record<ViewOption, boolean>>({
    grid: true,
    rulers: true,
    guides: false,
    snap: true,
  });

  const active = options.filter((option) => view[option.key]);

  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <ContextMenu>
        <ContextMenuTrigger
          onKeyDown={openMenuWithShiftF10}
          tabIndex={0}
          aria-label="Artboard. Right-click or press Shift+F10 for view options."
          className="relative flex aspect-[4/3] w-full overflow-hidden rounded-xl border border-border bg-card outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
        >
          {view.rulers && (
            <>
              <div
                aria-hidden="true"
                className="absolute inset-x-0 top-0 h-4 border-b border-border bg-[repeating-linear-gradient(90deg,var(--color-border)_0_1px,transparent_1px_12px)] bg-muted"
              />
              <div
                aria-hidden="true"
                className="absolute inset-y-0 left-0 w-4 border-r border-border bg-[repeating-linear-gradient(0deg,var(--color-border)_0_1px,transparent_1px_12px)] bg-muted"
              />
            </>
          )}
          <div
            className={
              view.rulers
                ? "absolute inset-0 top-4 left-4"
                : "absolute inset-0"
            }
          >
            {view.grid && (
              <div
                aria-hidden="true"
                className="absolute inset-0 bg-[radial-gradient(var(--color-border)_1px,transparent_1px)] bg-size-[14px_14px]"
              />
            )}
            {view.guides && (
              <div
                aria-hidden="true"
                className="absolute inset-y-0 left-1/2 w-px bg-chart-1/60"
              />
            )}
            <div className="absolute top-1/2 left-1/2 flex h-16 w-28 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-md border border-border bg-background text-xs font-medium shadow-sm">
              Sign-up card
            </div>
          </div>
        </ContextMenuTrigger>
        <ContextMenuContent className="w-56">
          <ContextMenuGroup>
            <ContextMenuLabel>View</ContextMenuLabel>
            {options.map((option) => (
              <ContextMenuCheckboxItem
                key={option.key}
                checked={view[option.key]}
                closeOnClick={false}
                onCheckedChange={(checked) =>
                  setView((prev) => ({ ...prev, [option.key]: checked }))
                }
              >
                {option.label}
                <ContextMenuShortcut className="mr-4">
                  {option.shortcut}
                </ContextMenuShortcut>
              </ContextMenuCheckboxItem>
            ))}
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <p className="px-1.5 py-1 text-xs text-muted-foreground">
            Changes apply instantly; the menu stays open.
          </p>
        </ContextMenuContent>
      </ContextMenu>
      <p className="text-xs text-muted-foreground" aria-live="polite">
        {active.length > 0
          ? `Showing ${active.map((option) => option.label.toLowerCase()).join(", ")}`
          : "All view aids hidden"}
      </p>
    </div>
  );
}

TSX
"use client";

import { SignalHigh, SignalLow, SignalMedium } from "lucide-react";
import * as React from "react";

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

// macOS browsers never turn Shift+F10 into a contextmenu event (Windows and
// Linux do), so the shortcut the hint advertises is forwarded by hand there.
function openMenuWithShiftF10(event: React.KeyboardEvent<HTMLElement>) {
  if (event.key !== "F10" || !event.shiftKey) return;
  if (!/Mac|iPhone|iPad/.test(navigator.userAgent)) return;
  event.preventDefault();
  const rect = event.currentTarget.getBoundingClientRect();
  event.currentTarget.dispatchEvent(
    new MouseEvent("contextmenu", {
      bubbles: true,
      cancelable: true,
      clientX: rect.left + 8,
      clientY: rect.top + 8,
    }),
  );
}

const labels = [
  { value: "research", name: "Research", swatch: "bg-chart-1" },
  { value: "design", name: "Design", swatch: "bg-chart-2" },
  { value: "engineering", name: "Engineering", swatch: "bg-chart-3" },
  { value: "marketing", name: "Marketing", swatch: "bg-chart-4" },
  { value: "ops", name: "Operations", swatch: "bg-chart-5" },
];

const priorities = [
  { value: "high", name: "High", icon: SignalHigh },
  { value: "medium", name: "Medium", icon: SignalMedium },
  { value: "low", name: "Low", icon: SignalLow },
];

export default function ContextMenu03() {
  const [label, setLabel] = React.useState("design");
  const [priority, setPriority] = React.useState("medium");

  const currentLabel = labels.find((item) => item.value === label) ?? labels[0];
  const currentPriority =
    priorities.find((item) => item.value === priority) ?? priorities[1];
  const PriorityIcon = currentPriority.icon;

  return (
    <ContextMenu>
      <ContextMenuTrigger
        onKeyDown={openMenuWithShiftF10}
        tabIndex={0}
        aria-label="Task card. Right-click or press Shift+F10 to change label and priority."
        className="flex w-full max-w-xs flex-col gap-3 rounded-xl border border-border bg-card p-4 text-card-foreground shadow-xs outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
      >
        <div className="flex items-center justify-between gap-2 text-xs">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-border px-2 py-0.5 font-medium">
            <span
              aria-hidden="true"
              className={`size-2 rounded-full ${currentLabel.swatch}`}
            />
            {currentLabel.name}
          </span>
          <span className="inline-flex items-center gap-1 text-muted-foreground">
            <PriorityIcon aria-hidden="true" className="size-3.5" />
            {currentPriority.name}
          </span>
        </div>
        <p className="text-sm leading-snug font-medium">
          Audit onboarding emails for the Q4 pricing change
        </p>
        <p className="text-xs text-muted-foreground">
          Right-click to relabel · Due Oct 14
        </p>
      </ContextMenuTrigger>
      <ContextMenuContent className="w-52">
        <ContextMenuRadioGroup value={label} onValueChange={setLabel}>
          <ContextMenuLabel>Label</ContextMenuLabel>
          {labels.map((item) => (
            <ContextMenuRadioItem key={item.value} value={item.value}>
              <span
                aria-hidden="true"
                className={`size-2.5 rounded-full ring-2 ring-background ${item.swatch}`}
              />
              {item.name}
            </ContextMenuRadioItem>
          ))}
        </ContextMenuRadioGroup>
        <ContextMenuSeparator />
        <ContextMenuRadioGroup value={priority} onValueChange={setPriority}>
          <ContextMenuLabel>Priority</ContextMenuLabel>
          {priorities.map(({ value, name, icon: Icon }) => (
            <ContextMenuRadioItem key={value} value={value}>
              <Icon aria-hidden="true" className="text-muted-foreground" />
              {name}
            </ContextMenuRadioItem>
          ))}
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}

TSX
"use client";

import {
  Download,
  Eye,
  Link,
  Lock,
  Pencil,
  Trash2,
  UserPlus,
} from "lucide-react";
import * as React from "react";

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

// macOS browsers never turn Shift+F10 into a contextmenu event (Windows and
// Linux do), so the shortcut the hint advertises is forwarded by hand there.
function openMenuWithShiftF10(event: React.KeyboardEvent<HTMLElement>) {
  if (event.key !== "F10" || !event.shiftKey) return;
  if (!/Mac|iPhone|iPad/.test(navigator.userAgent)) return;
  event.preventDefault();
  const rect = event.currentTarget.getBoundingClientRect();
  event.currentTarget.dispatchEvent(
    new MouseEvent("contextmenu", {
      bubbles: true,
      cancelable: true,
      clientX: rect.left + 8,
      clientY: rect.top + 8,
    }),
  );
}

const editActions = [
  { label: "Edit document", icon: Pencil, shortcut: "E" },
  { label: "Invite collaborators", icon: UserPlus, shortcut: "⌘I" },
];

export default function ContextMenu04() {
  const [readOnly, setReadOnly] = React.useState(true);
  const switchId = React.useId();

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <div className="flex items-center justify-between gap-3">
        <Label htmlFor={switchId}>View-only access</Label>
        <Switch
          id={switchId}
          checked={readOnly}
          onCheckedChange={setReadOnly}
        />
      </div>
      <ContextMenu>
        <ContextMenuTrigger
          onKeyDown={openMenuWithShiftF10}
          tabIndex={0}
          aria-label="2025 hiring plan document. Right-click or press Shift+F10 for actions."
          className="flex items-center gap-3 rounded-lg border border-border bg-card p-3 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
        >
          <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
            {readOnly ? (
              <Lock aria-hidden="true" className="size-4" />
            ) : (
              <Pencil aria-hidden="true" className="size-4" />
            )}
          </div>
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium">2025 hiring plan</p>
            <p className="truncate text-xs text-muted-foreground">
              Shared by Priya Nair · {readOnly ? "Can view" : "Can edit"}
            </p>
          </div>
        </ContextMenuTrigger>
        <ContextMenuContent className="w-60">
          {readOnly && (
            <>
              <p className="flex items-start gap-1.5 px-1.5 py-1 text-xs text-muted-foreground">
                <Eye
                  aria-hidden="true"
                  className="mt-0.5 size-3.5 shrink-0"
                />
                You have view-only access. Ask Priya to change it.
              </p>
              <ContextMenuSeparator />
            </>
          )}
          <ContextMenuGroup>
            <ContextMenuItem>
              <Link aria-hidden="true" />
              Copy link
              <ContextMenuShortcut>⌘L</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem>
              <Download aria-hidden="true" />
              Download as PDF
            </ContextMenuItem>
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <ContextMenuGroup>
            {editActions.map(({ label, icon: Icon, shortcut }) => (
              <ContextMenuItem key={label} disabled={readOnly}>
                <Icon aria-hidden="true" />
                {label}
                {readOnly ? (
                  <Lock
                    aria-hidden="true"
                    className="ml-auto size-3.5 text-muted-foreground"
                  />
                ) : (
                  <ContextMenuShortcut>{shortcut}</ContextMenuShortcut>
                )}
              </ContextMenuItem>
            ))}
            <ContextMenuItem variant="destructive" disabled={readOnly}>
              <Trash2 aria-hidden="true" />
              Move to trash
              {readOnly && (
                <Lock
                  aria-hidden="true"
                  className="ml-auto size-3.5 text-muted-foreground"
                />
              )}
            </ContextMenuItem>
          </ContextMenuGroup>
          {readOnly && (
            <>
              <ContextMenuSeparator />
              <ContextMenuItem>
                <UserPlus aria-hidden="true" />
                Request edit access
              </ContextMenuItem>
            </>
          )}
        </ContextMenuContent>
      </ContextMenu>
    </div>
  );
}

TSX
"use client";

import {
  Disc3,
  Heart,
  ListEnd,
  ListMusic,
  ListPlus,
  ListStart,
  MicVocal,
  Play,
  Plus,
  RotateCcw,
  Trash2,
} from "lucide-react";
import * as React from "react";

import { cn } from "cn";

import { Button } from "@/components/ui/button";
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

// macOS browsers never turn Shift+F10 into a contextmenu event (Windows and
// Linux do), so the shortcut the hint advertises is forwarded by hand there.
function openMenuWithShiftF10(event: React.KeyboardEvent<HTMLElement>) {
  if (event.key !== "F10" || !event.shiftKey) return;
  if (!/Mac|iPhone|iPad/.test(navigator.userAgent)) return;
  event.preventDefault();
  const rect = event.currentTarget.getBoundingClientRect();
  event.currentTarget.dispatchEvent(
    new MouseEvent("contextmenu", {
      bubbles: true,
      cancelable: true,
      clientX: rect.left + 8,
      clientY: rect.top + 8,
    }),
  );
}

type Track = {
  id: string;
  title: string;
  artist: string;
  album: string;
  duration: string;
  liked: boolean;
  playlists: string[];
};

const playlists = ["Deep work", "Sunday drive", "Run club 5K"];

const initialTracks: Track[] = [
  {
    id: "t1",
    title: "Glass Harbor",
    artist: "Lune Avenue",
    album: "Low Tide Lights",
    duration: "3:42",
    liked: true,
    playlists: ["Deep work"],
  },
  {
    id: "t2",
    title: "Paper Satellites",
    artist: "The Quiet Arcade",
    album: "Orbit Songs",
    duration: "4:05",
    liked: false,
    playlists: [],
  },
  {
    id: "t3",
    title: "Northbound",
    artist: "Mara Solis",
    album: "Northbound",
    duration: "2:58",
    liked: false,
    playlists: ["Sunday drive"],
  },
];

export default function ContextMenu05() {
  const [tracks, setTracks] = React.useState(initialTracks);
  const [playingId, setPlayingId] = React.useState("t1");
  const [queue, setQueue] = React.useState<string[]>([]);
  const [status, setStatus] = React.useState("");

  function patch(id: string, next: Partial<Track>) {
    setTracks((current) =>
      current.map((track) => (track.id === id ? { ...track, ...next } : track)),
    );
  }

  function enqueue(track: Track, position: "next" | "last") {
    setQueue((current) => {
      const rest = current.filter((id) => id !== track.id);
      return position === "next" ? [track.id, ...rest] : [...rest, track.id];
    });
    setStatus(
      position === "next"
        ? `${track.title} plays next.`
        : `${track.title} added to the end of the queue.`,
    );
  }

  return (
    <section
      aria-labelledby="context-menu-05-title"
      className="w-full max-w-md rounded-xl border bg-card text-card-foreground"
    >
      <header className="flex items-center gap-3 border-b p-4">
        <div className="flex size-12 shrink-0 items-center justify-center rounded-md bg-muted">
          <ListMusic
            aria-hidden="true"
            className="size-5 text-muted-foreground"
          />
        </div>
        <div className="min-w-0">
          <h3
            id="context-menu-05-title"
            className="truncate text-sm font-semibold"
          >
            Late night coding
          </h3>
          <p className="text-xs text-muted-foreground tabular-nums">
            {tracks.length} songs · {queue.length} queued
          </p>
        </div>
      </header>
      {tracks.length === 0 ? (
        <div className="flex flex-col items-center gap-3 px-4 py-10 text-center">
          <p className="text-sm text-muted-foreground">
            This playlist is empty. Add songs from search or your library.
          </p>
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              setTracks(initialTracks);
              setPlayingId("t1");
              setStatus("Playlist restored.");
            }}
          >
            <RotateCcw aria-hidden="true" />
            Restore songs
          </Button>
        </div>
      ) : (
        <ol className="p-1.5">
          {tracks.map((track, index) => {
            const playing = track.id === playingId;
            return (
              <li key={track.id}>
                <ContextMenu>
                  <ContextMenuTrigger
                    onKeyDown={openMenuWithShiftF10}
                    tabIndex={0}
                    aria-label={`${track.title} by ${track.artist}, ${track.duration}${playing ? ", now playing" : ""}${track.liked ? ", liked" : ""}`}
                    className="flex items-center gap-3 rounded-md px-2.5 py-2 outline-none transition-colors hover:bg-muted/50 focus-visible:ring-3 focus-visible:ring-ring/50 data-popup-open:bg-muted"
                  >
                    <span className="w-4 shrink-0 text-center text-xs text-muted-foreground tabular-nums">
                      {playing ? (
                        <Play
                          aria-hidden="true"
                          className="size-3.5 fill-current text-primary"
                        />
                      ) : (
                        index + 1
                      )}
                    </span>
                    <img
                      src="/placeholder.svg"
                      alt=""
                      className="size-9 shrink-0 rounded-sm bg-muted object-cover"
                    />
                    <span className="flex min-w-0 flex-1 flex-col">
                      <span
                        className={cn(
                          "truncate text-sm font-medium",
                          playing && "text-primary",
                        )}
                      >
                        {track.title}
                      </span>
                      <span className="truncate text-xs text-muted-foreground">
                        {track.artist}
                      </span>
                    </span>
                    {track.liked ? (
                      <Heart
                        aria-hidden="true"
                        className="size-3.5 shrink-0 fill-current text-primary"
                      />
                    ) : null}
                    <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
                      {track.duration}
                    </span>
                  </ContextMenuTrigger>
                  <ContextMenuContent className="w-60">
                    <div className="flex items-center gap-2.5 px-1.5 py-1.5">
                      <img
                        src="/placeholder.svg"
                        alt=""
                        className="size-10 shrink-0 rounded-sm bg-muted object-cover"
                      />
                      <span className="flex min-w-0 flex-col">
                        <span className="truncate text-sm font-medium">
                          {track.title}
                        </span>
                        <span className="truncate text-xs text-muted-foreground">
                          {track.artist} · {track.album}
                        </span>
                      </span>
                    </div>
                    <ContextMenuSeparator />
                    <ContextMenuItem
                      disabled={playing}
                      onClick={() => {
                        setPlayingId(track.id);
                        setStatus(`Now playing ${track.title}.`);
                      }}
                    >
                      <Play aria-hidden="true" />
                      {playing ? "Now playing" : "Play"}
                    </ContextMenuItem>
                    <ContextMenuItem
                      disabled={playing}
                      onClick={() => enqueue(track, "next")}
                    >
                      <ListStart aria-hidden="true" />
                      Play next
                    </ContextMenuItem>
                    <ContextMenuItem
                      disabled={playing}
                      onClick={() => enqueue(track, "last")}
                    >
                      <ListEnd aria-hidden="true" />
                      Add to queue
                    </ContextMenuItem>
                    <ContextMenuSeparator />
                    <ContextMenuCheckboxItem
                      checked={track.liked}
                      onCheckedChange={(checked) => {
                        patch(track.id, { liked: checked });
                        setStatus(
                          checked
                            ? `${track.title} saved to Liked songs.`
                            : `${track.title} removed from Liked songs.`,
                        );
                      }}
                    >
                      <Heart aria-hidden="true" />
                      Save to Liked songs
                    </ContextMenuCheckboxItem>
                    <ContextMenuSub>
                      <ContextMenuSubTrigger>
                        <ListPlus aria-hidden="true" />
                        Add to playlist
                      </ContextMenuSubTrigger>
                      <ContextMenuSubContent className="w-48">
                        <ContextMenuItem
                          onClick={() =>
                            setStatus(
                              `New playlist started with ${track.title}.`,
                            )
                          }
                        >
                          <Plus aria-hidden="true" />
                          New playlist
                        </ContextMenuItem>
                        <ContextMenuSeparator />
                        <ContextMenuGroup>
                          <ContextMenuLabel>Your playlists</ContextMenuLabel>
                          {playlists.map((playlist) => (
                            <ContextMenuCheckboxItem
                              key={playlist}
                              closeOnClick={false}
                              checked={track.playlists.includes(playlist)}
                              onCheckedChange={(checked) =>
                                patch(track.id, {
                                  playlists: checked
                                    ? [...track.playlists, playlist]
                                    : track.playlists.filter(
                                        (name) => name !== playlist,
                                      ),
                                })
                              }
                            >
                              {playlist}
                            </ContextMenuCheckboxItem>
                          ))}
                        </ContextMenuGroup>
                      </ContextMenuSubContent>
                    </ContextMenuSub>
                    <ContextMenuSeparator />
                    <ContextMenuItem
                      onClick={() => setStatus(`Opened ${track.artist}.`)}
                    >
                      <MicVocal aria-hidden="true" />
                      Go to artist
                    </ContextMenuItem>
                    <ContextMenuItem
                      onClick={() => setStatus(`Opened ${track.album}.`)}
                    >
                      <Disc3 aria-hidden="true" />
                      Go to album
                    </ContextMenuItem>
                    <ContextMenuSeparator />
                    <ContextMenuItem
                      variant="destructive"
                      onClick={() => {
                        setTracks((current) =>
                          current.filter((item) => item.id !== track.id),
                        );
                        setQueue((current) =>
                          current.filter((id) => id !== track.id),
                        );
                        setStatus(`${track.title} removed from this playlist.`);
                      }}
                    >
                      <Trash2 aria-hidden="true" />
                      Remove from this playlist
                    </ContextMenuItem>
                  </ContextMenuContent>
                </ContextMenu>
              </li>
            );
          })}
        </ol>
      )}
      <p
        aria-live="polite"
        className="min-h-10 border-t px-4 py-2.5 text-xs text-muted-foreground"
      >
        {status || "Right-click a song, or focus it and press Shift+F10."}
      </p>
    </section>
  );
}

TSX
"use client";

import {
  ArrowDown,
  ArrowUp,
  CopyPlus,
  FileVideo,
  Heading2,
  ImageIcon,
  ListTodo,
  Paperclip,
  Pilcrow,
  Plus,
  Quote,
  Repeat2,
  Trash2,
} from "lucide-react";
import * as React from "react";

import { cn } from "cn";

import { Checkbox } from "@/components/ui/checkbox";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

// macOS browsers never turn Shift+F10 into a contextmenu event (Windows and
// Linux do), so the shortcut the hint advertises is forwarded by hand there.
function openMenuWithShiftF10(event: React.KeyboardEvent<HTMLElement>) {
  if (event.key !== "F10" || !event.shiftKey) return;
  if (!/Mac|iPhone|iPad/.test(navigator.userAgent)) return;
  event.preventDefault();
  const rect = event.currentTarget.getBoundingClientRect();
  event.currentTarget.dispatchEvent(
    new MouseEvent("contextmenu", {
      bubbles: true,
      cancelable: true,
      clientX: rect.left + 8,
      clientY: rect.top + 8,
    }),
  );
}

type TextType = "text" | "heading" | "quote" | "todo";
type MediaType = "image" | "video" | "file";

type Block = {
  id: string;
  type: TextType | MediaType;
  text: string;
  done?: boolean;
};

const textTypes: { value: TextType; label: string; icon: typeof Pilcrow }[] = [
  { value: "text", label: "Text", icon: Pilcrow },
  { value: "heading", label: "Heading", icon: Heading2 },
  { value: "quote", label: "Quote", icon: Quote },
  { value: "todo", label: "To-do", icon: ListTodo },
];

const mediaTypes: { value: MediaType; label: string; icon: typeof Pilcrow }[] =
  [
    { value: "image", label: "Image", icon: ImageIcon },
    { value: "video", label: "Video embed", icon: FileVideo },
    { value: "file", label: "File attachment", icon: Paperclip },
  ];

const initialBlocks: Block[] = [
  { id: "b1", type: "heading", text: "What went well" },
  {
    id: "b2",
    type: "text",
    text: "Checkout conversion held at 3.8% through the launch-day traffic spike.",
  },
  {
    id: "b3",
    type: "quote",
    text: "The status page update went out before the first support ticket.",
  },
  {
    id: "b4",
    type: "todo",
    text: "Write the incident timeline for the billing outage",
    done: false,
  },
];

const placeholder: Record<Block["type"], string> = {
  text: "New paragraph",
  heading: "New section",
  quote: "Add a quote",
  todo: "New task",
  image: "Image · drop a file or paste a link",
  video: "Video · paste a YouTube or Loom link",
  file: "Attachment · up to 25 MB",
};

function labelOf(type: Block["type"]) {
  return (
    [...textTypes, ...mediaTypes].find((item) => item.value === type)?.label ??
    type
  );
}

export default function ContextMenu06() {
  const [blocks, setBlocks] = React.useState(initialBlocks);
  const [status, setStatus] = React.useState("");
  const counter = React.useRef(0);
  const hintId = React.useId();

  function insertAfter(index: number, type: Block["type"]) {
    counter.current += 1;
    const block: Block = {
      id: `new-${counter.current}`,
      type,
      text: placeholder[type],
      done: type === "todo" ? false : undefined,
    };
    setBlocks((current) => [
      ...current.slice(0, index + 1),
      block,
      ...current.slice(index + 1),
    ]);
    setStatus(`${labelOf(type)} block inserted.`);
  }

  function move(index: number, offset: -1 | 1) {
    setBlocks((current) => {
      const next = [...current];
      const [block] = next.splice(index, 1);
      next.splice(index + offset, 0, block);
      return next;
    });
    setStatus(offset < 0 ? "Block moved up." : "Block moved down.");
  }

  function patch(id: string, next: Partial<Block>) {
    setBlocks((current) =>
      current.map((block) => (block.id === id ? { ...block, ...next } : block)),
    );
  }

  return (
    <article className="flex w-full max-w-md flex-col gap-3 rounded-xl border bg-card p-5 text-card-foreground">
      <header>
        <h3 className="text-base font-semibold">Launch retro · Oct 2</h3>
        <p id={hintId} className="text-xs text-muted-foreground">
          Right-click a block, or focus it and press Shift+F10, to transform,
          insert, or reorder.
        </p>
      </header>
      <div className="flex flex-col gap-1">
        {blocks.map((block, index) => {
          const media = mediaTypes.find((item) => item.value === block.type);
          const isMedia = media !== undefined;
          const MediaIcon = media?.icon ?? Paperclip;
          return (
            <ContextMenu key={block.id}>
              <ContextMenuTrigger
                onKeyDown={openMenuWithShiftF10}
                tabIndex={0}
                aria-describedby={hintId}
                className={cn(
                  "-mx-2 rounded-md px-2 py-1 outline-none transition-colors hover:bg-muted/50 focus-visible:ring-3 focus-visible:ring-ring/50 data-popup-open:bg-muted",
                  block.type === "heading" && "pt-2 text-base font-semibold",
                  block.type === "text" && "text-sm leading-relaxed",
                  block.type === "quote" &&
                    "border-l-2 border-border text-sm text-muted-foreground italic",
                )}
              >
                {block.type === "todo" ? (
                  <span className="flex items-start gap-2 text-sm">
                    <Checkbox
                      aria-label={block.text}
                      checked={block.done}
                      onCheckedChange={(checked) =>
                        patch(block.id, { done: checked })
                      }
                      className="mt-0.5"
                    />
                    <span
                      className={cn(
                        block.done && "text-muted-foreground line-through",
                      )}
                    >
                      {block.text}
                    </span>
                  </span>
                ) : isMedia ? (
                  <span className="flex items-center gap-2 rounded-md border border-dashed bg-muted/40 px-3 py-4 text-xs text-muted-foreground">
                    <MediaIcon aria-hidden="true" className="size-4 shrink-0" />
                    {block.text}
                  </span>
                ) : (
                  block.text
                )}
              </ContextMenuTrigger>
              <ContextMenuContent className="w-56">
                <ContextMenuSub>
                  <ContextMenuSubTrigger disabled={isMedia}>
                    <Repeat2 aria-hidden="true" />
                    Turn into
                  </ContextMenuSubTrigger>
                  <ContextMenuSubContent className="w-44">
                    <ContextMenuRadioGroup
                      value={block.type}
                      onValueChange={(value) => {
                        const type = value as TextType;
                        patch(block.id, {
                          type,
                          done: type === "todo" ? false : undefined,
                        });
                        setStatus(`Block turned into ${labelOf(type)}.`);
                      }}
                    >
                      {textTypes.map(({ value, label, icon: Icon }) => (
                        <ContextMenuRadioItem key={value} value={value}>
                          <Icon aria-hidden="true" />
                          {label}
                        </ContextMenuRadioItem>
                      ))}
                    </ContextMenuRadioGroup>
                  </ContextMenuSubContent>
                </ContextMenuSub>
                <ContextMenuSub>
                  <ContextMenuSubTrigger>
                    <Plus aria-hidden="true" />
                    Insert below
                  </ContextMenuSubTrigger>
                  <ContextMenuSubContent className="w-48">
                    <ContextMenuGroup>
                      <ContextMenuLabel>Basic blocks</ContextMenuLabel>
                      {textTypes.map(({ value, label, icon: Icon }) => (
                        <ContextMenuItem
                          key={value}
                          onClick={() => insertAfter(index, value)}
                        >
                          <Icon aria-hidden="true" />
                          {label}
                        </ContextMenuItem>
                      ))}
                    </ContextMenuGroup>
                    <ContextMenuSeparator />
                    <ContextMenuSub>
                      <ContextMenuSubTrigger>
                        <ImageIcon aria-hidden="true" />
                        Media
                      </ContextMenuSubTrigger>
                      <ContextMenuSubContent className="w-48">
                        {mediaTypes.map(({ value, label, icon: Icon }) => (
                          <ContextMenuItem
                            key={value}
                            onClick={() => insertAfter(index, value)}
                          >
                            <Icon aria-hidden="true" />
                            {label}
                          </ContextMenuItem>
                        ))}
                      </ContextMenuSubContent>
                    </ContextMenuSub>
                  </ContextMenuSubContent>
                </ContextMenuSub>
                <ContextMenuItem
                  onClick={() => {
                    counter.current += 1;
                    const copy = { ...block, id: `copy-${counter.current}` };
                    setBlocks((current) => [
                      ...current.slice(0, index + 1),
                      copy,
                      ...current.slice(index + 1),
                    ]);
                    setStatus("Block duplicated.");
                  }}
                >
                  <CopyPlus aria-hidden="true" />
                  Duplicate
                  <ContextMenuShortcut>⌘D</ContextMenuShortcut>
                </ContextMenuItem>
                <ContextMenuSeparator />
                <ContextMenuItem
                  disabled={index === 0}
                  onClick={() => move(index, -1)}
                >
                  <ArrowUp aria-hidden="true" />
                  Move up
                  <ContextMenuShortcut>⌥⇧↑</ContextMenuShortcut>
                </ContextMenuItem>
                <ContextMenuItem
                  disabled={index === blocks.length - 1}
                  onClick={() => move(index, 1)}
                >
                  <ArrowDown aria-hidden="true" />
                  Move down
                  <ContextMenuShortcut>⌥⇧↓</ContextMenuShortcut>
                </ContextMenuItem>
                <ContextMenuSeparator />
                <ContextMenuItem
                  variant="destructive"
                  disabled={blocks.length === 1}
                  onClick={() => {
                    setBlocks((current) =>
                      current.filter((item) => item.id !== block.id),
                    );
                    setStatus(`${labelOf(block.type)} block deleted.`);
                  }}
                >
                  <Trash2 aria-hidden="true" />
                  Delete block
                  <ContextMenuShortcut>⌫</ContextMenuShortcut>
                </ContextMenuItem>
              </ContextMenuContent>
            </ContextMenu>
          );
        })}
      </div>
      <p
        aria-live="polite"
        className="border-t pt-3 text-xs text-muted-foreground tabular-nums"
      >
        {status || `${blocks.length} blocks`}
      </p>
    </article>
  );
}

TSX
"use client";

import {
  AlertCircle,
  Check,
  CloudUpload,
  RefreshCw,
  Rocket,
} from "lucide-react";
import * as React from "react";

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import { Spinner } from "@/components/ui/spinner";

// macOS browsers never turn Shift+F10 into a contextmenu event (Windows and
// Linux do), so the shortcut the hint advertises is forwarded by hand there.
function openMenuWithShiftF10(event: React.KeyboardEvent<HTMLElement>) {
  if (event.key !== "F10" || !event.shiftKey) return;
  if (!/Mac|iPhone|iPad/.test(navigator.userAgent)) return;
  event.preventDefault();
  const rect = event.currentTarget.getBoundingClientRect();
  event.currentTarget.dispatchEvent(
    new MouseEvent("contextmenu", {
      bubbles: true,
      cancelable: true,
      clientX: rect.left + 8,
      clientY: rect.top + 8,
    }),
  );
}

type Status = "idle" | "loading" | "success" | "error";
type ActionKey = "sync" | "backup" | "publish";

const actions: {
  key: ActionKey;
  label: string;
  icon: typeof RefreshCw;
  outcome: "success" | "error";
  success: string;
  error: string;
}[] = [
  {
    key: "sync",
    label: "Sync with GitHub",
    icon: RefreshCw,
    outcome: "success",
    success: "Synced 12 commits",
    error: "",
  },
  {
    key: "backup",
    label: "Back up database",
    icon: CloudUpload,
    outcome: "success",
    success: "Snapshot saved",
    error: "",
  },
  {
    key: "publish",
    label: "Deploy to production",
    icon: Rocket,
    outcome: "error",
    success: "Deployed in 48s",
    error: "Build failed: 2 type errors",
  },
];

const initialStatus: Record<ActionKey, Status> = {
  sync: "idle",
  backup: "idle",
  publish: "idle",
};

export default function ContextMenu07() {
  const [open, setOpen] = React.useState(false);
  const [status, setStatus] = React.useState(initialStatus);
  const [announcement, setAnnouncement] = React.useState("");
  const timers = React.useRef<ReturnType<typeof setTimeout>[]>([]);

  React.useEffect(() => {
    const pending = timers.current;
    return () => pending.forEach(clearTimeout);
  }, []);

  function run(action: (typeof actions)[number]) {
    if (status[action.key] === "loading") return;
    // The first deploy fails on purpose; a retry succeeds.
    const outcome = status[action.key] === "error" ? "success" : action.outcome;
    setStatus((prev) => ({ ...prev, [action.key]: "loading" }));
    setAnnouncement(`${action.label} started`);
    timers.current.push(
      setTimeout(() => {
        setStatus((prev) => ({ ...prev, [action.key]: outcome }));
        setAnnouncement(outcome === "success" ? action.success : action.error);
      }, 1400),
    );
  }

  function handleOpenChange(next: boolean) {
    setOpen(next);
    if (next) {
      // Drop results still pending from the last visit so they cannot land
      // on the freshly reset menu.
      timers.current.forEach(clearTimeout);
      timers.current.length = 0;
      setStatus(initialStatus);
    }
  }

  const busy = Object.values(status).some((value) => value === "loading");

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <ContextMenu open={open} onOpenChange={handleOpenChange}>
        <ContextMenuTrigger
          onKeyDown={openMenuWithShiftF10}
          tabIndex={0}
          aria-label="acme-web project. Right-click or press Shift+F10 for project actions."
          className="flex items-center justify-between gap-3 rounded-lg border border-border bg-card p-4 outline-none focus-visible:ring-3 focus-visible:ring-ring/50 data-popup-open:border-ring"
        >
          <div className="min-w-0">
            <p className="truncate text-sm font-medium">acme-web</p>
            <p className="truncate text-xs text-muted-foreground">
              main · last deploy 3 hours ago
            </p>
          </div>
          <span className="shrink-0 text-xs text-muted-foreground">
            {open ? (busy ? "Working…" : "Menu open") : "Right-click"}
          </span>
        </ContextMenuTrigger>
        <ContextMenuContent className="w-64">
          <ContextMenuGroup>
            <ContextMenuLabel>Project actions</ContextMenuLabel>
            {actions.map((action) => {
              const state = status[action.key];
              const Icon = action.icon;
              return (
                <ContextMenuItem
                  key={action.key}
                  closeOnClick={false}
                  label={action.label}
                  aria-busy={state === "loading"}
                  onClick={() => run(action)}
                  className="items-start py-1.5"
                >
                  <span className="mt-0.5 flex size-4 items-center justify-center">
                    {state === "loading" ? (
                      <Spinner aria-hidden="true" />
                    ) : state === "success" ? (
                      <Check aria-hidden="true" className="text-success" />
                    ) : state === "error" ? (
                      <AlertCircle
                        aria-hidden="true"
                        className="text-destructive"
                      />
                    ) : (
                      <Icon aria-hidden="true" />
                    )}
                  </span>
                  <span className="flex min-w-0 flex-1 flex-col">
                    <span>{action.label}</span>
                    {state === "loading" && (
                      <span className="text-xs text-muted-foreground">
                        Running…
                      </span>
                    )}
                    {state === "success" && (
                      <span className="text-xs text-muted-foreground">
                        {action.success}
                      </span>
                    )}
                    {state === "error" && (
                      <span className="text-xs text-destructive">
                        {action.error} · Click to retry
                      </span>
                    )}
                  </span>
                </ContextMenuItem>
              );
            })}
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <ContextMenuItem onClick={() => setOpen(false)}>
            Done
            <ContextMenuShortcut>Esc</ContextMenuShortcut>
          </ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
      <p className="sr-only" aria-live="polite">
        {announcement}
      </p>
      <p className="text-xs text-muted-foreground">
        Actions keep the menu open and report progress inline.
      </p>
    </div>
  );
}

TSX
"use client";

import { Copy, Mail, ShieldCheck, UserMinus } from "lucide-react";
import * as React from "react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

// macOS browsers never turn Shift+F10 into a contextmenu event (Windows and
// Linux do), so the shortcut the hint advertises is forwarded by hand there.
function openMenuWithShiftF10(event: React.KeyboardEvent<HTMLElement>) {
  if (event.key !== "F10" || !event.shiftKey) return;
  if (!/Mac|iPhone|iPad/.test(navigator.userAgent)) return;
  event.preventDefault();
  const rect = event.currentTarget.getBoundingClientRect();
  event.currentTarget.dispatchEvent(
    new MouseEvent("contextmenu", {
      bubbles: true,
      cancelable: true,
      clientX: rect.left + 8,
      clientY: rect.top + 8,
    }),
  );
}

type Role = "Owner" | "Admin" | "Member" | "Viewer";

type Member = {
  id: string;
  name: string;
  email: string;
  initials: string;
  role: Role;
  pending: boolean;
};

const roles: { value: Role; description: string }[] = [
  { value: "Admin", description: "Billing and members" },
  { value: "Member", description: "Create and edit projects" },
  { value: "Viewer", description: "Read-only access" },
];

const initialMembers: Member[] = [
  {
    id: "maya",
    name: "Maya Chen",
    email: "maya@northwind.io",
    initials: "MC",
    role: "Owner",
    pending: false,
  },
  {
    id: "jonas",
    name: "Jonas Weber",
    email: "jonas@northwind.io",
    initials: "JW",
    role: "Admin",
    pending: false,
  },
  {
    id: "priya",
    name: "Priya Raman",
    email: "priya@northwind.io",
    initials: "PR",
    role: "Member",
    pending: false,
  },
  {
    id: "leo",
    name: "Leo Martins",
    email: "leo@contractor.dev",
    initials: "LM",
    role: "Viewer",
    pending: true,
  },
];

export default function ContextMenu08() {
  const [members, setMembers] = React.useState(initialMembers);
  const [notice, setNotice] = React.useState("");

  function setRole(id: string, role: Role) {
    setMembers((current) =>
      current.map((member) =>
        member.id === id ? { ...member, role } : member,
      ),
    );
  }

  return (
    <section
      aria-labelledby="context-menu-08-title"
      className="w-full max-w-md rounded-xl border bg-card text-card-foreground"
    >
      <header className="border-b px-4 py-3">
        <h3 id="context-menu-08-title" className="text-sm font-semibold">
          Team members
        </h3>
        <p className="text-xs text-muted-foreground">
          Right-click a member to change their role or access.
        </p>
      </header>
      <ul className="divide-y">
        {members.map((member) => {
          const isOwner = member.role === "Owner";
          return (
            <li key={member.id}>
              <ContextMenu>
                <ContextMenuTrigger
                  onKeyDown={openMenuWithShiftF10}
                  tabIndex={0}
                  aria-label={`${member.name}, ${member.role}${member.pending ? ", invitation pending" : ""}`}
                  className="flex items-center gap-3 px-4 py-3 outline-none transition-colors hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset data-popup-open:bg-muted/60"
                >
                  <Avatar>
                    <AvatarFallback>{member.initials}</AvatarFallback>
                  </Avatar>
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm font-medium">
                      {member.name}
                    </p>
                    <p className="truncate text-xs text-muted-foreground">
                      {member.email}
                    </p>
                  </div>
                  {member.pending ? (
                    <Badge variant="outline" className="hidden sm:inline-flex">
                      Invited
                    </Badge>
                  ) : null}
                  <Badge variant={isOwner ? "default" : "secondary"}>
                    {member.role}
                  </Badge>
                </ContextMenuTrigger>
                <ContextMenuContent className="w-60">
                  <ContextMenuGroup>
                    <ContextMenuLabel className="truncate">
                      {member.name}
                    </ContextMenuLabel>
                    <ContextMenuSub>
                      <ContextMenuSubTrigger disabled={isOwner}>
                        <ShieldCheck aria-hidden="true" />
                        Change role
                      </ContextMenuSubTrigger>
                      <ContextMenuSubContent className="w-56">
                        <ContextMenuRadioGroup
                          value={member.role}
                          onValueChange={(value) => {
                            setRole(member.id, value as Role);
                            setNotice(`${member.name} is now ${value}.`);
                          }}
                        >
                          {roles.map((role) => (
                            <ContextMenuRadioItem
                              key={role.value}
                              value={role.value}
                            >
                              <span className="flex flex-col">
                                <span>{role.value}</span>
                                <span className="text-xs text-muted-foreground">
                                  {role.description}
                                </span>
                              </span>
                            </ContextMenuRadioItem>
                          ))}
                        </ContextMenuRadioGroup>
                      </ContextMenuSubContent>
                    </ContextMenuSub>
                    <ContextMenuItem
                      onClick={() => {
                        void navigator.clipboard
                          ?.writeText(member.email)
                          .catch(() => {});
                        setNotice(`Copied ${member.email} to clipboard.`);
                      }}
                    >
                      <Copy aria-hidden="true" />
                      Copy email
                    </ContextMenuItem>
                    {member.pending ? (
                      <ContextMenuItem
                        onClick={() =>
                          setNotice(`Invitation resent to ${member.email}.`)
                        }
                      >
                        <Mail aria-hidden="true" />
                        Resend invitation
                      </ContextMenuItem>
                    ) : null}
                  </ContextMenuGroup>
                  <ContextMenuSeparator />
                  <ContextMenuItem
                    variant="destructive"
                    disabled={isOwner}
                    onClick={() => {
                      setMembers((current) =>
                        current.filter((item) => item.id !== member.id),
                      );
                      setNotice(`${member.name} was removed from the team.`);
                    }}
                  >
                    <UserMinus aria-hidden="true" />
                    {member.pending ? "Revoke invitation" : "Remove from team"}
                  </ContextMenuItem>
                </ContextMenuContent>
              </ContextMenu>
            </li>
          );
        })}
      </ul>
      <footer
        aria-live="polite"
        className="min-h-10 border-t px-4 py-2.5 text-xs text-muted-foreground"
      >
        {notice || "Owners can't be demoted or removed."}
      </footer>
    </section>
  );
}

TSX
"use client";

import {
  Archive,
  AtSign,
  BellOff,
  Clock,
  GitPullRequest,
  MailCheck,
  MailOpen,
  MessageSquare,
  RotateCcw,
} from "lucide-react";
import * as React from "react";

import { Button } from "@/components/ui/button";
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

// macOS browsers never turn Shift+F10 into a contextmenu event (Windows and
// Linux do), so the shortcut the hint advertises is forwarded by hand there.
function openMenuWithShiftF10(event: React.KeyboardEvent<HTMLElement>) {
  if (event.key !== "F10" || !event.shiftKey) return;
  if (!/Mac|iPhone|iPad/.test(navigator.userAgent)) return;
  event.preventDefault();
  const rect = event.currentTarget.getBoundingClientRect();
  event.currentTarget.dispatchEvent(
    new MouseEvent("contextmenu", {
      bubbles: true,
      cancelable: true,
      clientX: rect.left + 8,
      clientY: rect.top + 8,
    }),
  );
}

type Notice = {
  id: string;
  icon: typeof AtSign;
  title: string;
  detail: string;
  time: string;
  thread: string;
  unread: boolean;
  snoozedUntil?: string;
};

const snoozeOptions = [
  "In 1 hour",
  "This evening",
  "Tomorrow morning",
  "Next week",
];

const initialNotices: Notice[] = [
  {
    id: "n1",
    icon: AtSign,
    title: "Amara mentioned you in Pricing page copy",
    detail: "“Can you confirm the annual discount is still 20%?”",
    time: "4m",
    thread: "Pricing page copy",
    unread: true,
  },
  {
    id: "n2",
    icon: GitPullRequest,
    title: "Review requested on PR 482",
    detail: "fix(billing): prorate seat changes mid-cycle",
    time: "32m",
    thread: "PR 482",
    unread: true,
  },
  {
    id: "n3",
    icon: MessageSquare,
    title: "Theo replied in Onboarding checklist",
    detail: "“Shipped the empty state, screenshots in thread.”",
    time: "2h",
    thread: "Onboarding checklist",
    unread: false,
  },
];

export default function ContextMenu09() {
  const [notices, setNotices] = React.useState(initialNotices);
  const [muted, setMuted] = React.useState<string[]>([]);
  const unreadCount = notices.filter(
    (notice) => notice.unread && !notice.snoozedUntil,
  ).length;

  function patch(id: string, next: Partial<Notice>) {
    setNotices((current) =>
      current.map((notice) =>
        notice.id === id ? { ...notice, ...next } : notice,
      ),
    );
  }

  return (
    <section
      aria-labelledby="context-menu-09-title"
      className="w-full max-w-sm overflow-hidden rounded-xl border bg-popover text-popover-foreground shadow-sm"
    >
      <header className="flex items-center justify-between gap-2 border-b px-4 py-3">
        <h3 id="context-menu-09-title" className="text-sm font-semibold">
          Notifications
          <span className="ml-2 text-xs font-normal whitespace-nowrap text-muted-foreground tabular-nums">
            {unreadCount} unread
          </span>
        </h3>
        <Button
          variant="ghost"
          size="sm"
          disabled={unreadCount === 0}
          onClick={() =>
            setNotices((current) =>
              current.map((notice) => ({ ...notice, unread: false })),
            )
          }
        >
          <MailCheck aria-hidden="true" />
          Mark all read
        </Button>
      </header>
      {notices.length === 0 ? (
        <div className="flex flex-col items-center gap-3 px-4 py-10 text-center">
          <p className="text-sm text-muted-foreground">You're all caught up.</p>
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              setNotices(initialNotices);
              setMuted([]);
            }}
          >
            <RotateCcw aria-hidden="true" />
            Restore archived
          </Button>
        </div>
      ) : (
        <ul className="divide-y">
          {notices.map((notice) => {
            const Icon = notice.icon;
            const isMuted = muted.includes(notice.thread);
            return (
              <li key={notice.id}>
                <ContextMenu>
                  <ContextMenuTrigger
                    onKeyDown={openMenuWithShiftF10}
                    tabIndex={0}
                    aria-label={`${notice.unread ? "Unread: " : ""}${notice.title}, ${notice.time} ago`}
                    className="flex gap-3 px-4 py-3 outline-none transition-colors hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset data-popup-open:bg-muted/60"
                  >
                    <span className="relative mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full bg-muted">
                      <Icon
                        aria-hidden="true"
                        className="size-4 text-muted-foreground"
                      />
                      {notice.unread && !notice.snoozedUntil ? (
                        <span
                          aria-hidden="true"
                          className="absolute -top-0.5 -right-0.5 size-2.5 rounded-full bg-primary ring-2 ring-popover"
                        />
                      ) : null}
                    </span>
                    <div className="min-w-0 flex-1">
                      <p
                        className={
                          notice.unread
                            ? "text-sm font-medium"
                            : "text-sm text-muted-foreground"
                        }
                      >
                        {notice.title}
                      </p>
                      <p className="mt-0.5 truncate text-xs text-muted-foreground">
                        {notice.detail}
                      </p>
                      {notice.snoozedUntil || isMuted ? (
                        <p className="mt-1.5 flex flex-wrap gap-x-3 text-xs text-muted-foreground">
                          {notice.snoozedUntil ? (
                            <span className="inline-flex items-center gap-1">
                              <Clock aria-hidden="true" className="size-3" />
                              Snoozed · {notice.snoozedUntil}
                            </span>
                          ) : null}
                          {isMuted ? (
                            <span className="inline-flex items-center gap-1">
                              <BellOff aria-hidden="true" className="size-3" />
                              Thread muted
                            </span>
                          ) : null}
                        </p>
                      ) : null}
                    </div>
                    <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
                      {notice.time}
                    </span>
                  </ContextMenuTrigger>
                  <ContextMenuContent className="w-56">
                    <ContextMenuItem
                      onClick={() =>
                        patch(notice.id, { unread: !notice.unread })
                      }
                    >
                      {notice.unread ? (
                        <MailCheck aria-hidden="true" />
                      ) : (
                        <MailOpen aria-hidden="true" />
                      )}
                      {notice.unread ? "Mark as read" : "Mark as unread"}
                      <ContextMenuShortcut>U</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuSub>
                      <ContextMenuSubTrigger>
                        <Clock aria-hidden="true" />
                        Snooze
                      </ContextMenuSubTrigger>
                      <ContextMenuSubContent className="w-44">
                        {snoozeOptions.map((option) => (
                          <ContextMenuItem
                            key={option}
                            onClick={() =>
                              patch(notice.id, { snoozedUntil: option })
                            }
                          >
                            {option}
                          </ContextMenuItem>
                        ))}
                        {notice.snoozedUntil ? (
                          <>
                            <ContextMenuSeparator />
                            <ContextMenuItem
                              onClick={() =>
                                patch(notice.id, { snoozedUntil: undefined })
                              }
                            >
                              Unsnooze
                            </ContextMenuItem>
                          </>
                        ) : null}
                      </ContextMenuSubContent>
                    </ContextMenuSub>
                    <ContextMenuCheckboxItem
                      checked={isMuted}
                      onCheckedChange={(checked) =>
                        setMuted((current) =>
                          checked
                            ? [...current, notice.thread]
                            : current.filter((t) => t !== notice.thread),
                        )
                      }
                    >
                      <BellOff aria-hidden="true" />
                      Mute this thread
                    </ContextMenuCheckboxItem>
                    <ContextMenuSeparator />
                    <ContextMenuItem
                      onClick={() =>
                        setNotices((current) =>
                          current.filter((item) => item.id !== notice.id),
                        )
                      }
                    >
                      <Archive aria-hidden="true" />
                      Archive
                      <ContextMenuShortcut>E</ContextMenuShortcut>
                    </ContextMenuItem>
                  </ContextMenuContent>
                </ContextMenu>
              </li>
            );
          })}
        </ul>
      )}
    </section>
  );
}