Implement the 014-inline-hp-delta feature that replaces the damage/heal mode toggle with explicit action buttons and Enter-to-damage keyboard shortcut

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

apps/web/src/components/quick-hp-input.tsx

@@ -5,8 +5,6 @@ import { cn } from "../lib/utils";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 
-type Mode = "damage" | "heal";
-
 interface QuickHpInputProps {
 	readonly combatantId: CombatantId;
 	readonly disabled?: boolean;
@@ -18,75 +16,46 @@ export function QuickHpInput({
 	disabled,
 	onAdjustHp,
 }: QuickHpInputProps) {
-	const [mode, setMode] = useState<Mode>("damage");
 	const [inputValue, setInputValue] = useState("");
 	const inputRef = useRef<HTMLInputElement>(null);
 
-	const apply = useCallback(() => {
-		if (inputValue === "") return;
-		const n = Number.parseInt(inputValue, 10);
-		if (Number.isNaN(n) || n <= 0) return;
-		const delta = mode === "damage" ? -n : n;
-		onAdjustHp(combatantId, delta);
-		setInputValue("");
-	}, [inputValue, mode, combatantId, onAdjustHp]);
+	const parsedValue =
+		inputValue === "" ? null : Number.parseInt(inputValue, 10);
+	const isValid =
+		parsedValue !== null && !Number.isNaN(parsedValue) && parsedValue > 0;
 
-	const toggleMode = useCallback(() => {
-		setMode((m) => (m === "damage" ? "heal" : "damage"));
-	}, []);
+	const applyDelta = useCallback(
+		(sign: -1 | 1) => {
+			if (inputValue === "") return;
+			const n = Number.parseInt(inputValue, 10);
+			if (Number.isNaN(n) || n <= 0) return;
+			onAdjustHp(combatantId, sign * n);
+			setInputValue("");
+		},
+		[inputValue, combatantId, onAdjustHp],
+	);
 
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLInputElement>) => {
 			if (e.key === "Enter") {
-				apply();
+				applyDelta(-1);
 			} else if (e.key === "Escape") {
 				setInputValue("");
-			} else if (e.key === "Tab") {
-				e.preventDefault();
-				toggleMode();
 			}
 		},
-		[apply, toggleMode],
+		[applyDelta],
 	);
 
-	const isDamage = mode === "damage";
-
 	return (
 		<div className="flex items-center gap-0.5">
-			<Button
-				type="button"
-				variant="ghost"
-				size="icon"
-				disabled={disabled}
-				className={cn(
-					"h-7 w-7 shrink-0",
-					isDamage
-						? "text-red-400 hover:bg-red-950 hover:text-red-300"
-						: "text-emerald-400 hover:bg-emerald-950 hover:text-emerald-300",
-				)}
-				onClick={toggleMode}
-				title={
-					isDamage
-						? "Damage mode (click to switch to heal)"
-						: "Heal mode (click to switch to damage)"
-				}
-				aria-label={isDamage ? "Switch to heal mode" : "Switch to damage mode"}
-			>
-				{isDamage ? <Sword size={14} /> : <Heart size={14} />}
-			</Button>
 			<Input
 				ref={inputRef}
 				type="text"
 				inputMode="numeric"
 				disabled={disabled}
 				value={inputValue}
-				placeholder={isDamage ? "Dmg" : "Heal"}
-				className={cn(
-					"h-7 w-[7ch] text-center text-sm tabular-nums",
-					isDamage
-						? "focus-visible:ring-red-500/50"
-						: "focus-visible:ring-emerald-500/50",
-				)}
+				placeholder="±HP"
+				className="h-7 w-[7ch] text-center text-sm tabular-nums"
 				onChange={(e) => {
 					const v = e.target.value;
 					if (v === "" || /^\d+$/.test(v)) {
@@ -95,6 +64,36 @@ export function QuickHpInput({
 				}}
 				onKeyDown={handleKeyDown}
 			/>
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon"
+				disabled={disabled || !isValid}
+				className={cn(
+					"h-7 w-7 shrink-0",
+					"text-red-400 hover:bg-red-950 hover:text-red-300",
+				)}
+				onClick={() => applyDelta(-1)}
+				title="Apply damage"
+				aria-label="Apply damage"
+			>
+				<Sword size={14} />
+			</Button>
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon"
+				disabled={disabled || !isValid}
+				className={cn(
+					"h-7 w-7 shrink-0",
+					"text-emerald-400 hover:bg-emerald-950 hover:text-emerald-300",
+				)}
+				onClick={() => applyDelta(1)}
+				title="Apply healing"
+				aria-label="Apply healing"
+			>
+				<Heart size={14} />
+			</Button>
 		</div>
 	);
 }