Function SearchControlHeader

packages/shared/src/components/layout/common.tsx:84–352

({
  feedName,
  algoState: [selectedAlgo, setSelectedAlgo],
  chips,
}: SearchControlHeaderProps)

export const DEFAULT_ALGORITHM_INDEX = 0;

export const SearchControlHeader = ({
  feedName,
  algoState: [selectedAlgo, setSelectedAlgo],
  chips,
}: SearchControlHeaderProps): ReactElement | null => {
  const [selectedPeriod, setSelectedPeriod] = useQueryState({
    key: [QueryStateKeys.FeedPeriod],
    defaultValue: 0,
  });
  const { user } = useAuthContext();
  const { logEvent } = useLogContext();
  const { sortingEnabled } = useContext(SettingsContext);
  const { isUpvoted, isSortableFeed } = useFeedName({ feedName });
  const isLaptop = useViewSize(ViewSize.Laptop);
  const isMobile = useViewSize(ViewSize.MobileL);
  const isTablet = useViewSize(ViewSize.Tablet);
  const { isV2 } = useLayoutVariant();
  const isV2Strip = isV2;
  const { streak, isLoading, isStreaksEnabled } = useReadingStreak();
  const { checkHasCompleted, completeAction, isActionsFetched } = useActions();
  const browserName = getCurrentBrowserName();
  const isEdge = browserName === BrowserName.Edge;
  const feedsWithActions = [
    SharedFeedPage.MyFeed,
    SharedFeedPage.Custom,
    SharedFeedPage.CustomForm,
  ];
  const hasFeedActions = feedsWithActions.includes(feedName as SharedFeedPage);
  const hasDismissedInstallExtension = checkHasCompleted(
    ActionType.DismissInstallExtension,
  );
  const canInstallExtension =
    !checkIsExtension() &&
    isExtensionCapableBrowser() &&
    isNullOrUndefined(user?.flags?.lastExtensionUse);
  const shouldEvaluateInstallExtensionPrompt =
    hasFeedActions &&
    isActionsFetched &&
    canInstallExtension &&
    !hasDismissedInstallExtension;
  const hasIntroQuests = useHasIntroQuests({
    shouldEvaluate: shouldEvaluateInstallExtensionPrompt,
  });

  if (isMobile) {
    return null;
  }

  // v2 compact ghost styles for the page-header action strip: 32px
  // square icon buttons + 32px-tall text buttons, no border/bg, with
  // a surface-hover affordance on hover.
  const compactIconButtonClassName =
    '!size-8 !rounded-10 !border-transparent !bg-transparent !p-0 hover:!bg-surface-hover';
  const compactTextButtonClassName =
    '!h-8 !rounded-10 !border-transparent !bg-transparent !px-3 hover:!bg-surface-hover';

  const dropdownProps: Partial<DropdownProps> = {
    className: {