diff --git a/apps/web/src/components/combatant-row.tsx b/apps/web/src/components/combatant-row.tsx index 4f32e75..40ea7ca 100644 --- a/apps/web/src/components/combatant-row.tsx +++ b/apps/web/src/components/combatant-row.tsx @@ -6,7 +6,7 @@ import { type PlayerIcon, type RollMode, } from "@initiative/domain"; -import { Book, BookOpen, Brain, X } from "lucide-react"; +import { Brain, Pencil, X } from "lucide-react"; import { type Ref, useCallback, useEffect, useRef, useState } from "react"; import { useEncounterContext } from "../contexts/encounter-context.js"; import { useInitiativeRollsContext } from "../contexts/initiative-rolls-context.js"; @@ -47,11 +47,13 @@ function EditableName({ combatantId, onRename, color, + onToggleStatBlock, }: Readonly<{ name: string; combatantId: CombatantId; onRename: (id: CombatantId, newName: string) => void; color?: string; + onToggleStatBlock?: () => void; }>) { const [editing, setEditing] = useState(false); const [draft, setDraft] = useState(name); @@ -89,14 +91,31 @@ function EditableName({ } return ( - + <> + + + ); } @@ -428,14 +447,22 @@ export function CombatantRow({ toggleCondition, toggleConcentration, } = useEncounterContext(); - const { selectedCreatureId, showCreature } = useSidePanelContext(); + const { selectedCreatureId, showCreature, toggleCollapse } = + useSidePanelContext(); const { handleRollInitiative } = useInitiativeRollsContext(); // Derive what was previously conditional props const isStatBlockOpen = combatant.creatureId === selectedCreatureId; const { creatureId } = combatant; - const onShowStatBlock = creatureId - ? () => showCreature(creatureId) + const hasStatBlock = !!creatureId; + const onToggleStatBlock = hasStatBlock + ? () => { + if (isStatBlockOpen) { + toggleCollapse(); + } else { + showCreature(creatureId); + } + } : undefined; const onRollInitiative = combatant.creatureId ? handleRollInitiative @@ -517,17 +544,6 @@ export function CombatantRow({ dimmed && "opacity-50", )} > - {!!onShowStatBlock && ( - - )} {!!combatant.icon && !!combatant.color && (() => { @@ -549,6 +565,7 @@ export function CombatantRow({ combatantId={id} onRename={editCombatant} color={pcColor} + onToggleStatBlock={onToggleStatBlock} />