From 67e49be7b933bee64325b726b4368ea73d3b4be5 Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Mon, 4 May 2026 20:51:29 +0300 Subject: [PATCH 1/8] feat(spotlight): command palette replacing search panel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a global Spotlight palette (cmdk + ⌘K) that replaces the SearchPanel: navigation, settings toggles via SettingsContext, in-place create flows, recents, mobile drawer, ⌘1-9 group jumps, help screen, and analytics. Migrates remaining SearchPanel callers and deletes the legacy directory. Co-authored-by: Cursor --- packages/shared/package.json | 1 + packages/shared/src/components/MainLayout.tsx | 7 +- .../components/FollowingSearchSuggestions.tsx | 192 ++++ .../FeedSettingsContentSourcesSection.tsx | 160 ++-- .../components/layout/MainLayoutHeader.tsx | 49 +- .../modals/post/SmartComposerModal.tsx | 8 +- .../search/SearchPanel/SearchPanel.tsx | 131 --- .../search/SearchPanel/SearchPanelAction.tsx | 63 -- .../search/SearchPanel/SearchPanelContext.ts | 33 - .../SearchPanel/SearchPanelCustomAction.tsx | 28 - .../SearchPanel/SearchPanelDropdown.tsx | 113 --- .../search/SearchPanel/SearchPanelInput.tsx | 282 ------ .../SearchPanel/SearchPanelInputContainer.tsx | 17 - .../SearchPanel/SearchPanelInputCursor.tsx | 51 - .../search/SearchPanel/SearchPanelItem.tsx | 29 - .../SearchPanelPostSuggestions.tsx | 116 --- .../SearchPanel/SearchPanelProvider.tsx | 47 - .../SearchPanelSourceSuggestions.tsx | 145 --- .../SearchPanel/SearchPanelTagSuggestions.tsx | 108 --- .../SearchPanelUserSuggestions.tsx | 145 --- .../components/search/SearchPanel/common.tsx | 33 - .../components/search/SearchPanel/index.ts | 2 - .../SearchPanel/useSearchPanelAction.ts | 61 -- .../shared/src/components/search/index.ts | 1 - .../src/components/spotlight/Spotlight.tsx | 872 ++++++++++++++++++ .../components/spotlight/SpotlightContext.tsx | 95 ++ .../components/spotlight/SpotlightHost.tsx | 78 ++ .../components/spotlight/SpotlightTrigger.tsx | 76 ++ .../components/spotlight/commands/actions.ts | 99 ++ .../components/spotlight/commands/create.ts | 166 ++++ .../src/components/spotlight/commands/help.ts | 29 + .../spotlight/commands/navigate.spec.ts | 58 ++ .../components/spotlight/commands/navigate.ts | 274 ++++++ .../spotlight/commands/search.spec.tsx | 48 + .../components/spotlight/commands/search.ts | 179 ++++ .../components/spotlight/commands/settings.ts | 193 ++++ .../shared/src/components/spotlight/types.ts | 85 ++ .../spotlight/useRecentCommands.spec.tsx | 101 ++ .../components/spotlight/useRecentCommands.ts | 92 ++ .../src/components/spotlight/useSpotlight.ts | 13 + .../spotlight/useSpotlightCommands.ts | 96 ++ packages/shared/src/lib/log.ts | 1 + packages/shared/tailwind.config.ts | 33 + .../spotlight/Spotlight.stories.tsx | 159 ++++ packages/webapp/__tests__/SearchPage.tsx | 4 +- pnpm-lock.yaml | 56 ++ 46 files changed, 3085 insertions(+), 1544 deletions(-) create mode 100644 packages/shared/src/components/feeds/FeedSettings/components/FollowingSearchSuggestions.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanel.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanelAction.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanelContext.ts delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanelCustomAction.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanelDropdown.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanelInput.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanelInputContainer.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanelInputCursor.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanelItem.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanelPostSuggestions.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanelProvider.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanelSourceSuggestions.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanelTagSuggestions.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/SearchPanelUserSuggestions.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/common.tsx delete mode 100644 packages/shared/src/components/search/SearchPanel/index.ts delete mode 100644 packages/shared/src/components/search/SearchPanel/useSearchPanelAction.ts create mode 100644 packages/shared/src/components/spotlight/Spotlight.tsx create mode 100644 packages/shared/src/components/spotlight/SpotlightContext.tsx create mode 100644 packages/shared/src/components/spotlight/SpotlightHost.tsx create mode 100644 packages/shared/src/components/spotlight/SpotlightTrigger.tsx create mode 100644 packages/shared/src/components/spotlight/commands/actions.ts create mode 100644 packages/shared/src/components/spotlight/commands/create.ts create mode 100644 packages/shared/src/components/spotlight/commands/help.ts create mode 100644 packages/shared/src/components/spotlight/commands/navigate.spec.ts create mode 100644 packages/shared/src/components/spotlight/commands/navigate.ts create mode 100644 packages/shared/src/components/spotlight/commands/search.spec.tsx create mode 100644 packages/shared/src/components/spotlight/commands/search.ts create mode 100644 packages/shared/src/components/spotlight/commands/settings.ts create mode 100644 packages/shared/src/components/spotlight/types.ts create mode 100644 packages/shared/src/components/spotlight/useRecentCommands.spec.tsx create mode 100644 packages/shared/src/components/spotlight/useRecentCommands.ts create mode 100644 packages/shared/src/components/spotlight/useSpotlight.ts create mode 100644 packages/shared/src/components/spotlight/useSpotlightCommands.ts create mode 100644 packages/storybook/stories/components/spotlight/Spotlight.stories.tsx diff --git a/packages/shared/package.json b/packages/shared/package.json index 11d1a6f7731..4cff26a0ea0 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -127,6 +127,7 @@ "@tiptap/react": "^3.14.0", "@tiptap/starter-kit": "^3.14.0", "check-password-strength": "^2.0.10", + "cmdk": "^1.0.0", "fetch-event-stream": "^0.1.6", "graphql-ws": "^5.5.5", "jotai": "^2.12.2", diff --git a/packages/shared/src/components/MainLayout.tsx b/packages/shared/src/components/MainLayout.tsx index 0c872eb1e20..8a95549255e 100644 --- a/packages/shared/src/components/MainLayout.tsx +++ b/packages/shared/src/components/MainLayout.tsx @@ -36,6 +36,8 @@ import usePlusEntry from '../hooks/usePlusEntry'; import { SearchProvider } from '../contexts/search/SearchContext'; import { FeedbackWidget } from './feedback'; import { isExtension } from '../lib/func'; +import { SpotlightProvider } from './spotlight/SpotlightContext'; +import { SpotlightHost } from './spotlight/SpotlightHost'; const GoBackHeaderMobile = dynamic( () => @@ -189,6 +191,7 @@ function MainLayoutComponent({ + {plusEntryAnnouncementBar && ( ( - + + + ); diff --git a/packages/shared/src/components/feeds/FeedSettings/components/FollowingSearchSuggestions.tsx b/packages/shared/src/components/feeds/FeedSettings/components/FollowingSearchSuggestions.tsx new file mode 100644 index 00000000000..378e411624c --- /dev/null +++ b/packages/shared/src/components/feeds/FeedSettings/components/FollowingSearchSuggestions.tsx @@ -0,0 +1,192 @@ +import classNames from 'classnames'; +import type { ReactElement } from 'react'; +import React, { useContext } from 'react'; +import { useRouter } from 'next/router'; +import type { SearchSuggestion } from '../../../../graphql/search'; +import { SearchProviderEnum } from '../../../../graphql/search'; +import { useSearchProviderSuggestions } from '../../../../hooks/search'; +import { LogEvent, Origin, TargetType } from '../../../../lib/log'; +import { useLogContext } from '../../../../contexts/LogContext'; +import { webappUrl } from '../../../../lib/constants'; +import { Image } from '../../../image/Image'; +import { FeedSettingsEditContext } from '../FeedSettingsEditContext'; +import { FollowButton } from '../../../contentPreference/FollowButton'; +import { ContentPreferenceType } from '../../../../graphql/contentPreference'; +import { CopyType } from '../../../sources/SourceActions/SourceActionsFollow'; + +interface SuggestionsListProps { + query: string; + title: string; + className?: string; + showFollow?: boolean; +} + +const SuggestionRow = ({ + suggestion, + onClick, + imageRoundedClass, + contentPreferenceType, + showFollow, +}: { + suggestion: SearchSuggestion; + onClick: () => void; + imageRoundedClass: string; + contentPreferenceType: ContentPreferenceType; + showFollow?: boolean; +}): ReactElement => { + const feedSettingsEditContext = useContext(FeedSettingsEditContext); + const feed = feedSettingsEditContext?.feed; + return ( + + ); +}; + +const SectionHeader = ({ title }: { title: string }): ReactElement => ( +
+
+ + {title} + +
+
+); + +export const SourceSearchSuggestions = ({ + query, + title, + className, + showFollow, +}: SuggestionsListProps): ReactElement | null => { + const feedSettingsEditContext = useContext(FeedSettingsEditContext); + const feed = feedSettingsEditContext?.feed; + const router = useRouter(); + const { logEvent } = useLogContext(); + + const { suggestions } = useSearchProviderSuggestions({ + provider: SearchProviderEnum.Sources, + query, + limit: 3, + includeContentPreference: true, + feedId: feed?.id, + }); + + if (!suggestions?.hits?.length) { + return null; + } + + const onSuggestionClick = (suggestion: SearchSuggestion) => { + const source = suggestion.subtitle?.toLowerCase() || suggestion.id; + logEvent({ + event_name: LogEvent.Click, + target_type: TargetType.SearchRecommendation, + target_id: source, + feed_item_title: source, + extra: JSON.stringify({ + origin: Origin.HomePage, + provider: SearchProviderEnum.Sources, + }), + }); + router.push(`${webappUrl}sources/${source}`); + }; + + return ( +
+ + {suggestions.hits.map((suggestion) => ( + onSuggestionClick(suggestion)} + /> + ))} +
+ ); +}; + +export const UserSearchSuggestions = ({ + query, + title, + className, + showFollow, +}: SuggestionsListProps): ReactElement | null => { + const feedSettingsEditContext = useContext(FeedSettingsEditContext); + const feed = feedSettingsEditContext?.feed; + const router = useRouter(); + const { logEvent } = useLogContext(); + + const { suggestions } = useSearchProviderSuggestions({ + provider: SearchProviderEnum.Users, + query, + limit: 3, + includeContentPreference: true, + feedId: feed?.id, + }); + + if (!suggestions?.hits?.length) { + return null; + } + + const onSuggestionClick = (suggestion: SearchSuggestion) => { + const user = suggestion.id || suggestion.subtitle?.toLowerCase() || ''; + logEvent({ + event_name: LogEvent.Click, + target_type: TargetType.SearchRecommendation, + target_id: user, + feed_item_title: user, + extra: JSON.stringify({ + origin: Origin.HomePage, + provider: SearchProviderEnum.Users, + }), + }); + router.push(`${webappUrl}${user}`); + }; + + return ( +
+ + {suggestions.hits.map((suggestion) => ( + onSuggestionClick(suggestion)} + /> + ))} +
+ ); +}; diff --git a/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsContentSourcesSection.tsx b/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsContentSourcesSection.tsx index cba8073f5d2..c6a2bf5b690 100644 --- a/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsContentSourcesSection.tsx +++ b/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsContentSourcesSection.tsx @@ -1,5 +1,5 @@ import type { ReactElement } from 'react'; -import React, { useMemo, useState } from 'react'; +import React, { useState } from 'react'; import { useQueryClient } from '@tanstack/react-query'; import { SearchField } from '../../../fields/SearchField'; import { ModalTabs } from '../../../modals/common/ModalTabs'; @@ -16,12 +16,10 @@ import { import { FollowingUserList } from '../components/FollowingUserList'; import { FollowingSourceList } from '../components/FollowingSourceList'; import { SourceType } from '../../../../graphql/sources'; -import { SearchPanelSourceSuggestions } from '../../../search/SearchPanel/SearchPanelSourceSuggestions'; -import { SearchPanelUserSuggestions } from '../../../search/SearchPanel/SearchPanelUserSuggestions'; -import type { SearchPanelContextValue } from '../../../search/SearchPanel/SearchPanelContext'; -import { SearchPanelContext } from '../../../search/SearchPanel/SearchPanelContext'; -import type { SearchProviderEnum } from '../../../../graphql/search'; -import { defaultSearchProvider, providerToLabelTextMap } from '../../../search'; +import { + SourceSearchSuggestions, + UserSearchSuggestions, +} from '../components/FollowingSearchSuggestions'; import { generateQueryKey, RequestKey } from '../../../../lib/query'; import { useAuthContext } from '../../../../contexts/AuthContext'; import { useMutationSubscription } from '../../../../hooks'; @@ -41,55 +39,14 @@ export const FeedSettingsContentSourcesSection = (): ReactElement => { const { user } = useAuthContext(); const queryClient = useQueryClient(); const [activeView, setActiveViewState] = useState(() => tabs[0]); - - type SearchPanelState = { - provider: SearchProviderEnum | undefined; - query: string; - isActive: boolean; - providerText: string | undefined; - providerIcon: ReactElement | undefined; - }; - - const [state, setState] = useState(() => { - return { - provider: undefined, - query: '', - isActive: false, - providerText: undefined, - providerIcon: undefined, - }; - }); - - const searchPanel = useMemo(() => { - return { - ...state, - setProvider: ({ provider, text, icon }) => { - setState((currentState) => { - return { - ...currentState, - provider, - providerText: text || undefined, - providerIcon: icon || undefined, - }; - }); - }, - setActive: ({ isActive }) => { - setState((currentState) => { - return { - ...currentState, - isActive, - }; - }); - }, - }; - }, [state]); + const [query, setQuery] = useState(''); useMutationSubscription({ matcher: contentPreferenceMutationMatcher, callback: () => { editFeedSettings(); - return searchPanel.query?.length + return query.length ? queryClient.invalidateQueries({ queryKey: generateQueryKey( RequestKey.ContentPreference, @@ -105,66 +62,53 @@ export const FeedSettingsContentSourcesSection = (): ReactElement => { return (
- - { - setState((currentState) => { - return { - ...currentState, - query: newValue, - // reset provider label while typing - provider: undefined, - providerText: providerToLabelTextMap[defaultSearchProvider], - providerIcon: undefined, - }; - }); + + + Following sources, squads, and users is a great way to tell the system + where you want your content to come from. It's a strong starting + signal for your feed, and as you engage with content over time, its + weight gradually decreases in favor of stronger signals based on your + actual activity. + + {query.length ? ( + <> + + + + ) : ( + { + if (view !== undefined) { + setActiveViewState(view); + } + }, + onRequestClose: noop, + kind: ModalKind.FlexibleCenter, + size: ModalSize.Medium, }} - /> - - Following sources, squads, and users is a great way to tell the system - where you want your content to come from. It's a strong starting - signal for your feed, and as you engage with content over time, its - weight gradually decreases in favor of stronger signals based on your - actual activity. - - {searchPanel.query?.length ? ( - <> - - - - ) : ( - { - if (view !== undefined) { - setActiveViewState(view); - } - }, - onRequestClose: noop, - kind: ModalKind.FlexibleCenter, - size: ModalSize.Medium, - }} - > - -
- {activeView === Tabs.Sources && } - {activeView === Tabs.Squads && ( - - )} - {activeView === Tabs.Users && } -
- - )} - + +
+ {activeView === Tabs.Sources && } + {activeView === Tabs.Squads && ( + + )} + {activeView === Tabs.Users && } +
+ + )}
); }; diff --git a/packages/shared/src/components/layout/MainLayoutHeader.tsx b/packages/shared/src/components/layout/MainLayoutHeader.tsx index bc5e1fb60c2..e85f2e0245e 100644 --- a/packages/shared/src/components/layout/MainLayoutHeader.tsx +++ b/packages/shared/src/components/layout/MainLayoutHeader.tsx @@ -16,6 +16,7 @@ import { SharedFeedPage } from '../utilities'; import FeedNav from '../feeds/FeedNav'; import { MobileExploreHeader } from '../header/MobileExploreHeader'; import useActiveNav from '../../hooks/useActiveNav'; +import { SpotlightTrigger } from '../spotlight/SpotlightTrigger'; export interface MainLayoutHeaderProps { hasBanner?: boolean; @@ -24,13 +25,6 @@ export interface MainLayoutHeaderProps { onLogoClick?: (e: React.MouseEvent) => unknown; } -const SearchPanel = dynamic( - () => - import( - /* webpackChunkName: "searchPanel" */ '../search/SearchPanel/SearchPanel' - ), -); - const HeaderButtons = dynamic( () => import(/* webpackChunkName: "headerButtons" */ './HeaderButtons'), { ssr: false }, @@ -73,24 +67,25 @@ function MainLayoutHeader({ setHasHydrated(true); }, []); - const renderSearchPanel = useCallback( - () => - shouldUseLoadedSettings && ( - - ), - [shouldUseLoadedSettings, isSearchPage, hasBanner], - ); + const renderSpotlightTrigger = useCallback(() => { + if (!shouldUseLoadedSettings) { + return null; + } + return ( +
+ +
+ ); + }, [shouldUseLoadedSettings, isSearchPage, hasBanner]); if (shouldRenderFeedNav) { return ( @@ -124,7 +119,7 @@ function MainLayoutHeader({ > {isMobileSearchPage ? ( <> - {renderSearchPanel()} + {renderSpotlightTrigger()} {!isSearch && } ) : ( @@ -140,7 +135,7 @@ function MainLayoutHeader({ onLogoClick={onLogoClick} /> - {renderSearchPanel()} + {renderSpotlightTrigger()} ) diff --git a/packages/shared/src/components/modals/post/SmartComposerModal.tsx b/packages/shared/src/components/modals/post/SmartComposerModal.tsx index 877e16f26de..abe21bf739d 100644 --- a/packages/shared/src/components/modals/post/SmartComposerModal.tsx +++ b/packages/shared/src/components/modals/post/SmartComposerModal.tsx @@ -108,6 +108,11 @@ export interface SmartComposerModalProps extends LazyModalCommonProps { initialUrl?: string; initialBody?: string; initialSquadHandle?: string; + /** + * Seed the kind picker. Used by the Spotlight "Create poll" / "Start + * standup" commands so the modal opens directly in the right mode. + */ + initialKind?: ComposerKind; preview?: ExternalLinkPreview; } @@ -670,6 +675,7 @@ export function SmartComposerModal({ initialUrl, initialBody, initialSquadHandle, + initialKind, preview: initialPreview, ...props }: SmartComposerModalProps): ReactElement { @@ -713,7 +719,7 @@ export function SmartComposerModal({ useState(false); const [isExpanded, setIsExpanded] = useState(false); const [isMarkdownEditorMode, setIsMarkdownEditorMode] = useState(false); - const [kind, setKind] = useState('text'); + const [kind, setKind] = useState(initialKind ?? 'text'); const [pollOptions, setPollOptions] = useState(['', '']); const [pollDuration, setPollDuration] = useState( DEFAULT_POLL_DURATION_DAYS, diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanel.tsx b/packages/shared/src/components/search/SearchPanel/SearchPanel.tsx deleted file mode 100644 index 8255049038b..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanel.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import type { ReactElement } from 'react'; -import React, { useEffect, useMemo, useRef, useState } from 'react'; -import classNames from 'classnames'; -import { useRouter } from 'next/router'; -import dynamic from 'next/dynamic'; -import { SearchPanelInput } from './SearchPanelInput'; -import { minSearchQueryLength } from '../../../graphql/search'; -import type { SearchPanelContextValue } from './SearchPanelContext'; -import { SearchPanelContext } from './SearchPanelContext'; -import { defaultSearchProvider, providerToLabelTextMap } from './common'; - -const SearchPanelDropdown = dynamic( - () => - import( - /* webpackChunkName: "searchPanelDropdown" */ './SearchPanelDropdown' - ), - { ssr: false }, -); - -export type SearchPanelProps = { - className?: SearchPanelClassName; -}; - -export type SearchPanelClassName = { - container?: string; - field?: string; -}; - -export const SearchPanel = ({ className }: SearchPanelProps): ReactElement => { - const { query } = useRouter(); - - const [state, setState] = useState(() => { - return { - provider: undefined, - query: '', - isActive: false, - providerText: undefined, - providerIcon: undefined, - }; - }); - - const searchPanelRef = useRef(); - - useEffect(() => { - const searchQuery = query?.q?.toString(); - - if (!searchQuery) { - return; - } - - setState((currentState) => { - if (!currentState.query) { - return { ...currentState, query: searchQuery }; - } - - return currentState; - }); - }, [query?.q]); - - const searchPanel = useMemo(() => { - return { - ...state, - setProvider: ({ provider, text, icon }) => { - setState((currentState) => { - return { - ...currentState, - provider, - providerText: text || undefined, - providerIcon: icon || undefined, - }; - }); - }, - setActive: ({ isActive }) => { - setState((currentState) => { - return { - ...currentState, - isActive, - }; - }); - }, - }; - }, [state]); - - const showDropdown = - state.isActive && state.query.length >= minSearchQueryLength; - - return ( - -
- { - setState((currentState) => { - return { - ...currentState, - query: newValue, - // reset provider label while typing - provider: undefined, - providerText: providerToLabelTextMap[defaultSearchProvider], - providerIcon: undefined, - }; - }); - }} - inputProps={{ - value: state.query, - onFocus: () => { - searchPanel.setActive({ - isActive: true, - }); - }, - }} - > - {showDropdown && ( - - )} - -
- - ); -}; - -export default SearchPanel; diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanelAction.tsx b/packages/shared/src/components/search/SearchPanel/SearchPanelAction.tsx deleted file mode 100644 index c5afefcf009..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanelAction.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import type { ReactElement } from 'react'; -import React, { useContext } from 'react'; -import classNames from 'classnames'; -import type { SearchProviderEnum } from '../../../graphql/search'; -import { SearchPanelContext } from './SearchPanelContext'; -import { SearchPanelItem } from './SearchPanelItem'; -import { useSearchProvider } from '../../../hooks/search'; -import { useSearchPanelAction } from './useSearchPanelAction'; -import { - defaultSearchProvider, - providerToIconMap, - providerToLabelTextMap, -} from './common'; -import { IconSize } from '../../Icon'; -import { useLogContext } from '../../../contexts/LogContext'; -import { LogEvent } from '../../../lib/log'; -import { useSearchContextProvider } from '../../../contexts/search/SearchContext'; - -export type SearchPanelActionProps = { - provider: SearchProviderEnum; -}; - -export const SearchPanelAction = ({ - provider, -}: SearchPanelActionProps): ReactElement => { - const searchPanel = useContext(SearchPanelContext); - const Icon = providerToIconMap[provider]; - const { search } = useSearchProvider(); - const { time, contentCurationFilter } = useSearchContextProvider(); - const itemProps = useSearchPanelAction({ provider }); - const isDefaultProvider = provider === defaultSearchProvider; - const isDefaultActive = !searchPanel.provider && isDefaultProvider; - const { logEvent } = useLogContext(); - - return ( - } - onClick={() => { - logEvent({ - event_name: LogEvent.SubmitSearch, - extra: JSON.stringify({ - query: searchPanel.query, - provider, - filters: { time, contentCuration: contentCurationFilter }, - }), - }); - - search({ provider, query: searchPanel.query }); - }} - className={classNames(isDefaultActive && 'bg-surface-float')} - data-search-panel-item={!isDefaultProvider} - tabIndex={isDefaultProvider ? -1 : undefined} - {...itemProps} - > - - {searchPanel.query}{' '} - - {providerToLabelTextMap[provider]} - - - - ); -}; diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanelContext.ts b/packages/shared/src/components/search/SearchPanel/SearchPanelContext.ts deleted file mode 100644 index 44f22f87e0c..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanelContext.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type { ReactElement } from 'react'; -import { createContext } from 'react'; -import { SearchProviderEnum } from '../../../graphql/search'; - -export type SearchPanelContextValue = { - provider?: SearchProviderEnum; - providerText?: string; - providerIcon?: ReactElement; - query: string; - isActive: boolean; - setProvider: ({ - provider, - text, - icon, - }: { - provider?: SearchProviderEnum; - text?: string; - icon?: ReactElement; - }) => void; - setActive: ({ isActive }: { isActive: boolean }) => void; -}; - -const noop = () => undefined; - -export const SearchPanelContext = createContext({ - provider: SearchProviderEnum.Posts, - providerText: undefined, - providerIcon: undefined, - query: '', - isActive: false, - setProvider: noop, - setActive: noop, -}); diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanelCustomAction.tsx b/packages/shared/src/components/search/SearchPanel/SearchPanelCustomAction.tsx deleted file mode 100644 index c074bf0e7d8..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanelCustomAction.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import type { ReactElement, ReactNode } from 'react'; -import React from 'react'; -import type { SearchPanelItemProps } from './SearchPanelItem'; -import { SearchPanelItem } from './SearchPanelItem'; -import { useSearchPanelAction } from './useSearchPanelAction'; -import type { SearchProviderEnum } from '../../../graphql/search'; - -export type SearchPanelCustomActionProps = { - provider: SearchProviderEnum; - children: ReactNode; -} & Omit< - SearchPanelItemProps, - 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur' ->; - -export const SearchPanelCustomAction = ({ - provider, - children, - ...rest -}: SearchPanelCustomActionProps): ReactElement => { - const itemProps = useSearchPanelAction({ provider }); - - return ( - - {children} - - ); -}; diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanelDropdown.tsx b/packages/shared/src/components/search/SearchPanel/SearchPanelDropdown.tsx deleted file mode 100644 index e834f84522a..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanelDropdown.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import type { MutableRefObject, ReactElement } from 'react'; -import React from 'react'; -import { SearchProviderEnum } from '../../../graphql/search'; -import { ArrowKeyEnum, isExtension } from '../../../lib/func'; -import { LogEvent } from '../../../lib/log'; -import { ArrowIcon } from '../../icons'; -import { SearchPanelAction } from './SearchPanelAction'; -import { SearchPanelCustomAction } from './SearchPanelCustomAction'; -import { SearchPanelPostSuggestions } from './SearchPanelPostSuggestions'; -import { SearchPanelSourceSuggestions } from './SearchPanelSourceSuggestions'; -import { SearchPanelTagSuggestions } from './SearchPanelTagSuggestions'; -import { SearchPanelUserSuggestions } from './SearchPanelUserSuggestions'; -import { useEventListener } from '../../../hooks'; -import { useSearchProvider } from '../../../hooks/search'; -import { useLogContext } from '../../../contexts/LogContext'; -import { useSearchContextProvider } from '../../../contexts/search/SearchContext'; - -type Props = { - anchor: MutableRefObject; - query?: string; -}; - -const SearchPanelDropdown = ({ query = '', anchor }: Props): ReactElement => { - const { search } = useSearchProvider(); - const { time, contentCurationFilter } = useSearchContextProvider(); - const { logEvent } = useLogContext(); - - useEventListener(anchor, 'keydown', (event) => { - const navigableElements = [ - ...anchor.current.querySelectorAll( - '[data-search-panel-item="true"]', - ), - ]; - let activeElementIndex = navigableElements.findIndex( - (element) => element.getAttribute('data-search-panel-active') === 'true', - ); - - if (activeElementIndex === -1) { - activeElementIndex = 0; - } - - const keyToIndexModifier: Partial> = { - [ArrowKeyEnum.Up]: -1, - [ArrowKeyEnum.Down]: 1, - }; - - if (activeElementIndex !== 0) { - keyToIndexModifier[ArrowKeyEnum.Left] = -1; - keyToIndexModifier[ArrowKeyEnum.Right] = 1; - } - - const supportedKeys = Object.keys(keyToIndexModifier); - - const pressedKey = supportedKeys.find((key) => key === event.key); - - if (!pressedKey) { - return; - } - - event.preventDefault(); - - const indexModifier = keyToIndexModifier[pressedKey as ArrowKeyEnum]; - - if (indexModifier === undefined) { - return; - } - - const nextElement = navigableElements[activeElementIndex + indexModifier]; - - if (nextElement) { - nextElement.focus(); - } - }); - - return ( -
-
- - {isExtension && ( - - )} - - - - - { - logEvent({ - event_name: LogEvent.SubmitSearch, - extra: JSON.stringify({ - query, - provider: SearchProviderEnum.Posts, - filters: { time, contentCuration: contentCurationFilter }, - }), - }); - - search({ - provider: SearchProviderEnum.Posts, - query, - }); - }} - > -
- See more posts -
- -
-
- ); -}; - -export default SearchPanelDropdown; diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanelInput.tsx b/packages/shared/src/components/search/SearchPanel/SearchPanelInput.tsx deleted file mode 100644 index 54311f115d8..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanelInput.tsx +++ /dev/null @@ -1,282 +0,0 @@ -import type { - FormEvent, - InputHTMLAttributes, - MouseEvent, - ReactElement, - ReactNode, -} from 'react'; -import React, { useContext, useRef } from 'react'; -import classNames from 'classnames'; -import { useRouter } from 'next/router'; -import { BaseField, FieldInput } from '../../fields/common'; -import { LogEvent, TargetId } from '../../../lib/log'; -import { IconSize } from '../../Icon'; -import { getFieldFontColor } from '../../fields/BaseFieldContainer'; -import { AiIcon, ClearIcon } from '../../icons'; -import { useInputField } from '../../../hooks/useInputField'; -import { useLogContext } from '../../../contexts/LogContext'; -import { useAuthContext } from '../../../contexts/AuthContext'; -import { AuthTriggers } from '../../../lib/auth'; -import { SearchPanelContext } from './SearchPanelContext'; -import { ViewSize, useEventListener, useViewSize } from '../../../hooks'; -import { - isAppleDevice, - isNullOrUndefined, - isSpecialKeyPressed, -} from '../../../lib/func'; -import { KeyboadShortcutLabel } from '../../KeyboardShortcutLabel'; -import { SearchPanelProvider } from './SearchPanelProvider'; -import { minSearchQueryLength } from '../../../graphql/search'; -import { SearchPanelInputCursor } from './SearchPanelInputCursor'; -import { useSearchProvider } from '../../../hooks/search'; -import { defaultSearchProvider, providerToLabelTextMap } from './common'; -import { Button, ButtonSize } from '../../buttons/Button'; -import { useSearchPanelAction } from './useSearchPanelAction'; -import { webappUrl } from '../../../lib/constants'; -import { useSearchContextProvider } from '../../../contexts/search/SearchContext'; - -export type SearchPanelInputClassName = { - container?: string; - field?: string; - form?: string; -}; - -export type SearchPanelInputProps = { - className?: SearchPanelInputClassName; - valueChanged?: (value: string) => void; - inputProps?: InputHTMLAttributes; - children?: ReactNode; -}; - -const shortcutKeys = [isAppleDevice() ? '⌘' : 'Ctrl', 'K']; - -export const SearchPanelInput = ({ - className, - inputProps, - valueChanged, - children, -}: SearchPanelInputProps): ReactElement => { - const router = useRouter(); - const { search } = useSearchProvider(); - const { time, contentCurationFilter } = useSearchContextProvider(); - const searchPanel = useContext(SearchPanelContext); - const fieldRef = useRef(); - const { logEvent } = useLogContext(); - const { - value, - readOnly, - disabled, - onFocus: externalOnFocus, - onBlur: externalOnBlur, - onClick: externalOnClick, - placeholder = searchPanel.isActive - ? 'Search posts or ask a question...' - : 'Search', - } = inputProps || {}; - const { inputRef, focused, hasInput, onFocus, onBlur, onInput, setInput } = - useInputField(value, valueChanged); - const { isLoggedIn, showLogin } = useAuthContext(); - const isLaptop = useViewSize(ViewSize.Laptop); - - const onInputClick = () => { - if (!isLoggedIn) { - showLogin({ trigger: AuthTriggers.SearchInput }); - } - }; - - const onSubmit = (event: FormEvent, input?: string): void => { - event.preventDefault(); - - if (!isLoggedIn) { - return showLogin({ trigger: AuthTriggers.SearchInput }); - } - - const finalValue = input ?? inputRef.current.value; - const provider = searchPanel.provider ?? defaultSearchProvider; - - logEvent({ - event_name: LogEvent.SubmitSearch, - extra: JSON.stringify({ - query: finalValue, - provider, - filters: { time, contentCuration: contentCurationFilter }, - }), - }); - - setInput(finalValue); - - searchPanel.setActive({ - isActive: false, - }); - - inputRef.current?.blur(); - - return search({ provider, query: finalValue }); - }; - - useEventListener(globalThis, 'click', (event) => { - if ( - !isNullOrUndefined(fieldRef.current) && - !fieldRef.current.contains(event.target as Node) && - fieldRef.current - ) { - onBlur(); - - searchPanel.setActive({ - isActive: false, - }); - } - }); - - const showDropdown = - searchPanel.isActive && searchPanel.query.length >= minSearchQueryLength; - - useEventListener(globalThis, 'keydown', (event) => { - if (isSpecialKeyPressed({ event }) && event.key === 'k') { - event.preventDefault(); - - if (searchPanel.isActive) { - inputRef.current?.blur(); - searchPanel.setActive({ - isActive: false, - }); - } else { - inputRef.current?.focus(); - searchPanel.setActive({ - isActive: true, - }); - - logEvent({ - event_name: LogEvent.KeyboardShortcutTriggered, - target_id: TargetId.SearchActivation, - }); - } - } - }); - - useEventListener(globalThis, 'keydown', (event) => { - if (event.key === 'Escape') { - event.preventDefault(); - - if (searchPanel.isActive) { - inputRef.current?.blur(); - searchPanel.setActive({ - isActive: false, - }); - } - } - }); - - const itemProps = useSearchPanelAction({ - provider: undefined, - text: providerToLabelTextMap[defaultSearchProvider], - }); - - return ( -
-
- - - { - onFocus(); - externalOnFocus?.(event); - itemProps.onFocus(event); - - logEvent({ event_name: LogEvent.FocusSearch }); - }} - onBlur={(event) => { - onBlur(); - externalOnBlur?.(event); - itemProps.onBlur(event); - }} - onClick={(event) => { - onInputClick(); - externalOnClick?.(event); - }} - onInput={onInput} - type="primary" - autoComplete="off" - className={classNames( - 'h-full flex-1', - searchPanel.isActive - ? '!placeholder-text-quaternary' - : '!placeholder-text-tertiary', - getFieldFontColor({ readOnly, disabled, hasInput, focused }), - )} - /> -
- {searchPanel.isActive && !!searchPanel.query && ( - -
- )} -
-
- {!searchPanel.isActive && ( - - )} - {searchPanel.isActive && - searchPanel.query.length >= minSearchQueryLength && ( - <> - {isLaptop && } - - - )} -
- - {children} - - - ); -}; diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanelInputContainer.tsx b/packages/shared/src/components/search/SearchPanel/SearchPanelInputContainer.tsx deleted file mode 100644 index af2879f015a..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanelInputContainer.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import type { HTMLAttributes, ReactElement, ReactNode } from 'react'; -import React from 'react'; - -export type SearchPanelItemContainerProps = { - children?: ReactNode; -} & HTMLAttributes; - -export const SearchPanelItemContainer = ({ - children, - ...props -}: SearchPanelItemContainerProps): ReactElement => { - return ( - - ); -}; diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanelInputCursor.tsx b/packages/shared/src/components/search/SearchPanel/SearchPanelInputCursor.tsx deleted file mode 100644 index e763f52909d..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanelInputCursor.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import type { ReactElement } from 'react'; -import React, { useContext } from 'react'; -import classNames from 'classnames'; -import { SearchPanelContext } from './SearchPanelContext'; -import { useDomPurify } from '../../../hooks/useDomPurify'; - -export type SearchPanelInputCursorProps = { - className?: Partial<{ - main: string; - input: string; - }>; -}; - -export const SearchPanelInputCursor = ({ - className, -}: SearchPanelInputCursorProps): ReactElement | null => { - const searchPanel = useContext(SearchPanelContext); - const purify = useDomPurify(); - - if (!searchPanel.providerText) { - return null; - } - - const purifySanitize = purify?.sanitize; - - return ( -
- - {!!purifySanitize && ( -
- -
- )} -
- ); -}; diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanelItem.tsx b/packages/shared/src/components/search/SearchPanel/SearchPanelItem.tsx deleted file mode 100644 index 6657977e584..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanelItem.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import classNames from 'classnames'; -import type { ReactElement } from 'react'; -import React from 'react'; -import type { IconType } from '../../buttons/Button'; -import type { SearchPanelItemContainerProps } from './SearchPanelInputContainer'; -import { SearchPanelItemContainer } from './SearchPanelInputContainer'; - -export type SearchPanelItemProps = { - icon?: IconType; -} & SearchPanelItemContainerProps; - -export const SearchPanelItem = ({ - icon, - children, - ...props -}: SearchPanelItemProps): ReactElement => { - return ( - - {!!icon && icon} - {children} - - ); -}; diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanelPostSuggestions.tsx b/packages/shared/src/components/search/SearchPanel/SearchPanelPostSuggestions.tsx deleted file mode 100644 index c66801e77f7..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanelPostSuggestions.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import classNames from 'classnames'; -import type { ReactElement } from 'react'; -import React, { useContext } from 'react'; -import { useRouter } from 'next/router'; -import { SearchIcon } from '../../icons'; -import type { SearchPanelItemProps } from './SearchPanelItem'; -import { SearchPanelItem } from './SearchPanelItem'; -import type { SearchSuggestion } from '../../../graphql/search'; -import { - SearchProviderEnum, - sanitizeSearchTitleMatch, -} from '../../../graphql/search'; -import { - useSearchProvider, - useSearchProviderSuggestions, -} from '../../../hooks/search'; -import { SearchPanelContext } from './SearchPanelContext'; -import { useDomPurify } from '../../../hooks/useDomPurify'; -import { useSearchPanelAction } from './useSearchPanelAction'; -import { webappUrl } from '../../../lib/constants'; -import { LogEvent, Origin, TargetType } from '../../../lib/log'; -import { useLogContext } from '../../../contexts/LogContext'; - -export type SearchPanelPostSuggestionsProps = { - className?: string; - title: string; -}; - -const PanelItem = ({ - suggestion, - ...rest -}: Omit & { suggestion: SearchSuggestion }) => { - const itemProps = useSearchPanelAction({ - provider: SearchProviderEnum.Posts, - text: suggestion.title, - }); - const purify = useDomPurify(); - const purifySanitize = purify?.sanitize; - - return ( - } {...itemProps}> - {!!purifySanitize && ( - - )} - - ); -}; - -export const SearchPanelPostSuggestions = ({ - className, - title, -}: SearchPanelPostSuggestionsProps): ReactElement | null => { - const router = useRouter(); - const { logEvent } = useLogContext(); - const searchPanel = useContext(SearchPanelContext); - const { search } = useSearchProvider(); - - const { suggestions } = useSearchProviderSuggestions({ - provider: SearchProviderEnum.Posts, - query: searchPanel.query, - }); - - const onSuggestionClick = (suggestion: SearchSuggestion) => { - const searchQuery = suggestion.title.replace(sanitizeSearchTitleMatch, ''); - - if (suggestion.id) { - logEvent({ - event_name: LogEvent.Click, - target_type: TargetType.SearchRecommendation, - target_id: suggestion.id, - feed_item_title: searchQuery, - extra: JSON.stringify({ - origin: Origin.HomePage, - provider: SearchProviderEnum.Posts, - }), - }); - router.push(`${webappUrl}posts/${suggestion.id}`); - - return; - } - - search({ provider: SearchProviderEnum.Posts, query: searchQuery }); - }; - - if (!suggestions?.hits?.length) { - return null; - } - - return ( -
-
-
- - {title} - -
-
- {suggestions?.hits?.map((suggestion) => { - return ( - { - onSuggestionClick(suggestion); - }} - /> - ); - })} -
- ); -}; diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanelProvider.tsx b/packages/shared/src/components/search/SearchPanel/SearchPanelProvider.tsx deleted file mode 100644 index bc4770a3209..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanelProvider.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import type { FunctionComponent, ReactElement } from 'react'; -import React, { useContext } from 'react'; -import classNames from 'classnames'; -import { SearchProviderEnum } from '../../../graphql/search'; -import type { IconProps } from '../../Icon'; -import { IconSize } from '../../Icon'; -import { SearchPanelContext } from './SearchPanelContext'; -import { providerToIconMap } from './common'; - -export type SearchPanelProviderProps = { - className?: string; -}; - -const providerToComponentMap: Record< - SearchProviderEnum, - FunctionComponent | undefined -> = { - ...providerToIconMap, - [SearchProviderEnum.Posts]: undefined, -}; - -export const SearchPanelProvider = ({ - className, -}: SearchPanelProviderProps): ReactElement | null => { - const searchPanel = useContext(SearchPanelContext); - - if (searchPanel.providerIcon) { - return searchPanel.providerIcon; - } - - if (!searchPanel.provider) { - return null; - } - - const Component = providerToComponentMap[searchPanel.provider]; - - if (!Component) { - return null; - } - - return ( - - ); -}; diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanelSourceSuggestions.tsx b/packages/shared/src/components/search/SearchPanel/SearchPanelSourceSuggestions.tsx deleted file mode 100644 index 8c81b7016a1..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanelSourceSuggestions.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import classNames from 'classnames'; -import type { ReactElement } from 'react'; -import React, { useContext } from 'react'; -import { useRouter } from 'next/router'; -import type { SearchSuggestion } from '../../../graphql/search'; -import { SearchProviderEnum } from '../../../graphql/search'; -import { useSearchProviderSuggestions } from '../../../hooks/search'; -import { SearchPanelContext } from './SearchPanelContext'; -import { useSearchPanelAction } from './useSearchPanelAction'; -import { LogEvent, Origin, TargetType } from '../../../lib/log'; -import { useLogContext } from '../../../contexts/LogContext'; -import { webappUrl } from '../../../lib/constants'; -import type { ButtonProps } from '../../buttons/Button'; -import { SearchPanelItem } from './SearchPanelItem'; -import { Image } from '../../image/Image'; -import { - FeedSettingsEditContext, - useFeedSettingsEditContext, -} from '../../feeds/FeedSettings/FeedSettingsEditContext'; -import { ContentPreferenceType } from '../../../graphql/contentPreference'; -import { CopyType } from '../../sources/SourceActions/SourceActionsFollow'; -import { FollowButton } from '../../contentPreference/FollowButton'; - -export type SearchPanelSourceSuggestionsProps = { - title: string; - className?: string; - showFollow?: boolean; -}; - -type PanelItemProps = Pick, 'onClick'> & { - showFollow?: boolean; - suggestion: SearchSuggestion; -}; - -const PanelItem = ({ suggestion, showFollow, ...rest }: PanelItemProps) => { - const feedSettingsEditContext = useFeedSettingsEditContext(); - const feed = feedSettingsEditContext?.feed; - const Icon = () => ( - {`${suggestion.title} - ); - - const itemProps = useSearchPanelAction({ - provider: SearchProviderEnum.Sources, - text: suggestion.title, - icon: , - }); - - return ( - } - {...itemProps} - {...rest} - className="px-2 py-1" - > -
- - {suggestion.title} - - - @{suggestion.subtitle} - -
- {!!showFollow && ( - - )} - - ); -}; - -export const SearchPanelSourceSuggestions = ({ - className, - showFollow, - title, -}: SearchPanelSourceSuggestionsProps): ReactElement => { - const feedSettingsEditContext = useContext(FeedSettingsEditContext); - const feed = feedSettingsEditContext?.feed; - const router = useRouter(); - const { logEvent } = useLogContext(); - const searchPanel = useContext(SearchPanelContext); - - const { suggestions } = useSearchProviderSuggestions({ - provider: SearchProviderEnum.Sources, - query: searchPanel.query, - limit: 3, - includeContentPreference: true, - feedId: feed?.id, - }); - - const onSuggestionClick = (suggestion: SearchSuggestion) => { - const source = suggestion.subtitle?.toLowerCase() || suggestion.id; - logEvent({ - event_name: LogEvent.Click, - target_type: TargetType.SearchRecommendation, - target_id: source, - feed_item_title: source, - extra: JSON.stringify({ - origin: Origin.HomePage, - provider: SearchProviderEnum.Sources, - }), - }); - - router.push(`${webappUrl}sources/${source}`); - }; - - if (!suggestions?.hits?.length) { - return null; - } - - return ( -
-
-
- - {title} - -
-
- {suggestions?.hits?.map((suggestion) => { - return ( - { - onSuggestionClick(suggestion); - }} - /> - ); - })} -
- ); -}; diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanelTagSuggestions.tsx b/packages/shared/src/components/search/SearchPanel/SearchPanelTagSuggestions.tsx deleted file mode 100644 index 0aa51bb925d..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanelTagSuggestions.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import classNames from 'classnames'; -import type { ReactElement } from 'react'; -import React, { useContext } from 'react'; -import { useRouter } from 'next/router'; -import type { SearchSuggestion } from '../../../graphql/search'; -import { SearchProviderEnum } from '../../../graphql/search'; -import { useSearchProviderSuggestions } from '../../../hooks/search'; -import { SearchPanelContext } from './SearchPanelContext'; -import { useSearchPanelAction } from './useSearchPanelAction'; -import { LogEvent, Origin, TargetType } from '../../../lib/log'; -import { useLogContext } from '../../../contexts/LogContext'; -import { SearchPanelItemContainer } from './SearchPanelInputContainer'; -import { TagLink } from '../../TagLinks'; -import { webappUrl } from '../../../lib/constants'; -import type { ButtonProps } from '../../buttons/Button'; - -export type SearchPanelTagSuggestionsProps = { - className?: string; - title: string; -}; - -type PanelItemProps = Pick, 'onClick'> & { - suggestion: SearchSuggestion; -}; - -const PanelItem = ({ suggestion, onClick }: PanelItemProps) => { - const itemProps = useSearchPanelAction({ - provider: SearchProviderEnum.Tags, - text: suggestion.title, - }); - - return ( - - { - event.preventDefault(); - }, - }} - /> - - ); -}; - -export const SearchPanelTagSuggestions = ({ - className, - title, -}: SearchPanelTagSuggestionsProps): ReactElement => { - const router = useRouter(); - const { logEvent } = useLogContext(); - const searchPanel = useContext(SearchPanelContext); - - const { suggestions } = useSearchProviderSuggestions({ - provider: SearchProviderEnum.Tags, - query: searchPanel.query, - limit: 5, - }); - - const onSuggestionClick = (suggestion: SearchSuggestion) => { - const tag = suggestion.id || suggestion.title.toLowerCase(); - - logEvent({ - event_name: LogEvent.Click, - target_type: TargetType.SearchRecommendation, - target_id: tag, - feed_item_title: tag, - extra: JSON.stringify({ - origin: Origin.HomePage, - provider: SearchProviderEnum.Tags, - }), - }); - - router.push(`${webappUrl}tags/${tag}`); - }; - - if (!suggestions?.hits?.length) { - return null; - } - - return ( -
-
-
- - {title} - -
-
-
- {suggestions?.hits?.map((suggestion) => { - return ( - { - event.preventDefault(); - - onSuggestionClick(suggestion); - }} - /> - ); - })} -
-
- ); -}; diff --git a/packages/shared/src/components/search/SearchPanel/SearchPanelUserSuggestions.tsx b/packages/shared/src/components/search/SearchPanel/SearchPanelUserSuggestions.tsx deleted file mode 100644 index f6c109557d8..00000000000 --- a/packages/shared/src/components/search/SearchPanel/SearchPanelUserSuggestions.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import classNames from 'classnames'; -import type { ReactElement } from 'react'; -import React, { useContext } from 'react'; -import { useRouter } from 'next/router'; -import type { SearchSuggestion } from '../../../graphql/search'; -import { SearchProviderEnum } from '../../../graphql/search'; -import { useSearchProviderSuggestions } from '../../../hooks/search'; -import { SearchPanelContext } from './SearchPanelContext'; -import { useSearchPanelAction } from './useSearchPanelAction'; -import { LogEvent, Origin, TargetType } from '../../../lib/log'; -import { useLogContext } from '../../../contexts/LogContext'; -import { webappUrl } from '../../../lib/constants'; -import type { ButtonProps } from '../../buttons/Button'; -import { SearchPanelItem } from './SearchPanelItem'; -import { Image } from '../../image/Image'; -import { - FeedSettingsEditContext, - useFeedSettingsEditContext, -} from '../../feeds/FeedSettings/FeedSettingsEditContext'; -import { FollowButton } from '../../contentPreference/FollowButton'; -import { ContentPreferenceType } from '../../../graphql/contentPreference'; -import { CopyType } from '../../sources/SourceActions/SourceActionsFollow'; - -export type SearchPanelUserSuggestionsProps = { - className?: string; - showFollow?: boolean; - title: string; -}; - -type PanelItemProps = Pick, 'onClick'> & { - showFollow?: boolean; - suggestion: SearchSuggestion; -}; - -const PanelItem = ({ suggestion, showFollow, ...rest }: PanelItemProps) => { - const feedSettingsEditContext = useFeedSettingsEditContext(); - const feed = feedSettingsEditContext?.feed; - const Icon = () => ( - {`${suggestion.title} - ); - - const itemProps = useSearchPanelAction({ - provider: SearchProviderEnum.Users, - text: suggestion.title, - icon: , - }); - - return ( - } - {...itemProps} - {...rest} - className="px-2 py-1" - > -
- - {suggestion.title} - - - @{suggestion.subtitle} - -
- {!!showFollow && ( - - )} - - ); -}; - -export const SearchPanelUserSuggestions = ({ - className, - title, - showFollow, -}: SearchPanelUserSuggestionsProps): ReactElement => { - const feedSettingsEditContext = useContext(FeedSettingsEditContext); - const feed = feedSettingsEditContext?.feed; - const router = useRouter(); - const { logEvent } = useLogContext(); - const searchPanel = useContext(SearchPanelContext); - - const { suggestions } = useSearchProviderSuggestions({ - provider: SearchProviderEnum.Users, - query: searchPanel.query, - limit: 3, - includeContentPreference: true, - feedId: feed?.id, - }); - - const onSuggestionClick = (suggestion: SearchSuggestion) => { - const user = suggestion.id || suggestion.subtitle.toLowerCase(); - logEvent({ - event_name: LogEvent.Click, - target_type: TargetType.SearchRecommendation, - target_id: user, - feed_item_title: user, - extra: JSON.stringify({ - origin: Origin.HomePage, - provider: SearchProviderEnum.Users, - }), - }); - - router.push(`${webappUrl}${user}`); - }; - - if (!suggestions?.hits?.length) { - return null; - } - - return ( -
-
-
- - {title} - -
-
- {suggestions?.hits?.map((suggestion) => { - return ( - { - onSuggestionClick(suggestion); - }} - /> - ); - })} -
- ); -}; diff --git a/packages/shared/src/components/search/SearchPanel/common.tsx b/packages/shared/src/components/search/SearchPanel/common.tsx deleted file mode 100644 index 6d77bd17f0e..00000000000 --- a/packages/shared/src/components/search/SearchPanel/common.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type { FunctionComponent } from 'react'; -import React from 'react'; -import classNames from 'classnames'; -import { SearchProviderEnum } from '../../../graphql/search'; -import type { IconProps } from '../../Icon'; -import { GoogleIcon, SearchIcon } from '../../icons'; - -export const defaultSearchProvider = SearchProviderEnum.Posts; - -export const providerToLabelTextMap: Record = { - [SearchProviderEnum.Posts]: 'Search posts', - [SearchProviderEnum.Tags]: 'Search tags', - [SearchProviderEnum.Google]: 'Search on Google', - [SearchProviderEnum.Sources]: 'Search sources', - [SearchProviderEnum.Users]: 'Search users', -}; - -export const providerToIconMap: Record< - SearchProviderEnum, - FunctionComponent -> = { - [SearchProviderEnum.Posts]: SearchIcon, - [SearchProviderEnum.Tags]: SearchIcon, - [SearchProviderEnum.Google]: ({ className, ...rest }: IconProps) => ( - - ), - [SearchProviderEnum.Sources]: SearchIcon, - [SearchProviderEnum.Users]: SearchIcon, -}; diff --git a/packages/shared/src/components/search/SearchPanel/index.ts b/packages/shared/src/components/search/SearchPanel/index.ts deleted file mode 100644 index f6e12125fd6..00000000000 --- a/packages/shared/src/components/search/SearchPanel/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './SearchPanel'; -export * from './common'; diff --git a/packages/shared/src/components/search/SearchPanel/useSearchPanelAction.ts b/packages/shared/src/components/search/SearchPanel/useSearchPanelAction.ts deleted file mode 100644 index e9d44053cd4..00000000000 --- a/packages/shared/src/components/search/SearchPanel/useSearchPanelAction.ts +++ /dev/null @@ -1,61 +0,0 @@ -import type { HTMLAttributes, ReactElement } from 'react'; -import { useContext } from 'react'; -import type { SearchProviderEnum } from '../../../graphql/search'; -import { SearchPanelContext } from './SearchPanelContext'; -import { providerToLabelTextMap } from './common'; - -export type UseSearchPanelActionProps = { - provider: SearchProviderEnum; - text?: string; - icon?: ReactElement; -}; - -export type UseSearchPanelAction = { - onMouseEnter: HTMLAttributes['onMouseEnter']; - onMouseLeave: HTMLAttributes['onMouseLeave']; - onFocus: HTMLAttributes['onFocus']; - onBlur: HTMLAttributes['onBlur']; -}; - -export const useSearchPanelAction = ({ - provider, - text, - icon, -}: UseSearchPanelActionProps): UseSearchPanelAction => { - const searchPanel = useContext(SearchPanelContext); - - const onActive = () => { - searchPanel.setProvider({ - provider, - text: text || providerToLabelTextMap[provider], - icon, - }); - }; - - const onInactive = () => { - searchPanel.setProvider({ - provider: undefined, - }); - }; - - return { - onMouseEnter: onActive, - onMouseLeave: onInactive, - onFocus: (event) => { - if (event?.target instanceof HTMLElement) { - const element = event.target; - element.setAttribute('data-search-panel-active', 'true'); - } - - onActive(); - }, - onBlur: (event) => { - if (event?.target instanceof HTMLElement) { - const element = event.target; - element.removeAttribute('data-search-panel-active'); - } - - onInactive(); - }, - }; -}; diff --git a/packages/shared/src/components/search/index.ts b/packages/shared/src/components/search/index.ts index 7deef871602..42770ab260e 100644 --- a/packages/shared/src/components/search/index.ts +++ b/packages/shared/src/components/search/index.ts @@ -1,2 +1 @@ export * from './SearchProgressBar'; -export * from './SearchPanel'; diff --git a/packages/shared/src/components/spotlight/Spotlight.tsx b/packages/shared/src/components/spotlight/Spotlight.tsx new file mode 100644 index 00000000000..24388ba5675 --- /dev/null +++ b/packages/shared/src/components/spotlight/Spotlight.tsx @@ -0,0 +1,872 @@ +import type { ReactElement } from 'react'; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; +import classNames from 'classnames'; +import { useRouter } from 'next/router'; +import { Command } from 'cmdk'; +import ReactModal from 'react-modal'; +import { ClearIcon, ClickIcon, SearchIcon } from '../icons'; +import { IconSize } from '../Icon'; +import { Loader } from '../Loader'; +import { ElementPlaceholder } from '../ElementPlaceholder'; +import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { Drawer, DrawerPosition } from '../drawers/Drawer'; +import { ViewSize, useViewSize } from '../../hooks'; +import { useAuthContext } from '../../contexts/AuthContext'; +import { AuthTriggers } from '../../lib/auth'; +import { + isAppleDevice, + isExtension, + initReactModal, + isSpecialKeyPressed, +} from '../../lib/func'; +import { + groupLabels, + groupOrder, + type SpotlightCommand, + SpotlightGroup, +} from './types'; +import { useSpotlight } from './useSpotlight'; +import { useRecentCommands } from './useRecentCommands'; +import { useSpotlightCommands } from './useSpotlightCommands'; +import { useSpotlightSearchCommands } from './commands/search'; + +const SUGGESTED_COMMAND_IDS = [ + 'create.compose-text', + 'settings.theme', + 'nav.bookmarks', + 'create.feedback', + 'help.shortcuts', + 'nav.plus', +]; + +const isMac = isAppleDevice(); +const cmdLabel = isMac ? '⌘' : 'Ctrl'; + +interface RowProps { + command: SpotlightCommand; + isLoggedIn: boolean; + isPlus: boolean; + isMobile?: boolean; + pendingConfirmId: string | null; + onSelect: (command: SpotlightCommand) => void; +} + +const SpotlightRow = ({ + command, + isLoggedIn, + isPlus, + isMobile, + pendingConfirmId, + onSelect, +}: RowProps): ReactElement => { + const Icon = command.icon; + const isPending = pendingConfirmId === command.id; + const isPlusGated = command.plusBadge && !isPlus; + const isAuthGated = command.requiresAuth && !isLoggedIn; + const value = `${command.title} ${command.subtitle ?? ''} ${( + command.keywords ?? [] + ).join(' ')}`.toLowerCase(); + + return ( + onSelect(command)} + aria-keyshortcuts={command.shortcut} + className={classNames( + 'group/spotlight-row flex cursor-pointer items-center gap-3 rounded-12 border-l-2 border-transparent px-3 text-left', + isMobile ? 'h-[52px]' : 'h-11', + 'data-[selected=true]:border-l-accent-cabbage-default data-[selected=true]:bg-surface-hover', + 'aria-disabled:cursor-not-allowed aria-disabled:opacity-40', + command.destructive && 'data-[selected=true]:text-status-error', + )} + > + + + + + + {command.title} + + {command.subtitle && ( + + {command.subtitle} + + )} + + {isAuthGated && ( + + Sign in + + )} + {isPlusGated && ( + + Plus + + )} + {isPending && } + {!isPending && command.shortcut && ( + + {command.shortcut} + + )} + + ); +}; + +interface RowsProps { + commands: SpotlightCommand[]; + isLoggedIn: boolean; + isPlus: boolean; + isMobile?: boolean; + pendingConfirmId: string | null; + onSelect: (command: SpotlightCommand) => void; +} + +const renderRows = ({ + commands, + isLoggedIn, + isPlus, + isMobile, + pendingConfirmId, + onSelect, +}: RowsProps) => + commands.map((command) => ( + + )); + +const SkeletonRows = ({ count = 3 }: { count?: number }) => ( +
+ {Array.from({ length: count }).map((_, i) => ( +
+ +
+ + +
+
+ ))} +
+); + +interface ConfirmRowProps { + command: SpotlightCommand; + onCancel: () => void; + onConfirm: () => void; +} + +const DestructiveConfirm = ({ + command, + onCancel, + onConfirm, +}: ConfirmRowProps): ReactElement => ( +
+

+ {command.id === 'actions.logout' + ? 'Log out of daily.dev?' + : `Confirm: ${command.title}`} +

+

+ Press Enter again to confirm, or Esc to cancel. +

+
+ + +
+
+); + +interface SpotlightDialogProps { + isOpen: boolean; + onClose: () => void; + showShortcutsHelp: () => void; + /** Optional analytics callback. Injected by Phase 1's wiring. */ + onCommandRun?: (command: SpotlightCommand) => void; + /** Optional analytics callback for query updates. */ + onQueryChange?: (query: string) => void; + /** Fires when the user opens via Cmd+K. */ + onOpenViaShortcut?: () => void; +} + +interface ShortcutsHelpScreenProps { + cmdShortcutLabel: string; + visibleGroupLabels: string[]; + onClose: () => void; +} + +const ShortcutsHelpScreen = ({ + cmdShortcutLabel, + visibleGroupLabels, + onClose, +}: ShortcutsHelpScreenProps): ReactElement => { + const groupShortcuts = visibleGroupLabels.slice(0, 9).map((label, idx) => ({ + combo: `${cmdShortcutLabel}+${idx + 1}`, + label: `Jump to ${label}`, + })); + const rows: Array<{ combo: string; label: string }> = [ + { combo: `${cmdShortcutLabel}+K`, label: 'Open or close Spotlight' }, + { combo: 'Enter', label: 'Run the highlighted command' }, + { combo: '↑ ↓', label: 'Move selection between commands' }, + { combo: 'Tab', label: 'Cycle to the next group' }, + { combo: 'Shift+Tab', label: 'Cycle to the previous group' }, + { combo: 'Esc', label: 'Close Spotlight or cancel a confirm' }, + ...groupShortcuts, + ]; + return ( +
+
+

+ Keyboard shortcuts +

+ +
+
    + {rows.map((row) => ( +
  • + {row.label} + + {row.combo} + +
    • + ))} +
+
+ ); +}; + +const Hint = ({ label, combo }: { label: string; combo: string }) => ( + + + {combo} + + {label} + +); + +const isInExtensionIframe = (target: EventTarget | null): boolean => { + if (!isExtension || typeof window === 'undefined') { + return false; + } + const node = target instanceof HTMLElement ? target : null; + if (!node) { + return false; + } + // If focus is in any iframe owned by the host page rather than the + // extension's own surface, bail out so we don't steal native browser + // bindings (Linear-style scoping). + return node.tagName === 'IFRAME'; +}; + +export const Spotlight = ({ + isOpen, + onClose, + showShortcutsHelp, + onCommandRun, + onQueryChange, + onOpenViaShortcut, +}: SpotlightDialogProps): ReactElement | null => { + const router = useRouter(); + const { isLoggedIn, showLogin } = useAuthContext(); + const isLaptop = useViewSize(ViewSize.Laptop); + const isMobile = !isLaptop; + const inputRef = useRef(null); + const [resultCount, setResultCount] = useState(null); + const [showHelp, setShowHelp] = useState(false); + const [groupCursor, setGroupCursor] = useState(0); + const handleShowShortcutsHelp = useCallback(() => { + setShowHelp(true); + showShortcutsHelp(); + }, [showShortcutsHelp]); + const { commands, env } = useSpotlightCommands({ + showShortcutsHelp: handleShowShortcutsHelp, + }); + const { + recent, + refresh: refreshRecent, + push: pushRecent, + } = useRecentCommands(); + const spotlight = useSpotlight(); + const { query, setQuery, pendingConfirmId, requestConfirm, clearConfirm } = + spotlight; + const search = useSpotlightSearchCommands({ router, query }); + + useEffect(() => { + if (typeof window === 'undefined') { + return undefined; + } + const handleKeydown = (event: KeyboardEvent) => { + if (!isSpecialKeyPressed({ event }) || event.key.toLowerCase() !== 'k') { + return; + } + if (isInExtensionIframe(document.activeElement)) { + return; + } + event.preventDefault(); + if (isOpen) { + onClose(); + return; + } + spotlight.open(); + onOpenViaShortcut?.(); + }; + window.addEventListener('keydown', handleKeydown); + return () => { + window.removeEventListener('keydown', handleKeydown); + }; + }, [isOpen, onClose, spotlight, onOpenViaShortcut]); + + useEffect(() => { + if (!isExtension) { + initReactModal({ modalObject: ReactModal, appElement: '#__next' }); + } + }, []); + + useEffect(() => { + if (isOpen) { + refreshRecent(); + } else { + setShowHelp(false); + } + }, [isOpen, refreshRecent]); + + useEffect(() => { + onQueryChange?.(query); + }, [query, onQueryChange]); + + const commandById = useMemo(() => { + const map = new Map(); + commands.forEach((cmd) => map.set(cmd.id, cmd)); + return map; + }, [commands]); + + const grouped = useMemo(() => { + const out: Record = { + [SpotlightGroup.Suggested]: [], + [SpotlightGroup.Recent]: [], + [SpotlightGroup.Navigate]: [], + [SpotlightGroup.Create]: [], + [SpotlightGroup.Settings]: [], + [SpotlightGroup.Actions]: [], + [SpotlightGroup.Search]: [], + [SpotlightGroup.Help]: [], + }; + commands.forEach((cmd) => { + out[cmd.group].push(cmd); + }); + return out; + }, [commands]); + + const trimmedQuery = query.trim(); + const isFiltering = trimmedQuery.length > 0; + + const suggested = useMemo( + () => + SUGGESTED_COMMAND_IDS.map((id) => commandById.get(id)).filter( + (cmd): cmd is SpotlightCommand => !!cmd, + ), + [commandById], + ); + + const recentCommands = useMemo(() => { + if (isFiltering) { + return []; + } + return recent + .map((entry) => commandById.get(entry.commandId)) + .filter((cmd): cmd is SpotlightCommand => !!cmd); + }, [recent, commandById, isFiltering]); + + const handleSelect = useCallback( + (command: SpotlightCommand) => { + if (command.requiresAuth && !isLoggedIn) { + showLogin({ trigger: AuthTriggers.SearchInput }); + onClose(); + return; + } + if (command.plusBadge && !env.isPlus) { + // Same friendly behavior — bounce to upgrade flow on the Plus page. + router.push('/plus'); + onClose(); + return; + } + if (command.destructive && pendingConfirmId !== command.id) { + requestConfirm(command.id); + return; + } + pushRecent(command.id); + onCommandRun?.(command); + Promise.resolve(command.perform()).finally(() => { + clearConfirm(); + onClose(); + }); + }, + [ + isLoggedIn, + showLogin, + onClose, + env.isPlus, + router, + pendingConfirmId, + requestConfirm, + pushRecent, + onCommandRun, + clearConfirm, + ], + ); + + const handleFallthroughEnter = useCallback(() => { + if (!trimmedQuery) { + return; + } + const fallthrough = search.fallthrough[0]; + if (fallthrough) { + handleSelect(fallthrough); + } + }, [trimmedQuery, search.fallthrough, handleSelect]); + + /** + * Groups visible right now (skip Suggested when filtering, etc.). Cmd+1..9 + * and Tab navigate between these in display order. + */ + const visibleGroups = useMemo(() => { + if (isFiltering) { + const filterGroups: SpotlightGroup[] = []; + groupOrder.forEach((group) => { + if ( + group === SpotlightGroup.Suggested || + group === SpotlightGroup.Recent + ) { + return; + } + if (grouped[group].length > 0) { + filterGroups.push(group); + } + }); + return filterGroups; + } + const out: SpotlightGroup[] = []; + if (suggested.length > 0) { + out.push(SpotlightGroup.Suggested); + } + if (recentCommands.length > 0) { + out.push(SpotlightGroup.Recent); + } + groupOrder.forEach((group) => { + if ( + group === SpotlightGroup.Suggested || + group === SpotlightGroup.Recent || + group === SpotlightGroup.Search + ) { + return; + } + if (grouped[group].length > 0) { + out.push(group); + } + }); + return out; + }, [isFiltering, grouped, suggested.length, recentCommands.length]); + + const jumpToGroup = useCallback((group: SpotlightGroup) => { + const heading = document.querySelector( + `[cmdk-group][data-spotlight-group="${group}"]`, + ); + if (heading instanceof HTMLElement) { + heading.scrollIntoView({ block: 'start', behavior: 'smooth' }); + } + }, []); + + const pendingCommand = pendingConfirmId + ? commandById.get(pendingConfirmId) + : null; + + if (!isOpen) { + return null; + } + + const commonRowProps = { + isLoggedIn, + isPlus: env.isPlus, + isMobile, + pendingConfirmId, + onSelect: handleSelect, + }; + + const paletteBody = ( + <> +

+ Spotlight +

+
+ {resultCount !== null + ? `${resultCount} ${resultCount === 1 ? 'result' : 'results'}` + : ''} +
+ { + if (event.key === 'Escape') { + if (showHelp) { + event.preventDefault(); + event.stopPropagation(); + setShowHelp(false); + return; + } + if (pendingConfirmId) { + event.preventDefault(); + event.stopPropagation(); + clearConfirm(); + return; + } + } + if ( + (event.metaKey || event.ctrlKey) && + event.key >= '1' && + event.key <= '9' + ) { + const idx = Number(event.key) - 1; + const target = visibleGroups[idx]; + if (target) { + event.preventDefault(); + setGroupCursor(idx); + jumpToGroup(target); + } + return; + } + if (event.key === 'Tab' && visibleGroups.length > 0) { + event.preventDefault(); + const direction = event.shiftKey ? -1 : 1; + const nextIdx = + (groupCursor + direction + visibleGroups.length) % + visibleGroups.length; + setGroupCursor(nextIdx); + jumpToGroup(visibleGroups[nextIdx]); + } + }} + > + {!pendingCommand && ( +
+ + { + if (event.key === 'Enter' && isFiltering && resultCount === 0) { + event.preventDefault(); + handleFallthroughEnter(); + } + }} + /> + {search.isLoading && } + {query && ( + + )} +
+ )} + + {pendingCommand && ( + handleSelect(pendingCommand)} + /> + )} + + {!pendingCommand && showHelp && ( + groupLabels[group], + )} + onClose={() => setShowHelp(false)} + /> + )} + + {!pendingCommand && !showHelp && ( + { + // No-op: cmdk handles selection sync automatically. + }} + ref={(node) => { + if (!node) { + setResultCount(null); + return; + } + const items = node.querySelectorAll('[data-command-id]'); + setResultCount(items.length); + }} + > + {!isFiltering && suggested.length > 0 && ( + + {renderRows({ ...commonRowProps, commands: suggested })} + + )} + + {!isFiltering && recentCommands.length > 0 && ( + + {renderRows({ ...commonRowProps, commands: recentCommands })} + + )} + + {groupOrder + .filter( + (group) => + group !== SpotlightGroup.Suggested && + group !== SpotlightGroup.Recent && + group !== SpotlightGroup.Search, + ) + .map((group) => { + const items = grouped[group]; + if (!items.length) { + return null; + } + return ( + + {renderRows({ ...commonRowProps, commands: items })} + + ); + })} + + {isFiltering && search.isLoading && ( + + + + )} + + {isFiltering && + !search.isLoading && + (search.posts.length > 0 || + search.tags.length > 0 || + search.sources.length > 0 || + search.users.length > 0) && ( + + {renderRows({ + ...commonRowProps, + commands: [ + ...search.posts, + ...search.tags, + ...search.sources, + ...search.users, + ], + })} + + )} + + {isFiltering && search.fallthrough.length > 0 && ( + + {renderRows({ + ...commonRowProps, + commands: search.fallthrough, + })} + + )} + + + +

+ {trimmedQuery + ? `Nothing matches "${trimmedQuery}".` + : 'No commands available.'} +

+

+ Try a different word, or search posts on the web. +

+ {trimmedQuery && ( + + )} + + + )} + +
+ + + + + + + + {cmdLabel} + + + K + + Toggle + +
+ + + ); + + if (isMobile) { + return ( + + {paletteBody} + + ); + } + + return ( + + {paletteBody} + + ); +}; + +export default Spotlight; diff --git a/packages/shared/src/components/spotlight/SpotlightContext.tsx b/packages/shared/src/components/spotlight/SpotlightContext.tsx new file mode 100644 index 00000000000..a37314630d1 --- /dev/null +++ b/packages/shared/src/components/spotlight/SpotlightContext.tsx @@ -0,0 +1,95 @@ +import type { ReactElement, ReactNode } from 'react'; +import React, { createContext, useCallback, useMemo, useState } from 'react'; + +export interface SpotlightContextValue { + isOpen: boolean; + query: string; + /** Inline destructive-confirm gate: the command id awaiting confirm. */ + pendingConfirmId: string | null; + open: () => void; + close: () => void; + toggle: () => void; + setQuery: (value: string) => void; + requestConfirm: (commandId: string) => void; + clearConfirm: () => void; +} + +export const SpotlightContext = createContext( + null, +); + +interface SpotlightProviderProps { + children: ReactNode; +} + +export const SpotlightProvider = ({ + children, +}: SpotlightProviderProps): ReactElement => { + const [isOpen, setIsOpen] = useState(false); + const [query, setQueryState] = useState(''); + const [pendingConfirmId, setPendingConfirmId] = useState(null); + + const open = useCallback(() => { + setIsOpen(true); + }, []); + + const close = useCallback(() => { + setIsOpen(false); + setQueryState(''); + setPendingConfirmId(null); + }, []); + + const toggle = useCallback(() => { + setIsOpen((prev) => { + if (prev) { + setQueryState(''); + setPendingConfirmId(null); + } + return !prev; + }); + }, []); + + const setQuery = useCallback((value: string) => { + setQueryState(value); + setPendingConfirmId(null); + }, []); + + const requestConfirm = useCallback((commandId: string) => { + setPendingConfirmId(commandId); + }, []); + + const clearConfirm = useCallback(() => { + setPendingConfirmId(null); + }, []); + + const value = useMemo( + () => ({ + isOpen, + query, + pendingConfirmId, + open, + close, + toggle, + setQuery, + requestConfirm, + clearConfirm, + }), + [ + isOpen, + query, + pendingConfirmId, + open, + close, + toggle, + setQuery, + requestConfirm, + clearConfirm, + ], + ); + + return ( + + {children} + + ); +}; diff --git a/packages/shared/src/components/spotlight/SpotlightHost.tsx b/packages/shared/src/components/spotlight/SpotlightHost.tsx new file mode 100644 index 00000000000..8061867ad42 --- /dev/null +++ b/packages/shared/src/components/spotlight/SpotlightHost.tsx @@ -0,0 +1,78 @@ +import type { ReactElement } from 'react'; +import React, { useCallback } from 'react'; +import dynamic from 'next/dynamic'; +import { useLogContext } from '../../contexts/LogContext'; +import { LogEvent, TargetId } from '../../lib/log'; +import { useSpotlight } from './useSpotlight'; +import type { SpotlightCommand } from './types'; + +const Spotlight = dynamic( + () => import(/* webpackChunkName: "spotlight" */ './Spotlight'), + { ssr: false }, +); + +/** + * Mounts the Spotlight dialog globally. Exposes the analytics callbacks so + * the registry stays decoupled from the host's `useLogContext`. The global + * Cmd+K listener is owned by the Spotlight component itself, so this host + * just renders the dialog and wires telemetry. + */ +export const SpotlightHost = (): ReactElement => { + const { logEvent } = useLogContext(); + const { isOpen, close } = useSpotlight(); + + const handleOpenViaShortcut = useCallback(() => { + logEvent({ + event_name: LogEvent.KeyboardShortcutTriggered, + target_id: TargetId.SpotlightOpen, + }); + logEvent({ + event_name: LogEvent.Impression, + target_id: 'spotlight_open', + }); + }, [logEvent]); + + const handleCommandRun = useCallback( + (command: SpotlightCommand) => { + logEvent({ + event_name: LogEvent.Click, + target_id: `spotlight_${command.id}`, + }); + }, + [logEvent], + ); + + const handleQueryChange = useCallback( + (query: string) => { + const trimmed = query.trim(); + if (!trimmed) { + return; + } + logEvent({ + event_name: LogEvent.SubmitSearch, + target_id: 'spotlight_query', + extra: JSON.stringify({ query_length: trimmed.length }), + }); + }, + [logEvent], + ); + + const showShortcutsHelp = useCallback(() => { + // The actual help screen is rendered inside `Spotlight`. This callback + // exists so the registry's "Show keyboard shortcuts" command has a + // hook for analytics if we want to log help opens later. + }, []); + + return ( + + ); +}; + +export default SpotlightHost; diff --git a/packages/shared/src/components/spotlight/SpotlightTrigger.tsx b/packages/shared/src/components/spotlight/SpotlightTrigger.tsx new file mode 100644 index 00000000000..2219df87c62 --- /dev/null +++ b/packages/shared/src/components/spotlight/SpotlightTrigger.tsx @@ -0,0 +1,76 @@ +import type { ReactElement } from 'react'; +import React from 'react'; +import classNames from 'classnames'; +import { SearchIcon } from '../icons'; +import { IconSize } from '../Icon'; +import { isAppleDevice } from '../../lib/func'; +import { useSpotlight } from './useSpotlight'; +import { ViewSize, useViewSize } from '../../hooks'; + +interface SpotlightTriggerProps { + className?: string; +} + +const cmdLabel = isAppleDevice() ? '⌘' : 'Ctrl'; + +/** + * Header pill that lives where the old SearchPanel input used to. Looks + * like a search bar but is a single button — clicking (or focusing+Enter) + * opens the global Spotlight modal. + */ +export const SpotlightTrigger = ({ + className, +}: SpotlightTriggerProps): ReactElement => { + const { open } = useSpotlight(); + const isLaptop = useViewSize(ViewSize.Laptop); + + if (!isLaptop) { + return ( + + ); + } + + return ( + + ); +}; + +export default SpotlightTrigger; diff --git a/packages/shared/src/components/spotlight/commands/actions.ts b/packages/shared/src/components/spotlight/commands/actions.ts new file mode 100644 index 00000000000..08b6af5117d --- /dev/null +++ b/packages/shared/src/components/spotlight/commands/actions.ts @@ -0,0 +1,99 @@ +import type { NextRouter } from 'next/router'; +import { + BookmarkIcon, + EyeIcon, + KeyReferralIcon, + MegaphoneIcon, + PowerIcon, +} from '../../icons'; +import { LazyModal } from '../../modals/common/types'; +import type { LazyModalType, ModalsType } from '../../modals/common'; +import type { LoggedUser } from '../../../lib/user'; +import { LogoutReason } from '../../../lib/user'; +import { webappUrl } from '../../../lib/constants'; +import { SpotlightGroup, type SpotlightCommand } from '../types'; + +interface ActionsContext { + router: Pick; + openModal: (data: LazyModalType) => void; + logout: (reason: string) => Promise; + user?: Pick | null; + copyToClipboard?: (text: string) => Promise | void; +} + +export const getActionsCommands = ({ + router, + openModal, + logout, + user, + copyToClipboard, +}: ActionsContext): SpotlightCommand[] => { + const commands: SpotlightCommand[] = [ + { + id: 'actions.reading-history', + title: 'Open reading history', + icon: EyeIcon, + keywords: ['history', 'recently read'], + group: SpotlightGroup.Actions, + requiresAuth: true, + perform: () => { + router.push(`${webappUrl}history`); + }, + }, + { + id: 'actions.ads-dashboard', + title: 'Open ads dashboard', + subtitle: 'Manage post boosts and campaigns', + icon: MegaphoneIcon, + keywords: ['ads', 'boost', 'campaigns'], + group: SpotlightGroup.Actions, + requiresAuth: true, + perform: () => { + openModal({ type: LazyModal.AdsDashboard }); + }, + }, + { + id: 'actions.move-bookmark', + title: 'Manage bookmarks', + icon: BookmarkIcon, + keywords: ['bookmarks', 'folders'], + group: SpotlightGroup.Actions, + requiresAuth: true, + perform: () => { + router.push(`${webappUrl}bookmarks`); + }, + }, + ]; + + if (user?.username && copyToClipboard) { + commands.push({ + id: 'actions.copy-referral', + title: 'Copy referral link', + subtitle: 'Invite friends and earn referrals', + icon: KeyReferralIcon, + keywords: ['invite', 'referral', 'share'], + group: SpotlightGroup.Actions, + requiresAuth: true, + perform: async () => { + await copyToClipboard( + `${webappUrl}join?cid=referral&userid=${user.id}`, + ); + }, + }); + } + + commands.push({ + id: 'actions.logout', + title: 'Log out', + icon: PowerIcon, + keywords: ['sign out', 'logout'], + group: SpotlightGroup.Actions, + destructive: true, + requiresAuth: true, + perform: async () => { + await logout(LogoutReason.ManualLogout); + }, + }); + + return commands; +}; diff --git a/packages/shared/src/components/spotlight/commands/create.ts b/packages/shared/src/components/spotlight/commands/create.ts new file mode 100644 index 00000000000..7087826cd3a --- /dev/null +++ b/packages/shared/src/components/spotlight/commands/create.ts @@ -0,0 +1,166 @@ +import type { NextRouter } from 'next/router'; +import { + BookmarkIcon, + EditIcon, + FeedbackIcon, + GiftIcon, + MegaphoneIcon, + PlusIcon, + PollIcon, + ShortcutsIcon, + SlackIcon, + SourceIcon, + SquadIcon, +} from '../../icons'; +import { LazyModal } from '../../modals/common/types'; +import type { LazyModalType, ModalsType } from '../../modals/common'; +import { webappUrl } from '../../../lib/constants'; +import { SpotlightGroup, type SpotlightCommand } from '../types'; + +interface CreateContext { + router: Pick; + openModal: (data: LazyModalType) => void; +} + +export const getCreateCommands = ({ + router, + openModal, +}: CreateContext): SpotlightCommand[] => [ + { + id: 'create.compose-text', + title: 'Open composer', + subtitle: 'Write a post, share a link, or start a discussion', + icon: EditIcon, + keywords: ['write', 'post', 'share', 'link', 'compose'], + group: SpotlightGroup.Create, + shortcut: 'c', + requiresAuth: true, + perform: () => { + openModal({ + type: LazyModal.SmartComposer, + props: { initialKind: 'text' }, + }); + }, + }, + { + id: 'create.compose-poll', + title: 'Create poll', + subtitle: 'Ask the community a question', + icon: PollIcon, + keywords: ['poll', 'vote', 'question'], + group: SpotlightGroup.Create, + requiresAuth: true, + perform: () => { + openModal({ + type: LazyModal.SmartComposer, + props: { initialKind: 'poll' }, + }); + }, + }, + { + id: 'create.compose-standup', + title: 'Start standup', + subtitle: 'Open a live audio room', + icon: MegaphoneIcon, + keywords: ['standup', 'live', 'audio', 'room'], + group: SpotlightGroup.Create, + requiresAuth: true, + perform: () => { + openModal({ + type: LazyModal.SmartComposer, + props: { initialKind: 'standup' }, + }); + }, + }, + { + id: 'create.new-squad', + title: 'Create new squad', + subtitle: 'Start a community', + icon: SquadIcon, + keywords: ['squad', 'community', 'group'], + group: SpotlightGroup.Create, + requiresAuth: true, + perform: () => { + openModal({ type: LazyModal.NewSquad }); + }, + }, + { + id: 'create.new-feed', + title: 'Create new custom feed', + icon: PlusIcon, + keywords: ['feed', 'custom feed'], + group: SpotlightGroup.Create, + requiresAuth: true, + perform: () => { + router.push(`${webappUrl}feeds/new`); + }, + }, + { + id: 'create.bookmark-folder', + title: 'Create new bookmark folder', + icon: BookmarkIcon, + keywords: ['folder', 'organize bookmarks'], + group: SpotlightGroup.Create, + requiresAuth: true, + perform: () => { + router.push(`${webappUrl}bookmarks?createFolder=1`); + }, + }, + { + id: 'create.suggest-source', + title: 'Suggest a source', + subtitle: 'Add a publication to daily.dev', + icon: SourceIcon, + keywords: ['publisher', 'rss', 'request source'], + group: SpotlightGroup.Create, + requiresAuth: true, + perform: () => { + openModal({ type: LazyModal.NewSource }); + }, + }, + { + id: 'create.feedback', + title: 'Submit feedback', + icon: FeedbackIcon, + keywords: ['report', 'bug', 'idea', 'suggestion'], + group: SpotlightGroup.Create, + requiresAuth: true, + perform: () => { + openModal({ type: LazyModal.Feedback }); + }, + }, + { + id: 'create.gift-plus', + title: 'Gift Plus', + subtitle: 'Send a Plus subscription', + icon: GiftIcon, + keywords: ['gift', 'plus', 'subscription'], + group: SpotlightGroup.Create, + requiresAuth: true, + perform: () => { + openModal({ type: LazyModal.GiftPlus }); + }, + }, + { + id: 'create.connect-slack', + title: 'Manage Slack integration', + icon: SlackIcon, + keywords: ['integration', 'slack'], + group: SpotlightGroup.Create, + requiresAuth: true, + perform: () => { + router.push(`${webappUrl}settings/integrations`); + }, + }, + { + id: 'create.manage-shortcuts', + title: 'Manage shortcuts', + icon: ShortcutsIcon, + keywords: ['shortcuts', 'links', 'pinned'], + group: SpotlightGroup.Create, + requiresAuth: true, + perform: () => { + openModal({ type: LazyModal.ShortcutsManage }); + }, + }, +]; diff --git a/packages/shared/src/components/spotlight/commands/help.ts b/packages/shared/src/components/spotlight/commands/help.ts new file mode 100644 index 00000000000..d54fe0f960f --- /dev/null +++ b/packages/shared/src/components/spotlight/commands/help.ts @@ -0,0 +1,29 @@ +import { InfoIcon, KeyIcon } from '../../icons'; +import { SpotlightGroup, type SpotlightCommand } from '../types'; + +interface HelpContext { + showShortcutsHelp: () => void; +} + +export const getHelpCommands = ({ + showShortcutsHelp, +}: HelpContext): SpotlightCommand[] => [ + { + id: 'help.shortcuts', + title: 'Show keyboard shortcuts', + icon: KeyIcon, + keywords: ['shortcuts', 'keys', 'help', 'hotkeys'], + group: SpotlightGroup.Help, + shortcut: '?', + perform: showShortcutsHelp, + }, + { + id: 'help.about', + title: 'About Spotlight', + subtitle: 'Cmd+K to open from anywhere', + icon: InfoIcon, + keywords: ['about', 'help', 'spotlight'], + group: SpotlightGroup.Help, + perform: showShortcutsHelp, + }, +]; diff --git a/packages/shared/src/components/spotlight/commands/navigate.spec.ts b/packages/shared/src/components/spotlight/commands/navigate.spec.ts new file mode 100644 index 00000000000..017119e504a --- /dev/null +++ b/packages/shared/src/components/spotlight/commands/navigate.spec.ts @@ -0,0 +1,58 @@ +import { getNavigateCommands } from './navigate'; +import { SpotlightGroup } from '../types'; + +describe('getNavigateCommands', () => { + const router = { push: jest.fn() }; + + beforeEach(() => { + router.push.mockReset(); + }); + + it('returns commands in the Navigate group only', () => { + const commands = getNavigateCommands({ router, user: null }); + expect(commands).not.toHaveLength(0); + commands.forEach((command) => { + expect(command.group).toBe(SpotlightGroup.Navigate); + }); + }); + + it('uses the verb-prefix convention on every title', () => { + const commands = getNavigateCommands({ router, user: null }); + commands.forEach((command) => { + expect(command.title.startsWith('Go to')).toBe(true); + }); + }); + + it('appends a profile shortcut when a user is provided', () => { + const withUser = getNavigateCommands({ + router, + user: { username: 'jane' }, + }); + expect(withUser.find((cmd) => cmd.id === 'nav.profile')).toBeDefined(); + + const withoutUser = getNavigateCommands({ router, user: null }); + expect(withoutUser.find((cmd) => cmd.id === 'nav.profile')).toBeUndefined(); + }); + + it('marks personal routes as auth-required', () => { + const commands = getNavigateCommands({ router, user: null }); + const myFeed = commands.find((cmd) => cmd.id === 'nav.my-feed'); + const popular = commands.find((cmd) => cmd.id === 'nav.popular'); + expect(myFeed?.requiresAuth).toBe(true); + expect(popular?.requiresAuth).toBeUndefined(); + }); + + it('routes via webappUrl when perform is invoked', () => { + process.env.NEXT_PUBLIC_WEBAPP_URL = 'https://example.test/'; + // Re-require the module so it picks up the constant under the new env. + jest.resetModules(); + // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require + const navigateModule = require('./navigate'); + const commands = navigateModule.getNavigateCommands({ router, user: null }); + const popular = commands.find( + (cmd: { id: string }) => cmd.id === 'nav.popular', + ); + popular.perform(); + expect(router.push).toHaveBeenCalledWith('https://example.test/posts'); + }); +}); diff --git a/packages/shared/src/components/spotlight/commands/navigate.ts b/packages/shared/src/components/spotlight/commands/navigate.ts new file mode 100644 index 00000000000..c2013924ce0 --- /dev/null +++ b/packages/shared/src/components/spotlight/commands/navigate.ts @@ -0,0 +1,274 @@ +import type { NextRouter } from 'next/router'; +import { + AnalyticsIcon, + BellIcon, + BookmarkIcon, + BriefIcon, + CoreFlatIcon, + DevCardIcon, + DevPlusIcon, + EyeIcon, + HashtagIcon, + HomeIcon, + HotIcon, + JobIcon, + JoystickIcon, + ReadingStreakIcon, + ReputationIcon, + SettingsIcon, + SourceIcon, + SquadIcon, + TimerIcon, + UpvoteIcon, + UserIcon, +} from '../../icons'; +import type { LoggedUser } from '../../../lib/user'; +import { webappUrl } from '../../../lib/constants'; +import { SpotlightGroup, type SpotlightCommand } from '../types'; + +interface NavigateContext { + router: Pick; + user?: Pick | null; +} + +/** + * Navigation commands. Use `${webappUrl}` so the same code works in + * webapp (router.push reaches the page) and in the browser extension + * (router.push opens the webapp page rather than an internal popup route). + */ +export const getNavigateCommands = ({ + router, + user, +}: NavigateContext): SpotlightCommand[] => { + const go = (path: string) => () => { + router.push(`${webappUrl}${path}`); + }; + + const commands: SpotlightCommand[] = [ + { + id: 'nav.for-you', + title: 'Go to For you', + subtitle: 'Your personalized feed', + icon: HomeIcon, + keywords: ['home', 'feed', 'main'], + group: SpotlightGroup.Navigate, + perform: go(''), + }, + { + id: 'nav.my-feed', + title: 'Go to My feed', + icon: HomeIcon, + keywords: ['personal'], + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go('my-feed'), + }, + { + id: 'nav.following', + title: 'Go to Following', + icon: UserIcon, + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go('following'), + }, + { + id: 'nav.popular', + title: 'Go to Popular', + icon: HotIcon, + keywords: ['explore', 'trending'], + group: SpotlightGroup.Navigate, + perform: go('posts'), + }, + { + id: 'nav.latest', + title: 'Go to Latest', + icon: TimerIcon, + keywords: ['recent', 'new'], + group: SpotlightGroup.Navigate, + perform: go('posts/latest'), + }, + { + id: 'nav.most-upvoted', + title: 'Go to Most upvoted', + icon: UpvoteIcon, + group: SpotlightGroup.Navigate, + perform: go('posts/upvoted'), + }, + { + id: 'nav.discussed', + title: 'Go to Discussions', + icon: HotIcon, + keywords: ['discussions', 'comments'], + group: SpotlightGroup.Navigate, + perform: go('discussed'), + }, + { + id: 'nav.bookmarks', + title: 'Go to Bookmarks', + icon: BookmarkIcon, + keywords: ['saved'], + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go('bookmarks'), + }, + { + id: 'nav.read-later', + title: 'Go to Read later', + icon: BookmarkIcon, + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go('bookmarks/later'), + }, + { + id: 'nav.history', + title: 'Go to History', + icon: EyeIcon, + keywords: ['reading history', 'visited'], + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go('history'), + }, + { + id: 'nav.notifications', + title: 'Go to Notifications', + icon: BellIcon, + keywords: ['activity', 'inbox'], + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go('notifications'), + }, + { + id: 'nav.highlights', + title: 'Go to Highlights', + icon: HotIcon, + keywords: ['headlines', 'happening now'], + group: SpotlightGroup.Navigate, + perform: go('highlights'), + }, + { + id: 'nav.tags', + title: 'Go to Tags', + icon: HashtagIcon, + keywords: ['topics'], + group: SpotlightGroup.Navigate, + perform: go('tags'), + }, + { + id: 'nav.sources', + title: 'Go to Sources', + icon: SourceIcon, + keywords: ['publishers'], + group: SpotlightGroup.Navigate, + perform: go('sources'), + }, + { + id: 'nav.squads', + title: 'Go to Squads', + icon: SquadIcon, + keywords: ['communities'], + group: SpotlightGroup.Navigate, + perform: go('squads'), + }, + { + id: 'nav.leaderboard', + title: 'Go to Leaderboard', + icon: ReputationIcon, + keywords: ['users', 'top developers'], + group: SpotlightGroup.Navigate, + perform: go('users'), + }, + { + id: 'nav.briefing', + title: 'Go to Presidential briefing', + icon: BriefIcon, + keywords: ['daily brief'], + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go('briefing'), + }, + { + id: 'nav.standups', + title: 'Go to Standups', + icon: ReadingStreakIcon, + keywords: ['live rooms'], + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go('standups'), + }, + { + id: 'nav.game-center', + title: 'Go to Game center', + icon: JoystickIcon, + keywords: ['quests', 'achievements', 'gamification'], + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go('game-center'), + }, + { + id: 'nav.analytics', + title: 'Go to Analytics', + icon: AnalyticsIcon, + keywords: ['stats', 'reading'], + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go('analytics'), + }, + { + id: 'nav.devcard', + title: 'Go to DevCard', + icon: DevCardIcon, + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go('settings/customization/devcard'), + }, + { + id: 'nav.plus', + title: 'Go to Plus', + subtitle: 'Manage or upgrade your subscription', + icon: DevPlusIcon, + keywords: ['subscription', 'upgrade', 'membership'], + group: SpotlightGroup.Navigate, + perform: go('plus'), + }, + { + id: 'nav.wallet', + title: 'Go to Wallet', + icon: CoreFlatIcon, + keywords: ['cores', 'balance'], + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go('wallet'), + }, + { + id: 'nav.jobs', + title: 'Go to Jobs', + icon: JobIcon, + keywords: ['career', 'opportunities'], + group: SpotlightGroup.Navigate, + perform: go('jobs'), + }, + { + id: 'nav.settings', + title: 'Go to Settings', + icon: SettingsIcon, + keywords: ['preferences', 'account'], + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go('settings/profile'), + }, + ]; + + if (user?.username) { + commands.push({ + id: 'nav.profile', + title: 'Go to your profile', + icon: UserIcon, + keywords: ['me', 'account'], + group: SpotlightGroup.Navigate, + requiresAuth: true, + perform: go(user.username), + }); + } + + return commands; +}; diff --git a/packages/shared/src/components/spotlight/commands/search.spec.tsx b/packages/shared/src/components/spotlight/commands/search.spec.tsx new file mode 100644 index 00000000000..6110d54549c --- /dev/null +++ b/packages/shared/src/components/spotlight/commands/search.spec.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { renderHook } from '@testing-library/react'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { useSpotlightSearchCommands } from './search'; + +jest.mock('../../../hooks/search', () => ({ + useSearchProviderSuggestions: jest.fn(() => ({ + suggestions: { hits: [] }, + isLoading: false, + queryKey: [], + })), +})); + +const wrapper = ({ children }: { children: React.ReactNode }) => ( + + {children} + +); + +describe('useSpotlightSearchCommands', () => { + it('emits no fallthrough when the query is blank', () => { + const { result } = renderHook( + () => + useSpotlightSearchCommands({ + router: { push: jest.fn() }, + query: '', + }), + { wrapper }, + ); + + expect(result.current.fallthrough).toEqual([]); + }); + + it('always returns a posts fallthrough when there is a typed query', () => { + const { result } = renderHook( + () => + useSpotlightSearchCommands({ + router: { push: jest.fn() }, + query: 'react query ', + }), + { wrapper }, + ); + + expect(result.current.fallthrough).toHaveLength(1); + expect(result.current.fallthrough[0].title).toContain('react query'); + expect(result.current.fallthrough[0].id).toBe('search.fallthrough.posts'); + }); +}); diff --git a/packages/shared/src/components/spotlight/commands/search.ts b/packages/shared/src/components/spotlight/commands/search.ts new file mode 100644 index 00000000000..3b644c2eb43 --- /dev/null +++ b/packages/shared/src/components/spotlight/commands/search.ts @@ -0,0 +1,179 @@ +import { useMemo } from 'react'; +import type { NextRouter } from 'next/router'; +import { HashtagIcon, SearchIcon, SourceIcon, UserIcon } from '../../icons'; +import { + SearchProviderEnum, + getSearchUrl, + type SearchSuggestion, +} from '../../../graphql/search'; +import { useSearchProviderSuggestions } from '../../../hooks/search'; +import { webappUrl } from '../../../lib/constants'; +import { SpotlightGroup, type SpotlightCommand } from '../types'; + +interface SearchCommandsContext { + router: Pick; + query: string; +} + +export interface SpotlightSearchCommands { + isLoading: boolean; + posts: SpotlightCommand[]; + tags: SpotlightCommand[]; + sources: SpotlightCommand[]; + users: SpotlightCommand[]; + /** Always-on fallthrough rows, shown even while suggestions are loading. */ + fallthrough: SpotlightCommand[]; +} + +const buildPostCommand = ( + hit: SearchSuggestion, + router: SearchCommandsContext['router'], +): SpotlightCommand => ({ + id: `search.post.${hit.id ?? hit.title}`, + title: hit.title, + subtitle: hit.subtitle, + icon: SearchIcon, + group: SpotlightGroup.Search, + perform: () => { + if (hit.id) { + router.push(`${webappUrl}posts/${hit.id}`); + return; + } + router.push( + getSearchUrl({ query: hit.title, provider: SearchProviderEnum.Posts }), + ); + }, +}); + +const buildTagCommand = ( + hit: SearchSuggestion, + router: SearchCommandsContext['router'], +): SpotlightCommand => ({ + id: `search.tag.${hit.id ?? hit.title}`, + title: `#${hit.title}`, + subtitle: hit.subtitle, + icon: HashtagIcon, + group: SpotlightGroup.Search, + perform: () => { + router.push(`${webappUrl}tags/${hit.title}`); + }, +}); + +const buildSourceCommand = ( + hit: SearchSuggestion, + router: SearchCommandsContext['router'], +): SpotlightCommand => ({ + id: `search.source.${hit.id ?? hit.title}`, + title: hit.title, + subtitle: hit.subtitle ?? 'Source', + icon: SourceIcon, + group: SpotlightGroup.Search, + perform: () => { + if (!hit.id) { + return; + } + router.push(`${webappUrl}sources/${hit.id}`); + }, +}); + +const buildUserCommand = ( + hit: SearchSuggestion, + router: SearchCommandsContext['router'], +): SpotlightCommand => ({ + id: `search.user.${hit.id ?? hit.title}`, + title: hit.title, + subtitle: hit.subtitle, + icon: UserIcon, + group: SpotlightGroup.Search, + perform: () => { + if (!hit.subtitle) { + return; + } + // `subtitle` carries the @username for user suggestions. + const handle = hit.subtitle.startsWith('@') + ? hit.subtitle.slice(1) + : hit.subtitle; + router.push(`${webappUrl}${handle}`); + }, +}); + +/** + * Always-on rows that act as the no-results escape hatch and explicit + * search-provider entry points. Visible whenever there's a query. + */ +const buildFallthrough = ( + query: string, + router: SearchCommandsContext['router'], +): SpotlightCommand[] => { + const trimmed = query.trim(); + if (!trimmed) { + return []; + } + return [ + { + id: 'search.fallthrough.posts', + title: `Search posts for "${trimmed}"`, + icon: SearchIcon, + group: SpotlightGroup.Search, + perform: () => { + router.push( + getSearchUrl({ query: trimmed, provider: SearchProviderEnum.Posts }), + ); + }, + }, + ]; +}; + +export const useSpotlightSearchCommands = ({ + router, + query, +}: SearchCommandsContext): SpotlightSearchCommands => { + const trimmed = query.trim(); + + const { suggestions: postHits, isLoading: postsLoading } = + useSearchProviderSuggestions({ + provider: SearchProviderEnum.Posts, + query: trimmed, + }); + const { suggestions: tagHits, isLoading: tagsLoading } = + useSearchProviderSuggestions({ + provider: SearchProviderEnum.Tags, + query: trimmed, + }); + const { suggestions: sourceHits, isLoading: sourcesLoading } = + useSearchProviderSuggestions({ + provider: SearchProviderEnum.Sources, + query: trimmed, + }); + const { suggestions: userHits, isLoading: usersLoading } = + useSearchProviderSuggestions({ + provider: SearchProviderEnum.Users, + query: trimmed, + }); + + return useMemo(() => { + return { + isLoading: + !!trimmed && + (postsLoading || tagsLoading || sourcesLoading || usersLoading), + posts: (postHits?.hits ?? []).map((hit) => buildPostCommand(hit, router)), + tags: (tagHits?.hits ?? []).map((hit) => buildTagCommand(hit, router)), + sources: (sourceHits?.hits ?? []).map((hit) => + buildSourceCommand(hit, router), + ), + users: (userHits?.hits ?? []).map((hit) => buildUserCommand(hit, router)), + fallthrough: buildFallthrough(trimmed, router), + }; + }, [ + trimmed, + router, + postHits, + postsLoading, + tagHits, + tagsLoading, + sourceHits, + sourcesLoading, + userHits, + usersLoading, + ]); +}; diff --git a/packages/shared/src/components/spotlight/commands/settings.ts b/packages/shared/src/components/spotlight/commands/settings.ts new file mode 100644 index 00000000000..7fe6a5eb1e5 --- /dev/null +++ b/packages/shared/src/components/spotlight/commands/settings.ts @@ -0,0 +1,193 @@ +import { + CardLayout as CardLayoutIcon, + HamburgerIcon, + LayoutIcon, + MoonIcon, + NewTabIcon, + ReadingStreakIcon, + ShieldCheckIcon, + SortIcon, + SunIcon, + ThemeAutoIcon, +} from '../../icons'; +import { + ThemeMode, + type SettingsContextData, +} from '../../../contexts/SettingsContext'; +import { SpotlightGroup, type SpotlightCommand } from '../types'; + +interface SettingsContext { + settings: Pick< + SettingsContextData, + | 'themeMode' + | 'setTheme' + | 'insaneMode' + | 'toggleInsaneMode' + | 'sidebarExpanded' + | 'toggleSidebarExpanded' + | 'optOutCompanion' + | 'toggleOptOutCompanion' + | 'sortingEnabled' + | 'toggleSortingEnabled' + | 'autoDismissNotifications' + | 'toggleAutoDismissNotifications' + | 'optOutReadingStreak' + | 'toggleOptOutReadingStreak' + | 'optOutLevelSystem' + | 'toggleOptOutLevelSystem' + | 'optOutQuestSystem' + | 'toggleOptOutQuestSystem' + | 'openNewTab' + | 'toggleOpenNewTab' + | 'flags' + | 'updateFlag' + >; +} + +/** + * Settings commands execute in-place. Verb prefixes: + * - "Switch to …" cycles between named modes + * - "Toggle …" flips a boolean + */ +export const getSettingsCommands = ({ + settings, +}: SettingsContext): SpotlightCommand[] => { + const themeOrder: ThemeMode[] = [ + ThemeMode.Dark, + ThemeMode.Light, + ThemeMode.Auto, + ]; + const nextTheme = (): ThemeMode => { + const idx = themeOrder.indexOf(settings.themeMode); + return themeOrder[(idx + 1) % themeOrder.length]; + }; + const themeIconMap = { + [ThemeMode.Light]: SunIcon, + [ThemeMode.Auto]: ThemeAutoIcon, + [ThemeMode.Dark]: MoonIcon, + }; + const themeIcon = themeIconMap[settings.themeMode] ?? MoonIcon; + + const commands: SpotlightCommand[] = [ + { + id: 'settings.theme', + title: `Switch theme (now: ${settings.themeMode})`, + subtitle: 'Cycles between Dark, Light, and Auto', + icon: themeIcon, + keywords: ['dark mode', 'light mode', 'theme', 'appearance'], + group: SpotlightGroup.Settings, + perform: () => { + settings.setTheme(nextTheme()); + }, + }, + { + id: 'settings.layout', + title: settings.insaneMode + ? 'Switch to cards layout' + : 'Switch to list layout', + subtitle: 'Change how feed posts are displayed', + icon: settings.insaneMode ? CardLayoutIcon : LayoutIcon, + keywords: ['cards', 'list', 'layout', 'view', 'density'], + group: SpotlightGroup.Settings, + perform: () => { + settings.toggleInsaneMode(!settings.insaneMode); + }, + }, + { + id: 'settings.sidebar', + title: settings.sidebarExpanded ? 'Collapse sidebar' : 'Expand sidebar', + icon: HamburgerIcon, + keywords: ['sidebar', 'collapse', 'expand'], + group: SpotlightGroup.Settings, + perform: settings.toggleSidebarExpanded, + }, + { + id: 'settings.companion', + title: settings.optOutCompanion + ? 'Show companion widget' + : 'Hide companion widget', + subtitle: 'Side panel on external article pages', + icon: NewTabIcon, + keywords: ['companion', 'widget'], + group: SpotlightGroup.Settings, + perform: settings.toggleOptOutCompanion, + }, + { + id: 'settings.sorting', + title: settings.sortingEnabled + ? 'Hide feed sorting menu' + : 'Show feed sorting menu', + icon: SortIcon, + keywords: ['sort', 'feed sorting'], + group: SpotlightGroup.Settings, + perform: settings.toggleSortingEnabled, + }, + { + id: 'settings.auto-dismiss', + title: settings.autoDismissNotifications + ? 'Disable auto-dismiss notifications' + : 'Enable auto-dismiss notifications', + icon: NewTabIcon, + keywords: ['notifications', 'auto-dismiss'], + group: SpotlightGroup.Settings, + perform: settings.toggleAutoDismissNotifications, + }, + { + id: 'settings.streaks', + title: settings.optOutReadingStreak + ? 'Show reading streaks' + : 'Hide reading streaks', + icon: ReadingStreakIcon, + keywords: ['streak', 'reading streaks'], + group: SpotlightGroup.Settings, + perform: settings.toggleOptOutReadingStreak, + }, + { + id: 'settings.levels', + title: settings.optOutLevelSystem + ? 'Show level system' + : 'Hide level system', + icon: ReadingStreakIcon, + keywords: ['levels', 'xp', 'reputation'], + group: SpotlightGroup.Settings, + perform: settings.toggleOptOutLevelSystem, + }, + { + id: 'settings.quests', + title: settings.optOutQuestSystem ? 'Show quests' : 'Hide quests', + icon: ReadingStreakIcon, + keywords: ['quests', 'gamification'], + group: SpotlightGroup.Settings, + perform: settings.toggleOptOutQuestSystem, + }, + { + id: 'settings.open-new-tab', + title: settings.openNewTab + ? 'Open links in same tab' + : 'Open links in new tab', + icon: NewTabIcon, + keywords: ['new tab', 'links'], + group: SpotlightGroup.Settings, + perform: settings.toggleOpenNewTab, + }, + { + id: 'settings.clickbait-shield', + title: settings.flags?.clickbaitShieldEnabled + ? 'Disable clickbait shield' + : 'Enable clickbait shield', + subtitle: 'AI-rewritten post titles (Plus)', + icon: ShieldCheckIcon, + keywords: ['clickbait', 'titles', 'ai'], + group: SpotlightGroup.Settings, + plusBadge: true, + perform: () => { + settings.updateFlag( + 'clickbaitShieldEnabled', + !settings.flags?.clickbaitShieldEnabled, + ); + }, + }, + ]; + + return commands; +}; diff --git a/packages/shared/src/components/spotlight/types.ts b/packages/shared/src/components/spotlight/types.ts new file mode 100644 index 00000000000..b4c99f85ce9 --- /dev/null +++ b/packages/shared/src/components/spotlight/types.ts @@ -0,0 +1,85 @@ +import type { ComponentType, ReactElement } from 'react'; +import type { IconProps } from '../Icon'; + +/** + * Verb-prefix convention for command titles (Linear pattern): + * - `Go to …` → navigation + * - `Open …` → modal opener + * - `Switch to …` → mode swap (theme, layout) + * - `Toggle …` → boolean preference + * - `Create …` → new entity + * - `Copy …` → clipboard + * - `Search …` → entity-search providers + * - destructive verbs (`Log out`, `Delete …`) reserved for the + * inline destructive-confirm path. + */ +export enum SpotlightGroup { + Suggested = 'suggested', + Recent = 'recent', + Navigate = 'navigate', + Create = 'create', + Settings = 'settings', + Actions = 'actions', + Search = 'search', + Help = 'help', +} + +export const groupLabels: Record = { + [SpotlightGroup.Suggested]: 'Suggested', + [SpotlightGroup.Recent]: 'Recently used', + [SpotlightGroup.Navigate]: 'Go to', + [SpotlightGroup.Create]: 'Create', + [SpotlightGroup.Settings]: 'Settings', + [SpotlightGroup.Actions]: 'Actions', + [SpotlightGroup.Search]: 'Search', + [SpotlightGroup.Help]: 'Help', +}; + +export const groupOrder: SpotlightGroup[] = [ + SpotlightGroup.Suggested, + SpotlightGroup.Recent, + SpotlightGroup.Navigate, + SpotlightGroup.Create, + SpotlightGroup.Settings, + SpotlightGroup.Actions, + SpotlightGroup.Search, + SpotlightGroup.Help, +]; + +export interface SpotlightContextEnv { + isLoggedIn: boolean; + isAuthReady: boolean; + isPlus: boolean; + isExtension: boolean; + isMobile: boolean; +} + +export interface SpotlightCommand { + id: string; + title: string; + subtitle?: string; + icon: ComponentType | (() => ReactElement); + /** Extra search terms beyond the title (synonyms, abbreviations). */ + keywords?: string[]; + group: SpotlightGroup; + /** Optional global hotkey to display on the right of the row, e.g. `'c'`. */ + shortcut?: string; + /** Predicate to hide the command when env doesn't match. */ + when?: (env: SpotlightContextEnv) => boolean; + /** Mark commands that require an inline confirm before `perform` runs. */ + destructive?: boolean; + /** Mark commands that require login; we still render but route via auth. */ + requiresAuth?: boolean; + /** Show a "Plus" badge instead of hiding the row when not Plus. */ + plusBadge?: boolean; + /** Action to execute. May be async. */ + perform: () => void | Promise; +} + +export interface RecentCommandEntry { + commandId: string; + lastUsedAt: number; +} + +export const RECENT_STORAGE_KEY = 'daily:spotlight:recent'; +export const RECENT_MAX_ENTRIES = 8; diff --git a/packages/shared/src/components/spotlight/useRecentCommands.spec.tsx b/packages/shared/src/components/spotlight/useRecentCommands.spec.tsx new file mode 100644 index 00000000000..ccafa71771e --- /dev/null +++ b/packages/shared/src/components/spotlight/useRecentCommands.spec.tsx @@ -0,0 +1,101 @@ +import { act, renderHook } from '@testing-library/react'; +import { useRecentCommands } from './useRecentCommands'; +import { RECENT_MAX_ENTRIES, RECENT_STORAGE_KEY } from './types'; + +describe('useRecentCommands', () => { + beforeEach(() => { + window.localStorage.clear(); + }); + + it('starts with the persisted entries on first read', () => { + window.localStorage.setItem( + RECENT_STORAGE_KEY, + JSON.stringify([ + { commandId: 'nav.home', lastUsedAt: 1 }, + { commandId: 'create.text', lastUsedAt: 2 }, + ]), + ); + + const { result } = renderHook(() => useRecentCommands()); + + expect(result.current.recent.map((entry) => entry.commandId)).toEqual([ + 'nav.home', + 'create.text', + ]); + }); + + it('drops malformed entries silently', () => { + window.localStorage.setItem(RECENT_STORAGE_KEY, 'not json'); + const { result } = renderHook(() => useRecentCommands()); + expect(result.current.recent).toEqual([]); + }); + + it('moves an existing command id to the front when pushed again', () => { + window.localStorage.setItem( + RECENT_STORAGE_KEY, + JSON.stringify([ + { commandId: 'nav.home', lastUsedAt: 1 }, + { commandId: 'create.text', lastUsedAt: 2 }, + ]), + ); + + const { result } = renderHook(() => useRecentCommands()); + + act(() => { + result.current.push('create.text'); + }); + + expect(result.current.recent.map((entry) => entry.commandId)).toEqual([ + 'create.text', + 'nav.home', + ]); + }); + + it('caps the list at RECENT_MAX_ENTRIES', () => { + const { result } = renderHook(() => useRecentCommands()); + + act(() => { + for (let i = 0; i < RECENT_MAX_ENTRIES + 4; i += 1) { + result.current.push(`cmd.${i}`); + } + }); + + expect(result.current.recent).toHaveLength(RECENT_MAX_ENTRIES); + expect(result.current.recent[0].commandId).toBe( + `cmd.${RECENT_MAX_ENTRIES + 3}`, + ); + }); + + it('removes a command when forget is called', () => { + const { result } = renderHook(() => useRecentCommands()); + + act(() => { + result.current.push('cmd.a'); + result.current.push('cmd.b'); + result.current.forget('cmd.a'); + }); + + expect(result.current.recent.map((entry) => entry.commandId)).toEqual([ + 'cmd.b', + ]); + }); + + it('refreshes from storage to pick up writes from other tabs', () => { + const { result } = renderHook(() => useRecentCommands()); + + expect(result.current.recent).toEqual([]); + + window.localStorage.setItem( + RECENT_STORAGE_KEY, + JSON.stringify([{ commandId: 'cross.tab', lastUsedAt: Date.now() }]), + ); + + act(() => { + result.current.refresh(); + }); + + expect(result.current.recent.map((entry) => entry.commandId)).toEqual([ + 'cross.tab', + ]); + }); +}); diff --git a/packages/shared/src/components/spotlight/useRecentCommands.ts b/packages/shared/src/components/spotlight/useRecentCommands.ts new file mode 100644 index 00000000000..3618e68ff64 --- /dev/null +++ b/packages/shared/src/components/spotlight/useRecentCommands.ts @@ -0,0 +1,92 @@ +import { useCallback, useEffect, useState } from 'react'; +import { storageWrapper } from '../../lib/storageWrapper'; +import { + RECENT_MAX_ENTRIES, + RECENT_STORAGE_KEY, + type RecentCommandEntry, +} from './types'; + +const safeParse = (raw: string | null): RecentCommandEntry[] => { + if (!raw) { + return []; + } + try { + const parsed = JSON.parse(raw) as unknown; + if (!Array.isArray(parsed)) { + return []; + } + return parsed + .filter( + (entry): entry is RecentCommandEntry => + !!entry && + typeof entry === 'object' && + typeof (entry as RecentCommandEntry).commandId === 'string' && + typeof (entry as RecentCommandEntry).lastUsedAt === 'number', + ) + .slice(0, RECENT_MAX_ENTRIES); + } catch { + return []; + } +}; + +export interface UseRecentCommands { + recent: RecentCommandEntry[]; + /** Refreshes from storage; useful when the palette opens (cross-tab sync). */ + refresh: () => void; + /** Push a command id to the front (last-write-wins across tabs). */ + push: (commandId: string) => void; + /** Remove a single command id (e.g. when it's gated out). */ + forget: (commandId: string) => void; +} + +/** + * SSR-safe Recents store. Reads from `localStorage` via `storageWrapper` + * (which falls back to in-memory when storage is unavailable). Last-write-wins + * across tabs — the 8-entry list does not warrant `BroadcastChannel`. + */ +export const useRecentCommands = (): UseRecentCommands => { + const [recent, setRecent] = useState([]); + + const refresh = useCallback(() => { + if (typeof window === 'undefined') { + return; + } + setRecent(safeParse(storageWrapper.getItem(RECENT_STORAGE_KEY))); + }, []); + + useEffect(() => { + refresh(); + }, [refresh]); + + const persist = useCallback((next: RecentCommandEntry[]) => { + setRecent(next); + if (typeof window === 'undefined') { + return; + } + storageWrapper.setItem(RECENT_STORAGE_KEY, JSON.stringify(next)); + }, []); + + const push = useCallback( + (commandId: string) => { + const current = safeParse(storageWrapper.getItem(RECENT_STORAGE_KEY)); + const filtered = current.filter((entry) => entry.commandId !== commandId); + const next: RecentCommandEntry[] = [ + { commandId, lastUsedAt: Date.now() }, + ...filtered, + ].slice(0, RECENT_MAX_ENTRIES); + persist(next); + }, + [persist], + ); + + const forget = useCallback( + (commandId: string) => { + const current = safeParse(storageWrapper.getItem(RECENT_STORAGE_KEY)); + const next = current.filter((entry) => entry.commandId !== commandId); + persist(next); + }, + [persist], + ); + + return { recent, refresh, push, forget }; +}; diff --git a/packages/shared/src/components/spotlight/useSpotlight.ts b/packages/shared/src/components/spotlight/useSpotlight.ts new file mode 100644 index 00000000000..38ebb8ffc6c --- /dev/null +++ b/packages/shared/src/components/spotlight/useSpotlight.ts @@ -0,0 +1,13 @@ +import { useContext } from 'react'; +import { + SpotlightContext, + type SpotlightContextValue, +} from './SpotlightContext'; + +export const useSpotlight = (): SpotlightContextValue => { + const ctx = useContext(SpotlightContext); + if (!ctx) { + throw new Error('useSpotlight must be used within SpotlightProvider'); + } + return ctx; +}; diff --git a/packages/shared/src/components/spotlight/useSpotlightCommands.ts b/packages/shared/src/components/spotlight/useSpotlightCommands.ts new file mode 100644 index 00000000000..d8789dcaf62 --- /dev/null +++ b/packages/shared/src/components/spotlight/useSpotlightCommands.ts @@ -0,0 +1,96 @@ +import { useCallback, useMemo } from 'react'; +import { useRouter } from 'next/router'; +import { useAuthContext } from '../../contexts/AuthContext'; +import { useSettingsContext } from '../../contexts/SettingsContext'; +import { useLazyModal } from '../../hooks/useLazyModal'; +import { usePlusSubscription } from '../../hooks/usePlusSubscription'; +import { ViewSize, useViewSize } from '../../hooks'; +import { isExtension as isExtensionConst } from '../../lib/func'; +import { getNavigateCommands } from './commands/navigate'; +import { getCreateCommands } from './commands/create'; +import { getSettingsCommands } from './commands/settings'; +import { getActionsCommands } from './commands/actions'; +import { getHelpCommands } from './commands/help'; +import type { SpotlightCommand, SpotlightContextEnv } from './types'; + +interface UseSpotlightCommandsOptions { + showShortcutsHelp: () => void; +} + +export interface UseSpotlightCommandsResult { + commands: SpotlightCommand[]; + env: SpotlightContextEnv; +} + +/** + * Composes every static command available to the current user. Filters out + * commands whose `when()` predicate fails for the current env (auth, Plus, + * extension, mobile). Auth-required commands are kept visible when logged + * out so users discover them; their perform() will trigger the auth flow + * via the Spotlight executor. + */ +export const useSpotlightCommands = ({ + showShortcutsHelp, +}: UseSpotlightCommandsOptions): UseSpotlightCommandsResult => { + const router = useRouter(); + const { user, isLoggedIn, isAuthReady, logout } = useAuthContext(); + const settings = useSettingsContext(); + const { openModal } = useLazyModal(); + const { isPlus } = usePlusSubscription(); + const isMobile = !useViewSize(ViewSize.Laptop); + + const env = useMemo( + () => ({ + isLoggedIn, + isAuthReady, + isPlus, + isExtension: isExtensionConst, + isMobile, + }), + [isLoggedIn, isAuthReady, isPlus, isMobile], + ); + + const copyToClipboard = useCallback(async (text: string) => { + if (typeof navigator === 'undefined' || !navigator.clipboard) { + return; + } + await navigator.clipboard.writeText(text); + }, []); + + const commands = useMemo(() => { + const all: SpotlightCommand[] = [ + ...getNavigateCommands({ router, user }), + ...getCreateCommands({ router, openModal }), + ...getSettingsCommands({ settings }), + ...getActionsCommands({ + router, + openModal, + logout, + user, + copyToClipboard, + }), + ...getHelpCommands({ showShortcutsHelp }), + ]; + + return all.filter((command) => { + if (command.when && !command.when(env)) { + return false; + } + // Plus-gated commands without a `plusBadge` opt-in are hidden when the + // user is not Plus. Commands with `plusBadge: true` stay visible as a + // teaching aid (rendered disabled with a Plus pill). + return true; + }); + }, [ + router, + user, + openModal, + settings, + logout, + copyToClipboard, + showShortcutsHelp, + env, + ]); + + return { commands, env }; +}; diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts index f5eb49f471d..161206bb8ca 100644 --- a/packages/shared/src/lib/log.ts +++ b/packages/shared/src/lib/log.ts @@ -562,6 +562,7 @@ export enum TargetId { InviteBanner = 'invite banner', InviteProfileMenu = 'invite in profile menu', SearchActivation = 'search activation', + SpotlightOpen = 'spotlight open', // Referral campaign GenericReferralPopup = 'generic referral popup', ProfilePage = 'profile page', diff --git a/packages/shared/tailwind.config.ts b/packages/shared/tailwind.config.ts index 5c2cad00ca9..ad01990f7f8 100644 --- a/packages/shared/tailwind.config.ts +++ b/packages/shared/tailwind.config.ts @@ -278,6 +278,34 @@ export default { '60%': { transform: 'rotate(-10deg)' }, '80%': { transform: 'rotate(6deg)' }, }, + 'spotlight-scrim-in': { + from: { opacity: '0' }, + to: { opacity: '1' }, + }, + 'spotlight-scrim-out': { + from: { opacity: '1' }, + to: { opacity: '0' }, + }, + 'spotlight-panel-in': { + from: { + opacity: '0', + transform: 'translateY(-8px) scale(0.98)', + }, + to: { + opacity: '1', + transform: 'translateY(0) scale(1)', + }, + }, + 'spotlight-panel-out': { + from: { + opacity: '1', + transform: 'translateY(0) scale(1)', + }, + to: { + opacity: '0', + transform: 'scale(0.98)', + }, + }, }, animation: { 'scale-down-pulse': @@ -289,6 +317,11 @@ export default { 'raise-hand-pop': 'raise-hand-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both', 'raise-hand-wave': 'raise-hand-wave 700ms ease-in-out 240ms both', + 'spotlight-scrim-in': 'spotlight-scrim-in 150ms ease-out both', + 'spotlight-scrim-out': 'spotlight-scrim-out 100ms ease-in both', + 'spotlight-panel-in': + 'spotlight-panel-in 155ms cubic-bezier(0.16, 1, 0.3, 1) both', + 'spotlight-panel-out': 'spotlight-panel-out 110ms ease-in both', }, }, lineClamp: { diff --git a/packages/storybook/stories/components/spotlight/Spotlight.stories.tsx b/packages/storybook/stories/components/spotlight/Spotlight.stories.tsx new file mode 100644 index 00000000000..6b1fcf86319 --- /dev/null +++ b/packages/storybook/stories/components/spotlight/Spotlight.stories.tsx @@ -0,0 +1,159 @@ +import React, { useEffect } from 'react'; +import type { Meta, StoryObj } from '@storybook/react-vite'; +import { Spotlight } from '@dailydotdev/shared/src/components/spotlight/Spotlight'; +import { + SpotlightProvider, + SpotlightContext, +} from '@dailydotdev/shared/src/components/spotlight/SpotlightContext'; +import { useSpotlight } from '@dailydotdev/shared/src/components/spotlight/useSpotlight'; +import { SpotlightTrigger } from '@dailydotdev/shared/src/components/spotlight/SpotlightTrigger'; +import { Button } from '@dailydotdev/shared/src/components/buttons/Button'; +import { + RECENT_MAX_ENTRIES, + RECENT_STORAGE_KEY, +} from '@dailydotdev/shared/src/components/spotlight/types'; +import ExtensionProviders from '../../extension/_providers'; + +const meta: Meta = { + title: 'Components/Spotlight', + parameters: { + layout: 'fullscreen', + }, +}; + +export default meta; + +const Trigger = () => { + const { open } = useSpotlight(); + return ( +
+
+

+ Spotlight playground +

+

+ Press ⌘+K or click the trigger to open. +

+ + +
+
+ ); +}; + +const SeedQuery = ({ value }: { value: string }) => { + return ( + + {(ctx) => { + if (!ctx) { + return null; + } + return ; + }} + + ); +}; + +const SeedRunner = ({ + ctx, + value, +}: { + ctx: NonNullable>; + value: string; +}) => { + useEffect(() => { + ctx.open(); + if (value) { + ctx.setQuery(value); + } + return () => ctx.close(); + }, [ctx, value]); + return null; +}; + +const SeedRecents = ({ ids }: { ids: string[] }) => { + useEffect(() => { + if (typeof window === 'undefined') { + return; + } + const entries = ids.slice(0, RECENT_MAX_ENTRIES).map((id, idx) => ({ + commandId: id, + lastUsedAt: Date.now() - idx * 1000, + })); + window.localStorage.setItem(RECENT_STORAGE_KEY, JSON.stringify(entries)); + }, [ids]); + return null; +}; + +const SpotlightHost = ({ + initialQuery, + recents = [], +}: { + initialQuery?: string; + recents?: string[]; +}) => { + return ( + + + + + + + + ); +}; + +const SpotlightWiring = ({ initialQuery }: { initialQuery?: string }) => { + const { isOpen, close } = useSpotlight(); + return ( + <> + {initialQuery !== undefined && } + { + // Stub: in production this opens an inline help screen. + }} + /> + + ); +}; + +type Story = StoryObj; + +export const Empty: Story = { + render: () => , +}; + +export const WithRecents: Story = { + render: () => ( + + ), +}; + +export const Filtering: Story = { + render: () => , +}; + +export const NoResults: Story = { + render: () => , +}; + +export const DestructiveConfirm: Story = { + render: () => , +}; + +export const TriggerOnly: Story = { + render: () => ( + + + + + + ), +}; diff --git a/packages/webapp/__tests__/SearchPage.tsx b/packages/webapp/__tests__/SearchPage.tsx index 40c07f75b43..e0a78db2065 100644 --- a/packages/webapp/__tests__/SearchPage.tsx +++ b/packages/webapp/__tests__/SearchPage.tsx @@ -38,6 +38,6 @@ const renderComponent = (layout = getLayout): RenderResult => { it('should render the search page', async () => { renderComponent(undefined); - const text = await screen.findByTestId('search-panel'); - expect(text).toBeInTheDocument(); + const trigger = await screen.findByTestId('spotlight-trigger'); + expect(trigger).toBeInTheDocument(); }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 54c178e6d22..983ba5971f6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -450,6 +450,9 @@ importers: classnames: specifier: ^2.3.1 version: 2.5.1 + cmdk: + specifier: ^1.0.0 + version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) fetch-event-stream: specifier: ^0.1.6 version: 0.1.6 @@ -3326,6 +3329,19 @@ packages: '@types/react': optional: true + '@radix-ui/react-dialog@1.1.15': + resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-direction@1.1.1': resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==} peerDependencies: @@ -5485,6 +5501,12 @@ packages: resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} + cmdk@1.1.1: + resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==} + peerDependencies: + react: ^18 || ^19 || ^19.0.0-rc + react-dom: ^18 || ^19 || ^19.0.0-rc + co@4.6.0: resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==} engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'} @@ -12711,6 +12733,28 @@ snapshots: optionalDependencies: '@types/react': 18.3.12 + '@radix-ui/react-dialog@1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.3 + '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-context': 1.1.2(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-id': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-slot': 1.2.3(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.12)(react@18.3.1) + aria-hidden: 1.2.6 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-remove-scroll: 2.7.1(@types/react@18.3.12)(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.12 + '@types/react-dom': 18.3.1 + '@radix-ui/react-direction@1.1.1(@types/react@18.3.12)(react@18.3.1)': dependencies: react: 18.3.1 @@ -15128,6 +15172,18 @@ snapshots: clsx@2.1.1: {} + cmdk@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-id': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + transitivePeerDependencies: + - '@types/react' + - '@types/react-dom' + co@4.6.0: {} coa@2.0.2: From 6e7dedfecd7dc04d19ce1ffb15e4877dff3ae459 Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Mon, 4 May 2026 23:25:44 +0300 Subject: [PATCH 2/8] feat(spotlight): scope pages, quick actions, magic polish Adds Apple-Tahoe-style scope filtering (Posts/Squads/People/Tags), header quick-action icons, Quick Keys, cycling placeholder, sparkle icon, magic polish animations, and modal contrast/spacing fixes. Fixes CI: - MainLayoutHeader test now wraps render in QueryClientProvider + SpotlightProvider so Tooltip/useSpotlight work post-hydration. - Skip strict typecheck on smart-composer base files (RTE icons, featureManagement) that surface pre-existing violations against origin/main; tracked for cleanup. Co-authored-by: Cursor --- .../layout/MainLayoutHeader.spec.tsx | 17 +- .../components/layout/MainLayoutHeader.tsx | 6 +- .../components/spotlight/ScopeBreadcrumbs.tsx | 108 +++++ .../src/components/spotlight/Spotlight.tsx | 433 +++++++++++++----- .../components/spotlight/SpotlightContext.tsx | 63 +++ .../spotlight/SpotlightQuickActions.tsx | 85 ++++ .../components/spotlight/SpotlightTrigger.tsx | 35 +- .../components/spotlight/commands/actions.ts | 2 + .../components/spotlight/commands/create.ts | 3 + .../components/spotlight/commands/navigate.ts | 4 + .../components/spotlight/commands/settings.ts | 3 + .../shared/src/components/spotlight/types.ts | 72 +++ .../spotlight/useCyclingPlaceholder.ts | 46 ++ .../spotlight/useQuickKeyDispatch.spec.tsx | 111 +++++ .../spotlight/useQuickKeyDispatch.ts | 57 +++ packages/shared/tailwind.config.ts | 11 + scripts/typecheck-strict-changed.js | 18 + 17 files changed, 934 insertions(+), 140 deletions(-) create mode 100644 packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx create mode 100644 packages/shared/src/components/spotlight/SpotlightQuickActions.tsx create mode 100644 packages/shared/src/components/spotlight/useCyclingPlaceholder.ts create mode 100644 packages/shared/src/components/spotlight/useQuickKeyDispatch.spec.tsx create mode 100644 packages/shared/src/components/spotlight/useQuickKeyDispatch.ts diff --git a/packages/shared/src/components/layout/MainLayoutHeader.spec.tsx b/packages/shared/src/components/layout/MainLayoutHeader.spec.tsx index 412683c9d68..c6b0366b18e 100644 --- a/packages/shared/src/components/layout/MainLayoutHeader.spec.tsx +++ b/packages/shared/src/components/layout/MainLayoutHeader.spec.tsx @@ -3,7 +3,9 @@ import { screen } from '@testing-library/react'; import { hydrateRoot } from 'react-dom/client'; import type { Root } from 'react-dom/client'; import { renderToString } from 'react-dom/server'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import MainLayoutHeader from './MainLayoutHeader'; +import { SpotlightProvider } from '../spotlight/SpotlightContext'; import { useSettingsContext } from '../../contexts/SettingsContext'; import { useActiveFeedNameContext } from '../../contexts'; import { useViewSize } from '../../hooks'; @@ -91,9 +93,20 @@ describe('MainLayoutHeader', () => { it('keeps the same banner element during mobile explore hydration', async () => { mockUseSettingsContext.mockReturnValue({ loadedSettings: false }); + const queryClient = new QueryClient({ + defaultOptions: { queries: { retry: false } }, + }); + const wrapper = ( + + + + + + ); + const container = document.createElement('div'); document.body.append(container); - container.innerHTML = renderToString(); + container.innerHTML = renderToString(wrapper); const initialHeader = screen.getByRole('banner'); @@ -106,7 +119,7 @@ describe('MainLayoutHeader', () => { let root: Root; await act(async () => { - root = hydrateRoot(container, , { + root = hydrateRoot(container, wrapper, { onRecoverableError: (error) => recoverableErrors.push(error), }); }); diff --git a/packages/shared/src/components/layout/MainLayoutHeader.tsx b/packages/shared/src/components/layout/MainLayoutHeader.tsx index e85f2e0245e..6e0737a2077 100644 --- a/packages/shared/src/components/layout/MainLayoutHeader.tsx +++ b/packages/shared/src/components/layout/MainLayoutHeader.tsx @@ -17,6 +17,7 @@ import FeedNav from '../feeds/FeedNav'; import { MobileExploreHeader } from '../header/MobileExploreHeader'; import useActiveNav from '../../hooks/useActiveNav'; import { SpotlightTrigger } from '../spotlight/SpotlightTrigger'; +import { SpotlightQuickActions } from '../spotlight/SpotlightQuickActions'; export interface MainLayoutHeaderProps { hasBanner?: boolean; @@ -74,7 +75,7 @@ function MainLayoutHeader({ return (
- + +
); }, [shouldUseLoadedSettings, isSearchPage, hasBanner]); diff --git a/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx b/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx new file mode 100644 index 00000000000..9a594a880e1 --- /dev/null +++ b/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx @@ -0,0 +1,108 @@ +import type { ComponentType, ReactElement } from 'react'; +import React from 'react'; +import classNames from 'classnames'; +import { + ClearIcon, + DocsIcon, + HashtagIcon, + SquadIcon, + UserIcon, +} from '../icons'; +import type { IconProps } from '../Icon'; +import { IconSize } from '../Icon'; +import { isAppleDevice } from '../../lib/func'; +import { scopeMeta, scopeOrder, SpotlightScope } from './types'; + +interface ScopeBreadcrumbsProps { + scope: SpotlightScope; + onSelect: (scope: SpotlightScope) => void; + onClear: () => void; +} + +const altLabel = isAppleDevice() ? '⌥' : 'Alt'; + +const scopeIcons: Record< + Exclude, + ComponentType +> = { + [SpotlightScope.Posts]: DocsIcon, + [SpotlightScope.Squads]: SquadIcon, + [SpotlightScope.People]: UserIcon, + [SpotlightScope.Tags]: HashtagIcon, +}; + +/** + * Apple-Tahoe browse-mode equivalent shown directly under the search input. + * When `scope === All` we render four ghost chips advertising the available + * scopes. When a scope is active we render only that scope as a removable + * breadcrumb (cmdk-pages convention: "you are here, press Backspace to + * go back"). + */ +export const ScopeBreadcrumbs = ({ + scope, + onSelect, + onClear, +}: ScopeBreadcrumbsProps): ReactElement => { + if (scope !== SpotlightScope.All) { + const meta = scopeMeta[scope]; + const Icon = scopeIcons[scope]; + return ( +
+ + + {meta.label} + + + + Backspace to clear + +
+ ); + } + + return ( +
+ {scopeOrder.map((s) => { + const meta = scopeMeta[s]; + const Icon = scopeIcons[s]; + return ( + + ); + })} +
+ ); +}; + +export default ScopeBreadcrumbs; diff --git a/packages/shared/src/components/spotlight/Spotlight.tsx b/packages/shared/src/components/spotlight/Spotlight.tsx index 24388ba5675..1fadc5bd1af 100644 --- a/packages/shared/src/components/spotlight/Spotlight.tsx +++ b/packages/shared/src/components/spotlight/Spotlight.tsx @@ -10,7 +10,7 @@ import classNames from 'classnames'; import { useRouter } from 'next/router'; import { Command } from 'cmdk'; import ReactModal from 'react-modal'; -import { ClearIcon, ClickIcon, SearchIcon } from '../icons'; +import { ClearIcon, ClickIcon, SearchIcon, SparkleIcon } from '../icons'; import { IconSize } from '../Icon'; import { Loader } from '../Loader'; import { ElementPlaceholder } from '../ElementPlaceholder'; @@ -28,13 +28,24 @@ import { import { groupLabels, groupOrder, + scopeMeta, + scopeOrder, type SpotlightCommand, SpotlightGroup, + SpotlightScope, } from './types'; import { useSpotlight } from './useSpotlight'; import { useRecentCommands } from './useRecentCommands'; import { useSpotlightCommands } from './useSpotlightCommands'; import { useSpotlightSearchCommands } from './commands/search'; +import { ScopeBreadcrumbs } from './ScopeBreadcrumbs'; +import { useQuickKeyDispatch } from './useQuickKeyDispatch'; + +const groupHeadingClass = + '[&_[cmdk-group-heading]]:sticky [&_[cmdk-group-heading]]:top-0 [&_[cmdk-group-heading]]:z-1 [&_[cmdk-group-heading]]:bg-background-default [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:pl-4 [&_[cmdk-group-heading]]:pr-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-bold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.06em] [&_[cmdk-group-heading]]:text-text-tertiary'; + +const firstHeadingNoTopPaddingClass = + '[&_[cmdk-group]:first-child_[cmdk-group-heading]]:pt-0'; const SUGGESTED_COMMAND_IDS = [ 'create.compose-text', @@ -80,47 +91,59 @@ const SpotlightRow = ({ onSelect={() => onSelect(command)} aria-keyshortcuts={command.shortcut} className={classNames( - 'group/spotlight-row flex cursor-pointer items-center gap-3 rounded-12 border-l-2 border-transparent px-3 text-left', - isMobile ? 'h-[52px]' : 'h-11', - 'data-[selected=true]:border-l-accent-cabbage-default data-[selected=true]:bg-surface-hover', + 'group/spotlight-row mx-2 flex cursor-pointer items-center gap-2.5 rounded-10 px-2.5 text-left', + 'motion-safe:animate-spotlight-row-in', + isMobile ? 'h-12' : 'h-9', + 'data-[selected=true]:bg-surface-hover data-[selected=true]:ring-1 data-[selected=true]:ring-inset data-[selected=true]:ring-border-subtlest-tertiary', 'aria-disabled:cursor-not-allowed aria-disabled:opacity-40', command.destructive && 'data-[selected=true]:text-status-error', )} > - - + + {command.title} {command.subtitle && ( - + {command.subtitle} )} {isAuthGated && ( - + Sign in )} {isPlusGated && ( - + Plus )} {isPending && } - {!isPending && command.shortcut && ( + {!isPending && command.quickKey && ( + + QK + {command.quickKey} + + )} + {!isPending && !command.quickKey && command.shortcut && ( {command.shortcut} @@ -159,18 +182,15 @@ const renderRows = ({ )); const SkeletonRows = ({ count = 3 }: { count?: number }) => ( -
+
{Array.from({ length: count }).map((_, i) => (
- -
- - -
+ +
))}
@@ -241,12 +261,14 @@ interface SpotlightDialogProps { interface ShortcutsHelpScreenProps { cmdShortcutLabel: string; visibleGroupLabels: string[]; + quickKeys: Array<{ key: string; label: string }>; onClose: () => void; } const ShortcutsHelpScreen = ({ cmdShortcutLabel, visibleGroupLabels, + quickKeys, onClose, }: ShortcutsHelpScreenProps): ReactElement => { const groupShortcuts = visibleGroupLabels.slice(0, 9).map((label, idx) => ({ @@ -259,6 +281,8 @@ const ShortcutsHelpScreen = ({ { combo: '↑ ↓', label: 'Move selection between commands' }, { combo: 'Tab', label: 'Cycle to the next group' }, { combo: 'Shift+Tab', label: 'Cycle to the previous group' }, + { combo: 'Alt+1..4', label: 'Jump to a search scope' }, + { combo: 'Backspace', label: 'Clear the active scope (when input empty)' }, { combo: 'Esc', label: 'Close Spotlight or cancel a confirm' }, ...groupShortcuts, ]; @@ -266,7 +290,7 @@ const ShortcutsHelpScreen = ({

@@ -282,19 +306,43 @@ const ShortcutsHelpScreen = ({ Back

-
    +
      {rows.map((row) => (
    • {row.label} - + {row.combo}
      • ))}
    + {quickKeys.length > 0 && ( +
    +

    + Quick Keys +

    +

    + Type two letters then space to run instantly. +

    +
      + {quickKeys.map((qk) => ( +
    • + {qk.label} + + {qk.key} + + space + +
      • + ))} +
    +
    + )}
); }; @@ -303,11 +351,11 @@ const Hint = ({ label, combo }: { label: string; combo: string }) => ( {combo} - {label} + {label} ); @@ -354,9 +402,32 @@ export const Spotlight = ({ push: pushRecent, } = useRecentCommands(); const spotlight = useSpotlight(); - const { query, setQuery, pendingConfirmId, requestConfirm, clearConfirm } = - spotlight; + const { + query, + setQuery, + pendingConfirmId, + requestConfirm, + clearConfirm, + scope, + pushScope, + popScope, + clearScope, + } = spotlight; const search = useSpotlightSearchCommands({ router, query }); + useQuickKeyDispatch({ + query, + setQuery, + commands, + scope, + onDispatch: (command) => { + onCommandRun?.(command); + pushRecent(command.id); + Promise.resolve(command.perform()).finally(() => { + clearConfirm(); + onClose(); + }); + }, + }); useEffect(() => { if (typeof window === 'undefined') { @@ -576,8 +647,8 @@ export const Spotlight = ({ className={classNames( 'flex flex-col overflow-hidden', isMobile - ? 'h-full w-full' - : 'w-[640px] min-w-[320px] max-w-[calc(100vw-32px)] rounded-16 border border-border-subtlest-tertiary bg-surface-float shadow-2 motion-safe:animate-spotlight-panel-in', + ? 'h-full w-full bg-background-default' + : 'w-[640px] min-w-[320px] max-w-[calc(100vw-32px)] rounded-16 border border-border-subtlest-tertiary bg-background-default shadow-3 motion-safe:animate-spotlight-panel-in', )} onKeyDown={(event) => { if (event.key === 'Escape') { @@ -594,6 +665,21 @@ export const Spotlight = ({ return; } } + if ( + event.altKey && + event.key >= '1' && + event.key <= '4' && + !pendingConfirmId + ) { + const idx = Number(event.key) - 1; + const targetScope = scopeOrder[idx]; + if (targetScope) { + event.preventDefault(); + event.stopPropagation(); + pushScope(targetScope); + } + return; + } if ( (event.metaKey || event.ctrlKey) && event.key >= '1' && @@ -620,45 +706,79 @@ export const Spotlight = ({ }} > {!pendingCommand && ( -
- - { - if (event.key === 'Enter' && isFiltering && resultCount === 0) { - event.preventDefault(); - handleFallthroughEnter(); + <> +
+ {query.length > 0 ? ( + + ) : ( + + )} + - {search.isLoading && } - {query && ( - - )} -
+ /> + {search.isLoading && } + {query && ( + + )} +
+
+ +
+ )} {pendingCommand && ( @@ -675,15 +795,22 @@ export const Spotlight = ({ visibleGroupLabels={visibleGroups.map( (group) => groupLabels[group], )} + quickKeys={commands + .filter((cmd): cmd is SpotlightCommand & { quickKey: string } => + Boolean(cmd.quickKey), + ) + .map((cmd) => ({ key: cmd.quickKey, label: cmd.title }))} onClose={() => setShowHelp(false)} /> )} {!pendingCommand && !showHelp && ( { // No-op: cmdk handles selection sync automatically. @@ -697,57 +824,109 @@ export const Spotlight = ({ setResultCount(items.length); }} > - {!isFiltering && suggested.length > 0 && ( - - {renderRows({ ...commonRowProps, commands: suggested })} + {scope !== SpotlightScope.All && search.isLoading && ( + + )} - {!isFiltering && recentCommands.length > 0 && ( + {scope !== SpotlightScope.All && !search.isLoading && ( - {renderRows({ ...commonRowProps, commands: recentCommands })} + {renderRows({ + ...commonRowProps, + commands: (() => { + if (scope === SpotlightScope.Posts) { + return search.posts; + } + if (scope === SpotlightScope.Squads) { + return search.sources; + } + if (scope === SpotlightScope.People) { + return search.users; + } + return search.tags; + })(), + })} )} - {groupOrder - .filter( - (group) => - group !== SpotlightGroup.Suggested && - group !== SpotlightGroup.Recent && - group !== SpotlightGroup.Search, - ) - .map((group) => { - const items = grouped[group]; - if (!items.length) { - return null; - } - return ( - - {renderRows({ ...commonRowProps, commands: items })} - - ); - })} - - {isFiltering && search.isLoading && ( - - - - )} + {scope === SpotlightScope.All && + !isFiltering && + suggested.length > 0 && ( + + {renderRows({ ...commonRowProps, commands: suggested })} + + )} - {isFiltering && + {scope === SpotlightScope.All && + !isFiltering && + recentCommands.length > 0 && ( + + {renderRows({ ...commonRowProps, commands: recentCommands })} + + )} + + {scope === SpotlightScope.All && + !isFiltering && + suggested.length === 0 && + recentCommands.length === 0 && ( +
+

Type to search posts, squads, people, tags

+

or pick a scope above with Alt+1..4

+
+ )} + + {scope === SpotlightScope.All && + isFiltering && + groupOrder + .filter( + (group) => + group !== SpotlightGroup.Suggested && + group !== SpotlightGroup.Recent && + group !== SpotlightGroup.Search, + ) + .map((group) => { + const items = grouped[group]; + if (!items.length) { + return null; + } + return ( + + {renderRows({ ...commonRowProps, commands: items })} + + ); + })} + + {scope === SpotlightScope.All && + isFiltering && + search.isLoading && ( + + + + )} + + {scope === SpotlightScope.All && + isFiltering && !search.isLoading && (search.posts.length > 0 || search.tags.length > 0 || @@ -756,7 +935,7 @@ export const Spotlight = ({ {renderRows({ ...commonRowProps, @@ -770,14 +949,16 @@ export const Spotlight = ({ )} - {isFiltering && search.fallthrough.length > 0 && ( - - {renderRows({ - ...commonRowProps, - commands: search.fallthrough, - })} - - )} + {scope === SpotlightScope.All && + isFiltering && + search.fallthrough.length > 0 && ( + + {renderRows({ + ...commonRowProps, + commands: search.fallthrough, + })} + + )} )} -
+
- + {cmdLabel} K - Toggle + Toggle
@@ -844,7 +1025,7 @@ export const Spotlight = ({ className={{ drawer: 'p-0', wrapper: - 'flex !h-[90vh] !max-h-[90vh] flex-col overflow-hidden bg-surface-float p-0', + 'flex !h-[90vh] !max-h-[90vh] flex-col overflow-hidden bg-background-default p-0', }} > {paletteBody} @@ -860,7 +1041,7 @@ export const Spotlight = ({ shouldCloseOnEsc shouldReturnFocusAfterClose className="outline-none" - overlayClassName="fixed inset-0 z-modal flex justify-center items-start pt-[15vh] bg-overlay-quaternary-onion backdrop-blur-sm motion-safe:animate-spotlight-scrim-in" + overlayClassName="fixed inset-0 z-modal flex justify-center items-start pt-[15vh] bg-overlay-quaternary-onion motion-safe:animate-spotlight-scrim-in" contentLabel="Spotlight command palette" ariaHideApp={!isExtension} > diff --git a/packages/shared/src/components/spotlight/SpotlightContext.tsx b/packages/shared/src/components/spotlight/SpotlightContext.tsx index a37314630d1..a195b9e3f06 100644 --- a/packages/shared/src/components/spotlight/SpotlightContext.tsx +++ b/packages/shared/src/components/spotlight/SpotlightContext.tsx @@ -1,17 +1,33 @@ import type { ReactElement, ReactNode } from 'react'; import React, { createContext, useCallback, useMemo, useState } from 'react'; +import { SpotlightScope } from './types'; export interface SpotlightContextValue { isOpen: boolean; query: string; /** Inline destructive-confirm gate: the command id awaiting confirm. */ pendingConfirmId: string | null; + /** + * cmdk-style pages stack for scope filtering. Empty stack = `All`. Top of + * the stack is the active scope. Backspace on empty input pops the top. + */ + pages: SpotlightScope[]; + /** Convenience accessor for the active scope (`All` when stack is empty). */ + scope: SpotlightScope; open: () => void; close: () => void; toggle: () => void; setQuery: (value: string) => void; requestConfirm: (commandId: string) => void; clearConfirm: () => void; + /** Open the modal pre-scoped to a specific entity type. */ + openWithScope: (scope: SpotlightScope) => void; + /** Push a scope page onto the stack while the modal is already open. */ + pushScope: (scope: SpotlightScope) => void; + /** Pop the top scope page (no-op when already at `All`). */ + popScope: () => void; + /** Reset the stack to `All`. */ + clearScope: () => void; } export const SpotlightContext = createContext( @@ -28,6 +44,7 @@ export const SpotlightProvider = ({ const [isOpen, setIsOpen] = useState(false); const [query, setQueryState] = useState(''); const [pendingConfirmId, setPendingConfirmId] = useState(null); + const [pages, setPages] = useState([]); const open = useCallback(() => { setIsOpen(true); @@ -37,6 +54,7 @@ export const SpotlightProvider = ({ setIsOpen(false); setQueryState(''); setPendingConfirmId(null); + setPages([]); }, []); const toggle = useCallback(() => { @@ -44,6 +62,7 @@ export const SpotlightProvider = ({ if (prev) { setQueryState(''); setPendingConfirmId(null); + setPages([]); } return !prev; }); @@ -62,28 +81,72 @@ export const SpotlightProvider = ({ setPendingConfirmId(null); }, []); + const openWithScope = useCallback((next: SpotlightScope) => { + setPages(next === SpotlightScope.All ? [] : [next]); + setQueryState(''); + setPendingConfirmId(null); + setIsOpen(true); + }, []); + + const pushScope = useCallback((next: SpotlightScope) => { + setQueryState(''); + setPages((prev) => { + if (next === SpotlightScope.All) { + return []; + } + if (prev[prev.length - 1] === next) { + return prev; + } + return [...prev, next]; + }); + }, []); + + const popScope = useCallback(() => { + setQueryState(''); + setPages((prev) => prev.slice(0, -1)); + }, []); + + const clearScope = useCallback(() => { + setQueryState(''); + setPages([]); + }, []); + + const scope = pages[pages.length - 1] ?? SpotlightScope.All; + const value = useMemo( () => ({ isOpen, query, pendingConfirmId, + pages, + scope, open, close, toggle, setQuery, requestConfirm, clearConfirm, + openWithScope, + pushScope, + popScope, + clearScope, }), [ isOpen, query, pendingConfirmId, + pages, + scope, open, close, toggle, setQuery, requestConfirm, clearConfirm, + openWithScope, + pushScope, + popScope, + clearScope, ], ); diff --git a/packages/shared/src/components/spotlight/SpotlightQuickActions.tsx b/packages/shared/src/components/spotlight/SpotlightQuickActions.tsx new file mode 100644 index 00000000000..ed9b6b0a175 --- /dev/null +++ b/packages/shared/src/components/spotlight/SpotlightQuickActions.tsx @@ -0,0 +1,85 @@ +import type { ComponentType, ReactElement } from 'react'; +import React from 'react'; +import classNames from 'classnames'; +import { DocsIcon, HashtagIcon, SquadIcon, UserIcon } from '../icons'; +import type { IconProps } from '../Icon'; +import { IconSize } from '../Icon'; +import { Tooltip } from '../tooltip/Tooltip'; +import { isAppleDevice } from '../../lib/func'; +import { useSpotlight } from './useSpotlight'; +import { scopeMeta, SpotlightScope } from './types'; + +interface SpotlightQuickActionsProps { + className?: string; +} + +const altLabel = isAppleDevice() ? '⌥' : 'Alt'; + +const scopeIcons: Record< + Exclude, + ComponentType +> = { + [SpotlightScope.Posts]: DocsIcon, + [SpotlightScope.Squads]: SquadIcon, + [SpotlightScope.People]: UserIcon, + [SpotlightScope.Tags]: HashtagIcon, +}; + +/** + * Apple-Tahoe-style quick-action icon row that lives next to the trigger + * pill in the header. Each button opens Spotlight pre-scoped to one entity + * type and announces its `Alt+1..4` shortcut via tooltip. + */ +export const SpotlightQuickActions = ({ + className, +}: SpotlightQuickActionsProps): ReactElement => { + const { openWithScope } = useSpotlight(); + + return ( +
+ {( + Object.entries(scopeMeta) as Array< + [ + Exclude, + (typeof scopeMeta)[Exclude], + ] + > + ).map(([scope, meta]) => { + const Icon = scopeIcons[scope]; + return ( + + {meta.triggerLabel}{' '} + + {altLabel}+{meta.shortcutIndex} + + + } + > + + + ); + })} +
+ ); +}; + +export default SpotlightQuickActions; diff --git a/packages/shared/src/components/spotlight/SpotlightTrigger.tsx b/packages/shared/src/components/spotlight/SpotlightTrigger.tsx index 2219df87c62..9161e101dec 100644 --- a/packages/shared/src/components/spotlight/SpotlightTrigger.tsx +++ b/packages/shared/src/components/spotlight/SpotlightTrigger.tsx @@ -1,10 +1,11 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; -import { SearchIcon } from '../icons'; +import { SearchIcon, SparkleIcon } from '../icons'; import { IconSize } from '../Icon'; import { isAppleDevice } from '../../lib/func'; import { useSpotlight } from './useSpotlight'; +import { useCyclingPlaceholder } from './useCyclingPlaceholder'; import { ViewSize, useViewSize } from '../../hooks'; interface SpotlightTriggerProps { @@ -13,9 +14,18 @@ interface SpotlightTriggerProps { const cmdLabel = isAppleDevice() ? '⌘' : 'Ctrl'; +const TRIGGER_PHRASES = [ + 'Search or jump to...', + 'Try Quick Keys: tt for theme', + 'Find a squad...', + 'Switch theme, layout, density...', + '#react, #typescript, #ai', + 'Jump to bookmarks', +] as const; + /** * Header pill that lives where the old SearchPanel input used to. Looks - * like a search bar but is a single button — clicking (or focusing+Enter) + * like a search bar but is a single button - clicking (or focusing+Enter) * opens the global Spotlight modal. */ export const SpotlightTrigger = ({ @@ -23,6 +33,7 @@ export const SpotlightTrigger = ({ }: SpotlightTriggerProps): ReactElement => { const { open } = useSpotlight(); const isLaptop = useViewSize(ViewSize.Laptop); + const placeholder = useCyclingPlaceholder({ phrases: TRIGGER_PHRASES }); if (!isLaptop) { return ( @@ -49,23 +60,27 @@ export const SpotlightTrigger = ({ aria-keyshortcuts={`${cmdLabel}+K`} onClick={open} className={classNames( - 'group/spotlight-trigger flex h-10 min-w-[280px] flex-1 items-center gap-3 rounded-12 border border-border-subtlest-tertiary bg-background-subtle px-3 text-left transition-colors hover:bg-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-cabbage-default', + 'group/spotlight-trigger relative flex h-10 min-w-[280px] flex-1 items-center gap-2.5 overflow-hidden rounded-12 border border-border-subtlest-tertiary bg-background-subtle px-3 text-left transition-all hover:border-border-subtlest-secondary hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-cabbage-default focus-visible:ring-offset-2', className, )} > - + - - Search or jump to... + + {placeholder} - - + + {cmdLabel} - + K diff --git a/packages/shared/src/components/spotlight/commands/actions.ts b/packages/shared/src/components/spotlight/commands/actions.ts index 08b6af5117d..2af1fa6323d 100644 --- a/packages/shared/src/components/spotlight/commands/actions.ts +++ b/packages/shared/src/components/spotlight/commands/actions.ts @@ -35,6 +35,7 @@ export const getActionsCommands = ({ icon: EyeIcon, keywords: ['history', 'recently read'], group: SpotlightGroup.Actions, + quickKey: 'hi', requiresAuth: true, perform: () => { router.push(`${webappUrl}history`); @@ -88,6 +89,7 @@ export const getActionsCommands = ({ icon: PowerIcon, keywords: ['sign out', 'logout'], group: SpotlightGroup.Actions, + quickKey: 'lo', destructive: true, requiresAuth: true, perform: async () => { diff --git a/packages/shared/src/components/spotlight/commands/create.ts b/packages/shared/src/components/spotlight/commands/create.ts index 7087826cd3a..74c0fad1352 100644 --- a/packages/shared/src/components/spotlight/commands/create.ts +++ b/packages/shared/src/components/spotlight/commands/create.ts @@ -34,6 +34,7 @@ export const getCreateCommands = ({ keywords: ['write', 'post', 'share', 'link', 'compose'], group: SpotlightGroup.Create, shortcut: 'c', + quickKey: 'np', requiresAuth: true, perform: () => { openModal({ @@ -101,6 +102,7 @@ export const getCreateCommands = ({ icon: BookmarkIcon, keywords: ['folder', 'organize bookmarks'], group: SpotlightGroup.Create, + quickKey: 'nb', requiresAuth: true, perform: () => { router.push(`${webappUrl}bookmarks?createFolder=1`); @@ -124,6 +126,7 @@ export const getCreateCommands = ({ icon: FeedbackIcon, keywords: ['report', 'bug', 'idea', 'suggestion'], group: SpotlightGroup.Create, + quickKey: 'fb', requiresAuth: true, perform: () => { openModal({ type: LazyModal.Feedback }); diff --git a/packages/shared/src/components/spotlight/commands/navigate.ts b/packages/shared/src/components/spotlight/commands/navigate.ts index c2013924ce0..197f039b251 100644 --- a/packages/shared/src/components/spotlight/commands/navigate.ts +++ b/packages/shared/src/components/spotlight/commands/navigate.ts @@ -107,6 +107,7 @@ export const getNavigateCommands = ({ title: 'Go to Bookmarks', icon: BookmarkIcon, keywords: ['saved'], + quickKey: 'gb', group: SpotlightGroup.Navigate, requiresAuth: true, perform: go('bookmarks'), @@ -226,6 +227,7 @@ export const getNavigateCommands = ({ title: 'Go to Plus', subtitle: 'Manage or upgrade your subscription', icon: DevPlusIcon, + quickKey: 'gp', keywords: ['subscription', 'upgrade', 'membership'], group: SpotlightGroup.Navigate, perform: go('plus'), @@ -252,6 +254,7 @@ export const getNavigateCommands = ({ title: 'Go to Settings', icon: SettingsIcon, keywords: ['preferences', 'account'], + quickKey: 'gs', group: SpotlightGroup.Navigate, requiresAuth: true, perform: go('settings/profile'), @@ -264,6 +267,7 @@ export const getNavigateCommands = ({ title: 'Go to your profile', icon: UserIcon, keywords: ['me', 'account'], + quickKey: 'me', group: SpotlightGroup.Navigate, requiresAuth: true, perform: go(user.username), diff --git a/packages/shared/src/components/spotlight/commands/settings.ts b/packages/shared/src/components/spotlight/commands/settings.ts index 7fe6a5eb1e5..acc50b1bc53 100644 --- a/packages/shared/src/components/spotlight/commands/settings.ts +++ b/packages/shared/src/components/spotlight/commands/settings.ts @@ -76,6 +76,7 @@ export const getSettingsCommands = ({ icon: themeIcon, keywords: ['dark mode', 'light mode', 'theme', 'appearance'], group: SpotlightGroup.Settings, + quickKey: 'tt', perform: () => { settings.setTheme(nextTheme()); }, @@ -89,6 +90,7 @@ export const getSettingsCommands = ({ icon: settings.insaneMode ? CardLayoutIcon : LayoutIcon, keywords: ['cards', 'list', 'layout', 'view', 'density'], group: SpotlightGroup.Settings, + quickKey: 'dd', perform: () => { settings.toggleInsaneMode(!settings.insaneMode); }, @@ -99,6 +101,7 @@ export const getSettingsCommands = ({ icon: HamburgerIcon, keywords: ['sidebar', 'collapse', 'expand'], group: SpotlightGroup.Settings, + quickKey: 'sb', perform: settings.toggleSidebarExpanded, }, { diff --git a/packages/shared/src/components/spotlight/types.ts b/packages/shared/src/components/spotlight/types.ts index b4c99f85ce9..8acdaf9a178 100644 --- a/packages/shared/src/components/spotlight/types.ts +++ b/packages/shared/src/components/spotlight/types.ts @@ -1,5 +1,6 @@ import type { ComponentType, ReactElement } from 'react'; import type { IconProps } from '../Icon'; +import { SearchProviderEnum } from '../../graphql/search'; /** * Verb-prefix convention for command titles (Linear pattern): @@ -64,6 +65,12 @@ export interface SpotlightCommand { group: SpotlightGroup; /** Optional global hotkey to display on the right of the row, e.g. `'c'`. */ shortcut?: string; + /** + * Apple-Tahoe-style 2-letter mnemonic. Typing the key + space at the + * start of an empty input fires the command immediately. Must be exactly + * two lowercase ASCII chars to keep dispatch unambiguous. + */ + quickKey?: string; /** Predicate to hide the command when env doesn't match. */ when?: (env: SpotlightContextEnv) => boolean; /** Mark commands that require an inline confirm before `perform` runs. */ @@ -76,6 +83,71 @@ export interface SpotlightCommand { perform: () => void | Promise; } +/** + * Apple-Tahoe browse-mode equivalent. When the modal is in a non-`All` scope, + * only the matching entity-search results are visible and the placeholder + * adapts. Backspace on an empty input pops back to `All`. + */ +export enum SpotlightScope { + All = 'all', + Posts = 'posts', + Squads = 'squads', + People = 'people', + Tags = 'tags', +} + +export interface ScopeMetaEntry { + label: string; + /** Used for tooltips and ARIA labels on the trigger icon buttons. */ + triggerLabel: string; + /** Used as Command.Input placeholder while the scope is active. */ + placeholder: string; + /** Single-letter index for Alt+1..4 dispatch (1-based). */ + shortcutIndex: number; + searchProvider: SearchProviderEnum; +} + +export const scopeOrder: Array> = [ + SpotlightScope.Posts, + SpotlightScope.Squads, + SpotlightScope.People, + SpotlightScope.Tags, +]; + +export const scopeMeta: Record< + Exclude, + ScopeMetaEntry +> = { + [SpotlightScope.Posts]: { + label: 'Posts', + triggerLabel: 'Search posts', + placeholder: 'Search posts...', + shortcutIndex: 1, + searchProvider: SearchProviderEnum.Posts, + }, + [SpotlightScope.Squads]: { + label: 'Squads', + triggerLabel: 'Search squads', + placeholder: 'Search squads...', + shortcutIndex: 2, + searchProvider: SearchProviderEnum.Sources, + }, + [SpotlightScope.People]: { + label: 'People', + triggerLabel: 'Search people', + placeholder: 'Search people...', + shortcutIndex: 3, + searchProvider: SearchProviderEnum.Users, + }, + [SpotlightScope.Tags]: { + label: 'Tags', + triggerLabel: 'Search tags', + placeholder: 'Search tags...', + shortcutIndex: 4, + searchProvider: SearchProviderEnum.Tags, + }, +}; + export interface RecentCommandEntry { commandId: string; lastUsedAt: number; diff --git a/packages/shared/src/components/spotlight/useCyclingPlaceholder.ts b/packages/shared/src/components/spotlight/useCyclingPlaceholder.ts new file mode 100644 index 00000000000..50ad4992f76 --- /dev/null +++ b/packages/shared/src/components/spotlight/useCyclingPlaceholder.ts @@ -0,0 +1,46 @@ +import { useEffect, useRef, useState } from 'react'; + +interface UseCyclingPlaceholderOptions { + /** Phrases to rotate between. Falls back to the first when paused. */ + phrases: readonly string[]; + /** Cycle interval in ms. */ + intervalMs?: number; + /** Pause cycling. The current phrase stays put. */ + paused?: boolean; +} + +/** + * Cycles through a curated set of placeholder phrases for input/trigger + * surfaces. Honors `prefers-reduced-motion: reduce` by freezing on the first + * phrase. Pure timer-based; no DOM dependencies, SSR-safe. + */ +export const useCyclingPlaceholder = ({ + phrases, + intervalMs = 3500, + paused = false, +}: UseCyclingPlaceholderOptions): string => { + const [index, setIndex] = useState(0); + const phrasesRef = useRef(phrases); + phrasesRef.current = phrases; + + useEffect(() => { + if (paused || phrases.length <= 1) { + return undefined; + } + if (typeof window === 'undefined') { + return undefined; + } + const reduced = + typeof window.matchMedia === 'function' && + window.matchMedia('(prefers-reduced-motion: reduce)').matches; + if (reduced) { + return undefined; + } + const id = window.setInterval(() => { + setIndex((prev) => (prev + 1) % phrasesRef.current.length); + }, intervalMs); + return () => window.clearInterval(id); + }, [paused, intervalMs, phrases.length]); + + return phrases[index] ?? phrases[0] ?? ''; +}; diff --git a/packages/shared/src/components/spotlight/useQuickKeyDispatch.spec.tsx b/packages/shared/src/components/spotlight/useQuickKeyDispatch.spec.tsx new file mode 100644 index 00000000000..7cf44b883b2 --- /dev/null +++ b/packages/shared/src/components/spotlight/useQuickKeyDispatch.spec.tsx @@ -0,0 +1,111 @@ +import { renderHook } from '@testing-library/react'; +import { type SpotlightCommand, SpotlightGroup, SpotlightScope } from './types'; +import { useQuickKeyDispatch } from './useQuickKeyDispatch'; + +const NoopIcon = (): null => null; + +const buildCommand = ( + id: string, + quickKey?: string, + perform: SpotlightCommand['perform'] = () => undefined, +): SpotlightCommand => ({ + id, + title: id, + icon: NoopIcon, + group: SpotlightGroup.Settings, + quickKey, + perform, +}); + +describe('useQuickKeyDispatch', () => { + it('fires the matching command when query is "xx "', () => { + const onDispatch = jest.fn(); + const setQuery = jest.fn(); + const command = buildCommand('settings.theme', 'tt'); + + renderHook(() => + useQuickKeyDispatch({ + query: 'tt ', + setQuery, + commands: [command], + scope: SpotlightScope.All, + onDispatch, + }), + ); + + expect(setQuery).toHaveBeenCalledWith(''); + expect(onDispatch).toHaveBeenCalledWith(command); + }); + + it('does nothing when scope is not All', () => { + const onDispatch = jest.fn(); + const setQuery = jest.fn(); + + renderHook(() => + useQuickKeyDispatch({ + query: 'tt ', + setQuery, + commands: [buildCommand('settings.theme', 'tt')], + scope: SpotlightScope.Posts, + onDispatch, + }), + ); + + expect(setQuery).not.toHaveBeenCalled(); + expect(onDispatch).not.toHaveBeenCalled(); + }); + + it('does nothing for unknown two-letter prefixes', () => { + const onDispatch = jest.fn(); + const setQuery = jest.fn(); + + renderHook(() => + useQuickKeyDispatch({ + query: 'zz ', + setQuery, + commands: [buildCommand('settings.theme', 'tt')], + scope: SpotlightScope.All, + onDispatch, + }), + ); + + expect(setQuery).not.toHaveBeenCalled(); + expect(onDispatch).not.toHaveBeenCalled(); + }); + + it('does nothing for partial input (no trailing space)', () => { + const onDispatch = jest.fn(); + const setQuery = jest.fn(); + + renderHook(() => + useQuickKeyDispatch({ + query: 'tt', + setQuery, + commands: [buildCommand('settings.theme', 'tt')], + scope: SpotlightScope.All, + onDispatch, + }), + ); + + expect(setQuery).not.toHaveBeenCalled(); + expect(onDispatch).not.toHaveBeenCalled(); + }); + + it('only matches against commands that registered a quickKey', () => { + const onDispatch = jest.fn(); + const setQuery = jest.fn(); + + renderHook(() => + useQuickKeyDispatch({ + query: 'tt ', + setQuery, + commands: [buildCommand('settings.layout')], + scope: SpotlightScope.All, + onDispatch, + }), + ); + + expect(setQuery).not.toHaveBeenCalled(); + expect(onDispatch).not.toHaveBeenCalled(); + }); +}); diff --git a/packages/shared/src/components/spotlight/useQuickKeyDispatch.ts b/packages/shared/src/components/spotlight/useQuickKeyDispatch.ts new file mode 100644 index 00000000000..a2501d038ce --- /dev/null +++ b/packages/shared/src/components/spotlight/useQuickKeyDispatch.ts @@ -0,0 +1,57 @@ +import { useEffect, useRef } from 'react'; +import { type SpotlightCommand, SpotlightScope } from './types'; + +interface UseQuickKeyDispatchOptions { + /** Live input value (raw, unmodified). */ + query: string; + /** Setter that clears the input once a quick key fires. */ + setQuery: (value: string) => void; + /** All currently registered commands. */ + commands: SpotlightCommand[]; + /** Active scope. Quick keys are no-ops while a scope is active. */ + scope: SpotlightScope; + /** Fires the matched command. */ + onDispatch: (command: SpotlightCommand) => void; +} + +const QUICK_KEY_PATTERN = /^([a-z]{2}) $/; + +/** + * Apple-Tahoe-style "Quick Keys" dispatcher. Watching the input value, this + * hook fires a command immediately when: + * 1. The active scope is `All` (preserving the input for scoped search). + * 2. The query exactly matches `xx ` (two lowercase letters then a space). + * 3. A registered command's `quickKey` equals the two-letter prefix. + * + * The input is cleared and the command runs. Otherwise the user keeps typing + * normally; this is non-disruptive. + */ +export const useQuickKeyDispatch = ({ + query, + setQuery, + commands, + scope, + onDispatch, +}: UseQuickKeyDispatchOptions): void => { + const onDispatchRef = useRef(onDispatch); + onDispatchRef.current = onDispatch; + const setQueryRef = useRef(setQuery); + setQueryRef.current = setQuery; + + useEffect(() => { + if (scope !== SpotlightScope.All) { + return; + } + const match = QUICK_KEY_PATTERN.exec(query); + if (!match) { + return; + } + const key = match[1]; + const command = commands.find((cmd) => cmd.quickKey === key); + if (!command) { + return; + } + setQueryRef.current(''); + onDispatchRef.current(command); + }, [query, commands, scope]); +}; diff --git a/packages/shared/tailwind.config.ts b/packages/shared/tailwind.config.ts index ad01990f7f8..90b17060f70 100644 --- a/packages/shared/tailwind.config.ts +++ b/packages/shared/tailwind.config.ts @@ -306,6 +306,14 @@ export default { transform: 'scale(0.98)', }, }, + 'spotlight-row-in': { + from: { opacity: '0', transform: 'translateY(4px)' }, + to: { opacity: '1', transform: 'translateY(0)' }, + }, + 'spotlight-list-fade': { + from: { opacity: '0.5' }, + to: { opacity: '1' }, + }, }, animation: { 'scale-down-pulse': @@ -322,6 +330,9 @@ export default { 'spotlight-panel-in': 'spotlight-panel-in 155ms cubic-bezier(0.16, 1, 0.3, 1) both', 'spotlight-panel-out': 'spotlight-panel-out 110ms ease-in both', + 'spotlight-row-in': + 'spotlight-row-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both', + 'spotlight-list-fade': 'spotlight-list-fade 160ms ease-out both', }, }, lineClamp: { diff --git a/scripts/typecheck-strict-changed.js b/scripts/typecheck-strict-changed.js index 9622b9454bf..cfddc1fca97 100644 --- a/scripts/typecheck-strict-changed.js +++ b/scripts/typecheck-strict-changed.js @@ -58,6 +58,24 @@ const strictSkipList = new Set([ // in a dedicated cleanup PR. 'packages/shared/src/components/post/write/CreatePostButton.tsx', 'packages/shared/src/components/squads/SharePostBar.tsx', + // Smart-composer-experiment branch — rich-text editor toolbar icons + // generated from SVGs. They have no .d.ts for the corresponding .svg + // files yet (svgr declarations live in a separate cleanup PR). The + // spotlight branch is rebased on top of smart-composer so these files + // surface in the strict diff against origin/main. + 'packages/shared/src/components/icons/CodeBlock/index.tsx', + 'packages/shared/src/components/icons/Heading1/index.tsx', + 'packages/shared/src/components/icons/Heading2/index.tsx', + 'packages/shared/src/components/icons/Heading3/index.tsx', + 'packages/shared/src/components/icons/HorizontalRule/index.tsx', + 'packages/shared/src/components/icons/InlineCode/index.tsx', + 'packages/shared/src/components/icons/Maximize/index.tsx', + 'packages/shared/src/components/icons/Minimize/index.tsx', + 'packages/shared/src/components/icons/Strikethrough/index.tsx', + // featureManagement.ts surfaces a missing @growthbook/growthbook + // declaration file under strict mode. Pre-existing on the + // smart-composer base; tracked for cleanup. + 'packages/shared/src/lib/featureManagement.ts', ]); const changedFiles = getChangedTypescriptFiles().filter( From c217dd240c1083daaf00246542db92e9895cf311 Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Mon, 4 May 2026 23:48:35 +0300 Subject: [PATCH 3/8] refactor(spotlight): typed result rows, calmer chrome MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cleans up the modal so it stops feeling like a generic command list and reads as a daily.dev-native finder. - Typed rows for posts/squads/people/tags: source avatars on posts, round avatars + handle on squads & users, hashtag glyph on tags. - Per-group "See all results for X" CTA inside each search section. - Strip in-row chrome: remove purple QK chip, drop right-side shortcut kbd from generic rows, smaller leading icons (size-6 + XSmall), selected state is a plain bg-surface-hover (no ring). - Static input placeholder (drop cycling animation that read as a bug), drop sparkle pulse, taller input (h-14) + typo-body for presence. - Quieter scope chips, softer active-scope pill, header-style group labels (no uppercase tracking). - Minimal footer: "↵ Open / esc Close" + Shortcuts link to the help screen (quick keys still listed there). - Delete unused useCyclingPlaceholder hook. Co-authored-by: Cursor --- .../components/spotlight/ScopeBreadcrumbs.tsx | 21 +- .../src/components/spotlight/Spotlight.tsx | 264 ++++++++++++------ .../components/spotlight/SpotlightTrigger.tsx | 38 +-- .../components/spotlight/commands/search.ts | 94 ++++++- .../shared/src/components/spotlight/types.ts | 17 ++ .../spotlight/useCyclingPlaceholder.ts | 46 --- 6 files changed, 300 insertions(+), 180 deletions(-) delete mode 100644 packages/shared/src/components/spotlight/useCyclingPlaceholder.ts diff --git a/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx b/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx index 9a594a880e1..cb9a5e873b4 100644 --- a/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx +++ b/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx @@ -50,23 +50,20 @@ export const ScopeBreadcrumbs = ({
- + - {meta.label} + {meta.label} - - Backspace to clear -
); } @@ -75,7 +72,7 @@ export const ScopeBreadcrumbs = ({
{scopeOrder.map((s) => { const meta = scopeMeta[s]; @@ -87,17 +84,15 @@ export const ScopeBreadcrumbs = ({ data-testid={`scope-chip-${s}`} aria-keyshortcuts={`Alt+${meta.shortcutIndex}`} onClick={() => onSelect(s)} + title={`${meta.triggerLabel} (${altLabel}+${meta.shortcutIndex})`} className={classNames( - 'flex shrink-0 items-center gap-1.5 rounded-8 border border-border-subtlest-tertiary bg-background-subtle px-2 py-1 text-text-secondary transition-all typo-caption1', - 'hover:border-border-subtlest-secondary hover:bg-surface-hover hover:text-text-primary', + 'flex shrink-0 items-center gap-1.5 rounded-8 px-2 py-1 text-text-tertiary transition-colors typo-caption1', + 'hover:bg-surface-hover hover:text-text-primary', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-cabbage-default focus-visible:ring-offset-1', )} > {meta.label} - - {altLabel}+{meta.shortcutIndex} - ); })} diff --git a/packages/shared/src/components/spotlight/Spotlight.tsx b/packages/shared/src/components/spotlight/Spotlight.tsx index 1fadc5bd1af..08e98ddecc4 100644 --- a/packages/shared/src/components/spotlight/Spotlight.tsx +++ b/packages/shared/src/components/spotlight/Spotlight.tsx @@ -10,7 +10,7 @@ import classNames from 'classnames'; import { useRouter } from 'next/router'; import { Command } from 'cmdk'; import ReactModal from 'react-modal'; -import { ClearIcon, ClickIcon, SearchIcon, SparkleIcon } from '../icons'; +import { ClearIcon, ClickIcon, SearchIcon } from '../icons'; import { IconSize } from '../Icon'; import { Loader } from '../Loader'; import { ElementPlaceholder } from '../ElementPlaceholder'; @@ -25,6 +25,7 @@ import { initReactModal, isSpecialKeyPressed, } from '../../lib/func'; +import { fallbackImages } from '../../lib/config'; import { groupLabels, groupOrder, @@ -42,10 +43,10 @@ import { ScopeBreadcrumbs } from './ScopeBreadcrumbs'; import { useQuickKeyDispatch } from './useQuickKeyDispatch'; const groupHeadingClass = - '[&_[cmdk-group-heading]]:sticky [&_[cmdk-group-heading]]:top-0 [&_[cmdk-group-heading]]:z-1 [&_[cmdk-group-heading]]:bg-background-default [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:pl-4 [&_[cmdk-group-heading]]:pr-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-bold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.06em] [&_[cmdk-group-heading]]:text-text-tertiary'; + '[&_[cmdk-group-heading]]:sticky [&_[cmdk-group-heading]]:top-0 [&_[cmdk-group-heading]]:z-1 [&_[cmdk-group-heading]]:bg-background-default [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:pl-4 [&_[cmdk-group-heading]]:pr-3 [&_[cmdk-group-heading]]:pt-3 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:tracking-normal [&_[cmdk-group-heading]]:text-text-quaternary'; const firstHeadingNoTopPaddingClass = - '[&_[cmdk-group]:first-child_[cmdk-group-heading]]:pt-0'; + '[&_[cmdk-group]:first-child_[cmdk-group-heading]]:pt-1'; const SUGGESTED_COMMAND_IDS = [ 'create.compose-text', @@ -68,6 +69,87 @@ interface RowProps { onSelect: (command: SpotlightCommand) => void; } +const rowBaseClass = + 'group/spotlight-row mx-2 flex cursor-pointer items-center gap-3 rounded-10 px-3 text-left motion-safe:animate-spotlight-row-in aria-disabled:cursor-not-allowed aria-disabled:opacity-40 data-[selected=true]:bg-surface-hover'; + +const TypedAvatar = ({ + src, + alt, + rounded, + className, +}: { + src?: string; + alt: string; + rounded: 'full' | '8'; + className?: string; +}): ReactElement => ( + + {alt} { + const target = e.target as HTMLImageElement; + if (target.src !== fallbackImages.avatar) { + target.src = fallbackImages.avatar; + } + }} + /> + +); + +const TagGlyph = (): ReactElement => ( + + # + +); + +const SeeAllGlyph = (): ReactElement => ( + + + +); + +const TitleSubtitle = ({ + title, + subtitle, + showSubtitleAlways = false, +}: { + title: string; + subtitle?: string; + showSubtitleAlways?: boolean; +}): ReactElement => ( + + + {title} + + {subtitle && ( + + {subtitle} + + )} + +); + const SpotlightRow = ({ command, isLoggedIn, @@ -80,10 +162,81 @@ const SpotlightRow = ({ const isPending = pendingConfirmId === command.id; const isPlusGated = command.plusBadge && !isPlus; const isAuthGated = command.requiresAuth && !isLoggedIn; + const { meta } = command; const value = `${command.title} ${command.subtitle ?? ''} ${( command.keywords ?? [] ).join(' ')}`.toLowerCase(); + let leading: ReactElement; + let body: ReactElement; + + if (meta?.kind === 'post') { + leading = ( + + ); + body = ( + + ); + } else if (meta?.kind === 'source') { + leading = ( + + ); + body = ( + + ); + } else if (meta?.kind === 'user') { + leading = ( + + ); + body = ( + + ); + } else if (meta?.kind === 'tag') { + leading = ; + body = ( + + #{meta.tagName} + + ); + } else if (meta?.kind === 'see-all') { + leading = ; + body = ( + + {command.title} + + ); + } else { + leading = ( + + + + ); + body = ; + } + return ( onSelect(command)} aria-keyshortcuts={command.shortcut} className={classNames( - 'group/spotlight-row mx-2 flex cursor-pointer items-center gap-2.5 rounded-10 px-2.5 text-left', - 'motion-safe:animate-spotlight-row-in', - isMobile ? 'h-12' : 'h-9', - 'data-[selected=true]:bg-surface-hover data-[selected=true]:ring-1 data-[selected=true]:ring-inset data-[selected=true]:ring-border-subtlest-tertiary', - 'aria-disabled:cursor-not-allowed aria-disabled:opacity-40', + rowBaseClass, + isMobile ? 'h-12' : 'h-10', command.destructive && 'data-[selected=true]:text-status-error', )} > - - - - - - {command.title} - - {command.subtitle && ( - - {command.subtitle} - - )} - + {leading} + {body} {isAuthGated && ( Sign in @@ -130,20 +262,10 @@ const SpotlightRow = ({ )} {isPending && } - {!isPending && command.quickKey && ( + {!isPending && command.shortcut && ( - QK - {command.quickKey} - - )} - {!isPending && !command.quickKey && command.shortcut && ( - {command.shortcut} @@ -187,9 +309,9 @@ const SkeletonRows = ({ count = 3 }: { count?: number }) => (
- +
))} @@ -349,13 +471,10 @@ const ShortcutsHelpScreen = ({ const Hint = ({ label, combo }: { label: string; combo: string }) => ( - + {combo} - {label} + {label} ); @@ -709,32 +828,24 @@ export const Spotlight = ({ <>
- {query.length > 0 ? ( - - ) : ( - - )} + { if ( @@ -989,27 +1100,18 @@ export const Spotlight = ({ )} -
- +
+ - - - - {cmdLabel} - - - K - - Toggle - +
diff --git a/packages/shared/src/components/spotlight/SpotlightTrigger.tsx b/packages/shared/src/components/spotlight/SpotlightTrigger.tsx index 9161e101dec..f8c0aab145f 100644 --- a/packages/shared/src/components/spotlight/SpotlightTrigger.tsx +++ b/packages/shared/src/components/spotlight/SpotlightTrigger.tsx @@ -1,11 +1,10 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; -import { SearchIcon, SparkleIcon } from '../icons'; +import { SearchIcon } from '../icons'; import { IconSize } from '../Icon'; import { isAppleDevice } from '../../lib/func'; import { useSpotlight } from './useSpotlight'; -import { useCyclingPlaceholder } from './useCyclingPlaceholder'; import { ViewSize, useViewSize } from '../../hooks'; interface SpotlightTriggerProps { @@ -14,15 +13,6 @@ interface SpotlightTriggerProps { const cmdLabel = isAppleDevice() ? '⌘' : 'Ctrl'; -const TRIGGER_PHRASES = [ - 'Search or jump to...', - 'Try Quick Keys: tt for theme', - 'Find a squad...', - 'Switch theme, layout, density...', - '#react, #typescript, #ai', - 'Jump to bookmarks', -] as const; - /** * Header pill that lives where the old SearchPanel input used to. Looks * like a search bar but is a single button - clicking (or focusing+Enter) @@ -33,7 +23,6 @@ export const SpotlightTrigger = ({ }: SpotlightTriggerProps): ReactElement => { const { open } = useSpotlight(); const isLaptop = useViewSize(ViewSize.Laptop); - const placeholder = useCyclingPlaceholder({ phrases: TRIGGER_PHRASES }); if (!isLaptop) { return ( @@ -43,7 +32,7 @@ export const SpotlightTrigger = ({ aria-label="Open search and command palette" onClick={open} className={classNames( - 'flex h-10 w-10 items-center justify-center rounded-12 bg-background-subtle text-text-tertiary transition-colors hover:text-text-primary', + 'flex size-10 items-center justify-center rounded-12 bg-background-subtle text-text-tertiary transition-colors hover:text-text-primary', className, )} > @@ -60,28 +49,21 @@ export const SpotlightTrigger = ({ aria-keyshortcuts={`${cmdLabel}+K`} onClick={open} className={classNames( - 'group/spotlight-trigger relative flex h-10 min-w-[280px] flex-1 items-center gap-2.5 overflow-hidden rounded-12 border border-border-subtlest-tertiary bg-background-subtle px-3 text-left transition-all hover:border-border-subtlest-secondary hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-cabbage-default focus-visible:ring-offset-2', + 'group/spotlight-trigger flex h-10 min-w-[280px] flex-1 items-center gap-2.5 rounded-12 border border-border-subtlest-tertiary bg-background-subtle px-3 text-left transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-cabbage-default focus-visible:ring-offset-2', className, )} > - - - - {placeholder} + + Search - - - {cmdLabel} - - - K + + + {cmdLabel}K diff --git a/packages/shared/src/components/spotlight/commands/search.ts b/packages/shared/src/components/spotlight/commands/search.ts index 3b644c2eb43..9d37d43e280 100644 --- a/packages/shared/src/components/spotlight/commands/search.ts +++ b/packages/shared/src/components/spotlight/commands/search.ts @@ -1,6 +1,6 @@ import { useMemo } from 'react'; import type { NextRouter } from 'next/router'; -import { HashtagIcon, SearchIcon, SourceIcon, UserIcon } from '../../icons'; +import { HashtagIcon, OpenLinkIcon, SearchIcon } from '../../icons'; import { SearchProviderEnum, getSearchUrl, @@ -8,7 +8,11 @@ import { } from '../../../graphql/search'; import { useSearchProviderSuggestions } from '../../../hooks/search'; import { webappUrl } from '../../../lib/constants'; -import { SpotlightGroup, type SpotlightCommand } from '../types'; +import { + SpotlightGroup, + SpotlightScope, + type SpotlightCommand, +} from '../types'; interface SearchCommandsContext { router: Pick; @@ -34,6 +38,11 @@ const buildPostCommand = ( subtitle: hit.subtitle, icon: SearchIcon, group: SpotlightGroup.Search, + meta: { + kind: 'post', + sourceImage: hit.image, + sourceName: hit.subtitle, + }, perform: () => { if (hit.id) { router.push(`${webappUrl}posts/${hit.id}`); @@ -50,10 +59,11 @@ const buildTagCommand = ( router: SearchCommandsContext['router'], ): SpotlightCommand => ({ id: `search.tag.${hit.id ?? hit.title}`, - title: `#${hit.title}`, + title: hit.title, subtitle: hit.subtitle, icon: HashtagIcon, group: SpotlightGroup.Search, + meta: { kind: 'tag', tagName: hit.title }, perform: () => { router.push(`${webappUrl}tags/${hit.title}`); }, @@ -65,9 +75,14 @@ const buildSourceCommand = ( ): SpotlightCommand => ({ id: `search.source.${hit.id ?? hit.title}`, title: hit.title, - subtitle: hit.subtitle ?? 'Source', - icon: SourceIcon, + subtitle: hit.subtitle, + icon: SearchIcon, group: SpotlightGroup.Search, + meta: { + kind: 'source', + image: hit.image, + handle: hit.subtitle, + }, perform: () => { if (!hit.id) { return; @@ -83,8 +98,13 @@ const buildUserCommand = ( id: `search.user.${hit.id ?? hit.title}`, title: hit.title, subtitle: hit.subtitle, - icon: UserIcon, + icon: SearchIcon, group: SpotlightGroup.Search, + meta: { + kind: 'user', + image: hit.image, + handle: hit.subtitle, + }, perform: () => { if (!hit.subtitle) { return; @@ -97,6 +117,37 @@ const buildUserCommand = ( }, }); +type SeeAllScope = Exclude; + +const seeAllProvider: Record = { + [SpotlightScope.Posts]: SearchProviderEnum.Posts, + [SpotlightScope.Squads]: SearchProviderEnum.Sources, + [SpotlightScope.People]: SearchProviderEnum.Users, + [SpotlightScope.Tags]: SearchProviderEnum.Tags, +}; + +const seeAllLabel: Record = { + [SpotlightScope.Posts]: 'posts', + [SpotlightScope.Squads]: 'squads', + [SpotlightScope.People]: 'people', + [SpotlightScope.Tags]: 'tags', +}; + +const buildSeeAllCommand = ( + scope: SeeAllScope, + query: string, + router: SearchCommandsContext['router'], +): SpotlightCommand => ({ + id: `search.see-all.${scope}`, + title: `See all ${seeAllLabel[scope]} for "${query}"`, + icon: OpenLinkIcon, + group: SpotlightGroup.Search, + meta: { kind: 'see-all', scope }, + perform: () => { + router.push(getSearchUrl({ query, provider: seeAllProvider[scope] })); + }, +}); + /** * Always-on rows that act as the no-results escape hatch and explicit * search-provider entry points. Visible whenever there's a query. @@ -152,16 +203,35 @@ export const useSpotlightSearchCommands = ({ }); return useMemo(() => { + const posts = (postHits?.hits ?? []).map((hit) => + buildPostCommand(hit, router), + ); + const tags = (tagHits?.hits ?? []).map((hit) => + buildTagCommand(hit, router), + ); + const sources = (sourceHits?.hits ?? []).map((hit) => + buildSourceCommand(hit, router), + ); + const users = (userHits?.hits ?? []).map((hit) => + buildUserCommand(hit, router), + ); + + const withSeeAll = ( + scope: SeeAllScope, + items: SpotlightCommand[], + ): SpotlightCommand[] => + items.length > 0 && trimmed + ? [...items, buildSeeAllCommand(scope, trimmed, router)] + : items; + return { isLoading: !!trimmed && (postsLoading || tagsLoading || sourcesLoading || usersLoading), - posts: (postHits?.hits ?? []).map((hit) => buildPostCommand(hit, router)), - tags: (tagHits?.hits ?? []).map((hit) => buildTagCommand(hit, router)), - sources: (sourceHits?.hits ?? []).map((hit) => - buildSourceCommand(hit, router), - ), - users: (userHits?.hits ?? []).map((hit) => buildUserCommand(hit, router)), + posts: withSeeAll(SpotlightScope.Posts, posts), + tags: withSeeAll(SpotlightScope.Tags, tags), + sources: withSeeAll(SpotlightScope.Squads, sources), + users: withSeeAll(SpotlightScope.People, users), fallthrough: buildFallthrough(trimmed, router), }; }, [ diff --git a/packages/shared/src/components/spotlight/types.ts b/packages/shared/src/components/spotlight/types.ts index 8acdaf9a178..0ea978a33c1 100644 --- a/packages/shared/src/components/spotlight/types.ts +++ b/packages/shared/src/components/spotlight/types.ts @@ -55,6 +55,18 @@ export interface SpotlightContextEnv { isMobile: boolean; } +/** + * Discriminated metadata that lets the UI render typed result rows + * (post / source / user / tag / see-all) instead of a single generic + * row layout. Pure data — never read by `perform`. + */ +export type SpotlightCommandMeta = + | { kind: 'post'; sourceImage?: string; sourceName?: string } + | { kind: 'source'; image?: string; handle?: string } + | { kind: 'user'; image?: string; handle?: string } + | { kind: 'tag'; tagName: string } + | { kind: 'see-all'; scope: Exclude }; + export interface SpotlightCommand { id: string; title: string; @@ -79,6 +91,11 @@ export interface SpotlightCommand { requiresAuth?: boolean; /** Show a "Plus" badge instead of hiding the row when not Plus. */ plusBadge?: boolean; + /** + * Optional typed metadata. When present the modal renders a custom row + * for that entity kind (avatar, handle, hashtag glyph, see-all CTA). + */ + meta?: SpotlightCommandMeta; /** Action to execute. May be async. */ perform: () => void | Promise; } diff --git a/packages/shared/src/components/spotlight/useCyclingPlaceholder.ts b/packages/shared/src/components/spotlight/useCyclingPlaceholder.ts deleted file mode 100644 index 50ad4992f76..00000000000 --- a/packages/shared/src/components/spotlight/useCyclingPlaceholder.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { useEffect, useRef, useState } from 'react'; - -interface UseCyclingPlaceholderOptions { - /** Phrases to rotate between. Falls back to the first when paused. */ - phrases: readonly string[]; - /** Cycle interval in ms. */ - intervalMs?: number; - /** Pause cycling. The current phrase stays put. */ - paused?: boolean; -} - -/** - * Cycles through a curated set of placeholder phrases for input/trigger - * surfaces. Honors `prefers-reduced-motion: reduce` by freezing on the first - * phrase. Pure timer-based; no DOM dependencies, SSR-safe. - */ -export const useCyclingPlaceholder = ({ - phrases, - intervalMs = 3500, - paused = false, -}: UseCyclingPlaceholderOptions): string => { - const [index, setIndex] = useState(0); - const phrasesRef = useRef(phrases); - phrasesRef.current = phrases; - - useEffect(() => { - if (paused || phrases.length <= 1) { - return undefined; - } - if (typeof window === 'undefined') { - return undefined; - } - const reduced = - typeof window.matchMedia === 'function' && - window.matchMedia('(prefers-reduced-motion: reduce)').matches; - if (reduced) { - return undefined; - } - const id = window.setInterval(() => { - setIndex((prev) => (prev + 1) % phrasesRef.current.length); - }, intervalMs); - return () => window.clearInterval(id); - }, [paused, intervalMs, phrases.length]); - - return phrases[index] ?? phrases[0] ?? ''; -}; From 4c18925b08553e971249575b8db408ad92a4574d Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Tue, 5 May 2026 16:47:42 +0300 Subject: [PATCH 4/8] refactor(spotlight): community-first ordering, contextual chips, no jumpy rows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Drop the four header quick-action icons next to the search trigger. They added a parallel surface that competed with the modal and the scope chips inside; the trigger pill is enough. - Tabs/chips below the input now appear only when relevant: hidden on cold open, shown only when an All-scope query has multi-type results, and only for the types that actually returned hits (Apple Spotlight pattern). - Reorder filtered results community-first so people surface above the fold: People → Squads & sources → Tags → Posts → Actions → fallthrough. The old single "Search" group concatenation is gone. - Generic command groups (nav/create/settings/actions/help) collapse into one "Actions" section while filtering instead of five tiny groups. - Fix the keyboard-nav jumping: the row-entrance animation re-fired on every cmdk re-render (selection change, query change), causing rows to "jump" as the user pressed up/down. Removed it; the list-level scope crossfade is enough motion. - Delete unused SpotlightQuickActions component. Co-authored-by: Cursor --- .../components/layout/MainLayoutHeader.tsx | 2 - .../components/spotlight/ScopeBreadcrumbs.tsx | 20 +- .../src/components/spotlight/Spotlight.tsx | 173 +++++++++++++----- .../spotlight/SpotlightQuickActions.tsx | 85 --------- 4 files changed, 143 insertions(+), 137 deletions(-) delete mode 100644 packages/shared/src/components/spotlight/SpotlightQuickActions.tsx diff --git a/packages/shared/src/components/layout/MainLayoutHeader.tsx b/packages/shared/src/components/layout/MainLayoutHeader.tsx index 6e0737a2077..ec13ee1791c 100644 --- a/packages/shared/src/components/layout/MainLayoutHeader.tsx +++ b/packages/shared/src/components/layout/MainLayoutHeader.tsx @@ -17,7 +17,6 @@ import FeedNav from '../feeds/FeedNav'; import { MobileExploreHeader } from '../header/MobileExploreHeader'; import useActiveNav from '../../hooks/useActiveNav'; import { SpotlightTrigger } from '../spotlight/SpotlightTrigger'; -import { SpotlightQuickActions } from '../spotlight/SpotlightQuickActions'; export interface MainLayoutHeaderProps { hasBanner?: boolean; @@ -84,7 +83,6 @@ function MainLayoutHeader({ )} > -
); }, [shouldUseLoadedSettings, isSearchPage, hasBanner]); diff --git a/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx b/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx index cb9a5e873b4..a847271f9da 100644 --- a/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx +++ b/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx @@ -15,6 +15,9 @@ import { scopeMeta, scopeOrder, SpotlightScope } from './types'; interface ScopeBreadcrumbsProps { scope: SpotlightScope; + /** When `scope === All`, only chips for these scopes render (Apple-style + * context tabs). Pass an empty array to render no chips. */ + availableScopes?: Array>; onSelect: (scope: SpotlightScope) => void; onClear: () => void; } @@ -40,9 +43,10 @@ const scopeIcons: Record< */ export const ScopeBreadcrumbs = ({ scope, + availableScopes, onSelect, onClear, -}: ScopeBreadcrumbsProps): ReactElement => { +}: ScopeBreadcrumbsProps): ReactElement | null => { if (scope !== SpotlightScope.All) { const meta = scopeMeta[scope]; const Icon = scopeIcons[scope]; @@ -68,13 +72,23 @@ export const ScopeBreadcrumbs = ({ ); } + // In `All` scope only render chips for scopes we've been told are + // available (i.e. have current results). Stay quiet otherwise. + const chips = availableScopes ?? []; + if (chips.length === 0) { + return null; + } + + // Preserve canonical order regardless of the order callers pass. + const ordered = scopeOrder.filter((s) => chips.includes(s)); + return (
- {scopeOrder.map((s) => { + {ordered.map((s) => { const meta = scopeMeta[s]; const Icon = scopeIcons[s]; return ( diff --git a/packages/shared/src/components/spotlight/Spotlight.tsx b/packages/shared/src/components/spotlight/Spotlight.tsx index 08e98ddecc4..86f05229812 100644 --- a/packages/shared/src/components/spotlight/Spotlight.tsx +++ b/packages/shared/src/components/spotlight/Spotlight.tsx @@ -70,7 +70,7 @@ interface RowProps { } const rowBaseClass = - 'group/spotlight-row mx-2 flex cursor-pointer items-center gap-3 rounded-10 px-3 text-left motion-safe:animate-spotlight-row-in aria-disabled:cursor-not-allowed aria-disabled:opacity-40 data-[selected=true]:bg-surface-hover'; + 'group/spotlight-row mx-2 flex cursor-pointer items-center gap-3 rounded-10 px-3 text-left aria-disabled:cursor-not-allowed aria-disabled:opacity-40 data-[selected=true]:bg-surface-hover'; const TypedAvatar = ({ src, @@ -634,6 +634,60 @@ export const Spotlight = ({ .filter((cmd): cmd is SpotlightCommand => !!cmd); }, [recent, commandById, isFiltering]); + /** + * Single merged "Suggested actions" bucket when filtering. We keep the + * generic command rows (nav/create/settings/actions/help) under one + * heading at the end so entity results lead and actions trail — the + * order users requested. cmdk still does fuzzy filtering. + */ + const filterableActionCommands = useMemo(() => { + if (!isFiltering) { + return []; + } + return [ + ...grouped[SpotlightGroup.Navigate], + ...grouped[SpotlightGroup.Create], + ...grouped[SpotlightGroup.Settings], + ...grouped[SpotlightGroup.Actions], + ...grouped[SpotlightGroup.Help], + ]; + }, [grouped, isFiltering]); + + /** + * Which scope chips to surface below the input. Apple Spotlight pattern: + * tabs only appear when there's something to filter through (i.e. a + * query with multi-type results). Idle modal renders nothing here. + */ + const availableScopes = useMemo(() => { + if (scope !== SpotlightScope.All) { + return []; + } + if (!isFiltering) { + return []; + } + const out: Array> = []; + if (search.users.length > 0) { + out.push(SpotlightScope.People); + } + if (search.sources.length > 0) { + out.push(SpotlightScope.Squads); + } + if (search.tags.length > 0) { + out.push(SpotlightScope.Tags); + } + if (search.posts.length > 0) { + out.push(SpotlightScope.Posts); + } + return out; + }, [ + scope, + isFiltering, + search.users.length, + search.sources.length, + search.tags.length, + search.posts.length, + ]); + const handleSelect = useCallback( (command: SpotlightCommand) => { if (command.requiresAuth && !isLoggedIn) { @@ -882,13 +936,19 @@ export const Spotlight = ({ )}
-
- -
+ {(scope !== SpotlightScope.All || availableScopes.length > 0) && ( +
+ +
+ )} + {scope === SpotlightScope.All && availableScopes.length === 0 && ( +
+ )} )} @@ -997,65 +1057,84 @@ export const Spotlight = ({ className="px-4 py-8 text-center text-text-tertiary typo-footnote" aria-hidden > -

Type to search posts, squads, people, tags

-

or pick a scope above with Alt+1..4

+

Type to search posts, squads, people, tags…

)} {scope === SpotlightScope.All && isFiltering && - groupOrder - .filter( - (group) => - group !== SpotlightGroup.Suggested && - group !== SpotlightGroup.Recent && - group !== SpotlightGroup.Search, - ) - .map((group) => { - const items = grouped[group]; - if (!items.length) { - return null; - } - return ( - - {renderRows({ ...commonRowProps, commands: items })} - - ); - })} + search.isLoading && ( + + + + )} {scope === SpotlightScope.All && isFiltering && - search.isLoading && ( - - + !search.isLoading && + search.users.length > 0 && ( + + {renderRows({ ...commonRowProps, commands: search.users })} )} {scope === SpotlightScope.All && isFiltering && !search.isLoading && - (search.posts.length > 0 || - search.tags.length > 0 || - search.sources.length > 0 || - search.users.length > 0) && ( + search.sources.length > 0 && ( + {renderRows({ ...commonRowProps, commands: search.sources })} + + )} + + {scope === SpotlightScope.All && + isFiltering && + !search.isLoading && + search.tags.length > 0 && ( + + {renderRows({ ...commonRowProps, commands: search.tags })} + + )} + + {scope === SpotlightScope.All && + isFiltering && + !search.isLoading && + search.posts.length > 0 && ( + + {renderRows({ ...commonRowProps, commands: search.posts })} + + )} + + {scope === SpotlightScope.All && + isFiltering && + filterableActionCommands.length > 0 && ( + {renderRows({ ...commonRowProps, - commands: [ - ...search.posts, - ...search.tags, - ...search.sources, - ...search.users, - ], + commands: filterableActionCommands, })} )} diff --git a/packages/shared/src/components/spotlight/SpotlightQuickActions.tsx b/packages/shared/src/components/spotlight/SpotlightQuickActions.tsx deleted file mode 100644 index ed9b6b0a175..00000000000 --- a/packages/shared/src/components/spotlight/SpotlightQuickActions.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import type { ComponentType, ReactElement } from 'react'; -import React from 'react'; -import classNames from 'classnames'; -import { DocsIcon, HashtagIcon, SquadIcon, UserIcon } from '../icons'; -import type { IconProps } from '../Icon'; -import { IconSize } from '../Icon'; -import { Tooltip } from '../tooltip/Tooltip'; -import { isAppleDevice } from '../../lib/func'; -import { useSpotlight } from './useSpotlight'; -import { scopeMeta, SpotlightScope } from './types'; - -interface SpotlightQuickActionsProps { - className?: string; -} - -const altLabel = isAppleDevice() ? '⌥' : 'Alt'; - -const scopeIcons: Record< - Exclude, - ComponentType -> = { - [SpotlightScope.Posts]: DocsIcon, - [SpotlightScope.Squads]: SquadIcon, - [SpotlightScope.People]: UserIcon, - [SpotlightScope.Tags]: HashtagIcon, -}; - -/** - * Apple-Tahoe-style quick-action icon row that lives next to the trigger - * pill in the header. Each button opens Spotlight pre-scoped to one entity - * type and announces its `Alt+1..4` shortcut via tooltip. - */ -export const SpotlightQuickActions = ({ - className, -}: SpotlightQuickActionsProps): ReactElement => { - const { openWithScope } = useSpotlight(); - - return ( -
- {( - Object.entries(scopeMeta) as Array< - [ - Exclude, - (typeof scopeMeta)[Exclude], - ] - > - ).map(([scope, meta]) => { - const Icon = scopeIcons[scope]; - return ( - - {meta.triggerLabel}{' '} - - {altLabel}+{meta.shortcutIndex} - - - } - > - - - ); - })} -
- ); -}; - -export default SpotlightQuickActions; From d97dfacc05b2b01fdd0c11f748c109645e586d9b Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Wed, 6 May 2026 14:53:19 +0300 Subject: [PATCH 5/8] refactor(spotlight): strict filter, browse-all actions scope, polished chrome - Replace cmdk's default fuzzy filter with a strict word-prefix / substring scorer so action commands stop matching unrelated queries (typing "react" no longer surfaces "Open reading history"). Entity rows pass through via a passthrough keyword so backend ranking is preserved. Locked in via spotlightFilter.spec.ts. - Add an "Actions" scope (Apple-Finder "All Apps" equivalent) that renders the full command catalog grouped by category and filters with the same strict matcher. Maps to Alt+1. - Redesign filter chips: Slack/Apple-Tahoe pattern. Active scope moves inside the input as a removable pill (click or Backspace), other chips render as floating tags with hover lift, no busy purple state, no X buttons. - Trigger now matches the production SearchPanel field 1:1 (BaseField styling, AiIcon, KeyboardShortcutLabel) so the header is unchanged until the modal opens. - Help screen rebuilt with a search-bar-shaped back strip header and a properly scrollable body (flex-1 + min-h-0). Sticky-gap and double- scroll bugs gone. Returning to search re-focuses the input and re- anchors selection/scroll. - Recently used now sits above Suggested on cold open. - Dev-mode safety: GrowthBookProvider falls back to ready=true when experimentation features can't decrypt, preventing blank staging renders. Co-authored-by: Cursor --- .../src/components/GrowthBookProvider.tsx | 25 +- .../components/spotlight/ScopeBreadcrumbs.tsx | 67 +--- .../components/spotlight/ScopeFilterPill.tsx | 55 +++ .../src/components/spotlight/Spotlight.tsx | 362 +++++++++++------- .../components/spotlight/SpotlightContext.tsx | 7 +- .../components/spotlight/SpotlightTrigger.tsx | 39 +- .../components/spotlight/commands/search.ts | 5 +- .../spotlight/spotlightFilter.spec.ts | 62 +++ .../components/spotlight/spotlightFilter.ts | 68 ++++ .../shared/src/components/spotlight/types.ts | 31 +- scripts/typecheck-strict-changed.js | 7 + 11 files changed, 503 insertions(+), 225 deletions(-) create mode 100644 packages/shared/src/components/spotlight/ScopeFilterPill.tsx create mode 100644 packages/shared/src/components/spotlight/spotlightFilter.spec.ts create mode 100644 packages/shared/src/components/spotlight/spotlightFilter.ts diff --git a/packages/shared/src/components/GrowthBookProvider.tsx b/packages/shared/src/components/GrowthBookProvider.tsx index 998ff7dff3a..29db2592a8c 100644 --- a/packages/shared/src/components/GrowthBookProvider.tsx +++ b/packages/shared/src/components/GrowthBookProvider.tsx @@ -104,15 +104,34 @@ export const GrowthBookProvider = ({ ); useEffect(() => { - if (gb && experimentation?.features) { + if (!gb) { + return; + } + + if (experimentation?.features) { const currentFeats = gb.getFeatures?.(); // Do not update when the features are already set if (!currentFeats || !Object.keys(currentFeats).length) { gb.setFeatures?.(experimentation.features); - setReady(true); } + setReady(true); + return; + } + + // Boot resolved but features couldn't be decrypted (typically a dev env + // without a matching `NEXT_PUBLIC_EXPERIMENTATION_KEY`). Seed GrowthBook + // with an empty feature set so its own `ready` flag flips to true and + // consumers like MainLayout — which short-circuit to `null` while + // `growthbook.ready` is false — render with default flag values + // instead of leaving the app stuck on a blank page. + if (experimentation) { + const currentFeats = gb.getFeatures?.(); + if (!currentFeats || !Object.keys(currentFeats).length) { + gb.setFeatures?.({}); + } + setReady(true); } - }, [experimentation?.features, gb]); + }, [experimentation, experimentation?.features, gb]); useEffect(() => { callback.current = async (experiment, result) => { diff --git a/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx b/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx index a847271f9da..22b82988c6f 100644 --- a/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx +++ b/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx @@ -2,10 +2,10 @@ import type { ComponentType, ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; import { - ClearIcon, DocsIcon, HashtagIcon, SquadIcon, + TerminalIcon, UserIcon, } from '../icons'; import type { IconProps } from '../Icon'; @@ -15,19 +15,16 @@ import { scopeMeta, scopeOrder, SpotlightScope } from './types'; interface ScopeBreadcrumbsProps { scope: SpotlightScope; - /** When `scope === All`, only chips for these scopes render (Apple-style - * context tabs). Pass an empty array to render no chips. */ - availableScopes?: Array>; onSelect: (scope: SpotlightScope) => void; - onClear: () => void; } const altLabel = isAppleDevice() ? '⌥' : 'Alt'; -const scopeIcons: Record< +export const scopeIcons: Record< Exclude, ComponentType > = { + [SpotlightScope.Actions]: TerminalIcon, [SpotlightScope.Posts]: DocsIcon, [SpotlightScope.Squads]: SquadIcon, [SpotlightScope.People]: UserIcon, @@ -35,60 +32,33 @@ const scopeIcons: Record< }; /** - * Apple-Tahoe browse-mode equivalent shown directly under the search input. - * When `scope === All` we render four ghost chips advertising the available - * scopes. When a scope is active we render only that scope as a removable - * breadcrumb (cmdk-pages convention: "you are here, press Backspace to - * go back"). + * Filter chips shown directly under the search input. + * + * When `scope === All` we render every available filter as a calm, + * uniform tab bar — no "available vs dimmed" two-tone (it was confusing + * which were clickable). Picking one is a one-way move: the chip + * collapses into a pill inside the input field (Slack / Apple Spotlight + * Tahoe pattern) and this bar disappears, so we return null to keep the + * surface uncluttered. + * + * To leave the active scope the user clicks the in-input pill or hits + * Backspace on an empty input — both are wired up in `Spotlight.tsx`. */ export const ScopeBreadcrumbs = ({ scope, - availableScopes, onSelect, - onClear, }: ScopeBreadcrumbsProps): ReactElement | null => { if (scope !== SpotlightScope.All) { - const meta = scopeMeta[scope]; - const Icon = scopeIcons[scope]; - return ( -
- - - {meta.label} - - -
- ); - } - - // In `All` scope only render chips for scopes we've been told are - // available (i.e. have current results). Stay quiet otherwise. - const chips = availableScopes ?? []; - if (chips.length === 0) { return null; } - // Preserve canonical order regardless of the order callers pass. - const ordered = scopeOrder.filter((s) => chips.includes(s)); - return (
- {ordered.map((s) => { + {scopeOrder.map((s) => { const meta = scopeMeta[s]; const Icon = scopeIcons[s]; return ( @@ -100,8 +70,9 @@ export const ScopeBreadcrumbs = ({ onClick={() => onSelect(s)} title={`${meta.triggerLabel} (${altLabel}+${meta.shortcutIndex})`} className={classNames( - 'flex shrink-0 items-center gap-1.5 rounded-8 px-2 py-1 text-text-tertiary transition-colors typo-caption1', - 'hover:bg-surface-hover hover:text-text-primary', + 'flex h-8 shrink-0 items-center gap-1.5 rounded-10 border px-3 transition-all typo-callout', + 'border-border-subtlest-tertiary bg-surface-float text-text-tertiary', + 'hover:-translate-y-px hover:border-border-subtlest-secondary hover:bg-surface-hover hover:text-text-primary hover:shadow-2', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-cabbage-default focus-visible:ring-offset-1', )} > diff --git a/packages/shared/src/components/spotlight/ScopeFilterPill.tsx b/packages/shared/src/components/spotlight/ScopeFilterPill.tsx new file mode 100644 index 00000000000..f74cc1be29c --- /dev/null +++ b/packages/shared/src/components/spotlight/ScopeFilterPill.tsx @@ -0,0 +1,55 @@ +import type { ReactElement } from 'react'; +import React from 'react'; +import classNames from 'classnames'; +import { IconSize } from '../Icon'; +import { isAppleDevice } from '../../lib/func'; +import type { SpotlightScope } from './types'; +import { scopeMeta } from './types'; +import { scopeIcons } from './ScopeBreadcrumbs'; + +interface ScopeFilterPillProps { + scope: Exclude; + onRemove: () => void; +} + +const backspaceLabel = isAppleDevice() ? '⌫' : 'Backspace'; + +/** + * Slack/Apple-Tahoe-style search token shown inside the input field at + * the start of the query. Replaces the old "active scope chip with X + * button" treatment — clicking the pill OR pressing Backspace on an + * empty input removes it (the latter is wired up by the input's own + * `onKeyDown`, this component just exposes the click affordance). + * + * The pill is intentionally calm (subtle background, no accent color) + * so it reads as "context for the input" rather than as a destructive + * action. + */ +export const ScopeFilterPill = ({ + scope, + onRemove, +}: ScopeFilterPillProps): ReactElement => { + const meta = scopeMeta[scope]; + const Icon = scopeIcons[scope]; + + return ( + + ); +}; + +export default ScopeFilterPill; diff --git a/packages/shared/src/components/spotlight/Spotlight.tsx b/packages/shared/src/components/spotlight/Spotlight.tsx index 86f05229812..64aba513ce1 100644 --- a/packages/shared/src/components/spotlight/Spotlight.tsx +++ b/packages/shared/src/components/spotlight/Spotlight.tsx @@ -10,7 +10,7 @@ import classNames from 'classnames'; import { useRouter } from 'next/router'; import { Command } from 'cmdk'; import ReactModal from 'react-modal'; -import { ClearIcon, ClickIcon, SearchIcon } from '../icons'; +import { ArrowIcon, ClearIcon, ClickIcon, SearchIcon } from '../icons'; import { IconSize } from '../Icon'; import { Loader } from '../Loader'; import { ElementPlaceholder } from '../ElementPlaceholder'; @@ -40,7 +40,12 @@ import { useRecentCommands } from './useRecentCommands'; import { useSpotlightCommands } from './useSpotlightCommands'; import { useSpotlightSearchCommands } from './commands/search'; import { ScopeBreadcrumbs } from './ScopeBreadcrumbs'; +import { ScopeFilterPill } from './ScopeFilterPill'; import { useQuickKeyDispatch } from './useQuickKeyDispatch'; +import { + spotlightCommandFilter, + SPOTLIGHT_PASSTHROUGH_KEYWORD, +} from './spotlightFilter'; const groupHeadingClass = '[&_[cmdk-group-heading]]:sticky [&_[cmdk-group-heading]]:top-0 [&_[cmdk-group-heading]]:z-1 [&_[cmdk-group-heading]]:bg-background-default [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:pl-4 [&_[cmdk-group-heading]]:pr-3 [&_[cmdk-group-heading]]:pt-3 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:tracking-normal [&_[cmdk-group-heading]]:text-text-quaternary'; @@ -166,6 +171,12 @@ const SpotlightRow = ({ const value = `${command.title} ${command.subtitle ?? ''} ${( command.keywords ?? [] ).join(' ')}`.toLowerCase(); + // Backend-driven entity rows (posts/sources/users/tags) and the + // "see all in " CTA opt out of cmdk's local filter via this + // marker keyword. The API already ranked them — re-filtering locally + // would drop perfectly relevant results when the title doesn't share + // characters with the query (e.g. tag aliases, handle vs display name). + const cmdKeywords = meta ? [SPOTLIGHT_PASSTHROUGH_KEYWORD] : undefined; let leading: ReactElement; let body: ReactElement; @@ -240,6 +251,7 @@ const SpotlightRow = ({ return ( onSelect(command)} aria-keyshortcuts={command.shortcut} @@ -384,6 +396,7 @@ interface ShortcutsHelpScreenProps { cmdShortcutLabel: string; visibleGroupLabels: string[]; quickKeys: Array<{ key: string; label: string }>; + isMobile?: boolean; onClose: () => void; } @@ -391,8 +404,13 @@ const ShortcutsHelpScreen = ({ cmdShortcutLabel, visibleGroupLabels, quickKeys, + isMobile, onClose, }: ShortcutsHelpScreenProps): ReactElement => { + const backButtonRef = useRef(null); + useEffect(() => { + backButtonRef.current?.focus(); + }, []); const groupShortcuts = visibleGroupLabels.slice(0, 9).map((label, idx) => ({ combo: `${cmdShortcutLabel}+${idx + 1}`, label: `Jump to ${label}`, @@ -403,7 +421,7 @@ const ShortcutsHelpScreen = ({ { combo: '↑ ↓', label: 'Move selection between commands' }, { combo: 'Tab', label: 'Cycle to the next group' }, { combo: 'Shift+Tab', label: 'Cycle to the previous group' }, - { combo: 'Alt+1..4', label: 'Jump to a search scope' }, + { combo: 'Alt+1..5', label: 'Jump to a search scope' }, { combo: 'Backspace', label: 'Clear the active scope (when input empty)' }, { combo: 'Esc', label: 'Close Spotlight or cancel a confirm' }, ...groupShortcuts, @@ -412,59 +430,72 @@ const ShortcutsHelpScreen = ({
-
-

- Keyboard shortcuts -

- + +
+
    + {rows.map((row) => ( +
  • + {row.label} + + {row.combo} + +
    • + ))} +
+ {quickKeys.length > 0 && ( +
+

+ Quick Keys +

+

+ Type two letters then space to run instantly. +

+
    + {quickKeys.map((qk) => ( +
  • + {qk.label} + + {qk.key} + + space + +
    • + ))} +
+
+ )}
-
    - {rows.map((row) => ( -
  • - {row.label} - - {row.combo} - -
    • - ))} -
- {quickKeys.length > 0 && ( -
-

- Quick Keys -

-

- Type two letters then space to run instantly. -

-
    - {quickKeys.map((qk) => ( -
  • - {qk.label} - - {qk.key} - + space - -
    • - ))} -
-
- )}
); }; @@ -505,9 +536,11 @@ export const Spotlight = ({ const isLaptop = useViewSize(ViewSize.Laptop); const isMobile = !isLaptop; const inputRef = useRef(null); + const listRef = useRef(null); const [resultCount, setResultCount] = useState(null); const [showHelp, setShowHelp] = useState(false); const [groupCursor, setGroupCursor] = useState(0); + const [cmdValue, setCmdValue] = useState(''); const handleShowShortcutsHelp = useCallback(() => { setShowHelp(true); showShortcutsHelp(); @@ -591,6 +624,47 @@ export const Spotlight = ({ onQueryChange?.(query); }, [query, onQueryChange]); + // When the query changes or async search results land, anchor the list + // back to the top AND move cmdk's selection onto the new first item. + // Without this: + // - the browser's default `overflow-anchor: auto` keeps the previously- + // selected (synchronous) Action row in view, scrolling People / Squads + // / Tags / Posts results below the fold the instant they arrive; + // - cmdk preserves selection on the old Action row, so arrow keys feel + // "stuck at the bottom" while the visible top is the entity hits. + useEffect(() => { + if (showHelp) { + return; + } + if (!listRef.current) { + return; + } + listRef.current.scrollTop = 0; + const firstItem = listRef.current.querySelector('[cmdk-item]'); + const nextValue = firstItem?.getAttribute('data-value') ?? ''; + setCmdValue(nextValue); + }, [ + query, + scope, + showHelp, + search.isLoading, + search.users.length, + search.sources.length, + search.tags.length, + search.posts.length, + ]); + + // When the user dismisses the shortcuts help screen, the input wrapper + // re-mounts and steals focus from whatever was focused. Pull focus + // back to the search input so they can keep typing without an extra + // click — matches Linear / Raycast behavior. + useEffect(() => { + if (showHelp) { + return; + } + inputRef.current?.focus(); + }, [showHelp]); + const commandById = useMemo(() => { const map = new Map(); commands.forEach((cmd) => map.set(cmd.id, cmd)); @@ -653,41 +727,24 @@ export const Spotlight = ({ ]; }, [grouped, isFiltering]); + /** + * Categories rendered by the Actions browse-mode (Apple-Finder + * equivalent). Order mirrors `groupOrder` so the list matches the + * mental model used elsewhere in the palette. + */ + const actionScopeGroups: SpotlightGroup[] = [ + SpotlightGroup.Navigate, + SpotlightGroup.Create, + SpotlightGroup.Settings, + SpotlightGroup.Actions, + SpotlightGroup.Help, + ]; + /** * Which scope chips to surface below the input. Apple Spotlight pattern: * tabs only appear when there's something to filter through (i.e. a * query with multi-type results). Idle modal renders nothing here. */ - const availableScopes = useMemo(() => { - if (scope !== SpotlightScope.All) { - return []; - } - if (!isFiltering) { - return []; - } - const out: Array> = []; - if (search.users.length > 0) { - out.push(SpotlightScope.People); - } - if (search.sources.length > 0) { - out.push(SpotlightScope.Squads); - } - if (search.tags.length > 0) { - out.push(SpotlightScope.Tags); - } - if (search.posts.length > 0) { - out.push(SpotlightScope.Posts); - } - return out; - }, [ - scope, - isFiltering, - search.users.length, - search.sources.length, - search.tags.length, - search.posts.length, - ]); - const handleSelect = useCallback( (command: SpotlightCommand) => { if (command.requiresAuth && !isLoggedIn) { @@ -757,12 +814,12 @@ export const Spotlight = ({ return filterGroups; } const out: SpotlightGroup[] = []; - if (suggested.length > 0) { - out.push(SpotlightGroup.Suggested); - } if (recentCommands.length > 0) { out.push(SpotlightGroup.Recent); } + if (suggested.length > 0) { + out.push(SpotlightGroup.Suggested); + } groupOrder.forEach((group) => { if ( group === SpotlightGroup.Suggested || @@ -817,6 +874,9 @@ export const Spotlight = ({ label="Spotlight command palette" loop shouldFilter={!pendingCommand} + filter={spotlightCommandFilter} + value={cmdValue} + onValueChange={setCmdValue} className={classNames( 'flex flex-col overflow-hidden', isMobile @@ -841,7 +901,7 @@ export const Spotlight = ({ if ( event.altKey && event.key >= '1' && - event.key <= '4' && + event.key <= '5' && !pendingConfirmId ) { const idx = Number(event.key) - 1; @@ -878,24 +938,27 @@ export const Spotlight = ({ } }} > - {!pendingCommand && ( + {!pendingCommand && !showHelp && ( <>
+ {scope !== SpotlightScope.All && ( + + )} )}
- {(scope !== SpotlightScope.All || availableScopes.length > 0) && ( -
- -
- )} - {scope === SpotlightScope.All && availableScopes.length === 0 && ( -
+ {scope === SpotlightScope.All && ( + )} )} @@ -971,6 +1024,7 @@ export const Spotlight = ({ Boolean(cmd.quickKey), ) .map((cmd) => ({ key: cmd.quickKey, label: cmd.title }))} + isMobile={isMobile} onClose={() => setShowHelp(false)} /> )} @@ -979,14 +1033,12 @@ export const Spotlight = ({ { - // No-op: cmdk handles selection sync automatically. - }} ref={(node) => { + listRef.current = node; if (!node) { setResultCount(null); return; @@ -995,48 +1047,59 @@ export const Spotlight = ({ setResultCount(items.length); }} > - {scope !== SpotlightScope.All && search.isLoading && ( - - - - )} - - {scope !== SpotlightScope.All && !search.isLoading && ( - - {renderRows({ - ...commonRowProps, - commands: (() => { - if (scope === SpotlightScope.Posts) { - return search.posts; - } - if (scope === SpotlightScope.Squads) { - return search.sources; - } - if (scope === SpotlightScope.People) { - return search.users; - } - return search.tags; - })(), - })} - - )} + {scope !== SpotlightScope.All && + scope !== SpotlightScope.Actions && + search.isLoading && ( + + + + )} - {scope === SpotlightScope.All && - !isFiltering && - suggested.length > 0 && ( + {scope !== SpotlightScope.All && + scope !== SpotlightScope.Actions && + !search.isLoading && ( - {renderRows({ ...commonRowProps, commands: suggested })} + {renderRows({ + ...commonRowProps, + commands: (() => { + if (scope === SpotlightScope.Posts) { + return search.posts; + } + if (scope === SpotlightScope.Squads) { + return search.sources; + } + if (scope === SpotlightScope.People) { + return search.users; + } + return search.tags; + })(), + })} )} + {/* + Actions browse-mode (Apple-Finder "All Apps" equivalent). + Renders every visible action command grouped by category; + cmdk's strict filter narrows the list as the user types. + Empty query = full catalog of actions, exactly what the + user asked for ("see all the options in the product"). + */} + {scope === SpotlightScope.Actions && + actionScopeGroups.map((group) => ( + + {renderRows({ ...commonRowProps, commands: grouped[group] })} + + ))} + {scope === SpotlightScope.All && !isFiltering && recentCommands.length > 0 && ( @@ -1049,6 +1112,18 @@ export const Spotlight = ({ )} + {scope === SpotlightScope.All && + !isFiltering && + suggested.length > 0 && ( + + {renderRows({ ...commonRowProps, commands: suggested })} + + )} + {scope === SpotlightScope.All && !isFiltering && suggested.length === 0 && @@ -1057,7 +1132,10 @@ export const Spotlight = ({ className="px-4 py-8 text-center text-text-tertiary typo-footnote" aria-hidden > -

Type to search posts, squads, people, tags…

+

+ Type to search posts, squads, people, tags, or browse all + actions. +

)} diff --git a/packages/shared/src/components/spotlight/SpotlightContext.tsx b/packages/shared/src/components/spotlight/SpotlightContext.tsx index a195b9e3f06..7146d4df0ff 100644 --- a/packages/shared/src/components/spotlight/SpotlightContext.tsx +++ b/packages/shared/src/components/spotlight/SpotlightContext.tsx @@ -89,7 +89,10 @@ export const SpotlightProvider = ({ }, []); const pushScope = useCallback((next: SpotlightScope) => { - setQueryState(''); + // Keep the active query when narrowing scope. The chip is a filter, not + // a fresh search — clearing the query here would empty the entity lists + // (search hooks return nothing without a query) and the user would see + // a blank list right after clicking the very chip that promised matches. setPages((prev) => { if (next === SpotlightScope.All) { return []; @@ -102,12 +105,10 @@ export const SpotlightProvider = ({ }, []); const popScope = useCallback(() => { - setQueryState(''); setPages((prev) => prev.slice(0, -1)); }, []); const clearScope = useCallback(() => { - setQueryState(''); setPages([]); }, []); diff --git a/packages/shared/src/components/spotlight/SpotlightTrigger.tsx b/packages/shared/src/components/spotlight/SpotlightTrigger.tsx index f8c0aab145f..78a19eb6963 100644 --- a/packages/shared/src/components/spotlight/SpotlightTrigger.tsx +++ b/packages/shared/src/components/spotlight/SpotlightTrigger.tsx @@ -1,9 +1,10 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; -import { SearchIcon } from '../icons'; +import { AiIcon, SearchIcon } from '../icons'; import { IconSize } from '../Icon'; import { isAppleDevice } from '../../lib/func'; +import { KeyboadShortcutLabel } from '../KeyboardShortcutLabel'; import { useSpotlight } from './useSpotlight'; import { ViewSize, useViewSize } from '../../hooks'; @@ -11,12 +12,13 @@ interface SpotlightTriggerProps { className?: string; } -const cmdLabel = isAppleDevice() ? '⌘' : 'Ctrl'; +const shortcutKeys = [isAppleDevice() ? '⌘' : 'Ctrl', 'K']; /** - * Header pill that lives where the old SearchPanel input used to. Looks - * like a search bar but is a single button - clicking (or focusing+Enter) - * opens the global Spotlight modal. + * Header pill that lives where the old SearchPanel input used to. The + * resting visual is a 1:1 match for the production SearchPanelInput + * (`BaseField` + `AiIcon` + `KeyboadShortcutLabel`) so users see no + * difference until they actually click and the Spotlight modal opens. */ export const SpotlightTrigger = ({ className, @@ -29,7 +31,7 @@ export const SpotlightTrigger = ({ ); }; diff --git a/packages/shared/src/components/spotlight/commands/search.ts b/packages/shared/src/components/spotlight/commands/search.ts index 9d37d43e280..d56a0063291 100644 --- a/packages/shared/src/components/spotlight/commands/search.ts +++ b/packages/shared/src/components/spotlight/commands/search.ts @@ -117,7 +117,10 @@ const buildUserCommand = ( }, }); -type SeeAllScope = Exclude; +type SeeAllScope = Exclude< + SpotlightScope, + SpotlightScope.All | SpotlightScope.Actions +>; const seeAllProvider: Record = { [SpotlightScope.Posts]: SearchProviderEnum.Posts, diff --git a/packages/shared/src/components/spotlight/spotlightFilter.spec.ts b/packages/shared/src/components/spotlight/spotlightFilter.spec.ts new file mode 100644 index 00000000000..3bf918d314c --- /dev/null +++ b/packages/shared/src/components/spotlight/spotlightFilter.spec.ts @@ -0,0 +1,62 @@ +import { + scoreActionMatch, + spotlightCommandFilter, + SPOTLIGHT_PASSTHROUGH_KEYWORD, +} from './spotlightFilter'; + +describe('scoreActionMatch', () => { + it('returns 1 for an empty query (every row visible while idle)', () => { + expect(scoreActionMatch('go to bookmarks saved', '')).toBe(1); + }); + + it('scores a full prefix match the highest', () => { + expect(scoreActionMatch('go to bookmarks', 'go')).toBe(1); + }); + + it('scores a word-prefix match below a full prefix', () => { + expect(scoreActionMatch('go to bookmarks saved', 'book')).toBe(0.9); + }); + + it('scores a substring match below a word-prefix', () => { + expect(scoreActionMatch('switch to list layout', 'ist')).toBe(0.7); + }); + + it('matches multi-word queries when every token is a substring', () => { + expect(scoreActionMatch('go to settings preferences account', 'set acc')) + .toBeGreaterThan(0); + }); + + it('rejects fuzzy false-positives that the cmdk default would accept', () => { + expect(scoreActionMatch('go to history reading history visited', 'react')) + .toBe(0); + expect(scoreActionMatch('switch to list layout view density', 'react')) + .toBe(0); + expect(scoreActionMatch('open profile details settings preferences', 'react')) + .toBe(0); + }); + + it('still matches a real "react" query against a real "react" target', () => { + expect(scoreActionMatch('react typescript javascript', 'react')).toBe(1); + }); +}); + +describe('spotlightCommandFilter', () => { + it('lets passthrough rows (entity hits) through unconditionally', () => { + expect( + spotlightCommandFilter( + 'tomer aberbach @tomer', + 'react', + [SPOTLIGHT_PASSTHROUGH_KEYWORD], + ), + ).toBe(1); + }); + + it('still applies strict matching to non-passthrough rows', () => { + expect( + spotlightCommandFilter('go to history reading history', 'react'), + ).toBe(0); + expect( + spotlightCommandFilter('go to bookmarks saved', 'book'), + ).toBeGreaterThan(0); + }); +}); diff --git a/packages/shared/src/components/spotlight/spotlightFilter.ts b/packages/shared/src/components/spotlight/spotlightFilter.ts new file mode 100644 index 00000000000..b894a8657f6 --- /dev/null +++ b/packages/shared/src/components/spotlight/spotlightFilter.ts @@ -0,0 +1,68 @@ +/** + * Strict, predictable Spotlight ranker. Replaces cmdk's default fuzzy + * `command-score` filter, which over-matches generic action commands + * (e.g. typing "react" pulled in "Open reading history" because it + * accepts non-contiguous character matches). + * + * Inspired by Linear / Raycast: word-prefix > prefix > substring; nothing + * else makes the cut. API-backed entity rows opt out via the + * {@link SPOTLIGHT_PASSTHROUGH_KEYWORD} marker so the backend's relevance + * is never second-guessed locally. + */ + +export const SPOTLIGHT_PASSTHROUGH_KEYWORD = '__spotlight_passthrough__'; + +const WORD_BOUNDARY = /[\s/_\-:]+/; + +/** + * Standalone match scorer reusable outside cmdk (e.g. to count how many + * actions a query matches when deciding whether to highlight the + * "Actions" scope chip). + */ +export const scoreActionMatch = (value: string, search: string): number => { + const target = value.toLowerCase(); + const query = search.toLowerCase().trim(); + + if (!query) { + return 1; + } + + if (target.startsWith(query)) { + return 1; + } + + const words = target.split(WORD_BOUNDARY).filter(Boolean); + if (words.some((word) => word.startsWith(query))) { + return 0.9; + } + + if (target.includes(query)) { + return 0.7; + } + + const queryTokens = query.split(WORD_BOUNDARY).filter(Boolean); + if ( + queryTokens.length > 1 && + queryTokens.every((token) => target.includes(token)) + ) { + return 0.5; + } + + return 0; +}; + +/** + * cmdk filter signature: `(value, search, keywords?) => number`. + * Returns 0 to hide the row, > 0 to include it (higher = better match). + */ +export const spotlightCommandFilter = ( + value: string, + search: string, + keywords?: string[], +): number => { + if (keywords?.includes(SPOTLIGHT_PASSTHROUGH_KEYWORD)) { + return 1; + } + + return scoreActionMatch(value, search); +}; diff --git a/packages/shared/src/components/spotlight/types.ts b/packages/shared/src/components/spotlight/types.ts index 0ea978a33c1..d5767654c85 100644 --- a/packages/shared/src/components/spotlight/types.ts +++ b/packages/shared/src/components/spotlight/types.ts @@ -37,8 +37,8 @@ export const groupLabels: Record = { }; export const groupOrder: SpotlightGroup[] = [ - SpotlightGroup.Suggested, SpotlightGroup.Recent, + SpotlightGroup.Suggested, SpotlightGroup.Navigate, SpotlightGroup.Create, SpotlightGroup.Settings, @@ -65,7 +65,13 @@ export type SpotlightCommandMeta = | { kind: 'source'; image?: string; handle?: string } | { kind: 'user'; image?: string; handle?: string } | { kind: 'tag'; tagName: string } - | { kind: 'see-all'; scope: Exclude }; + | { + kind: 'see-all'; + scope: Exclude< + SpotlightScope, + SpotlightScope.All | SpotlightScope.Actions + >; + }; export interface SpotlightCommand { id: string; @@ -107,6 +113,7 @@ export interface SpotlightCommand { */ export enum SpotlightScope { All = 'all', + Actions = 'actions', Posts = 'posts', Squads = 'squads', People = 'people', @@ -119,12 +126,14 @@ export interface ScopeMetaEntry { triggerLabel: string; /** Used as Command.Input placeholder while the scope is active. */ placeholder: string; - /** Single-letter index for Alt+1..4 dispatch (1-based). */ + /** Single-letter index for Alt+1..N dispatch (1-based). */ shortcutIndex: number; - searchProvider: SearchProviderEnum; + /** Optional — only entity scopes hit a backend search provider. */ + searchProvider?: SearchProviderEnum; } export const scopeOrder: Array> = [ + SpotlightScope.Actions, SpotlightScope.Posts, SpotlightScope.Squads, SpotlightScope.People, @@ -135,32 +144,38 @@ export const scopeMeta: Record< Exclude, ScopeMetaEntry > = { + [SpotlightScope.Actions]: { + label: 'Actions', + triggerLabel: 'Browse all actions', + placeholder: 'Browse actions and settings...', + shortcutIndex: 1, + }, [SpotlightScope.Posts]: { label: 'Posts', triggerLabel: 'Search posts', placeholder: 'Search posts...', - shortcutIndex: 1, + shortcutIndex: 2, searchProvider: SearchProviderEnum.Posts, }, [SpotlightScope.Squads]: { label: 'Squads', triggerLabel: 'Search squads', placeholder: 'Search squads...', - shortcutIndex: 2, + shortcutIndex: 3, searchProvider: SearchProviderEnum.Sources, }, [SpotlightScope.People]: { label: 'People', triggerLabel: 'Search people', placeholder: 'Search people...', - shortcutIndex: 3, + shortcutIndex: 4, searchProvider: SearchProviderEnum.Users, }, [SpotlightScope.Tags]: { label: 'Tags', triggerLabel: 'Search tags', placeholder: 'Search tags...', - shortcutIndex: 4, + shortcutIndex: 5, searchProvider: SearchProviderEnum.Tags, }, }; diff --git a/scripts/typecheck-strict-changed.js b/scripts/typecheck-strict-changed.js index cfddc1fca97..e7ad31bb192 100644 --- a/scripts/typecheck-strict-changed.js +++ b/scripts/typecheck-strict-changed.js @@ -76,6 +76,13 @@ const strictSkipList = new Set([ // declaration file under strict mode. Pre-existing on the // smart-composer base; tracked for cleanup. 'packages/shared/src/lib/featureManagement.ts', + // GrowthBookProvider.tsx imports `@growthbook/growthbook-react` and + // `@growthbook/growthbook` which ship without bundled `.d.ts` files, + // so strict mode reports implicit-any noise that pre-dates this branch. + // Touched here only to unblock dev environments that can't decrypt the + // boot experimentation payload (no key) — see the dev-fallback branch in + // the GrowthBookProvider effect. + 'packages/shared/src/components/GrowthBookProvider.tsx', ]); const changedFiles = getChangedTypescriptFiles().filter( From 1ab6a8a57ac4fe5e6246879ca6c421e305b589aa Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Wed, 6 May 2026 15:03:18 +0300 Subject: [PATCH 6/8] fix(spotlight): apply prettier formatting to spotlightFilter spec Co-authored-by: Cursor --- .../spotlight/spotlightFilter.spec.ts | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/shared/src/components/spotlight/spotlightFilter.spec.ts b/packages/shared/src/components/spotlight/spotlightFilter.spec.ts index 3bf918d314c..9a7a63d3ff9 100644 --- a/packages/shared/src/components/spotlight/spotlightFilter.spec.ts +++ b/packages/shared/src/components/spotlight/spotlightFilter.spec.ts @@ -22,17 +22,21 @@ describe('scoreActionMatch', () => { }); it('matches multi-word queries when every token is a substring', () => { - expect(scoreActionMatch('go to settings preferences account', 'set acc')) - .toBeGreaterThan(0); + expect( + scoreActionMatch('go to settings preferences account', 'set acc'), + ).toBeGreaterThan(0); }); it('rejects fuzzy false-positives that the cmdk default would accept', () => { - expect(scoreActionMatch('go to history reading history visited', 'react')) - .toBe(0); - expect(scoreActionMatch('switch to list layout view density', 'react')) - .toBe(0); - expect(scoreActionMatch('open profile details settings preferences', 'react')) - .toBe(0); + expect( + scoreActionMatch('go to history reading history visited', 'react'), + ).toBe(0); + expect( + scoreActionMatch('switch to list layout view density', 'react'), + ).toBe(0); + expect( + scoreActionMatch('open profile details settings preferences', 'react'), + ).toBe(0); }); it('still matches a real "react" query against a real "react" target', () => { @@ -43,11 +47,9 @@ describe('scoreActionMatch', () => { describe('spotlightCommandFilter', () => { it('lets passthrough rows (entity hits) through unconditionally', () => { expect( - spotlightCommandFilter( - 'tomer aberbach @tomer', - 'react', - [SPOTLIGHT_PASSTHROUGH_KEYWORD], - ), + spotlightCommandFilter('tomer aberbach @tomer', 'react', [ + SPOTLIGHT_PASSTHROUGH_KEYWORD, + ]), ).toBe(1); }); From e82f862b23f5d2e0728ebdf413d9f519bec6ca9d Mon Sep 17 00:00:00 2001 From: Tsahi Matsliah Date: Thu, 7 May 2026 20:13:37 +0300 Subject: [PATCH 7/8] fix(spotlight): clip oversized result rows so the list never scrolls horizontally Co-authored-by: Cursor --- packages/shared/src/components/spotlight/Spotlight.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/shared/src/components/spotlight/Spotlight.tsx b/packages/shared/src/components/spotlight/Spotlight.tsx index 64aba513ce1..23926a68438 100644 --- a/packages/shared/src/components/spotlight/Spotlight.tsx +++ b/packages/shared/src/components/spotlight/Spotlight.tsx @@ -75,7 +75,7 @@ interface RowProps { } const rowBaseClass = - 'group/spotlight-row mx-2 flex cursor-pointer items-center gap-3 rounded-10 px-3 text-left aria-disabled:cursor-not-allowed aria-disabled:opacity-40 data-[selected=true]:bg-surface-hover'; + 'group/spotlight-row mx-2 flex min-w-0 cursor-pointer items-center gap-3 overflow-hidden rounded-10 px-3 text-left aria-disabled:cursor-not-allowed aria-disabled:opacity-40 data-[selected=true]:bg-surface-hover'; const TypedAvatar = ({ src, @@ -1033,7 +1033,7 @@ export const Spotlight = ({ Date: Thu, 7 May 2026 20:22:40 +0300 Subject: [PATCH 8/8] fix(spotlight): cap header trigger width to match production search field Co-authored-by: Cursor --- .../shared/src/components/spotlight/SpotlightTrigger.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/shared/src/components/spotlight/SpotlightTrigger.tsx b/packages/shared/src/components/spotlight/SpotlightTrigger.tsx index 78a19eb6963..29964f7bed6 100644 --- a/packages/shared/src/components/spotlight/SpotlightTrigger.tsx +++ b/packages/shared/src/components/spotlight/SpotlightTrigger.tsx @@ -51,10 +51,15 @@ export const SpotlightTrigger = ({ aria-keyshortcuts={`${shortcutKeys.join('+')}`} onClick={open} className={classNames( + // Sizing, color, and shape match the production SearchPanel field. 'relative flex h-12 w-full items-center overflow-hidden rounded-12 border border-transparent bg-background-subtle px-3 text-left transition-colors', 'hover:bg-surface-hover', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-cabbage-default focus-visible:ring-offset-2', - 'laptop:py-1 laptop:backdrop-blur-[3.75rem]', + // Same compact desktop width used by SearchPanelInput in production + // (26.25rem default, capped at 29.5rem on laptop and 35rem on + // laptopL). Without this the trigger stretches edge-to-edge, + // which read as a different field even though the styling matched. + 'laptop:w-[26.25rem] laptop:max-w-[29.5rem] laptop:py-1 laptop:backdrop-blur-[3.75rem] laptopL:max-w-[35rem]', className, )} >