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}
/>