jollywhoppers.com
Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
samuel.fm
1import {View} from 'react-native'
2import {msg} from '@lingui/core/macro'
3import {useLingui} from '@lingui/react'
4import {Trans} from '@lingui/react/macro'
5
6import {
7 type CommonNavigatorParams,
8 type NativeStackScreenProps,
9} from '#/lib/routes/types'
10import {
11 normalizeSort,
12 normalizeView,
13 useThreadPreferences,
14} from '#/state/queries/preferences/useThreadPreferences'
15import {atoms as a, useTheme} from '#/alf'
16import * as Toggle from '#/components/forms/Toggle'
17import {Bubbles_Stroke2_Corner2_Rounded as BubblesIcon} from '#/components/icons/Bubble'
18import {Tree_Stroke2_Corner0_Rounded as TreeIcon} from '#/components/icons/Tree'
19import * as Layout from '#/components/Layout'
20import {Text} from '#/components/Typography'
21import * as SettingsList from './components/SettingsList'
22
23type Props = NativeStackScreenProps<CommonNavigatorParams, 'PreferencesThreads'>
24export function ThreadPreferencesScreen({}: Props) {
25 const t = useTheme()
26 const {_} = useLingui()
27 const {sort, setSort, view, setView} = useThreadPreferences({save: true})
28
29 return (
30 <Layout.Screen testID="threadPreferencesScreen">
31 <Layout.Header.Outer>
32 <Layout.Header.BackButton />
33 <Layout.Header.Content>
34 <Layout.Header.TitleText>
35 <Trans>Thread Preferences</Trans>
36 </Layout.Header.TitleText>
37 </Layout.Header.Content>
38 <Layout.Header.Slot />
39 </Layout.Header.Outer>
40 <Layout.Content>
41 <SettingsList.Container>
42 <SettingsList.Group>
43 <SettingsList.ItemIcon icon={BubblesIcon} />
44 <SettingsList.ItemText>
45 <Trans>Sort replies</Trans>
46 </SettingsList.ItemText>
47 <View style={[a.w_full, a.gap_md]}>
48 <Text style={[a.flex_1, t.atoms.text_contrast_medium]}>
49 <Trans>Sort replies to the same post by:</Trans>
50 </Text>
51 <Toggle.Group
52 label={_(msg`Sort replies by`)}
53 type="radio"
54 values={sort ? [sort] : []}
55 onChange={values => setSort(normalizeSort(values[0]))}>
56 <View style={[a.gap_sm, a.flex_1]}>
57 <Toggle.Item name="top" label={_(msg`Top replies first`)}>
58 <Toggle.Radio />
59 <Toggle.LabelText>
60 <Trans>Top replies first</Trans>
61 </Toggle.LabelText>
62 </Toggle.Item>
63 <Toggle.Item
64 name="oldest"
65 label={_(msg`Oldest replies first`)}>
66 <Toggle.Radio />
67 <Toggle.LabelText>
68 <Trans>Oldest replies first</Trans>
69 </Toggle.LabelText>
70 </Toggle.Item>
71 <Toggle.Item
72 name="newest"
73 label={_(msg`Newest replies first`)}>
74 <Toggle.Radio />
75 <Toggle.LabelText>
76 <Trans>Newest replies first</Trans>
77 </Toggle.LabelText>
78 </Toggle.Item>
79 </View>
80 </Toggle.Group>
81 </View>
82 </SettingsList.Group>
83
84 <SettingsList.Group>
85 <SettingsList.ItemIcon icon={TreeIcon} />
86 <SettingsList.ItemText>
87 <Trans>Tree view</Trans>
88 </SettingsList.ItemText>
89 <Toggle.Item
90 type="checkbox"
91 name="threaded-mode"
92 label={_(msg`Tree view`)}
93 value={view === 'tree'}
94 onChange={value =>
95 setView(normalizeView({treeViewEnabled: value}))
96 }
97 style={[a.w_full, a.gap_md]}>
98 <Toggle.LabelText style={[a.flex_1]}>
99 <Trans>Show post replies in a threaded tree view</Trans>
100 </Toggle.LabelText>
101 <Toggle.Platform />
102 </Toggle.Item>
103 </SettingsList.Group>
104 </SettingsList.Container>
105 </Layout.Content>
106 </Layout.Screen>
107 )
108}