wip - include spotlight

package.json

@@ -58,6 +58,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
     "@sentry/types": "^8.30.0",
+    "@spotlightjs/overlay": "^2.9.0",
     "@tanstack/react-query": "^5.56.2",
     "@tanstack/react-virtual": "^3.10.8",
     "cva": "npm:class-variance-authority@^0.7.0",

src/lib/components/Navigation.tsx

@@ -15,6 +15,7 @@ import IconSettings from 'toolbar/components/icon/IconSettings';
 import {useApiProxyInstance} from 'toolbar/context/ApiProxyContext';
 import ConfigContext from 'toolbar/context/ConfigContext';
 import useNavigationExpansion from 'toolbar/hooks/useNavigationExpansion';
+import useSpotlightOverlay from 'toolbar/hooks/useSpotlightOverlay';
 import {DebugTarget} from 'toolbar/types/config';
 
 const navClassName = cx(['flex', 'flex-col', 'gap-1', 'p-1', 'items-center']);
@@ -50,6 +51,8 @@ export default function Navigation() {
   const navigate = useNavigate();
   const apiProxy = useApiProxyInstance();
 
+  const {showSpotlight, hideSpotlight} = useSpotlightOverlay();
+
   const toPathOrHome = (to: To) => ({
     to,
     onClick: (e: MouseEvent) => {
@@ -106,6 +109,9 @@ export default function Navigation() {
           <NavLink {...toPathOrHome('/featureFlags')} title="Feature Flags" className={navItemClassName}>
             <IconFlag size="sm" />
           </NavLink>
+          <button onClick={showSpotlight()} className={navItemClassName}>
+            <IconFlag size="sm" />
+          </button>
         </Fragment>
       ) : null}
     </motion.div>

src/lib/hooks/useSpotlightOverlay.ts

@@ -0,0 +1,54 @@
+import * as SpotlightJs from '@spotlightjs/overlay';
+import type {WindowWithSpotlight} from '@spotlightjs/overlay';
+import {useCallback, useMemo} from 'react';
+
+export default function useSpotlightOverlay() {
+  const showSpotlight = useCallback(() => {
+    if (isSpotlightInjected()) {
+      SpotlightJs.openSpotlight();
+    } else {
+      SpotlightJs.init({
+        fullPage: true,
+        injectImmediately: false,
+        showTriggerButton: false,
+        integrations: [
+          SpotlightJs.sentry({
+            injectIntoSDK: false,
+            // @ts-expect-error Copied from https://github.com/getsentry/sentry-sdk-browser-extension/blob/main/src/pages/spotlight.tsx
+            sidecarUrl: document.location.origin,
+          }),
+        ],
+        showClearEventsButton: false,
+        sidecarUrl: document.location.origin,
+        // @ts-expect-error Copied from https://github.com/getsentry/sentry-sdk-browser-extension/blob/main/src/pages/spotlight.tsx
+        skipSidecar: true,
+      });
+    }
+  }, []);
+
+  const hideSpotlight = useCallback(() => {
+    SpotlightJs.closeSpotlight();
+  }, []);
+
+  // TODO: Spotlight should have an API for cleaning up
+  // useEffect(() => {
+  //   if (isSpotlightInjected()) {}
+  // }, []);
+
+  return useMemo(
+    () => ({
+      showSpotlight,
+      hideSpotlight,
+    }),
+    [showSpotlight, hideSpotlight]
+  );
+}
+
+// TODO: Spotlight should export this function itself
+function isSpotlightInjected() {
+  const windowWithSpotlight = window as WindowWithSpotlight;
+  if (windowWithSpotlight.__spotlight && window.document.getElementById('sentry-spotlight-root')) {
+    return true;
+  }
+  return false;
+}