[🐴] use Toggle component in settings screen (#4048)

* use Toggle component

* nits + notifs sounds native only

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>
   )