Clicking "see more" on user suggestions opens suggested users modal (#9482)

* Clicking "see more" on user suggestions now opens modal

* More conventional pattern

* Remove unneeded optional

---------

Co-authored-by: Eric Bailey <git@esb.lol>

src/components/FeedInterstitials.tsx

@@ -26,13 +26,15 @@ import {
   web,
 } from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
 import * as FeedCard from '#/components/FeedCard'
 import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRight} from '#/components/icons/Arrow'
 import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
-import {InlineLinkText, Link} from '#/components/Link'
+import {InlineLinkText} from '#/components/Link'
 import * as ProfileCard from '#/components/ProfileCard'
 import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
+import {FollowDialogWithoutGuide} from './ProgressGuide/FollowDialog'
 import {ProgressGuideList} from './ProgressGuide/List'
 
 const MOBILE_CARD_WIDTH = 165
@@ -250,6 +252,7 @@ export function ProfileGrid({
   const {_} = useLingui()
   const moderationOpts = useModerationOpts()
   const {gtMobile} = useBreakpoints()
+  const followDialogControl = useDialogControl()
 
   const isLoading = isSuggestionsLoading || !moderationOpts
   const isProfileHeaderContext = viewContext === 'profileHeader'
@@ -388,19 +391,34 @@ export function ProfileGrid({
           )}
         </Text>
         {!isProfileHeaderContext && (
-          <InlineLinkText
+          <Button
-            label={_(msg`See more suggested profiles on the Explore page`)}
+            label={_(msg`See more suggested profiles`)}
-            to="/search"
             onPress={() => {
-              logger.metric('suggestedUser:seeMore', {
+              followDialogControl.open()
+              logEvent('suggestedUser:seeMore', {
                 logContext: isFeedContext ? 'Explore' : 'Profile',
               })
             }}>
-            <Trans>See more</Trans>
+            {({hovered}) => (
-          </InlineLinkText>
+              <Text
+                style={[
+                  a.text_sm,
+                  {color: t.palette.primary_500},
+                  hovered &&
+                    web({
+                      textDecorationLine: 'underline',
+                      textDecorationColor: t.palette.primary_500,
+                    }),
+                ]}>
+                <Trans>See more</Trans>
+              </Text>
+            )}
+          </Button>
         )}
       </View>
 
+      <FollowDialogWithoutGuide control={followDialogControl} />
+
       {gtMobile ? (
         <View style={[a.p_lg, a.pt_md]}>
           <View style={[a.flex_1, a.flex_row, a.flex_wrap, a.gap_md]}>
@@ -417,7 +435,16 @@ export function ProfileGrid({
             decelerationRate="fast">
             {content}
 
-            {!isProfileHeaderContext && <SeeMoreSuggestedProfilesCard />}
+            {!isProfileHeaderContext && (
+              <SeeMoreSuggestedProfilesCard
+                onPress={() => {
+                  followDialogControl.open()
+                  logger.metric('suggestedUser:seeMore', {
+                    logContext: 'Explore',
+                  })
+                }}
+              />
+            )}
           </ScrollView>
         </BlockDrawerGesture>
       )}
@@ -425,20 +452,14 @@ export function ProfileGrid({
   )
 }
 
-function SeeMoreSuggestedProfilesCard() {
+function SeeMoreSuggestedProfilesCard({onPress}: {onPress: () => void}) {
   const t = useTheme()
   const {_} = useLingui()
 
   return (
-    <Link
+    <Button
-      to="/search"
+      label={_(msg`Browse more accounts`)}
-      color="primary"
+      onPress={onPress}
-      label={_(msg`Browse more accounts on the Explore page`)}
-      onPress={() => {
-        logger.metric('suggestedUser:seeMore', {
-          logContext: 'Explore',
-        })
-      }}
       style={[
         a.flex_col,
         a.align_center,
@@ -454,7 +475,7 @@ function SeeMoreSuggestedProfilesCard() {
         style={[a.text_md, a.font_medium, a.leading_snug, a.text_center]}>
         <Trans>See more</Trans>
       </ButtonText>
-    </Link>
+    </Button>
   )
 }
 

src/components/ProgressGuide/FollowDialog.tsx

@@ -84,11 +84,28 @@ export function FollowDialog({guide}: {guide: Follow10ProgressGuide}) {
   )
 }
 
+/**
+ * Same as {@link FollowDialog} but without a progress guide.
+ */
+export function FollowDialogWithoutGuide({
+  control,
+}: {
+  control: Dialog.DialogOuterProps['control']
+}) {
+  const {height: minHeight} = useWindowDimensions()
+  return (
+    <Dialog.Outer control={control} nativeOptions={{minHeight}}>
+      <Dialog.Handle />
+      <DialogInner />
+    </Dialog.Outer>
+  )
+}
+
 // Fine to keep this top-level.
 let lastSelectedInterest = ''
 let lastSearchText = ''
 
-function DialogInner({guide}: {guide: Follow10ProgressGuide}) {
+function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
   const {_} = useLingui()
   const interestsDisplayNames = useInterestsDisplayNames()
   const {data: preferences} = usePreferencesQuery()
@@ -289,7 +306,7 @@ let Header = ({
   selectedInterest,
   interestsDisplayNames,
 }: {
-  guide: Follow10ProgressGuide
+  guide?: Follow10ProgressGuide
   inputRef: React.RefObject<TextInput | null>
   listRef: React.RefObject<ListMethods | null>
   onSelectTab: (v: string) => void
@@ -340,7 +357,7 @@ let Header = ({
 }
 Header = memo(Header)
 
-function HeaderTop({guide}: {guide: Follow10ProgressGuide}) {
+function HeaderTop({guide}: {guide?: Follow10ProgressGuide}) {
   const {_} = useLingui()
   const t = useTheme()
   const control = Dialog.useDialogContext()
@@ -363,14 +380,16 @@ function HeaderTop({guide}: {guide: Follow10ProgressGuide}) {
         ]}>
         <Trans>Find people to follow</Trans>
       </Text>
-      <View style={isWeb && {paddingRight: 36}}>
+      {guide && (
-        <ProgressGuideTask
+        <View style={isWeb && {paddingRight: 36}}>
-          current={guide.numFollows + 1}
+          <ProgressGuideTask
-          total={10 + 1}
+            current={guide.numFollows + 1}
-          title={`${guide.numFollows} / 10`}
+            total={10 + 1}
-          tabularNumsTitle
+            title={`${guide.numFollows} / 10`}
-        />
+            tabularNumsTitle
-      </View>
+          />
+        </View>
+      )}
       {isWeb ? (
         <Button
           label={_(msg`Close`)}