diff --git a/src/logger/metrics.ts b/src/logger/metrics.ts index e51905f84e..6e65845ca1 100644 --- a/src/logger/metrics.ts +++ b/src/logger/metrics.ts @@ -90,6 +90,9 @@ export type MetricEvents = { selectedInterests: string[] selectedInterestsLength: number } + 'onboarding:suggestedAccounts:tabPressed': { + tab: string + } 'onboarding:suggestedAccounts:nextPressed': { selectedAccountsLength: number skipped: boolean @@ -249,6 +252,7 @@ export type MetricEvents = { | 'InterstitialDiscover' | 'InterstitialProfile' | 'Profile' + | 'Onboarding' location: 'Card' | 'Profile' recId?: number position: number diff --git a/src/screens/Onboarding/Layout.tsx b/src/screens/Onboarding/Layout.tsx index e7be0457fa..13dec54893 100644 --- a/src/screens/Onboarding/Layout.tsx +++ b/src/screens/Onboarding/Layout.tsx @@ -23,7 +23,7 @@ import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons import {createPortalGroup} from '#/components/Portal' import {P, Text} from '#/components/Typography' -const COL_WIDTH = 420 +const ONBOARDING_COL_WIDTH = 420 export const OnboardingControls = createPortalGroup() @@ -92,7 +92,8 @@ export function Layout({children}: React.PropsWithChildren<{}>) { top: paddingTop.paddingTop + insets.top - 1, }, ]}> - + )} @@ -111,3 +252,79 @@ export function StepSuggestedAccounts() { ) } + +function SuggestedProfileCard({ + profile, + moderationOpts, + recId, + position, +}: { + profile: bsky.profile.AnyProfileView + moderationOpts: ModerationOpts + recId?: number + position: number +}) { + const t = useTheme() + return ( + { + logger.metric( + 'suggestedUser:press', + { + logContext: 'Explore', + recId, + position, + }, + {statsig: true}, + ) + }}> + {s => ( + <> + + + + + + + { + logger.metric( + 'suggestedUser:follow', + { + logContext: 'Explore', + location: 'Card', + recId, + position, + }, + {statsig: true}, + ) + }} + /> + + + + + + )} + + ) +} diff --git a/src/screens/Onboarding/util.ts b/src/screens/Onboarding/util.ts index d14c9562e6..b08f0408eb 100644 --- a/src/screens/Onboarding/util.ts +++ b/src/screens/Onboarding/util.ts @@ -1,9 +1,9 @@ import { - $Typed, - AppBskyGraphFollow, - AppBskyGraphGetFollows, - BskyAgent, - ComAtprotoRepoApplyWrites, + type $Typed, + type AppBskyGraphFollow, + type AppBskyGraphGetFollows, + type BskyAgent, + type ComAtprotoRepoApplyWrites, } from '@atproto/api' import {TID} from '@atproto/common-web' import chunk from 'lodash.chunk' @@ -42,10 +42,10 @@ export async function bulkWriteFollows(agent: BskyAgent, dids: string[]) { } await whenFollowsIndexed(agent, session.did, res => !!res.data.follows.length) - const followUris = new Map() + const followUris = new Map() for (const r of followWrites) { followUris.set( - r.value.subject, + r.value.subject as string, `at://${session.did}/app.bsky.graph.follow/${r.rkey}`, ) } diff --git a/src/screens/Search/Explore.tsx b/src/screens/Search/Explore.tsx index 9c4dd9d56a..e857f4b0b3 100644 --- a/src/screens/Search/Explore.tsx +++ b/src/screens/Search/Explore.tsx @@ -751,6 +751,7 @@ export function Explore({ selectedInterest={selectedInterest} onSelectInterest={setSelectedInterest} hideDefaultTab={item.hideDefaultTab} + logContext="Explore" /> ) diff --git a/src/screens/Search/modules/ExploreSuggestedAccounts.tsx b/src/screens/Search/modules/ExploreSuggestedAccounts.tsx index fd37544f43..b217b6b844 100644 --- a/src/screens/Search/modules/ExploreSuggestedAccounts.tsx +++ b/src/screens/Search/modules/ExploreSuggestedAccounts.tsx @@ -12,7 +12,7 @@ import { popularInterests, useInterestsDisplayNames, } from '#/screens/Onboarding/state' -import {useTheme} from '#/alf' +import {tokens, useTheme} from '#/alf' import {atoms as a} from '#/alf' import {Button} from '#/components/Button' import * as ProfileCard from '#/components/ProfileCard' @@ -55,14 +55,21 @@ export function useLoadEnoughProfiles({ } } +// TODO: Move to own file -sfn export function SuggestedAccountsTabBar({ selectedInterest, onSelectInterest, hideDefaultTab, + priorityInterests, + leftPadding = tokens.space.md, + logContext = 'Explore', }: { selectedInterest: string | null onSelectInterest: (interest: string | null) => void + priorityInterests?: string[] hideDefaultTab?: boolean + leftPadding?: number + logContext?: 'Explore' | 'Onboarding' }) { const {_} = useLingui() const interestsDisplayNames = useInterestsDisplayNames() @@ -71,6 +78,8 @@ export function SuggestedAccountsTabBar({ const interests = Object.keys(interestsDisplayNames) .sort(boostInterests(popularInterests)) .sort(boostInterests(personalizedInterests)) + .sort(boostInterests(priorityInterests)) + return ( { - logger.metric( - 'explore:suggestedAccounts:tabPressed', - {tab: tab}, - {statsig: true}, - ) + if (logContext === 'Explore') { + logger.metric( + 'explore:suggestedAccounts:tabPressed', + {tab: tab}, + {statsig: true}, + ) + } else { + logger.metric( + 'onboarding:suggestedAccounts:tabPressed', + {tab: tab}, + {statsig: true}, + ) + } onSelectInterest(tab === 'all' ? null : tab) }} hasSearchText={false} @@ -99,7 +116,7 @@ export function SuggestedAccountsTabBar({ contentContainerStyle={[ { // visual alignment - paddingLeft: a.px_md.paddingLeft, + paddingLeft: leftPadding, }, ]} /> diff --git a/src/screens/Search/util/useSuggestedUsers.ts b/src/screens/Search/util/useSuggestedUsers.ts index aa29dad8c6..3e48245b41 100644 --- a/src/screens/Search/util/useSuggestedUsers.ts +++ b/src/screens/Search/util/useSuggestedUsers.ts @@ -43,6 +43,7 @@ export function useSuggestedUsers({ isLoading: searched.isLoading, error: searched.error, isRefetching: searched.isRefetching, + refetch: searched.refetch, } } else { return { @@ -50,6 +51,7 @@ export function useSuggestedUsers({ isLoading: curated.isLoading, error: curated.error, isRefetching: curated.isRefetching, + refetch: curated.refetch, } } }, [curated, searched, search])