diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index dd02d1a6e4..987d9242f8 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/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({
)}
{!isProfileHeaderContext && (
- {
- logger.metric('suggestedUser:seeMore', {
+ followDialogControl.open()
+ logEvent('suggestedUser:seeMore', {
logContext: isFeedContext ? 'Explore' : 'Profile',
})
}}>
- See more
-
+ {({hovered}) => (
+
+ See more
+
+ )}
+
)}
+
+
{gtMobile ? (
@@ -417,7 +435,16 @@ export function ProfileGrid({
decelerationRate="fast">
{content}
- {!isProfileHeaderContext && }
+ {!isProfileHeaderContext && (
+ {
+ followDialogControl.open()
+ logger.metric('suggestedUser:seeMore', {
+ logContext: 'Explore',
+ })
+ }}
+ />
+ )}
)}
@@ -425,20 +452,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..51dd518fec 100644
--- a/src/components/ProgressGuide/FollowDialog.tsx
+++ b/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 (
+
+
+
+
+ )
+}
+
// 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
listRef: React.RefObject
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}) {
]}>
Find people to follow
-
-
-
+ {guide && (
+
+
+
+ )}
{isWeb ? (