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