robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
xan.lol
1import {msg, Trans} from '@lingui/macro'
2import {useLingui} from '@lingui/react'
3import {type NativeStackScreenProps} from '@react-navigation/native-stack'
4
5import {type CommonNavigatorParams} from '#/lib/routes/types'
6import {
7 useHapticsDisabled,
8 useRequireAltTextEnabled,
9 useSetHapticsDisabled,
10 useSetRequireAltTextEnabled,
11} from '#/state/preferences'
12import {
13 useLargeAltBadgeEnabled,
14 useSetLargeAltBadgeEnabled,
15} from '#/state/preferences/large-alt-badge'
16import * as SettingsList from '#/screens/Settings/components/SettingsList'
17import {atoms as a} from '#/alf'
18import * as Toggle from '#/components/forms/Toggle'
19import {Accessibility_Stroke2_Corner2_Rounded as AccessibilityIcon} from '#/components/icons/Accessibility'
20import {Haptic_Stroke2_Corner2_Rounded as HapticIcon} from '#/components/icons/Haptic'
21import * as Layout from '#/components/Layout'
22import {IS_NATIVE} from '#/env'
23
24type Props = NativeStackScreenProps<
25 CommonNavigatorParams,
26 'AccessibilitySettings'
27>
28export function AccessibilitySettingsScreen({}: Props) {
29 const {_} = useLingui()
30
31 const requireAltTextEnabled = useRequireAltTextEnabled()
32 const setRequireAltTextEnabled = useSetRequireAltTextEnabled()
33 const hapticsDisabled = useHapticsDisabled()
34 const setHapticsDisabled = useSetHapticsDisabled()
35 const largeAltBadgeEnabled = useLargeAltBadgeEnabled()
36 const setLargeAltBadgeEnabled = useSetLargeAltBadgeEnabled()
37
38 return (
39 <Layout.Screen>
40 <Layout.Header.Outer>
41 <Layout.Header.BackButton />
42 <Layout.Header.Content>
43 <Layout.Header.TitleText>
44 <Trans>Accessibility</Trans>
45 </Layout.Header.TitleText>
46 </Layout.Header.Content>
47 <Layout.Header.Slot />
48 </Layout.Header.Outer>
49 <Layout.Content>
50 <SettingsList.Container>
51 <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
52 <SettingsList.ItemIcon icon={AccessibilityIcon} />
53 <SettingsList.ItemText>
54 <Trans>Alt text</Trans>
55 </SettingsList.ItemText>
56 <Toggle.Item
57 name="require_alt_text"
58 label={_(msg`Require alt text before skeeting`)}
59 value={requireAltTextEnabled ?? false}
60 onChange={value => setRequireAltTextEnabled(value)}
61 style={[a.w_full]}>
62 <Toggle.LabelText style={[a.flex_1]}>
63 <Trans>Require alt text before skeeting</Trans>
64 </Toggle.LabelText>
65 <Toggle.Platform />
66 </Toggle.Item>
67 <Toggle.Item
68 name="large_alt_badge"
69 label={_(msg`Display larger alt text badges`)}
70 value={!!largeAltBadgeEnabled}
71 onChange={value => setLargeAltBadgeEnabled(value)}
72 style={[a.w_full]}>
73 <Toggle.LabelText style={[a.flex_1]}>
74 <Trans>Display larger alt text badges</Trans>
75 </Toggle.LabelText>
76 <Toggle.Platform />
77 </Toggle.Item>
78 </SettingsList.Group>
79 {IS_NATIVE && (
80 <>
81 <SettingsList.Divider />
82 <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
83 <SettingsList.ItemIcon icon={HapticIcon} />
84 <SettingsList.ItemText>
85 <Trans>Haptics</Trans>
86 </SettingsList.ItemText>
87 <Toggle.Item
88 name="haptics"
89 label={_(msg`Disable haptic feedback`)}
90 value={hapticsDisabled ?? false}
91 onChange={value => setHapticsDisabled(value)}
92 style={[a.w_full]}>
93 <Toggle.LabelText style={[a.flex_1]}>
94 <Trans>Disable haptic feedback</Trans>
95 </Toggle.LabelText>
96 <Toggle.Platform />
97 </Toggle.Item>
98 </SettingsList.Group>
99 </>
100 )}
101 </SettingsList.Container>
102 </Layout.Content>
103 </Layout.Screen>
104 )
105}