Improve player modals: Escape to close, trash icon for delete

Both player management and create/edit modals now close on Escape.
Delete player character button uses Trash2 icon instead of X to
distinguish permanent deletion from dismissal.

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

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) => {

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,6 +26,15 @@ 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 (
@@ -91,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"