Creates a wrapper provider to block shortcuts while kapa modal is open (has bugs)

Author: samejr

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

@@ -2,7 +2,6 @@ import {
   ArrowUpRightIcon,
   BookOpenIcon,
   CalendarDaysIcon,
-  ChatBubbleLeftEllipsisIcon,
   EnvelopeIcon,
   LightBulbIcon,
   QuestionMarkCircleIcon,
@@ -13,6 +12,7 @@ import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons";
 import { Fragment, useState } from "react";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { Feedback } from "../Feedback";
+import { Shortcuts } from "../Shortcuts";
 import { StepContentContainer } from "../StepContentContainer";
 import { Button } from "../primitives/Buttons";
 import { ClipboardField } from "../primitives/ClipboardField";
@@ -22,7 +22,6 @@ import { Paragraph } from "../primitives/Paragraph";
 import { Popover, PopoverContent, PopoverSideMenuTrigger } from "../primitives/Popover";
 import { StepNumber } from "../primitives/StepNumber";
 import { MenuCount, SideMenuItem } from "./SideMenuItem";
-import { Shortcuts } from "../Shortcuts";
 
 export function HelpAndFeedback({ disableShortcut = false }: { disableShortcut?: boolean }) {
   const [isHelpMenuOpen, setHelpMenuOpen] = useState(false);

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

@@ -81,6 +81,7 @@ import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
 import { ShortcutKey } from "../primitives/ShortcutKey";
 import { useFeatures } from "~/hooks/useFeatures";
 import { useKapa } from "~/root";
+import { useShortcuts } from "~/components/primitives/ShortcutsProvider";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 export type SideMenuProject = Pick<
@@ -550,6 +551,7 @@ function HelpAndAI() {
   const [isKapaOpen, setIsKapaOpen] = useState(false);
   const features = useFeatures();
   const kapa = useKapa();
+  const { disableShortcuts, enableShortcuts } = useShortcuts();
 
   useEffect(() => {
     if (!features.isManagedCloud || !kapa?.websiteId) return;
@@ -559,13 +561,19 @@ function HelpAndAI() {
     // Define the handler function
     const handleModalClose = () => {
       setIsKapaOpen(false);
+      enableShortcuts();
     };
 
     const kapaInterval = setInterval(() => {
       if (typeof window.Kapa === "function") {
         clearInterval(kapaInterval);
         window.Kapa("render");
         window.Kapa("onModalClose", handleModalClose);
+        // Register onModalOpen handler
+        window.Kapa("onModalOpen", () => {
+          setIsKapaOpen(true);
+          disableShortcuts();
+        });
       }
     }, 100);
 
@@ -576,7 +584,7 @@ function HelpAndAI() {
         window.Kapa("unmount");
       }
     };
-  }, [features.isManagedCloud, kapa?.websiteId]);
+  }, [features.isManagedCloud, kapa?.websiteId, disableShortcuts, enableShortcuts]);
 
   return (
     <>
@@ -595,6 +603,7 @@ function HelpAndAI() {
                   if (typeof window.Kapa === "function") {
                     window.Kapa("open");
                     setIsKapaOpen(true);
+                    disableShortcuts();
                   }
                 }}
               >

apps/webapp/app/components/primitives/ShortcutsProvider.tsx

@@ -0,0 +1,40 @@
+import { createContext, useContext, useState, type ReactNode } from "react";
+
+type ShortcutsContextType = {
+  areShortcutsEnabled: boolean;
+  disableShortcuts: () => void;
+  enableShortcuts: () => void;
+};
+
+const ShortcutsContext = createContext<ShortcutsContextType | null>(null);
+
+type ShortcutsProviderProps = {
+  children: ReactNode;
+};
+
+export function ShortcutsProvider({ children }: ShortcutsProviderProps) {
+  const [areShortcutsEnabled, setAreShortcutsEnabled] = useState(true);
+
+  const disableShortcuts = () => setAreShortcutsEnabled(false);
+  const enableShortcuts = () => setAreShortcutsEnabled(true);
+
+  return (
+    <ShortcutsContext.Provider
+      value={{
+        areShortcutsEnabled,
+        disableShortcuts,
+        enableShortcuts,
+      }}
+    >
+      {children}
+    </ShortcutsContext.Provider>
+  );
+}
+
+const throwIfNoProvider = () => {
+  throw new Error("useShortcuts must be used within a ShortcutsProvider");
+};
+
+export const useShortcuts = () => {
+  return useContext(ShortcutsContext) ?? throwIfNoProvider();
+};

apps/webapp/app/hooks/useShortcutKeys.tsx

@@ -1,5 +1,6 @@
 import { useHotkeys } from "react-hotkeys-hook";
 import { useOperatingSystem } from "~/components/primitives/OperatingSystemProvider";
+import { useShortcuts } from "~/components/primitives/ShortcutsProvider";
 
 export type Modifier = "alt" | "ctrl" | "meta" | "shift" | "mod";
 
@@ -30,6 +31,7 @@ export function useShortcutKeys({
   enabledOnInputElements,
 }: useShortcutKeysProps) {
   const { platform } = useOperatingSystem();
+  const { areShortcutsEnabled } = useShortcuts();
   const isMac = platform === "mac";
   const relevantShortcut =
     shortcut && "mac" in shortcut ? (isMac ? shortcut.mac : shortcut.windows) : shortcut;
@@ -41,7 +43,7 @@ export function useShortcutKeys({
       action(event);
     },
     {
-      enabled: !disabled,
+      enabled: !disabled && areShortcutsEnabled,
       enableOnFormTags: enabledOnInputElements ?? relevantShortcut?.enabledOnInputElements,
       enableOnContentEditable: enabledOnInputElements ?? relevantShortcut?.enabledOnInputElements,
     }

apps/webapp/app/root.tsx

@@ -25,6 +25,7 @@ import { appEnvTitleTag } from "./utils";
 import { type Handle } from "./utils/handle";
 import { useEffect } from "react";
 import { useTypedMatchesData } from "./hooks/useTypedMatchData";
+import { ShortcutsProvider } from "./components/primitives/ShortcutsProvider";
 
 declare global {
   interface Window {
@@ -129,8 +130,10 @@ export default function App() {
           <Links />
         </head>
         <body className="bg-darkBackground h-full overflow-hidden">
-          <Outlet />
-          <Toast />
+          <ShortcutsProvider>
+            <Outlet />
+            <Toast />
+          </ShortcutsProvider>
           <ScrollRestoration />
           <ExternalScripts />
           <Scripts />