Implement the 010-ui-baseline feature that establishes a modern UI using Tailwind CSS v4 and shadcn/ui-style components for the encounter screen

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

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

@@ -0,0 +1,246 @@
+import type { CombatantId } from "@initiative/domain";
+import { X } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+interface Combatant {
+	readonly id: CombatantId;
+	readonly name: string;
+	readonly initiative?: number;
+	readonly maxHp?: number;
+	readonly currentHp?: number;
+}
+
+interface CombatantRowProps {
+	combatant: Combatant;
+	isActive: boolean;
+	onRename: (id: CombatantId, newName: string) => void;
+	onSetInitiative: (id: CombatantId, value: number | undefined) => void;
+	onRemove: (id: CombatantId) => void;
+	onSetHp: (id: CombatantId, maxHp: number | undefined) => void;
+	onAdjustHp: (id: CombatantId, delta: number) => void;
+}
+
+function EditableName({
+	name,
+	combatantId,
+	onRename,
+}: {
+	name: string;
+	combatantId: CombatantId;
+	onRename: (id: CombatantId, newName: string) => void;
+}) {
+	const [editing, setEditing] = useState(false);
+	const [draft, setDraft] = useState(name);
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const commit = useCallback(() => {
+		const trimmed = draft.trim();
+		if (trimmed !== "" && trimmed !== name) {
+			onRename(combatantId, trimmed);
+		}
+		setEditing(false);
+	}, [draft, name, combatantId, onRename]);
+
+	const startEditing = useCallback(() => {
+		setDraft(name);
+		setEditing(true);
+		requestAnimationFrame(() => inputRef.current?.select());
+	}, [name]);
+
+	if (editing) {
+		return (
+			<Input
+				ref={inputRef}
+				type="text"
+				value={draft}
+				className="h-7 text-sm"
+				onChange={(e) => setDraft(e.target.value)}
+				onBlur={commit}
+				onKeyDown={(e) => {
+					if (e.key === "Enter") commit();
+					if (e.key === "Escape") setEditing(false);
+				}}
+			/>
+		);
+	}
+
+	return (
+		<button
+			type="button"
+			onClick={startEditing}
+			className="truncate text-left text-sm text-foreground hover:text-primary transition-colors"
+		>
+			{name}
+		</button>
+	);
+}
+
+function MaxHpInput({
+	maxHp,
+	onCommit,
+}: {
+	maxHp: number | undefined;
+	onCommit: (value: number | undefined) => void;
+}) {
+	const [draft, setDraft] = useState(maxHp?.toString() ?? "");
+	const prev = useRef(maxHp);
+
+	if (maxHp !== prev.current) {
+		prev.current = maxHp;
+		setDraft(maxHp?.toString() ?? "");
+	}
+
+	const commit = useCallback(() => {
+		if (draft === "") {
+			onCommit(undefined);
+			return;
+		}
+		const n = Number.parseInt(draft, 10);
+		if (!Number.isNaN(n) && n >= 1) {
+			onCommit(n);
+		} else {
+			setDraft(maxHp?.toString() ?? "");
+		}
+	}, [draft, maxHp, onCommit]);
+
+	return (
+		<Input
+			type="text"
+			inputMode="numeric"
+			value={draft}
+			placeholder="Max"
+			className="h-7 w-[7ch] text-center text-sm tabular-nums"
+			onChange={(e) => setDraft(e.target.value)}
+			onBlur={commit}
+			onKeyDown={(e) => {
+				if (e.key === "Enter") commit();
+			}}
+		/>
+	);
+}
+
+function CurrentHpInput({
+	currentHp,
+	maxHp,
+	onCommit,
+}: {
+	currentHp: number | undefined;
+	maxHp: number | undefined;
+	onCommit: (value: number) => void;
+}) {
+	const [draft, setDraft] = useState(currentHp?.toString() ?? "");
+	const prev = useRef(currentHp);
+
+	if (currentHp !== prev.current) {
+		prev.current = currentHp;
+		setDraft(currentHp?.toString() ?? "");
+	}
+
+	const commit = useCallback(() => {
+		if (currentHp === undefined) return;
+		if (draft === "") {
+			setDraft(currentHp.toString());
+			return;
+		}
+		const n = Number.parseInt(draft, 10);
+		if (!Number.isNaN(n)) {
+			onCommit(n);
+		} else {
+			setDraft(currentHp.toString());
+		}
+	}, [draft, currentHp, onCommit]);
+
+	return (
+		<Input
+			type="text"
+			inputMode="numeric"
+			value={draft}
+			placeholder="HP"
+			disabled={maxHp === undefined}
+			className="h-7 w-[7ch] text-center text-sm tabular-nums"
+			onChange={(e) => setDraft(e.target.value)}
+			onBlur={commit}
+			onKeyDown={(e) => {
+				if (e.key === "Enter") commit();
+			}}
+		/>
+	);
+}
+
+export function CombatantRow({
+	combatant,
+	isActive,
+	onRename,
+	onSetInitiative,
+	onRemove,
+	onSetHp,
+	onAdjustHp,
+}: CombatantRowProps) {
+	const { id, name, initiative, maxHp, currentHp } = combatant;
+
+	return (
+		<div
+			className={cn(
+				"grid grid-cols-[3rem_1fr_auto_2rem] items-center gap-3 rounded-md px-3 py-2 transition-colors",
+				isActive
+					? "border-l-2 border-l-accent bg-accent/10"
+					: "border-l-2 border-l-transparent",
+			)}
+		>
+			{/* 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} />
+
+			{/* HP */}
+			<div className="flex items-center gap-1">
+				<CurrentHpInput
+					currentHp={currentHp}
+					maxHp={maxHp}
+					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)} />
+			</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>
+	);
+}