From f729e376892ddfaa4eca739bc1791ab6810cc726 Mon Sep 17 00:00:00 2001
From: Lukas <lukas.richter@maibornwolff.de>
Date: Sun, 22 Mar 2026 22:29:56 +0100
Subject: [PATCH] Replace book icon with name-click stat block toggle and
 pencil rename

Name click now opens/collapses the stat block panel; a hover-visible
pencil icon next to the name handles renaming. Removes the standalone
book icon for a cleaner, more intuitive combatant row.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/combatant-row.tsx | 63 ++++++++++++++---------
 1 file changed, 40 insertions(+), 23 deletions(-)

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 (
-		<button
-			type="button"
-			onClick={startEditing}
-			className="cursor-text truncate text-left text-foreground text-sm transition-colors hover:text-hover-neutral"
-			style={color ? { color } : undefined}
-		>
-			{name}
-		</button>
+		<>
+			<button
+				type="button"
+				onClick={onToggleStatBlock}
+				disabled={!onToggleStatBlock}
+				className={cn(
+					"truncate text-left text-sm transition-colors",
+					onToggleStatBlock
+						? "cursor-pointer text-foreground hover:text-hover-neutral"
+						: "cursor-default text-foreground",
+				)}
+				style={color ? { color } : undefined}
+			>
+				{name}
+			</button>
+			<button
+				type="button"
+				onClick={startEditing}
+				title="Rename"
+				aria-label="Rename"
+				className="inline-flex shrink-0 items-center rounded p-0.5 text-muted-foreground opacity-0 pointer-coarse:opacity-100 transition-colors transition-opacity hover:bg-hover-neutral-bg hover:text-hover-neutral focus:opacity-100 group-hover:opacity-100"
+			>
+				<Pencil size={14} />
+			</button>
+		</>
 	);
 }
 
@@ -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 && (
-						<button
-							type="button"
-							onClick={onShowStatBlock}
-							title="View stat block"
-							aria-label="View stat block"
-							className="shrink-0 text-foreground transition-colors hover:text-hover-neutral"
-						>
-							{isStatBlockOpen ? <BookOpen size={16} /> : <Book size={16} />}
-						</button>
-					)}
 					{!!combatant.icon &&
 						!!combatant.color &&
 						(() => {
@@ -549,6 +565,7 @@ export function CombatantRow({
 						combatantId={id}
 						onRename={editCombatant}
 						color={pcColor}
+						onToggleStatBlock={onToggleStatBlock}
 					/>
 					<ConditionTags
 						conditions={combatant.conditions}