Feat: close any modal with esc

src/components/overlays/OverlayDisplay.tsx

@@ -140,7 +140,7 @@ export function OverlayPortal(props: {
                   clickOutsideDeactivates: true,
                   fallbackFocus: () => document.body,
                   returnFocusOnDeactivate: true,
-                  escapeDeactivates: true,
+                  escapeDeactivates: false, // Let our keyboard handler manage escape
                   preventScroll: true,
                   // Disable the problematic check that causes the matches.call error
                   checkCanFocusTrap: () => Promise.resolve(),

src/hooks/useGlobalKeyboardEvents.ts

@@ -0,0 +1,38 @@
+import { useEffect } from "react";
+
+import { useOverlayStack } from "@/stores/interface/overlayStack";
+
+/**
+ * Global keyboard event handler that works across the entire application.
+ * Handles Escape key to close modals and other global shortcuts.
+ */
+export function useGlobalKeyboardEvents() {
+  const { getTopModal, hideModal } = useOverlayStack();
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Don't handle keyboard events if user is typing in an input
+      if (
+        event.target &&
+        (event.target as HTMLInputElement).nodeName === "INPUT"
+      ) {
+        return;
+      }
+
+      // Handle Escape key to close modals
+      if (event.key === "Escape") {
+        const topModal = getTopModal();
+        if (topModal) {
+          hideModal(topModal);
+        }
+      }
+    };
+
+    // Add event listener to document for global coverage
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [getTopModal, hideModal]);
+}

src/setup/App.tsx

@@ -12,6 +12,7 @@ import {
 import { convertLegacyUrl, isLegacyUrl } from "@/backend/metadata/getmeta";
 import { generateQuickSearchMediaUrl } from "@/backend/metadata/tmdb";
 import { NotificationModal } from "@/components/overlays/notificationsModal";
+import { useGlobalKeyboardEvents } from "@/hooks/useGlobalKeyboardEvents";
 import { useOnlineListener } from "@/hooks/usePing";
 import { AboutPage } from "@/pages/About";
 import { AdminPage } from "@/pages/admin/AdminPage";
@@ -100,6 +101,7 @@ export const maintenanceTime = "March 31th 11:00 PM - 5:00 AM EST";
 function App() {
   useHistoryListener();
   useOnlineListener();
+  useGlobalKeyboardEvents();
   const maintenance = false; // Shows maintance page
   const [showDowntime, setShowDowntime] = useState(maintenance);