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

* use Toggle component

* nits + notifs sounds native only

1 files changed, 62 insertions, 26 deletions

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