import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import { type CommonNavigatorParams, type NativeStackScreenProps, } from '#/lib/routes/types' import {useGate} from '#/lib/statsig/statsig' import { usePreferencesQuery, useSetThreadViewPreferencesMutation, } from '#/state/queries/preferences' import { normalizeSort, normalizeView, useThreadPreferences, } from '#/state/queries/preferences/useThreadPreferences' import {atoms as a, useTheme} from '#/alf' import * as Toggle from '#/components/forms/Toggle' import {Beaker_Stroke2_Corner2_Rounded as BeakerIcon} from '#/components/icons/Beaker' import {Bubbles_Stroke2_Corner2_Rounded as BubblesIcon} from '#/components/icons/Bubble' import {PersonGroup_Stroke2_Corner2_Rounded as PersonGroupIcon} from '#/components/icons/Person' import {Tree_Stroke2_Corner0_Rounded as TreeIcon} from '#/components/icons/Tree' import * as Layout from '#/components/Layout' import {Text} from '#/components/Typography' import * as SettingsList from './components/SettingsList' type Props = NativeStackScreenProps export function ThreadPreferencesScreen({}: Props) { const gate = useGate() return gate('post_threads_v2_unspecced') ? ( ) : ( ) } export function ThreadPreferencesV2() { const t = useTheme() const {_} = useLingui() const { sort, setSort, view, setView, prioritizeFollowedUsers, setPrioritizeFollowedUsers, } = useThreadPreferences({save: true}) return ( Thread Preferences Sort replies Sort replies to the same post by: setSort(normalizeSort(values[0]))}> Top replies first Oldest replies first Newest replies first Prioritize your Follows setPrioritizeFollowedUsers(value)} style={[a.w_full, a.gap_md]}> Show replies by people you follow before all other replies Tree view setView(normalizeView({treeViewEnabled: value})) } style={[a.w_full, a.gap_md]}> Show post replies in a threaded tree view ) } export function ThreadPreferencesV1() { const {_} = useLingui() const t = useTheme() const {data: preferences} = usePreferencesQuery() const {mutate: setThreadViewPrefs, variables} = useSetThreadViewPreferencesMutation() const sortReplies = variables?.sort ?? preferences?.threadViewPrefs?.sort const prioritizeFollowedUsers = Boolean( variables?.prioritizeFollowedUsers ?? preferences?.threadViewPrefs?.prioritizeFollowedUsers, ) const treeViewEnabled = Boolean( variables?.lab_treeViewEnabled ?? preferences?.threadViewPrefs?.lab_treeViewEnabled, ) return ( Thread Preferences Sort replies Sort replies to the same post by: setThreadViewPrefs({sort: values[0]})}> Hot replies first Oldest replies first Newest replies first Most-liked first Random (aka "Poster's Roulette") Prioritize your Follows setThreadViewPrefs({ prioritizeFollowedUsers: value, }) } style={[a.w_full, a.gap_md]}> Show replies by people you follow before all other replies Experimental setThreadViewPrefs({ lab_treeViewEnabled: value, }) } style={[a.w_full, a.gap_md]}> Show replies as threaded ) }