Function EditTag

packages/shared/src/components/onboarding/EditTag.tsx:31–144

({
  feedSettings,
  userId,
  headline,
  requiredTags = REQUIRED_TAGS_THRESHOLD,
  hidePreview,
  featuredTags,
}: EditTagProps)

  featuredTags?: string[];
}
export const EditTag = ({
  feedSettings,
  userId,
  headline,
  requiredTags = REQUIRED_TAGS_THRESHOLD,
  hidePreview,
  featuredTags,
}: EditTagProps): ReactElement => {
  const isMobile = useViewSize(ViewSize.MobileL);
  const [isPreviewVisible, setPreviewVisible] = useState(false);
  const tagsCount = feedSettings?.includeTags?.length || 0;
  const isPreviewEnabled = tagsCount >= requiredTags;

  const [searchQuery, setSearchQuery] = useState<string>('');
  const [onSearch] = useDebounceFn((value?: string) => {
    setSearchQuery(value ?? '');
  }, 350);

  const { data: searchResult } = useTagSearch({
    value: searchQuery,
    origin: Origin.EditTag,
  });
  const searchTags = searchResult?.searchTags.tags || [];

  const { value: showPersonas } = useConditionalFeature({
    feature: featureOnboardingPersonas,
    shouldEvaluate: !!feedSettings,
  });

  const tagsRef = useRef<HTMLDivElement>(null);
  const hasScrolledToTagsRef = useRef(false);

  useEffect(() => {
    if (!isMobile || !showPersonas) {
      return undefined;
    }
    return subscribePersonaSelection(() => {
      if (hasScrolledToTagsRef.current) {
        return;
      }
      hasScrolledToTagsRef.current = true;
      tagsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
  }, [isMobile, showPersonas]);

  // When the persona feature is on, override any caller-supplied headline
  // (Freyja funnel JSON) with the persona-tuned copy.
  // TODO: drop this override once Freyja's persona-experiment variant ships
  // the new headline directly.
  const resolvedHeadline = showPersonas
    ? 'Tune your feed'
    : headline || 'Pick tags that are relevant to you';

  return (
    <>
      <h2 className="text-center font-bold typo-large-title">
        {resolvedHeadline}
      </h2>