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({
}
+ icon={}
label="Delete player character"
onConfirm={() => onDelete(pc.id)}
className="h-6 w-6 text-muted-foreground"