fix(webapp): move the admin shortcut to Cmd+Option+A (Cmd+Esc was uncapturable)

Cmd+Esc can't be captured on Chrome/macOS: the browser doesn't deliver an
Escape keydown to the page while a modifier is held, so no listener ever sees
it (confirmed with a Radix dialog, which closes on any Escape keydown, not
closing on Cmd+Esc). That is why the admin shortcut did nothing.

Switch it to Cmd+Option+A (Ctrl+Alt+A on Windows): an admin-only, two-modifier
combo that no user-facing or browser shortcut uses, and which is actually
delivered because it is a letter key. It is matched on event.code (KeyA) so it
still works when Option makes the key report an alternate character on macOS,
which is why it is a small raw listener in GlobalShortcuts rather than the
key-based shortcut hook. The account-menu badge now reads Cmd Option A.

Author: samejr

apps/webapp/app/components/GlobalShortcuts.tsx

@@ -1,14 +1,11 @@
 import { useNavigate, useSubmit } from "@remix-run/react";
-import { useShortcutKeys } from "~/hooks/useShortcutKeys";
+import { useEffect } from "react";
 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.
+ * which side menu (if any) is rendered. Renders nothing.
  */
 export function GlobalShortcuts() {
   const user = useOptionalUser();
@@ -18,20 +15,33 @@ export function GlobalShortcuts() {
   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: () => {
+  useEffect(() => {
+    if (!isAdmin) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      // Admin-only escape hatch: Cmd+Option+A (Ctrl+Alt+A on Windows) opens the admin dashboard, or
+      // stops impersonating while impersonating. Two modifiers keep it clear of every user-facing
+      // shortcut, and it deliberately avoids Escape (Chrome/macOS never delivers a keydown for
+      // Escape while a modifier is held, which is why the old Cmd+Esc did nothing).
+      //
+      // Matched on `event.code` (the physical key) rather than `event.key`, because holding Option
+      // on macOS makes the "A" key report an alternate character ("å"); the physical code stays
+      // `KeyA` regardless. This is why it's a raw listener and not the `useShortcutKeys` hook, which
+      // matches on `event.key`.
+      if (event.code !== "KeyA" || !event.altKey || !(event.metaKey || event.ctrlKey)) {
+        return;
+      }
+      event.preventDefault();
       if (isImpersonating) {
         submit(null, { action: "/resources/impersonation", method: "delete" });
       } else {
         navigate(adminPath());
       }
-    },
-  });
+    };
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isAdmin, isImpersonating, navigate, submit]);
 
   return null;
 }

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

@@ -1420,10 +1420,10 @@ function AccountMenuItems({
               title={
                 <div className="flex w-full items-center justify-between">
                   <span className={IMPERSONATION_ACCENT.text}>Stop impersonating</span>
-                  <span className="flex items-center gap-1">
-                    <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
-                    <ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
-                  </span>
+                  <ShortcutKey
+                    shortcut={{ modifiers: ["mod", "alt"], key: "a" }}
+                    variant="medium/bright"
+                  />
                 </div>
               }
               icon={UserCrossIcon}
@@ -1437,10 +1437,10 @@ function AccountMenuItems({
               title={
                 <div className="flex w-full items-center justify-between">
                   <span>Admin dashboard</span>
-                  <span className="flex items-center gap-1">
-                    <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
-                    <ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
-                  </span>
+                  <ShortcutKey
+                    shortcut={{ modifiers: ["mod", "alt"], key: "a" }}
+                    variant="medium/bright"
+                  />
                 </div>
               }
               icon={HomeIcon}