Implement the 017-combat-conditions feature that adds D&D 5e status conditions to combatants with icon tags, color coding, and a compact toggle picker in the encounter tracker

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/components/combatant-row.tsx

@@ -1,7 +1,13 @@
-import { type CombatantId, deriveHpStatus } from "@initiative/domain";
+import {
+	type CombatantId,
+	type ConditionId,
+	deriveHpStatus,
+} from "@initiative/domain";
 import { Shield, X } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 import { cn } from "../lib/utils";
+import { ConditionPicker } from "./condition-picker";
+import { ConditionTags } from "./condition-tags";
 import { QuickHpInput } from "./quick-hp-input";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
@@ -13,6 +19,7 @@ interface Combatant {
 	readonly maxHp?: number;
 	readonly currentHp?: number;
 	readonly ac?: number;
+	readonly conditions?: readonly ConditionId[];
 }
 
 interface CombatantRowProps {
@@ -24,6 +31,7 @@ interface CombatantRowProps {
 	onSetHp: (id: CombatantId, maxHp: number | undefined) => void;
 	onAdjustHp: (id: CombatantId, delta: number) => void;
 	onSetAc: (id: CombatantId, value: number | undefined) => void;
+	onToggleCondition: (id: CombatantId, conditionId: ConditionId) => void;
 }
 
 function EditableName({
@@ -231,81 +239,103 @@ export function CombatantRow({
 	onSetHp,
 	onAdjustHp,
 	onSetAc,
+	onToggleCondition,
 }: CombatantRowProps) {
 	const { id, name, initiative, maxHp, currentHp } = combatant;
 	const status = deriveHpStatus(currentHp, maxHp);
+	const [pickerOpen, setPickerOpen] = useState(false);
 
 	return (
 		<div
 			className={cn(
-				"grid grid-cols-[3rem_1fr_auto_auto_2rem] items-center gap-3 rounded-md px-3 py-2 transition-colors",
+				"rounded-md px-3 py-2 transition-colors",
 				isActive
 					? "border-l-2 border-l-accent bg-accent/10"
 					: "border-l-2 border-l-transparent",
 				status === "unconscious" && "opacity-50",
 			)}
 		>
-			{/* Initiative */}
-			<Input
-				type="text"
-				inputMode="numeric"
-				value={initiative ?? ""}
-				placeholder="--"
-				className="h-7 w-[6ch] text-center text-sm tabular-nums"
-				onChange={(e) => {
-					const raw = e.target.value;
-					if (raw === "") {
-						onSetInitiative(id, undefined);
-					} else {
-						const n = Number.parseInt(raw, 10);
-						if (!Number.isNaN(n)) {
-							onSetInitiative(id, n);
+			<div className="grid grid-cols-[3rem_1fr_auto_auto_2rem] items-center gap-3">
+				{/* Initiative */}
+				<Input
+					type="text"
+					inputMode="numeric"
+					value={initiative ?? ""}
+					placeholder="--"
+					className="h-7 w-[6ch] text-center text-sm tabular-nums"
+					onChange={(e) => {
+						const raw = e.target.value;
+						if (raw === "") {
+							onSetInitiative(id, undefined);
+						} else {
+							const n = Number.parseInt(raw, 10);
+							if (!Number.isNaN(n)) {
+								onSetInitiative(id, n);
+							}
 						}
-					}
-				}}
-			/>
-
-			{/* Name */}
-			<EditableName name={name} combatantId={id} onRename={onRename} />
-
-			{/* AC */}
-			<AcInput ac={combatant.ac} onCommit={(v) => onSetAc(id, v)} />
-
-			{/* HP */}
-			<div className="flex items-center gap-1">
-				<CurrentHpInput
-					currentHp={currentHp}
-					maxHp={maxHp}
-					className={cn(
-						status === "bloodied" && "text-amber-400",
-						status === "unconscious" && "text-red-400",
-					)}
-					onCommit={(value) => {
-						if (currentHp === undefined) return;
-						const delta = value - currentHp;
-						if (delta !== 0) onAdjustHp(id, delta);
 					}}
 				/>
-				{maxHp !== undefined && (
-					<span className="text-sm tabular-nums text-muted-foreground">/</span>
-				)}
-				<MaxHpInput maxHp={maxHp} onCommit={(v) => onSetHp(id, v)} />
-				{maxHp !== undefined && (
-					<QuickHpInput combatantId={id} onAdjustHp={onAdjustHp} />
-				)}
+
+				{/* Name */}
+				<EditableName name={name} combatantId={id} onRename={onRename} />
+
+				{/* AC */}
+				<AcInput ac={combatant.ac} onCommit={(v) => onSetAc(id, v)} />
+
+				{/* HP */}
+				<div className="flex items-center gap-1">
+					<CurrentHpInput
+						currentHp={currentHp}
+						maxHp={maxHp}
+						className={cn(
+							status === "bloodied" && "text-amber-400",
+							status === "unconscious" && "text-red-400",
+						)}
+						onCommit={(value) => {
+							if (currentHp === undefined) return;
+							const delta = value - currentHp;
+							if (delta !== 0) onAdjustHp(id, delta);
+						}}
+					/>
+					{maxHp !== undefined && (
+						<span className="text-sm tabular-nums text-muted-foreground">
+							/
+						</span>
+					)}
+					<MaxHpInput maxHp={maxHp} onCommit={(v) => onSetHp(id, v)} />
+					{maxHp !== undefined && (
+						<QuickHpInput combatantId={id} onAdjustHp={onAdjustHp} />
+					)}
+				</div>
+
+				{/* Actions */}
+				<Button
+					variant="ghost"
+					size="icon"
+					className="h-7 w-7 text-muted-foreground hover:text-destructive"
+					onClick={() => onRemove(id)}
+					title="Remove combatant"
+					aria-label="Remove combatant"
+				>
+					<X size={16} />
+				</Button>
 			</div>
 
-			{/* Actions */}
-			<Button
-				variant="ghost"
-				size="icon"
-				className="h-7 w-7 text-muted-foreground hover:text-destructive"
-				onClick={() => onRemove(id)}
-				title="Remove combatant"
-				aria-label="Remove combatant"
-			>
-				<X size={16} />
-			</Button>
+			{/* Conditions */}
+			<div className="relative ml-[calc(3rem+0.75rem)]">
+				<ConditionTags
+					conditions={combatant.conditions}
+					onRemove={(conditionId) => onToggleCondition(id, conditionId)}
+					onOpenPicker={() => setPickerOpen((prev) => !prev)}
+				/>
+				{pickerOpen && (
+					<ConditionPicker
+						activeConditions={combatant.conditions}
+						onToggle={(conditionId) => onToggleCondition(id, conditionId)}
+						onClose={() => setPickerOpen(false)}
+					/>
+				)}
+			</div>
 		</div>
 	);
 }