nasso.dev
my fork of the bluesky client
danabra.mov
1import {View} from 'react-native'
2import {msg, Trans} from '@lingui/macro'
3import {useLingui} from '@lingui/react'
4
5import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
6import {
7 usePreferencesQuery,
8 useSetThreadViewPreferencesMutation,
9} from '#/state/queries/preferences'
10import {atoms as a, useTheme} from '#/alf'
11import * as Toggle from '#/components/forms/Toggle'
12import {Beaker_Stroke2_Corner2_Rounded as BeakerIcon} from '#/components/icons/Beaker'
13import {Bubbles_Stroke2_Corner2_Rounded as BubblesIcon} from '#/components/icons/Bubble'
14import {PersonGroup_Stroke2_Corner2_Rounded as PersonGroupIcon} from '#/components/icons/Person'
15import * as Layout from '#/components/Layout'
16import {Text} from '#/components/Typography'
17import * as SettingsList from './components/SettingsList'
18
19type Props = NativeStackScreenProps<CommonNavigatorParams, 'PreferencesThreads'>
20export function ThreadPreferencesScreen({}: Props) {
21 const {_} = useLingui()
22 const t = useTheme()
23
24 const {data: preferences} = usePreferencesQuery()
25 const {mutate: setThreadViewPrefs, variables} =
26 useSetThreadViewPreferencesMutation()
27
28 const sortReplies = variables?.sort ?? preferences?.threadViewPrefs?.sort
29
30 const prioritizeFollowedUsers = Boolean(
31 variables?.prioritizeFollowedUsers ??
32 preferences?.threadViewPrefs?.prioritizeFollowedUsers,
33 )
34 const treeViewEnabled = Boolean(
35 variables?.lab_treeViewEnabled ??
36 preferences?.threadViewPrefs?.lab_treeViewEnabled,
37 )
38
39 return (
40 <Layout.Screen testID="threadPreferencesScreen">
41 <Layout.Header title={_(msg`Thread Preferences`)} />
42 <Layout.Content>
43 <SettingsList.Container>
44 <SettingsList.Group>
45 <SettingsList.ItemIcon icon={BubblesIcon} />
46 <SettingsList.ItemText>
47 <Trans>Sort replies</Trans>
48 </SettingsList.ItemText>
49 <View style={[a.w_full, a.gap_md]}>
50 <Text style={[a.flex_1, t.atoms.text_contrast_medium]}>
51 <Trans>Sort replies to the same post by:</Trans>
52 </Text>
53 <Toggle.Group
54 label={_(msg`Sort replies by`)}
55 type="radio"
56 values={sortReplies ? [sortReplies] : []}
57 onChange={values => setThreadViewPrefs({sort: values[0]})}>
58 <View style={[a.gap_sm, a.flex_1]}>
59 <Toggle.Item name="hotness" label={_(msg`Hot replies first`)}>
60 <Toggle.Radio />
61 <Toggle.LabelText>
62 <Trans>Hot replies first</Trans>
63 </Toggle.LabelText>
64 </Toggle.Item>
65 <Toggle.Item
66 name="oldest"
67 label={_(msg`Oldest replies first`)}>
68 <Toggle.Radio />
69 <Toggle.LabelText>
70 <Trans>Oldest replies first</Trans>
71 </Toggle.LabelText>
72 </Toggle.Item>
73 <Toggle.Item
74 name="newest"
75 label={_(msg`Newest replies first`)}>
76 <Toggle.Radio />
77 <Toggle.LabelText>
78 <Trans>Newest replies first</Trans>
79 </Toggle.LabelText>
80 </Toggle.Item>
81 <Toggle.Item
82 name="most-likes"
83 label={_(msg`Most-liked replies first`)}>
84 <Toggle.Radio />
85 <Toggle.LabelText>
86 <Trans>Most-liked first</Trans>
87 </Toggle.LabelText>
88 </Toggle.Item>
89 <Toggle.Item
90 name="random"
91 label={_(msg`Random (aka "Poster's Roulette")`)}>
92 <Toggle.Radio />
93 <Toggle.LabelText>
94 <Trans>Random (aka "Poster's Roulette")</Trans>
95 </Toggle.LabelText>
96 </Toggle.Item>
97 </View>
98 </Toggle.Group>
99 </View>
100 </SettingsList.Group>
101 <SettingsList.Group>
102 <SettingsList.ItemIcon icon={PersonGroupIcon} />
103 <SettingsList.ItemText>
104 <Trans>Prioritize your Follows</Trans>
105 </SettingsList.ItemText>
106 <Toggle.Item
107 type="checkbox"
108 name="prioritize-follows"
109 label={_(msg`Prioritize your Follows`)}
110 value={prioritizeFollowedUsers}
111 onChange={value =>
112 setThreadViewPrefs({
113 prioritizeFollowedUsers: value,
114 })
115 }
116 style={[a.w_full, a.gap_md]}>
117 <Toggle.LabelText style={[a.flex_1]}>
118 <Trans>
119 Show replies by people you follow before all other replies
120 </Trans>
121 </Toggle.LabelText>
122 <Toggle.Platform />
123 </Toggle.Item>
124 </SettingsList.Group>
125 <SettingsList.Divider />
126 <SettingsList.Group>
127 <SettingsList.ItemIcon icon={BeakerIcon} />
128 <SettingsList.ItemText>
129 <Trans>Experimental</Trans>
130 </SettingsList.ItemText>
131 <Toggle.Item
132 type="checkbox"
133 name="threaded-mode"
134 label={_(msg`Threaded mode`)}
135 value={treeViewEnabled}
136 onChange={value =>
137 setThreadViewPrefs({
138 lab_treeViewEnabled: value,
139 })
140 }
141 style={[a.w_full, a.gap_md]}>
142 <Toggle.LabelText style={[a.flex_1]}>
143 <Trans>Show replies in a threaded view</Trans>
144 </Toggle.LabelText>
145 <Toggle.Platform />
146 </Toggle.Item>
147 </SettingsList.Group>
148 </SettingsList.Container>
149 </Layout.Content>
150 </Layout.Screen>
151 )
152}