Color player character names instead of left border

Player characters now show their chosen color on their name text
rather than as a left border glow. Left border is reserved for
active row (accent) and concentration (purple).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/components/__tests__/turn-navigation.test.tsx

@@ -54,11 +54,11 @@ describe("TurnNavigation", () => {
 			expect(container.textContent).not.toContain("—");
 		});
 
-		it("round badge and combatant name are in separate DOM elements", () => {
+		it("round badge and combatant name are siblings in the center area", () => {
 			renderNav();
 			const badge = screen.getByText("R1");
 			const name = screen.getByText("Goblin");
-			expect(badge.parentElement).not.toBe(name.parentElement);
+			expect(badge.parentElement).toBe(name.parentElement);
 		});
 
 		it("updates the round badge when round changes", () => {

apps/web/src/components/action-bar.tsx

@@ -437,26 +437,32 @@ export function ActionBar({
 				<Button type="submit" size="sm">
 					Add
 				</Button>
+				<div className="flex items-center gap-0">
 					{onManagePlayers && (
 						<Button
 							type="button"
-						size="sm"
+							size="icon"
 							variant="ghost"
+							className="text-muted-foreground hover:text-hover-neutral"
 							onClick={onManagePlayers}
 							title="Player characters"
+							aria-label="Player characters"
 						>
-						<Users className="h-4 w-4" />
+							<Users className="h-5 w-5" />
 						</Button>
 					)}
 					{bestiaryLoaded && onViewStatBlock && (
 						<div ref={viewerRef} className="relative">
 							<Button
 								type="button"
-							size="sm"
+								size="icon"
 								variant="ghost"
+								className="text-muted-foreground hover:text-hover-neutral"
 								onClick={() => (viewerOpen ? closeViewer() : openViewer())}
+								title="Browse stat blocks"
+								aria-label="Browse stat blocks"
 							>
-							<Eye className="h-4 w-4" />
+								<Eye className="h-5 w-5" />
 							</Button>
 							{viewerOpen && (
 								<div className="absolute bottom-full right-0 z-50 mb-1 w-64 rounded-md border border-border bg-card shadow-lg">
@@ -506,14 +512,18 @@ export function ActionBar({
 					{bestiaryLoaded && onBulkImport && (
 						<Button
 							type="button"
-						size="sm"
+							size="icon"
 							variant="ghost"
+							className="text-muted-foreground hover:text-hover-neutral"
 							onClick={onBulkImport}
 							disabled={bulkImportDisabled}
+							title="Bulk import"
+							aria-label="Bulk import"
 						>
-						<Import className="h-4 w-4" />
+							<Import className="h-5 w-5" />
 						</Button>
 					)}
+				</div>
 			</form>
 		</div>
 	);

apps/web/src/components/combatant-row.tsx

@@ -49,11 +49,13 @@ function EditableName({
 	combatantId,
 	onRename,
 	onShowStatBlock,
+	color,
 }: {
 	name: string;
 	combatantId: CombatantId;
 	onRename: (id: CombatantId, newName: string) => void;
 	onShowStatBlock?: () => void;
+	color?: string;
 }) {
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(name);
@@ -143,6 +145,7 @@ function EditableName({
 				onTouchCancel={cancelLongPress}
 				onTouchMove={cancelLongPress}
 				className="truncate text-left text-sm text-foreground cursor-text hover:text-hover-neutral transition-colors"
+				style={color ? { color } : undefined}
 			>
 				{name}
 			</button>
@@ -482,8 +485,7 @@ export function CombatantRow({
 		}
 	}, [combatant.isConcentrating]);
 
-	const pcColor =
+	const pcColor = combatant.color
-		combatant.color && !isActive && !combatant.isConcentrating
 		? PLAYER_COLOR_HEX[combatant.color as keyof typeof PLAYER_COLOR_HEX]
 		: undefined;
 
@@ -499,7 +501,6 @@ export function CombatantRow({
 				isPulsing && "animate-concentration-pulse",
 				onShowStatBlock && "cursor-pointer",
 			)}
-			style={pcColor ? { borderLeftColor: pcColor } : undefined}
 			onClick={onShowStatBlock}
 			onKeyDown={
 				onShowStatBlock ? activateOnKeyDown(onShowStatBlock) : undefined
@@ -566,6 +567,7 @@ export function CombatantRow({
 						combatantId={id}
 						onRename={onRename}
 						onShowStatBlock={onShowStatBlock}
+						color={pcColor}
 					/>
 					<ConditionTags
 						conditions={combatant.conditions}

apps/web/src/components/create-player-modal.tsx

@@ -53,6 +53,15 @@ export function CreatePlayerModal({
 		}
 	}, [open, playerCharacter]);
 
+	useEffect(() => {
+		if (!open) return;
+		function handleKeyDown(e: KeyboardEvent) {
+			if (e.key === "Escape") onClose();
+		}
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [open, onClose]);
+
 	if (!open) return null;
 
 	const handleSubmit = (e: FormEvent) => {
@@ -77,8 +86,16 @@ export function CreatePlayerModal({
 	};
 
 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+		// biome-ignore lint/a11y/noStaticElementInteractions: backdrop click to close
-			<div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl">
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+			onMouseDown={onClose}
+		>
+			{/* biome-ignore lint/a11y/noStaticElementInteractions: prevent close when clicking modal content */}
+			<div
+				className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
+				onMouseDown={(e) => e.stopPropagation()}
+			>
 				<div className="mb-4 flex items-center justify-between">
 					<h2 className="text-lg font-semibold text-foreground">
 						{isEdit ? "Edit Player" : "Create Player"}

apps/web/src/components/player-management.tsx

@@ -3,7 +3,8 @@ import type {
 	PlayerCharacterId,
 	PlayerIcon,
 } from "@initiative/domain";
-import { Pencil, Plus, X } from "lucide-react";
+import { Pencil, Plus, Trash2, X } from "lucide-react";
+import { useEffect } from "react";
 import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map";
 import { Button } from "./ui/button";
 import { ConfirmButton } from "./ui/confirm-button";
@@ -25,11 +26,28 @@ export function PlayerManagement({
 	onDelete,
 	onCreate,
 }: PlayerManagementProps) {
+	useEffect(() => {
+		if (!open) return;
+		function handleKeyDown(e: KeyboardEvent) {
+			if (e.key === "Escape") onClose();
+		}
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [open, onClose]);
+
 	if (!open) return null;
 
 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+		// biome-ignore lint/a11y/noStaticElementInteractions: backdrop click to close
-			<div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl">
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+			onMouseDown={onClose}
+		>
+			{/* biome-ignore lint/a11y/noStaticElementInteractions: prevent close when clicking modal content */}
+			<div
+				className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
+				onMouseDown={(e) => e.stopPropagation()}
+			>
 				<div className="mb-4 flex items-center justify-between">
 					<h2 className="text-lg font-semibold text-foreground">
 						Player Characters
@@ -83,7 +101,7 @@ export function PlayerManagement({
 										<Pencil size={14} />
 									</button>
 									<ConfirmButton
-										icon={<X size={14} />}
+										icon={<Trash2 size={14} />}
 										label="Delete player character"
 										onConfirm={() => onDelete(pc.id)}
 										className="h-6 w-6 text-muted-foreground"

apps/web/src/components/source-manager.tsx

@@ -47,7 +47,12 @@ export function SourceManager({ onCacheCleared }: SourceManagerProps) {
 				<span className="text-sm font-semibold text-foreground">
 					Cached Sources
 				</span>
-				<Button size="sm" variant="outline" onClick={handleClearAll}>
+				<Button
+					size="sm"
+					variant="outline"
+					className="hover:text-hover-destructive hover:border-hover-destructive"
+					onClick={handleClearAll}
+				>
 					<Trash2 className="mr-1 h-3 w-3" />
 					Clear All
 				</Button>
@@ -69,7 +74,7 @@ export function SourceManager({ onCacheCleared }: SourceManagerProps) {
 						<button
 							type="button"
 							onClick={() => handleClearSource(source.sourceCode)}
-							className="text-muted-foreground hover:text-hover-danger"
+							className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-hover-destructive-bg hover:text-hover-destructive"
 						>
 							<Trash2 className="h-3.5 w-3.5" />
 						</button>

apps/web/src/components/turn-navigation.tsx

@@ -1,5 +1,5 @@
 import type { Encounter } from "@initiative/domain";
-import { Settings, StepBack, StepForward, Trash2 } from "lucide-react";
+import { Library, StepBack, StepForward, Trash2 } from "lucide-react";
 import { D20Icon } from "./d20-icon";
 import { Button } from "./ui/button";
 import { ConfirmButton } from "./ui/confirm-button";
@@ -27,11 +27,8 @@ export function TurnNavigation({
 
 	return (
 		<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
-			<div className="flex flex-shrink-0 items-center gap-3">
 			<Button
-					variant="outline"
 				size="icon"
-					className="h-8 w-8 text-foreground border-foreground hover:text-hover-action hover:border-hover-action hover:bg-transparent"
 				onClick={onRetreatTurn}
 				disabled={!hasCombatants || isAtStart}
 				title="Previous turn"
@@ -39,16 +36,13 @@ export function TurnNavigation({
 			>
 				<StepBack className="h-5 w-5" />
 			</Button>
-				<span className="rounded-full bg-muted text-foreground text-sm px-2 py-0.5 font-semibold">
+
+			<div className="min-w-0 flex-1 flex items-center justify-center gap-2 text-sm">
+				<span className="rounded-full bg-muted text-foreground text-sm px-2 py-0.5 font-semibold shrink-0">
 					R{encounter.roundNumber}
 				</span>
-			</div>
-
-			<div className="min-w-0 flex-1 text-center text-sm">
 				{activeCombatant ? (
-					<span className="truncate block font-medium">
+					<span className="truncate font-medium">{activeCombatant.name}</span>
-						{activeCombatant.name}
-					</span>
 				) : (
 					<span className="text-muted-foreground">No combatants</span>
 				)}
@@ -59,7 +53,7 @@ export function TurnNavigation({
 					<Button
 						variant="ghost"
 						size="icon"
-						className="h-8 w-8 text-muted-foreground hover:text-hover-action"
+						className="text-muted-foreground hover:text-hover-action"
 						onClick={onRollAllInitiative}
 						title="Roll all initiative"
 						aria-label="Roll all initiative"
@@ -69,25 +63,23 @@ export function TurnNavigation({
 					<Button
 						variant="ghost"
 						size="icon"
-						className="h-8 w-8 text-muted-foreground hover:text-hover-neutral"
+						className="text-muted-foreground hover:text-hover-neutral"
 						onClick={onOpenSourceManager}
 						title="Manage cached sources"
 						aria-label="Manage cached sources"
 					>
-						<Settings className="h-5 w-5" />
+						<Library className="h-5 w-5" />
 					</Button>
 					<ConfirmButton
 						icon={<Trash2 className="h-5 w-5" />}
 						label="Clear encounter"
 						onConfirm={onClearEncounter}
 						disabled={!hasCombatants}
-						className="h-8 w-8 text-muted-foreground"
+						className="text-muted-foreground"
 					/>
 				</div>
 				<Button
-					variant="outline"
 					size="icon"
-					className="h-8 w-8 text-foreground border-foreground hover:text-hover-action hover:border-hover-action hover:bg-transparent"
 					onClick={onAdvanceTurn}
 					disabled={!hasCombatants}
 					title="Next turn"

apps/web/src/components/ui/confirm-button.tsx

@@ -97,8 +97,9 @@ export function ConfirmButton({
 				size="icon"
 				className={cn(
 					className,
-					isConfirming &&
+					isConfirming
-						"bg-destructive text-primary-foreground rounded-md animate-confirm-pulse hover:bg-destructive hover:text-primary-foreground",
+						? "bg-destructive text-primary-foreground rounded-md animate-confirm-pulse hover:bg-destructive hover:text-primary-foreground"
+						: "hover:text-hover-destructive",
 				)}
 				onClick={handleClick}
 				onKeyDown={handleKeyDown}