Change to single opt-in during profile setup in onboarding in web UI (#27876)

app/javascript/mastodon/features/onboarding/profile.jsx

@@ -5,8 +5,8 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
-import { useDispatch } from 'react-redux';
 
+import { useDispatch } from 'react-redux';
 
 import { ReactComponent as AddPhotoAlternateIcon } from '@material-symbols/svg-600/outlined/add_photo_alternate.svg';
 import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
@@ -33,7 +33,6 @@ export const Profile = () => {
   const [avatar, setAvatar] = useState(null);
   const [header, setHeader] = useState(null);
   const [discoverable, setDiscoverable] = useState(account.get('discoverable'));
-  const [indexable, setIndexable] = useState(account.get('indexable'));
   const [isSaving, setIsSaving] = useState(false);
   const [errors, setErrors] = useState();
   const avatarFileRef = createRef();
@@ -54,10 +53,6 @@ export const Profile = () => {
     setDiscoverable(e.target.checked);
   }, [setDiscoverable]);
 
-  const handleIndexableChange = useCallback(e => {
-    setIndexable(e.target.checked);
-  }, [setIndexable]);
-
   const handleAvatarChange = useCallback(e => {
     setAvatar(e.target?.files?.[0]);
   }, [setAvatar]);
@@ -78,12 +73,12 @@ export const Profile = () => {
       avatar,
       header,
       discoverable,
-      indexable,
+      indexable: discoverable,
     })).then(() => history.push('/start/follows')).catch(err => {
       setIsSaving(false);
       setErrors(err.response.data.details);
     });
-  }, [dispatch, displayName, note, avatar, header, discoverable, indexable, history]);
+  }, [dispatch, displayName, note, avatar, header, discoverable, history]);
 
   return (
     <>
@@ -141,18 +136,21 @@ export const Profile = () => {
               <textarea id='note' value={note} onChange={handleNoteChange} maxLength={500} />
             </div>
           </div>
+
+          <label className='app-form__toggle'>
+            <div className='app-form__toggle__label'>
+              <strong><FormattedMessage id='onboarding.profile.discoverable' defaultMessage='Make my profile discoverable' /></strong> <span className='recommended'><FormattedMessage id='recommended' defaultMessage='Recommended' /></span>
+              <span className='hint'><FormattedMessage id='onboarding.profile.discoverable_hint' defaultMessage='When you opt in to discoverability on Mastodon, your posts may appear in search results and trending, and your profile may be suggested to people with similar interests to you.' /></span>
+            </div>
+
+            <div className='app-form__toggle__toggle'>
+              <div>
+                <Toggle checked={discoverable} onChange={handleDiscoverableChange} />
+              </div>
+            </div>
+          </label>
         </div>
 
-        <label className='report-dialog-modal__toggle'>
-          <Toggle checked={discoverable} onChange={handleDiscoverableChange} />
-          <FormattedMessage id='onboarding.profile.discoverable' defaultMessage='Feature profile and posts in discovery algorithms' />
-        </label>
-
-        <label className='report-dialog-modal__toggle'>
-          <Toggle checked={indexable} onChange={handleIndexableChange} />
-          <FormattedMessage id='onboarding.profile.indexable' defaultMessage='Include public posts in search results' />
-        </label>
-
         <div className='onboarding__footer'>
           <Button block onClick={handleSubmit} disabled={isSaving}>{isSaving ? <LoadingIndicator /> : <FormattedMessage id='onboarding.profile.save_and_continue' defaultMessage='Save and continue' />}</Button>
         </div>

app/javascript/mastodon/locales/en.json

@@ -481,10 +481,10 @@
   "onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
   "onboarding.follows.lead": "Your home feed is the primary way to experience Mastodon. The more people you follow, the more active and interesting it will be. To get you started, here are some suggestions:",
   "onboarding.follows.title": "Personalize your home feed",
-  "onboarding.profile.discoverable": "Feature profile and posts in discovery algorithms",
+  "onboarding.profile.discoverable": "Make my profile discoverable",
+  "onboarding.profile.discoverable_hint": "When you opt in to discoverability on Mastodon, your posts may appear in search results and trending, and your profile may be suggested to people with similar interests to you.",
   "onboarding.profile.display_name": "Display name",
   "onboarding.profile.display_name_hint": "Your full name or your fun name…",
-  "onboarding.profile.indexable": "Include public posts in search results",
   "onboarding.profile.lead": "You can always complete this later in the settings, where even more customization options are available.",
   "onboarding.profile.note": "Bio",
   "onboarding.profile.note_hint": "You can @mention other people or #hashtags…",
@@ -535,6 +535,7 @@
   "privacy.unlisted.short": "Unlisted",
   "privacy_policy.last_updated": "Last updated {date}",
   "privacy_policy.title": "Privacy Policy",
+  "recommended": "Recommended",
   "refresh": "Refresh",
   "regeneration_indicator.label": "Loading…",
   "regeneration_indicator.sublabel": "Your home feed is being prepared!",

app/javascript/styles/mastodon/forms.scss

@@ -1222,10 +1222,6 @@ code {
 }
 
 .app-form {
-  & > * {
-    margin-bottom: 16px;
-  }
-
   &__avatar-input,
   &__header-input {
     display: block;
@@ -1290,4 +1286,49 @@ code {
   &__header-input {
     aspect-ratio: 580/193;
   }
+
+  &__toggle {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    color: $darker-text-color;
+    font-size: 14px;
+    line-height: 20px;
+
+    .icon {
+      flex: 0 0 auto;
+    }
+
+    .icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    &__label {
+      flex: 1 1 auto;
+
+      strong {
+        color: $primary-text-color;
+        font-weight: 600;
+      }
+
+      .recommended {
+        position: absolute;
+        margin: 0 4px;
+        margin-top: -2px;
+      }
+    }
+
+    &__toggle {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+    }
+
+    &__toggle > div {
+      display: flex;
+      border-inline-start: 1px solid lighten($ui-base-color, 8%);
+      padding-inline-start: 16px;
+    }
+  }
 }