+
),
[shouldUseLoadedSettings, isSearchPage, hasBanner],
);
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
- {
- 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 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
- {
- logEvent({
- event_name: LogEvent.SubmitSearch,
- extra: JSON.stringify({
- query,
- provider: SearchProviderEnum.Posts,
- filters: { time, contentCuration: contentCurationFilter },
- }),
- });
-
- search({
- provider: SearchProviderEnum.Posts,
- query,
- });
- }}
- >
-
-
-
- See more posts
-
-
-
- );
-};
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/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
-
-
- )}
-
- {
- 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
-
- - {title} - -
-
- {suggestions?.hits?.map((suggestion) => {
- return (
- - - {title} - -
-
-
- );
-};
diff --git a/packages/shared/src/components/search/SearchPanel/index.ts b/packages/shared/src/components/search/SearchPanel/index.ts
index f6e12125fd6..d0b93236650 100644
--- a/packages/shared/src/components/search/SearchPanel/index.ts
+++ b/packages/shared/src/components/search/SearchPanel/index.ts
@@ -1,2 +1 @@
-export * from './SearchPanel';
export * from './common';
diff --git a/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx b/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx
new file mode 100644
index 00000000000..22b82988c6f
--- /dev/null
+++ b/packages/shared/src/components/spotlight/ScopeBreadcrumbs.tsx
@@ -0,0 +1,88 @@
+import type { ComponentType, ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+ DocsIcon,
+ HashtagIcon,
+ SquadIcon,
+ TerminalIcon,
+ 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;
+}
+
+const altLabel = isAppleDevice() ? '⌥' : 'Alt';
+
+export const scopeIcons: Record<
+ Exclude
-
- - {title} - -
-
- - - {title} - -
-
- {suggestions?.hits?.map((suggestion) => {
- return (
- {
- event.preventDefault();
-
- onSuggestionClick(suggestion);
- }}
- />
- );
- })}
-
-
+ {Array.from({ length: count }).map((_, i) => (
+
+);
+
+interface ConfirmRowProps {
+ command: SpotlightCommand;
+ onCancel: () => void;
+ onConfirm: () => void;
+}
+
+const DestructiveConfirm = ({
+ command,
+ onCancel,
+ onConfirm,
+}: ConfirmRowProps): ReactElement => (
+
+
+ ))}
+
+
+);
+
+interface SpotlightDialogProps {
+ isOpen: boolean;
+ onClose: () => void;
+ /** Optional analytics callback. Injected by Phase 1's wiring. */
+ onCommandRun?: (command: SpotlightCommand) => void;
+ /** Fires when the user opens via Cmd+K. */
+ onOpenViaShortcut?: () => void;
+}
+
+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,
+ onCommandRun,
+ onOpenViaShortcut,
+}: SpotlightDialogProps): ReactElement | null => {
+ const router = useRouter();
+ const { isLoggedIn, showLogin } = useAuthContext();
+ const isLaptop = useViewSize(ViewSize.Laptop);
+ const isMobile = !isLaptop;
+ const inputRef = useRef+ {command.id === 'actions.logout' + ? 'Log out of daily.dev?' + : `Confirm: ${command.title}`} +
++ Press Enter again to confirm, or Esc to cancel. +
+
+
+
+
+ + Spotlight +
+
+ {resultCount !== null
+ ? `${resultCount} ${resultCount === 1 ? 'result' : 'results'}`
+ : ''}
+
+
+ {
+ if (
+ event.key === 'Backspace' &&
+ query.length === 0 &&
+ scope !== SpotlightScope.All
+ ) {
+ event.preventDefault();
+ popScope();
+ return;
+ }
+ if (
+ event.key === 'Enter' &&
+ isFiltering &&
+ resultCount === 0
+ ) {
+ event.preventDefault();
+ handleFallthroughEnter();
+ }
+ }}
+ />
+ {search.isLoading &&
+ {scope === SpotlightScope.All && (
+
+
+ )}
+
+ {scope === SpotlightScope.All &&
+ isFiltering &&
+ search.isLoading && (
+ + Type to search posts, squads, people, tags, or browse all + actions. +
++ {trimmedQuery + ? `Nothing matches "${trimmedQuery}".` + : 'No commands available.'} +
++ Try a different word, or search posts on the web. +
+ {trimmedQuery && ( + } + > + Search posts for “{trimmedQuery}” + + )} +
+
+
+