diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index dd02d1a6e4..af8f581f4b 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/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({
)}
{!isProfileHeaderContext && (
- {
- logger.metric('suggestedUser:seeMore', {
+ followDialog.control.open()
+ logEvent('suggestedUser:seeMore', {
logContext: isFeedContext ? 'Explore' : 'Profile',
})
}}>
- See more
-
+ {({hovered}) => (
+
+ See more
+
+ )}
+
)}
+
+
{gtMobile ? (
@@ -417,7 +434,16 @@ export function ProfileGrid({
decelerationRate="fast">
{content}
- {!isProfileHeaderContext && }
+ {!isProfileHeaderContext && (
+ {
+ followDialog.control.open()
+ logger.metric('suggestedUser:seeMore', {
+ logContext: 'Explore',
+ })
+ }}
+ />
+ )}
)}
@@ -425,20 +451,14 @@ export function ProfileGrid({
)
}
-function SeeMoreSuggestedProfilesCard() {
+function SeeMoreSuggestedProfilesCard({onPress}: {onPress: () => void}) {
const t = useTheme()
const {_} = useLingui()
return (
- {
- logger.metric('suggestedUser:seeMore', {
- logContext: 'Explore',
- })
- }}
+
)
}
diff --git a/src/components/ProgressGuide/FollowDialog.tsx b/src/components/ProgressGuide/FollowDialog.tsx
index 511cee1a68..2e901f1ee7 100644
--- a/src/components/ProgressGuide/FollowDialog.tsx
+++ b/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}) => (
+
+
+
+
+ ),
+ }
+}
+
// 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
listRef: React.RefObject
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,14 +378,16 @@ function HeaderTop({guide}: {guide: Follow10ProgressGuide}) {
]}>
Find people to follow
-
-
-
+ {guide && (
+
+
+
+ )}
{isWeb ? (