fix(webapp): make the admin Cmd+Esc shortcut work globally

The admin shortcut (Cmd/Ctrl+Esc to open the admin dashboard, or to stop
impersonating while impersonating) was registered inside the account menu, which
only mounts on project pages. So it did nothing on the account, organization
settings and admin pages.

Move it into a GlobalShortcuts component mounted once at the app root, so it
works on every page regardless of which side menu is rendered, and remove the
account-menu registration so it never fires twice. GlobalShortcuts is the place
to add future app-wide shortcuts.

Author: samejr

apps/webapp/app/components/GlobalShortcuts.tsx

@@ -0,0 +1,37 @@
+import { useNavigate, useSubmit } from "@remix-run/react";
+import { useShortcutKeys } from "~/hooks/useShortcutKeys";
+import { useOptionalUser } from "~/hooks/useUser";
+import { adminPath } from "~/utils/pathBuilder";
+
+/**
+ * App-wide keyboard shortcuts, mounted once at the root so they work on every page regardless of
+ * which side menu (if any) is rendered. Add new global shortcuts here.
+ *
+ * Renders nothing. Reads the user from the root loader via `useOptionalUser`, so on unauthenticated
+ * pages there is simply no admin and nothing is registered.
+ */
+export function GlobalShortcuts() {
+  const user = useOptionalUser();
+  const navigate = useNavigate();
+  const submit = useSubmit();
+
+  const isImpersonating = Boolean(user?.isImpersonating);
+  const isAdmin = Boolean(user?.admin) || isImpersonating;
+
+  // ⌘/Ctrl+Esc: admins jump to the admin dashboard; while impersonating the same shortcut stops
+  // impersonating instead. `enabledOnInputElements` so it still fires while a field is focused.
+  useShortcutKeys({
+    shortcut: isAdmin
+      ? { modifiers: ["mod"], key: "esc", enabledOnInputElements: true }
+      : undefined,
+    action: () => {
+      if (isImpersonating) {
+        submit(null, { action: "/resources/impersonation", method: "delete" });
+      } else {
+        navigate(adminPath());
+      }
+    },
+  });
+
+  return null;
+}

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -3,7 +3,7 @@ import {
   ChevronRightIcon,
   ExclamationTriangleIcon,
 } from "@heroicons/react/24/outline";
-import { useFetcher, useNavigate, useNavigation, useSubmit } from "@remix-run/react";
+import { useFetcher, useNavigation, useSubmit } from "@remix-run/react";
 import { LayoutGroup, motion } from "framer-motion";
 import {
   type CSSProperties,
@@ -1490,29 +1490,13 @@ function AccountMenuItems({
 function AccountMenu({ isAdmin, isImpersonating }: { isAdmin: boolean; isImpersonating: boolean }) {
   const [isOpen, setIsOpen] = useState(false);
   const navigation = useNavigation();
-  const navigate = useNavigate();
-  const submit = useSubmit();
 
   useEffect(() => {
     setIsOpen(false);
   }, [navigation.location?.pathname]);
 
-  const stopImpersonating = () =>
-    submit(null, { action: "/resources/impersonation", method: "delete" });
-
-  useShortcutKeys({
-    shortcut: isAdmin
-      ? { modifiers: ["mod"], key: "esc", enabledOnInputElements: true }
-      : undefined,
-    action: () => {
-      if (isImpersonating) {
-        stopImpersonating();
-      } else {
-        navigate(adminPath());
-      }
-    },
-  });
-
+  // The ⌘/Ctrl+Esc admin shortcut lives in <GlobalShortcuts> so it works everywhere, not only where
+  // this menu is mounted.
   return (
     <Popover onOpenChange={(open) => setIsOpen(open)} open={isOpen}>
       <SimpleTooltip

apps/webapp/app/root.tsx

@@ -7,6 +7,7 @@ import type { ToastMessage } from "~/models/message.server";
 import { commitSession, getSession } from "~/models/message.server";
 import tailwindStylesheetUrl from "~/tailwind.css";
 import { RouteErrorDisplay } from "./components/ErrorDisplay";
+import { GlobalShortcuts } from "./components/GlobalShortcuts";
 import { AppContainer, MainCenteredContainer } from "./components/layout/AppLayout";
 import { ShortcutsProvider } from "./components/primitives/ShortcutsProvider";
 import { Toast } from "./components/primitives/Toast";
@@ -131,6 +132,7 @@ export default function App() {
         <body className="h-full overflow-hidden bg-background-dimmed antialiased">
           <ShortcutsProvider>
             <TimezoneSetter />
+            <GlobalShortcuts />
             <Outlet />
             <Toast />
           </ShortcutsProvider>