initiative/specs/014-inline-hp-delta/quickstart.md

Quickstart: Inline HP Delta Input

What changes

One file: apps/web/src/components/quick-hp-input.tsx

The QuickHpInput component is refactored from a mode-toggle design to an explicit-button design:

Before (011-quick-hp-input):

• Mode toggle button (Sword/Heart icon) + numeric input
• User switches mode, then types number, then presses Enter
• Mode state determines whether delta is positive or negative

After (014-inline-hp-delta):

• Numeric input + damage button (Sword) + heal button (Heart)
• Enter key always applies damage (negative delta)
• Damage button applies damage (negative delta)
• Heal button applies healing (positive delta)
• No mode state

How to implement

1. Remove the mode state variable and the toggle button
2. Replace with two action buttons (damage + heal) alongside the input
3. Enter key handler calls onAdjustHp(combatantId, -n) (always damage)
4. Damage button calls onAdjustHp(combatantId, -n)
5. Heal button calls onAdjustHp(combatantId, +n)
6. Remove Tab key override (restore default browser behavior)
7. Clear input after any successful apply

How to verify

pnpm check    # Must pass (knip + format + lint + typecheck + test)

Manual verification:

1. Set a combatant's max HP to 20 (currentHp initializes to 20)
2. Type 7 in the delta input, press Enter → HP should show 13
3. Type 5 in the delta input, click heal button → HP should show 18
4. Type 3 in the delta input, click damage button → HP should show 15
5. Verify input clears after each action
6. Verify no mode toggle exists in the UI