feat(overlay): open/close overlay on keypress

packages/astro/src/overlay/index.ts

@@ -48,6 +48,14 @@ export default {
           }),
         );
       }, 500);
+
+      eventTarget.dispatchEvent(
+        new CustomEvent('toggle-plugin', {
+          detail: {
+            state: true,
+          },
+        }),
+      );
     });
 
     Spotlight.onSevereEvent(() => {

packages/overlay/src/App.tsx

@@ -5,6 +5,7 @@ import Trigger from './components/Trigger';
 import type { Integration, IntegrationData } from './integrations/integration';
 import { getSpotlightEventTarget } from './lib/eventTarget';
 import { log } from './lib/logger';
+import useKeyPress from './lib/useKeyPress';
 import { connectToSidecar } from './sidecar';
 import { NotificationCount, SpotlightOverlayOptions } from './types';
 
@@ -25,6 +26,14 @@ export default function App({
   const [triggerButtonCount, setTriggerButtonCount] = useState<NotificationCount>({ count: 0, severe: false });
   const [isOpen, setOpen] = useState(openOnInit);
 
+  useKeyPress(['ctrlKey', 'shiftKey', 's'], () => {
+    setOpen(prev => !prev);
+  });
+
+  useKeyPress(['metaKey', 'shiftKey', 's'], () => {
+    setOpen(prev => !prev);
+  });
+
   useEffect(() => {
     // Map that holds the information which kind of content type should be dispatched to which integration(s)
     const contentTypeToIntegrations = new Map<string, Integration[]>();

packages/overlay/src/components/Tabs.tsx

@@ -34,7 +34,7 @@
   const navigate = useNavigate();
   const location = useLocation();
 
-  useKeyPress('Escape', () => {
+  useKeyPress(['Escape'], () => {
     if (setOpen && location.pathname.split('/').length === 2) {
       setOpen(false);
     } else {

packages/overlay/src/components/Trigger.tsx

@@ -76,6 +76,7 @@ export default function Trigger({
         getAnchorClasses(anchor),
         isOpen ? '!hidden' : '',
       )}
+      title="Spotlight by Sentry"
       onClick={() => setOpen(!isOpen)}
     >
       <ToolbarItem count={countSum} severe={Boolean(notificationCount.severe)}>

packages/overlay/src/lib/useKeyPress.ts

@@ -2,17 +2,27 @@
 
 /**
  * useKeyPress
- * @param {string} key - the name of the key to respond to, compared against event.key
+ * @param {string[]} keys - an array of keys to respond to, compared against event.key
  * @param {function} action - the action to perform on key press
+ * @param {boolean} propagate - whether to stop event propagation (default is false)
  */
-// https://www.caktusgroup.com/blog/2020/07/01/usekeypress-hook-react/
-export default function useKeyPress(key: string, action: () => void, propagate = false) {
+export default function useKeyPress(keys: string[], action: () => void, propagate = false) {
   useEffect(() => {
     function onKeyup(e: KeyboardEvent) {
       if (!propagate) e.stopPropagation();
-      if (e.key === key) action();
+
+      if (
+        keys.every((key: string) => {
+          if (key in e) return e[key as keyof KeyboardEvent];
+          return e.key.toLowerCase() === key.toLowerCase();
+        })
+      ) {
+        action();
+      }
     }
+
     window.addEventListener('keyup', onKeyup);
+
     return () => window.removeEventListener('keyup', onKeyup);
-  }, [key, action, propagate]);
+  }, [keys, action, propagate]);
 }