feat: onboarding follow sources

packages/shared/src/components/onboarding/CreateFeedButton.tsx

@@ -25,6 +25,7 @@ export const CreateFeedButton = ({
   const { selectedSettings, checkSourceBlocked } = useAdvancedSettings();
 
   const contentTypeStep = activeScreen === OnboardingStep.ContentTypes;
+  const sourceStep = activeScreen === OnboardingStep.Sources;
 
   const contentTypeNotEmpty =
     !!getContentTypeNotEmpty({
@@ -39,7 +40,7 @@ export const CreateFeedButton = ({
     tagsCount >= REQUIRED_TAGS_THRESHOLD &&
     activeScreen === OnboardingStep.EditTag;
 
-  const canCreateFeed = tagsCountMatch || contentTypeNotEmpty;
+  const canCreateFeed = tagsCountMatch || contentTypeNotEmpty || sourceStep;
   const { sidebarRendered } = useSidebarRendered();
   const buttonName =
     customActionName ??

packages/shared/src/components/onboarding/OnboardingHeader.tsx

@@ -39,6 +39,12 @@ export const OnboardingHeader = ({
     return isLaptop ? cloudinaryFeedBgLaptop : cloudinaryFeedBgTablet;
   };
 
+  const showButtonOnScreens: Partial<OnboardingStep[]> = [
+    OnboardingStep.EditTag,
+    OnboardingStep.ContentTypes,
+    OnboardingStep.Sources,
+  ];
+
   if (activeScreen !== OnboardingStep.Intro) {
     return (
       <header className="sticky top-0 z-3 mb-10 flex w-full justify-center backdrop-blur-sm">
@@ -53,8 +59,7 @@ export const OnboardingHeader = ({
             position={LogoPosition.Relative}
             linkDisabled
           />
-          {(activeScreen === OnboardingStep.EditTag ||
-            activeScreen === OnboardingStep.ContentTypes) && (
+          {showButtonOnScreens.includes(activeScreen) && (
             <CreateFeedButton
               onClick={onClickCreateFeed}
               customActionName={customActionName}

packages/shared/src/components/onboarding/Sources/Sources.tsx

@@ -0,0 +1,197 @@
+import React, { ReactElement, useCallback, useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import classNames from 'classnames';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../typography/Typography';
+import { SearchField } from '../../fields/SearchField';
+import { useViewSize, ViewSize } from '../../../hooks';
+import useDebounceFn from '../../../hooks/useDebounceFn';
+import { useSourceSearch } from '../../../hooks/useSourceSearch';
+import { Origin } from '../../../lib/log';
+import { gqlClient } from '../../../graphql/common';
+import { disabledRefetch } from '../../../lib/func';
+import { generateQueryKey, RequestKey } from '../../../lib/query';
+import { ONBOARDING_SOURCES_QUERY, Source } from '../../../graphql/sources';
+import { ElementPlaceholder } from '../../ElementPlaceholder';
+import { ProfileImageSize, ProfilePicture } from '../../ProfilePicture';
+import { PlusIcon, VIcon } from '../../icons';
+import { IconSize } from '../../Icon';
+import useFeedSettings from '../../../hooks/useFeedSettings';
+import useTagAndSource from '../../../hooks/useTagAndSource';
+
+const placeholderSources = new Array(5).fill(null).map((_, index) => index);
+
+export const Sources = (): ReactElement => {
+  const isMobile = useViewSize(ViewSize.MobileL);
+
+  const [searchQuery, setSearchQuery] = React.useState<string>();
+  const [onSearch] = useDebounceFn(setSearchQuery, 200);
+
+  const { feedSettings } = useFeedSettings();
+
+  const { onFollowSource, onUnfollowSource } = useTagAndSource({
+    origin: Origin.Onboarding,
+  });
+
+  const selectedTags = feedSettings?.includeTags || [];
+
+  const selectedSources = useMemo(() => {
+    return feedSettings?.includeSources.map(({ id }) => id);
+  }, [feedSettings?.includeSources]);
+
+  const onToggleSource = useCallback(
+    (source) => {
+      if (selectedSources?.includes(source.id)) {
+        onUnfollowSource({ source });
+      } else {
+        onFollowSource({ source });
+      }
+    },
+    [onFollowSource, onUnfollowSource, selectedSources],
+  );
+
+  const { data: searchResult, isPending: isPendingSearch } = useSourceSearch({
+    value: searchQuery,
+  });
+
+  const { data: onboardingSources, isPending } = useQuery({
+    queryKey: generateQueryKey(RequestKey.OnboardingSources),
+
+    queryFn: async () => {
+      const result = await gqlClient.request<{
+        sourceRecommendationByTags: Source[];
+      }>(ONBOARDING_SOURCES_QUERY, { tags: selectedTags });
+
+      return result.sourceRecommendationByTags;
+    },
+    ...disabledRefetch,
+    staleTime: Infinity,
+  });
+
+  const sources =
+    searchQuery && !isPendingSearch ? searchResult : onboardingSources;
+
+  const SourceTag = ({ source }: { source: Source }): ReactElement => {
+    const checked = selectedSources?.includes(source.id);
+    return (
+      <div
+        key={source.id}
+        className={classNames(
+          'flex w-full rounded-12 p-px',
+          checked
+            ? 'bg-gradient-to-b from-accent-onion-subtlest to-accent-cabbage-default'
+            : 'bg-transparent',
+        )}
+      >
+        <div className="w-full rounded-11 bg-background-default">
+          <button
+            type="button"
+            className={classNames(
+              'flex w-full gap-2 rounded-11 bg-surface-float px-3 py-2',
+              checked
+                ? undefined
+                : 'hover:bg-surface-hover active:bg-surface-active',
+            )}
+            onClick={() => onToggleSource(source)}
+          >
+            <ProfilePicture
+              size={ProfileImageSize.Medium}
+              rounded="full"
+              className="mt-2"
+              user={{
+                id: source.id,
+                image: source.image,
+                username: source.handle,
+              }}
+              nativeLazyLoading
+            />
+            <div className="flex-1 text-left">
+              <Typography
+                type={TypographyType.Title3}
+                bold
+                color={TypographyColor.Primary}
+              >
+                {source.name}
+              </Typography>
+              <Typography
+                type={TypographyType.Body}
+                color={TypographyColor.Secondary}
+              >
+                {source.handle}
+              </Typography>
+              <Typography
+                type={TypographyType.Body}
+                color={TypographyColor.Tertiary}
+                className="multi-truncate line-clamp-2"
+              >
+                {source.description}
+              </Typography>
+            </div>
+            <div className="mr-2 flex size-8 items-center justify-center self-center">
+              {checked ? (
+                <VIcon
+                  className="text-brand-default"
+                  size={IconSize.Small}
+                  secondary
+                />
+              ) : (
+                <PlusIcon size={IconSize.Small} />
+              )}
+            </div>
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex max-w-screen-laptop flex-col tablet:px-10">
+      <Typography
+        type={TypographyType.LargeTitle}
+        bold
+        className="mb-10 text-center"
+      >
+        Things you would care to follow
+      </Typography>
+      <div className="w-full max-w-[35rem]">
+        <SearchField
+          aria-label="Pick tags that are relevant to you"
+          autoFocus={!isMobile}
+          className="mb-10 w-full"
+          inputId="search-filters"
+          placeholder="TechCrunch, Hacker News, GitHub, etc"
+          valueChanged={onSearch}
+        />
+        <div
+          role="list"
+          aria-busy={isPending}
+          className="flex flex-row flex-wrap justify-center gap-4"
+        >
+          {isPending &&
+            placeholderSources.map((item) => (
+              <ElementPlaceholder key={item} className="h-16 w-full rounded-12">
+                <span className="invisible">{item}</span>
+              </ElementPlaceholder>
+            ))}
+          {!isPending &&
+            sources?.map((source) => (
+              <SourceTag source={source} key={source.id} />
+            ))}
+          {/* render leftover tags not rendered in initial recommendations but selected */}
+          {!isPending &&
+            !searchQuery &&
+            feedSettings?.includeSources?.map((source) => {
+              if (sources.find(({ id }) => id === source.id)) {
+                return null;
+              }
+
+              return <SourceTag source={source} key={source.id} />;
+            })}
+        </div>
+      </div>
+    </div>
+  );
+};

packages/shared/src/components/onboarding/common.ts

@@ -7,6 +7,7 @@ export enum OnboardingStep {
   EditTag = 'edit_tag',
   ContentTypes = 'content_types',
   ReadingReminder = 'reading_reminder',
+  Sources = 'sources',
 }
 
 export const OnboardingTitle = classed(

packages/shared/src/graphql/sources.ts

@@ -4,6 +4,7 @@ import type { Connection } from './common';
 import {
   SOURCE_CATEGORY_FRAGMENT,
   SOURCE_DIRECTORY_INFO_FRAGMENT,
+  SOURCE_SHORT_INFO_FRAGMENT,
 } from './fragments';
 
 export enum SourceMemberRole {
@@ -114,6 +115,24 @@ export const SOURCE_QUERY = gql`
   ${SOURCE_DIRECTORY_INFO_FRAGMENT}
 `;
 
+export const SEARCH_SOURCES_QUERY = gql`
+  query SearchSources($query: String!, $limit: Int) {
+    searchSources(query: $query, limit: $limit) {
+      ...SourceShortInfo
+    }
+  }
+  ${SOURCE_SHORT_INFO_FRAGMENT}
+`;
+
+export const ONBOARDING_SOURCES_QUERY = gql`
+  query SourceRecommendationByTags($tags: [String]!) {
+    sourceRecommendationByTags(tags: $tags) {
+      ...SourceShortInfo
+    }
+  }
+  ${SOURCE_SHORT_INFO_FRAGMENT}
+`;
+
 export const SOURCE_DIRECTORY_QUERY = gql`
   query SourceDirectory {
     trendingSources {

packages/shared/src/hooks/useSourceSearch.ts

@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query';
+import { gqlClient } from '../graphql/common';
+import { SEARCH_SOURCES_QUERY, Source } from '../graphql/sources';
+import { generateQueryKey, RequestKey } from '../lib/query';
+
+export type UseSourceSearchProps = {
+  value: string;
+};
+
+export type UseSourceSearch = {
+  data?: Source[];
+  isPending: boolean;
+};
+
+export const MIN_SEARCH_QUERY_LENGTH = 2;
+
+export const useSourceSearch = ({
+  value,
+}: UseSourceSearchProps): UseSourceSearch => {
+  const { data, isPending } = useQuery({
+    queryKey: generateQueryKey(RequestKey.SearchSources, null, value),
+    queryFn: async () => {
+      const result = await gqlClient.request<{
+        searchSources: Source[];
+      }>(SEARCH_SOURCES_QUERY, {
+        query: value,
+      });
+
+      return result.searchSources;
+    },
+    enabled: value?.length >= MIN_SEARCH_QUERY_LENGTH,
+  });
+
+  return {
+    data,
+    isPending,
+  };
+};

packages/shared/src/lib/featureManagement.ts

@@ -50,5 +50,9 @@ const feature = {
 };
 
 export const featureAutorotateAds = new Feature('autorotate_ads', 0);
+export const featureOnboardingSources = new Feature(
+  'onboarding_sources',
+  false,
+);
 
 export { feature };

packages/shared/src/lib/query.ts

@@ -175,6 +175,8 @@ export enum RequestKey {
   ContentPreferenceSubscribe = 'content_preference_subscribe',
   ContentPreferenceUnsubscribe = 'content_preference_unsubscribe',
   TopReaderBadge = 'top_reader_badge',
+  SearchSources = 'search_sources',
+  OnboardingSources = 'onboarding_sources',
 }
 
 export type HasConnection<

packages/shared/tailwind.config.ts

@@ -148,6 +148,7 @@ export default {
       6: '0.375rem',
       8: '0.5rem',
       10: '0.625rem',
+      11: '0.6875rem',
       12: '0.75rem',
       14: '0.875rem',
       16: '1rem',