Clicking "see more" on user suggestions now opens modal

src/components/FeedInterstitials.tsx

@@ -29,10 +29,11 @@ import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 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 {useFollowDialogControl} from './ProgressGuide/FollowDialog'
 import {ProgressGuideList} from './ProgressGuide/List'
 
 const MOBILE_CARD_WIDTH = 165
@@ -250,6 +251,7 @@ export function ProfileGrid({
   const {_} = useLingui()
   const moderationOpts = useModerationOpts()
   const {gtMobile} = useBreakpoints()
+  const followDialog = useFollowDialogControl()
 
   const isLoading = isSuggestionsLoading || !moderationOpts
   const isProfileHeaderContext = viewContext === 'profileHeader'
@@ -388,19 +390,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', {
+              followDialog.control.open()
+              logEvent('suggestedUser:seeMore', {
                 logContext: isFeedContext ? 'Explore' : 'Profile',
               })
             }}>
+            {({hovered}) => (
+              <Text
+                style={[
+                  a.text_sm,
+                  {color: t.palette.primary_500},
+                  hovered &&
+                    web({
+                      textDecorationLine: 'underline',
+                      textDecorationColor: t.palette.primary_500,
+                    }),
+                ]}>
                 <Trans>See more</Trans>
-          </InlineLinkText>
+              </Text>
+            )}
+          </Button>
         )}
       </View>
 
+      <followDialog.Dialog />
+
       {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 +434,16 @@ export function ProfileGrid({
             decelerationRate="fast">
             {content}
 
-            {!isProfileHeaderContext && <SeeMoreSuggestedProfilesCard />}
+            {!isProfileHeaderContext && (
+              <SeeMoreSuggestedProfilesCard
+                onPress={() => {
+                  followDialog.control.open()
+                  logger.metric('suggestedUser:seeMore', {
+                    logContext: 'Explore',
+                  })
+                }}
+              />
+            )}
           </ScrollView>
         </BlockDrawerGesture>
       )}
@@ -425,20 +451,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 +474,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

@@ -54,7 +54,7 @@ type Item =
       key: string
     }
 
-export function FollowDialog({guide}: {guide: Follow10ProgressGuide}) {
+export function FollowDialog({guide}: {guide?: Follow10ProgressGuide}) {
   const {_} = useLingui()
   const control = Dialog.useDialogControl()
   const {gtMobile} = useBreakpoints()
@@ -84,11 +84,26 @@ export function FollowDialog({guide}: {guide: Follow10ProgressGuide}) {
   )
 }
 
+export function useFollowDialogControl() {
+  const control = Dialog.useDialogControl()
+  const {height: minHeight} = useWindowDimensions()
+
+  return {
+    control,
+    Dialog: ({guide}: {guide?: Follow10ProgressGuide}) => (
+      <Dialog.Outer control={control} nativeOptions={{minHeight}}>
+        <Dialog.Handle />
+        <DialogInner guide={guide} />
+      </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 +304,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 +355,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,6 +378,7 @@ function HeaderTop({guide}: {guide: Follow10ProgressGuide}) {
         ]}>
         <Trans>Find people to follow</Trans>
       </Text>
+      {guide && (
         <View style={isWeb && {paddingRight: 36}}>
           <ProgressGuideTask
             current={guide.numFollows + 1}
@@ -371,6 +387,7 @@ function HeaderTop({guide}: {guide: Follow10ProgressGuide}) {
             tabularNumsTitle
           />
         </View>
+      )}
       {isWeb ? (
         <Button
           label={_(msg`Close`)}