Fix high-severity undici vulnerability via pnpm override
Override undici to >=7.24.0 to resolve GHSA-v9p9-hfj2-hcw8 (WebSocket 64-bit length overflow). The vulnerable version was pulled in transitively via jsdom@28.1.0. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
@@ -1,536 +0,0 @@
|
|||||||
---
|
|
||||||
date: "2026-03-13T14:58:42.882813+00:00"
|
|
||||||
git_commit: 75778884bd1be7d135b2f5ea9b8a8e77a0149f7b
|
|
||||||
branch: main
|
|
||||||
topic: "Declutter Action Bars"
|
|
||||||
tags: [plan, turn-navigation, action-bar, overflow-menu, ux]
|
|
||||||
status: draft
|
|
||||||
---
|
|
||||||
|
|
||||||
# Declutter Action Bars — Implementation Plan
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Reorganize buttons across the top bar (TurnNavigation) and bottom bar (ActionBar) to reduce visual clutter and improve UX. Each bar gets a clear purpose: the top bar is for turn navigation + encounter lifecycle, the bottom bar is for adding combatants + setup actions.
|
|
||||||
|
|
||||||
## Current State Analysis
|
|
||||||
|
|
||||||
**Top bar** (`turn-navigation.tsx`) has 5 buttons + center info:
|
|
||||||
```
|
|
||||||
[ Prev ] | [ R1 Dwarf ] | [ D20 Library Trash ] [ Next ]
|
|
||||||
```
|
|
||||||
The D20 (roll all initiative) and Library (manage sources) buttons are unrelated to turn navigation — they're setup/utility actions that add noise.
|
|
||||||
|
|
||||||
**Bottom bar** (`action-bar.tsx`) has an input, Add button, and 3 icon buttons:
|
|
||||||
```
|
|
||||||
[ + Add combatants... ] [ Add ] [ Users Eye Import ]
|
|
||||||
```
|
|
||||||
The icon cluster (Users, Eye, Import) is cryptic — three ghost icon buttons with no labels, requiring hover to discover purpose. The Eye button opens a separate search dropdown for browsing stat blocks, which duplicates the existing search input.
|
|
||||||
|
|
||||||
### Key Discoveries:
|
|
||||||
- `rollAllInitiativeUseCase` (`packages/application/src/roll-all-initiative-use-case.ts`) applies to combatants with `creatureId` AND no `initiative` set — this defines the conditional visibility logic
|
|
||||||
- `Combatant.initiative` is `number | undefined` and `Combatant.creatureId` is `CreatureId | undefined` (`packages/domain/src/types.ts`)
|
|
||||||
- No existing dropdown/menu UI component — the overflow menu needs a new component
|
|
||||||
- Lucide provides `EllipsisVertical` for the kebab menu trigger
|
|
||||||
- The stat block viewer already has its own search input, results list, and keyboard navigation (`action-bar.tsx:65-236`) — in browse mode, we reuse the main input for this instead
|
|
||||||
|
|
||||||
## Desired End State
|
|
||||||
|
|
||||||
### UI Mockups
|
|
||||||
|
|
||||||
**Top bar (after):**
|
|
||||||
```
|
|
||||||
[ Prev ] [ R1 Dwarf ] [ Trash ] [ Next ]
|
|
||||||
```
|
|
||||||
4 elements. Clean, focused on turn flow + encounter lifecycle.
|
|
||||||
|
|
||||||
**Bottom bar — add mode (default):**
|
|
||||||
```
|
|
||||||
[ + Add combatants... 👁 ] [ Add ] [ D20? ] [ ⋮ ]
|
|
||||||
```
|
|
||||||
The Eye icon sits inside/beside the input as a toggle. D20 appears conditionally. Kebab menu holds infrequent actions.
|
|
||||||
|
|
||||||
**Bottom bar — browse mode (Eye toggled on):**
|
|
||||||
```
|
|
||||||
[ 🔍 Search stat blocks... 👁 ] [ ⋮ ]
|
|
||||||
```
|
|
||||||
The input switches purpose: placeholder changes, typing searches stat blocks instead of adding combatants. The Add button and D20 hide (irrelevant in browse mode). Eye icon stays as the toggle to switch back. Selecting a result opens the stat block panel and exits browse mode.
|
|
||||||
|
|
||||||
**Overflow menu (⋮ clicked):**
|
|
||||||
```
|
|
||||||
┌──────────────────────┐
|
|
||||||
│ 👥 Player Characters │
|
|
||||||
│ 📚 Manage Sources │
|
|
||||||
│ 📥 Bulk Import │
|
|
||||||
└──────────────────────┘
|
|
||||||
```
|
|
||||||
Labeled items with icons — discoverable without hover.
|
|
||||||
|
|
||||||
### Key Discoveries:
|
|
||||||
- `sourceManagerOpen` state lives in App.tsx:116 — the overflow menu's "Manage Sources" item needs the same toggle callback
|
|
||||||
- The stat block viewer state (viewerOpen, viewerQuery, viewerResults, viewerIndex) in action-bar.tsx:66-71 gets replaced by a `browseMode` boolean that repurposes the main input
|
|
||||||
- The viewer's separate input, dropdown, and keyboard handling (action-bar.tsx:188-248) can be removed — browse mode reuses the existing input and suggestion dropdown infrastructure
|
|
||||||
|
|
||||||
## What We're NOT Doing
|
|
||||||
|
|
||||||
- Changing domain logic or use cases
|
|
||||||
- Modifying ConfirmButton behavior
|
|
||||||
- Changing the stat block panel itself
|
|
||||||
- Altering animation logic (useActionBarAnimation)
|
|
||||||
- Modifying combatant row buttons
|
|
||||||
- Changing how SourceManager works (just moving where the trigger lives)
|
|
||||||
|
|
||||||
## Implementation Approach
|
|
||||||
|
|
||||||
Four phases, each independently testable. Phase 1 simplifies the top bar (pure removal). Phase 2 adds the overflow menu component. Phase 3 reworks the ActionBar (browse toggle + conditional D20 + overflow integration). Phase 4 wires everything together in App.tsx.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Phase 1: Simplify TurnNavigation
|
|
||||||
|
|
||||||
### Overview
|
|
||||||
Strip TurnNavigation down to just turn controls + clear encounter. Remove Roll All Initiative and Manage Sources buttons and their associated props.
|
|
||||||
|
|
||||||
### Changes Required:
|
|
||||||
|
|
||||||
#### [x] 1. Update TurnNavigation component
|
|
||||||
**File**: `apps/web/src/components/turn-navigation.tsx`
|
|
||||||
**Changes**:
|
|
||||||
- Remove `onRollAllInitiative` and `onOpenSourceManager` from props interface
|
|
||||||
- Remove the D20 button (lines 53-62)
|
|
||||||
- Remove the Library button (lines 63-72)
|
|
||||||
- Remove the inner `gap-0` div wrapper (lines 52, 80) since only the ConfirmButton remains
|
|
||||||
- Remove unused imports: `Library` from lucide-react, `D20Icon`
|
|
||||||
- Adjust layout: ConfirmButton + Next button grouped with `gap-3`
|
|
||||||
|
|
||||||
Result:
|
|
||||||
```tsx
|
|
||||||
interface TurnNavigationProps {
|
|
||||||
encounter: Encounter;
|
|
||||||
onAdvanceTurn: () => void;
|
|
||||||
onRetreatTurn: () => void;
|
|
||||||
onClearEncounter: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Layout becomes:
|
|
||||||
// [ Prev ] | [ R1 Name ] | [ Trash ] [ Next ]
|
|
||||||
```
|
|
||||||
|
|
||||||
#### [x] 2. Update TurnNavigation usage in App.tsx
|
|
||||||
**File**: `apps/web/src/App.tsx`
|
|
||||||
**Changes**:
|
|
||||||
- Remove `onRollAllInitiative` and `onOpenSourceManager` props from the `<TurnNavigation>` call (lines 256-257)
|
|
||||||
|
|
||||||
### Success Criteria:
|
|
||||||
|
|
||||||
#### Automated Verification:
|
|
||||||
- [x] `pnpm check` passes (typecheck catches removed props, lint catches unused imports)
|
|
||||||
|
|
||||||
#### Manual Verification:
|
|
||||||
- [ ] Top bar shows only: Prev, round badge + name, trash, Next
|
|
||||||
- [ ] Prev/Next/Clear buttons still work as before
|
|
||||||
- [ ] Top bar animation (slide in/out) unchanged
|
|
||||||
|
|
||||||
**Implementation Note**: After completing this phase and all automated verification passes, pause here for manual confirmation from the human before proceeding to the next phase.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Phase 2: Create Overflow Menu Component
|
|
||||||
|
|
||||||
### Overview
|
|
||||||
Build a reusable overflow menu (kebab menu) component with click-outside and Escape handling, following the same patterns as ConfirmButton and the existing viewer dropdown.
|
|
||||||
|
|
||||||
### Changes Required:
|
|
||||||
|
|
||||||
#### [x] 1. Create OverflowMenu component
|
|
||||||
**File**: `apps/web/src/components/ui/overflow-menu.tsx` (new file)
|
|
||||||
**Changes**: Create a dropdown menu triggered by an EllipsisVertical icon button. Features:
|
|
||||||
- Toggle open/close on button click
|
|
||||||
- Close on click outside (document mousedown listener, same pattern as confirm-button.tsx:44-67)
|
|
||||||
- Close on Escape key
|
|
||||||
- Renders above the trigger (bottom-full positioning, same as action-bar suggestion dropdown)
|
|
||||||
- Each item: icon + label, full-width clickable row
|
|
||||||
- Clicking an item calls its action and closes the menu
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { EllipsisVertical } from "lucide-react";
|
|
||||||
import { type ReactNode, useEffect, useRef, useState } from "react";
|
|
||||||
import { Button } from "./button";
|
|
||||||
|
|
||||||
export interface OverflowMenuItem {
|
|
||||||
readonly icon: ReactNode;
|
|
||||||
readonly label: string;
|
|
||||||
readonly onClick: () => void;
|
|
||||||
readonly disabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OverflowMenuProps {
|
|
||||||
readonly items: readonly OverflowMenuItem[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function OverflowMenu({ items }: OverflowMenuProps) {
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) return;
|
|
||||||
function handleMouseDown(e: MouseEvent) {
|
|
||||||
if (ref.current && !ref.current.contains(e.target as Node)) {
|
|
||||||
setOpen(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function handleKeyDown(e: KeyboardEvent) {
|
|
||||||
if (e.key === "Escape") setOpen(false);
|
|
||||||
}
|
|
||||||
document.addEventListener("mousedown", handleMouseDown);
|
|
||||||
document.addEventListener("keydown", handleKeyDown);
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener("mousedown", handleMouseDown);
|
|
||||||
document.removeEventListener("keydown", handleKeyDown);
|
|
||||||
};
|
|
||||||
}, [open]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div ref={ref} className="relative">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="text-muted-foreground hover:text-hover-neutral"
|
|
||||||
onClick={() => setOpen((o) => !o)}
|
|
||||||
aria-label="More actions"
|
|
||||||
title="More actions"
|
|
||||||
>
|
|
||||||
<EllipsisVertical className="h-5 w-5" />
|
|
||||||
</Button>
|
|
||||||
{open && (
|
|
||||||
<div className="absolute bottom-full right-0 z-50 mb-1 min-w-48 rounded-md border border-border bg-card py-1 shadow-lg">
|
|
||||||
{items.map((item) => (
|
|
||||||
<button
|
|
||||||
key={item.label}
|
|
||||||
type="button"
|
|
||||||
className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-foreground hover:bg-hover-neutral-bg disabled:pointer-events-none disabled:opacity-50"
|
|
||||||
disabled={item.disabled}
|
|
||||||
onClick={() => {
|
|
||||||
item.onClick();
|
|
||||||
setOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{item.icon}
|
|
||||||
{item.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Success Criteria:
|
|
||||||
|
|
||||||
#### Automated Verification:
|
|
||||||
- [x] `pnpm check` passes (new file compiles, no unused exports yet — will be used in phase 3)
|
|
||||||
|
|
||||||
#### Manual Verification:
|
|
||||||
- [ ] N/A — component not yet wired into the UI
|
|
||||||
|
|
||||||
**Implementation Note**: After completing this phase and all automated verification passes, pause here for manual confirmation from the human before proceeding to the next phase.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Phase 3: Rework ActionBar
|
|
||||||
|
|
||||||
### Overview
|
|
||||||
Replace the icon button cluster with: (1) an Eye toggle on the input that switches between add mode and browse mode, (2) a conditional Roll All Initiative button, and (3) the overflow menu for infrequent actions.
|
|
||||||
|
|
||||||
### Changes Required:
|
|
||||||
|
|
||||||
#### [x] 1. Update ActionBarProps
|
|
||||||
**File**: `apps/web/src/components/action-bar.tsx`
|
|
||||||
**Changes**: Add new props, keep existing ones needed for overflow menu items:
|
|
||||||
```tsx
|
|
||||||
interface ActionBarProps {
|
|
||||||
// ... existing props stay ...
|
|
||||||
onRollAllInitiative?: () => void; // new — moved from top bar
|
|
||||||
showRollAllInitiative?: boolean; // new — conditional visibility
|
|
||||||
onOpenSourceManager?: () => void; // new — moved from top bar
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### [x] 2. Add browse mode state
|
|
||||||
**File**: `apps/web/src/components/action-bar.tsx`
|
|
||||||
**Changes**: Replace the separate viewer state (viewerOpen, viewerQuery, viewerResults, viewerIndex, viewerRef, viewerInputRef — lines 66-71) with a single `browseMode` boolean:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
const [browseMode, setBrowseMode] = useState(false);
|
|
||||||
```
|
|
||||||
|
|
||||||
Remove all viewer-specific state variables and handlers:
|
|
||||||
- `viewerOpen`, `viewerQuery`, `viewerResults`, `viewerIndex` (lines 66-69)
|
|
||||||
- `viewerRef`, `viewerInputRef` (lines 70-71)
|
|
||||||
- `openViewer`, `closeViewer` (lines 189-202)
|
|
||||||
- `handleViewerQueryChange`, `handleViewerSelect`, `handleViewerKeyDown` (lines 204-236)
|
|
||||||
- The viewer click-outside effect (lines 239-248)
|
|
||||||
|
|
||||||
#### [x] 3. Rework the input area with Eye toggle
|
|
||||||
**File**: `apps/web/src/components/action-bar.tsx`
|
|
||||||
**Changes**: Add an Eye icon button inside the input wrapper that toggles browse mode. When browse mode is active:
|
|
||||||
- Placeholder changes to "Search stat blocks..."
|
|
||||||
- Typing calls `bestiarySearch` but selecting a result calls `onViewStatBlock` instead of queuing/adding
|
|
||||||
- The suggestion dropdown shows results but clicking opens stat block panel instead of adding
|
|
||||||
- Add button and custom fields (Init/AC/MaxHP) are hidden
|
|
||||||
- D20 button is hidden
|
|
||||||
|
|
||||||
When toggling browse mode off, clear the input and suggestions.
|
|
||||||
|
|
||||||
The Eye icon sits to the right of the input inside the `relative flex-1` wrapper:
|
|
||||||
```tsx
|
|
||||||
<div className="relative flex-1">
|
|
||||||
<Input
|
|
||||||
ref={inputRef}
|
|
||||||
type="text"
|
|
||||||
value={nameInput}
|
|
||||||
onChange={(e) => handleNameChange(e.target.value)}
|
|
||||||
onKeyDown={browseMode ? handleBrowseKeyDown : handleKeyDown}
|
|
||||||
placeholder={browseMode ? "Search stat blocks..." : "+ Add combatants"}
|
|
||||||
className="max-w-xs pr-8"
|
|
||||||
autoFocus={autoFocus}
|
|
||||||
/>
|
|
||||||
{bestiaryLoaded && onViewStatBlock && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={cn(
|
|
||||||
"absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-hover-neutral",
|
|
||||||
browseMode && "text-accent",
|
|
||||||
)}
|
|
||||||
onClick={() => {
|
|
||||||
setBrowseMode((m) => !m);
|
|
||||||
setNameInput("");
|
|
||||||
setSuggestions([]);
|
|
||||||
setPcMatches([]);
|
|
||||||
setQueued(null);
|
|
||||||
setSuggestionIndex(-1);
|
|
||||||
}}
|
|
||||||
title={browseMode ? "Switch to add mode" : "Browse stat blocks"}
|
|
||||||
aria-label={browseMode ? "Switch to add mode" : "Browse stat blocks"}
|
|
||||||
>
|
|
||||||
<Eye className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{/* suggestion dropdown — behavior changes based on browseMode */}
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Import `cn` from `../../lib/utils` (already used by other components).
|
|
||||||
|
|
||||||
#### [x] 4. Update suggestion dropdown for browse mode
|
|
||||||
**File**: `apps/web/src/components/action-bar.tsx`
|
|
||||||
**Changes**: In browse mode, the suggestion dropdown behaves differently:
|
|
||||||
- No "Add as custom" row at the top
|
|
||||||
- No player character matches section
|
|
||||||
- No queuing (plus/minus/confirm) — clicking a result calls `onViewStatBlock` and exits browse mode
|
|
||||||
- Keyboard Enter on a highlighted result calls `onViewStatBlock` and exits browse mode
|
|
||||||
|
|
||||||
Add a `handleBrowseKeyDown` handler:
|
|
||||||
```tsx
|
|
||||||
const handleBrowseKeyDown = (e: React.KeyboardEvent) => {
|
|
||||||
if (e.key === "Escape") {
|
|
||||||
setBrowseMode(false);
|
|
||||||
setNameInput("");
|
|
||||||
setSuggestions([]);
|
|
||||||
setSuggestionIndex(-1);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (suggestions.length === 0) return;
|
|
||||||
if (e.key === "ArrowDown") {
|
|
||||||
e.preventDefault();
|
|
||||||
setSuggestionIndex((i) => (i < suggestions.length - 1 ? i + 1 : 0));
|
|
||||||
} else if (e.key === "ArrowUp") {
|
|
||||||
e.preventDefault();
|
|
||||||
setSuggestionIndex((i) => (i > 0 ? i - 1 : suggestions.length - 1));
|
|
||||||
} else if (e.key === "Enter" && suggestionIndex >= 0) {
|
|
||||||
e.preventDefault();
|
|
||||||
onViewStatBlock?.(suggestions[suggestionIndex]);
|
|
||||||
setBrowseMode(false);
|
|
||||||
setNameInput("");
|
|
||||||
setSuggestions([]);
|
|
||||||
setSuggestionIndex(-1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
In the suggestion dropdown JSX, conditionally render based on `browseMode`:
|
|
||||||
- Browse mode: simple list of creature results, click → `onViewStatBlock` + exit browse mode
|
|
||||||
- Add mode: existing behavior (custom row, PC matches, queuing)
|
|
||||||
|
|
||||||
#### [x] 5. Replace icon button cluster with D20 + overflow menu
|
|
||||||
**File**: `apps/web/src/components/action-bar.tsx`
|
|
||||||
**Changes**: Replace the `div.flex.items-center.gap-0` block (lines 443-529) containing Users, Eye, and Import buttons with:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
{!browseMode && (
|
|
||||||
<>
|
|
||||||
<Button type="submit" size="sm">
|
|
||||||
Add
|
|
||||||
</Button>
|
|
||||||
{showRollAllInitiative && onRollAllInitiative && (
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
size="icon"
|
|
||||||
variant="ghost"
|
|
||||||
className="text-muted-foreground hover:text-hover-action"
|
|
||||||
onClick={onRollAllInitiative}
|
|
||||||
title="Roll all initiative"
|
|
||||||
aria-label="Roll all initiative"
|
|
||||||
>
|
|
||||||
<D20Icon className="h-6 w-6" />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<OverflowMenu items={overflowItems} />
|
|
||||||
```
|
|
||||||
|
|
||||||
Build the `overflowItems` array from props:
|
|
||||||
```tsx
|
|
||||||
const overflowItems: OverflowMenuItem[] = [];
|
|
||||||
if (onManagePlayers) {
|
|
||||||
overflowItems.push({
|
|
||||||
icon: <Users className="h-4 w-4" />,
|
|
||||||
label: "Player Characters",
|
|
||||||
onClick: onManagePlayers,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (onOpenSourceManager) {
|
|
||||||
overflowItems.push({
|
|
||||||
icon: <Library className="h-4 w-4" />,
|
|
||||||
label: "Manage Sources",
|
|
||||||
onClick: onOpenSourceManager,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (bestiaryLoaded && onBulkImport) {
|
|
||||||
overflowItems.push({
|
|
||||||
icon: <Import className="h-4 w-4" />,
|
|
||||||
label: "Bulk Import",
|
|
||||||
onClick: onBulkImport,
|
|
||||||
disabled: bulkImportDisabled,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### [x] 6. Clean up imports
|
|
||||||
**File**: `apps/web/src/components/action-bar.tsx`
|
|
||||||
**Changes**:
|
|
||||||
- Add imports: `D20Icon`, `OverflowMenu` + `OverflowMenuItem`, `Library` from lucide-react, `cn` from utils
|
|
||||||
- Remove imports that are no longer needed after removing the standalone viewer: check which of `Eye`, `Import`, `Users` are still used (Eye stays for the toggle, Users and Import stay for overflow item icons, Library is new)
|
|
||||||
- The `Check`, `Minus`, `Plus` imports stay (used in queuing UI)
|
|
||||||
|
|
||||||
### Success Criteria:
|
|
||||||
|
|
||||||
#### Automated Verification:
|
|
||||||
- [x] `pnpm check` passes
|
|
||||||
|
|
||||||
#### Manual Verification:
|
|
||||||
- [ ] Bottom bar shows: input with Eye toggle, Add button, (conditional D20), kebab menu
|
|
||||||
- [ ] Eye toggle switches input between "add" and "browse" modes
|
|
||||||
- [ ] In browse mode: typing shows bestiary results, clicking one opens stat block panel, exits browse mode
|
|
||||||
- [ ] In browse mode: Add button and D20 are hidden, overflow menu stays visible
|
|
||||||
- [ ] In add mode: existing behavior works (search, queue, custom fields, PC matches)
|
|
||||||
- [ ] Overflow menu opens/closes on click, closes on Escape and click-outside
|
|
||||||
- [ ] Overflow menu items (Player Characters, Manage Sources, Bulk Import) trigger correct actions
|
|
||||||
- [ ] D20 button appears only when bestiary combatants lack initiative, disappears when all have values
|
|
||||||
|
|
||||||
**Implementation Note**: After completing this phase and all automated verification passes, pause here for manual confirmation from the human before proceeding to the next phase.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Phase 4: Wire Up App.tsx
|
|
||||||
|
|
||||||
### Overview
|
|
||||||
Pass the new props to ActionBar — roll all initiative handler, conditional visibility flag, and source manager toggle. Remove the now-unused `onOpenSourceManager` callback from the TurnNavigation call (already removed in Phase 1) and ensure sourceManagerOpen toggle is routed through the overflow menu.
|
|
||||||
|
|
||||||
### Changes Required:
|
|
||||||
|
|
||||||
#### [x] 1. Compute showRollAllInitiative flag
|
|
||||||
**File**: `apps/web/src/App.tsx`
|
|
||||||
**Changes**: Add a derived boolean that checks if any combatant with a `creatureId` lacks an `initiative` value:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
const showRollAllInitiative = encounter.combatants.some(
|
|
||||||
(c) => c.creatureId != null && c.initiative == null,
|
|
||||||
);
|
|
||||||
```
|
|
||||||
|
|
||||||
Place this near `const isEmpty = ...` (line 241).
|
|
||||||
|
|
||||||
#### [x] 2. Pass new props to both ActionBar instances
|
|
||||||
**File**: `apps/web/src/App.tsx`
|
|
||||||
**Changes**: Add to both `<ActionBar>` calls (empty state at ~line 269 and populated state at ~line 328):
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
<ActionBar
|
|
||||||
// ... existing props ...
|
|
||||||
onRollAllInitiative={handleRollAllInitiative}
|
|
||||||
showRollAllInitiative={showRollAllInitiative}
|
|
||||||
onOpenSourceManager={() => setSourceManagerOpen((o) => !o)}
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### [x] 3. Remove stale code
|
|
||||||
**File**: `apps/web/src/App.tsx`
|
|
||||||
**Changes**:
|
|
||||||
- The `onRollAllInitiative` and `onOpenSourceManager` props were already removed from `<TurnNavigation>` in Phase 1 — verify no references remain
|
|
||||||
- Verify `sourceManagerOpen` state and the `<SourceManager>` rendering block (lines 287-291) still work correctly — the SourceManager inline panel is still toggled by the same state, just from a different trigger location
|
|
||||||
|
|
||||||
### Success Criteria:
|
|
||||||
|
|
||||||
#### Automated Verification:
|
|
||||||
- [x] `pnpm check` passes
|
|
||||||
|
|
||||||
#### Manual Verification:
|
|
||||||
- [ ] Top bar: only Prev, round badge + name, trash, Next — no D20 or Library buttons
|
|
||||||
- [ ] Bottom bar: input with Eye toggle, Add, conditional D20, overflow menu
|
|
||||||
- [ ] Roll All Initiative (D20 in bottom bar): visible when bestiary creatures lack initiative, hidden after rolling
|
|
||||||
- [ ] Overflow → Player Characters: opens player management modal
|
|
||||||
- [ ] Overflow → Manage Sources: toggles source manager panel (same as before, just different trigger)
|
|
||||||
- [ ] Overflow → Bulk Import: opens bulk import mode
|
|
||||||
- [ ] Browse mode (Eye toggle): search stat blocks without adding, selecting opens panel
|
|
||||||
- [ ] Clear encounter (top bar trash): still works with two-click confirmation
|
|
||||||
- [ ] All animations (bar transitions) unchanged
|
|
||||||
- [ ] Empty state: ActionBar centered with all functionality accessible
|
|
||||||
|
|
||||||
**Implementation Note**: After completing this phase and all automated verification passes, pause here for manual confirmation from the human before proceeding to the next phase.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Testing Strategy
|
|
||||||
|
|
||||||
### Unit Tests:
|
|
||||||
- No domain/application changes — existing tests should pass unchanged
|
|
||||||
- `pnpm check` covers typecheck + lint + existing test suite
|
|
||||||
|
|
||||||
### Manual Testing Steps:
|
|
||||||
1. Start with empty encounter — verify ActionBar is centered with Eye toggle and overflow menu
|
|
||||||
2. Add a bestiary creature — verify D20 appears in bottom bar, top bar slides in with just 4 elements
|
|
||||||
3. Click D20 → initiative rolls → D20 disappears from bottom bar
|
|
||||||
4. Toggle Eye → input switches to browse mode → search and select → stat block opens → exits browse mode
|
|
||||||
5. Open overflow menu → click each item → verify correct modal/panel opens
|
|
||||||
6. Click trash in top bar → confirm → encounter clears, back to empty state
|
|
||||||
7. Add custom creature (no creatureId) → D20 should not appear (no bestiary creatures)
|
|
||||||
8. Add mix of custom + bestiary creatures → D20 visible → roll all → D20 hidden
|
|
||||||
|
|
||||||
## Performance Considerations
|
|
||||||
|
|
||||||
None — this is a pure UI reorganization with no new data fetching, state management changes, or rendering overhead. The `showRollAllInitiative` computation is a simple `.some()` over the combatant array, which is negligible.
|
|
||||||
|
|
||||||
## References
|
|
||||||
|
|
||||||
- Research: `docs/agents/research/2026-03-13-action-bars-and-buttons.md`
|
|
||||||
- Top bar: `apps/web/src/components/turn-navigation.tsx`
|
|
||||||
- Bottom bar: `apps/web/src/components/action-bar.tsx`
|
|
||||||
- App layout: `apps/web/src/App.tsx`
|
|
||||||
- Button: `apps/web/src/components/ui/button.tsx`
|
|
||||||
- ConfirmButton: `apps/web/src/components/ui/confirm-button.tsx`
|
|
||||||
- Roll all use case: `packages/application/src/roll-all-initiative-use-case.ts`
|
|
||||||
- Combatant type: `packages/domain/src/types.ts`
|
|
||||||
@@ -1,6 +1,11 @@
|
|||||||
{
|
{
|
||||||
"private": true,
|
"private": true,
|
||||||
"packageManager": "pnpm@10.6.0",
|
"packageManager": "pnpm@10.6.0",
|
||||||
|
"pnpm": {
|
||||||
|
"overrides": {
|
||||||
|
"undici": ">=7.24.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@biomejs/biome": "2.0.0",
|
"@biomejs/biome": "2.0.0",
|
||||||
"@vitest/coverage-v8": "^3.2.4",
|
"@vitest/coverage-v8": "^3.2.4",
|
||||||
|
|||||||
11
pnpm-lock.yaml
generated
11
pnpm-lock.yaml
generated
@@ -4,6 +4,9 @@ settings:
|
|||||||
autoInstallPeers: true
|
autoInstallPeers: true
|
||||||
excludeLinksFromLockfile: false
|
excludeLinksFromLockfile: false
|
||||||
|
|
||||||
|
overrides:
|
||||||
|
undici: '>=7.24.0'
|
||||||
|
|
||||||
importers:
|
importers:
|
||||||
|
|
||||||
.:
|
.:
|
||||||
@@ -2011,8 +2014,8 @@ packages:
|
|||||||
undici-types@7.18.2:
|
undici-types@7.18.2:
|
||||||
resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
|
resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
|
||||||
|
|
||||||
undici@7.22.0:
|
undici@7.24.2:
|
||||||
resolution: {integrity: sha512-RqslV2Us5BrllB+JeiZnK4peryVTndy9Dnqq62S3yYRRTj0tFQCwEniUy2167skdGOy3vqRzEvl1Dm4sV2ReDg==}
|
resolution: {integrity: sha512-P9J1HWYV/ajFr8uCqk5QixwiRKmB1wOamgS0e+o2Z4A44Ej2+thFVRLG/eA7qprx88XXhnV5Bl8LHXTURpzB3Q==}
|
||||||
engines: {node: '>=20.18.1'}
|
engines: {node: '>=20.18.1'}
|
||||||
|
|
||||||
universalify@2.0.1:
|
universalify@2.0.1:
|
||||||
@@ -3420,7 +3423,7 @@ snapshots:
|
|||||||
saxes: 6.0.0
|
saxes: 6.0.0
|
||||||
symbol-tree: 3.2.4
|
symbol-tree: 3.2.4
|
||||||
tough-cookie: 6.0.0
|
tough-cookie: 6.0.0
|
||||||
undici: 7.22.0
|
undici: 7.24.2
|
||||||
w3c-xmlserializer: 5.0.0
|
w3c-xmlserializer: 5.0.0
|
||||||
webidl-conversions: 8.0.1
|
webidl-conversions: 8.0.1
|
||||||
whatwg-mimetype: 5.0.0
|
whatwg-mimetype: 5.0.0
|
||||||
@@ -3973,7 +3976,7 @@ snapshots:
|
|||||||
|
|
||||||
undici-types@7.18.2: {}
|
undici-types@7.18.2: {}
|
||||||
|
|
||||||
undici@7.22.0: {}
|
undici@7.24.2: {}
|
||||||
|
|
||||||
universalify@2.0.1: {}
|
universalify@2.0.1: {}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user