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"