Bluesky app fork with some witchin' additions ๐Ÿ’ซ

[๐Ÿด] use Toggle component in settings screen (#4048)

* use Toggle component

* nits + notifs sounds native only

authored by samuel.fm and committed by

GitHub da2bdf5d d639c40e

+62 -102
-76
src/components/RadioGroup.tsx
··· 1 - import React from 'react' 2 - import {View, ViewProps} from 'react-native' 3 - 4 - import {atoms as a, useTheme} from '#/alf' 5 - import {Button} from './Button' 6 - import {Text} from './Typography' 7 - 8 - export function RadioGroup<T extends string | number>({ 9 - value, 10 - onSelect, 11 - items, 12 - ...props 13 - }: ViewProps & { 14 - value: T 15 - onSelect: (value: T) => void 16 - items: Array<{label: string; value: T}> 17 - }) { 18 - return ( 19 - <View {...props}> 20 - {items.map(item => ( 21 - <Button 22 - label={item.label} 23 - key={item.value} 24 - variant="ghost" 25 - color="secondary" 26 - size="small" 27 - onPress={() => onSelect(item.value)} 28 - style={[a.justify_between, a.px_sm]}> 29 - <Text style={a.text_md}>{item.label}</Text> 30 - <RadioIcon selected={value === item.value} /> 31 - </Button> 32 - ))} 33 - </View> 34 - ) 35 - } 36 - 37 - function RadioIcon({selected}: {selected: boolean}) { 38 - const t = useTheme() 39 - return ( 40 - <View 41 - style={[ 42 - { 43 - width: 30, 44 - height: 30, 45 - borderWidth: 2, 46 - borderColor: selected 47 - ? t.palette.primary_500 48 - : t.palette.contrast_200, 49 - }, 50 - selected 51 - ? { 52 - backgroundColor: 53 - t.name === 'light' 54 - ? t.palette.primary_100 55 - : t.palette.primary_900, 56 - } 57 - : t.atoms.bg, 58 - a.align_center, 59 - a.justify_center, 60 - a.rounded_full, 61 - ]}> 62 - {selected && ( 63 - <View 64 - style={[ 65 - { 66 - width: 18, 67 - height: 18, 68 - backgroundColor: t.palette.primary_500, 69 - }, 70 - a.rounded_full, 71 - ]} 72 - /> 73 - )} 74 - </View> 75 - ) 76 - }
+62 -26
src/screens/Messages/Settings.tsx
··· 8 8 9 9 import {CommonNavigatorParams} from '#/lib/routes/types' 10 10 import {useGate} from '#/lib/statsig/statsig' 11 + import {isNative} from '#/platform/detection' 11 12 import {useUpdateActorDeclaration} from '#/state/queries/messages/actor-declaration' 12 13 import {useProfileQuery} from '#/state/queries/profile' 13 14 import {useSession} from '#/state/session' ··· 15 16 import {ViewHeader} from '#/view/com/util/ViewHeader' 16 17 import {CenteredView} from '#/view/com/util/Views' 17 18 import {atoms as a} from '#/alf' 19 + import {Divider} from '#/components/Divider' 18 20 import * as Toggle from '#/components/forms/Toggle' 19 - import {RadioGroup} from '#/components/RadioGroup' 20 21 import {Text} from '#/components/Typography' 21 22 import {useBackgroundNotificationPreferences} from '../../../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider' 22 23 import {ClipClopGate} from './gate' ··· 39 40 }) 40 41 41 42 const onSelectItem = useCallback( 42 - (key: string) => { 43 + (keys: string[]) => { 44 + const key = keys[0] 45 + if (!key) return 43 46 updateDeclaration(key as AllowIncoming) 44 47 }, 45 48 [updateDeclaration], ··· 48 51 const gate = useGate() 49 52 if (!gate('dms')) return <ClipClopGate /> 50 53 54 + console.log(profile?.associated?.chat?.allowIncoming) 55 + 51 56 return ( 52 57 <CenteredView sideBorders style={a.h_full_vh}> 53 58 <ViewHeader title={_(msg`Settings`)} showOnDesktop showBorder /> 54 - <View style={[a.px_md, a.py_lg, a.gap_md]}> 55 - <Text style={[a.text_xl, a.font_bold, a.px_sm]}> 59 + <View style={[a.p_lg, a.gap_md]}> 60 + <Text style={[a.text_lg, a.font_bold]}> 56 61 <Trans>Allow messages from</Trans> 57 62 </Text> 58 - <RadioGroup<AllowIncoming> 59 - value={ 63 + <Toggle.Group 64 + label={_(msg`Allow messages from`)} 65 + type="radio" 66 + values={[ 60 67 (profile?.associated?.chat?.allowIncoming as AllowIncoming) ?? 61 - 'following' 62 - } 63 - items={[ 64 - {label: _(msg`Everyone`), value: 'all'}, 65 - {label: _(msg`Users I follow`), value: 'following'}, 66 - {label: _(msg`No one`), value: 'none'}, 68 + 'following', 67 69 ]} 68 - onSelect={onSelectItem} 69 - /> 70 - </View> 71 - <View style={[a.px_md, a.py_lg, a.gap_md]}> 72 - <Toggle.Item 73 - name="a" 74 - label="Click me" 75 - value={preferences.playSoundChat} 76 - onChange={() => { 77 - setPref('playSoundChat', !preferences.playSoundChat) 78 - }}> 79 - <Toggle.Checkbox /> 80 - <Toggle.LabelText>Notification Sounds</Toggle.LabelText> 81 - </Toggle.Item> 70 + onChange={onSelectItem}> 71 + <View> 72 + <Toggle.Item 73 + name="all" 74 + label={_(msg`Everyone`)} 75 + style={[a.justify_between, a.py_sm]}> 76 + <Toggle.LabelText> 77 + <Trans>Everyone</Trans> 78 + </Toggle.LabelText> 79 + <Toggle.Radio /> 80 + </Toggle.Item> 81 + <Toggle.Item 82 + name="following" 83 + label={_(msg`Users I follow`)} 84 + style={[a.justify_between, a.py_sm]}> 85 + <Toggle.LabelText> 86 + <Trans>Users I follow</Trans> 87 + </Toggle.LabelText> 88 + <Toggle.Radio /> 89 + </Toggle.Item> 90 + <Toggle.Item 91 + name="none" 92 + label={_(msg`No one`)} 93 + style={[a.justify_between, a.py_sm]}> 94 + <Toggle.LabelText> 95 + <Trans>No one</Trans> 96 + </Toggle.LabelText> 97 + <Toggle.Radio /> 98 + </Toggle.Item> 99 + </View> 100 + </Toggle.Group> 101 + {isNative && ( 102 + <> 103 + <Divider style={[a.my_lg]} /> 104 + <Toggle.Item 105 + name="playSoundChat" 106 + label={_(msg`Play notification sounds`)} 107 + value={preferences.playSoundChat} 108 + onChange={() => { 109 + setPref('playSoundChat', !preferences.playSoundChat) 110 + }}> 111 + <Toggle.Checkbox /> 112 + <Toggle.LabelText> 113 + <Trans>Play notification sounds</Trans> 114 + </Toggle.LabelText> 115 + </Toggle.Item> 116 + </> 117 + )} 82 118 </View> 83 119 </CenteredView> 84 120 )