From da8499c8810eccbb448516adedcbb19a1964c081 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Tue, 19 Sep 2023 12:24:58 -0700 Subject: [PATCH 1/9] Add thread sort settings (#1475) * Add thread sorting preferences * UI tweaks * Tweak settings * Tune the copy --- src/Navigation.tsx | 14 +- src/lib/routes/types.ts | 1 + src/routes.ts | 1 + src/state/models/content/post-thread.ts | 37 +++++- src/state/models/ui/preferences.ts | 30 +++++ src/view/index.ts | 2 + src/view/screens/PreferencesHomeFeed.tsx | 7 +- src/view/screens/PreferencesThreads.tsx | 155 +++++++++++++++++++++++ src/view/screens/Settings.tsx | 22 ++++ 9 files changed, 256 insertions(+), 13 deletions(-) create mode 100644 src/view/screens/PreferencesThreads.tsx diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 9bf6ba9818..604fca2b92 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -33,6 +33,10 @@ import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' import {router} from './routes' import {usePalette} from 'lib/hooks/usePalette' import {useStores} from './state' +import {getRoutingInstrumentation} from 'lib/sentry' +import {bskyTitle} from 'lib/strings/headings' +import {JSX} from 'react/jsx-runtime' +import {timeout} from 'lib/async/timeout' import {HomeScreen} from './view/screens/Home' import {SearchScreen} from './view/screens/Search' @@ -62,11 +66,8 @@ import {AppPasswords} from 'view/screens/AppPasswords' import {ModerationMutedAccounts} from 'view/screens/ModerationMutedAccounts' import {ModerationBlockedAccounts} from 'view/screens/ModerationBlockedAccounts' import {SavedFeeds} from 'view/screens/SavedFeeds' -import {getRoutingInstrumentation} from 'lib/sentry' -import {bskyTitle} from 'lib/strings/headings' -import {JSX} from 'react/jsx-runtime' -import {timeout} from 'lib/async/timeout' import {PreferencesHomeFeed} from 'view/screens/PreferencesHomeFeed' +import {PreferencesThreads} from 'view/screens/PreferencesThreads' const navigationRef = createNavigationContainerRef() @@ -219,6 +220,11 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) { component={PreferencesHomeFeed} options={{title: title('Home Feed Preferences')}} /> + ) } diff --git a/src/lib/routes/types.ts b/src/lib/routes/types.ts index cc7a468e92..e2867a707d 100644 --- a/src/lib/routes/types.ts +++ b/src/lib/routes/types.ts @@ -29,6 +29,7 @@ export type CommonNavigatorParams = { AppPasswords: undefined SavedFeeds: undefined PreferencesHomeFeed: undefined + PreferencesThreads: undefined } export type BottomTabNavigatorParams = CommonNavigatorParams & { diff --git a/src/routes.ts b/src/routes.ts index 7c356eb1b3..35266d85bb 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -23,6 +23,7 @@ export const router = new Router({ Log: '/sys/log', AppPasswords: '/settings/app-passwords', PreferencesHomeFeed: '/settings/home-feed', + PreferencesThreads: '/settings/threads', SavedFeeds: '/settings/saved-feeds', Support: '/support', PrivacyPolicy: '/support/privacy', diff --git a/src/state/models/content/post-thread.ts b/src/state/models/content/post-thread.ts index 7e3650948a..2d3a3d64a1 100644 --- a/src/state/models/content/post-thread.ts +++ b/src/state/models/content/post-thread.ts @@ -241,7 +241,7 @@ export class PostThreadModel { res.data.thread as AppBskyFeedDefs.ThreadViewPost, thread.uri, ) - sortThread(thread) + sortThread(thread, this.rootStore.preferences) this.thread = thread } } @@ -263,11 +263,16 @@ function pruneReplies(post: MaybePost) { } } +interface SortSettings { + threadDefaultSort: string + threadFollowedUsersFirst: boolean +} + type MaybeThreadItem = | PostThreadItemModel | AppBskyFeedDefs.NotFoundPost | AppBskyFeedDefs.BlockedPost -function sortThread(item: MaybeThreadItem) { +function sortThread(item: MaybeThreadItem, opts: SortSettings) { if ('notFound' in item) { return } @@ -296,13 +301,31 @@ function sortThread(item: MaybeThreadItem) { if (modScore(a.moderation) !== modScore(b.moderation)) { return modScore(a.moderation) - modScore(b.moderation) } - if (a.post.likeCount === b.post.likeCount) { - return b.post.indexedAt.localeCompare(a.post.indexedAt) // newest - } else { - return (b.post.likeCount || 0) - (a.post.likeCount || 0) // most likes + if (opts.threadFollowedUsersFirst) { + const af = a.post.author.viewer?.following + const bf = b.post.author.viewer?.following + if (af && !bf) { + return -1 + } else if (!af && bf) { + return 1 + } + } + if (opts.threadDefaultSort === 'oldest') { + return a.post.indexedAt.localeCompare(b.post.indexedAt) + } else if (opts.threadDefaultSort === 'newest') { + return b.post.indexedAt.localeCompare(a.post.indexedAt) + } else if (opts.threadDefaultSort === 'most-likes') { + if (a.post.likeCount === b.post.likeCount) { + return b.post.indexedAt.localeCompare(a.post.indexedAt) // newest + } else { + return (b.post.likeCount || 0) - (a.post.likeCount || 0) // most likes + } + } else if (opts.threadDefaultSort === 'random') { + return 0.5 - Math.random() // this is vaguely criminal but we can get away with it } + return b.post.indexedAt.localeCompare(a.post.indexedAt) }) - item.replies.forEach(reply => sortThread(reply)) + item.replies.forEach(reply => sortThread(reply, opts)) } } diff --git a/src/state/models/ui/preferences.ts b/src/state/models/ui/preferences.ts index 3790b3a920..03f08bc1bb 100644 --- a/src/state/models/ui/preferences.ts +++ b/src/state/models/ui/preferences.ts @@ -25,6 +25,7 @@ const VISIBILITY_VALUES = ['ignore', 'warn', 'hide'] const DEFAULT_LANG_CODES = (deviceLocales || []) .concat(['en', 'ja', 'pt', 'de']) .slice(0, 6) +const THREAD_SORT_VALUES = ['oldest', 'newest', 'most-likes', 'random'] export class LabelPreferencesModel { nsfw: LabelPreference = 'hide' @@ -55,6 +56,8 @@ export class PreferencesModel { homeFeedRepostsEnabled: boolean = true homeFeedQuotePostsEnabled: boolean = true homeFeedMergeFeedEnabled: boolean = false + threadDefaultSort: string = 'oldest' + threadFollowedUsersFirst: boolean = true requireAltTextEnabled: boolean = false // used to linearize async modifications to state @@ -86,6 +89,8 @@ export class PreferencesModel { homeFeedRepostsEnabled: this.homeFeedRepostsEnabled, homeFeedQuotePostsEnabled: this.homeFeedQuotePostsEnabled, homeFeedMergeFeedEnabled: this.homeFeedMergeFeedEnabled, + threadDefaultSort: this.threadDefaultSort, + threadFollowedUsersFirst: this.threadFollowedUsersFirst, requireAltTextEnabled: this.requireAltTextEnabled, } } @@ -189,6 +194,21 @@ export class PreferencesModel { ) { this.homeFeedMergeFeedEnabled = v.homeFeedMergeFeedEnabled } + // check if thread sort order is set in preferences, then hydrate + if ( + hasProp(v, 'threadDefaultSort') && + typeof v.threadDefaultSort === 'string' && + THREAD_SORT_VALUES.includes(v.threadDefaultSort) + ) { + this.threadDefaultSort = v.threadDefaultSort + } + // check if tread followed-users-first is enabled in preferences, then hydrate + if ( + hasProp(v, 'threadFollowedUsersFirst') && + typeof v.threadFollowedUsersFirst === 'boolean' + ) { + this.threadFollowedUsersFirst = v.threadFollowedUsersFirst + } // check if requiring alt text is enabled in preferences, then hydrate if ( hasProp(v, 'requireAltTextEnabled') && @@ -494,6 +514,16 @@ export class PreferencesModel { this.homeFeedMergeFeedEnabled = !this.homeFeedMergeFeedEnabled } + setThreadDefaultSort(v: string) { + if (THREAD_SORT_VALUES.includes(v)) { + this.threadDefaultSort = v + } + } + + toggleThreadFollowedUsersFirst() { + this.threadFollowedUsersFirst = !this.threadFollowedUsersFirst + } + toggleRequireAltTextEnabled() { this.requireAltTextEnabled = !this.requireAltTextEnabled } diff --git a/src/view/index.ts b/src/view/index.ts index 2fdc34e7b5..da1b781463 100644 --- a/src/view/index.ts +++ b/src/view/index.ts @@ -36,6 +36,7 @@ import {faClone} from '@fortawesome/free-solid-svg-icons/faClone' import {faClone as farClone} from '@fortawesome/free-regular-svg-icons/faClone' import {faComment} from '@fortawesome/free-regular-svg-icons/faComment' import {faCommentSlash} from '@fortawesome/free-solid-svg-icons/faCommentSlash' +import {faComments} from '@fortawesome/free-regular-svg-icons/faComments' import {faCompass} from '@fortawesome/free-regular-svg-icons/faCompass' import {faEllipsis} from '@fortawesome/free-solid-svg-icons/faEllipsis' import {faEnvelope} from '@fortawesome/free-solid-svg-icons/faEnvelope' @@ -134,6 +135,7 @@ export function setup() { farClone, faComment, faCommentSlash, + faComments, faCompass, faEllipsis, faEnvelope, diff --git a/src/view/screens/PreferencesHomeFeed.tsx b/src/view/screens/PreferencesHomeFeed.tsx index 81bdfc95e2..34139bec14 100644 --- a/src/view/screens/PreferencesHomeFeed.tsx +++ b/src/view/screens/PreferencesHomeFeed.tsx @@ -66,7 +66,10 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ ]}> + style={[ + styles.titleSection, + isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20}, + ]}> Fine-tune the content you see on your home screen. @@ -175,7 +178,7 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ style={[ styles.btnContainer, !isTabletOrDesktop && {borderTopWidth: 1, paddingHorizontal: 20}, - pal.borderDark, + pal.border, ]}> +export const PreferencesThreads = observer(function PreferencesThreadsImpl({ + navigation, +}: Props) { + const pal = usePalette('default') + const store = useStores() + const {isTabletOrDesktop} = useWebMediaQueries() + + return ( + + + + + Fine-tune the discussion threads. + + + + + + + + Sort Replies + + + Sort replies to the same post by: + + + + + + + + + Prioritize Your Follows + + + Show replies by people you follow before all other replies. + + + + + + + + { + navigation.canGoBack() + ? navigation.goBack() + : navigation.navigate('Settings') + }} + style={[styles.btn, isTabletOrDesktop && styles.btnDesktop]} + accessibilityRole="button" + accessibilityLabel="Confirm" + accessibilityHint=""> + Done + + + + ) +}) + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingBottom: 90, + }, + desktopContainer: { + borderLeftWidth: 1, + borderRightWidth: 1, + paddingBottom: 40, + }, + titleSection: { + paddingBottom: 30, + }, + title: { + textAlign: 'center', + marginBottom: 5, + }, + description: { + textAlign: 'center', + paddingHorizontal: 32, + }, + cardsContainer: { + paddingHorizontal: 20, + }, + card: { + padding: 16, + borderRadius: 10, + marginBottom: 20, + }, + btn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 32, + padding: 14, + backgroundColor: colors.blue3, + }, + btnDesktop: { + marginHorizontal: 'auto', + paddingHorizontal: 80, + }, + btnContainer: { + paddingTop: 20, + }, + dimmed: { + opacity: 0.3, + }, +}) diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index 761f50d0a3..1ff5f58ff0 100644 --- a/src/view/screens/Settings.tsx +++ b/src/view/screens/Settings.tsx @@ -180,6 +180,10 @@ export const SettingsScreen = withAuthRequired( navigation.navigate('PreferencesHomeFeed') }, [navigation]) + const openThreadsPreferences = React.useCallback(() => { + navigation.navigate('PreferencesThreads') + }, [navigation]) + const onPressAppPasswords = React.useCallback(() => { navigation.navigate('AppPasswords') }, [navigation]) @@ -420,6 +424,24 @@ export const SettingsScreen = withAuthRequired( Home Feed Preferences + + + + + + Thread Preferences + + Date: Wed, 20 Sep 2023 01:18:50 +0530 Subject: [PATCH 2/9] Onboarding recommended follows (#1457) * upgrade api package * add RecommendedFollows as a step in onboarding * add list of recommended follows from suggested actor model * remove dead code * hoist suggestedActors into onboarding model * add comments * load more suggested follows on follow * styling changes * add animation * tweak animations * adjust styling slightly * adjust styles on mobile * styling improvements for web * fix text alignment in RecommendedFollows * dedupe inserted suggestions * fix animation duration * Minor spacing tweak --------- Co-authored-by: Paul Frazee and Eric Bailey --- package.json | 2 +- src/state/models/discovery/onboarding.ts | 11 + .../models/discovery/suggested-actors.ts | 19 ++ src/view/com/auth/Onboarding.tsx | 4 + .../com/auth/onboarding/RecommendedFeeds.tsx | 3 +- .../auth/onboarding/RecommendedFollows.tsx | 204 ++++++++++++++++++ .../onboarding/RecommendedFollowsItem.tsx | 160 ++++++++++++++ .../com/auth/onboarding/WelcomeMobile.tsx | 4 + src/view/com/profile/FollowButton.tsx | 10 +- src/view/com/util/forms/Button.tsx | 45 +++- yarn.lock | 8 +- 11 files changed, 450 insertions(+), 20 deletions(-) create mode 100644 src/view/com/auth/onboarding/RecommendedFollows.tsx create mode 100644 src/view/com/auth/onboarding/RecommendedFollowsItem.tsx diff --git a/package.json b/package.json index 1a56c871bd..dcf3b51721 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "build:apk": "eas build -p android --profile dev-android-apk" }, "dependencies": { - "@atproto/api": "^0.6.12", + "@atproto/api": "^0.6.13", "@bam.tech/react-native-image-resizer": "^3.0.4", "@braintree/sanitize-url": "^6.0.2", "@emoji-mart/react": "^1.1.1", diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts index 09c9eac041..8ad321ed95 100644 --- a/src/state/models/discovery/onboarding.ts +++ b/src/state/models/discovery/onboarding.ts @@ -2,10 +2,12 @@ import {makeAutoObservable} from 'mobx' import {RootStoreModel} from '../root-store' import {hasProp} from 'lib/type-guards' import {track} from 'lib/analytics/analytics' +import {SuggestedActorsModel} from './suggested-actors' export const OnboardingScreenSteps = { Welcome: 'Welcome', RecommendedFeeds: 'RecommendedFeeds', + RecommendedFollows: 'RecommendedFollows', Home: 'Home', } as const @@ -16,7 +18,11 @@ export class OnboardingModel { // state step: OnboardingStep = 'Home' // default state to skip onboarding, only enabled for new users by calling start() + // data + suggestedActors: SuggestedActorsModel + constructor(public rootStore: RootStoreModel) { + this.suggestedActors = new SuggestedActorsModel(this.rootStore) makeAutoObservable(this, { rootStore: false, hydrate: false, @@ -56,6 +62,11 @@ export class OnboardingModel { this.step = 'RecommendedFeeds' return this.step } else if (this.step === 'RecommendedFeeds') { + this.step = 'RecommendedFollows' + // prefetch recommended follows + this.suggestedActors.loadMore(true) + return this.step + } else if (this.step === 'RecommendedFollows') { this.finish() return this.step } else { diff --git a/src/state/models/discovery/suggested-actors.ts b/src/state/models/discovery/suggested-actors.ts index 0b3d36952e..afa5e74e3e 100644 --- a/src/state/models/discovery/suggested-actors.ts +++ b/src/state/models/discovery/suggested-actors.ts @@ -19,6 +19,7 @@ export class SuggestedActorsModel { loadMoreCursor: string | undefined = undefined error = '' hasMore = false + lastInsertedAtIndex = -1 // data suggestions: SuggestedActor[] = [] @@ -110,6 +111,24 @@ export class SuggestedActorsModel { } }) + async insertSuggestionsByActor(actor: string, indexToInsertAt: number) { + // fetch suggestions + const res = + await this.rootStore.agent.app.bsky.graph.getSuggestedFollowsByActor({ + actor: actor, + }) + const {suggestions: moreSuggestions} = res.data + this.rootStore.me.follows.hydrateProfiles(moreSuggestions) + // dedupe + const toInsert = moreSuggestions.filter( + s => !this.suggestions.find(s2 => s2.did === s.did), + ) + // insert + this.suggestions.splice(indexToInsertAt + 1, 0, ...toInsert) + // update index + this.lastInsertedAtIndex = indexToInsertAt + } + // state transitions // = diff --git a/src/view/com/auth/Onboarding.tsx b/src/view/com/auth/Onboarding.tsx index 6ea8cd79e1..a36544a037 100644 --- a/src/view/com/auth/Onboarding.tsx +++ b/src/view/com/auth/Onboarding.tsx @@ -7,6 +7,7 @@ import {usePalette} from 'lib/hooks/usePalette' import {useStores} from 'state/index' import {Welcome} from './onboarding/Welcome' import {RecommendedFeeds} from './onboarding/RecommendedFeeds' +import {RecommendedFollows} from './onboarding/RecommendedFollows' export const Onboarding = observer(function OnboardingImpl() { const pal = usePalette('default') @@ -28,6 +29,9 @@ export const Onboarding = observer(function OnboardingImpl() { {store.onboarding.step === 'RecommendedFeeds' && ( )} + {store.onboarding.step === 'RecommendedFollows' && ( + + )} ) diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx index b39714ef29..24fc9eef1a 100644 --- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx +++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx @@ -96,7 +96,7 @@ export const RecommendedFeeds = observer(function RecommendedFeedsImpl({ - Done + Next @@ -215,6 +215,7 @@ const mStyles = StyleSheet.create({ marginBottom: 16, marginHorizontal: 16, marginTop: 16, + alignItems: 'center', }, buttonText: { textAlign: 'center', diff --git a/src/view/com/auth/onboarding/RecommendedFollows.tsx b/src/view/com/auth/onboarding/RecommendedFollows.tsx new file mode 100644 index 0000000000..f2710d2ac6 --- /dev/null +++ b/src/view/com/auth/onboarding/RecommendedFollows.tsx @@ -0,0 +1,204 @@ +import React from 'react' +import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native' +import {observer} from 'mobx-react-lite' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {TabletOrDesktop, Mobile} from 'view/com/util/layouts/Breakpoints' +import {Text} from 'view/com/util/text/Text' +import {ViewHeader} from 'view/com/util/ViewHeader' +import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' +import {Button} from 'view/com/util/forms/Button' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {usePalette} from 'lib/hooks/usePalette' +import {useStores} from 'state/index' +import {RecommendedFollowsItem} from './RecommendedFollowsItem' + +type Props = { + next: () => void +} +export const RecommendedFollows = observer(function RecommendedFollowsImpl({ + next, +}: Props) { + const store = useStores() + const pal = usePalette('default') + const {isTabletOrMobile} = useWebMediaQueries() + + React.useEffect(() => { + // Load suggested actors if not already loaded + // prefetch should happen in the onboarding model + if ( + !store.onboarding.suggestedActors.hasLoaded || + store.onboarding.suggestedActors.isEmpty + ) { + store.onboarding.suggestedActors.loadMore(true) + } + }, [store]) + + const title = ( + <> + + Follow some + + + Recommended + + + Users + + + Follow some users to get started. We can recommend you more users based + on who you find interesting. + + + + + + ) + + return ( + <> + + + {store.onboarding.suggestedActors.isLoading ? ( + + ) : ( + ( + + )} + keyExtractor={(item, index) => item.did + index.toString()} + style={{flex: 1}} + /> + )} + + + + + + + + + Check out some recommended users. Follow them to see similar + users. + + + {store.onboarding.suggestedActors.isLoading ? ( + + ) : ( + ( + + )} + keyExtractor={(item, index) => item.did + index.toString()} + style={{flex: 1}} + /> + )} +