diff options
| -rw-r--r-- | src/components/RadioGroup.tsx | 76 | ||||
| -rw-r--r-- | src/screens/Messages/Settings.tsx | 88 |
2 files changed, 62 insertions, 102 deletions
diff --git a/src/components/RadioGroup.tsx b/src/components/RadioGroup.tsx deleted file mode 100644 index 010f65bc3..000000000 --- a/src/components/RadioGroup.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react' -import {View, ViewProps} from 'react-native' - -import {atoms as a, useTheme} from '#/alf' -import {Button} from './Button' -import {Text} from './Typography' - -export function RadioGroup<T extends string | number>({ - value, - onSelect, - items, - ...props -}: ViewProps & { - value: T - onSelect: (value: T) => void - items: Array<{label: string; value: T}> -}) { - return ( - <View {...props}> - {items.map(item => ( - <Button - label={item.label} - key={item.value} - variant="ghost" - color="secondary" - size="small" - onPress={() => onSelect(item.value)} - style={[a.justify_between, a.px_sm]}> - <Text style={a.text_md}>{item.label}</Text> - <RadioIcon selected={value === item.value} /> - </Button> - ))} - </View> - ) -} - -function RadioIcon({selected}: {selected: boolean}) { - const t = useTheme() - return ( - <View - style={[ - { - width: 30, - height: 30, - borderWidth: 2, - borderColor: selected - ? t.palette.primary_500 - : t.palette.contrast_200, - }, - selected - ? { - backgroundColor: - t.name === 'light' - ? t.palette.primary_100 - : t.palette.primary_900, - } - : t.atoms.bg, - a.align_center, - a.justify_center, - a.rounded_full, - ]}> - {selected && ( - <View - style={[ - { - width: 18, - height: 18, - backgroundColor: t.palette.primary_500, - }, - a.rounded_full, - ]} - /> - )} - </View> - ) -} diff --git a/src/screens/Messages/Settings.tsx b/src/screens/Messages/Settings.tsx index 84b804b42..a9c35dba7 100644 --- a/src/screens/Messages/Settings.tsx +++ b/src/screens/Messages/Settings.tsx @@ -8,6 +8,7 @@ import {UseQueryResult} from '@tanstack/react-query' import {CommonNavigatorParams} from '#/lib/routes/types' import {useGate} from '#/lib/statsig/statsig' +import {isNative} from '#/platform/detection' import {useUpdateActorDeclaration} from '#/state/queries/messages/actor-declaration' import {useProfileQuery} from '#/state/queries/profile' import {useSession} from '#/state/session' @@ -15,8 +16,8 @@ import * as Toast from '#/view/com/util/Toast' import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' +import {Divider} from '#/components/Divider' import * as Toggle from '#/components/forms/Toggle' -import {RadioGroup} from '#/components/RadioGroup' import {Text} from '#/components/Typography' import {useBackgroundNotificationPreferences} from '../../../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider' import {ClipClopGate} from './gate' @@ -39,7 +40,9 @@ export function MessagesSettingsScreen({}: Props) { }) const onSelectItem = useCallback( - (key: string) => { + (keys: string[]) => { + const key = keys[0] + if (!key) return updateDeclaration(key as AllowIncoming) }, [updateDeclaration], @@ -48,37 +51,70 @@ export function MessagesSettingsScreen({}: Props) { const gate = useGate() if (!gate('dms')) return <ClipClopGate /> + console.log(profile?.associated?.chat?.allowIncoming) + return ( <CenteredView sideBorders style={a.h_full_vh}> <ViewHeader title={_(msg`Settings`)} showOnDesktop showBorder /> - <View style={[a.px_md, a.py_lg, a.gap_md]}> - <Text style={[a.text_xl, a.font_bold, a.px_sm]}> + <View style={[a.p_lg, a.gap_md]}> + <Text style={[a.text_lg, a.font_bold]}> <Trans>Allow messages from</Trans> </Text> - <RadioGroup<AllowIncoming> - value={ + <Toggle.Group + label={_(msg`Allow messages from`)} + type="radio" + values={[ (profile?.associated?.chat?.allowIncoming as AllowIncoming) ?? - 'following' - } - items={[ - {label: _(msg`Everyone`), value: 'all'}, - {label: _(msg`Users I follow`), value: 'following'}, - {label: _(msg`No one`), value: 'none'}, + 'following', ]} - onSelect={onSelectItem} - /> - </View> - <View style={[a.px_md, a.py_lg, a.gap_md]}> - <Toggle.Item - name="a" - label="Click me" - value={preferences.playSoundChat} - onChange={() => { - setPref('playSoundChat', !preferences.playSoundChat) - }}> - <Toggle.Checkbox /> - <Toggle.LabelText>Notification Sounds</Toggle.LabelText> - </Toggle.Item> + onChange={onSelectItem}> + <View> + <Toggle.Item + name="all" + label={_(msg`Everyone`)} + style={[a.justify_between, a.py_sm]}> + <Toggle.LabelText> + <Trans>Everyone</Trans> + </Toggle.LabelText> + <Toggle.Radio /> + </Toggle.Item> + <Toggle.Item + name="following" + label={_(msg`Users I follow`)} + style={[a.justify_between, a.py_sm]}> + <Toggle.LabelText> + <Trans>Users I follow</Trans> + </Toggle.LabelText> + <Toggle.Radio /> + </Toggle.Item> + <Toggle.Item + name="none" + label={_(msg`No one`)} + style={[a.justify_between, a.py_sm]}> + <Toggle.LabelText> + <Trans>No one</Trans> + </Toggle.LabelText> + <Toggle.Radio /> + </Toggle.Item> + </View> + </Toggle.Group> + {isNative && ( + <> + <Divider style={[a.my_lg]} /> + <Toggle.Item + name="playSoundChat" + label={_(msg`Play notification sounds`)} + value={preferences.playSoundChat} + onChange={() => { + setPref('playSoundChat', !preferences.playSoundChat) + }}> + <Toggle.Checkbox /> + <Toggle.LabelText> + <Trans>Play notification sounds</Trans> + </Toggle.LabelText> + </Toggle.Item> + </> + )} </View> </CenteredView> ) |