Add advantage/disadvantage rolling for initiative

Right-click or long-press the d20 button (per-combatant or Roll All)
to open a context menu with Advantage and Disadvantage options.
Normal left-click behavior is unchanged.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/components/action-bar.tsx

@@ -1,4 +1,4 @@
-import type { PlayerCharacter } from "@initiative/domain";
+import type { PlayerCharacter, RollMode } from "@initiative/domain";
 import {
 	Check,
 	Eye,
@@ -12,11 +12,18 @@ import {
 	Sun,
 	Users,
 } from "lucide-react";
-import React, { type RefObject, useDeferredValue, useState } from "react";
+import React, {
+	type RefObject,
+	useCallback,
+	useDeferredValue,
+	useState,
+} from "react";
 import type { SearchResult } from "../hooks/use-bestiary.js";
+import { useLongPress } from "../hooks/use-long-press.js";
 import { cn } from "../lib/utils.js";
 import { D20Icon } from "./d20-icon.js";
 import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map";
+import { RollModeMenu } from "./roll-mode-menu.js";
 import { Button } from "./ui/button.js";
 import { Input } from "./ui/input.js";
 import { OverflowMenu, type OverflowMenuItem } from "./ui/overflow-menu.js";
@@ -41,7 +48,7 @@ interface ActionBarProps {
 	playerCharacters?: readonly PlayerCharacter[];
 	onAddFromPlayerCharacter?: (pc: PlayerCharacter) => void;
 	onManagePlayers?: () => void;
-	onRollAllInitiative?: () => void;
+	onRollAllInitiative?: (mode?: RollMode) => void;
 	showRollAllInitiative?: boolean;
 	rollAllInitiativeDisabled?: boolean;
 	onOpenSourceManager?: () => void;
@@ -479,6 +486,25 @@ export function ActionBar({
 		clearCustomFields();
 	};
 
+	const [rollAllMenuPos, setRollAllMenuPos] = useState<{
+		x: number;
+		y: number;
+	} | null>(null);
+
+	const openRollAllMenu = useCallback((x: number, y: number) => {
+		setRollAllMenuPos({ x, y });
+	}, []);
+
+	const rollAllLongPress = useLongPress(
+		useCallback(
+			(e: React.TouchEvent) => {
+				const touch = e.touches[0];
+				if (touch) openRollAllMenu(touch.clientX, touch.clientY);
+			},
+			[openRollAllMenu],
+		),
+	);
+
 	const overflowItems = buildOverflowItems({
 		onManagePlayers,
 		onOpenSourceManager,
@@ -607,18 +633,32 @@ export function ActionBar({
 					<Button type="submit">Add</Button>
 				)}
 				{showRollAllInitiative && !!onRollAllInitiative && (
-					<Button
-						type="button"
-						size="icon"
-						variant="ghost"
-						className="text-muted-foreground hover:text-hover-action"
-						onClick={onRollAllInitiative}
-						disabled={rollAllInitiativeDisabled}
-						title="Roll all initiative"
-						aria-label="Roll all initiative"
-					>
-						<D20Icon className="h-6 w-6" />
-					</Button>
+					<>
+						<Button
+							type="button"
+							size="icon"
+							variant="ghost"
+							className="text-muted-foreground hover:text-hover-action"
+							onClick={() => onRollAllInitiative()}
+							onContextMenu={(e) => {
+								e.preventDefault();
+								openRollAllMenu(e.clientX, e.clientY);
+							}}
+							{...rollAllLongPress}
+							disabled={rollAllInitiativeDisabled}
+							title="Roll all initiative"
+							aria-label="Roll all initiative"
+						>
+							<D20Icon className="h-6 w-6" />
+						</Button>
+						{!!rollAllMenuPos && (
+							<RollModeMenu
+								position={rollAllMenuPos}
+								onSelect={(mode) => onRollAllInitiative(mode)}
+								onClose={() => setRollAllMenuPos(null)}
+							/>
+						)}
+					</>
 				)}
 				{overflowItems.length > 0 && <OverflowMenu items={overflowItems} />}
 			</form>