Add player character management feature

Persistent player character templates (name, AC, HP, color, icon) with full CRUD, bestiary-style search to add PCs to encounters with pre-filled stats, and color/icon visual distinction in combatant rows. Also stops the stat block panel from auto-opening when adding a creature. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 18:11:08 +01:00
parent 768e7a390f
commit 91703ddebc
38 changed files with 3055 additions and 96 deletions
--- a/apps/web/src/components/action-bar.tsx
+++ b/apps/web/src/components/action-bar.tsx
@@ -1,4 +1,5 @@
-import { Check, Eye, Import, Minus, Plus } from "lucide-react";
+import type { PlayerCharacter, PlayerIcon } from "@initiative/domain";
+import { Check, Eye, Import, Minus, Plus, Users } from "lucide-react";
 import {
 	type FormEvent,
 	type RefObject,
@@ -7,6 +8,7 @@ import {
 	useState,
 } from "react";
 import type { SearchResult } from "../hooks/use-bestiary.js";
+import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map";
 import { Button } from "./ui/button.js";
 import { Input } from "./ui/input.js";

@@ -27,6 +29,9 @@ interface ActionBarProps {
 	onBulkImport?: () => void;
 	bulkImportDisabled?: boolean;
 	inputRef?: RefObject<HTMLInputElement | null>;
+	playerCharacters?: readonly PlayerCharacter[];
+	onAddFromPlayerCharacter?: (pc: PlayerCharacter) => void;
+	onManagePlayers?: () => void;
 }

 function creatureKey(r: SearchResult): string {
@@ -42,9 +47,13 @@ export function ActionBar({
 	onBulkImport,
 	bulkImportDisabled,
 	inputRef,
+	playerCharacters,
+	onAddFromPlayerCharacter,
+	onManagePlayers,
 }: ActionBarProps) {
 	const [nameInput, setNameInput] = useState("");
 	const [suggestions, setSuggestions] = useState<SearchResult[]>([]);
+	const [pcMatches, setPcMatches] = useState<PlayerCharacter[]>([]);
 	const [suggestionIndex, setSuggestionIndex] = useState(-1);
 	const [queued, setQueued] = useState<QueuedCreature | null>(null);
 	const [customInit, setCustomInit] = useState("");
@@ -73,6 +82,7 @@ export function ActionBar({
 		setQueued(null);
 		setNameInput("");
 		setSuggestions([]);
+		setPcMatches([]);
 		setSuggestionIndex(-1);
 	};

@@ -99,6 +109,7 @@ export function ActionBar({
 		onAddCombatant(nameInput, Object.keys(opts).length > 0 ? opts : undefined);
 		setNameInput("");
 		setSuggestions([]);
+		setPcMatches([]);
 		clearCustomFields();
 	};

@@ -106,13 +117,22 @@ export function ActionBar({
 		setNameInput(value);
 		setSuggestionIndex(-1);
 		let newSuggestions: SearchResult[] = [];
+		let newPcMatches: PlayerCharacter[] = [];
 		if (value.length >= 2) {
 			newSuggestions = bestiarySearch(value);
 			setSuggestions(newSuggestions);
+			if (playerCharacters && playerCharacters.length > 0) {
+				const lower = value.toLowerCase();
+				newPcMatches = playerCharacters.filter((pc) =>
+					pc.name.toLowerCase().includes(lower),
+				);
+			}
+			setPcMatches(newPcMatches);
 		} else {
 			setSuggestions([]);
+			setPcMatches([]);
 		}
-		if (newSuggestions.length > 0) {
+		if (newSuggestions.length > 0 || newPcMatches.length > 0) {
 			clearCustomFields();
 		}
 		if (queued) {
@@ -141,8 +161,10 @@ export function ActionBar({
 		}
 	};

+	const hasSuggestions = suggestions.length > 0 || pcMatches.length > 0;
+
 	const handleKeyDown = (e: React.KeyboardEvent) => {
-		if (suggestions.length === 0) return;
+		if (!hasSuggestions) return;

 		if (e.key === "ArrowDown") {
 			e.preventDefault();
@@ -157,6 +179,7 @@ export function ActionBar({
 			setQueued(null);
 			setSuggestionIndex(-1);
 			setSuggestions([]);
+			setPcMatches([]);
 		}
 	};

@@ -238,7 +261,7 @@ export function ActionBar({
 						placeholder="+ Add combatants"
 						className="max-w-xs"
 					/>
-					{suggestions.length > 0 && (
+					{hasSuggestions && (
 						<div className="absolute bottom-full z-50 mb-1 w-full max-w-xs rounded-md border border-border bg-card shadow-lg">
 							<button
 								type="button"
@@ -246,6 +269,7 @@ export function ActionBar({
 								onMouseDown={(e) => e.preventDefault()}
 								onClick={() => {
 									setSuggestions([]);
+									setPcMatches([]);
 									setQueued(null);
 									setSuggestionIndex(-1);
 								}}
@@ -256,90 +280,133 @@ export function ActionBar({
 									Esc
 								</kbd>
 							</button>
-							<ul className="max-h-48 overflow-y-auto py-1">
-								{suggestions.map((result, i) => {
-									const key = creatureKey(result);
-									const isQueued =
-										queued !== null && creatureKey(queued.result) === key;
-									return (
-										<li key={key}>
-											<button
-												type="button"
-												className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-sm ${
-													isQueued
-														? "bg-accent/30 text-foreground"
-														: i === suggestionIndex
-															? "bg-accent/20 text-foreground"
-															: "text-foreground hover:bg-hover-neutral-bg"
-												}`}
-												onMouseDown={(e) => e.preventDefault()}
-												onClick={() => handleClickSuggestion(result)}
-												onMouseEnter={() => setSuggestionIndex(i)}
-											>
-												<span>{result.name}</span>
-												<span className="flex items-center gap-1 text-xs text-muted-foreground">
-													{isQueued ? (
-														<>
-															<button
-																type="button"
-																className="rounded p-0.5 text-foreground hover:bg-accent/40"
-																onMouseDown={(e) => e.preventDefault()}
-																onClick={(e) => {
-																	e.stopPropagation();
-																	if (queued.count <= 1) {
-																		setQueued(null);
-																	} else {
-																		setQueued({
-																			...queued,
-																			count: queued.count - 1,
-																		});
-																	}
-																}}
-															>
-																<Minus className="h-3 w-3" />
-															</button>
-															<span className="min-w-5 rounded-full bg-accent px-1.5 py-0.5 text-center font-medium text-foreground">
-																{queued.count}
+							<div className="max-h-48 overflow-y-auto py-1">
+								{pcMatches.length > 0 && (
+									<>
+										<div className="px-3 py-1 text-xs font-medium text-muted-foreground">
+											Players
+										</div>
+										<ul>
+											{pcMatches.map((pc) => {
+												const PcIcon = PLAYER_ICON_MAP[pc.icon as PlayerIcon];
+												const pcColor =
+													PLAYER_COLOR_HEX[
+														pc.color as keyof typeof PLAYER_COLOR_HEX
+													];
+												return (
+													<li key={pc.id}>
+														<button
+															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"
+															onMouseDown={(e) => e.preventDefault()}
+															onClick={() => {
+																onAddFromPlayerCharacter?.(pc);
+																setNameInput("");
+																setSuggestions([]);
+																setPcMatches([]);
+															}}
+														>
+															{PcIcon && (
+																<PcIcon size={14} style={{ color: pcColor }} />
+															)}
+															<span className="flex-1 truncate">{pc.name}</span>
+															<span className="text-xs text-muted-foreground">
+																Player
 															</span>
-															<button
-																type="button"
-																className="rounded p-0.5 text-foreground hover:bg-accent/40"
-																onMouseDown={(e) => e.preventDefault()}
-																onClick={(e) => {
-																	e.stopPropagation();
-																	setQueued({
-																		...queued,
-																		count: queued.count + 1,
-																	});
-																}}
-															>
-																<Plus className="h-3 w-3" />
-															</button>
-															<button
-																type="button"
-																className="ml-0.5 rounded p-0.5 text-foreground hover:bg-accent/40"
-																onMouseDown={(e) => e.preventDefault()}
-																onClick={(e) => {
-																	e.stopPropagation();
-																	confirmQueued();
-																}}
-															>
-																<Check className="h-3.5 w-3.5" />
-															</button>
-														</>
-													) : (
-														result.sourceDisplayName
-													)}
-												</span>
-											</button>
-										</li>
-									);
-								})}
-							</ul>
+														</button>
+													</li>
+												);
+											})}
+										</ul>
+									</>
+								)}
+								{suggestions.length > 0 && (
+									<ul>
+										{suggestions.map((result, i) => {
+											const key = creatureKey(result);
+											const isQueued =
+												queued !== null && creatureKey(queued.result) === key;
+											return (
+												<li key={key}>
+													<button
+														type="button"
+														className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-sm ${
+															isQueued
+																? "bg-accent/30 text-foreground"
+																: i === suggestionIndex
+																	? "bg-accent/20 text-foreground"
+																	: "text-foreground hover:bg-hover-neutral-bg"
+														}`}
+														onMouseDown={(e) => e.preventDefault()}
+														onClick={() => handleClickSuggestion(result)}
+														onMouseEnter={() => setSuggestionIndex(i)}
+													>
+														<span>{result.name}</span>
+														<span className="flex items-center gap-1 text-xs text-muted-foreground">
+															{isQueued ? (
+																<>
+																	<button
+																		type="button"
+																		className="rounded p-0.5 text-foreground hover:bg-accent/40"
+																		onMouseDown={(e) => e.preventDefault()}
+																		onClick={(e) => {
+																			e.stopPropagation();
+																			if (queued.count <= 1) {
+																				setQueued(null);
+																			} else {
+																				setQueued({
+																					...queued,
+																					count: queued.count - 1,
+																				});
+																			}
+																		}}
+																	>
+																		<Minus className="h-3 w-3" />
+																	</button>
+																	<span className="min-w-5 rounded-full bg-accent px-1.5 py-0.5 text-center font-medium text-foreground">
+																		{queued.count}
+																	</span>
+																	<button
+																		type="button"
+																		className="rounded p-0.5 text-foreground hover:bg-accent/40"
+																		onMouseDown={(e) => e.preventDefault()}
+																		onClick={(e) => {
+																			e.stopPropagation();
+																			setQueued({
+																				...queued,
+																				count: queued.count + 1,
+																			});
+																		}}
+																	>
+																		<Plus className="h-3 w-3" />
+																	</button>
+																	<button
+																		type="button"
+																		className="ml-0.5 rounded p-0.5 text-foreground hover:bg-accent/40"
+																		onMouseDown={(e) => e.preventDefault()}
+																		onClick={(e) => {
+																			e.stopPropagation();
+																			confirmQueued();
+																		}}
+																	>
+																		<Check className="h-3.5 w-3.5" />
+																	</button>
+																</>
+															) : (
+																result.sourceDisplayName
+															)}
+														</span>
+													</button>
+												</li>
+											);
+										})}
+									</ul>
+								)}
+							</div>
 						</div>
 					)}
 				</div>
-				{nameInput.length >= 2 && suggestions.length === 0 && (
+				{nameInput.length >= 2 && !hasSuggestions && (
 					<div className="flex items-center gap-2">
 						<Input
 							type="text"
@@ -370,6 +437,17 @@ export function ActionBar({
 				<Button type="submit" size="sm">
 					Add
 				</Button>
+				{onManagePlayers && (
+					<Button
+						type="button"
+						size="sm"
+						variant="ghost"
+						onClick={onManagePlayers}
+						title="Player characters"
+					>
+						<Users className="h-4 w-4" />
+					</Button>
+				)}
 				{bestiaryLoaded && onViewStatBlock && (
 					<div ref={viewerRef} className="relative">
 						<Button
--- a/apps/web/src/components/color-palette.tsx
+++ b/apps/web/src/components/color-palette.tsx
@@ -0,0 +1,36 @@
+import { VALID_PLAYER_COLORS } from "@initiative/domain";
+import { cn } from "../lib/utils";
+import { PLAYER_COLOR_HEX } from "./player-icon-map";
+
+interface ColorPaletteProps {
+	value: string;
+	onChange: (color: string) => void;
+}
+
+const COLORS = [...VALID_PLAYER_COLORS] as string[];
+
+export function ColorPalette({ value, onChange }: ColorPaletteProps) {
+	return (
+		<div className="flex flex-wrap gap-2">
+			{COLORS.map((color) => (
+				<button
+					key={color}
+					type="button"
+					onClick={() => onChange(color)}
+					className={cn(
+						"h-8 w-8 rounded-full transition-all",
+						value === color
+							? "ring-2 ring-foreground ring-offset-2 ring-offset-background scale-110"
+							: "hover:scale-110",
+					)}
+					style={{
+						backgroundColor:
+							PLAYER_COLOR_HEX[color as keyof typeof PLAYER_COLOR_HEX],
+					}}
+					aria-label={color}
+					title={color}
+				/>
+			))}
+		</div>
+	);
+}
--- a/apps/web/src/components/combatant-row.tsx
+++ b/apps/web/src/components/combatant-row.tsx
@@ -2,6 +2,7 @@ import {
 	type CombatantId,
 	type ConditionId,
 	deriveHpStatus,
+	type PlayerIcon,
 } from "@initiative/domain";
 import { Brain, X } from "lucide-react";
 import { type Ref, useCallback, useEffect, useRef, useState } from "react";
@@ -11,6 +12,7 @@ import { ConditionPicker } from "./condition-picker";
 import { ConditionTags } from "./condition-tags";
 import { D20Icon } from "./d20-icon";
 import { HpAdjustPopover } from "./hp-adjust-popover";
+import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map";
 import { ConfirmButton } from "./ui/confirm-button";
 import { Input } from "./ui/input";

@@ -23,6 +25,8 @@ interface Combatant {
 	readonly ac?: number;
 	readonly conditions?: readonly ConditionId[];
 	readonly isConcentrating?: boolean;
+	readonly color?: string;
+	readonly icon?: string;
 }

 interface CombatantRowProps {
@@ -478,6 +482,11 @@ export function CombatantRow({
 		}
 	}, [combatant.isConcentrating]);

+	const pcColor =
+		combatant.color && !isActive && !combatant.isConcentrating
+			? PLAYER_COLOR_HEX[combatant.color as keyof typeof PLAYER_COLOR_HEX]
+			: undefined;
+
 	return (
 		/* biome-ignore lint/a11y/noStaticElementInteractions: role="button" is set conditionally when onShowStatBlock exists */
 		<div
@@ -490,6 +499,7 @@ export function CombatantRow({
 				isPulsing && "animate-concentration-pulse",
 				onShowStatBlock && "cursor-pointer",
 			)}
+			style={pcColor ? { borderLeftColor: pcColor } : undefined}
 			onClick={onShowStatBlock}
 			onKeyDown={
 				onShowStatBlock ? activateOnKeyDown(onShowStatBlock) : undefined
@@ -535,6 +545,22 @@ export function CombatantRow({
 						dimmed && "opacity-50",
 					)}
 				>
+					{combatant.icon &&
+						combatant.color &&
+						(() => {
+							const PcIcon = PLAYER_ICON_MAP[combatant.icon as PlayerIcon];
+							const pcColor =
+								PLAYER_COLOR_HEX[
+									combatant.color as keyof typeof PLAYER_COLOR_HEX
+								];
+							return PcIcon ? (
+								<PcIcon
+									size={14}
+									style={{ color: pcColor }}
+									className="shrink-0"
+								/>
+							) : null;
+						})()}
 					<EditableName
 						name={name}
 						combatantId={id}
--- a/apps/web/src/components/create-player-modal.tsx
+++ b/apps/web/src/components/create-player-modal.tsx
@@ -0,0 +1,169 @@
+import type { PlayerCharacter } from "@initiative/domain";
+import { X } from "lucide-react";
+import { type FormEvent, useEffect, useState } from "react";
+import { ColorPalette } from "./color-palette";
+import { IconGrid } from "./icon-grid";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+interface CreatePlayerModalProps {
+	open: boolean;
+	onClose: () => void;
+	onSave: (
+		name: string,
+		ac: number,
+		maxHp: number,
+		color: string,
+		icon: string,
+	) => void;
+	playerCharacter?: PlayerCharacter;
+}
+
+export function CreatePlayerModal({
+	open,
+	onClose,
+	onSave,
+	playerCharacter,
+}: CreatePlayerModalProps) {
+	const [name, setName] = useState("");
+	const [ac, setAc] = useState("10");
+	const [maxHp, setMaxHp] = useState("10");
+	const [color, setColor] = useState("blue");
+	const [icon, setIcon] = useState("sword");
+	const [error, setError] = useState("");
+
+	const isEdit = !!playerCharacter;
+
+	useEffect(() => {
+		if (open) {
+			if (playerCharacter) {
+				setName(playerCharacter.name);
+				setAc(String(playerCharacter.ac));
+				setMaxHp(String(playerCharacter.maxHp));
+				setColor(playerCharacter.color);
+				setIcon(playerCharacter.icon);
+			} else {
+				setName("");
+				setAc("10");
+				setMaxHp("10");
+				setColor("blue");
+				setIcon("sword");
+			}
+			setError("");
+		}
+	}, [open, playerCharacter]);
+
+	if (!open) return null;
+
+	const handleSubmit = (e: FormEvent) => {
+		e.preventDefault();
+		const trimmed = name.trim();
+		if (trimmed === "") {
+			setError("Name is required");
+			return;
+		}
+		const acNum = Number.parseInt(ac, 10);
+		if (Number.isNaN(acNum) || acNum < 0) {
+			setError("AC must be a non-negative number");
+			return;
+		}
+		const hpNum = Number.parseInt(maxHp, 10);
+		if (Number.isNaN(hpNum) || hpNum < 1) {
+			setError("Max HP must be at least 1");
+			return;
+		}
+		onSave(trimmed, acNum, hpNum, color, icon);
+		onClose();
+	};
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+			<div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl">
+				<div className="mb-4 flex items-center justify-between">
+					<h2 className="text-lg font-semibold text-foreground">
+						{isEdit ? "Edit Player" : "Create Player"}
+					</h2>
+					<button
+						type="button"
+						onClick={onClose}
+						className="text-muted-foreground hover:text-foreground transition-colors"
+					>
+						<X size={20} />
+					</button>
+				</div>
+
+				<form onSubmit={handleSubmit} className="flex flex-col gap-4">
+					<div>
+						<span className="mb-1 block text-sm text-muted-foreground">
+							Name
+						</span>
+						<Input
+							type="text"
+							value={name}
+							onChange={(e) => {
+								setName(e.target.value);
+								setError("");
+							}}
+							placeholder="Character name"
+							aria-label="Name"
+							autoFocus
+						/>
+						{error && <p className="mt-1 text-sm text-destructive">{error}</p>}
+					</div>
+
+					<div className="flex gap-3">
+						<div className="flex-1">
+							<span className="mb-1 block text-sm text-muted-foreground">
+								AC
+							</span>
+							<Input
+								type="text"
+								inputMode="numeric"
+								value={ac}
+								onChange={(e) => setAc(e.target.value)}
+								placeholder="AC"
+								aria-label="AC"
+								className="text-center"
+							/>
+						</div>
+						<div className="flex-1">
+							<span className="mb-1 block text-sm text-muted-foreground">
+								Max HP
+							</span>
+							<Input
+								type="text"
+								inputMode="numeric"
+								value={maxHp}
+								onChange={(e) => setMaxHp(e.target.value)}
+								placeholder="Max HP"
+								aria-label="Max HP"
+								className="text-center"
+							/>
+						</div>
+					</div>
+
+					<div>
+						<span className="mb-2 block text-sm text-muted-foreground">
+							Color
+						</span>
+						<ColorPalette value={color} onChange={setColor} />
+					</div>
+
+					<div>
+						<span className="mb-2 block text-sm text-muted-foreground">
+							Icon
+						</span>
+						<IconGrid value={icon} onChange={setIcon} />
+					</div>
+
+					<div className="flex justify-end gap-2 pt-2">
+						<Button type="button" variant="ghost" onClick={onClose}>
+							Cancel
+						</Button>
+						<Button type="submit">{isEdit ? "Save" : "Create"}</Button>
+					</div>
+				</form>
+			</div>
+		</div>
+	);
+}
--- a/apps/web/src/components/icon-grid.tsx
+++ b/apps/web/src/components/icon-grid.tsx
@@ -0,0 +1,38 @@
+import type { PlayerIcon } from "@initiative/domain";
+import { VALID_PLAYER_ICONS } from "@initiative/domain";
+import { cn } from "../lib/utils";
+import { PLAYER_ICON_MAP } from "./player-icon-map";
+
+interface IconGridProps {
+	value: string;
+	onChange: (icon: string) => void;
+}
+
+const ICONS = [...VALID_PLAYER_ICONS] as PlayerIcon[];
+
+export function IconGrid({ value, onChange }: IconGridProps) {
+	return (
+		<div className="flex flex-wrap gap-2">
+			{ICONS.map((iconId) => {
+				const Icon = PLAYER_ICON_MAP[iconId];
+				return (
+					<button
+						key={iconId}
+						type="button"
+						onClick={() => onChange(iconId)}
+						className={cn(
+							"flex h-9 w-9 items-center justify-center rounded-md transition-all",
+							value === iconId
+								? "bg-primary/20 ring-2 ring-primary text-foreground"
+								: "text-muted-foreground hover:bg-card hover:text-foreground",
+						)}
+						aria-label={iconId}
+						title={iconId}
+					>
+						<Icon size={20} />
+					</button>
+				);
+			})}
+		</div>
+	);
+}
--- a/apps/web/src/components/player-icon-map.ts
+++ b/apps/web/src/components/player-icon-map.ts
@@ -0,0 +1,50 @@
+import type { PlayerColor, PlayerIcon } from "@initiative/domain";
+import type { LucideIcon } from "lucide-react";
+import {
+	Axe,
+	Crosshair,
+	Crown,
+	Eye,
+	Feather,
+	Flame,
+	Heart,
+	Moon,
+	Shield,
+	Skull,
+	Star,
+	Sun,
+	Sword,
+	Wand,
+	Zap,
+} from "lucide-react";
+
+export const PLAYER_ICON_MAP: Record<PlayerIcon, LucideIcon> = {
+	sword: Sword,
+	shield: Shield,
+	skull: Skull,
+	heart: Heart,
+	wand: Wand,
+	flame: Flame,
+	crown: Crown,
+	star: Star,
+	moon: Moon,
+	sun: Sun,
+	axe: Axe,
+	crosshair: Crosshair,
+	eye: Eye,
+	feather: Feather,
+	zap: Zap,
+};
+
+export const PLAYER_COLOR_HEX: Record<PlayerColor, string> = {
+	red: "#ef4444",
+	blue: "#3b82f6",
+	green: "#22c55e",
+	purple: "#a855f7",
+	orange: "#f97316",
+	pink: "#ec4899",
+	cyan: "#06b6d4",
+	yellow: "#eab308",
+	emerald: "#10b981",
+	indigo: "#6366f1",
+};
--- a/apps/web/src/components/player-management.tsx
+++ b/apps/web/src/components/player-management.tsx
@@ -0,0 +1,105 @@
+import type {
+	PlayerCharacter,
+	PlayerCharacterId,
+	PlayerIcon,
+} from "@initiative/domain";
+import { Pencil, Plus, X } from "lucide-react";
+import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map";
+import { Button } from "./ui/button";
+import { ConfirmButton } from "./ui/confirm-button";
+
+interface PlayerManagementProps {
+	open: boolean;
+	onClose: () => void;
+	characters: readonly PlayerCharacter[];
+	onEdit: (pc: PlayerCharacter) => void;
+	onDelete: (id: PlayerCharacterId) => void;
+	onCreate: () => void;
+}
+
+export function PlayerManagement({
+	open,
+	onClose,
+	characters,
+	onEdit,
+	onDelete,
+	onCreate,
+}: PlayerManagementProps) {
+	if (!open) return null;
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+			<div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl">
+				<div className="mb-4 flex items-center justify-between">
+					<h2 className="text-lg font-semibold text-foreground">
+						Player Characters
+					</h2>
+					<button
+						type="button"
+						onClick={onClose}
+						className="text-muted-foreground hover:text-foreground transition-colors"
+					>
+						<X size={20} />
+					</button>
+				</div>
+
+				{characters.length === 0 ? (
+					<div className="flex flex-col items-center gap-3 py-8 text-center">
+						<p className="text-muted-foreground">No player characters yet</p>
+						<Button onClick={onCreate} size="sm">
+							<Plus size={16} />
+							Create your first player character
+						</Button>
+					</div>
+				) : (
+					<div className="flex flex-col gap-1">
+						{characters.map((pc) => {
+							const Icon = PLAYER_ICON_MAP[pc.icon as PlayerIcon];
+							const color =
+								PLAYER_COLOR_HEX[pc.color as keyof typeof PLAYER_COLOR_HEX];
+							return (
+								<div
+									key={pc.id}
+									className="group flex items-center gap-3 rounded-md px-3 py-2 hover:bg-background/50"
+								>
+									{Icon && (
+										<Icon size={18} style={{ color }} className="shrink-0" />
+									)}
+									<span className="flex-1 truncate text-sm text-foreground">
+										{pc.name}
+									</span>
+									<span className="text-xs tabular-nums text-muted-foreground">
+										AC {pc.ac}
+									</span>
+									<span className="text-xs tabular-nums text-muted-foreground">
+										HP {pc.maxHp}
+									</span>
+									<button
+										type="button"
+										onClick={() => onEdit(pc)}
+										className="text-muted-foreground hover:text-foreground transition-colors"
+										title="Edit"
+									>
+										<Pencil size={14} />
+									</button>
+									<ConfirmButton
+										icon={<X size={14} />}
+										label="Delete player character"
+										onConfirm={() => onDelete(pc.id)}
+										className="h-6 w-6 text-muted-foreground"
+									/>
+								</div>
+							);
+						})}
+						<div className="mt-2 flex justify-end">
+							<Button onClick={onCreate} size="sm" variant="ghost">
+								<Plus size={16} />
+								Add
+							</Button>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}