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 ? (