feat: spotlight feature

packages/shared/package.json

@@ -126,6 +126,7 @@
     "@tiptap/react": "^3.22.5",
     "@tiptap/starter-kit": "^3.22.5",
     "check-password-strength": "^2.0.10",
+    "cmdk": "^1.0.0",
     "emojibase-data": "^17.0.0",
     "fetch-event-stream": "^0.1.6",
     "graphql-ws": "^5.5.5",

packages/shared/src/components/MainLayout.tsx

@@ -32,6 +32,8 @@ import { AuthTriggers } from '../lib/auth';
 import PlusMobileEntryBanner from './marketing/banners/PlusMobileEntryBanner';
 import usePlusEntry from '../hooks/usePlusEntry';
 import { SearchProvider } from '../contexts/search/SearchContext';
+import { SpotlightProvider } from './spotlight/SpotlightContext';
+import { SpotlightHost } from './spotlight/SpotlightHost';
 import { FeedbackWidget } from './feedback';
 import { isExtension } from '../lib/func';
 
@@ -185,6 +187,7 @@ function MainLayoutComponent({
       <PromptElement />
       <Toast autoDismissNotifications={autoDismissNotifications} />
       <BootPopups />
+      <SpotlightHost />
       <StreakMilestonePopup />
       {plusEntryAnnouncementBar && (
         <PlusMobileEntryBanner
@@ -230,7 +233,9 @@ function MainLayoutComponent({
 const MainLayout = (props: MainLayoutProps): ReactElement => (
   <ActiveFeedNameContextProvider>
     <SearchProvider>
-      <MainLayoutComponent {...props} />
+      <SpotlightProvider>
+        <MainLayoutComponent {...props} />
+      </SpotlightProvider>
     </SearchProvider>
   </ActiveFeedNameContextProvider>
 );

packages/shared/src/components/layout/MainLayoutHeader.tsx

@@ -24,10 +24,10 @@ export interface MainLayoutHeaderProps {
   onLogoClick?: (e: React.MouseEvent) => unknown;
 }
 
-const SearchPanel = dynamic(
+const SpotlightTrigger = dynamic(
   () =>
     import(
-      /* webpackChunkName: "searchPanel" */ '../search/SearchPanel/SearchPanel'
+      /* webpackChunkName: "spotlightTrigger" */ '../spotlight/SpotlightTrigger'
     ),
 );
 
@@ -76,18 +76,18 @@ function MainLayoutHeader({
   const renderSearchPanel = useCallback(
     () =>
       shouldUseLoadedSettings && (
-        <SearchPanel
-          className={{
-            container: classNames(
-              'left-0 top-0 z-header items-center py-3 tablet:left-16 laptop:left-0',
-              isSearchPage
-                ? 'relative right-0 tablet:!left-0 laptop:top-0'
-                : 'hidden laptop:flex',
-              hasBanner && 'tablet:top-18',
-            ),
-            field: 'mx-2 laptop:mx-auto',
-          }}
-        />
+        <div
+          className={classNames(
+            'left-0 top-0 z-header items-center py-3 tablet:left-16 laptop:left-0',
+            isSearchPage
+              ? 'relative right-0 tablet:!left-0 laptop:top-0'
+              : 'hidden laptop:flex',
+            hasBanner && 'tablet:top-18',
+            'mx-2 laptop:mx-auto',
+          )}
+        >
+          <SpotlightTrigger />
+        </div>
       ),
     [shouldUseLoadedSettings, isSearchPage, hasBanner],
   );