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