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/action-bar.tsx

@@ -0,0 +1,39 @@
+import { type FormEvent, useState } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+interface ActionBarProps {
+	onAddCombatant: (name: string) => void;
+	onAdvanceTurn: () => void;
+}
+
+export function ActionBar({ onAddCombatant, onAdvanceTurn }: ActionBarProps) {
+	const [nameInput, setNameInput] = useState("");
+
+	const handleAdd = (e: FormEvent) => {
+		e.preventDefault();
+		if (nameInput.trim() === "") return;
+		onAddCombatant(nameInput);
+		setNameInput("");
+	};
+
+	return (
+		<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
+			<form onSubmit={handleAdd} className="flex flex-1 items-center gap-2">
+				<Input
+					type="text"
+					value={nameInput}
+					onChange={(e) => setNameInput(e.target.value)}
+					placeholder="Combatant name"
+					className="max-w-xs"
+				/>
+				<Button type="submit" size="sm">
+					Add
+				</Button>
+			</form>
+			<Button variant="outline" size="sm" onClick={onAdvanceTurn}>
+				Next Turn
+			</Button>
+		</div>
+	);
+}

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>
+	);
+}

apps/web/src/components/ui/button.tsx

@@ -0,0 +1,38 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				outline:
+					"border border-border bg-transparent hover:bg-card hover:text-foreground",
+				ghost: "hover:bg-card hover:text-foreground",
+			},
+			size: {
+				default: "h-9 px-4 py-2",
+				sm: "h-8 px-3 text-xs",
+				icon: "h-8 w-8",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+	VariantProps<typeof buttonVariants>;
+
+export function Button({ className, variant, size, ...props }: ButtonProps) {
+	return (
+		<button
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}

apps/web/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+import { cn } from "../../lib/utils";
+
+type InputProps = InputHTMLAttributes<HTMLInputElement>;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<input
+				ref={ref}
+				className={cn(
+					"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
+					className,
+				)}
+				{...props}
+			/>
+		);
+	},
+);