From 85c0d8de524114b26fef6f4c2c80871a33066002 Mon Sep 17 00:00:00 2001
From: Ushitora Anqou <ushitora@anqou.net>
Date: Sun, 24 Sep 2023 12:37:18 +0900
Subject: [PATCH] support multiple Web UI styles thanks to
 github.com/akane-blue/mastodon

Thanks to:

- https://github.com/akane-blue/mastodon/commit/619998afe1d98e55f874f90c6b0d3c651130b38a
- https://github.com/akane-blue/mastodon/commit/250ad2d71ecd71be133990fc6174ec0731840551
- https://github.com/akane-blue/mastodon/commit/0ff156c4c99e8bdfb86afe280327f7ba42882884
- https://github.com/akane-blue/mastodon/commit/f7d3270e2c7d7d8c26585290e07925e79bd87ef8
- https://github.com/akane-blue/mastodon/commit/0ec841b6221f8eeb70eadbf96aba0b8dd1bb7e1a
---
 app/helpers/application_helper.rb             |   7 +
 app/javascript/styles/application.scss        |   2 +
 .../styles/mods/compact-padding.scss          |  40 ++++++
 app/javascript/styles/mods/legacy-style.scss  | 123 ++++++++++++++++++
 app/models/concerns/user/has_settings.rb      |   4 +
 app/models/user_settings.rb                   |   1 +
 app/serializers/initial_state_serializer.rb   |   1 +
 .../preferences/appearance/show.html.haml     |   3 +
 config/locales/simple_form.en.yml             |   5 +
 config/locales/simple_form.ja.yml             |   5 +
 10 files changed, 191 insertions(+)
 create mode 100644 app/javascript/styles/mods/compact-padding.scss
 create mode 100644 app/javascript/styles/mods/legacy-style.scss

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 8f9a433d82d226..8ef279cd3b8425 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -154,12 +154,19 @@ def opengraph(property, content)
     tag.meta(content: content, property: property)
   end
 
+  WEBUI_STYLES = {
+    'default' => '',
+    'compact' => 'compact-padding',
+    'legacy' => 'legacy-style',
+  }.freeze
+
   def body_classes
     output = body_class_string.split
     output << content_for(:body_classes)
     output << "theme-#{current_theme.parameterize}"
     output << 'system-font' if current_account&.user&.setting_system_font_ui
     output << (current_account&.user&.setting_reduce_motion ? 'reduce-motion' : 'no-reduce-motion')
+    output << WEBUI_STYLES[current_account&.user&.setting_webui_styles]
     output << 'rtl' if locale_direction == 'rtl'
     output.compact_blank.join(' ')
   end
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index 465b748078f2e6..9d1b6f65fd1747 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -22,3 +22,5 @@
 @import 'mastodon/rtl';
 @import 'mastodon/accessibility';
 @import 'mastodon/rich_text';
+@import 'mods/compact-padding';
+@import 'mods/legacy-style';
diff --git a/app/javascript/styles/mods/compact-padding.scss b/app/javascript/styles/mods/compact-padding.scss
new file mode 100644
index 00000000000000..ad5c3f931baa48
--- /dev/null
+++ b/app/javascript/styles/mods/compact-padding.scss
@@ -0,0 +1,40 @@
+.compact-padding {
+  .status__prepend {
+    padding-top: 6px;
+    padding-bottom: 0;
+  }
+
+  .status {
+    padding: 12px;
+    padding-bottom: 6px;
+  }
+
+  .status-reply, .muted {
+    padding-top: 6px;
+  }
+
+  .status__info {
+    padding-bottom: 6px;
+  }
+
+  .status__content {
+    padding-top: 0;
+  }
+
+  .status__action-bar {
+    margin-top: 6px;
+    justify-content: flex-start;
+  }
+
+  .status .media-gallery {
+    margin-top: 6px;
+  }
+
+  .status .attachment-list {
+    margin-top: 2px;
+  }
+
+  .notification__message {
+    padding: 12px 12px 0;
+  }
+}
diff --git a/app/javascript/styles/mods/legacy-style.scss b/app/javascript/styles/mods/legacy-style.scss
new file mode 100644
index 00000000000000..9f63b68cb4b1cc
--- /dev/null
+++ b/app/javascript/styles/mods/legacy-style.scss
@@ -0,0 +1,123 @@
+.legacy-style {
+    .status__prepend {
+        padding-top: 0.25em;
+        padding-left: 2.15em;
+        padding-bottom: 0;
+    }
+    .status__line {
+        display: none;
+    }
+    .status:not(.status--in-thread) {
+        padding: 0.5em 0.5em 0.5em 4.75em;
+        position: relative;
+    }
+    .status .status__info, .status__content {
+        padding-bottom: 0.25em;
+    }
+    .status--in-thread{
+        padding-top: 0.5em;
+    }
+    .status--in-thread .status__info {
+        padding-left: 3.25em;
+        padding-bottom: 0;
+    }
+    .status--in-thread .status__content {
+        padding-top: 0.25em;
+        padding-left: 3.25em;
+        margin-right: 4em;
+    }
+    .status--in-thread .status__content {
+      -webkit-margin-start: 0px;
+      margin-inline-start: 0px;
+      width: calc(100% - 3.5em);
+    }
+    .status__wrapper-direct .status--in-thread .status__avatar {
+        padding-top: 2em;
+    }
+    .status--in-thread .status__action-bar {
+        margin-left: 3.5em;
+    }
+    .status-reply {
+        padding-top: 0.25em;
+    }
+    .status .status__info {
+        margin-bottom: 0;
+    }
+    .status .status__relative-time {
+        height: auto;
+        line-height: normal;
+    }
+    .status .status__avatar {
+        width: 3em;
+        height: 3em;
+        position: absolute;
+        left: 0.5em;
+        top: 0.5em;
+    }
+    .status .display-name:not(.detailed-status__display-name) bdi {
+        padding-right: 0.25em;
+    }
+    .status .display-name:not(.detailed-status__display-name) {
+        display: flex;
+    }
+    .detailed-status {
+        padding-top: 0.25em;
+        padding-left: 0.75em;
+        padding-bottom: 0.5em;
+    }
+    .detailed-status .status__prepend {
+        margin-left: 1.75em;
+        margin-bottom: 0.5em;
+    }
+    .detailed-status__display-name {
+        margin-bottom: 0.5em;
+    }
+    .detailed-status .status-card {
+        padding: 0.25em;
+    }
+    .account {
+        padding: 0.5em;
+    }
+    .account__wrapper .display-name, .detailed-status .display-name {
+        padding-left: 0;
+    }
+    .status__action-bar {
+        margin-top: 0.25em;
+        justify-content: flex-start;
+    }
+    .status .media-gallery, .detailed-status .status-card, .detailed-status__meta {
+        margin-top: 0.5em;
+    }
+    .status .attachment-list {
+        margin-top: 0.25em;
+    }
+    .notification__message {
+        padding: 0.5em 0.5em 0 2.35em;
+    }
+    .muted {
+        padding-top: 0.5em;
+    }
+    .mods__announcements__item {
+        margin: 10px;
+    }
+    .drawer__inner .navigation-bar, .drawer__inner .compose-form {
+        padding: 10px;
+    }
+    .account__header__bar {
+        padding: 0 12px;
+    }
+    .account__header__tabs__name {
+        margin-top: 12px;
+        margin-bottom: 12px;
+    }
+    .account__header__bio .account__header__fields {
+        margin: 12px 0 0;
+    }
+    .account__header__bio .account__header__fields dl {
+        padding: 8px 12px;
+    }
+    .account__header__extra__links {
+        margin: 0 -8px;
+        padding-top: 12px;
+    }
+}
diff --git a/app/models/concerns/user/has_settings.rb b/app/models/concerns/user/has_settings.rb
index 1202f2033f1ccf..038062be3f8297 100644
--- a/app/models/concerns/user/has_settings.rb
+++ b/app/models/concerns/user/has_settings.rb
@@ -134,4 +134,8 @@ def show_all_media?
   def hide_all_media?
     settings['web.display_media'] == 'hide_all'
   end
+
+  def setting_webui_styles
+    settings['web.mod_webui_styles']
+  end
 end
diff --git a/app/models/user_settings.rb b/app/models/user_settings.rb
index 0ae8ab8ec79bba..dd4ceae227660a 100644
--- a/app/models/user_settings.rb
+++ b/app/models/user_settings.rb
@@ -32,6 +32,7 @@ class KeyError < Error; end
     setting :expand_content_warnings, default: false
     setting :display_media, default: 'default', in: %w(default show_all hide_all)
     setting :auto_play, default: false
+    setting :mod_webui_styles, default: 'default', in: %w(default compact legacy)
   end
 
   namespace :notification_emails do
diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb
index 13f332c95c4d7b..4819fdbb47153a 100644
--- a/app/serializers/initial_state_serializer.rb
+++ b/app/serializers/initial_state_serializer.rb
@@ -29,6 +29,7 @@ def meta
       store[:use_blurhash]      = object_account_user.setting_use_blurhash
       store[:use_pending_items] = object_account_user.setting_use_pending_items
       store[:show_trends]       = Setting.trends && object_account_user.setting_trends
+      store[:webui_styles]      = object.current_account.user.setting_webui_styles
     else
       store[:auto_play_gif] = Setting.auto_play_gif
       store[:display_media] = Setting.display_media
diff --git a/app/views/settings/preferences/appearance/show.html.haml b/app/views/settings/preferences/appearance/show.html.haml
index 22f88c7cdd7f55..dbb4bf2e5673a6 100644
--- a/app/views/settings/preferences/appearance/show.html.haml
+++ b/app/views/settings/preferences/appearance/show.html.haml
@@ -35,6 +35,9 @@
       #{t 'appearance.localization.body'} #{content_tag(:a, t('appearance.localization.guide_link_text'), href: t('appearance.localization.guide_link'), target: '_blank', rel: 'noopener')}
 
   = f.simple_fields_for :settings, current_user.settings do |ff|
+    .fields-group
+      = ff.input :'web.mod_webui_styles', label: I18n.t('simple_form.labels.defaults.setting_webui_styles'), collection: ['default', 'compact', 'legacy'], label_method: lambda { |item| I18n.t("simple_form.hints.defaults.setting_webui_styles_#{item}") }, wrapper: :with_label, include_blank: false, hint: I18n.t('simple_form.hints.defaults.setting_webui_styles_hint')
+
     %h4= t 'appearance.advanced_web_interface'
 
     %p.hint= t 'appearance.advanced_web_interface_hint'
diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml
index 8f6137c8c147c5..9b6436fb747413 100644
--- a/config/locales/simple_form.en.yml
+++ b/config/locales/simple_form.en.yml
@@ -62,6 +62,10 @@ en:
         setting_display_media_show_all: Always show media
         setting_use_blurhash: Gradients are based on the colors of the hidden visuals but obfuscate any details
         setting_use_pending_items: Hide timeline updates behind a click instead of automatically scrolling the feed
+        setting_webui_styles_hint: You can make padding/margin tighter like previous version
+        setting_webui_styles_default: Default
+        setting_webui_styles_compact: Compact
+        setting_webui_styles_legacy: Legacy style
         username: You can use letters, numbers, and underscores
         whole_word: When the keyword or phrase is alphanumeric only, it will only be applied if it matches the whole word
       domain_allow:
@@ -228,6 +232,7 @@ en:
         setting_unfollow_modal: Show confirmation dialog before unfollowing someone
         setting_use_blurhash: Show colorful gradients for hidden media
         setting_use_pending_items: Slow mode
+        setting_webui_styles: WebUI styles
         severity: Severity
         sign_in_token_attempt: Security code
         title: Title
diff --git a/config/locales/simple_form.ja.yml b/config/locales/simple_form.ja.yml
index 2c1bd6a08404ad..da1804f01d9c58 100644
--- a/config/locales/simple_form.ja.yml
+++ b/config/locales/simple_form.ja.yml
@@ -61,6 +61,10 @@ ja:
         setting_display_media_show_all: メディアを常に表示する
         setting_use_blurhash: ぼかしはメディアの色を元に生成されますが、細部は見えにくくなっています
         setting_use_pending_items: 新着があってもタイムラインを自動的にスクロールしないようにします
+        setting_webui_styles_hint: 従来のバージョンのものに近い、余白が狭めの表示に切り替えることができます
+        setting_webui_styles_default: デフォルト
+        setting_webui_styles_compact: コンパクト
+        setting_webui_styles_legacy: 旧バージョン風
         username: アルファベット大文字と小文字、数字、アンダーバー「_」が使えます
         whole_word: キーワードまたはフレーズが英数字のみの場合、単語全体と一致する場合のみ適用されるようになります
       domain_allow:
@@ -225,6 +229,7 @@ ja:
         setting_unfollow_modal: フォローを解除する前に確認ダイアログを表示する
         setting_use_blurhash: 非表示のメディアを色付きのぼかしで表示する
         setting_use_pending_items: 手動更新モード
+        setting_webui_styles: 表示スタイル
         severity: 重大性
         sign_in_token_attempt: セキュリティコード
         title: タイトル