Implement the 004-edit-combatant feature that adds the possibility to change a combatants name

apps/web/src/App.tsx

@@ -1,4 +1,5 @@
-import { type FormEvent, useState } from "react";
+import type { CombatantId } from "@initiative/domain";
+import { type FormEvent, useCallback, useRef, useState } from "react";
 import { useEncounter } from "./hooks/use-encounter";
 
 function formatEvent(e: ReturnType<typeof useEncounter>["events"][number]) {
@@ -11,12 +12,72 @@ function formatEvent(e: ReturnType<typeof useEncounter>["events"][number]) {
 			return `Added combatant: ${e.name}`;
 		case "CombatantRemoved":
 			return `Removed combatant: ${e.name}`;
+		case "CombatantUpdated":
+			return `Renamed combatant: ${e.oldName} → ${e.newName}`;
 	}
 }
 
+function EditableName({
+	name,
+	combatantId,
+	isActive,
+	onRename,
+}: {
+	name: string;
+	combatantId: CombatantId;
+	isActive: boolean;
+	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}
+				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}>
+			{isActive ? `▶ ${name}` : name}
+		</button>
+	);
+}
+
 export function App() {
-	const { encounter, events, advanceTurn, addCombatant, removeCombatant } =
-		useEncounter();
+	const {
+		encounter,
+		events,
+		advanceTurn,
+		addCombatant,
+		removeCombatant,
+		editCombatant,
+	} = useEncounter();
 	const activeCombatant = encounter.combatants[encounter.activeIndex];
 	const [nameInput, setNameInput] = useState("");
 
@@ -40,7 +101,12 @@ export function App() {
 			<ul>
 				{encounter.combatants.map((c, i) => (
 					<li key={c.id}>
-						{i === encounter.activeIndex ? `▶ ${c.name}` : c.name}{" "}
+						<EditableName
+							name={c.name}
+							combatantId={c.id}
+							isActive={i === encounter.activeIndex}
+							onRename={editCombatant}
+						/>{" "}
 						<button type="button" onClick={() => removeCombatant(c.id)}>
 							Remove
 						</button>

apps/web/src/hooks/use-encounter.ts

@@ -2,6 +2,7 @@ import type { EncounterStore } from "@initiative/application";
 import {
 	addCombatantUseCase,
 	advanceTurnUseCase,
+	editCombatantUseCase,
 	removeCombatantUseCase,
 } from "@initiative/application";
 import type { CombatantId, DomainEvent, Encounter } from "@initiative/domain";
@@ -78,11 +79,25 @@ export function useEncounter() {
 		[makeStore],
 	);
 
+	const editCombatant = useCallback(
+		(id: CombatantId, newName: string) => {
+			const result = editCombatantUseCase(makeStore(), id, newName);
+
+			if (isDomainError(result)) {
+				return;
+			}
+
+			setEvents((prev) => [...prev, ...result]);
+		},
+		[makeStore],
+	);
+
 	return {
 		encounter,
 		events,
 		advanceTurn,
 		addCombatant,
 		removeCombatant,
+		editCombatant,
 	} as const;
 }