From 76ca78c1692e8eb99b86f268e46d991f44e38341 Mon Sep 17 00:00:00 2001
From: Lukas <lukas.richter@maibornwolff.de>
Date: Fri, 13 Mar 2026 11:51:58 +0100
Subject: [PATCH] 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 |  9 +++++++++
 apps/web/src/components/player-management.tsx   | 14 ++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/create-player-modal.tsx b/apps/web/src/components/create-player-modal.tsx
index 77769d3..c725faf 100644
--- a/apps/web/src/components/create-player-modal.tsx
+++ b/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) => {
diff --git a/apps/web/src/components/player-management.tsx b/apps/web/src/components/player-management.tsx
index 3c72701..c20d214 100644
--- a/apps/web/src/components/player-management.tsx
+++ b/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"