Overhaul bottom bar: batch add, custom fields, stat block viewer
Unify the action bar into a single search input with inline bestiary dropdown. Clicking a dropdown entry queues it with +/- count controls and a confirm button; Enter or confirm adds N copies to combat. When no bestiary match exists, optional Init/AC/MaxHP fields appear for custom creatures. The eye icon opens a separate search dropdown to preview stat blocks without leaving the add flow. Fix batch-add bug where only the last creature got a creatureId by using store.save() instead of setEncounter() in addFromBestiary. Prevent dropdown buttons from stealing input focus so Enter confirms the queued batch. Remove the now-redundant BestiarySearch component. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
39
specs/036-bottombar-overhaul/quickstart.md
Normal file
39
specs/036-bottombar-overhaul/quickstart.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# Quickstart: Bottom Bar Overhaul
|
||||
|
||||
## Key Files to Modify
|
||||
|
||||
| File | Purpose |
|
||||
|------|---------|
|
||||
| `apps/web/src/components/action-bar.tsx` | Primary target: overhaul with batch queue, custom fields, stat block button |
|
||||
| `apps/web/src/hooks/use-encounter.ts` | Extend `addCombatant` to accept optional fields (initiative, AC, maxHp) |
|
||||
| `apps/web/src/App.tsx` | Wire stat block view callback to action bar |
|
||||
| `apps/web/src/components/bestiary-search.tsx` | Likely removable after merging into unified action bar flow |
|
||||
|
||||
## Key Files to Read (context)
|
||||
|
||||
| File | Why |
|
||||
|------|-----|
|
||||
| `packages/domain/src/types.ts` | Combatant type definition |
|
||||
| `packages/domain/src/add-combatant.ts` | Domain add function (not modified, but understand contract) |
|
||||
| `packages/domain/src/auto-number.ts` | Name deduplication logic for batch adds |
|
||||
| `apps/web/src/hooks/use-bestiary.ts` | SearchResult type, search function |
|
||||
| `apps/web/src/components/stat-block-panel.tsx` | Stat block panel for viewer integration |
|
||||
|
||||
## Implementation Approach
|
||||
|
||||
1. **Batch add**: Add `QueuedCreature` state (`{ result, count } | null`) to action bar. On dropdown entry click: if same entry, increment count; if different, replace. On confirm/Enter, loop `addFromBestiary(result)` N times.
|
||||
|
||||
2. **Custom fields**: When `suggestions.length === 0` and query is non-empty, show initiative/AC/maxHP inputs. Extend `onAddCombatant` to accept optional stats object. In `use-encounter.ts`, patch the new combatant with provided values after creation.
|
||||
|
||||
3. **Stat block viewer**: Accept `onViewStatBlock(result: SearchResult)` prop. Repurpose the search button icon to trigger it with the currently highlighted dropdown entry. Wire in App.tsx to derive `CreatureId` and open stat block panel.
|
||||
|
||||
4. **Unified flow**: Remove `searchOpen` toggle state. The input field always shows bestiary suggestions inline. Remove or deprecate `BestiarySearch` component.
|
||||
|
||||
## Development Commands
|
||||
|
||||
```bash
|
||||
pnpm --filter web dev # Dev server at localhost:5173
|
||||
pnpm test # Run all tests
|
||||
pnpm check # Full merge gate (must pass before commit)
|
||||
pnpm vitest run <file> # Run single test file
|
||||
```
|
||||
Reference in New Issue
Block a user