Change preferences page into appearance, notifications, and other (#10977)

11 files changed, 89 insertions, 77 deletions

diff --git a/app/controllers/settings/notifications_controller.rb b/app/controllers/settings/notifications_controller.rb
deleted file mode 100644
index b2ce83e42..000000000
--- a/app/controllers/settings/notifications_controller.rb
+++ /dev/null
@@ -1,32 +0,0 @@
-# frozen_string_literal: true
-
-class Settings::NotificationsController < Settings::BaseController
-  layout 'admin'
-
-  before_action :authenticate_user!
-
-  def show; end
-
-  def update
-    user_settings.update(user_settings_params.to_h)
-
-    if current_user.save
-      redirect_to settings_notifications_path, notice: I18n.t('generic.changes_saved_msg')
-    else
-      render :show
-    end
-  end
-
-  private
-
-  def user_settings
-    UserSettingsDecorator.new(current_user)
-  end
-
-  def user_settings_params
-    params.require(:user).permit(
-      notification_emails: %i(follow follow_request reblog favourite mention digest report pending_account),
-      interactions: %i(must_be_follower must_be_following must_be_following_dm)
-    )
-  end
-end
diff --git a/app/controllers/settings/preferences/appearance_controller.rb b/app/controllers/settings/preferences/appearance_controller.rb
new file mode 100644
index 000000000..80ea57bd2
--- /dev/null
+++ b/app/controllers/settings/preferences/appearance_controller.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Settings::Preferences::AppearanceController < Settings::PreferencesController
+  private
+
+  def after_update_redirect_path
+    settings_preferences_appearance_path
+  end
+end
diff --git a/app/controllers/settings/preferences/notifications_controller.rb b/app/controllers/settings/preferences/notifications_controller.rb
new file mode 100644
index 000000000..a16ae6a67
--- /dev/null
+++ b/app/controllers/settings/preferences/notifications_controller.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Settings::Preferences::NotificationsController < Settings::PreferencesController
+  private
+
+  def after_update_redirect_path
+    settings_preferences_notifications_path
+  end
+end
diff --git a/app/controllers/settings/preferences_controller.rb b/app/controllers/settings/preferences_controller.rb
index 930ff70e7..110debd6e 100644
--- a/app/controllers/settings/preferences_controller.rb
+++ b/app/controllers/settings/preferences_controller.rb
@@ -12,7 +12,7 @@ class Settings::PreferencesController < Settings::BaseController
 
     if current_user.update(user_params)
       I18n.locale = current_user.locale
-      redirect_to settings_preferences_path, notice: I18n.t('generic.changes_saved_msg')
+      redirect_to after_update_redirect_path, notice: I18n.t('generic.changes_saved_msg')
     else
       render :show
     end
@@ -20,6 +20,10 @@ class Settings::PreferencesController < Settings::BaseController
 
   private
 
+  def after_update_redirect_path
+    settings_preferences_path
+  end
+
   def user_settings
     UserSettingsDecorator.new(current_user)
   end
@@ -51,7 +55,7 @@ class Settings::PreferencesController < Settings::BaseController
       :setting_show_application,
       :setting_advanced_layout,
       notification_emails: %i(follow follow_request reblog favourite mention digest report pending_account),
-      interactions: %i(must_be_follower must_be_following)
+      interactions: %i(must_be_follower must_be_following must_be_following_dm)
     )
   end
 end
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index a93e1ea12..f95313a25 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -197,7 +197,8 @@
   }
 }
 
-.account-role {
+.account-role,
+.simple_form .recommended {
   display: inline-block;
   padding: 4px 6px;
   cursor: default;
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index f3de87791..456ee4e0d 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -79,6 +79,12 @@ code {
           text-decoration: none;
         }
       }
+
+      .recommended {
+        position: absolute;
+        margin: 0 4px;
+        margin-top: -2px;
+      }
     }
   }
 
@@ -443,6 +449,10 @@ code {
     height: 41px;
   }
 
+  h4 {
+    margin-bottom: 15px !important;
+  }
+
   .label_input {
     &__wrapper {
       position: relative;
diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml
index 4ffe3d79a..343bcb265 100644
--- a/app/views/layouts/mailer.html.haml
+++ b/app/views/layouts/mailer.html.haml
@@ -46,7 +46,7 @@
                             %tbody
                               %td.column-cell
                                 %p= t 'about.hosted_on', domain: site_hostname
-                                %p= link_to t('application_mailer.notification_preferences'), settings_notifications_url
+                                %p= link_to t('application_mailer.notification_preferences'), settings_preferences_notifications_url
                               %td.column-cell.text-right
                                 = link_to root_url do
                                   = image_tag full_pack_url('media/images/mailer/logo_transparent.png'), alt: 'Mastodon', height: 24
diff --git a/app/views/settings/preferences/appearance/show.html.haml b/app/views/settings/preferences/appearance/show.html.haml
new file mode 100644
index 000000000..10f009264
--- /dev/null
+++ b/app/views/settings/preferences/appearance/show.html.haml
@@ -0,0 +1,41 @@
+- content_for :page_title do
+  = t('settings.appearance')
+
+= simple_form_for current_user, url: settings_preferences_appearance_path, html: { method: :put } do |f|
+  .fields-row
+    .fields-group.fields-row__column.fields-row__column-6
+      = f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) }, selected: I18n.locale, hint: false
+    .fields-group.fields-row__column.fields-row__column-6
+      = f.input :setting_theme, collection: Themes.instance.names, label_method: lambda { |theme| I18n.t("themes.#{theme}", default: theme) }, wrapper: :with_label, include_blank: false, hint: false
+
+  %h4= t 'appearance.advanced_web_interface'
+
+  %p.hint= t 'appearance.advanced_web_interface_hint'
+
+  .fields-group
+    = f.input :setting_advanced_layout, as: :boolean, wrapper: :with_label, hint: false
+
+  %h4= t 'appearance.animations_and_accessibility'
+
+  .fields-group
+    = f.input :setting_auto_play_gif, as: :boolean, wrapper: :with_label, recommended: true
+    = f.input :setting_reduce_motion, as: :boolean, wrapper: :with_label
+    = f.input :setting_system_font_ui, as: :boolean, wrapper: :with_label
+
+  %h4= t 'appearance.confirmation_dialogs'
+
+  .fields-group
+    = f.input :setting_unfollow_modal, as: :boolean, wrapper: :with_label
+    = f.input :setting_boost_modal, as: :boolean, wrapper: :with_label
+    = f.input :setting_delete_modal, as: :boolean, wrapper: :with_label
+
+  %h4= t 'appearance.sensitive_content'
+
+  .fields-group
+    = f.input :setting_display_media, collection: ['default', 'show_all', 'hide_all'],label_method: lambda { |item| t("simple_form.hints.defaults.setting_display_media_#{item}") }, hint: false, as: :radio_buttons, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li', wrapper: :with_floating_label
+
+  .fields-group
+    = f.input :setting_expand_spoilers, as: :boolean, wrapper: :with_label
+
+  .actions
+    = f.button :button, t('generic.save_changes'), type: :submit
diff --git a/app/views/settings/notifications/show.html.haml b/app/views/settings/preferences/notifications/show.html.haml
index 6ec57b502..acc646fc3 100644
--- a/app/views/settings/notifications/show.html.haml
+++ b/app/views/settings/preferences/notifications/show.html.haml
@@ -1,7 +1,7 @@
 - content_for :page_title do
   = t('settings.notifications')
 
-= simple_form_for current_user, url: settings_notifications_path, html: { method: :put } do |f|
+= simple_form_for current_user, url: settings_preferences_notifications_path, html: { method: :put } do |f|
   = render 'shared/error_messages', object: current_user
 
   .fields-group
diff --git a/app/views/settings/preferences/show.html.haml b/app/views/settings/preferences/show.html.haml
index 35b660a68..c966a16bc 100644
--- a/app/views/settings/preferences/show.html.haml
+++ b/app/views/settings/preferences/show.html.haml
@@ -1,34 +1,9 @@
 - content_for :page_title do
   = t('settings.preferences')
 
-%ul.quick-nav
-  %li= link_to t('preferences.languages'), '#settings_languages'
-  %li= link_to t('preferences.publishing'), '#settings_publishing'
-  %li= link_to t('preferences.other'), '#settings_other'
-  %li= link_to t('preferences.web'), '#settings_web'
-  %li= link_to t('settings.notifications'), settings_notifications_path
-
 = simple_form_for current_user, url: settings_preferences_path, html: { method: :put } do |f|
   = render 'shared/error_messages', object: current_user
 
-  .fields-row#settings_languages
-    .fields-group.fields-row__column.fields-row__column-6
-      = f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) }, selected: I18n.locale
-    .fields-group.fields-row__column.fields-row__column-6
-      = f.input :setting_default_language, collection: [nil] + filterable_languages.sort, wrapper: :with_label, label_method: lambda { |locale| locale.nil? ? I18n.t('statuses.language_detection') : human_locale(locale) }, required: false, include_blank: false
-
-  .fields-group
-    = f.input :chosen_languages, collection: filterable_languages.sort, wrapper: :with_block_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) }, required: false, as: :check_boxes, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li'
-
-  %hr#settings_publishing/
-
-  .fields-group
-    = f.input :setting_default_privacy, collection: Status.selectable_visibilities, wrapper: :with_floating_label, include_blank: false, label_method: lambda { |visibility| safe_join([I18n.t("statuses.visibilities.#{visibility}"), content_tag(:span, I18n.t("statuses.visibilities.#{visibility}_long"), class: 'hint')]) }, required: false, as: :radio_buttons, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li'
-
-    = f.input :setting_default_sensitive, as: :boolean, wrapper: :with_label
-
-  %hr#settings_other/
-
   .fields-group
     = f.input :setting_noindex, as: :boolean, wrapper: :with_label
 
@@ -36,32 +11,27 @@
     = f.input :setting_hide_network, as: :boolean, wrapper: :with_label
 
   .fields-group
-    = f.input :setting_show_application, as: :boolean, wrapper: :with_label
+    = f.input :setting_aggregate_reblogs, as: :boolean, wrapper: :with_label, recommended: true
 
-  %hr#settings_web/
+  %h4= t 'preferences.posting_defaults'
 
   .fields-row
     .fields-group.fields-row__column.fields-row__column-6
-      = f.input :setting_theme, collection: Themes.instance.names, label_method: lambda { |theme| I18n.t("themes.#{theme}", default: theme) }, wrapper: :with_label, include_blank: false, hint: false
+      = f.input :setting_default_privacy, collection: Status.selectable_visibilities, wrapper: :with_label, include_blank: false, label_method: lambda { |visibility| safe_join([I18n.t("statuses.visibilities.#{visibility}"), I18n.t("statuses.visibilities.#{visibility}_long")], ' - ') }, required: false, hint: false
+
     .fields-group.fields-row__column.fields-row__column-6
-      = f.input :setting_display_media, collection: ['default', 'show_all', 'hide_all'], wrapper: :with_label, include_blank: false, label_method: lambda { |item| t("simple_form.hints.defaults.setting_display_media_#{item}") }, hint: false
+      = f.input :setting_default_language, collection: [nil] + filterable_languages.sort, wrapper: :with_label, label_method: lambda { |locale| locale.nil? ? I18n.t('statuses.language_detection') : human_locale(locale) }, required: false, include_blank: false, hint: false
 
   .fields-group
-    = f.input :setting_advanced_layout, as: :boolean, wrapper: :with_label
+    = f.input :setting_default_sensitive, as: :boolean, wrapper: :with_label
 
   .fields-group
-    = f.input :setting_unfollow_modal, as: :boolean, wrapper: :with_label
-    = f.input :setting_boost_modal, as: :boolean, wrapper: :with_label
-    = f.input :setting_delete_modal, as: :boolean, wrapper: :with_label
+    = f.input :setting_show_application, as: :boolean, wrapper: :with_label, recommended: true
 
-  .fields-group
-    = f.input :setting_aggregate_reblogs, as: :boolean, wrapper: :with_label
+  %h4= t 'preferences.public_timelines'
 
   .fields-group
-    = f.input :setting_auto_play_gif, as: :boolean, wrapper: :with_label
-    = f.input :setting_expand_spoilers, as: :boolean, wrapper: :with_label
-    = f.input :setting_reduce_motion, as: :boolean, wrapper: :with_label
-    = f.input :setting_system_font_ui, as: :boolean, wrapper: :with_label
+    = f.input :chosen_languages, collection: filterable_languages.sort, wrapper: :with_block_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) }, required: false, as: :check_boxes, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li'
 
   .actions
     = f.button :button, t('generic.save_changes'), type: :submit
diff --git a/app/views/settings/profiles/show.html.haml b/app/views/settings/profiles/show.html.haml
index 8ffb01824..f8a8fddd3 100644
--- a/app/views/settings/profiles/show.html.haml
+++ b/app/views/settings/profiles/show.html.haml
@@ -28,7 +28,7 @@
 
   - if Setting.profile_directory
     .fields-group
-      = f.input :discoverable, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.discoverable_html', min_followers: Account::MIN_FOLLOWERS_DISCOVERY, path: explore_path)
+      = f.input :discoverable, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.discoverable_html', min_followers: Account::MIN_FOLLOWERS_DISCOVERY, path: explore_path), recommended: true
 
   %hr.spacer/