Added styling

add favourite confirmation modal

app/controllers/settings/flavours_controller.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class Settings::FlavoursController < Settings::BaseController
+
+  def index
+    redirect_to action: 'show', flavour: current_flavour
+  end
+
+  def show
+    unless Themes.instance.flavours.include?(params[:flavour]) or params[:flavour] == current_flavour
+      redirect_to action: 'show', flavour: current_flavour
+    end
+
+    @listing = Themes.instance.flavours
+    @selected = params[:flavour]
+  end
+
+  def update
+    user_settings.update(user_settings_params(params[:flavour]).to_h)
+    redirect_to action: 'show', flavour: params[:flavour]
+  end
+
+  private
+
+  def user_settings
+    UserSettingsDecorator.new(current_user)
+  end
+
+  def user_settings_params(flavour)
+    params.require(:user).merge({ setting_flavour: flavour }).permit(
+      :setting_flavour,
+      :setting_skin
+    )
+  end
+end

app/controllers/settings/preferences_controller.rb

@@ -33,13 +33,12 @@ class Settings::PreferencesController < Settings::BaseController
       :setting_default_sensitive,
       :setting_unfollow_modal,
       :setting_boost_modal,
+      :setting_favourite_modal,
       :setting_delete_modal,
       :setting_auto_play_gif,
       :setting_reduce_motion,
       :setting_system_font_ui,
       :setting_noindex,
-      :setting_flavour,
-      :setting_skin,
       notification_emails: %i(follow follow_request reblog favourite mention digest),
       interactions: %i(must_be_follower must_be_following)
     )

app/javascript/core/settings.js

@@ -37,7 +37,3 @@ delegate(document, '#account_header', 'change', ({ target }) => {
 
   header.style.backgroundImage = `url(${url})`;
 });
-
-delegate(document, '#user_setting_flavour, #user_setting_skin', 'change', ({ target }) => {
-  target.form.submit();
-});

app/javascript/flavours/glitch/components/status.js

@@ -58,6 +58,7 @@ export default class Status extends ImmutablePureComponent {
     'settings',
     'prepend',
     'boostModal',
+    'favouriteModal',
     'muted',
     'collapse',
     'notification',
@@ -204,8 +205,8 @@ export default class Status extends ImmutablePureComponent {
     this.props.onReply(this.props.status, this.context.router.history);
   }
 
-  handleHotkeyFavourite = () => {
-    this.props.onFavourite(this.props.status);
+  handleHotkeyFavourite = (e) => {
+    this.props.onFavourite(this.props.status, e);
   }
 
   handleHotkeyBoost = e => {

app/javascript/flavours/glitch/components/status_action_bar.js

@@ -71,8 +71,8 @@ export default class StatusActionBar extends ImmutablePureComponent {
     });
   }
 
-  handleFavouriteClick = () => {
-    this.props.onFavourite(this.props.status);
+  handleFavouriteClick = (e) => {
+    this.props.onFavourite(this.props.status, e);
   }
 
   handleReblogClick = (e) => {

app/javascript/flavours/glitch/containers/status_container.js

@@ -20,7 +20,7 @@ import { initMuteModal } from 'flavours/glitch/actions/mutes';
 import { initReport } from 'flavours/glitch/actions/reports';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { boostModal, deleteModal } from 'flavours/glitch/util/initial_state';
+import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/util/initial_state';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -78,11 +78,19 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
-  onFavourite (status) {
+  onModalFavourite (status) {
+    dispatch(favourite(status));
+  },
+
+  onFavourite (status, e) {
     if (status.get('favourited')) {
       dispatch(unfavourite(status));
     } else {
-      dispatch(favourite(status));
+      if (e.shiftKey || !favouriteModal) {
+        this.onModalFavourite(status);
+      } else {
+        dispatch(openModal('FAVOURITE', { status, onFavourite: this.onModalFavourite }));
+      }
     }
   },
 

app/javascript/flavours/glitch/features/status/components/action_bar.js

@@ -48,8 +48,8 @@ export default class ActionBar extends React.PureComponent {
     this.props.onReblog(this.props.status, e);
   }
 
-  handleFavouriteClick = () => {
-    this.props.onFavourite(this.props.status);
+  handleFavouriteClick = (e) => {
+    this.props.onFavourite(this.props.status, e);
   }
 
   handleDeleteClick = () => {

app/javascript/flavours/glitch/features/status/index.js

@@ -30,7 +30,7 @@ import { openModal } from 'flavours/glitch/actions/modal';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { HotKeys } from 'react-hotkeys';
-import { boostModal, deleteModal } from 'flavours/glitch/util/initial_state';
+import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/util/initial_state';
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from 'flavours/glitch/util/fullscreen';
 
 const messages = defineMessages({
@@ -95,11 +95,19 @@ export default class Status extends ImmutablePureComponent {
     }
   };
 
-  handleFavouriteClick = (status) => {
+  handleModalFavourite = (status) => {
+    this.props.dispatch(favourite(status));
+  }
+
+  handleFavouriteClick = (status, e) => {
     if (status.get('favourited')) {
       this.props.dispatch(unfavourite(status));
     } else {
-      this.props.dispatch(favourite(status));
+      if (e.shiftKey || !favouriteModal) {
+        this.handleModalFavourite(status);
+      } else {
+        this.props.dispatch(openModal('FAVOURITE', { status, onFavourite: this.handleModalFavourite }));
+      }
     }
   }
 

app/javascript/flavours/glitch/features/ui/components/favourite_modal.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import Button from 'flavours/glitch/components/button';
+import StatusContent from 'flavours/glitch/components/status_content';
+import Avatar from 'flavours/glitch/components/avatar';
+import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
+import DisplayName from 'flavours/glitch/components/display_name';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+const messages = defineMessages({
+  favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
+});
+
+@injectIntl
+export default class FavouriteModal extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    onFavourite: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  componentDidMount() {
+    this.button.focus();
+  }
+
+  handleFavourite = () => {
+    this.props.onFavourite(this.props.status);
+    this.props.onClose();
+  }
+
+  handleAccountClick = (e) => {
+    if (e.button === 0) {
+      e.preventDefault();
+      this.props.onClose();
+      this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
+    }
+  }
+
+  setRef = (c) => {
+    this.button = c;
+  }
+
+  render () {
+    const { status, intl } = this.props;
+
+    return (
+      <div className='modal-root__modal favourite-modal'>
+        <div className='favourite-modal__container'>
+          <div className='status light'>
+            <div className='favourite-modal__status-header'>
+              <div className='favourite-modal__status-time'>
+                <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
+              </div>
+
+              <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
+                <div className='status__avatar'>
+                  <Avatar account={status.get('account')} size={48} />
+                </div>
+
+                <DisplayName account={status.get('account')} />
+              </a>
+            </div>
+
+            <StatusContent status={status} />
+          </div>
+        </div>
+
+        <div className='favourite-modal__action-bar'>
+          <div><FormattedMessage id='favourite_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <i className='fa fa-star' /></span> }} /></div>
+          <Button text={intl.formatMessage(messages.favourite)} onClick={this.handleFavourite} ref={this.setRef} />
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/flavours/glitch/features/ui/components/modal_root.js

@@ -7,6 +7,7 @@ import ActionsModal from './actions_modal';
 import MediaModal from './media_modal';
 import VideoModal from './video_modal';
 import BoostModal from './boost_modal';
+import FavouriteModal from './favourite_modal';
 import DoodleModal from './doodle_modal';
 import ConfirmationModal from './confirmation_modal';
 import {
@@ -23,6 +24,7 @@ const MODAL_COMPONENTS = {
   'ONBOARDING': OnboardingModal,
   'VIDEO': () => Promise.resolve({ default: VideoModal }),
   'BOOST': () => Promise.resolve({ default: BoostModal }),
+  'FAVOURITE': () => Promise.resolve({ default: FavouriteModal }),
   'DOODLE': () => Promise.resolve({ default: DoodleModal }),
   'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
   'MUTE': MuteModal,
@@ -92,7 +94,7 @@ export default class ModalRoot extends React.PureComponent {
   }
 
   renderLoading = modalId => () => {
-    return ['MEDIA', 'VIDEO', 'BOOST', 'DOODLE', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
+    return ['MEDIA', 'VIDEO', 'BOOST', 'FAVOURITE', 'DOODLE', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
   }
 
   renderError = (props) => {

app/javascript/flavours/glitch/locales/en.js

@@ -34,6 +34,8 @@ const messages = {
   'status.collapse': 'Collapse',
   'status.uncollapse': 'Uncollapse',
 
+  'favourite_modal.combo': 'You can press {combo} to skip this next time',
+
   'home.column_settings.show_direct': 'Show DMs',
 
   'notification.markForDeletion': 'Mark for deletion',

app/javascript/flavours/glitch/locales/ja.js

@@ -3,11 +3,11 @@ import inherited from 'mastodon/locales/ja.json';
 const messages = {
   'getting_started.open_source_notice': 'Glitchsocは{Mastodon}によるフリーなオープンソースソフトウェアです。誰でもGitHub（{github}）から開発に參加したり、問題を報告したりできます。',
   'layout.auto': '自動',
-  'layout.current_is': 'あなたの現在のレイアウト：',
-  'layout.desktop': 'デスクトップ',
-  'layout.mobile': 'モバイル',
+  'layout.current_is': 'あなたの現在のレイアウト:',
+  'layout.desktop': 'Desktop',
+  'layout.mobile': 'Mobile',
   'navigation_bar.app_settings': 'アプリ設定',
-  'getting_started.onboarding': '解説',
+  'getting_started.onboarding': '解説を表示',
   'onboarding.page_one.federation': '{domain}はMastodonのインスタンスです。Mastodonとは、独立したサーバが連携して作るソーシャルネットワークです。これらのサーバーをインスタンスと呼びます。',
   'onboarding.page_one.welcome': '{domain}へようこそ！',
   'onboarding.page_six.github': '{domain}はGlitchsocを使用しています。Glitchsocは{Mastodon}のフレンドリーな{fork}で、どんなMastodonアプリやインスタンスとも互換性があります。Glitchsocは完全に無料で、オープンソースです。{github}でバグ報告や機能要望あるいは貢獻をすることが可能です。',
@@ -29,8 +29,11 @@ const messages = {
   'settings.media_letterbox': 'メディアをレターボックス式で表示',
   'settings.media_fullwidth': '全幅メディアプリビュー',
   'settings.preferences': 'ユーザー設定',
-  'settings.wide_view': 'ワイドビュー（デスクトップレイアウトのみ）',
-  'settings.navbar_under': 'ナビを画面下部に移動させる（モバイルレイアウトのみ）',
+  'settings.wide_view': 'ワイドビュー(Desktopレイアウトのみ)',
+  'settings.navbar_under': 'ナビを画面下部に移動させる(Mobileレイアウトのみ)',
+  'settings.compose_box_opts': 'コンポーズボックス設定',
+  'settings.side_arm': 'セカンダリートゥートボタン',
+  'settings.layout': 'レイアウト',
   'status.collapse': '折りたたむ',
   'status.uncollapse': '折りたたみを解除',
 

app/javascript/flavours/glitch/names.yml

@@ -1,6 +1,8 @@
 en:
   flavours:
-    glitch: Glitch Edition
+    glitch:
+      description: The default flavour for GlitchSoc instances.
+      name: Glitch Edition
   skins:
     glitch:
       default: Default

app/javascript/flavours/glitch/packs/common.js

@@ -1 +1,4 @@
 import 'flavours/glitch/styles/index.scss';
+
+//  This ensures that webpack compiles our images.
+require.context('../images', true);

app/javascript/flavours/glitch/styles/admin.scss

@@ -246,6 +246,22 @@
   }
 }
 
+.flavour-screen {
+  display: block;
+  margin: 10px auto;
+  max-width: 100%;
+}
+
+.flavour-description {
+  display: block;
+  font-size: 16px;
+  margin: 10px 0;
+
+  & > p {
+    margin: 10px 0;
+  }
+}
+
 .report-accounts {
   display: flex;
   flex-wrap: wrap;

app/javascript/flavours/glitch/styles/components/index.scss

@@ -3913,6 +3913,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .boost-modal,
+.favourite-modal,
 .confirmation-modal,
 .report-modal,
 .actions-modal,
@@ -3944,7 +3945,8 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.boost-modal__container {
+.boost-modal__container,
+.favourite-modal__container{
   overflow-x: scroll;
   padding: 10px;
 
@@ -3955,6 +3957,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .boost-modal__action-bar,
+.favourite-modal__action-bar,
 .confirmation-modal__action-bar,
 .mute-modal__action-bar,
 .report-modal__action-bar {
@@ -3976,11 +3979,13 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.boost-modal__status-header {
+.boost-modal__status-header,
+.favourite-modal__status-header {
   font-size: 15px;
 }
 
-.boost-modal__status-time {
+.boost-modal__status-time,
+.favourite-modal__status-time {
   float: right;
   font-size: 14px;
 }

app/javascript/flavours/glitch/theme.yml

@@ -26,6 +26,12 @@ pack:
 #  language tags and whose default exports are a messages object.
 locales: locales
 
+#  (OPTIONAL) A file to use as the preview screenshot for the flavour,
+#  or an array thereof. These filenames must be unique across all
+#  images (regardless of path), so it's a good idea to namespace them
+#  to your theme. It's up to you to let webpack know to compile them.
+screenshot: glitch-preview.jpg
+
 #  (OPTIONAL) The directory which contains the pack files.
 #  Defaults to the theme directory (`app/javascript/themes/[theme]`),
 #  which should be sufficient for like 99% of use-cases lol.

app/javascript/flavours/glitch/util/initial_state.js

@@ -15,6 +15,7 @@ export const reduceMotion = getMeta('reduce_motion');
 export const autoPlayGif = getMeta('auto_play_gif');
 export const unfollowModal = getMeta('unfollow_modal');
 export const boostModal = getMeta('boost_modal');
+export const favouriteModal = getMeta('favourite_modal');
 export const deleteModal = getMeta('delete_modal');
 export const me = getMeta('me');
 

app/javascript/flavours/vanilla/names.yml

@@ -1,6 +1,8 @@
 en:
   flavours:
-    vanilla: Vanilla Mastodon
+    vanilla:
+      description: The theme used by vanilla Mastodon instances. This theme might not support all of the features of GlitchSoc.
+      name: Vanilla Mastodon
   skins:
     vanilla:
       default: Default

app/javascript/flavours/vanilla/theme.yml

@@ -24,6 +24,12 @@ pack:
 #  the flavour, relative to this directory.
 locales: ../../mastodon/locales
 
+#  (OPTIONAL) A file to use as the preview screenshot for the flavour,
+#  or an array thereof. These filenames must be unique across all
+#  images (regardless of path), so it's a good idea to namespace them
+#  to your theme. It's up to you to let webpack know to compile them.
+screenshot: screenshot.jpg
+
 #  (OPTIONAL) The directory which contains the pack files.
 #  Defaults to this directory (`app/javascript/flavour/[flavour]`),
 #  but in the case of the vanilla Mastodon flavour the pack files are

app/javascript/mastodon/locales/defaultMessages.json

@@ -1293,6 +1293,19 @@
     ],
     "path": "app/javascript/mastodon/features/ui/components/boost_modal.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "Favourite",
+        "id": "status.favourite"
+      },
+      {
+        "defaultMessage": "You can press {combo} to skip this next time",
+        "id": "favourite_modal.combo"
+      }
+    ],
+    "path": "app/javascript/mastodon/features/ui/components/favourite_modal.json"
+  },
   {
     "descriptors": [
       {
@@ -1601,4 +1614,4 @@
     ],
     "path": "app/javascript/mastodon/features/video/index.json"
   }
-]
+]

app/javascript/mastodon/locales/en.json

@@ -33,6 +33,7 @@
   "bundle_modal_error.retry": "Try again",
   "column.blocks": "Blocked users",
   "column.community": "Local timeline",
+  "column.direct": "Direct messages",
   "column.favourites": "Favourites",
   "column.follow_requests": "Follow requests",
   "column.home": "Home",
@@ -88,6 +89,7 @@
   "emoji_button.symbols": "Symbols",
   "emoji_button.travel": "Travel & Places",
   "empty_column.community": "The local timeline is empty. Write something publicly to get the ball rolling!",
+  "empty_column.direct": "You don't have any direct messages yet. When you send or receive one, it will show up here.",
   "empty_column.hashtag": "There is nothing in this hashtag yet.",
   "empty_column.home": "Your home timeline is empty! Visit {public} or use search to get started and meet other users.",
   "empty_column.home.public_timeline": "the public timeline",
@@ -141,6 +143,7 @@
   "mute_modal.hide_notifications": "Hide notifications from this user?",
   "navigation_bar.blocks": "Blocked users",
   "navigation_bar.community_timeline": "Local timeline",
+  "navigation_bar.direct": "Direct messages",
   "navigation_bar.edit_profile": "Edit profile",
   "navigation_bar.favourites": "Favourites",
   "navigation_bar.follow_requests": "Follow requests",

app/javascript/mastodon/locales/ja.json

@@ -33,6 +33,7 @@
   "bundle_modal_error.retry": "再試行",
   "column.blocks": "ブロックしたユーザー",
   "column.community": "ローカルタイムライン",
+  "column.direct": "ダイレクトメッセージ",
   "column.favourites": "お気に入り",
   "column.follow_requests": "フォローリクエスト",
   "column.home": "ホーム",
@@ -88,6 +89,7 @@
   "emoji_button.symbols": "記号",
   "emoji_button.travel": "旅行と場所",
   "empty_column.community": "ローカルタイムラインはまだ使われていません。何か書いてみましょう！",
+  "empty_column.direct": "あなたはまだダイレクトメッセージを受け取っていません。あなたが送ったり受け取ったりすると、ここに表示されます。",
   "empty_column.hashtag": "このハッシュタグはまだ使われていません。",
   "empty_column.home": "まだ誰もフォローしていません。{public}を見に行くか、検索を使って他のユーザーを見つけましょう。",
   "empty_column.home.public_timeline": "連合タイムライン",
@@ -141,6 +143,7 @@
   "mute_modal.hide_notifications": "このユーザーからの通知を隠しますか？",
   "navigation_bar.blocks": "ブロックしたユーザー",
   "navigation_bar.community_timeline": "ローカルタイムライン",
+  "navigation_bar.direct": "ダイレクトメッセージ",
   "navigation_bar.edit_profile": "プロフィールを編集",
   "navigation_bar.favourites": "お気に入り",
   "navigation_bar.follow_requests": "フォローリクエスト",

app/lib/themes.rb

@@ -14,17 +14,27 @@ class Themes
     result = Hash.new
     Dir.glob(Rails.root.join('app', 'javascript', 'flavours', '*', 'theme.yml')) do |path|
       data = YAML.load_file(path)
-      name = File.basename(File.dirname(path))
+      dir = File.dirname(path)
+      name = File.basename(dir)
+      locales = []
+      screenshots = []
       if data['locales']
-        locales = []
-        Dir.glob(File.join(File.dirname(path), data['locales'], '*.{js,json}')) do |locale|
+        Dir.glob(File.join(dir, data['locales'], '*.{js,json}')) do |locale|
           localeName = File.basename(locale, File.extname(locale))
           locales.push(localeName) unless localeName.match(/defaultMessages|whitelist|index/)
         end
-        data['locales'] = locales
+      end
+      if data['screenshot']
+        if data['screenshot'].is_a? Array
+          screenshots = data['screenshot']
+        else
+          screenshots.push(data['screenshot'])
+        end
       end
       if data['pack']
         data['name'] = name
+        data['locales'] = locales
+        data['screenshot'] = screenshots
         data['skin'] = { 'default' => [] }
         result[name] = data
       end

app/lib/user_settings_decorator.rb

@@ -21,6 +21,7 @@ class UserSettingsDecorator
     user.settings['default_sensitive']   = default_sensitive_preference if change?('setting_default_sensitive')
     user.settings['unfollow_modal']      = unfollow_modal_preference if change?('setting_unfollow_modal')
     user.settings['boost_modal']         = boost_modal_preference if change?('setting_boost_modal')
+    user.settings['favourite_modal']         = favourite_modal_preference if change?('setting_favourite_modal')
     user.settings['delete_modal']        = delete_modal_preference if change?('setting_delete_modal')
     user.settings['auto_play_gif']       = auto_play_gif_preference if change?('setting_auto_play_gif')
     user.settings['reduce_motion']       = reduce_motion_preference if change?('setting_reduce_motion')
@@ -53,6 +54,10 @@ class UserSettingsDecorator
   def boost_modal_preference
     boolean_cast_setting 'setting_boost_modal'
   end
+  
+  def favourite_modal_preference
+    boolean_cast_setting 'setting_favourite_modal'
+  end
 
   def delete_modal_preference
     boolean_cast_setting 'setting_delete_modal'

app/models/user.rb

@@ -75,7 +75,7 @@ class User < ApplicationRecord
 
   has_many :session_activations, dependent: :destroy
 
-  delegate :auto_play_gif, :default_sensitive, :unfollow_modal, :boost_modal, :delete_modal,
+  delegate :auto_play_gif, :default_sensitive, :unfollow_modal, :boost_modal, :favourite_modal, :delete_modal,
            :reduce_motion, :system_font_ui, :noindex, :flavour, :skin,
            to: :settings, prefix: :setting, allow_nil: false
 

app/serializers/initial_state_serializer.rb

@@ -28,6 +28,7 @@ class InitialStateSerializer < ActiveModel::Serializer
       store[:me]             = object.current_account.id.to_s
       store[:unfollow_modal] = object.current_account.user.setting_unfollow_modal
       store[:boost_modal]    = object.current_account.user.setting_boost_modal
+      store[:favourite_modal]  = object.current_account.user.setting_favourite_modal
       store[:delete_modal]   = object.current_account.user.setting_delete_modal
       store[:auto_play_gif]  = object.current_account.user.setting_auto_play_gif
       store[:reduce_motion]  = object.current_account.user.setting_reduce_motion

app/views/settings/flavours/show.html.haml

@@ -0,0 +1,19 @@
+- content_for :page_title do
+  = t "flavours.#{@selected}.name", default: @selected
+
+= simple_form_for current_user, url: settings_flavour_path(@selected), html: { method: :put } do |f|
+  = render 'shared/error_messages', object: current_user
+
+  - Themes.instance.flavour(@selected)['screenshot'].each do |screen|
+    %img.flavour-screen{ src: asset_pack_path(screen) }
+
+  .flavour-description
+    = t "flavours.#{@selected}.description", default: ''
+
+  %hr/
+
+  .fields-group
+    = f.input :setting_skin, collection: Themes.instance.skins_for(@selected), label_method: lambda { |skin| I18n.t("skins.#{@selected}.#{skin}", default: skin) }, wrapper: :with_label, include_blank: false
+
+  .actions
+    = f.button :button, t('generic.use_this'), type: :submit

app/views/settings/preferences/show.html.haml

@@ -26,12 +26,9 @@
   %h4= t 'preferences.web'
 
   .fields-group
-    - if Themes.instance.flavours.size > 1
-      = f.input :setting_flavour, collection: Themes.instance.flavours, label_method: lambda { |flavour| I18n.t("flavours.#{flavour}", default: flavour) }, wrapper: :with_label, include_blank: false
-      = f.input :setting_skin, collection: Themes.instance.skins_for(current_flavour), label_method: lambda { |skin| I18n.t("skins.#{current_flavour}.#{skin}", default: skin) }, wrapper: :with_label, include_blank: false
-
     = f.input :setting_unfollow_modal, as: :boolean, wrapper: :with_label
     = f.input :setting_boost_modal, as: :boolean, wrapper: :with_label
+    = f.input :setting_favourite_modal, as: :boolean, wrapper: :with_label
     = f.input :setting_delete_modal, as: :boolean, wrapper: :with_label
 
   .fields-group

config/locales/en.yml

@@ -424,6 +424,7 @@ en:
     changes_saved_msg: Changes successfully saved!
     powered_by: powered by %{link}
     save_changes: Save changes
+    use_this: Use this
     validation_errors:
       one: Something isn't quite right yet! Please review the error below
       other: Something isn't quite right yet! Please review %{count} errors below
@@ -587,6 +588,7 @@ en:
     development: Development
     edit_profile: Edit profile
     export: Data export
+    flavours: Flavours
     followers: Authorized followers
     import: Import
     keyword_mutes: Muted keywords

config/locales/simple_form.en.yml

@@ -13,7 +13,6 @@ en:
         note:
           one: <span class="note-counter">1</span> character left
           other: <span class="note-counter">%{count}</span> characters left
-        setting_flavour: Affects how Mastodon looks when you're logged in from any device
         setting_noindex: Affects your public profile and status pages
         setting_skin: Reskins the selected Mastodon flavour
       imports:
@@ -46,7 +45,7 @@ en:
         setting_default_privacy: Post privacy
         setting_default_sensitive: Always mark media as sensitive
         setting_delete_modal: Show confirmation dialog before deleting a toot
-        setting_flavour: Flavour
+        setting_favourite_modal: Show confirmation dialog before favouriting
         setting_noindex: Opt-out of search engine indexing
         setting_reduce_motion: Reduce motion in animations
         setting_skin: Skin

config/navigation.rb

@@ -17,6 +17,12 @@ SimpleNavigation::Configuration.run do |navigation|
       settings.item :follower_domains, safe_join([fa_icon('users fw'), t('settings.followers')]), settings_follower_domains_url
     end
 
+    primary.item :flavours, safe_join([fa_icon('paint-brush fw'), t('settings.flavours')]), settings_flavours_url do |flavours|
+      Themes.instance.flavours.each do |flavour|
+        flavours.item flavour.to_sym, safe_join([fa_icon('star fw'), t("flavours.#{flavour}.name", default: flavour)]), settings_flavour_url(flavour)
+      end
+    end
+
     primary.item :invites, safe_join([fa_icon('user-plus fw'), t('invites.title')]), invites_path, if: proc { Setting.min_invite_role == 'user' }
 
     primary.item :development, safe_join([fa_icon('code fw'), t('settings.development')]), settings_applications_url do |development|

config/routes.rb

@@ -102,6 +102,8 @@ Rails.application.routes.draw do
       end
     end
 
+    resources :flavours, only: [:index, :show, :update], param: :flavour
+
     resource :delete, only: [:show, :destroy]
     resource :migration, only: [:show, :update]
 
@@ -240,7 +242,7 @@ Rails.application.routes.draw do
       resources :media,      only: [:create, :update]
       resources :blocks,     only: [:index]
       resources :mutes,      only: [:index] do
-        collection do 
+        collection do
           get 'details'
         end
       end

config/settings.yml

@@ -22,6 +22,7 @@ defaults: &defaults
   default_sensitive: false
   unfollow_modal: false
   boost_modal: false
+  favourite_modal: false
   delete_modal: true
   auto_play_gif: false
   reduce_motion: false