Add tip to add interests if they have none or deselect

src/screens/Settings/SettingsInterests.tsx

@@ -14,6 +14,7 @@ import {useAgent} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {useInterestsDisplayNames} from '#/screens/Onboarding/state'
 import {atoms as a, useGutters, useTheme} from '#/alf'
+import {Admonition} from '#/components/Admonition'
 import {Divider} from '#/components/Divider'
 import * as Toggle from '#/components/forms/Toggle'
 import * as Layout from '#/components/Layout'
@@ -47,8 +48,7 @@ export function SettingsInterests() {
               t.atoms.text_contrast_medium,
             ]}>
             <Trans>
-              Selecting interests from the list below helps us deliver you
+              Your selected interests help us serve you content you care about.
-              higher quality content.
             </Trans>
           </Text>
 
@@ -124,25 +124,33 @@ function Inner({
   }
 
   return (
-    <Toggle.Group
+    <>
-      values={interests}
+      {interests.length === 0 && (
-      onChange={onChangeInterests}
+        <Admonition type="tip">
-      label={_(msg`Select your interests from the options below`)}>
+          <Trans>We recommend selecting at least two interests.</Trans>
-      <View style={[a.flex_row, a.flex_wrap, a.gap_sm]}>
+        </Admonition>
-        {INTERESTS.map(interest => {
+      )}
-          const name = interestsDisplayNames[interest]
+
-          if (!name) return null
+      <Toggle.Group
-          return (
+        values={interests}
-            <Toggle.Item
+        onChange={onChangeInterests}
-              key={interest}
+        label={_(msg`Select your interests from the options below`)}>
-              name={interest}
+        <View style={[a.flex_row, a.flex_wrap, a.gap_sm]}>
-              label={interestsDisplayNames[interest]}>
+          {INTERESTS.map(interest => {
-              <InterestButton interest={interest} />
+            const name = interestsDisplayNames[interest]
-            </Toggle.Item>
+            if (!name) return null
-          )
+            return (
-        })}
+              <Toggle.Item
-      </View>
+                key={interest}
-    </Toggle.Group>
+                name={interest}
+                label={interestsDisplayNames[interest]}>
+                <InterestButton interest={interest} />
+              </Toggle.Item>
+            )
+          })}
+        </View>
+      </Toggle.Group>
+    </>
   )
 }