From 0e9801443f8f91ff49b47f82151ee5984c9bd6c1 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 17 Nov 2023 11:37:04 +0100
Subject: [PATCH] Change to single opt-in during profile setup in onboarding in
 web UI (#27876)

---
 .../mastodon/features/onboarding/profile.jsx  | 34 ++++++-------
 app/javascript/mastodon/locales/en.json       |  5 +-
 app/javascript/styles/mastodon/forms.scss     | 49 +++++++++++++++++--
 3 files changed, 64 insertions(+), 24 deletions(-)

diff --git a/app/javascript/mastodon/features/onboarding/profile.jsx b/app/javascript/mastodon/features/onboarding/profile.jsx
index 19ba0bcb9..09e6b2c6c 100644
--- a/app/javascript/mastodon/features/onboarding/profile.jsx
+++ b/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>
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 16941e2ca..ed8bfe166 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/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!",
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index e72a01936..555d43cc1 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/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;
+    }
+  }
 }