From 79d02bddbe2b77574844b8ade7a09043c31b1c6b Mon Sep 17 00:00:00 2001
From: marcin mikołajczak <git@mkljczk.pl>
Date: Sun, 13 Feb 2022 19:07:49 +0100
Subject: Birthdays
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/settings_modal/tabs/profile_tab.js   |  6 +++++-
 src/components/settings_modal/tabs/profile_tab.scss |  5 +++++
 src/components/settings_modal/tabs/profile_tab.vue  | 12 ++++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 64079fcd..0ae95dbd 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -29,6 +29,8 @@ const ProfileTab = {
       newLocked: this.$store.state.users.currentUser.locked,
       newNoRichText: this.$store.state.users.currentUser.no_rich_text,
       newDefaultScope: this.$store.state.users.currentUser.default_scope,
+      newBirthday: this.$store.state.users.currentUser.birthday,
+      showBirthday: this.$store.state.users.currentUser.show_birthday,
       newFields: this.$store.state.users.currentUser.fields.map(field => ({ name: field.name, value: field.value })),
       hideFollows: this.$store.state.users.currentUser.hide_follows,
       hideFollowers: this.$store.state.users.currentUser.hide_followers,
@@ -132,7 +134,9 @@ const ProfileTab = {
             allow_following_move: this.allowFollowingMove,
             hide_follows_count: this.hideFollowsCount,
             hide_followers_count: this.hideFollowersCount,
-            show_role: this.showRole
+            show_role: this.showRole,
+            birthday: this.newBirthday || null,
+            show_birthday: this.showBirthday
             /* eslint-enable camelcase */
           } }).then((user) => {
           this.newFields.splice(user.fields.length)
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 111eaed3..24287511 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -124,4 +124,9 @@
       padding: 0 0.5em;
     }
   }
+
+  .birthday-input {
+    display: block;
+    margin-bottom: 1em;
+  }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index bb3c301d..9b92056d 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -95,6 +95,18 @@
           {{ $t('settings.discoverable') }}
         </Checkbox>
       </p>
+      <div>
+        <p>{{ $t('settings.birthday.label') }}</p>
+        <input
+          id="birthday"
+          v-model="newBirthday"
+          type="date"
+          class="birthday-input"
+        >
+        <Checkbox v-model="showBirthday">
+          {{ $t('settings.birthday.show_birthday') }}
+        </Checkbox>
+      </div>
       <div v-if="maxFields > 0">
         <p>{{ $t('settings.profile_fields.label') }}</p>
         <div
-- 
cgit v1.2.3-70-g09d2


From b7e93739656d225ed0a8854f357746b5291b6857 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 25 Jul 2022 15:38:05 -0400
Subject: Add support for multiple interface languages

---
 .../interface_language_switcher.vue                | 75 +++++++++++++++++-----
 src/components/settings_modal/tabs/profile_tab.js  |  4 +-
 src/i18n/messages.js                               | 26 ++++++--
 src/modules/config.js                              |  5 +-
 src/services/locale/locale.service.js              |  5 ++
 5 files changed, 92 insertions(+), 23 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 6997f149..e18a2a12 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -1,21 +1,39 @@
 <template>
-  <div>
-    <label for="interface-language-switcher">
+  <div class="interface-language-switcher">
+    <label>
       {{ promptText }}
     </label>
-    {{ ' ' }}
-    <Select
-      id="interface-language-switcher"
-      v-model="controlledLanguage"
-    >
-      <option
-        v-for="lang in languages"
-        :key="lang.code"
-        :value="lang.code"
+    <ol>
+      <li
+        v-for="index of controlledLanguage.keys()"
+        :key="index"
       >
-        {{ lang.name }}
-      </option>
-    </Select>
+        <Select
+          class="language-select"
+          :model-value="controlledLanguage[index]"
+          @update:modelValue="val => setLanguageAt(index, val)"
+        >
+          <option
+            v-for="lang in languages"
+            :key="lang.code"
+            :value="lang.code"
+          >
+            {{ lang.name }}
+          </option>
+        </Select>
+        <button
+          v-if="controlledLanguage.length > 1"
+          class="button-default btn"
+          @click="() => removeLanguageAt(index)"
+        >{{ $t('settings.remove_language') }}</button>
+      </li>
+      <li>
+        <button
+          class="button-default btn"
+          @click="addLanguage"
+        >{{ $t('settings.add_language') }}</button>
+      </li>
+    </ol>
   </div>
 </template>
 
@@ -34,7 +52,7 @@ export default {
       required: true
     },
     language: {
-      type: String,
+      type: [Array, String],
       required: true
     },
     setLanguage: {
@@ -48,7 +66,9 @@ export default {
     },
 
     controlledLanguage: {
-      get: function () { return this.language },
+      get: function () {
+        return Array.isArray(this.language) ? this.language : [this.language]
+      },
       set: function (val) {
         this.setLanguage(val)
       }
@@ -58,7 +78,30 @@ export default {
   methods: {
     getLanguageName (code) {
       return localeService.getLanguageName(code)
+    },
+    addLanguage () {
+      this.controlledLanguage = [...this.controlledLanguage, '']
+    },
+    setLanguageAt (index, val) {
+      const lang = [...this.controlledLanguage]
+      lang[index] = val
+      this.controlledLanguage = lang
+    },
+    removeLanguageAt (index) {
+      const lang = [...this.controlledLanguage]
+      lang.splice(index, 1)
+      this.controlledLanguage = lang
     }
   }
 }
 </script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.interface-language-switcher {
+  .language-select {
+    margin-right: 1em;
+  }
+}
+</style>
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index b86faef0..d5977461 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -43,7 +43,7 @@ const ProfileTab = {
       bannerPreview: null,
       background: null,
       backgroundPreview: null,
-      emailLanguage: this.$store.state.users.currentUser.language || ''
+      emailLanguage: this.$store.state.users.currentUser.language || ['']
     }
   },
   components: {
@@ -130,7 +130,7 @@ const ProfileTab = {
       }
 
       if (this.emailLanguage) {
-        params.language = localeService.internalToBackendLocale(this.emailLanguage)
+        params.language = localeService.internalToBackendLocaleMulti(this.emailLanguage)
       }
 
       this.$store.state.api.backendInteractor
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index 74a89ca8..849d98fd 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -7,8 +7,11 @@
 // sed -i -e "s/'//gm" -e 's/"/\\"/gm' -re 's/^( +)(.+?): ((.+?))?(,?)(\{?)$/\1"\2": "\4"/gm' -e 's/\"\{\"/{/g' -e 's/,"$/",/g' file.json
 // There's only problem that apostrophe character ' gets replaced by \\ so you have to fix it manually, sorry.
 
+import { isEqual } from 'lodash'
 import { languages, langCodeToJsonName } from './languages.js'
 
+const ULTIMATE_FALLBACK_LOCALE = 'en'
+
 const hasLanguageFile = (code) => languages.includes(code)
 
 const loadLanguageFile = (code) => {
@@ -25,11 +28,26 @@ const messages = {
     en: require('./en.json').default
   },
   setLanguage: async (i18n, language) => {
-    if (hasLanguageFile(language)) {
-      const messages = await loadLanguageFile(language)
-      i18n.setLocaleMessage(language, messages.default)
+    const languages = (Array.isArray(language) ? language : [language]).filter(k => k)
+
+    if (!languages.includes(ULTIMATE_FALLBACK_LOCALE)) {
+      languages.push(ULTIMATE_FALLBACK_LOCALE)
+    }
+    const [first, ...rest] = languages
+
+    if (first === i18n.locale && isEqual(rest, i18n.fallbackLocale)) {
+      return
     }
-    i18n.locale = language
+
+    for (const lang of languages) {
+      if (hasLanguageFile(lang)) {
+        const messages = await loadLanguageFile(lang)
+        i18n.setLocaleMessage(lang, messages.default)
+      }
+    }
+
+    i18n.fallbackLocale = rest
+    i18n.locale = first
   }
 }
 
diff --git a/src/modules/config.js b/src/modules/config.js
index 3cd6888f..1a0e0fc8 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -184,7 +184,10 @@ const config = {
         case 'interfaceLanguage':
           messages.setLanguage(this.getters.i18n, value)
           dispatch('loadUnicodeEmojiData', value)
-          Cookies.set(BACKEND_LANGUAGE_COOKIE_NAME, localeService.internalToBackendLocale(value))
+          Cookies.set(
+            BACKEND_LANGUAGE_COOKIE_NAME,
+            localeService.internalToBackendLocaleMulti(value)
+          )
           break
         case 'thirdColumnMode':
           dispatch('setLayoutWidth', undefined)
diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js
index d3389785..a4af8b90 100644
--- a/src/services/locale/locale.service.js
+++ b/src/services/locale/locale.service.js
@@ -11,6 +11,10 @@ const specialLanguageCodes = {
 const internalToBrowserLocale = code => specialLanguageCodes[code] || code
 
 const internalToBackendLocale = code => internalToBrowserLocale(code).replace('_', '-')
+const internalToBackendLocaleMulti = codes => {
+  const langs = Array.isArray(codes) ? codes : [codes]
+  return langs.map(internalToBackendLocale).join(',')
+}
 
 const getLanguageName = (code) => {
   const specialLanguageNames = {
@@ -28,6 +32,7 @@ const languages = _.map(languagesObject.languages, (code) => ({ code, name: getL
 const localeService = {
   internalToBrowserLocale,
   internalToBackendLocale,
+  internalToBackendLocaleMulti,
   languages,
   getLanguageName
 }
-- 
cgit v1.2.3-70-g09d2


From 78690cdf518390308624b4914dd9be06858822e1 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 24 Dec 2022 11:58:33 -0500
Subject: Display detailed backup state

---
 src/components/settings_modal/tabs/data_import_export_tab.vue | 10 ++++++++++
 src/i18n/en.json                                              |  2 ++
 2 files changed, 12 insertions(+)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue
index e3b7f407..48356c9b 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.vue
+++ b/src/components/settings_modal/tabs/data_import_export_tab.vue
@@ -77,6 +77,16 @@
               >
                 {{ $t('settings.download_backup') }}
               </a>
+              <span
+                v-else-if="backup.state === 'running'"
+              >
+                {{ $tc('settings.backup_running', backup.processed_number, { number: backup.processed_number }) }}
+              </span>
+              <span
+                v-else-if="backup.state === 'failed'"
+              >
+                {{ $t('settings.backup_failed') }}
+              </span>
               <span
                 v-else
               >
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 59ee1c17..b7c19b88 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -390,6 +390,8 @@
     "account_backup_table_head": "Backup",
     "download_backup": "Download",
     "backup_not_ready": "This backup is not ready yet.",
+    "backup_running": "This backup is in progress, processed {number} record. | This backup is in progress, processed {number} records.",
+    "backup_failed": "This backup has failed.",
     "remove_backup": "Remove",
     "list_backups_error": "Error fetching backup list: {error}",
     "add_backup": "Create a new backup",
-- 
cgit v1.2.3-70-g09d2


From 7dc22774532872fc99aa7768cf299ab623e9d155 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 9 Jan 2023 13:02:16 -0500
Subject: Use stylelint

---
 .stylelintrc.json                                  |   9 +-
 build/webpack.base.conf.js                         |   3 +-
 package.json                                       |   1 +
 src/App.scss                                       |  78 ++++++------
 src/_mixins.scss                                   |   5 +-
 src/_variables.scss                                |  14 ++-
 src/components/about/about.vue                     |   3 -
 src/components/account_actions/account_actions.vue |   3 +-
 src/components/announcement/announcement.vue       |   8 +-
 .../announcements_page/announcements_page.vue      |   3 +-
 .../async_component_error.vue                      |   5 +-
 src/components/attachment/attachment.scss          |  47 +++----
 src/components/autosuggest/autosuggest.vue         |   4 +-
 src/components/avatar_list/avatar_list.vue         |   2 +-
 src/components/basic_user_card/basic_user_card.vue |   2 +-
 src/components/block_card/block_card.vue           |   1 +
 src/components/chat/chat.scss                      |   4 +-
 src/components/chat/chat.vue                       |   4 +-
 src/components/chat_list/chat_list.vue             |   2 +-
 src/components/chat_list_item/chat_list_item.scss  |   9 +-
 src/components/chat_list_item/chat_list_item.vue   |   4 +-
 src/components/chat_message/chat_message.scss      |  94 +++++++-------
 src/components/chat_message/chat_message.vue       |   4 +-
 src/components/chat_new/chat_new.scss              |   2 +-
 src/components/chat_new/chat_new.vue               |   4 +-
 src/components/chat_title/chat_title.vue           |   2 +-
 src/components/checkbox/checkbox.vue               |  16 +--
 src/components/color_input/color_input.scss        |  19 +--
 src/components/contrast_ratio/contrast_ratio.vue   |   1 -
 src/components/conversation/conversation.vue       |  31 ++---
 src/components/desktop_nav/desktop_nav.scss        |  39 +++---
 src/components/dialog_modal/dialog_modal.vue       |  10 +-
 .../edit_status_modal/edit_status_modal.vue        |   1 +
 src/components/emoji_input/emoji_input.vue         |  24 ++--
 src/components/emoji_picker/emoji_picker.scss      |  35 +++---
 src/components/emoji_reactions/emoji_reactions.vue |   5 +-
 src/components/extra_buttons/extra_buttons.vue     |  13 +-
 src/components/favorite_button/favorite_button.vue |   4 +-
 src/components/flash/flash.vue                     |   5 +-
 src/components/follow_card/follow_card.vue         |   3 +-
 .../follow_request_card/follow_request_card.vue    |   4 +-
 src/components/font_control/font_control.vue       |   5 +-
 src/components/gallery/gallery.vue                 | 100 ++++++++-------
 .../global_notice_list/global_notice_list.vue      |   5 +-
 src/components/link-preview/link-preview.vue       |   5 +-
 src/components/list/list.vue                       |   2 +-
 src/components/lists_card/lists_card.vue           |  11 +-
 src/components/lists_edit/lists_edit.vue           |   2 +-
 .../lists_user_search/lists_user_search.vue        |   4 +-
 src/components/login_form/login_form.vue           |   7 +-
 src/components/media_modal/media_modal.vue         |  57 +++++----
 src/components/media_upload/media_upload.vue       |   2 +-
 src/components/mention_link/mention_link.scss      |   7 +-
 src/components/mentions_line/mentions_line.scss    |   2 +-
 src/components/mobile_nav/mobile_nav.vue           |   8 +-
 .../mobile_post_status_button.vue                  |   5 +-
 src/components/modal/modal.vue                     |   7 +-
 .../moderation_tools/moderation_tools.vue          |   7 +-
 .../mrf_transparency_panel.scss                    |  14 ++-
 .../mrf_transparency_panel.vue                     |   4 +-
 src/components/mute_card/mute_card.vue             |   1 +
 src/components/nav_panel/nav_panel.vue             |   7 +-
 src/components/navigation/navigation_entry.vue     |   4 +-
 src/components/navigation/navigation_pins.vue      |   3 +-
 src/components/notification/notification.scss      |  17 +--
 src/components/notifications/notifications.scss    |   9 +-
 src/components/panel_loading/panel_loading.vue     |   3 +-
 src/components/password_reset/password_reset.vue   |   2 +-
 src/components/poll/poll.vue                       |  12 +-
 src/components/poll/poll_form.vue                  |   3 +-
 src/components/popover/popover.vue                 |  37 +++---
 .../post_status_form/post_status_form.vue          |  67 +++++-----
 src/components/react_button/react_button.vue       |  24 ++--
 src/components/registration/registration.vue       |   6 +-
 .../remote_user_resolver/remote_user_resolver.vue  |   3 -
 src/components/reply_button/reply_button.vue       |   5 +-
 src/components/report/report.scss                  |   2 +-
 src/components/retweet_button/retweet_button.vue   |   4 +-
 src/components/rich_content/rich_content.scss      |   6 +-
 src/components/scope_selector/scope_selector.vue   |   3 +-
 src/components/search/search.vue                   |  14 +--
 src/components/search_bar/search_bar.vue           |   2 +-
 src/components/select/select.vue                   |   7 +-
 src/components/selectable_list/selectable_list.vue |   3 +-
 .../settings_modal/helpers/choice_setting.vue      |   5 -
 .../settings_modal/helpers/size_setting.vue        |   9 +-
 src/components/settings_modal/settings_modal.scss  |  51 ++++----
 .../settings_modal/settings_modal_content.scss     |   8 +-
 src/components/settings_modal/tabs/general_tab.vue |   1 +
 .../settings_modal/tabs/mutes_and_blocks_tab.scss  |  44 +++----
 .../settings_modal/tabs/profile_tab.scss           |   7 +-
 .../settings_modal/tabs/security_tab/mfa.vue       |  11 +-
 .../tabs/security_tab/mfa_backup_codes.vue         |   3 +-
 .../settings_modal/tabs/theme_tab/preview.vue      |  15 +--
 .../settings_modal/tabs/theme_tab/theme_tab.scss   | 120 ++++++++++--------
 src/components/shadow_control/shadow_control.vue   |  40 +++---
 src/components/shout_panel/shout_panel.vue         |   2 +-
 src/components/side_drawer/side_drawer.vue         |  18 +--
 src/components/staff_panel/staff_panel.vue         |   1 -
 src/components/status/status.scss                  |  10 +-
 src/components/status/status.vue                   |   2 +-
 src/components/status_body/status_body.scss        |  13 +-
 .../status_history_modal/status_history_modal.vue  |   1 +
 src/components/status_popover/status_popover.vue   |   3 +-
 src/components/sticker_picker/sticker_picker.vue   |   7 +-
 src/components/still-image/still-image.vue         |   6 +-
 src/components/tab_switcher/tab_switcher.scss      |  50 +++++---
 .../terms_of_service_panel.vue                     |   2 +-
 src/components/thread_tree/thread_tree.vue         |   4 +-
 src/components/timeline/timeline.scss              |   7 +-
 src/components/timeline_menu/timeline_menu.vue     | 139 +++++++++++----------
 .../update_notification/update_notification.scss   |  14 ++-
 src/components/user_avatar/user_avatar.vue         |   5 +-
 src/components/user_card/user_card.scss            | 114 +++++++++--------
 .../user_list_popover/user_list_popover.vue        |   2 +-
 src/components/user_note/user_note.vue             |   2 +-
 src/components/user_popover/user_popover.vue       |   4 +-
 src/components/user_profile/user_profile.vue       |   6 +-
 .../user_reporting_modal/user_reporting_modal.vue  |   4 +-
 src/components/who_to_follow/who_to_follow.vue     |   3 -
 .../who_to_follow_panel/who_to_follow_panel.vue    |  16 ++-
 src/hocs/with_load_more/with_load_more.scss        |   3 +-
 src/hocs/with_subscription/with_subscription.scss  |   2 +-
 src/panel.scss                                     |  16 +--
 yarn.lock                                          |  13 +-
 125 files changed, 969 insertions(+), 839 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/.stylelintrc.json b/.stylelintrc.json
index dc96d5e0..7517362c 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -10,12 +10,17 @@
     "declaration-no-important": true,
     "rscss/no-descendant-combinator": false,
     "rscss/class-format": [
-      true,
+      false,
       {
         "component": "pascal-case",
         "variant": "^-[a-z]\\w+",
         "element": "^[a-z]\\w+"
       }
-    ]
+    ],
+    "selector-class-pattern": null,
+    "import-notation": null,
+    "custom-property-pattern": null,
+    "keyframes-name-pattern": null,
+    "scss/operator-no-newline-after": null
   }
 }
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index bf946922..7e69352a 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -6,7 +6,7 @@ var ServiceWorkerWebpackPlugin = require('serviceworker-webpack5-plugin')
 var CopyPlugin = require('copy-webpack-plugin');
 var { VueLoaderPlugin } = require('vue-loader')
 var ESLintPlugin = require('eslint-webpack-plugin');
-
+var StylelintPlugin = require('stylelint-webpack-plugin');
 
 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -111,6 +111,7 @@ module.exports = {
       extensions: ['js', 'vue'],
       formatter: require('eslint-formatter-friendly')
     }),
+    new StylelintPlugin({}),
     new VueLoaderPlugin(),
     // This copies Ruffle's WASM to a directory so that JS side can access it
     new CopyPlugin({
diff --git a/package.json b/package.json
index 1949a16e..8658af93 100644
--- a/package.json
+++ b/package.json
@@ -120,6 +120,7 @@
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard": "29.0.0",
     "stylelint-rscss": "0.4.0",
+    "stylelint-webpack-plugin": "^3.3.0",
     "vue-loader": "17.0.1",
     "vue-style-loader": "4.1.3",
     "webpack": "5.75.0",
diff --git a/src/App.scss b/src/App.scss
index 75b2667c..0d2daa7d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,5 +1,7 @@
 // stylelint-disable rscss/class-format
-@import './_variables.scss';
+/* stylelint-disable no-descending-specificity */
+@import "./variables";
+@import "./panel";
 
 :root {
   --navbar-height: 3.5rem;
@@ -123,7 +125,7 @@ h4 {
   font-weight: 1000;
 }
 
-i[class*=icon-],
+i[class*="icon-"],
 .svg-inline--fa,
 .iconLetter {
   color: $fallback--icon;
@@ -132,7 +134,7 @@ i[class*=icon-],
 
 .button-unstyled:hover,
 a:hover {
-  > i[class*=icon-],
+  > i[class*="icon-"],
   > .svg-inline--fa,
   > .iconLetter {
     color: var(--text);
@@ -141,12 +143,11 @@ a:hover {
 
 nav {
   z-index: var(--ZI_navbar);
-  color: var(--topBarText);
   background-color: $fallback--fg;
   background-color: var(--topBar, $fallback--fg);
   color: $fallback--faint;
   color: var(--faint, $fallback--faint);
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 4px rgb(0 0 0 / 60%);
   box-shadow: var(--topBarShadow);
   box-sizing: border-box;
   height: var(--navbar-height);
@@ -191,13 +192,11 @@ nav {
 }
 
 .underlay {
-  grid-column-start: 1;
-  grid-column-end: span 3;
-  grid-row-start: 1;
-  grid-row-end: 1;
+  grid-column: 1 / span 3;
+  grid-row: 1 / 1;
   pointer-events: none;
-  background-color: rgba(0, 0, 0, 0.15);
-  background-color: var(--underlay, rgba(0, 0, 0, 0.15));
+  background-color: rgb(0 0 0 / 15%);
+  background-color: var(--underlay, rgb(0 0 0 / 15%));
   z-index: -1000;
 }
 
@@ -215,8 +214,10 @@ nav {
   grid-template-columns:
     var(--effectiveSidebarColumnWidth)
     var(--effectiveContentColumnWidth);
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
   grid-template-areas: "sidebar content";
   grid-template-rows: 1fr;
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
   box-sizing: border-box;
   margin: 0 auto;
   align-content: flex-start;
@@ -231,8 +232,7 @@ nav {
     display: grid;
     grid-template-columns: 100%;
     box-sizing: border-box;
-    grid-row-start: 1;
-    grid-row-end: 1;
+    grid-row: 1 / 1;
     margin: 0 calc(var(--___columnMargin) / 2);
     padding: calc(var(--___columnMargin)) 0;
     row-gap: var(--___columnMargin);
@@ -307,7 +307,7 @@ nav {
     align-content: start;
   }
 
-  &.-reverse:not(.-wide):not(.-mobile) {
+  &.-reverse:not(.-wide, .-mobile) {
     grid-template-columns:
       var(--effectiveContentColumnWidth)
       var(--effectiveSidebarColumnWidth);
@@ -336,11 +336,8 @@ nav {
     padding: 0;
 
     .column {
-      margin-left: 0;
-      margin-right: 0;
       padding-top: 0;
-      margin-top: var(--navbar-height);
-      margin-bottom: 0;
+      margin-top: var(--navbar-height) 0 0 0;
     }
 
     .panel-heading,
@@ -389,7 +386,7 @@ nav {
     background: transparent;
   }
 
-  i[class*=icon-],
+  i[class*="icon-"],
   .svg-inline--fa {
     color: $fallback--text;
     color: var(--btnText, $fallback--text);
@@ -400,12 +397,15 @@ nav {
   }
 
   &:hover {
-    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
+    box-shadow: 0 0 4px rgb(255 255 255 / 30%);
     box-shadow: var(--buttonHoverShadow);
   }
 
   &:active {
-    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
+    box-shadow:
+      0 0 4px 0 rgb(255 255 255 / 30%),
+      0 1px 0 0 rgb(0 0 0 / 20%) inset,
+      0 -1px 0 0 rgb(255 255 255 / 20%) inset;
     box-shadow: var(--buttonPressedShadow);
     color: $fallback--text;
     color: var(--btnPressedText, $fallback--text);
@@ -438,7 +438,10 @@ nav {
     color: var(--btnToggledText, $fallback--text);
     background-color: $fallback--fg;
     background-color: var(--btnToggled, $fallback--fg);
-    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
+    box-shadow:
+      0 0 4px 0 rgb(255 255 255 / 30%),
+      0 1px 0 0 rgb(0 0 0 / 20%) inset,
+      0 -1px 0 0 rgb(255 255 255 / 20%) inset;
     box-shadow: var(--buttonPressedShadow);
 
     svg,
@@ -503,7 +506,10 @@ textarea,
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 rgba(0, 0, 0, 1) inset;
+  box-shadow:
+    0 1px 0 0 rgb(0 0 0 / 20%) inset,
+    0 -1px 0 0 rgb(255 255 255 / 20%) inset,
+    0 0 2px 0 rgb(0 0 0 / 100%) inset;
   box-shadow: var(--inputShadow);
   background-color: $fallback--fg;
   background-color: var(--input, $fallback--fg);
@@ -521,13 +527,13 @@ textarea,
   padding: 0 var(--_padding);
 
   &:disabled,
-  &[disabled=disabled],
+  &[disabled="disabled"],
   &.disabled {
     cursor: not-allowed;
     opacity: 0.5;
   }
 
-  &[type=range] {
+  &[type="range"] {
     background: none;
     border: none;
     margin: 0;
@@ -535,7 +541,7 @@ textarea,
     flex: 1;
   }
 
-  &[type=radio] {
+  &[type="radio"] {
     display: none;
 
     &:checked + label::before {
@@ -555,7 +561,7 @@ textarea,
     + label::before {
       flex-shrink: 0;
       display: inline-block;
-      content: '';
+      content: "";
       transition: box-shadow 200ms;
       width: 1.1em;
       height: 1.1em;
@@ -575,7 +581,7 @@ textarea,
     }
   }
 
-  &[type=checkbox] {
+  &[type="checkbox"] {
     display: none;
 
     &:checked + label::before {
@@ -594,7 +600,7 @@ textarea,
     + label::before {
       flex-shrink: 0;
       display: inline-block;
-      content: '✓';
+      content: "✓";
       transition: color 200ms;
       width: 1.1em;
       height: 1.1em;
@@ -634,10 +640,10 @@ option {
 }
 
 .hide-number-spinner {
-  -moz-appearance: textfield;
+  appearance: textfield;
 
-  &[type=number]::-webkit-inner-spin-button,
-  &[type=number]::-webkit-outer-spin-button {
+  &[type="number"]::-webkit-inner-spin-button,
+  &[type="number"]::-webkit-outer-spin-button {
     opacity: 0;
     display: none;
   }
@@ -669,8 +675,6 @@ option {
   }
 }
 
-@import './panel.scss';
-
 .fa {
   color: grey;
 }
@@ -686,7 +690,7 @@ option {
   max-width: 10em;
   min-width: 1.7em;
   height: 1.3em;
-  padding: 0.15em 0.15em;
+  padding: 0.15em;
   vertical-align: middle;
   font-weight: normal;
   font-style: normal;
@@ -789,7 +793,8 @@ option {
 
 .fa-old-padding {
   &.iconLetter,
-  &.svg-inline--fa, &-layer {
+  &.svg-inline--fa,
+  &-layer {
     padding: 0 0.3em;
   }
 }
@@ -883,3 +888,4 @@ option {
 .fade-leave-active {
   opacity: 0;
 }
+/* stylelint-enable no-descending-specificity */
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 1fed16c3..e99fe26f 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -1,13 +1,14 @@
 @mixin unfocused-style {
   @content;
 
-  &:focus:not(:focus-visible):not(:hover) {
+  &:focus:not(:focus-visible, :hover) {
     @content;
   }
 }
 
 @mixin focused-style {
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     @content;
   }
 
diff --git a/src/_variables.scss b/src/_variables.scss
index 099d3606..751fc9a4 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -4,20 +4,20 @@ $darkened-background: whitesmoke;
 
 $fallback--bg: #121a24;
 $fallback--fg: #182230;
-$fallback--faint: rgba(185, 185, 186, .5);
+$fallback--faint: rgb(185 185 186 / 50%);
 $fallback--text: #b9b9ba;
 $fallback--link: #d8a070;
 $fallback--icon: #666;
-$fallback--lightBg: rgb(21, 30, 42);
+$fallback--lightBg: rgb(21 30 42);
 $fallback--lightText: #b9b9ba;
 $fallback--border: #222;
-$fallback--cRed: #ff0000;
+$fallback--cRed: #f00;
 $fallback--cBlue: #0095ff;
 $fallback--cGreen: #0fa00f;
 $fallback--cOrange: orange;
 
-$fallback--alertError: rgba(211,16,20,.5);
-$fallback--alertWarning: rgba(111,111,20,.5);
+$fallback--alertError: rgb(211 16 20 / 50%);
+$fallback--alertWarning: rgb(111 111 20 / 50%);
 
 $fallback--panelRadius: 10px;
 $fallback--checkboxRadius: 2px;
@@ -29,6 +29,8 @@ $fallback--avatarAltRadius: 10px;
 $fallback--attachmentRadius: 10px;
 $fallback--chatMessageRadius: 10px;
 
-$fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+$fallback--buttonShadow: 0 0 2px 0 rgb(0 0 0 / 100%),
+  0 1px 0 0 rgb(255 255 255 / 20%) inset,
+  0 -1px 0 0 rgb(0 0 0 / 20%) inset;
 
 $status-margin: 0.75em;
diff --git a/src/components/about/about.vue b/src/components/about/about.vue
index 33586c97..8a551485 100644
--- a/src/components/about/about.vue
+++ b/src/components/about/about.vue
@@ -9,6 +9,3 @@
 </template>
 
 <script src="./about.js"></script>
-
-<style lang="scss">
-</style>
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 218aa6b3..973a5935 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -80,7 +80,8 @@
 <script src="./account_actions.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
+
 .AccountActions {
   .ellipsis-button {
     width: 2.5em;
diff --git a/src/components/announcement/announcement.vue b/src/components/announcement/announcement.vue
index c1b35981..a1c5791e 100644
--- a/src/components/announcement/announcement.vue
+++ b/src/components/announcement/announcement.vue
@@ -102,19 +102,19 @@
 @import "../../variables";
 
 .announcement {
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  border-bottom-color: var(--border, $fallback--border);
+  border-bottom: 1px solid var(--border, $fallback--border);
   border-radius: 0;
   padding: var(--status-margin, $status-margin);
 
-  .heading, .body {
+  .heading,
+  .body {
     margin-bottom: var(--status-margin, $status-margin);
   }
 
   .footer {
     display: flex;
     flex-direction: column;
+
     .times {
       display: flex;
       flex-direction: column;
diff --git a/src/components/announcements_page/announcements_page.vue b/src/components/announcements_page/announcements_page.vue
index 59ed283d..78d3ecee 100644
--- a/src/components/announcements_page/announcements_page.vue
+++ b/src/components/announcements_page/announcements_page.vue
@@ -67,7 +67,8 @@
   .post-form {
     padding: var(--status-margin, $status-margin);
 
-    .heading, .body {
+    .heading,
+    .body {
       margin-bottom: var(--status-margin, $status-margin);
     }
 
diff --git a/src/components/async_component_error/async_component_error.vue b/src/components/async_component_error/async_component_error.vue
index 26ab5d21..2ff8974c 100644
--- a/src/components/async_component_error/async_component_error.vue
+++ b/src/components/async_component_error/async_component_error.vue
@@ -34,9 +34,10 @@ export default {
   height: 100%;
   align-items: center;
   justify-content: center;
+
   .btn {
-    margin: .5em;
-    padding: .5em 2em;
+    margin: 0.5em;
+    padding: 0.5em 2em;
   }
 }
 </style>
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index b2dea98d..cf38d45b 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
 .Attachment {
   display: inline-flex;
@@ -102,14 +102,13 @@
     padding-top: 0.5em;
   }
 
-
   .play-icon {
     position: absolute;
     font-size: 64px;
     top: calc(50% - 32px);
     left: calc(50% - 32px);
-    color: rgba(255, 255, 255, 0.75);
-    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+    color: rgb(255 255 255 / 75%);
+    text-shadow: 0 0 2px rgb(0 0 0 / 40%);
 
     &::before {
       margin: 0;
@@ -135,18 +134,32 @@
       margin-left: 0.5em;
       font-size: 1.25em;
       // TODO: theming? hard to theme with unknown background image color
-      background: rgba(230, 230, 230, 0.7);
+      background: rgb(230 230 230 / 70%);
 
       .svg-inline--fa {
-        color: rgba(0, 0, 0, 0.6);
+        color: rgb(0 0 0 / 60%);
       }
 
       &:hover .svg-inline--fa {
-        color: rgba(0, 0, 0, 0.9);
+        color: rgb(0 0 0 / 90%);
       }
     }
   }
 
+  &.-contain-fit {
+    img,
+    canvas {
+      object-fit: contain;
+    }
+  }
+
+  &.-cover-fit {
+    img,
+    canvas {
+      object-fit: cover;
+    }
+  }
+
   .oembed-container {
     line-height: 1.2em;
     flex: 1 0 100%;
@@ -160,8 +173,9 @@
 
     .image {
       flex: 1;
+
       img {
-        border: 0px;
+        border: 0;
         border-radius: 5px;
         height: 100%;
         object-fit: cover;
@@ -172,9 +186,10 @@
       flex: 2;
       margin: 8px;
       word-break: break-all;
+
       h1 {
         font-size: 1rem;
-        margin: 0px;
+        margin: 0;
       }
     }
   }
@@ -251,18 +266,4 @@
   &.-loading {
     cursor: progress;
   }
-
-  &.-contain-fit {
-    img,
-    canvas {
-      object-fit: contain;
-    }
-  }
-
-  &.-cover-fit {
-    img,
-    canvas {
-      object-fit: cover;
-    }
-  }
 }
diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index f283ab82..7b7102fd 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -24,7 +24,7 @@
 <script src="./autosuggest.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .autosuggest {
   position: relative;
@@ -50,7 +50,7 @@
     border-radius: var(--inputRadius, $fallback--inputRadius);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
     box-shadow: var(--panelShadow);
     overflow-y: auto;
     z-index: 1;
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 9a6ca3f6..2d00cb7b 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -17,7 +17,7 @@
 <script src="./avatar_list.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .avatars {
   display: flex;
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 418de926..705e20f5 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -49,7 +49,7 @@
   margin: 0;
   padding: 0.6em 1em;
 
-   --emoji-size: 14px;
+  --emoji-size: 14px;
 
   &-collapsed-content {
     margin-left: 0.7em;
diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue
index 2fe66d4c..b14ef844 100644
--- a/src/components/block_card/block_card.vue
+++ b/src/components/block_card/block_card.vue
@@ -37,6 +37,7 @@
 .block-card-content-container {
   margin-top: 0.5em;
   text-align: right;
+
   button {
     width: 10em;
   }
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index f2e154ab..43e7a5e4 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -17,7 +17,7 @@
     width: 100%;
     overflow: visible;
     min-height: calc(100vh - var(--navbar-height));
-    margin: 0 0 0 0;
+    margin: 0;
     border-radius: 10px 10px 0 0;
     border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
 
@@ -66,7 +66,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 2px 4px rgb(0 0 0 / 30%);
     z-index: 10;
     transition: 0.35s all;
     transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 2e7df7bd..b1e5468c 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -95,6 +95,6 @@
 
 <script src="./chat.js"></script>
 <style lang="scss">
-@import '../../_variables.scss';
-@import './chat.scss';
+@import "../../variables";
+@import "./chat";
 </style>
diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
index 1248c4c8..27a475ed 100644
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@@ -45,7 +45,7 @@
 <script src="./chat_list.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .chat-list {
   min-height: 25em;
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index c6b45c34..3a84672b 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -13,7 +13,7 @@
 
   &:hover {
     background-color: var(--selectedPost, $fallback--lightBg);
-    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
   }
 
   .chat-list-item-left {
@@ -67,6 +67,7 @@
     canvas {
       display: none;
     }
+
     img {
       visibility: visible;
     }
@@ -79,13 +80,11 @@
 
   .chat-preview-body {
     --emoji-size: 1.4em;
+
+    padding-right: 1em;
   }
 
   .time-wrapper {
     line-height: var(--post-line-height);
   }
-
-  .chat-preview-body {
-    padding-right: 1em;
-  }
 }
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index c7c0e878..69ad609b 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -48,6 +48,6 @@
 <script src="./chat_list_item.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-@import './chat_list_item.scss';
+@import "../../variables";
+@import "./chat_list_item";
 </style>
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index 1913479f..fd5b7aa4 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -1,12 +1,12 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
 .chat-message-wrapper {
-
   &.hovered-message-chain {
     .animated.Avatar {
       canvas {
         display: none;
       }
+
       img {
         visibility: visible;
       }
@@ -28,7 +28,8 @@
   .menu-icon {
     cursor: pointer;
 
-    &:hover, .extra-button-popover.open & {
+    &:hover,
+    .extra-button-popover.open & {
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
@@ -54,27 +55,11 @@
     width: 32px;
   }
 
-  .link-preview, .attachments {
+  .link-preview,
+  .attachments {
     margin-bottom: 1em;
   }
 
-  .chat-message-inner {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    max-width: 80%;
-    min-width: 10em;
-    width: 100%;
-
-    &.with-media {
-      width: 100%;
-
-      .status {
-        width: 100%;
-      }
-    }
-  }
-
   .status {
     border-radius: $fallback--chatMessageRadius;
     border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
@@ -86,7 +71,7 @@
     position: relative;
     float: right;
     font-size: 0.8em;
-    margin: -1em 0 -0.5em 0;
+    margin: -1em 0 -0.5em;
     font-style: italic;
     opacity: 0.8;
   }
@@ -103,18 +88,54 @@
   }
 
   .pending {
-    .status-content.media-body, .created-at {
+    .status-content.media-body,
+    .created-at {
       color: var(--faint);
     }
   }
 
   .error {
-    .status-content.media-body, .created-at {
+    .status-content.media-body,
+    .created-at {
       color: $fallback--cRed;
       color: var(--badgeNotification, $fallback--cRed);
     }
   }
 
+  .chat-message-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    max-width: 80%;
+    min-width: 10em;
+    width: 100%;
+  }
+
+  .outgoing {
+    display: flex;
+    flex-flow: row wrap;
+    align-content: end;
+    justify-content: flex-end;
+
+    a {
+      color: var(--chatMessageOutgoingLink, $fallback--link);
+    }
+
+    .status {
+      color: var(--chatMessageOutgoingText, $fallback--text);
+      background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
+      border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
+    }
+
+    .chat-message-inner {
+      align-items: flex-end;
+    }
+
+    .chat-message-menu {
+      right: 0.4rem;
+    }
+  }
+
   .incoming {
     a {
       color: var(--chatMessageIncomingLink, $fallback--link);
@@ -137,36 +158,17 @@
     }
   }
 
-  .outgoing {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-content: end;
-    justify-content: flex-end;
-
-    a {
-      color: var(--chatMessageOutgoingLink, $fallback--link);
-    }
+  .chat-message-inner.with-media {
+    width: 100%;
 
     .status {
-      color: var(--chatMessageOutgoingText, $fallback--text);
-      background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
-      border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
-    }
-
-    .chat-message-inner {
-      align-items: flex-end;
-    }
-
-    .chat-message-menu {
-      right: 0.4rem;
+      width: 100%;
     }
   }
 
   .visible {
     opacity: 1;
   }
-
 }
 
 .chat-message-date-separator {
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index d635c47e..381574c3 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -33,7 +33,7 @@
           <div
             class="media status"
             :class="{ 'without-attachment': !hasAttachment, 'pending': chatViewItem.data.pending, 'error': chatViewItem.data.error }"
-            style="position: relative"
+            style="position: relative;"
             @mouseenter="hovered = true"
             @mouseleave="hovered = false"
           >
@@ -98,6 +98,6 @@
 
 <script src="./chat_message.js"></script>
 <style lang="scss">
-@import './chat_message.scss';
+@import "./chat_message";
 
 </style>
diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss
index 240e1a38..b145ecf9 100644
--- a/src/components/chat_new/chat_new.scss
+++ b/src/components/chat_new/chat_new.scss
@@ -1,7 +1,7 @@
 .chat-new {
   .input-wrap {
     display: flex;
-    margin: 0.7em 0.5em 0.7em 0.5em;
+    margin: 0.7em 0.5em;
 
     input {
       width: 100%;
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index bf09a379..52306c1d 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -46,6 +46,6 @@
 
 <script src="./chat_new.js"></script>
 <style lang="scss">
-@import '../../_variables.scss';
-@import './chat_new.scss';
+@import "../../variables";
+@import "./chat_new";
 </style>
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index ab7491fa..93db4fa7 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -26,7 +26,7 @@
 <script src="./chat_title.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .chat-title {
   display: flex;
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index b6768d67..7139d4fc 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .checkbox {
   position: relative;
@@ -49,13 +49,13 @@ export default {
     right: 0;
     top: 0;
     display: block;
-    content: '✓';
+    content: "✓";
     transition: color 200ms;
     width: 1.1em;
     height: 1.1em;
     border-radius: $fallback--checkboxRadius;
     border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
-    box-shadow: 0px 0px 2px black inset;
+    box-shadow: 0 0 2px black inset;
     box-shadow: var(--inputShadow);
     background-color: $fallback--fg;
     background-color: var(--input, $fallback--fg);
@@ -71,15 +71,16 @@ export default {
   &.disabled {
     .checkbox-indicator::before,
     .label {
-      opacity: .5;
+      opacity: 0.5;
     }
+
     .label {
       color: $fallback--faint;
       color: var(--faint, $fallback--faint);
     }
   }
 
-  input[type=checkbox] {
+  input[type="checkbox"] {
     display: none;
 
     &:checked + .checkbox-indicator::before {
@@ -88,15 +89,14 @@ export default {
     }
 
     &:indeterminate + .checkbox-indicator::before {
-      content: '–';
+      content: "–";
       color: $fallback--text;
       color: var(--inputText, $fallback--text);
     }
-
   }
 
   & > span {
-    margin-left: .5em;
+    margin-left: 0.5em;
   }
 }
 </style>
diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index 3de31fde..ca46199a 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
 .color-input {
   display: inline-flex;
@@ -8,7 +8,7 @@
     flex: 0 0 0;
     max-width: 9em;
     align-items: stretch;
-    padding: .2em 8px;
+    padding: 0.2em 8px;
 
     input {
       background: none;
@@ -31,6 +31,7 @@
         min-height: 100%;
       }
     }
+
     .computedIndicator,
     .transparentIndicator {
       flex: 0 0 2em;
@@ -38,22 +39,27 @@
       align-self: stretch;
       min-height: 100%;
     }
+
     .transparentIndicator {
       // forgot to install counter-strike source, ooops
-      background-color: #FF00FF;
+      background-color: #f0f;
       position: relative;
-      &::before, &::after {
+
+      &::before,
+      &::after {
         display: block;
-        content: '';
-        background-color: #000000;
+        content: "";
+        background-color: #000;
         position: absolute;
         height: 50%;
         width: 50%;
       }
+
       &::after {
         top: 0;
         left: 0;
       }
+
       &::before {
         bottom: 0;
         right: 0;
@@ -64,5 +70,4 @@
   .label {
     flex: 1 1 auto;
   }
-
 }
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index 374cb9ba..bbd6fd4a 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -87,7 +87,6 @@ export default {
 .contrast-ratio {
   display: flex;
   justify-content: flex-end;
-
   margin-top: -4px;
   margin-bottom: 5px;
 
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index afa04db0..7577129e 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -210,17 +210,16 @@
 <script src="./conversation.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .Conversation {
   z-index: 1;
 
   .conversation-dive-to-top-level-box {
     padding: var(--status-margin, $status-margin);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border, $fallback--border);
     border-radius: 0;
+
     /* Make the button stretch along the whole row */
     display: flex;
     align-items: stretch;
@@ -235,52 +234,48 @@
   .thread-ancestor.-faded .StatusContent {
     --link: var(--faintLink);
     --text: var(--faint);
+
     color: var(--text);
   }
 
   .thread-ancestor-dive-box {
     padding-left: var(--status-margin, $status-margin);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border, $fallback--border);
     border-radius: 0;
+
     /* Make the button stretch along the whole row */
-    &, &-inner {
+    &,
+    &-inner {
       display: flex;
       align-items: stretch;
       flex-direction: column;
     }
   }
+
   .thread-ancestor-dive-box-inner {
     padding: var(--status-margin, $status-margin);
   }
 
   .conversation-status {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border, $fallback--border);
     border-radius: 0;
   }
 
   .thread-ancestor-has-other-replies .conversation-status,
+  &:last-child .conversation-status,
   .thread-ancestor:last-child .conversation-status,
   .thread-ancestor:last-child .thread-ancestor-dive-box,
-  &:last-child .conversation-status,
   &.-expanded .thread-tree .conversation-status {
     border-bottom: none;
   }
 
   .thread-ancestors + .thread-tree > .conversation-status {
-    border-top-width: 1px;
-    border-top-style: solid;
-    border-top-color: var(--border, $fallback--border);
+    border-top: 1px solid var(--border, $fallback--border);
   }
 
   /* expanded conversation in timeline */
   &.status-fadein.-expanded .thread-body {
-    border-left-width: 4px;
-    border-left-style: solid;
-    border-left-color: $fallback--cRed;
+    border-left: 4px solid $fallback--cRed;
     border-left-color: var(--cRed, $fallback--cRed);
     border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
     border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 1ec25385..00f434bf 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
 .DesktopNav {
   width: 100%;
@@ -14,9 +14,11 @@
 
   .inner-nav {
     display: grid;
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
     grid-template-rows: var(--navbar-height);
     grid-template-columns: 2fr auto 2fr;
     grid-template-areas: "sitename logo actions";
+    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
     box-sizing: border-box;
     padding: 0 1.2em;
     margin: auto;
@@ -27,20 +29,13 @@
     --miniColumn: 25rem;
     --maxiColumn: 45rem;
     --columnGap: 1em;
-    max-width: calc(
-      var(--sidebarColumnWidth, var(--miniColumn)) +
-      var(--contentColumnWidth, var(--maxiColumn)) +
-      var(--columnGap)
-    );
-  }
 
-  &.-column-stretch.-wide .inner-nav {
-    max-width: calc(
-      var(--sidebarColumnWidth, var(--miniColumn)) +
-      var(--contentColumnWidth, var(--maxiColumn)) +
-      var(--notifsColumnWidth, var(--miniColumn)) +
-      var(--columnGap)
-    );
+    max-width:
+      calc(
+        var(--sidebarColumnWidth, var(--miniColumn)) +
+        var(--contentColumnWidth, var(--maxiColumn)) +
+        var(--columnGap)
+      );
   }
 
   &.-logoLeft .inner-nav {
@@ -48,8 +43,19 @@
     grid-template-areas: "logo sitename actions";
   }
 
+  &.-column-stretch.-wide .inner-nav {
+    max-width:
+      calc(
+        var(--sidebarColumnWidth, var(--miniColumn)) +
+        var(--contentColumnWidth, var(--maxiColumn)) +
+        var(--notifsColumnWidth, var(--miniColumn)) +
+        var(--columnGap)
+      );
+  }
+
   .button-default {
-    &, svg {
+    &,
+    svg {
       color: $fallback--text;
       color: var(--btnTopBarText, $fallback--text);
     }
@@ -70,7 +76,7 @@
       color: $fallback--text;
       color: var(--btnToggledTopBarText, $fallback--text);
       background-color: $fallback--fg;
-      background-color: var(--btnToggledTopBar, $fallback--fg)
+      background-color: var(--btnToggledTopBar, $fallback--fg);
     }
   }
 
@@ -82,6 +88,7 @@
     transition-duration: 100ms;
 
     @media all and (min-width: 800px) {
+      /* stylelint-disable-next-line declaration-no-important */
       opacity: 1 !important;
     }
 
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 06b270c3..24d65142 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -25,7 +25,7 @@
 <script src="./dialog_modal.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 // TODO: unify with other modals.
 .dark-overlay {
@@ -38,7 +38,7 @@
     position: fixed;
     right: 0;
     top: 0;
-    background: rgba(27,31,35,.5);
+    background: rgb(27 31 35 / 50%);
     z-index: 99;
   }
 }
@@ -65,7 +65,7 @@
 
   .dialog-modal-content {
     margin: 0;
-    padding: 1rem 1rem;
+    padding: 1rem;
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg);
     white-space: normal;
@@ -73,7 +73,7 @@
 
   .dialog-modal-footer {
     margin: 0;
-    padding: .5em .5em;
+    padding: 0.5em;
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg);
     border-top: 1px solid $fallback--border;
@@ -83,7 +83,7 @@
 
     button {
       width: auto;
-      margin-left: .5rem;
+      margin-left: 0.5rem;
     }
   }
 }
diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/src/components/edit_status_modal/edit_status_modal.vue
index 1dbacaab..db62972d 100644
--- a/src/components/edit_status_modal/edit_status_modal.vue
+++ b/src/components/edit_status_modal/edit_status_modal.vue
@@ -26,6 +26,7 @@
 .modal-view.edit-form-modal-view {
   align-items: flex-start;
 }
+
 .edit-form-modal-panel {
   flex-shrink: 0;
   margin-top: 25%;
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index c9bbc18f..ccba0393 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -91,22 +91,18 @@
 <script src="./emoji_input.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .emoji-input {
   display: flex;
   flex-direction: column;
   position: relative;
 
-  &.with-picker input {
-    padding-right: 30px;
-  }
-
   .emoji-picker-icon {
     position: absolute;
     top: 0;
     right: 0;
-    margin: .2em .25em;
+    margin: 0.2em 0.25em;
     font-size: 1.3em;
     cursor: pointer;
     line-height: 24px;
@@ -123,14 +119,19 @@
     margin-top: 2px;
 
     &.hide {
-      display: none
+      display: none;
     }
   }
 
-  input, textarea {
+  input,
+  textarea {
     flex: 1 0 auto;
   }
 
+  &.with-picker input {
+    padding-right: 30px;
+  }
+
   .hidden-overlay {
     opacity: 0;
     pointer-events: none;
@@ -140,8 +141,10 @@
     right: 0;
     left: 0;
     overflow: hidden;
+
     /* DEBUG STUFF */
     color: red;
+
     /* set opacity to non-zero to see the overlay */
 
     .caret {
@@ -151,6 +154,7 @@
     }
   }
 }
+
 .autocomplete {
   &-panel {
     position: absolute;
@@ -160,7 +164,7 @@
     display: flex;
     cursor: pointer;
     padding: 0.2em 0.4em;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+    border-bottom: 1px solid rgb(0 0 0 / 40%);
     height: 32px;
 
     .image {
@@ -169,7 +173,6 @@
       line-height: 32px;
       text-align: center;
       font-size: 32px;
-
       margin-right: 4px;
 
       img {
@@ -199,6 +202,7 @@
       background-color: $fallback--fg;
       background-color: var(--selectedMenuPopover, $fallback--fg);
       color: var(--selectedMenuPopoverText, $fallback--text);
+
       --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
       --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index dda12197..0ec261a4 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
 $emoji-picker-header-height: 36px;
 $emoji-picker-header-picture-width: 32px;
@@ -14,7 +14,7 @@ $emoji-picker-emoji-size: 32px;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--link;
   color: var(--popoverText, $fallback--link);
-  --lightText: var(--popoverLightText, $fallback--faint);
+
   --faint: var(--popoverFaintText, $fallback--faint);
   --faintLink: var(--popoverFaintLink, $fallback--faint);
   --lightText: var(--popoverLightText, $fallback--lightText);
@@ -28,6 +28,7 @@ $emoji-picker-emoji-size: 32px;
     max-width: $emoji-picker-header-picture-width;
     height: $emoji-picker-header-picture-height;
     max-height: $emoji-picker-header-picture-height;
+
     .still-image {
       max-width: 100%;
       max-height: 100%;
@@ -62,25 +63,18 @@ $emoji-picker-emoji-size: 32px;
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
-    min-height: 0px;
+    min-height: 0;
   }
 
   .emoji-tabs {
     flex-grow: 1;
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
+    flex-flow: row nowrap;
     overflow-x: auto;
   }
 
-  .emoji-groups {
-    height: 100%;
-    min-height: 200px;
-  }
-
   .additional-tabs {
     display: flex;
-    flex: 1;
     border-left: 1px solid;
     border-left-color: $fallback--icon;
     border-left-color: var(--icon, $fallback--icon);
@@ -122,7 +116,7 @@ $emoji-picker-emoji-size: 32px;
   }
 
   .sticker-picker {
-    flex: 1 1 auto
+    flex: 1 1 auto;
   }
 
   .stickers,
@@ -152,22 +146,27 @@ $emoji-picker-emoji-size: 32px;
     }
 
     &-groups {
+      height: 100%;
+      min-height: 200px;
       flex: 1 1 1px;
       position: relative;
       overflow: auto;
       user-select: none;
-      mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
-            linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
-            linear-gradient(to top, white, white);
+      mask:
+        linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+        linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+        linear-gradient(to top, white, white);
       transition: mask-size 150ms;
       mask-size: 100% 20px, 100% 20px, auto;
       // Autoprefixed seem to ignore this one, and also syntax is different
-      -webkit-mask-composite: xor;
+      mask-composite: xor;
       mask-composite: exclude;
+
       &.scrolled {
         &-top {
           mask-size: 100% 20px, 100% 0, auto;
         }
+
         &-bottom {
           mask-size: 100% 0, 100% 20px, auto;
         }
@@ -201,7 +200,6 @@ $emoji-picker-emoji-size: 32px;
       align-items: center;
       justify-content: center;
       margin: 4px;
-
       cursor: pointer;
 
       .emoji-picker-emoji.-custom {
@@ -209,12 +207,11 @@ $emoji-picker-emoji-size: 32px;
         max-width: 100%;
         max-height: 100%;
       }
+
       .emoji-picker-emoji.-unicode {
         font-size: 24px;
         overflow: hidden;
       }
     }
-
   }
-
 }
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 4eb22a65..a63daa97 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -28,7 +28,7 @@
 
 <script src="./emoji_reactions.js"></script>
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .EmojiReactions {
   display: flex;
@@ -55,6 +55,7 @@
 
     &.not-clickable {
       cursor: default;
+
       &:hover {
         box-shadow: $fallback--buttonShadow;
         box-shadow: var(--buttonShadow);
@@ -75,10 +76,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
     &:hover {
       text-decoration: underline;
     }
   }
-
 }
 </style>
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index b2fad1c9..a84d47f6 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -172,15 +172,10 @@
 <script src="./extra_buttons.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-@import '../../_mixins.scss';
+@import "../../variables";
+@import "../../mixins";
 
 .ExtraButtons {
-  /* override of popover internal stuff */
-  .popover-trigger-button {
-    width: auto;
-  }
-
   .popover-trigger {
     position: static;
     padding: 10px;
@@ -190,10 +185,12 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
-
   }
 
   .popover-trigger-button {
+    /* override of popover internal stuff */
+    width: auto;
+
     @include unfocused-style {
       .focus-marker {
         visibility: hidden;
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index ea01720a..58d14945 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -58,8 +58,8 @@
 <script src="./favorite_button.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-@import '../../_mixins.scss';
+@import "../../variables";
+@import "../../mixins";
 
 .FavoriteButton {
   display: flex;
diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index 95f71950..9f58d314 100644
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@@ -42,7 +42,8 @@
 <script src="./flash.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
+
 .Flash {
   display: inline-block;
   width: 100%;
@@ -78,7 +79,7 @@
 
   .hidden {
     display: none;
-    visibility: 'hidden';
+    visibility: "hidden";
   }
 }
 </style>
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index c919b11a..eff69fb2 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -39,9 +39,8 @@
   &-content-container {
     flex-shrink: 0;
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
     justify-content: space-between;
-    flex-wrap: wrap;
     line-height: 1.5em;
   }
 
diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
index 1b12ba4b..eb222cc7 100644
--- a/src/components/follow_request_card/follow_request_card.vue
+++ b/src/components/follow_request_card/follow_request_card.vue
@@ -22,8 +22,8 @@
 <style lang="scss">
 .follow-request-card-content-container {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
+
   button {
     margin-top: 0.5em;
     margin-right: 0.5em;
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 83c1cef7..bb7e64bc 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -50,17 +50,20 @@
 <script src="./font_control.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
+
 .font-control {
   input.custom-font {
     min-width: 10em;
   }
+
   &.custom {
     /* TODO Should make proper joiners... */
     .font-switcher {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
+
     .custom-font {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index ccf6e3e2..744b8198 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -86,7 +86,7 @@
 <script src='./gallery.js'></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .Gallery {
   .gallery-rows {
@@ -100,6 +100,53 @@
     width: 100%;
     flex-grow: 1;
 
+    .gallery-row-inner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      flex-flow: row wrap;
+      align-content: stretch;
+
+      .gallery-item {
+        margin: 0 0.5em 0 0;
+        flex-grow: 1;
+        height: 100%;
+        box-sizing: border-box;
+        // to make failed images a bit more noticeable on chromium
+        min-width: 2em;
+
+        &:last-child {
+          margin: 0;
+        }
+      }
+
+      &.-grid {
+        width: 100%;
+        height: auto;
+        position: relative;
+        display: grid;
+        grid-gap: 0.5em;
+        grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
+
+        .gallery-item {
+          margin: 0;
+          height: 200px;
+        }
+      }
+    }
+
+    &.-grid,
+    &.-minimal {
+      height: auto;
+
+      .gallery-row-inner {
+        position: relative;
+      }
+    }
+
     &:not(:first-child) {
       margin-top: 0.5em;
     }
@@ -114,7 +161,7 @@
         linear-gradient(to top, white, white);
 
       /* Autoprefixed seem to ignore this one, and also syntax is different */
-      -webkit-mask-composite: xor;
+      mask-composite: xor;
       mask-composite: exclude;
     }
   }
@@ -138,54 +185,5 @@
       padding: 0 2em;
     }
   }
-
-  .gallery-row {
-    &.-grid,
-    &.-minimal {
-      height: auto;
-      .gallery-row-inner {
-        position: relative;
-      }
-    }
-  }
-
-  .gallery-row-inner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-content: stretch;
-
-    &.-grid {
-      width: 100%;
-      height: auto;
-      position: relative;
-      display: grid;
-      grid-column-gap: 0.5em;
-      grid-row-gap: 0.5em;
-      grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
-
-      .gallery-item {
-        margin: 0;
-        height: 200px;
-      }
-    }
-  }
-
-  .gallery-item {
-    margin: 0 0.5em 0 0;
-    flex-grow: 1;
-    height: 100%;
-    box-sizing: border-box;
-    // to make failed images a bit more noticeable on chromium
-    min-width: 2em;
-    &:last-child {
-      margin: 0;
-    }
-  }
 }
 </style>
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index d828b819..0e58476f 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -25,7 +25,7 @@
 <script src="./global_notice_list.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .global-notice-list {
   position: fixed;
@@ -73,6 +73,7 @@
   .global-success {
     background-color: var(--alertPopupSuccess, $fallback--cGreen);
     color: var(--alertPopupSuccessText, $fallback--text);
+
     .svg-inline--fa {
       color: var(--alertPopupSuccessText, $fallback--text);
     }
@@ -81,6 +82,7 @@
   .global-info {
     background-color: var(--alertPopupNeutral, $fallback--fg);
     color: var(--alertPopupNeutralText, $fallback--text);
+
     .svg-inline--fa {
       color: var(--alertPopupNeutralText, $fallback--text);
     }
@@ -88,6 +90,7 @@
 
   .close-notice {
     padding-right: 0.2em;
+
     .svg-inline--fa:hover {
       opacity: 0.6;
     }
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 220527f2..09f341ac 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -33,7 +33,7 @@
 <script src="./link-preview.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .link-preview-card {
   display: flex;
@@ -46,6 +46,7 @@
     flex-shrink: 0;
     width: 120px;
     max-width: 25%;
+
     img {
       width: 100%;
       height: 100%;
@@ -67,7 +68,7 @@
   }
 
   .card-description {
-    margin: 0.5em 0 0 0;
+    margin: 0.5em 0 0;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-word;
diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index a6223cce..f17766b4 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -35,7 +35,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .list {
   &-item:not(:last-child) {
diff --git a/src/components/lists_card/lists_card.vue b/src/components/lists_card/lists_card.vue
index 13866d8c..925da3a5 100644
--- a/src/components/lists_card/lists_card.vue
+++ b/src/components/lists_card/lists_card.vue
@@ -21,12 +21,16 @@
 <script src="./lists_card.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .list-card {
   display: flex;
 }
 
+.list-name {
+  flex-grow: 1;
+}
+
 .list-name,
 .button-list-edit {
   margin: 0;
@@ -39,13 +43,10 @@
     background-color: var(--selectedMenu, $fallback--lightBg);
     color: $fallback--link;
     color: var(--selectedMenuText, $fallback--link);
+
     --faint: var(--selectedMenuFaintText, $fallback--faint);
     --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
     --lightText: var(--selectedMenuLightText, $fallback--lightText);
   }
 }
-
-.list-name {
-  flex-grow: 1;
-}
 </style>
diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue
index 6521aba6..eec0f978 100644
--- a/src/components/lists_edit/lists_edit.vue
+++ b/src/components/lists_edit/lists_edit.vue
@@ -164,7 +164,7 @@
 <script src="./lists_edit.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .ListEdit {
   --panel-body-padding: 0.5em;
diff --git a/src/components/lists_user_search/lists_user_search.vue b/src/components/lists_user_search/lists_user_search.vue
index 8633170c..6ca107e6 100644
--- a/src/components/lists_user_search/lists_user_search.vue
+++ b/src/components/lists_user_search/lists_user_search.vue
@@ -27,12 +27,12 @@
 
 <script src="./lists_user_search.js"></script>
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .ListsUserSearch {
   .input-wrap {
     display: flex;
-    margin: 0.7em 0.5em 0.7em 0.5em;
+    margin: 0.7em 0.5em;
 
     input {
       width: 100%;
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 7a430c51..829e88ad 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -93,7 +93,7 @@
 <script src="./login_form.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .login-form {
   display: flex;
@@ -110,7 +110,7 @@
   }
 
   .login-bottom {
-    margin-top: 1.0em;
+    margin-top: 1em;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -121,7 +121,7 @@
     display: flex;
     flex-direction: column;
     padding: 0.3em 0.5em 0.6em;
-    line-height:24px;
+    line-height: 24px;
   }
 
   .form-bottom {
@@ -142,7 +142,6 @@
 
   .error {
     text-align: center;
-
     animation-name: shakeError;
     animation-duration: 0.4s;
     animation-timing-function: ease-in-out;
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index d59055b3..6464b99f 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -120,32 +120,12 @@ $modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2)
 $modal-view-button-icon-width: 3em;
 $modal-view-button-icon-margin: 0.5em;
 
-.modal-view.media-modal-view {
-  z-index: var(--ZI_media_modal);
-  flex-direction: column;
-
-  .modal-view-button-arrow,
-  .modal-view-button-hide {
-    opacity: 0.75;
-
-    &:focus,
-    &:hover {
-      outline: none;
-      box-shadow: none;
-    }
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-  overflow: hidden;
-}
-
 .media-modal-view {
   @keyframes media-fadein {
     from {
       opacity: 0;
     }
+
     to {
       opacity: 1;
     }
@@ -226,7 +206,7 @@ $modal-view-button-icon-margin: 0.5em;
     appearance: none;
     overflow: visible;
     cursor: pointer;
-    transition: opacity 333ms cubic-bezier(.4,0,.22,1);
+    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
     height: $modal-view-button-icon-height;
     width: $modal-view-button-icon-width;
 
@@ -236,9 +216,9 @@ $modal-view-button-icon-margin: 0.5em;
       width: $modal-view-button-icon-width;
       font-size: 1rem;
       line-height: $modal-view-button-icon-height;
-      color: #FFF;
+      color: #fff;
       text-align: center;
-      background-color: rgba(0,0,0,.3);
+      background-color: rgb(0 0 0 / 30%);
     }
   }
 
@@ -254,13 +234,14 @@ $modal-view-button-icon-margin: 0.5em;
       position: absolute;
       top: 0;
       line-height: $modal-view-button-icon-height;
-      color: #FFF;
+      color: #fff;
       text-align: center;
-      background-color: rgba(0,0,0,.3);
+      background-color: rgb(0 0 0 / 30%);
     }
 
     &--prev {
       left: 0;
+
       .arrow-icon {
         left: $modal-view-button-icon-margin;
       }
@@ -268,6 +249,7 @@ $modal-view-button-icon-margin: 0.5em;
 
     &--next {
       right: 0;
+
       .arrow-icon {
         right: $modal-view-button-icon-margin;
       }
@@ -278,10 +260,33 @@ $modal-view-button-icon-margin: 0.5em;
     position: absolute;
     top: 0;
     right: 0;
+
     .button-icon {
       top: $modal-view-button-icon-margin;
       right: $modal-view-button-icon-margin;
     }
   }
 }
+
+.modal-view.media-modal-view {
+  z-index: var(--ZI_media_modal);
+  flex-direction: column;
+
+  .modal-view-button-arrow,
+  .modal-view-button-hide {
+    opacity: 0.75;
+
+    &:focus,
+    &:hover {
+      outline: none;
+      box-shadow: none;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  overflow: hidden;
+}
 </style>
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index a538a5ed..2799495b 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -29,7 +29,7 @@
 <script src="./media_upload.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .media-upload {
   cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 8b2af926..69e9fed1 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
 .MentionLink {
   position: relative;
@@ -59,6 +59,7 @@
         font-weight: 600;
       }
     }
+
     &.-has-selection {
       color: var(--alertNeutralText, $fallback--text);
       background-color: var(--alertNeutral, $fallback--fg);
@@ -100,10 +101,6 @@
     }
   }
 
-  .full {
-    pointer-events: none;
-  }
-
   .serverName.-faded {
     color: var(--faintLink, $fallback--link);
   }
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index 9a622e75..b7dfbfb8 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -2,7 +2,7 @@
   word-break: break-all;
 
   .mention-link:not(:first-child)::before {
-    content: ' ';
+    content: " ";
   }
 
   .showMoreLess {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 0f1fe621..d6fe102c 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -94,7 +94,7 @@
 <script src="./mobile_nav.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .MobileNav {
   z-index: var(--ZI_navbar);
@@ -127,7 +127,7 @@
   }
 
   .site-name {
-    padding: 0 .3em;
+    padding: 0 0.3em;
     display: inline-block;
   }
 
@@ -156,7 +156,7 @@
     position: fixed;
     top: 0;
     left: 0;
-    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
     box-shadow: var(--panelShadow);
     transition-property: transform;
     transition-duration: 0.25s;
@@ -182,7 +182,7 @@
     color: var(--topBarText);
     background-color: $fallback--fg;
     background-color: var(--topBar, $fallback--fg);
-    box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+    box-shadow: 0 0 4px rgb(0 0 0 / 60%);
     box-shadow: var(--topBarShadow);
 
     .spacer {
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index 28a2c440..ef0f51fe 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -13,7 +13,7 @@
 <script src="./mobile_post_status_button.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .MobilePostButton {
   &.button-default {
@@ -30,9 +30,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 2px 2px rgb(0 0 0 / 30%), 0 4px 6px rgb(0 0 0 / 30%);
     z-index: 10;
-
     transition: 0.35s transform;
     transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
   }
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 2187f392..9f767ede 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -59,7 +59,7 @@ export default {
 
   &.modal-background {
     pointer-events: initial;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgb(0 0 0 / 50%);
   }
 
   &.open {
@@ -69,10 +69,11 @@ export default {
 
 @keyframes modal-background-fadein {
   from {
-    background-color: rgba(0, 0, 0, 0);
+    background-color: rgb(0 0 0 / 0%);
   }
+
   to {
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgb(0 0 0 / 50%);
   }
 }
 </style>
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 8535ef27..b708cdc8 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -166,18 +166,21 @@
 <script src="./moderation_tools.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .moderation-tools-popover {
   height: 100%;
+
   .trigger {
+    /* stylelint-disable-next-line declaration-no-important */
     display: flex !important;
     height: 100%;
   }
 }
 
 .moderation-tools-button {
-  svg,i {
+  svg,
+  i {
     font-size: 0.8em;
   }
 }
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.scss b/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
index 80ea01d4..a262ed1c 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
@@ -2,19 +2,21 @@
   margin: 1em;
 
   table {
-    width:100%;
+    width: 100%;
     text-align: left;
-    padding-left:10px;
-    padding-bottom:20px;
+    padding-left: 10px;
+    padding-bottom: 20px;
 
-    th, td {
+    th,
+    td {
       width: 180px;
       max-width: 360px;
-      overflow:  hidden;
+      overflow: hidden;
       vertical-align: text-top;
     }
 
-    th+th, td+td {
+    th + th,
+    td + td {
       width: auto;
     }
   }
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
index 1787fa07..97af4787 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -227,6 +227,6 @@
 <script src="./mrf_transparency_panel.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-@import './mrf_transparency_panel.scss';
+@import "../../variables";
+@import "./mrf_transparency_panel";
 </style>
diff --git a/src/components/mute_card/mute_card.vue b/src/components/mute_card/mute_card.vue
index ca33c6c5..97e91cbc 100644
--- a/src/components/mute_card/mute_card.vue
+++ b/src/components/mute_card/mute_card.vue
@@ -37,6 +37,7 @@
 .mute-card-content-container {
   margin-top: 0.5em;
   text-align: right;
+
   button {
     width: 10em;
   }
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index d628c380..1a826cc4 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -102,7 +102,7 @@
 <script src="./nav_panel.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .NavPanel {
   .panel {
@@ -169,8 +169,9 @@
   }
 
   .nav-panel-heading {
-   // breaks without a unit
-   --panel-heading-height-padding: 0em;
+    // breaks without a unit
+    // stylelint-disable-next-line length-zero-no-unit
+    --panel-heading-height-padding: 0px;
   }
 }
 </style>
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index f4d53836..411ca536 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -63,7 +63,7 @@
 <script src="./navigation_entry.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .NavigationEntry {
   display: flex;
@@ -102,6 +102,7 @@
     background-color: var(--selectedMenu, $fallback--lightBg);
     color: $fallback--link;
     color: var(--selectedMenuText, $fallback--link);
+
     --faint: var(--selectedMenuFaintText, $fallback--faint);
     --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
     --lightText: var(--selectedMenuLightText, $fallback--lightText);
@@ -117,6 +118,7 @@
     background-color: var(--selectedMenu, $fallback--lightBg);
     color: $fallback--text;
     color: var(--selectedMenuText, $fallback--text);
+
     --faint: var(--selectedMenuFaintText, $fallback--faint);
     --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
     --lightText: var(--selectedMenuLightText, $fallback--lightText);
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 6a9ed6f5..4fbb4f95 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -27,7 +27,8 @@
 <script src="./navigation_pins.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
+
 .NavigationPins {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index 38978137..654aca3c 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -1,13 +1,14 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
-   border-bottom: 1px solid;
-   border-color: $fallback--border;
-   border-color: var(--border, $fallback--border);
-   word-wrap: break-word;
-   word-break: break-word;
-   --emoji-size: 14px;
+  border-bottom: 1px solid;
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  word-wrap: break-word;
+  word-break: break-word;
+
+  --emoji-size: 14px;
 
   &:hover {
     --_still-image-img-visibility: visible;
@@ -54,7 +55,7 @@
       margin-left: 0.2em;
 
       &::before {
-        content: ' ';
+        content: " ";
       }
     }
 
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 9b241565..41cfcef0 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
 .Notifications {
   &:not(.minimal) {
@@ -25,12 +25,13 @@
 
     &.unseen {
       .notification-overlay {
-        background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
+        background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px);
       }
     }
   }
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 .notification {
   box-sizing: border-box;
 
@@ -38,6 +39,7 @@
     canvas {
       display: none;
     }
+
     img {
       visibility: visible;
     }
@@ -79,7 +81,8 @@
     }
   }
 
-  .follow-text, .move-text {
+  .follow-text,
+  .move-text {
     padding: 0.5em 0;
     overflow-wrap: break-word;
     display: flex;
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index d916d8a6..17458e49 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -23,7 +23,7 @@ export default {}
 </script>
 
 <style lang="scss">
-@import 'src/_variables.scss';
+@import "src/variables";
 
 .panel-loading {
   display: flex;
@@ -33,6 +33,7 @@ export default {}
   font-size: 2em;
   color: $fallback--text;
   color: var(--text, $fallback--text);
+
   .loading-text svg {
     line-height: 0;
     vertical-align: middle;
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 90673f44..d6e10250 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -77,7 +77,7 @@
 
 <script src="./password_reset.js"></script>
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .password-reset-form {
   display: flex;
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index f6b12a54..cacc3298 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -90,7 +90,7 @@
 <script src="./poll.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .poll {
   .votes {
@@ -98,9 +98,11 @@
     flex-direction: column;
     margin: 0 0 0.5em;
   }
+
   .poll-option {
     margin: 0.75em 0.5em;
   }
+
   .option-result {
     height: 100%;
     display: flex;
@@ -109,6 +111,7 @@
     color: $fallback--lightText;
     color: var(--lightText, $fallback--lightText);
   }
+
   .option-result-label {
     display: flex;
     align-items: center;
@@ -116,10 +119,12 @@
     z-index: 1;
     word-break: break-word;
   }
+
   .result-percentage {
     width: 3.5em;
     flex-shrink: 0;
   }
+
   .result-fill {
     height: 100%;
     position: absolute;
@@ -133,20 +138,25 @@
     left: 0;
     transition: width 0.5s;
   }
+
   .option-vote {
     display: flex;
     align-items: center;
   }
+
   input {
     width: 3.5em;
   }
+
   .footer {
     display: flex;
     align-items: center;
   }
+
   &.loading * {
     cursor: progress;
   }
+
   .poll-vote-button {
     padding: 0 0.5em;
     margin-right: 0.5em;
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 146754db..09d411ca 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -95,7 +95,7 @@
 <script src="./poll_form.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .poll-form {
   display: flex;
@@ -117,6 +117,7 @@
 
   .input-container {
     width: 100%;
+
     input {
       // Hack: dodge the floating X icon
       padding-right: 2.5em;
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 2869d736..fd0fd821 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -41,7 +41,7 @@
 <script src="./popover.js" />
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .popover-trigger-button {
   display: inline-block;
@@ -52,31 +52,31 @@
   position: fixed;
   min-width: 0;
   max-width: calc(100vw - 20px);
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
   box-shadow: var(--popupShadow);
 }
 
 .popover-default {
-  &:after {
-    content: '';
+  &::after {
+    content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 3;
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
     box-shadow: var(--panelShadow);
     pointer-events: none;
   }
 
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
-
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--text;
   color: var(--popoverText, $fallback--text);
+
   --faint: var(--popoverFaintText, $fallback--faint);
   --faintLink: var(--popoverFaintLink, $fallback--faint);
   --lightText: var(--popoverLightText, $fallback--lightText);
@@ -87,7 +87,7 @@
 
 .dropdown-menu {
   display: block;
-  padding: .5rem 0;
+  padding: 0.5rem 0;
   font-size: 1em;
   text-align: left;
   list-style: none;
@@ -97,7 +97,7 @@
 
   .dropdown-divider {
     height: 0;
-    margin: .5rem 0;
+    margin: 0.5rem 0;
     overflow: hidden;
     border-top: 1px solid $fallback--border;
     border-top: 1px solid var(--border, $fallback--border);
@@ -113,7 +113,7 @@
     text-align: inherit;
     white-space: nowrap;
     border: none;
-    border-radius: 0px;
+    border-radius: 0;
     background-color: transparent;
     box-shadow: none;
     width: 100%;
@@ -126,7 +126,7 @@
       svg {
         width: 22px;
         margin-right: 0.75rem;
-        color: var(--menuPopoverIcon, $fallback--icon)
+        color: var(--menuPopoverIcon, $fallback--icon);
       }
     }
 
@@ -137,17 +137,21 @@
       }
     }
 
-    &:active, &:hover {
+    &:active,
+    &:hover {
       background-color: $fallback--lightBg;
       background-color: var(--selectedMenuPopover, $fallback--lightBg);
       box-shadow: none;
+
       --btnText: var(--selectedMenuPopoverText, $fallback--link);
       --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
       --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
       --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
+
       svg {
         color: var(--selectedMenuPopoverIcon, $fallback--icon);
+
         --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
       }
     }
@@ -161,16 +165,16 @@
       max-height: 22px;
       line-height: 22px;
       text-align: center;
-      border-radius: 0px;
+      border-radius: 0;
       background-color: $fallback--fg;
       background-color: var(--input, $fallback--fg);
-      box-shadow: 0px 0px 2px black inset;
+      box-shadow: 0 0 2px black inset;
       box-shadow: var(--inputShadow);
       margin-right: 0.75em;
 
       &.menu-checkbox-checked::after {
         font-size: 1.25em;
-        content: '✓';
+        content: "✓";
       }
 
       &.-radio {
@@ -178,16 +182,15 @@
 
         &.menu-checkbox-checked::after {
           font-size: 2em;
-          content: '•';
+          content: "•";
         }
       }
     }
-
   }
 
   .button-default.dropdown-item {
     &,
-    i[class*=icon-] {
+    i[class*="icon-"] {
       color: $fallback--text;
       color: var(--btnText, $fallback--text);
     }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index f65058f4..c51639db 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -331,7 +331,7 @@
 <script src="./post_status_form.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .post-status-form {
   position: relative;
@@ -378,7 +378,9 @@
     &:hover {
       text-decoration: underline;
     }
-    svg, i {
+
+    svg,
+    i {
       margin-left: 0.2em;
       font-size: 0.8em;
       transform: rotate(90deg);
@@ -428,7 +430,25 @@
     }
   }
 
-  .media-upload-icon, .poll-icon, .emoji-icon {
+  // Order is not necessary but a good indicator
+  .media-upload-icon {
+    order: 1;
+    justify-content: left;
+  }
+
+  .emoji-icon {
+    order: 2;
+    justify-content: center;
+  }
+
+  .poll-icon {
+    order: 3;
+    justify-content: right;
+  }
+
+  .media-upload-icon,
+  .poll-icon,
+  .emoji-icon {
     font-size: 1.85em;
     line-height: 1.1;
     flex: 1;
@@ -436,16 +456,20 @@
     display: flex;
     align-items: center;
 
-    &.selected, &:hover {
+    &.selected,
+    &:hover {
       // needs to be specific to override icon default color
-      svg, i, label {
+      svg,
+      i,
+      label {
         color: $fallback--lightText;
         color: var(--lightText, $fallback--lightText);
       }
     }
 
     &.disabled {
-      svg, i {
+      svg,
+      i {
         cursor: not-allowed;
         color: $fallback--icon;
         color: var(--btnDisabledText, $fallback--icon);
@@ -458,32 +482,17 @@
     }
   }
 
-  // Order is not necessary but a good indicator
-  .media-upload-icon {
-    order: 1;
-    justify-content: left;
-  }
-
-  .emoji-icon {
-    order: 2;
-    justify-content: center;
-  }
-
-  .poll-icon {
-    order: 3;
-    justify-content: right;
-  }
-
   .error {
     text-align: center;
   }
 
   .media-upload-wrapper {
-    margin-right: .2em;
-    margin-bottom: .5em;
+    margin-right: 0.2em;
+    margin-bottom: 0.5em;
     width: 18em;
 
-    img, video {
+    img,
+    video {
       object-fit: contain;
       max-height: 10em;
     }
@@ -557,18 +566,14 @@
     }
   }
 
-  .btn[disabled] {
-    cursor: not-allowed;
-  }
-
   @keyframes fade-in {
     from { opacity: 0; }
-    to   { opacity: 0.6; }
+    to { opacity: 0.6; }
   }
 
   @keyframes fade-out {
     from { opacity: 0.6; }
-    to   { opacity: 0; }
+    to { opacity: 0; }
   }
 
   .drop-indicator {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 0c5fe321..a813b6fd 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -73,8 +73,8 @@
 <script src="./react_button.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-@import '../../_mixins.scss';
+@import "../../variables";
+@import "../../mixins";
 
 .ReactButton {
   .reaction-picker-filter {
@@ -104,20 +104,19 @@
     text-align: center;
     align-content: flex-start;
     user-select: none;
-
-    mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
-          linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
-          linear-gradient(to top, white, white);
+    mask:
+      linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+      linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+      linear-gradient(to top, white, white);
     transition: mask-size 150ms;
     mask-size: 100% 20px, 100% 20px, auto;
 
     /* Autoprefixed seem to ignore this one, and also syntax is different */
-    -webkit-mask-composite: xor;
+    mask-composite: xor;
     mask-composite: exclude;
 
     .emoji-button {
       cursor: pointer;
-
       flex-basis: 20%;
       line-height: 1.5;
       align-content: center;
@@ -128,11 +127,6 @@
     }
   }
 
-  /* override of popover internal stuff */
-  .popover-trigger-button {
-    width: auto;
-  }
-
   .popover-trigger {
     padding: 10px;
     margin: -10px;
@@ -141,10 +135,12 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
-
   }
 
   .popover-trigger-button {
+    /* override of popover internal stuff */
+    width: auto;
+
     @include unfocused-style {
       .focus-marker {
         visibility: hidden;
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 24d9b59b..a26162f0 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -277,7 +277,7 @@
 
 <script src="./registration.js"></script>
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 $validations-cRed: #f04124;
 
 .registration-form {
@@ -321,7 +321,7 @@ $validations-cRed: #f04124;
 
   .form-group--error {
     animation-name: shakeError;
-    animation-duration: .6s;
+    animation-duration: 0.6s;
     animation-timing-function: ease-in-out;
   }
 
@@ -350,7 +350,7 @@ $validations-cRed: #f04124;
   }
 
   form textarea {
-    line-height:16px;
+    line-height: 16px;
     resize: vertical;
   }
 
diff --git a/src/components/remote_user_resolver/remote_user_resolver.vue b/src/components/remote_user_resolver/remote_user_resolver.vue
index f8945225..07aac169 100644
--- a/src/components/remote_user_resolver/remote_user_resolver.vue
+++ b/src/components/remote_user_resolver/remote_user_resolver.vue
@@ -15,6 +15,3 @@
 </template>
 
 <script src="./remote_user_resolver.js"></script>
-
-<style lang="scss">
-</style>
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index dada511b..6e3964b7 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -51,8 +51,8 @@
 <script src="./reply_button.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-@import '../../_mixins.scss';
+@import "../../variables";
+@import "../../mixins";
 
 .ReplyButton {
   display: flex;
@@ -86,6 +86,5 @@
       }
     }
   }
-
 }
 </style>
diff --git a/src/components/report/report.scss b/src/components/report/report.scss
index 578b4eb1..9762400b 100644
--- a/src/components/report/report.scss
+++ b/src/components/report/report.scss
@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
 .Report {
   .report-content {
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 240828e3..7700ee0d 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -65,8 +65,8 @@
 <script src="./retweet_button.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-@import '../../_mixins.scss';
+@import "../../variables";
+@import "../../mixins";
 
 .RetweetButton {
   display: flex;
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 52042314..e5d353ac 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -1,4 +1,4 @@
-@import '../../variables';
+@import "../../variables";
 
 .RichContent {
   blockquote {
@@ -21,11 +21,11 @@
   }
 
   p {
-    margin: 0 0 1em 0;
+    margin: 0 0 1em;
   }
 
   p:last-child {
-    margin: 0 0 0 0;
+    margin: 0;
   }
 
   h1 {
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index f3bee183..d6e7265b 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -64,10 +64,9 @@
 <script src="./scope_selector.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .ScopeSelector {
-
   .scope {
     display: inline-block;
     cursor: pointer;
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 6fc6a0de..19b9c577 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -148,7 +148,7 @@
 <script src="./search.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .search-result-heading {
   color: $fallback--faint;
@@ -176,7 +176,7 @@
 }
 
 .search-result-footer {
-  border-width: 1px 0 0 0;
+  border-width: 1px 0 0;
   border-style: solid;
   border-color: var(--border, $fallback--border);
   padding: 10px;
@@ -229,11 +229,11 @@
     color: $fallback--text;
     color: var(--text, $fallback--text);
   }
-  }
+}
 
-  .more-statuses-button {
-    height: 3.5em;
-    line-height: 3.5em;
-  }
+.more-statuses-button {
+  height: 3.5em;
+  line-height: 3.5em;
+}
 
 </style>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 199a7500..3969d8de 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -56,7 +56,7 @@
 <script src="./search_bar.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .SearchBar {
   display: inline-flex;
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 92493b0b..0ce4ea82 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -21,22 +21,20 @@
 <script src="./select.js"> </script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 /* TODO fix order of styles */
 label.Select {
   padding: 0;
 
   select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     background: transparent;
     border: none;
     color: $fallback--text;
     color: var(--inputText, --text, $fallback--text);
     margin: 0;
-    padding: 0 2em 0 .2em;
+    padding: 0 2em 0 0.2em;
     font-family: sans-serif;
     font-family: var(--inputFont, sans-serif);
     font-size: 1em;
@@ -59,6 +57,5 @@ label.Select {
     z-index: 0;
     pointer-events: none;
   }
-
 }
 </style>
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 1f7683ab..14910fc5 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -51,7 +51,7 @@
 <script src="./selectable_list.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .selectable-list {
   &-item-inner {
@@ -67,6 +67,7 @@
     background-color: $fallback--lightBg;
     background-color: var(--selectedMenu, $fallback--lightBg);
     color: var(--selectedMenuText, $fallback--text);
+
     --faint: var(--selectedMenuFaintText, $fallback--faint);
     --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
     --lightText: var(--selectedMenuLightText, $fallback--lightText);
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
index d141a0d6..8fdbb5d3 100644
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -28,8 +28,3 @@
 </template>
 
 <script src="./choice_setting.js"></script>
-
-<style lang="scss">
-.ChoiceSetting {
-}
-</style>
diff --git a/src/components/settings_modal/helpers/size_setting.vue b/src/components/settings_modal/helpers/size_setting.vue
index 90c9f538..5a78f100 100644
--- a/src/components/settings_modal/helpers/size_setting.vue
+++ b/src/components/settings_modal/helpers/size_setting.vue
@@ -45,10 +45,11 @@
 <script src="./size_setting.js"></script>
 
 <style lang="scss">
-.css-unit-input, .css-unit-input select {
+.css-unit-input,
+.css-unit-input select {
   margin-left: 0.5em;
-  width: 4em !important;
-  max-width: 4em !important;
-  min-width: 4em !important;
+  width: 4em;
+  max-width: 4em;
+  min-width: 4em;
 }
 </style>
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 13cb0e65..f5861229 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -1,4 +1,5 @@
-@import 'src/_variables.scss';
+@import "src/variables";
+
 .settings-modal {
   overflow: hidden;
 
@@ -6,32 +7,13 @@
   .option-list {
     list-style-type: none;
     padding-left: 2em;
+
     li {
       margin-bottom: 0.5em;
     }
-    .suboptions {
-      margin-top: 0.3em
-    }
-  }
-
-  &.peek {
-    .settings-modal-panel {
-      /* Explanation:
-       * Modal is positioned vertically centered.
-       * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
-       * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
-       * + 100% - we move modal completely off-screen, it's top boundary touches
-       *   bottom of the screen
-       * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
-       */
-      transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
 
-      @media all and (max-width: 800px) {
-        /* For mobile, the modal takes 100% of the available screen.
-           This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible.
-        */
-        transform: translateY(calc(100% - 50px));
-      }
+    .suboptions {
+      margin-top: 0.3em;
     }
   }
 
@@ -63,6 +45,7 @@
 
   .settings-footer {
     display: flex;
+
     >* {
       margin-right: 0.5em;
     }
@@ -72,4 +55,26 @@
       flex-grow: 1;
     }
   }
+
+  &.peek {
+    .settings-modal-panel {
+      /* Explanation:
+       * Modal is positioned vertically centered.
+       * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
+       * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
+       * + 100% - we move modal completely off-screen, it's top boundary touches
+       *   bottom of the screen
+       * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
+       */
+      transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
+
+      @media all and (max-width: 800px) {
+        /* For mobile, the modal takes 100% of the available screen.
+           This ensures the minimized modal is always 50px above the browser bottom
+           bar regardless of whether or not it is visible.
+        */
+        transform: translateY(calc(100% - 50px));
+      }
+    }
+  }
 }
diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
index 81ab434b..87df7982 100644
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@@ -1,4 +1,5 @@
-@import 'src/_variables.scss';
+@import "src/variables";
+
 .settings_tab-switcher {
   height: 100%;
 
@@ -10,7 +11,8 @@
     > div,
     > label {
       display: block;
-      margin-bottom: .5em;
+      margin-bottom: 0.5em;
+
       &:last-child {
         margin-bottom: 0;
       }
@@ -21,7 +23,7 @@
 
       .option-list {
         margin: 0;
-        padding-left: .5em;
+        padding-left: 0.5em;
       }
     }
 
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 8561647b..582cb288 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -464,6 +464,7 @@
   justify-content: space-evenly;
   flex-wrap: wrap;
 }
+
 .column-settings .size-label {
   display: block;
   margin-bottom: 0.5em;
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
index 2adff847..5fa3a27b 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
@@ -1,29 +1,29 @@
 .mutes-and-blocks-tab {
-    height: 100%;
+  height: 100%;
 
-    .usersearch-wrapper {
-        padding: 1em;
-    }
+  .usersearch-wrapper {
+    padding: 1em;
+  }
 
-    .bulk-actions {
-        text-align: right;
-        padding: 0 1em;
-        min-height: 2em;
-    }
+  .bulk-actions {
+    text-align: right;
+    padding: 0 1em;
+    min-height: 2em;
+  }
 
-    .bulk-action-button {
-        width: 10em
-    }
+  .bulk-action-button {
+    width: 10em;
+  }
 
-    .domain-mute-form {
-        padding: 1em;
-        display: flex;
-        flex-direction: column
-    }
+  .domain-mute-form {
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+  }
 
-    .domain-mute-button {
-        align-self: flex-end;
-        margin-top: 1em;
-        width: 10em
-    }
+  .domain-mute-button {
+    align-self: flex-end;
+    margin-top: 1em;
+    width: 10em;
+  }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 201f1a76..73879192 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -1,4 +1,5 @@
-@import '../../../_variables.scss';
+@import "../../../variables";
+
 .profile-tab {
   .bio {
     margin: 0;
@@ -8,7 +9,7 @@
     padding-top: 5px;
   }
 
-  input[type=file] {
+  input[type="file"] {
     padding: 5px;
     height: auto;
   }
@@ -52,7 +53,7 @@
     right: 0.2em;
     border-radius: $fallback--tooltipRadius;
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: rgb(0 0 0 / 60%);
     opacity: 0.7;
     width: 1.5em;
     height: 1.5em;
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
index 455d17b6..ee5b6b13 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
@@ -137,9 +137,11 @@
 
 <script src="./mfa.js"></script>
 <style lang="scss">
-@import '../../../../_variables.scss';
+@import "../../../../variables";
+
 .mfa-settings {
-  .mfa-heading, .method-item {
+  .mfa-heading,
+  .method-item {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -155,18 +157,19 @@
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
+
     .qr-code {
       flex: 1;
       padding-right: 10px;
     }
     .verify { flex: 1; }
-    .error { margin: 4px 0 0 0; }
+    .error { margin: 4px 0 0; }
+
     .confirm-otp-actions {
       button {
         width: 15em;
         margin-top: 5px;
       }
-
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
index d7e98b3c..923161b2 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
@@ -21,13 +21,14 @@
 </template>
 <script src="./mfa_backup_codes.js"></script>
 <style lang="scss">
-@import '../../../../_variables.scss';
+@import "../../../../variables";
 
 .mfa-backup-codes {
   .warning {
     color: $fallback--cOrange;
     color: var(--cOrange, $fallback--cOrange);
   }
+
   .backup-codes {
     font-family: var(--postCodeFont, monospace);
   }
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index ba6bd529..d755279a 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -33,10 +33,10 @@
               scope="global"
               keypath="settings.style.preview.text"
             >
-              <code style="font-family: var(--postCodeFont)">
+              <code style="font-family: var(--postCodeFont);">
                 {{ $t('settings.style.preview.mono') }}
               </code>
-              <a style="color: var(--link)">
+              <a style="color: var(--link);">
                 {{ $t('settings.style.preview.link') }}
               </a>
             </i18n-t>
@@ -44,25 +44,25 @@
             <div class="icons">
               <FAIcon
                 fixed-width
-                style="color: var(--cBlue)"
+                style="color: var(--cBlue);"
                 class="fa-scale-110 fa-old-padding"
                 icon="reply"
               />
               <FAIcon
                 fixed-width
-                style="color: var(--cGreen)"
+                style="color: var(--cGreen);"
                 class="fa-scale-110 fa-old-padding"
                 icon="retweet"
               />
               <FAIcon
                 fixed-width
-                style="color: var(--cOrange)"
+                style="color: var(--cOrange);"
                 class="fa-scale-110 fa-old-padding"
                 icon="star"
               />
               <FAIcon
                 fixed-width
-                style="color: var(--cRed)"
+                style="color: var(--cRed);"
                 class="fa-scale-110 fa-old-padding"
                 icon="times"
               />
@@ -81,7 +81,7 @@
               class="faint"
               scope="global"
             >
-              <a style="color: var(--faintLink)">
+              <a style="color: var(--faintLink);">
                 {{ $t('settings.style.preview.faint_link') }}
               </a>
             </i18n-t>
@@ -138,6 +138,7 @@ export default {}
 .preview-container {
   position: relative;
 }
+
 .underlay-preview {
   position: absolute;
   top: 0;
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index bad6f51b..9935c2e7 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -1,20 +1,17 @@
-@import 'src/_variables.scss';
+@import "src/variables";
+
 .theme-tab {
   padding-bottom: 2em;
-  .theme-warning {
-    display: flex;
-    align-items: baseline;
-    margin-bottom: .5em;
-    .buttons {
-      .btn {
-        margin-bottom: .5em;
-      }
-    }
-  }
+
   .preset-switcher {
     margin-right: 1em;
   }
 
+  .btn {
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+  }
+
   .style-control {
     display: flex;
     align-items: baseline;
@@ -24,35 +21,37 @@
       flex: 1;
     }
 
-    &.disabled {
-      input, select {
-        opacity: .5
-      }
-    }
-
     .opt {
-      margin: .5em;
+      margin: 0.5em;
     }
 
     .color-input {
       flex: 0 0 0;
     }
 
-    input, select {
+    input,
+    select {
       min-width: 3em;
       margin: 0;
       flex: 0;
 
-      &[type=number] {
+      &[type="number"] {
         min-width: 5em;
       }
 
-      &[type=range] {
+      &[type="range"] {
         flex: 1;
         min-width: 3em;
         align-self: flex-start;
       }
     }
+
+    &.disabled {
+      input,
+      select {
+        opacity: 0.5;
+      }
+    }
   }
 
   .reset-container {
@@ -63,8 +62,7 @@
   .reset-container,
   .apply-container,
   .radius-container,
-  .color-container,
-  {
+  .color-container, {
     display: flex;
   }
 
@@ -73,10 +71,11 @@
     flex-direction: column;
   }
 
-  .color-container{
+  .color-container {
     > h4 {
       width: 99%;
     }
+
     flex-wrap: wrap;
     justify-content: space-between;
   }
@@ -100,7 +99,7 @@
     p {
       flex: 1;
       margin: 0;
-      margin-right: .5em;
+      margin-right: 0.5em;
     }
   }
 
@@ -112,15 +111,16 @@
       min-width: 1px;
       flex: 0 auto;
       padding: 0 1em;
-      margin-bottom: .5em;
+      margin-bottom: 0.5em;
     }
   }
 
   .shadow-selector {
     .override {
       flex: 1;
-      margin-left: .5em;
+      margin-left: 0.5em;
     }
+
     .select-container {
       margin-top: -4px;
       margin-bottom: -3px;
@@ -136,7 +136,7 @@
 
     .presets,
     .import-export {
-      margin-bottom: .5em;
+      margin-bottom: 0.5em;
     }
 
     .import-export {
@@ -144,16 +144,17 @@
     }
 
     .override {
-      margin-left: .5em;
+      margin-left: 0.5em;
     }
   }
 
   .save-load-options {
     flex-wrap: wrap;
-    margin-top: .5em;
+    margin-top: 0.5em;
     justify-content: center;
+
     .keep-option {
-      margin: 0 .5em .5em;
+      margin: 0 0.5em 0.5em;
       min-width: 25%;
     }
   }
@@ -179,11 +180,11 @@
           flex: 1;
 
           h4 {
-            margin-bottom: .25em;
+            margin-bottom: 0.25em;
           }
 
           .icons {
-            margin-top: .5em;
+            margin-top: 0.5em;
             display: flex;
 
             i {
@@ -199,8 +200,20 @@
         align-items: center;
       }
 
-      .avatar, .avatar-alt{
-        background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
+      .avatar,
+      .avatar-alt {
+        background:
+          linear-gradient(
+            135deg,
+            #b8e1fc 0%,
+            #a9d2f3 10%,
+            #90bae4 25%,
+            #90bcea 37%,
+            #90bff0 50%,
+            #6ba8e5 51%,
+            #a2daf5 83%,
+            #bdf3fd 100%
+          );
         color: black;
         font-family: sans-serif;
         text-align: center;
@@ -251,33 +264,33 @@
     }
   }
 
+  .radius-item {
+    flex-basis: auto;
+  }
+
   .radius-item,
   .color-item {
     min-width: 20em;
     margin: 5px 6px 0 0;
-    display:flex;
+    display: flex;
     flex-direction: column;
     flex: 1 1 0;
 
     &.wide {
-      min-width: 60%
+      min-width: 60%;
     }
 
     &:not(.wide):nth-child(2n+1) {
       margin-right: 7px;
-
     }
 
-    .color, .opacity {
-      display:flex;
+    .color,
+    .opacity {
+      display: flex;
       align-items: baseline;
     }
   }
 
-  .radius-item {
-    flex-basis: auto;
-  }
-
   .theme-radius-rn,
   .theme-color-cl {
     border: 0;
@@ -295,14 +308,11 @@
 
   .theme-radius-in {
     min-width: 1em;
-  }
-
-  .theme-radius-in {
     max-width: 7em;
     flex: 1;
   }
 
-  .theme-radius-lb{
+  .theme-radius-lb {
     max-width: 50em;
   }
 
@@ -310,9 +320,16 @@
     padding: 20px;
   }
 
-  .btn {
-    margin-left: .25em;
-    margin-right: .25em;
+  .theme-warning {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: 0.5em;
+
+    .buttons {
+      .btn {
+        margin-bottom: 0.5em;
+      }
+    }
   }
 }
 
@@ -323,6 +340,7 @@
     justify-content: space-around;
     flex-grow: 1;
 
+    /* stylelint-disable-next-line no-descending-specificity */
     .btn {
       flex-grow: 1;
       min-height: 2em;
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 669cac71..7546535d 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -218,7 +218,8 @@
 <script src="./shadow_control.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
+
 .shadow-control {
   display: flex;
   flex-wrap: wrap;
@@ -229,6 +230,7 @@
   .shadow-tweak {
     margin: 5px 6px 0 0;
   }
+
   .shadow-preview-container {
     flex: 0;
     display: flex;
@@ -236,19 +238,19 @@
 
     $side: 15em;
 
-    input[type=number] {
+    input[type="number"] {
       width: 5em;
       min-width: 2em;
     }
+
     .x-shift-control,
     .y-shift-control {
       display: flex;
       flex: 0;
 
-      &[disabled=disabled] *{
-        opacity: .5
+      &[disabled="disabled"] * {
+        opacity: 0.5;
       }
-
     }
 
     .x-shift-control {
@@ -256,37 +258,40 @@
     }
 
     .x-shift-control .wrap,
-    input[type=range] {
+    input[type="range"] {
       margin: 0;
       width: $side;
       height: 2em;
     }
+
     .y-shift-control {
       flex-direction: column;
       align-items: flex-end;
+
       .wrap {
         width: 2em;
         height: $side;
       }
-      input[type=range] {
+
+      input[type="range"] {
         transform-origin: 1em 1em;
         transform: rotate(90deg);
       }
     }
+
     .preview-window {
       flex: 1;
-      background-color: #999999;
+      background-color: #999;
       display: flex;
       align-items: center;
       justify-content: center;
       background-image:
-      linear-gradient(45deg, #666666 25%, transparent 25%),
-      linear-gradient(-45deg, #666666 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, #666666 75%),
-      linear-gradient(-45deg, transparent 75%, #666666 75%);
+        linear-gradient(45deg, #666 25%, transparent 25%),
+        linear-gradient(-45deg, #666 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #666 75%),
+        linear-gradient(-45deg, transparent 75%, #666 75%);
       background-size: 20px 20px;
-      background-position:0 0, 0 10px, 10px -10px, -10px 0;
-
+      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
       border-radius: $fallback--inputRadius;
       border-radius: var(--inputRadius, $fallback--inputRadius);
 
@@ -312,14 +317,15 @@
         flex: 1;
       }
 
-      .shadow-switcher, .btn {
+      .shadow-switcher,
+      .btn {
         min-width: 1px;
         margin-right: 5px;
       }
 
       .btn {
-        padding: 0 .4em;
-        margin: 0 .1em;
+        padding: 0 0.4em;
+        margin: 0 0.1em;
       }
     }
   }
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index 688c2d61..a7013469 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -75,7 +75,7 @@
 <script src="./shout_panel.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .floating-shout {
   position: fixed;
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 887596f8..994ac953 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -73,7 +73,7 @@
         >
           <router-link
             :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
-            style="position: relative"
+            style="position: relative;"
           >
             <FAIcon
               fixed-width
@@ -251,7 +251,7 @@
 <script src="./side_drawer.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .side-drawer-container {
   position: fixed;
@@ -284,11 +284,11 @@
   z-index: -1;
   transition: 0.35s;
   transition-property: background-color;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgb(0 0 0 / 50%);
 }
 
 .side-drawer-darken-closed {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0%);
 }
 
 .side-drawer-click-outside {
@@ -297,20 +297,21 @@
 
 .side-drawer {
   overflow-x: hidden;
-  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
   transition: 0.35s;
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
   transition-property: transform;
   margin: 0 0 0 -100px;
   padding: 0 0 1em 100px;
   width: 80%;
   max-width: 20em;
   flex: 0 0 80%;
-  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+  box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
   box-shadow: var(--panelShadow);
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--link;
   color: var(--popoverText, $fallback--link);
+
   --faint: var(--popoverFaintText, $fallback--faint);
   --faintLink: var(--popoverFaintLink, $fallback--faint);
   --lightText: var(--popoverLightText, $fallback--lightText);
@@ -360,7 +361,6 @@
   list-style: none;
   margin: 0;
   padding: 0;
-
   border-bottom: 1px solid;
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
@@ -373,7 +373,8 @@
 .side-drawer li {
   padding: 0;
 
-  a, button {
+  a,
+  button {
     box-sizing: border-box;
     display: block;
     height: 3em;
@@ -385,6 +386,7 @@
       background-color: var(--selectedMenuPopover, $fallback--lightBg);
       color: $fallback--text;
       color: var(--selectedMenuPopoverText, $fallback--text);
+
       --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
       --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
diff --git a/src/components/staff_panel/staff_panel.vue b/src/components/staff_panel/staff_panel.vue
index 6b9e61f2..77155e8b 100644
--- a/src/components/staff_panel/staff_panel.vue
+++ b/src/components/staff_panel/staff_panel.vue
@@ -27,7 +27,6 @@
 <script src="./staff_panel.js"></script>
 
 <style lang="scss">
-
 .staff-group {
   padding-left: 1em;
   padding-top: 1em;
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index ada9841e..44812867 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
 .Status {
   min-width: 0;
@@ -181,7 +181,7 @@
 
   .reply-to-popover {
     .reply-to:hover::before {
-      content: '';
+      content: "";
       display: block;
       position: absolute;
       bottom: 0;
@@ -197,7 +197,7 @@
 
     &.-strikethrough {
       .reply-to::after {
-        content: '';
+        content: "";
         display: block;
         position: absolute;
         top: 50%;
@@ -336,7 +336,7 @@
       margin-left: 0.2em;
 
       &::before {
-        content: ' ';
+        content: " ";
       }
     }
 
@@ -374,7 +374,7 @@
     align-items: center;
 
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       height: 100%;
       width: 1px;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 82eb7ac6..fe8778cf 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -261,7 +261,7 @@
                   v-if="!isPreview"
                   :status-id="status.parent_visible && status.in_reply_to_status_id"
                   class="reply-to-popover"
-                  style="min-width: 0"
+                  style="min-width: 0;"
                   :class="{ '-strikethrough': !status.parent_visible }"
                 >
                   <button
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 039d4c7f..8fd60afc 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
 .StatusBody {
   display: flex;
@@ -40,7 +40,7 @@
   .summary-wrapper {
     margin-bottom: 0.5em;
     border-style: solid;
-    border-width: 0 0 1px 0;
+    border-width: 0 0 1px;
     border-color: var(--border, $fallback--border);
     flex-grow: 0;
 
@@ -58,8 +58,7 @@
 
   .text-wrapper {
     display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
+    flex-flow: column nowrap;
 
     &.-tall-status {
       position: relative;
@@ -75,7 +74,7 @@
           linear-gradient(to top, white, white);
 
         /* Autoprefixed seem to ignore this one, and also syntax is different */
-        -webkit-mask-composite: xor;
+        mask-composite: xor;
         mask-composite: exclude;
       }
     }
@@ -144,7 +143,7 @@
       mask-image: linear-gradient(to bottom, white 2em, transparent 3em);
 
       /* Autoprefixed seem to ignore this one, and also syntax is different */
-      -webkit-mask-composite: xor;
+      mask-composite: xor;
       mask-composite: exclude;
     }
 
@@ -158,7 +157,7 @@
 
     .summary-wrapper {
       .summary::after {
-        content: ': ';
+        content: ": ";
       }
 
       line-height: inherit;
diff --git a/src/components/status_history_modal/status_history_modal.vue b/src/components/status_history_modal/status_history_modal.vue
index 990be35b..79642e9c 100644
--- a/src/components/status_history_modal/status_history_modal.vue
+++ b/src/components/status_history_modal/status_history_modal.vue
@@ -32,6 +32,7 @@
 .modal-view.status-history-modal-view {
   align-items: flex-start;
 }
+
 .status-history-modal-panel {
   flex-shrink: 0;
   margin-top: 25%;
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index f4ab357b..311ca099 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -40,14 +40,13 @@
 <script src="./status_popover.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 /* popover styles load on-demand, so we need to override */
 .status-popover.popover {
   font-size: 1rem;
   min-width: 15em;
   max-width: 95%;
-
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
   border-style: solid;
diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index dc449ccb..904853c0 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -32,24 +32,29 @@
 <script src="./sticker_picker.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .sticker-picker {
   width: 100%;
+
   .contents {
     min-height: 250px;
+
     .sticker-picker-content {
       display: flex;
       flex-wrap: wrap;
       padding: 0 4px;
+
       .sticker {
         display: flex;
         flex: 1 1 auto;
         margin: 4px;
         width: 56px;
         height: 56px;
+
         img {
           height: 100%;
+
           &:hover {
             filter: drop-shadow(0 0 5px var(--accent, $fallback--link));
           }
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index d015e138..fc46fbe6 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -28,7 +28,7 @@
 <script src="./still-image.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .still-image {
   position: relative;
@@ -58,13 +58,13 @@
   &.animated {
     &::before {
       zoom: var(--_still_image-label-scale, 1);
-      content: 'gif';
+      content: "gif";
       position: absolute;
       line-height: 1;
       font-size: 0.7em;
       top: 0.5em;
       left: 0.5em;
-      background: rgba(127, 127, 127, 0.5);
+      background: rgb(127 127 127 / 50%);
       color: #fff;
       display: block;
       padding: 2px 4px;
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index d930368c..705925c8 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -1,5 +1,6 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
+/* stylelint-disable no-descending-specificity */
 .tab-switcher {
   display: flex;
 
@@ -19,8 +20,9 @@
       flex-direction: row;
       flex: 0 0 auto;
 
-      &::after, &::before {
-        content: '';
+      &::after,
+      &::before {
+        content: "";
         flex: 1 1 auto;
         border-bottom: 1px solid;
         border-bottom-color: $fallback--border;
@@ -39,6 +41,7 @@
           border-bottom-color: var(--border, $fallback--border);
         }
       }
+
       .tab {
         width: 100%;
         min-width: 1px;
@@ -48,6 +51,7 @@
         margin-bottom: 6px - 99px;
       }
     }
+
     .contents.scrollable-tabs {
       flex-basis: 0;
     }
@@ -70,10 +74,11 @@
       overflow-x: hidden;
       flex-direction: column;
 
-      &::after, &::before {
+      &::after,
+      &::before {
         flex-shrink: 0;
-        flex-basis: .5em;
-        content: '';
+        flex-basis: 0.5em;
+        content: "";
         border-right: 1px solid;
         border-right-color: $fallback--border;
         border-right-color: var(--border, $fallback--border);
@@ -107,7 +112,7 @@
 
         &::before {
           flex: 0 0 6px;
-          content: '';
+          content: "";
           border-right: 1px solid;
           border-right-color: $fallback--border;
           border-right-color: var(--border, $fallback--border);
@@ -131,12 +136,13 @@
         margin-left: 1em;
 
         @media all and (max-width: 800px) {
-          padding-left: .25em;
-          padding-right: calc(.25em + 200px);
-          margin-right: calc(.25em - 200px);
-          margin-left: .25em;
+          padding-left: 0.25em;
+          padding-right: calc(0.25em + 200px);
+          margin-right: calc(0.25em - 200px);
+          margin-left: 0.25em;
+
           .text {
-            display: none
+            display: none;
           }
         }
       }
@@ -145,15 +151,17 @@
 
   .contents {
     flex: 1 0 auto;
-    min-height: 0px;
+    min-height: 0;
 
     .hidden {
       display: none;
     }
+
     .full-height:not(.hidden) {
       height: 100%;
       display: flex;
       flex-direction: column;
+
       > *:not(.mobile-label) {
         flex: 1;
       }
@@ -196,7 +204,8 @@
     position: relative;
     box-sizing: border-box;
 
-    &::after, &::before {
+    &::after,
+    &::before {
       display: block;
       flex: 1 1 auto;
     }
@@ -209,7 +218,7 @@
 
     &:not(.active) {
       &::after {
-        content: '';
+        content: "";
         position: absolute;
         z-index: 7;
       }
@@ -217,11 +226,11 @@
   }
 
   .mobile-label {
-    padding-left: .3em;
-    padding-bottom: .25em;
-    margin-top: .5em;
-    margin-left: .2em;
-    margin-bottom: .25em;
+    padding-left: 0.3em;
+    padding-bottom: 0.25em;
+    margin-top: 0.5em;
+    margin-left: 0.2em;
+    margin-bottom: 0.25em;
     border-bottom: 1px solid var(--border, $fallback--border);
 
     @media all and (min-width: 800px) {
@@ -229,3 +238,4 @@
     }
   }
 }
+/* stylelint-enable no-descending-specificity */
diff --git a/src/components/terms_of_service_panel/terms_of_service_panel.vue b/src/components/terms_of_service_panel/terms_of_service_panel.vue
index 1df41d70..bff0ae74 100644
--- a/src/components/terms_of_service_panel/terms_of_service_panel.vue
+++ b/src/components/terms_of_service_panel/terms_of_service_panel.vue
@@ -17,6 +17,6 @@
 
 <style lang="scss">
 .tos-content {
-  margin: 1em
+  margin: 1em;
 }
 </style>
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index c6fffc71..04727278 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -119,7 +119,8 @@
 <script src="./thread_tree.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
+
 .thread-tree-replies {
   margin-left: var(--status-margin, $status-margin);
   border-left: 2px solid var(--border, $fallback--border);
@@ -127,6 +128,7 @@
 
 .thread-tree-replies-hidden {
   padding: var(--status-margin, $status-margin);
+
   /* Make the button stretch along the whole row */
   display: flex;
   align-items: stretch;
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index c6fb1ca7..4371947d 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
 .Timeline {
   .alert-dot {
@@ -46,10 +46,9 @@
       text-align: center;
       line-height: 2.75em;
       padding: 0 0.5em;
-    }
 
-    .timeline-heading {
-      .button-default, .alert {
+      .button-default,
+      .alert {
         line-height: 2em;
         width: 100%;
       }
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index e7250282..5f1da1f7 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -45,56 +45,7 @@
 <script src="./timeline_menu.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-
-.TimelineMenu {
-  margin-right: auto;
-  min-width: 0;
-
-  .popover-trigger-button {
-    vertical-align: bottom;
-  }
-
-  .panel::after {
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-  }
-
-  .timeline-menu-title {
-    margin: 0;
-    cursor: pointer;
-    user-select: none;
-    width: 100%;
-    display: flex;
-
-    .timeline-menu-name {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    svg {
-      margin-left: 0.6em;
-      transition: transform 100ms;
-    }
-
-    .click-blocker {
-      cursor: default;
-      flex-grow: 1;
-    }
-  }
-
-  &.open .timeline-menu-title svg {
-    color: $fallback--text;
-    color: var(--panelText, $fallback--text);
-    transform: rotate(180deg);
-  }
-
-  .panel {
-    box-shadow: var(--popoverShadow);
-  }
-
-}
+@import "../../variables";
 
 .timeline-menu-popover {
   min-width: 24rem;
@@ -110,24 +61,6 @@
     padding: 0;
   }
 
-  li {
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    padding: 0;
-
-    &:last-child a {
-      border-bottom-right-radius: $fallback--panelRadius;
-      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-bottom-left-radius: $fallback--panelRadius;
-      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
-    }
-
-    &:last-child {
-      border: none;
-    }
-  }
-
   a {
     display: block;
     padding: 0 0.65em;
@@ -139,6 +72,7 @@
       background-color: var(--selectedMenu, $fallback--lightBg);
       color: $fallback--link;
       color: var(--selectedMenuText, $fallback--link);
+
       --faint: var(--selectedMenuFaintText, $fallback--faint);
       --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuLightText, $fallback--lightText);
@@ -150,7 +84,9 @@
       background-color: $fallback--lightBg;
       background-color: var(--selectedMenu, $fallback--lightBg);
       color: $fallback--text;
-      color: var(--selectedMenuText, $fallback--text); --faint: var(--selectedMenuFaintText, $fallback--faint);
+      color: var(--selectedMenuText, $fallback--text);
+
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
       --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuLightText, $fallback--lightText);
       --icon: var(--selectedMenuIcon, $fallback--icon);
@@ -165,6 +101,71 @@
       margin-left: -0.2em;
     }
   }
+
+  li {
+    border-bottom: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    padding: 0;
+
+    &:last-child a {
+      border-bottom-right-radius: $fallback--panelRadius;
+      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
+      border-bottom-left-radius: $fallback--panelRadius;
+      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
+    }
+
+    &:last-child {
+      border: none;
+    }
+  }
 }
 
+.TimelineMenu {
+  margin-right: auto;
+  min-width: 0;
+
+  .popover-trigger-button {
+    vertical-align: bottom;
+  }
+
+  .panel::after {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  .timeline-menu-title {
+    margin: 0;
+    cursor: pointer;
+    user-select: none;
+    width: 100%;
+    display: flex;
+
+    .timeline-menu-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    svg {
+      margin-left: 0.6em;
+      transition: transform 100ms;
+    }
+
+    .click-blocker {
+      cursor: default;
+      flex-grow: 1;
+    }
+  }
+
+  &.open .timeline-menu-title svg {
+    color: $fallback--text;
+    color: var(--panelText, $fallback--text);
+    transform: rotate(180deg);
+  }
+
+  .panel {
+    box-shadow: var(--popoverShadow);
+  }
+}
 </style>
diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss
index ce8129d0..4337acc4 100644
--- a/src/components/update_notification/update_notification.scss
+++ b/src/components/update_notification/update_notification.scss
@@ -1,4 +1,5 @@
-@import 'src/_variables.scss';
+@import "src/variables";
+
 .UpdateNotification {
   overflow: hidden;
 }
@@ -21,7 +22,8 @@
 
   @media all and (max-width: 800px) {
     /* For mobile, the modal takes 100% of the available screen.
-    This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible.
+       This ensures the minimized modal is always 50px above the browser
+       bottom bar regardless of whether or not it is visible.
    */
     width: 100vw;
   }
@@ -44,7 +46,7 @@
   }
 
   .panel-body {
-    border-width: 0 0 1px 0;
+    border-width: 0 0 1px;
     border-style: solid;
     border-color: var(--border, $fallback--border);
   }
@@ -67,7 +69,7 @@
     z-index: 20;
     position: relative;
     shape-margin: 0.5em;
-    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
+    filter: drop-shadow(5px 5px 10px rgb(0 0 0 / 50%));
     pointer-events: none;
   }
 
@@ -94,7 +96,7 @@
   }
 
   &.-peek {
-  /* Explanation:
+    /* Explanation:
    * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
    * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
    */
@@ -103,7 +105,7 @@
     .pleroma-tan {
       float: right;
       z-index: 10;
-      shape-image-threshold: 0.7;
+      shape-image-threshold: 70%;
     }
 
     .extra-info-group {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index f4d294df..91c17611 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -27,7 +27,7 @@
 
 <script src="./user_avatar.js"></script>
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .Avatar {
   --_avatarShadowBox: var(--avatarStatusShadow);
@@ -85,10 +85,9 @@
     right: 0;
     margin: -0.2em;
     padding: 0.2em;
-    background: rgba(127, 127, 127, 0.5);
+    background: rgb(127 127 127 / 50%);
     color: #fff;
     border-radius: var(--tooltipRadius);
   }
-
 }
 </style>
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index cdb8cb57..942673c4 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../variables";
 
 .user-card {
   position: relative;
@@ -11,7 +11,7 @@
   }
 
   .panel-heading {
-    padding: .5em 0;
+    padding: 0.5em 0;
     text-align: center;
     box-shadow: none;
     background: transparent;
@@ -35,17 +35,19 @@
     left: 0;
     right: 0;
     bottom: 0;
-    mask: linear-gradient(to top, white, transparent) bottom no-repeat,
-          linear-gradient(to top, white, white);
+    mask:
+      linear-gradient(to top, white, transparent) bottom no-repeat,
+      linear-gradient(to top, white, white);
     // Autoprefixer seem to ignore this one, and also syntax is different
-    -webkit-mask-composite: xor;
+    mask-composite: xor;
     mask-composite: exclude;
     background-size: cover;
     mask-size: 100% 60%;
-    border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
-    border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
-    border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
-    border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
+    border-radius:
+      calc(var(--__roundnessTop, --panelRadius) - 1px)
+      calc(var(--__roundnessTop, --panelRadius) - 1px)
+      calc(var(--__roundnessBottom, --panelRadius) - 1px)
+      calc(var(--__roundnessBottom, --panelRadius) - 1px);
     background-color: var(--profileBg);
     z-index: -2;
 
@@ -159,17 +161,17 @@
       top: 0;
       right: 0;
       bottom: 0;
-      background-color: rgba(0, 0, 0, 0.3);
+      background-color: rgb(0 0 0 / 30%);
       display: flex;
       justify-content: center;
       align-items: center;
       border-radius: $fallback--avatarRadius;
       border-radius: var(--avatarRadius, $fallback--avatarRadius);
       opacity: 0;
-      transition: opacity .2s ease;
+      transition: opacity 0.2s ease;
 
       svg {
-        color: #FFF;
+        color: #fff;
       }
     }
 
@@ -178,7 +180,8 @@
     }
   }
 
-  .external-link-button, .edit-profile-button {
+  .external-link-button,
+  .edit-profile-button {
     cursor: pointer;
     width: 2.5em;
     text-align: center;
@@ -191,34 +194,6 @@
     }
   }
 
-  .user-summary {
-    display: block;
-    margin-left: 0.6em;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1 1 0;
-    // This is so that text doesn't get overlapped by avatar's shadow if it has
-    // big one
-    z-index: 1;
-    line-height: 2em;
-
-    --emoji-size: 1.7em;
-
-    .top-line,
-    .bottom-line {
-      display: flex;
-    }
-  }
-
-  .user-name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    flex: 1 1 auto;
-    margin-right: 1em;
-    font-size: 1.1em;
-  }
-
   .bottom-line {
     font-weight: light;
     font-size: 1.1em;
@@ -253,8 +228,36 @@
     }
   }
 
+  .user-summary {
+    display: block;
+    margin-left: 0.6em;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1 1 0;
+    // This is so that text doesn't get overlapped by avatar's shadow if it has
+    // big one
+    z-index: 1;
+    line-height: 2em;
+
+    --emoji-size: 1.7em;
+
+    .top-line,
+    .bottom-line {
+      display: flex;
+    }
+  }
+
+  .user-name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex: 1 1 auto;
+    margin-right: 1em;
+    font-size: 1.1em;
+  }
+
   .user-meta {
-    margin-bottom: .15em;
+    margin-bottom: 0.15em;
     display: flex;
     align-items: baseline;
     line-height: 22px;
@@ -263,7 +266,7 @@
     .following {
       flex: 1 0 auto;
       margin: 0;
-      margin-bottom: .25em;
+      margin-bottom: 0.25em;
       text-align: left;
     }
 
@@ -271,7 +274,7 @@
       flex: 0 1 auto;
       display: flex;
       flex-wrap: wrap;
-      margin-right: -.5em;
+      margin-right: -0.5em;
       align-self: start;
 
       .userHighlightCl {
@@ -294,19 +297,20 @@
       .userHighlightText,
       .userHighlightSel {
         vertical-align: top;
-        margin-right: .5em;
-        margin-bottom: .25em;
+        margin-right: 0.5em;
+        margin-bottom: 0.25em;
       }
     }
   }
+
   .user-interactions {
     position: relative;
     display: flex;
     flex-flow: row wrap;
-    margin-right: -.75em;
+    margin-right: -0.75em;
 
     > * {
-      margin: 0 .75em .6em 0;
+      margin: 0 0.75em 0.6em 0;
       white-space: nowrap;
       min-width: 95px;
     }
@@ -317,7 +321,7 @@
   }
 
   .user-note {
-    margin: 0 .75em .6em 0;
+    margin: 0 0.75em 0.6em 0;
   }
 }
 
@@ -327,8 +331,8 @@
 
 .user-counts {
   display: flex;
-  line-height:16px;
-  padding: .5em 1.5em 0em 1.5em;
+  line-height: 16px;
+  padding: 0.5em 1.5em 0;
   text-align: center;
   justify-content: space-between;
   color: $fallback--lightText;
@@ -338,14 +342,16 @@
 
 .user-count {
   flex: 1 0 auto;
-  padding: .5em 0 .5em 0;
-  margin: 0 .5em;
+  padding: 0.5em 0;
+  margin: 0 0.5em;
 
   h5 {
-    font-size:1em;
+    font-size: 1em;
     font-weight: bolder;
     margin: 0 0 0.25em;
   }
+
+  /* stylelint-disable-next-line no-descending-specificity */
   a {
     text-decoration: none;
   }
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 635dc7f6..8307cc8a 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -48,7 +48,7 @@
 <script src="./user_list_popover.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .user-list-popover {
   padding: 0.5em;
diff --git a/src/components/user_note/user_note.vue b/src/components/user_note/user_note.vue
index 4286e017..4e05951f 100644
--- a/src/components/user_note/user_note.vue
+++ b/src/components/user_note/user_note.vue
@@ -48,7 +48,7 @@
 <script src="./user_note.js"></script>
 
 <style lang="scss">
-@import '../../variables';
+@import "../../variables";
 
 .user-note {
   display: flex;
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index 53d51fc4..3b2bbc45 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -24,10 +24,12 @@
 <script src="./user_popover.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 /* popover styles load on-demand, so we need to override */
+/* stylelint-disable block-no-empty */
 .user-popover.popover {
 }
+/* stylelint-enable block-no-empty */
 
 </style>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index d5e8d230..2720f052 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -140,7 +140,7 @@
 <script src="./user_profile.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .user-profile {
   flex: 2;
@@ -186,7 +186,8 @@
         margin: 0 0 0 0.25em;
       }
 
-      .user-profile-field-name, .user-profile-field-value {
+      .user-profile-field-name,
+      .user-profile-field-value {
         line-height: 1.3;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -204,6 +205,7 @@
     padding: 2em;
   }
 }
+
 .user-profile-placeholder {
   .panel-body {
     display: flex;
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 8c42ab7b..092c514e 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -72,7 +72,7 @@
 <script src="./user_reporting_modal.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .user-reporting-panel {
   width: 90vw;
@@ -121,7 +121,7 @@
     }
 
     .alert {
-      margin: 1em 0 0 0;
+      margin: 1em 0 0;
       line-height: 1.3em;
     }
   }
diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue
index 3a17d0e2..56543d91 100644
--- a/src/components/who_to_follow/who_to_follow.vue
+++ b/src/components/who_to_follow/who_to_follow.vue
@@ -15,6 +15,3 @@
 </template>
 
 <script src="./who_to_follow.js"></script>
-
-<style lang="scss">
-</style>
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index c1ba6fb1..0fecec0b 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -33,24 +33,28 @@
   .who-to-follow * {
     vertical-align: middle;
   }
+
   .who-to-follow img {
     width: 32px;
     height: 32px;
   }
+
   .who-to-follow {
-    padding: 0em 1em;
-    margin: 0px;
+    padding: 0 1em;
+    margin: 0;
   }
+
   .who-to-follow-items {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding: 0px;
-    margin: 1em 0em;
+    padding: 0;
+    margin: 1em 0;
   }
+
   .who-to-follow-more {
-    padding: 0px;
-    margin: 1em 0em;
+    padding: 0;
+    margin: 1em 0;
     text-align: center;
   }
 </style>
diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
index de86ed4a..bad852f4 100644
--- a/src/hocs/with_load_more/with_load_more.scss
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -1,5 +1,4 @@
-
-@import '../../_variables.scss';
+@import "../../variables";
 
 .with-load-more {
   &-footer {
diff --git a/src/hocs/with_subscription/with_subscription.scss b/src/hocs/with_subscription/with_subscription.scss
index 7fd83802..996045b4 100644
--- a/src/hocs/with_subscription/with_subscription.scss
+++ b/src/hocs/with_subscription/with_subscription.scss
@@ -7,4 +7,4 @@
       font-size: 1rem;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/panel.scss b/src/panel.scss
index a53e47c6..9471da11 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .panel {
   position: relative;
   display: flex;
@@ -12,14 +13,14 @@
   }
 
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 5;
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
     box-shadow: var(--panelShadow);
     pointer-events: none;
   }
@@ -87,7 +88,7 @@
 
   &::after,
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     bottom: 0;
@@ -126,7 +127,7 @@
 .panel-heading {
   border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
   border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
-  border-width: 0 0 1px 0;
+  border-width: 0 0 1px;
   align-items: start;
   // panel theme
   color: var(--panelText);
@@ -150,7 +151,7 @@
 
   .button-unstyled:hover,
   a:hover {
-    i[class*=icon-],
+    i[class*="icon-"],
     .svg-inline--fa,
     .iconLetter {
       color: var(--panelText);
@@ -173,7 +174,7 @@
       flex-shrink: 0;
 
       &,
-      i[class*=icon-] {
+      i[class*="icon-"] {
         color: $fallback--text;
         color: var(--btnPanelText, $fallback--text);
       }
@@ -234,7 +235,8 @@
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
   align-items: center;
-  border-width: 1px 0 0 0;
+  border-width: 1px 0 0;
   border-style: solid;
   border-color: var(--border, $fallback--border);
 }
+/* stylelint-enable no-descending-specificity */
diff --git a/yarn.lock b/yarn.lock
index c0061cf8..e2e06dec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5278,7 +5278,7 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jest-worker@^28.0.2:
+jest-worker@^28.0.2, jest-worker@^28.1.0:
   version "28.1.3"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-28.1.3.tgz#7e3c4ce3fa23d1bb6accb169e7f396f98ed4bb98"
   integrity sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==
@@ -8014,6 +8014,17 @@ stylelint-scss@^4.0.0:
     postcss-selector-parser "^6.0.6"
     postcss-value-parser "^4.1.0"
 
+stylelint-webpack-plugin@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/stylelint-webpack-plugin/-/stylelint-webpack-plugin-3.3.0.tgz#3ba40e2b2b2b7d1802fa53618e01fc28bc21ffb3"
+  integrity sha512-F53bapIZ9zI16ero8IWm6TrUE6SSibZBphJE9b5rR2FxtvmGmm1YmS+a5xjQzn63+cv71GVSCu4byX66fBLpEw==
+  dependencies:
+    globby "^11.1.0"
+    jest-worker "^28.1.0"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    schema-utils "^4.0.0"
+
 stylelint@14.16.1:
   version "14.16.1"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.16.1.tgz#b911063530619a1bbe44c2b875fd8181ebdc742d"
-- 
cgit v1.2.3-70-g09d2


From d21ce77670d1a639929aac468e0b4c88cf0b2186 Mon Sep 17 00:00:00 2001
From: flxy <flxy@staycomfy.dev>
Date: Thu, 12 Jan 2023 09:45:10 +0100
Subject: Use splice instead of delete

---
 src/components/settings_modal/tabs/profile_tab.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index b86faef0..ff2ccef2 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -153,7 +153,7 @@ const ProfileTab = {
       return false
     },
     deleteField (index, event) {
-      this.$delete(this.newFields, index)
+      this.newFields.splice(index, 1)
     },
     uploadFile (slot, e) {
       const file = e.target.files[0]
-- 
cgit v1.2.3-70-g09d2


From fa3b07352bf37a3cb90282726b74e75b40067722 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 14 Jan 2023 22:43:18 -0500
Subject: Debounce mute word setting

---
 src/components/settings_modal/tabs/filtering_tab.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 5354e5db..7c37f0bc 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,4 +1,4 @@
-import { filter, trim } from 'lodash'
+import { filter, trim, debounce } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
@@ -29,11 +29,16 @@ const FilteringTab = {
       },
       set (value) {
         this.muteWordsStringLocal = value
+        this.debouncedSetMuteWords(value)
+      }
+    },
+    debouncedSetMuteWords () {
+      return debounce((value) => {
         this.$store.dispatch('setOption', {
           name: 'muteWords',
           value: filter(value.split('\n'), (word) => trim(word).length > 0)
         })
-      }
+      }, 1000)
     }
   },
   // Updating nested properties
-- 
cgit v1.2.3-70-g09d2


From 1ff2948aeb485ef48a4add6310ba8fb9d43d262c Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 15:17:06 -0500
Subject: Add setting entries for whether to show confirmation dialogs

---
 src/components/settings_modal/tabs/general_tab.vue | 35 ++++++++++++++++++++++
 1 file changed, 35 insertions(+)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 582cb288..906c3758 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -148,6 +148,41 @@
             </SizeSetting>
           </div>
         </li>
+        <li class="select-multiple">
+          <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
+          <ul class="option-list">
+            <li>
+              <BooleanSetting path="modalOnRepeat">
+                {{ $t('settings.confirm_dialogs_repeat') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnUnfollow">
+                {{ $t('settings.confirm_dialogs_unfollow') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnBlock">
+                {{ $t('settings.confirm_dialogs_block') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnMute">
+                {{ $t('settings.confirm_dialogs_mute') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnDelete">
+                {{ $t('settings.confirm_dialogs_delete') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnLogout">
+                {{ $t('settings.confirm_dialogs_logout') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
       </ul>
     </div>
     <div class="setting-item">
-- 
cgit v1.2.3-70-g09d2


From 547e85c7c6f9bf8779cc06344c4eebaaa8f9d775 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 7 Jun 2022 12:37:16 -0400
Subject: Add confirm dialogs for accept & deny follow requests

---
 .../follow_request_card/follow_request_card.js     | 49 +++++++++++++++++++++-
 .../follow_request_card/follow_request_card.vue    | 22 ++++++++++
 src/components/notification/notification.js        | 43 ++++++++++++++++++-
 src/components/notification/notification.vue       | 22 ++++++++++
 src/components/settings_modal/tabs/general_tab.vue | 10 +++++
 src/modules/config.js                              |  2 +
 src/modules/instance.js                            |  2 +
 7 files changed, 147 insertions(+), 3 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
index cbd75311..b0873bb1 100644
--- a/src/components/follow_request_card/follow_request_card.js
+++ b/src/components/follow_request_card/follow_request_card.js
@@ -1,10 +1,18 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js'
 
 const FollowRequestCard = {
   props: ['user'],
   components: {
-    BasicUserCard
+    BasicUserCard,
+    ConfirmModal
+  },
+  data () {
+    return {
+      showingApproveConfirmDialog: false,
+      showingDenyConfirmDialog: false
+    }
   },
   methods: {
     findFollowRequestNotificationId () {
@@ -13,7 +21,26 @@ const FollowRequestCard = {
       )
       return notif && notif.id
     },
+    showApproveConfirmDialog () {
+      this.showingApproveConfirmDialog = true
+    },
+    hideApproveConfirmDialog () {
+      this.showingApproveConfirmDialog = false
+    },
+    showDenyConfirmDialog () {
+      this.showingDenyConfirmDialog = true
+    },
+    hideDenyConfirmDialog () {
+      this.showingDenyConfirmDialog = false
+    },
     approveUser () {
+      if (this.shouldConfirmApprove) {
+        this.showApproveConfirmDialog()
+      } else {
+        this.doApprove()
+      }
+    },
+    doApprove () {
       this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
 
@@ -25,14 +52,34 @@ const FollowRequestCard = {
           notification.type = 'follow'
         }
       })
+      this.hideApproveConfirmDialog()
     },
     denyUser () {
+      if (this.shouldConfirmDeny) {
+        this.showDenyConfirmDialog()
+      } else {
+        this.doDeny()
+      }
+    },
+    doDeny () {
       const notifId = this.findFollowRequestNotificationId()
       this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
         .then(() => {
           this.$store.dispatch('dismissNotificationLocal', { id: notifId })
           this.$store.dispatch('removeFollowRequest', this.user)
         })
+      this.hideDenyConfirmDialog()
+    }
+  },
+  computed: {
+    mergedConfig () {
+      return this.$store.getters.mergedConfig
+    },
+    shouldConfirmApprove () {
+      return this.mergedConfig.modalOnApproveFollow
+    },
+    shouldConfirmDeny () {
+      return this.mergedConfig.modalOnDenyFollow
     }
   }
 }
diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
index eb222cc7..55b65112 100644
--- a/src/components/follow_request_card/follow_request_card.vue
+++ b/src/components/follow_request_card/follow_request_card.vue
@@ -14,6 +14,28 @@
         {{ $t('user_card.deny') }}
       </button>
     </div>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingApproveConfirmDialog"
+        :title="$t('user_card.approve_confirm_title')"
+        :confirm-text="$t('user_card.approve_confirm_accept_button')"
+        :cancel-text="$t('user_card.approve_confirm_cancel_button')"
+        @accepted="doApprove"
+        @cancelled="hideApproveConfirmDialog"
+      >
+        {{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
+      </confirm-modal>
+      <confirm-modal
+        v-if="showingDenyConfirmDialog"
+        :title="$t('user_card.deny_confirm_title')"
+        :confirm-text="$t('user_card.deny_confirm_accept_button')"
+        :cancel-text="$t('user_card.deny_confirm_cancel_button')"
+        @accepted="doDeny"
+        @cancelled="hideDenyConfirmDialog"
+      >
+        {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
+      </confirm-modal>
+    </teleport>
   </basic-user-card>
 </template>
 
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 265aaee0..0ce8892e 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -8,6 +8,7 @@ import Report from '../report/report.vue'
 import UserLink from '../user_link/user_link.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import UserPopover from '../user_popover/user_popover.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -43,7 +44,9 @@ const Notification = {
     return {
       statusExpanded: false,
       betterShadow: this.$store.state.interface.browserSupport.cssFilter,
-      unmuted: false
+      unmuted: false,
+      showingApproveConfirmDialog: false,
+      showingDenyConfirmDialog: false
     }
   },
   props: ['notification'],
@@ -56,7 +59,8 @@ const Notification = {
     Report,
     RichContent,
     UserPopover,
-    UserLink
+    UserLink,
+    ConfirmModal
   },
   methods: {
     toggleStatusExpanded () {
@@ -71,7 +75,26 @@ const Notification = {
     toggleMute () {
       this.unmuted = !this.unmuted
     },
+    showApproveConfirmDialog () {
+      this.showingApproveConfirmDialog = true
+    },
+    hideApproveConfirmDialog () {
+      this.showingApproveConfirmDialog = false
+    },
+    showDenyConfirmDialog () {
+      this.showingDenyConfirmDialog = true
+    },
+    hideDenyConfirmDialog () {
+      this.showingDenyConfirmDialog = false
+    },
     approveUser () {
+      if (this.shouldConfirmApprove) {
+        this.showApproveConfirmDialog()
+      } else {
+        this.doApprove()
+      }
+    },
+    doApprove () {
       this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
       this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id })
@@ -83,6 +106,13 @@ const Notification = {
       })
     },
     denyUser () {
+      if (this.shouldConfirmDeny) {
+        this.showDenyConfirmDialog()
+      } else {
+        this.doDeny()
+      }
+    },
+    doDeny () {
       this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
         .then(() => {
           this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
@@ -117,6 +147,15 @@ const Notification = {
     isStatusNotification () {
       return isStatusNotification(this.notification.type)
     },
+    mergedConfig () {
+      return this.$store.getters.mergedConfig
+    },
+    shouldConfirmApprove () {
+      return this.mergedConfig.modalOnApproveFollow
+    },
+    shouldConfirmDeny () {
+      return this.mergedConfig.modalOnDenyFollow
+    },
     ...mapState({
       currentUser: state => state.users.currentUser
     })
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index f1aa5420..e1ea42ad 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -243,6 +243,28 @@
         </template>
       </div>
     </div>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingApproveConfirmDialog"
+        :title="$t('user_card.approve_confirm_title')"
+        :confirm-text="$t('user_card.approve_confirm_accept_button')"
+        :cancel-text="$t('user_card.approve_confirm_cancel_button')"
+        @accepted="doApprove"
+        @cancelled="hideApproveConfirmDialog"
+      >
+        {{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
+      </confirm-modal>
+      <confirm-modal
+        v-if="showingDenyConfirmDialog"
+        :title="$t('user_card.deny_confirm_title')"
+        :confirm-text="$t('user_card.deny_confirm_accept_button')"
+        :cancel-text="$t('user_card.deny_confirm_cancel_button')"
+        @accepted="doDeny"
+        @cancelled="hideDenyConfirmDialog"
+      >
+        {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
+      </confirm-modal>
+    </teleport>
   </article>
 </template>
 
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 906c3758..9de3ed81 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -181,6 +181,16 @@
                 {{ $t('settings.confirm_dialogs_logout') }}
               </BooleanSetting>
             </li>
+            <li>
+              <BooleanSetting path="modalOnApproveFollow">
+                {{ $t('settings.confirm_dialogs_approve_follow') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnDenyFollow">
+                {{ $t('settings.confirm_dialogs_deny_follow') }}
+              </BooleanSetting>
+            </li>
           </ul>
         </li>
       </ul>
diff --git a/src/modules/config.js b/src/modules/config.js
index a8949030..1df279a2 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -84,6 +84,8 @@ export const defaultState = {
   modalOnMute: undefined, // instance default
   modalOnDelete: undefined, // instance default
   modalOnLogout: undefined, // instance default
+  modalOnApproveFollow: undefined, // instance default
+  modalOnDenyFollow: undefined, // instance default
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 6fc3830c..fcb6eecc 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -77,6 +77,8 @@ const defaultState = {
   modalOnMute: false,
   modalOnDelete: true,
   modalOnLogout: true,
+  modalOnApproveFollow: false,
+  modalOnDenyFollow: false,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',
-- 
cgit v1.2.3-70-g09d2


From 72cb9e8bdbd41b66f72f8dd0dcd52cc04c7a2245 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 21 Jan 2023 01:28:43 -0500
Subject: Make all emoji inputs screen-reader-friendly

---
 src/components/emoji_input/emoji_input.js          |  1 +
 .../post_status_form/post_status_form.js           |  4 ++
 .../post_status_form/post_status_form.vue          | 25 ++++++------
 src/components/settings_modal/tabs/profile_tab.js  |  4 ++
 src/components/settings_modal/tabs/profile_tab.vue | 46 ++++++++++++++--------
 .../attributes_helper/attributes_helper.service.js |  8 ++++
 6 files changed, 58 insertions(+), 30 deletions(-)
 create mode 100644 src/services/attributes_helper/attributes_helper.service.js

(limited to 'src/components/settings_modal')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 020e9fde..3b0db786 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -287,6 +287,7 @@ const EmojiInput = {
           ...rest,
           img: imageUrl || ''
         }))
+      this.highlighted = -1
       this.$refs.screenReaderNotice.announce(
         this.$tc('tool_tip.autocomplete_available',
           this.suggestions.length,
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index eb55cfcc..b75fee69 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -8,6 +8,7 @@ import Gallery from 'src/components/gallery/gallery.vue'
 import StatusContent from '../status_content/status_content.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
+import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
 import { reject, map, uniqBy, debounce } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
@@ -629,6 +630,9 @@ const PostStatusForm = {
     },
     openProfileTab () {
       this.$store.dispatch('openSettingsModalTab', 'profile')
+    },
+    propsToNative (props) {
+      return propsToNative(props)
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 26a5acc4..328e145f 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -124,14 +124,17 @@
           :suggest="emojiSuggestor"
           class="form-control"
         >
-          <input
-            v-model="newStatus.spoilerText"
-            type="text"
-            :placeholder="$t('post_status.content_warning')"
-            :disabled="posting && !optimisticPosting"
-            size="1"
-            class="form-post-subject"
-          >
+          <template #default="inputProps">
+            <input
+              v-model="newStatus.spoilerText"
+              type="text"
+              :placeholder="$t('post_status.content_warning')"
+              :disabled="posting && !optimisticPosting"
+              v-bind="propsToNative(inputProps)"
+              size="1"
+              class="form-post-subject"
+            >
+          </template>
         </EmojiInput>
         <EmojiInput
           ref="emoji-input"
@@ -158,11 +161,7 @@
               :disabled="posting && !optimisticPosting"
               class="form-post-body"
               :class="{ 'scrollable-form': !!maxHeight }"
-              v-bind="inputProps"
-              :aria-owns="inputProps.ariaOwns"
-              :aria-autocomplete="inputProps.ariaAutocomplete"
-              :aria-activedescendant="inputProps.ariaActiveDescendant"
-              :aria-expanded="inputProps.ariaExpanded"
+              v-bind="propsToNative(inputProps)"
               @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
               @keydown.meta.enter="postStatus($event, newStatus)"
               @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index ff2ccef2..50de733e 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -12,6 +12,7 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import localeService from 'src/services/locale/locale.service.js'
+import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -257,6 +258,9 @@ const ProfileTab = {
         messageArgs: [error.message],
         level: 'error'
       })
+    },
+    propsToNative (props) {
+      return propsToNative(props)
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 642d54ca..54704dad 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -8,11 +8,14 @@
         enable-emoji-picker
         :suggest="emojiSuggestor"
       >
-        <input
-          id="username"
-          v-model="newName"
-          class="name-changer"
-        >
+        <template #default="inputProps">
+          <input
+            id="username"
+            v-model="newName"
+            class="name-changer"
+            v-bind="propsToNative(inputProps)"
+          >
+        </template>
       </EmojiInput>
       <p>{{ $t('settings.bio') }}</p>
       <EmojiInput
@@ -20,10 +23,13 @@
         enable-emoji-picker
         :suggest="emojiUserSuggestor"
       >
-        <textarea
-          v-model="newBio"
-          class="bio resize-height"
-        />
+        <template #default="inputProps">
+          <textarea
+            v-model="newBio"
+            class="bio resize-height"
+            v-bind="propsToNative(inputProps)"
+          />
+        </template>
       </EmojiInput>
       <p v-if="role === 'admin' || role === 'moderator'">
         <Checkbox v-model="showRole">
@@ -48,10 +54,13 @@
             hide-emoji-button
             :suggest="userSuggestor"
           >
-            <input
-              v-model="newFields[i].name"
-              :placeholder="$t('settings.profile_fields.name')"
-            >
+            <template #default="inputProps">
+              <input
+                v-model="newFields[i].name"
+                :placeholder="$t('settings.profile_fields.name')"
+                v-bind="propsToNative(inputProps)"
+              >
+            </template>
           </EmojiInput>
           <EmojiInput
             v-model="newFields[i].value"
@@ -59,10 +68,13 @@
             hide-emoji-button
             :suggest="userSuggestor"
           >
-            <input
-              v-model="newFields[i].value"
-              :placeholder="$t('settings.profile_fields.value')"
-            >
+            <template #default="inputProps">
+              <input
+                v-model="newFields[i].value"
+                :placeholder="$t('settings.profile_fields.value')"
+                v-bind="propsToNative(inputProps)"
+              >
+            </template>
           </EmojiInput>
           <button
             class="delete-field button-unstyled -hover-highlight"
diff --git a/src/services/attributes_helper/attributes_helper.service.js b/src/services/attributes_helper/attributes_helper.service.js
new file mode 100644
index 00000000..74d3323c
--- /dev/null
+++ b/src/services/attributes_helper/attributes_helper.service.js
@@ -0,0 +1,8 @@
+import { kebabCase } from 'lodash'
+
+const propsToNative = props => Object.keys(props).reduce((acc, cur) => {
+  acc[kebabCase(cur)] = props[cur]
+  return acc
+}, {})
+
+export { propsToNative }
-- 
cgit v1.2.3-70-g09d2


From ce8101e60a1dc1a768f793a34fb6e9cca70b4858 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 27 Sep 2022 18:47:50 -0400
Subject: Add remove follower confirmation

---
 src/components/account_actions/account_actions.js  | 20 +++++++++++++++-
 src/components/account_actions/account_actions.vue | 21 +++++++++++++++++
 src/components/follow_card/follow_card.vue         |  1 +
 .../remove_follower_button.js                      | 27 ++++++++++++++++++++--
 .../remove_follower_button.vue                     | 21 +++++++++++++++++
 src/components/settings_modal/tabs/general_tab.vue |  5 ++++
 src/i18n/en.json                                   |  5 ++++
 src/modules/config.js                              |  1 +
 src/modules/instance.js                            |  1 +
 9 files changed, 99 insertions(+), 3 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 7dec0c3d..acd93e06 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -18,7 +18,8 @@ const AccountActions = {
   ],
   data () {
     return {
-      showingConfirmBlock: false
+      showingConfirmBlock: false,
+      showingConfirmRemoveFollower: false
     }
   },
   components: {
@@ -34,6 +35,12 @@ const AccountActions = {
     hideConfirmBlock () {
       this.showingConfirmBlock = false
     },
+    showConfirmRemoveUserFromFollowers () {
+      this.showingConfirmRemoveFollower = true
+    },
+    hideConfirmRemoveUserFromFollowers () {
+      this.showingConfirmRemoveFollower = false
+    },
     showRepeats () {
       this.$store.dispatch('showReblogs', this.user.id)
     },
@@ -55,7 +62,15 @@ const AccountActions = {
       this.$store.dispatch('unblockUser', this.user.id)
     },
     removeUserFromFollowers () {
+      if (!this.shouldConfirmRemoveUserFromFollowers) {
+        this.doRemoveUserFromFollowers()
+      } else {
+        this.showConfirmRemoveUserFromFollowers()
+      }
+    },
+    doRemoveUserFromFollowers () {
       this.$store.dispatch('removeUserFromFollowers', this.user.id)
+      this.hideConfirmRemoveUserFromFollowers()
     },
     reportUser () {
       this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
@@ -71,6 +86,9 @@ const AccountActions = {
     shouldConfirmBlock () {
       return this.$store.getters.mergedConfig.modalOnBlock
     },
+    shouldConfirmRemoveUserFromFollowers () {
+      return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
+    },
     ...mapState({
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
     })
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 161bab09..ce19291a 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -95,6 +95,27 @@
         </i18n-t>
       </confirm-modal>
     </teleport>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingConfirmRemoveFollower"
+        :title="$t('user_card.remove_follower_confirm_title')"
+        :confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
+        :cancel-text="$t('user_card.remove_follower_confirm_cancel_button')"
+        @accepted="doRemoveUserFromFollowers"
+        @cancelled="hideConfirmRemoveUserFromFollowers"
+      >
+        <i18n-t
+          keypath="user_card.remove_follower_confirm"
+          tag="span"
+        >
+          <template #user>
+            <span
+              v-text="user.screen_name_ui"
+            />
+          </template>
+        </i18n-t>
+      </confirm-modal>
+    </teleport>
   </div>
 </template>
 
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index eff69fb2..bdb6b809 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -24,6 +24,7 @@
         />
         <RemoveFollowerButton
           v-if="noFollowsYou && relationship.followed_by"
+          :user="user"
           :relationship="relationship"
           class="follow-card-button"
         />
diff --git a/src/components/remove_follower_button/remove_follower_button.js b/src/components/remove_follower_button/remove_follower_button.js
index e1a7531b..052a519f 100644
--- a/src/components/remove_follower_button/remove_follower_button.js
+++ b/src/components/remove_follower_button/remove_follower_button.js
@@ -1,10 +1,16 @@
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+
 export default {
-  props: ['relationship'],
+  props: ['user', 'relationship'],
   data () {
     return {
-      inProgress: false
+      inProgress: false,
+      showingConfirmRemoveFollower: false
     }
   },
+  components: {
+    ConfirmModal
+  },
   computed: {
     label () {
       if (this.inProgress) {
@@ -12,14 +18,31 @@ export default {
       } else {
         return this.$t('user_card.remove_follower')
       }
+    },
+    shouldConfirmRemoveUserFromFollowers () {
+      return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
     }
   },
   methods: {
+    showConfirmRemoveUserFromFollowers () {
+      this.showingConfirmRemoveFollower = true
+    },
+    hideConfirmRemoveUserFromFollowers () {
+      this.showingConfirmRemoveFollower = false
+    },
     onClick () {
+      if (!this.shouldConfirmRemoveUserFromFollowers) {
+        this.doRemoveUserFromFollowers()
+      } else {
+        this.showConfirmRemoveUserFromFollowers()
+      }
+    },
+    doRemoveUserFromFollowers () {
       this.inProgress = true
       this.$store.dispatch('removeUserFromFollowers', this.relationship.id).then(() => {
         this.inProgress = false
       })
+      this.hideConfirmRemoveUserFromFollowers()
     }
   }
 }
diff --git a/src/components/remove_follower_button/remove_follower_button.vue b/src/components/remove_follower_button/remove_follower_button.vue
index a3a4c242..0012aebd 100644
--- a/src/components/remove_follower_button/remove_follower_button.vue
+++ b/src/components/remove_follower_button/remove_follower_button.vue
@@ -7,6 +7,27 @@
     @click="onClick"
   >
     {{ label }}
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingConfirmRemoveFollower"
+        :title="$t('user_card.remove_follower_confirm_title')"
+        :confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
+        :cancel-text="$t('user_card.remove_follower_confirm_cancel_button')"
+        @accepted="doRemoveUserFromFollowers"
+        @cancelled="hideConfirmRemoveUserFromFollowers"
+      >
+        <i18n-t
+          keypath="user_card.remove_follower_confirm"
+          tag="span"
+        >
+          <template #user>
+            <span
+              v-text="user.screen_name_ui"
+            />
+          </template>
+        </i18n-t>
+      </confirm-modal>
+    </teleport>
   </button>
 </template>
 
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 9de3ed81..703e94a0 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -191,6 +191,11 @@
                 {{ $t('settings.confirm_dialogs_deny_follow') }}
               </BooleanSetting>
             </li>
+            <li>
+              <BooleanSetting path="modalOnRemoveUserFromFollowers">
+                {{ $t('settings.confirm_dialogs_remove_follower') }}
+              </BooleanSetting>
+            </li>
           </ul>
         </li>
       </ul>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 213f9cf0..ca022c82 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -429,6 +429,7 @@
     "confirm_dialogs_logout": "logging out",
     "confirm_dialogs_approve_follow": "approving a follower",
     "confirm_dialogs_deny_follow": "denying a follower",
+    "confirm_dialogs_remove_follower": "removing a follower",
     "mutes_and_blocks": "Mutes and Blocks",
     "data_import_export_tab": "Data import / export",
     "default_vis": "Default visibility scope",
@@ -964,6 +965,10 @@
     "per_day": "per day",
     "remote_follow": "Remote follow",
     "remove_follower": "Remove follower",
+    "remove_follower_confirm_title": "Remove follower confirmation",
+    "remove_follower_confirm_accept_button": "Remove",
+    "remove_follower_confirm_cancel_button": "Keep",
+    "remove_follower_confirm": "Do you really want to remove {user} from your followers?",
     "report": "Report",
     "statuses": "Statuses",
     "subscribe": "Subscribe",
diff --git a/src/modules/config.js b/src/modules/config.js
index 1df279a2..8e6b2c3d 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -86,6 +86,7 @@ export const defaultState = {
   modalOnLogout: undefined, // instance default
   modalOnApproveFollow: undefined, // instance default
   modalOnDenyFollow: undefined, // instance default
+  modalOnRemoveUserFromFollowers: undefined, // instance default
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index fcb6eecc..ce958907 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -79,6 +79,7 @@ const defaultState = {
   modalOnLogout: true,
   modalOnApproveFollow: false,
   modalOnDenyFollow: false,
+  modalOnRemoveUserFromFollowers: false,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',
-- 
cgit v1.2.3-70-g09d2


From 902954b29825647eaf5435c89e379ef4babe7931 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 9 Feb 2023 21:35:56 -0500
Subject: Use class to style screenreader-only text

---
 src/App.scss                                               | 14 ++++++++++++--
 src/_mixins.scss                                           | 12 ------------
 src/components/checkbox/checkbox.vue                       |  3 +--
 .../screen_reader_notice/screen_reader_notice.vue          | 10 +---------
 .../settings_modal/helpers/modified_indicator.vue          |  2 +-
 5 files changed, 15 insertions(+), 26 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/App.scss b/src/App.scss
index 1c4c8941..3f352e8d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -580,8 +580,6 @@ textarea,
   }
 
   &[type="checkbox"] {
-    display: none;
-
     &:checked + label::before {
       color: $fallback--text;
       color: var(--inputText, $fallback--text);
@@ -887,3 +885,15 @@ option {
   opacity: 0;
 }
 /* stylelint-enable no-descending-specificity */
+
+.visible-for-screenreader-only {
+  display: block;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  visibility: visible;
+  clip: rect(0 0 0 0);
+  padding: 0;
+  position: absolute;
+}
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 677bc210..e99fe26f 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -16,15 +16,3 @@
     @content;
   }
 }
-
-@mixin visible-for-screenreader-only {
-  display: block;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  visibility: visible;
-  clip: rect(0 0 0 0);
-  padding: 0;
-  position: absolute;
-}
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index ac7acd52..42f89be9 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -5,6 +5,7 @@
   >
     <input
       type="checkbox"
+      class="visible-for-screenreader-only"
       :disabled="disabled"
       :checked="modelValue"
       :indeterminate="indeterminate"
@@ -85,8 +86,6 @@ export default {
   }
 
   input[type="checkbox"] {
-    @include visible-for-screenreader-only;
-
     &:checked + .checkbox-indicator::before {
       color: $fallback--text;
       color: var(--inputText, $fallback--text);
diff --git a/src/components/screen_reader_notice/screen_reader_notice.vue b/src/components/screen_reader_notice/screen_reader_notice.vue
index 1cd908ae..8384ae6b 100644
--- a/src/components/screen_reader_notice/screen_reader_notice.vue
+++ b/src/components/screen_reader_notice/screen_reader_notice.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="screen-reader-text"
+    class="visible-for-screenreader-only"
     :aria-live="ariaLive"
   >
     {{ currentText }}
@@ -8,11 +8,3 @@
 </template>
 
 <script src="./screen_reader_notice.js"></script>
-
-<style lang="scss">
-@import "../../mixins";
-
-.screen-reader-text {
-  @include visible-for-screenreader-only;
-}
-</style>
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index 8311533a..45db3fc2 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -5,12 +5,12 @@
   >
     <Popover
       trigger="hover"
+      :trigger-attrs="{ 'aria-label': $t('settings.setting_changed') }"
     >
       <template #trigger>
         &nbsp;
         <FAIcon
           icon="wrench"
-          :aria-label="$t('settings.setting_changed')"
         />
       </template>
       <template #content>
-- 
cgit v1.2.3-70-g09d2


From 5468309f6aefbc61467338d2a96f29d6c416cc54 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 20 Feb 2023 23:49:34 -0500
Subject: Make it possible to auto-select the first candidate in autocomplete

---
 src/components/emoji_input/emoji_input.js          | 5 ++++-
 src/components/settings_modal/tabs/general_tab.vue | 8 ++++++++
 src/i18n/en.json                                   | 1 +
 src/modules/config.js                              | 3 ++-
 src/modules/instance.js                            | 1 +
 5 files changed, 16 insertions(+), 2 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 8a8d098d..68654f69 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -134,6 +134,9 @@ const EmojiInput = {
     padEmoji () {
       return this.$store.getters.mergedConfig.padEmoji
     },
+    defaultCandidateIndex () {
+      return this.$store.getters.mergedConfig.autocompleteSelect ? 0 : -1
+    },
     preText () {
       return this.modelValue.slice(0, this.caret)
     },
@@ -287,7 +290,7 @@ const EmojiInput = {
           ...rest,
           img: imageUrl || ''
         }))
-      this.highlighted = -1
+      this.highlighted = this.defaultCandidateIndex
       this.$refs.screenReaderNotice.announce(
         this.$tc('tool_tip.autocomplete_available',
           this.suggestions.length,
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 703e94a0..65248ac1 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -501,6 +501,14 @@
             {{ $t('settings.pad_emoji') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="autocompleteSelect"
+            expert="1"
+          >
+            {{ $t('settings.autocomplete_select_first') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index dba8a13f..6c9bc8e2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -465,6 +465,7 @@
     "domain_mutes": "Domains",
     "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
     "pad_emoji": "Pad emoji with spaces when adding from picker",
+    "autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
     "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
     "export_theme": "Save preset",
     "filtering": "Filtering",
diff --git a/src/modules/config.js b/src/modules/config.js
index eb33f95f..3d9cf591 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -115,7 +115,8 @@ export const defaultState = {
   conversationTreeAdvanced: undefined, // instance default
   conversationOtherRepliesButton: undefined, // instance default
   conversationTreeFadeAncestors: undefined, // instance default
-  maxDepthInThread: undefined // instance default
+  maxDepthInThread: undefined, // instance default
+  autocompleteSelect: undefined // instance default
 }
 
 // caching the instance default properties
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 16f72583..938ca64d 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -104,6 +104,7 @@ const defaultState = {
   conversationOtherRepliesButton: 'below',
   conversationTreeFadeAncestors: false,
   maxDepthInThread: 6,
+  autocompleteSelect: false,
 
   // Nasty stuff
   customEmoji: [],
-- 
cgit v1.2.3-70-g09d2


From e516eee479cf6e943b6fc43d0a9d18793c141ba0 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Tue, 21 Feb 2023 00:39:16 -0500
Subject: Make block & mute lists able to load more

---
 src/components/list/list.vue                       |  6 +++-
 .../settings_modal/tabs/mutes_and_blocks_tab.js    |  7 ++--
 src/hocs/with_load_more/with_load_more.jsx         |  2 +-
 src/modules/users.js                               | 38 ++++++++++++++++++----
 src/services/api/api.service.js                    | 16 ++++++---
 5 files changed, 55 insertions(+), 14 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index f17766b4..a3562c5d 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="list">
+  <div
+    class="list"
+    role="list"
+  >
     <div
       v-for="item in items"
       :key="getKey(item)"
       class="list-item"
+      role="listitem"
     >
       <slot
         name="item"
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
index 6cfeea35..51974f9f 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
@@ -9,17 +9,20 @@ import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue
 import SelectableList from 'src/components/selectable_list/selectable_list.vue'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import withSubscription from 'src/components/../hocs/with_subscription/with_subscription'
+import withLoadMore from 'src/components/../hocs/with_load_more/with_load_more'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 
-const BlockList = withSubscription({
+const BlockList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchBlocks'),
   select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+  destroy: () => {},
   childPropName: 'items'
 })(SelectableList)
 
-const MuteList = withSubscription({
+const MuteList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchMutes'),
   select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+  destroy: () => {},
   childPropName: 'items'
 })(SelectableList)
 
diff --git a/src/hocs/with_load_more/with_load_more.jsx b/src/hocs/with_load_more/with_load_more.jsx
index c0ae1856..4e5bb50f 100644
--- a/src/hocs/with_load_more/with_load_more.jsx
+++ b/src/hocs/with_load_more/with_load_more.jsx
@@ -98,7 +98,7 @@ const withLoadMore = ({
               </button>
             }
             {!this.error && this.loading && <FAIcon spin icon="circle-notch"/>}
-            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
+            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries} role="button" tabindex="0">{this.$t('general.more')}</a>}
           </div>
         </div>
       )
diff --git a/src/modules/users.js b/src/modules/users.js
index a1316ba2..7b41fab6 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -195,9 +195,15 @@ export const mutations = {
       state.currentUser.blockIds.push(blockId)
     }
   },
+  setBlockIdsMaxId (state, blockIdsMaxId) {
+    state.currentUser.blockIdsMaxId = blockIdsMaxId
+  },
   saveMuteIds (state, muteIds) {
     state.currentUser.muteIds = muteIds
   },
+  setMuteIdsMaxId (state, muteIdsMaxId) {
+    state.currentUser.muteIdsMaxId = muteIdsMaxId
+  },
   addMuteId (state, muteId) {
     if (state.currentUser.muteIds.indexOf(muteId) === -1) {
       state.currentUser.muteIds.push(muteId)
@@ -320,10 +326,20 @@ const users = {
           .then((inLists) => store.commit('updateUserInLists', { id, inLists }))
       }
     },
-    fetchBlocks (store) {
-      return store.rootState.api.backendInteractor.fetchBlocks()
+    fetchBlocks (store, args) {
+      const { reset } = args || {}
+
+      const maxId = store.state.currentUser.blockIdsMaxId
+      return store.rootState.api.backendInteractor.fetchBlocks({ maxId })
         .then((blocks) => {
-          store.commit('saveBlockIds', map(blocks, 'id'))
+          if (reset) {
+            store.commit('saveBlockIds', map(blocks, 'id'))
+          } else {
+            map(blocks, 'id').map(id => store.commit('addBlockId', id))
+          }
+          if (blocks.length) {
+            store.commit('setBlockIdsMaxId', last(blocks).id)
+          }
           store.commit('addNewUsers', blocks)
           return blocks
         })
@@ -346,10 +362,20 @@ const users = {
     editUserNote (store, args) {
       return editUserNote(store, args)
     },
-    fetchMutes (store) {
-      return store.rootState.api.backendInteractor.fetchMutes()
+    fetchMutes (store, args) {
+      const { reset } = args || {}
+
+      const maxId = store.state.currentUser.muteIdsMaxId
+      return store.rootState.api.backendInteractor.fetchMutes({ maxId })
         .then((mutes) => {
-          store.commit('saveMuteIds', map(mutes, 'id'))
+          if (reset) {
+            store.commit('saveMuteIds', map(mutes, 'id'))
+          } else {
+            map(mutes, 'id').map(id => store.commit('addMuteId', id))
+          }
+          if (mutes.length) {
+            store.commit('setMuteIdsMaxId', last(mutes).id)
+          }
           store.commit('addNewUsers', mutes)
           return mutes
         })
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index b8c10b21..94bb0c54 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -1113,8 +1113,12 @@ const generateMfaBackupCodes = ({ credentials }) => {
   }).then((data) => data.json())
 }
 
-const fetchMutes = ({ credentials }) => {
-  return promisedRequest({ url: MASTODON_USER_MUTES_URL, credentials })
+const fetchMutes = ({ maxId, credentials }) => {
+  const query = new URLSearchParams({ with_relationships: true })
+  if (maxId) {
+    query.append('max_id', maxId)
+  }
+  return promisedRequest({ url: `${MASTODON_USER_MUTES_URL}?${query.toString()}`, credentials })
     .then((users) => users.map(parseUser))
 }
 
@@ -1138,8 +1142,12 @@ const unsubscribeUser = ({ id, credentials }) => {
   return promisedRequest({ url: MASTODON_UNSUBSCRIBE_USER(id), credentials, method: 'POST' })
 }
 
-const fetchBlocks = ({ credentials }) => {
-  return promisedRequest({ url: MASTODON_USER_BLOCKS_URL, credentials })
+const fetchBlocks = ({ maxId, credentials }) => {
+  const query = new URLSearchParams({ with_relationships: true })
+  if (maxId) {
+    query.append('max_id', maxId)
+  }
+  return promisedRequest({ url: `${MASTODON_USER_BLOCKS_URL}?${query.toString()}`, credentials })
     .then((users) => users.map(parseUser))
 }
 
-- 
cgit v1.2.3-70-g09d2


From af0cd5422304d7b2111739d85c279b3fa175a853 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Mar 2023 14:32:13 +0200
Subject: serverSideConfig renamed into profileSettingConfig to avoid confusion
 with serverSideStorage, reduced overall need for SharedComputedObject in
 settings tabs, moved copypaste code of "setting" type of helpers into a
 separate file.

---
 .../settings_modal/helpers/boolean_setting.js      |  53 +-------
 .../settings_modal/helpers/boolean_setting.vue     |   4 +-
 .../settings_modal/helpers/choice_setting.js       |  51 ++------
 .../settings_modal/helpers/choice_setting.vue      |   2 +-
 .../settings_modal/helpers/integer_setting.js      |  39 +-----
 .../helpers/profile_setting_indicator.vue          |  51 ++++++++
 .../helpers/server_side_indicator.vue              |  51 --------
 src/components/settings_modal/helpers/setting.js   |  84 +++++++++++++
 .../helpers/shared_computed_object.js              |  18 ---
 .../settings_modal/helpers/size_setting.js         |  48 ++-----
 .../settings_modal/tabs/filtering_tab.vue          |  14 +--
 src/components/settings_modal/tabs/general_tab.js  |   6 +-
 src/components/settings_modal/tabs/general_tab.vue |  29 ++---
 .../settings_modal/tabs/notifications_tab.vue      |   4 +-
 src/components/settings_modal/tabs/profile_tab.vue |  32 +++--
 src/main.js                                        |   4 +-
 src/modules/config.js                              |   3 +-
 src/modules/profileConfig.js                       | 140 +++++++++++++++++++++
 src/modules/serverSideConfig.js                    | 140 ---------------------
 19 files changed, 351 insertions(+), 422 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/profile_setting_indicator.vue
 delete mode 100644 src/components/settings_modal/helpers/server_side_indicator.vue
 create mode 100644 src/components/settings_modal/helpers/setting.js
 create mode 100644 src/modules/profileConfig.js
 delete mode 100644 src/modules/serverSideConfig.js

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/boolean_setting.js b/src/components/settings_modal/helpers/boolean_setting.js
index 2e6992cb..078cc5ff 100644
--- a/src/components/settings_modal/helpers/boolean_setting.js
+++ b/src/components/settings_modal/helpers/boolean_setting.js
@@ -1,56 +1,13 @@
-import { get, set } from 'lodash'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ModifiedIndicator from './modified_indicator.vue'
-import ServerSideIndicator from './server_side_indicator.vue'
+import ProfileSettingIndicator from './profile_setting_indicator.vue'
+import Setting from './setting.js'
+
 export default {
   components: {
     Checkbox,
     ModifiedIndicator,
-    ServerSideIndicator
+    ProfileSettingIndicator
   },
-  props: [
-    'path',
-    'disabled',
-    'expert'
-  ],
-  computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
-    state () {
-      const value = get(this.$parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
-      }
-    },
-    defaultState () {
-      return get(this.$parent, this.pathDefault)
-    },
-    isServerSide () {
-      return this.path.startsWith('serverSide_')
-    },
-    isChanged () {
-      return !this.path.startsWith('serverSide_') && this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
-    }
-  },
-  methods: {
-    update (e) {
-      const [firstSegment, ...rest] = this.path.split('.')
-      set(this.$parent, this.path, e)
-      // Updating nested properties does not trigger update on its parent.
-      // probably still not as reliable, but works for depth=1 at least
-      if (rest.length > 0) {
-        set(this.$parent, firstSegment, { ...get(this.$parent, firstSegment) })
-      }
-    },
-    reset () {
-      set(this.$parent, this.path, this.defaultState)
-    }
-  }
+  ...Setting
 }
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 41142966..bc014bc9 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -5,7 +5,7 @@
   >
     <Checkbox
       :model-value="state"
-      :disabled="disabled"
+      :disabled="shouldBeDisabled"
       @update:modelValue="update"
     >
       <span
@@ -19,7 +19,7 @@
         :changed="isChanged"
         :onclick="reset"
       />
-      <ServerSideIndicator :server-side="isServerSide" />
+      <ProfileSettingIndicator :is-profile="isProfileTied" />
     </Checkbox>
   </label>
 </template>
diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js
index 3da559fe..8aa5f54b 100644
--- a/src/components/settings_modal/helpers/choice_setting.js
+++ b/src/components/settings_modal/helpers/choice_setting.js
@@ -1,51 +1,20 @@
-import { get, set } from 'lodash'
 import Select from 'src/components/select/select.vue'
 import ModifiedIndicator from './modified_indicator.vue'
-import ServerSideIndicator from './server_side_indicator.vue'
+import ProfileSettingIndicator from './profile_setting_indicator.vue'
+import Setting from './setting.js'
+
 export default {
   components: {
     Select,
     ModifiedIndicator,
-    ServerSideIndicator
+    ProfileSettingIndicator
   },
-  props: [
-    'path',
-    'disabled',
-    'options',
-    'expert'
-  ],
-  computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
-    state () {
-      const value = get(this.$parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
-      }
-    },
-    defaultState () {
-      return get(this.$parent, this.pathDefault)
-    },
-    isServerSide () {
-      return this.path.startsWith('serverSide_')
-    },
-    isChanged () {
-      return !this.path.startsWith('serverSide_') && this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
-    }
-  },
-  methods: {
-    update (e) {
-      set(this.$parent, this.path, e)
-    },
-    reset () {
-      set(this.$parent, this.path, this.defaultState)
+  ...Setting,
+  props: {
+    ...Setting.props,
+    options: {
+      type: Array,
+      required: true
     }
   }
 }
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
index 8fdbb5d3..4c4cdefe 100644
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -23,7 +23,7 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ServerSideIndicator :server-side="isServerSide" />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
   </label>
 </template>
 
diff --git a/src/components/settings_modal/helpers/integer_setting.js b/src/components/settings_modal/helpers/integer_setting.js
index e64d0cee..0f29f11a 100644
--- a/src/components/settings_modal/helpers/integer_setting.js
+++ b/src/components/settings_modal/helpers/integer_setting.js
@@ -1,44 +1,15 @@
-import { get, set } from 'lodash'
 import ModifiedIndicator from './modified_indicator.vue'
+import Setting from './setting.js'
+
 export default {
   components: {
     ModifiedIndicator
   },
-  props: {
-    path: String,
-    disabled: Boolean,
-    min: Number,
-    expert: [Number, String]
-  },
-  computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
-    state () {
-      const value = get(this.$parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
-      }
-    },
-    defaultState () {
-      return get(this.$parent, this.pathDefault)
-    },
-    isChanged () {
-      return this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
-    }
-  },
+  ...Setting,
   methods: {
+    ...Setting.methods,
     update (e) {
-      set(this.$parent, this.path, parseInt(e.target.value))
-    },
-    reset () {
-      set(this.$parent, this.path, this.defaultState)
+      this.configSink(this.path, parseInt(e.target.value))
     }
   }
 }
diff --git a/src/components/settings_modal/helpers/profile_setting_indicator.vue b/src/components/settings_modal/helpers/profile_setting_indicator.vue
new file mode 100644
index 00000000..d160781b
--- /dev/null
+++ b/src/components/settings_modal/helpers/profile_setting_indicator.vue
@@ -0,0 +1,51 @@
+<template>
+  <span
+    v-if="isProfile"
+    class="ProfileSettingIndicator"
+  >
+    <Popover
+      trigger="hover"
+    >
+      <template #trigger>
+        &nbsp;
+        <FAIcon
+          icon="server"
+          :aria-label="$t('settings.setting_server_side')"
+        />
+      </template>
+      <template #content>
+        <div class="profilesetting-tooltip">
+          {{ $t('settings.setting_server_side') }}
+        </div>
+      </template>
+    </Popover>
+  </span>
+</template>
+
+<script>
+import Popover from 'src/components/popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faServer } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faServer
+)
+
+export default {
+  components: { Popover },
+  props: ['isProfile']
+}
+</script>
+
+<style lang="scss">
+.ProfileSettingIndicator {
+  display: inline-block;
+  position: relative;
+}
+
+.profilesetting-tooltip {
+  margin: 0.5em 1em;
+  min-width: 10em;
+  text-align: center;
+}
+</style>
diff --git a/src/components/settings_modal/helpers/server_side_indicator.vue b/src/components/settings_modal/helpers/server_side_indicator.vue
deleted file mode 100644
index bf181959..00000000
--- a/src/components/settings_modal/helpers/server_side_indicator.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <span
-    v-if="serverSide"
-    class="ServerSideIndicator"
-  >
-    <Popover
-      trigger="hover"
-    >
-      <template #trigger>
-        &nbsp;
-        <FAIcon
-          icon="server"
-          :aria-label="$t('settings.setting_server_side')"
-        />
-      </template>
-      <template #content>
-        <div class="serverside-tooltip">
-          {{ $t('settings.setting_server_side') }}
-        </div>
-      </template>
-    </Popover>
-  </span>
-</template>
-
-<script>
-import Popover from 'src/components/popover/popover.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faServer } from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faServer
-)
-
-export default {
-  components: { Popover },
-  props: ['serverSide']
-}
-</script>
-
-<style lang="scss">
-.ServerSideIndicator {
-  display: inline-block;
-  position: relative;
-}
-
-.serverside-tooltip {
-  margin: 0.5em 1em;
-  min-width: 10em;
-  text-align: center;
-}
-</style>
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
new file mode 100644
index 00000000..dc37675c
--- /dev/null
+++ b/src/components/settings_modal/helpers/setting.js
@@ -0,0 +1,84 @@
+import { get, set } from 'lodash'
+export default {
+  props: {
+    path: {
+      type: String,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    parentPath: {
+      type: String
+    },
+    parentInvert: {
+      type: Boolean,
+      default: false
+    },
+    expert: {
+      type: [Number, String],
+      default: 0
+    },
+    source: {
+      type: String,
+      default: 'default'
+    }
+  },
+  computed: {
+    state () {
+      const value = get(this.configSource, this.path)
+      if (value === undefined) {
+        return this.defaultState
+      } else {
+        return value
+      }
+    },
+    shouldBeDisabled () {
+      const parentValue = this.parentPath !== undefined ? get(this.configSource, this.parentPath) : null
+      return this.disabled || (parentValue !== null ? (this.parentInvert ? parentValue : !parentValue) : false)
+    },
+    configSource () {
+      switch (this.source) {
+        case 'profile':
+          return this.$store.state.profileConfig
+        default:
+          return this.$store.getters.mergedConfig
+      }
+    },
+    configSink () {
+      switch (this.source) {
+        case 'profile':
+          return (k, v) => this.$store.dispatch('setProfileOption', { name: k, value: v })
+        default:
+          return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
+      }
+    },
+    defaultState () {
+      switch (this.source) {
+        case 'profile':
+          return {}
+        default:
+          return get(this.$store.getters.defaultConfig, this.path)
+      }
+    },
+    isProfileTied () {
+      return this.source === 'profile'
+    },
+    isChanged () {
+      return !this.source === 'default' && this.state !== this.defaultState
+    },
+    matchesExpertLevel () {
+      return (this.expert || 0) <= this.$store.state.config.expertLevel > 0
+    }
+  },
+  methods: {
+    update (e) {
+      console.log('U', this.path, e)
+      this.configSink(this.path, e)
+    },
+    reset () {
+      set(this.$store.getters.mergedConfig, this.path, this.defaultState)
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index 12431dca..6b22174d 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -1,19 +1,9 @@
 import { defaultState as configDefaultState } from 'src/modules/config.js'
-import { defaultState as serverSideConfigDefaultState } from 'src/modules/serverSideConfig.js'
 
 const SharedComputedObject = () => ({
   user () {
     return this.$store.state.users.currentUser
   },
-  // Getting values for default properties
-  ...Object.keys(configDefaultState)
-    .map(key => [
-      key + 'DefaultValue',
-      function () {
-        return this.$store.getters.defaultConfig[key]
-      }
-    ])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
   // Generating computed values for vuex properties
   ...Object.keys(configDefaultState)
     .map(key => [key, {
@@ -23,14 +13,6 @@ const SharedComputedObject = () => ({
       }
     }])
     .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-  ...Object.keys(serverSideConfigDefaultState)
-    .map(key => ['serverSide_' + key, {
-      get () { return this.$store.state.serverSideConfig[key] },
-      set (value) {
-        this.$store.dispatch('setServerSideOption', { name: key, value })
-      }
-    }])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
   // Special cases (need to transform values or perform actions first)
   useStreamingApi: {
     get () { return this.$store.getters.mergedConfig.useStreamingApi },
diff --git a/src/components/settings_modal/helpers/size_setting.js b/src/components/settings_modal/helpers/size_setting.js
index 58697412..4a0f7e48 100644
--- a/src/components/settings_modal/helpers/size_setting.js
+++ b/src/components/settings_modal/helpers/size_setting.js
@@ -1,6 +1,6 @@
-import { get, set } from 'lodash'
 import ModifiedIndicator from './modified_indicator.vue'
 import Select from 'src/components/select/select.vue'
+import Setting from './setting.js'
 
 export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']
 export const defaultHorizontalUnits = ['px', 'rem', 'vw']
@@ -11,57 +11,31 @@ export default {
     ModifiedIndicator,
     Select
   },
+  ...Setting,
   props: {
-    path: String,
-    disabled: Boolean,
+    ...Setting.props,
     min: Number,
     units: {
-      type: [String],
+      type: Array,
       default: () => allCssUnits
-    },
-    expert: [Number, String]
+    }
   },
   computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
+    ...Setting.computed,
     stateUnit () {
-      return (this.state || '').replace(/\d+/, '')
+      return this.state.replace(/\d+/, '')
     },
     stateValue () {
-      return (this.state || '').replace(/\D+/, '')
-    },
-    state () {
-      const value = get(this.$parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
-      }
-    },
-    defaultState () {
-      return get(this.$parent, this.pathDefault)
-    },
-    isChanged () {
-      return this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
+      return this.state.replace(/\D+/, '')
     }
   },
   methods: {
-    update (e) {
-      set(this.$parent, this.path, e)
-    },
-    reset () {
-      set(this.$parent, this.path, this.defaultState)
-    },
+    ...Setting.methods,
     updateValue (e) {
-      set(this.$parent, this.path, parseInt(e.target.value) + this.stateUnit)
+      this.configSink(this.path, parseInt(e.target.value) + this.stateUnit)
     },
     updateUnit (e) {
-      set(this.$parent, this.path, this.stateValue + e.target.value)
+      this.configSink(this.path, this.stateValue + e.target.value)
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 97046ff0..46c6bc5c 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -7,13 +7,11 @@
           <BooleanSetting path="hideFilteredStatuses">
             {{ $t('settings.hide_filtered_statuses') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                :disabled="hideFilteredStatuses"
+                parentPath="hideFilteredStatuses"
+                :parentInvert="true"
                 path="hideWordFilteredPosts"
               >
                 {{ $t('settings.hide_wordfiltered_statuses') }}
@@ -22,7 +20,8 @@
             <li>
               <BooleanSetting
                 v-if="user"
-                :disabled="hideFilteredStatuses"
+                parentPath="hideFilteredStatuses"
+                :parentInvert="true"
                 path="hideMutedThreads"
               >
                 {{ $t('settings.hide_muted_threads') }}
@@ -31,7 +30,8 @@
             <li>
               <BooleanSetting
                 v-if="user"
-                :disabled="hideFilteredStatuses"
+                parentPath="hideFilteredStatuses"
+                :parentInvert="true"
                 path="hideMutedPosts"
               >
                 {{ $t('settings.hide_muted_posts') }}
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index ea24d6ad..e8f7016e 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -6,7 +6,7 @@ import SizeSetting, { defaultHorizontalUnits } from '../helpers/size_setting.vue
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import ServerSideIndicator from '../helpers/server_side_indicator.vue'
+import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faGlobe
@@ -65,7 +65,7 @@ const GeneralTab = {
     SizeSetting,
     InterfaceLanguageSwitcher,
     ScopeSelector,
-    ServerSideIndicator
+    ProfileSettingIndicator
   },
   computed: {
     horizontalUnits () {
@@ -108,7 +108,7 @@ const GeneralTab = {
   },
   methods: {
     changeDefaultScope (value) {
-      this.$store.dispatch('setServerSideOption', { name: 'defaultScope', value })
+      this.$store.dispatch('setProfileOption', { name: 'defaultScope', value })
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 65248ac1..0eb3d06c 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -29,14 +29,11 @@
           <BooleanSetting path="streaming">
             {{ $t('settings.streaming') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
                 path="pauseOnUnfocused"
-                :disabled="!streaming"
+                parentPath="streaming"
               >
                 {{ $t('settings.pause_on_unfocused') }}
               </BooleanSetting>
@@ -265,7 +262,7 @@
         <li>
           <BooleanSetting
             v-if="user"
-            path="serverSide_stripRichContent"
+            source="profile" path="stripRichContent"
             expert="1"
           >
             {{ $t('settings.no_rich_text_description') }}
@@ -290,7 +287,7 @@
             <BooleanSetting
               path="preloadImage"
               expert="1"
-              :disabled="!hideNsfw"
+              parentPath="hideNsfw"
             >
               {{ $t('settings.preload_images') }}
             </BooleanSetting>
@@ -299,7 +296,7 @@
             <BooleanSetting
               path="useOneClickNsfw"
               expert="1"
-              :disabled="!hideNsfw"
+              parentPath="hideNsfw"
             >
               {{ $t('settings.use_one_click_nsfw') }}
             </BooleanSetting>
@@ -312,15 +309,13 @@
           >
             {{ $t('settings.loop_video') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
                 path="loopVideoSilentOnly"
                 expert="1"
-                :disabled="!loopVideo || !loopSilentAvailable"
+                parentPath="loopVideo"
+                :disabled="!loopSilentAvailable"
               >
                 {{ $t('settings.loop_video_silent_only') }}
               </BooleanSetting>
@@ -418,18 +413,18 @@
       <ul class="setting-list">
         <li>
           <label for="default-vis">
-            {{ $t('settings.default_vis') }} <ServerSideIndicator :server-side="true" />
+            {{ $t('settings.default_vis') }} <ProfileSettingIndicator :is-profile="true" />
             <ScopeSelector
               class="scope-selector"
               :show-all="true"
-              :user-default="serverSide_defaultScope"
-              :initial-scope="serverSide_defaultScope"
+              :user-default="$store.state.profileConfig.defaultScope"
+              :initial-scope="$store.state.profileConfig.defaultScope"
               :on-scope-change="changeDefaultScope"
             />
           </label>
         </li>
         <li>
-          <!-- <BooleanSetting path="serverSide_defaultNSFW"> -->
+          <!-- <BooleanSetting source="profile" path="defaultNSFW"> -->
           <BooleanSetting path="sensitiveByDefault">
             {{ $t('settings.sensitive_by_default') }}
           </BooleanSetting>
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index dd3806ed..ea095372 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -4,7 +4,7 @@
       <h2>{{ $t('settings.notification_setting_filters') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="serverSide_blockNotificationsFromStrangers">
+          <BooleanSetting source="profile" path="blockNotificationsFromStrangers">
             {{ $t('settings.notification_setting_block_from_strangers') }}
           </BooleanSetting>
         </li>
@@ -67,7 +67,7 @@
         </li>
         <li>
           <BooleanSetting
-            path="serverSide_webPushHideContents"
+            source="profile" path="webPushHideContents"
             expert="1"
           >
             {{ $t('settings.notification_setting_hide_notification_contents') }}
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 6a5b478a..74652990 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -254,37 +254,35 @@
       <h2>{{ $t('settings.account_privacy') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="serverSide_locked">
+          <BooleanSetting source="profile" path="locked">
             {{ $t('settings.lock_account_description') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_discoverable">
+          <BooleanSetting source="profile" path="discoverable">
             {{ $t('settings.discoverable') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_allowFollowingMove">
+          <BooleanSetting source="profile" path="allowFollowingMove">
             {{ $t('settings.allow_following_move') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_hideFavorites">
+          <BooleanSetting source="profile" path="hideFavorites">
             {{ $t('settings.hide_favorites_description') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_hideFollowers">
+          <BooleanSetting source="profile" path="hideFollowers">
             {{ $t('settings.hide_followers_description') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !serverSide_hideFollowers}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                path="serverSide_hideFollowersCount"
-                :disabled="!serverSide_hideFollowers"
+                source="profile"
+                path="hideFollowersCount"
+                parentPath="hideFollowers"
               >
                 {{ $t('settings.hide_followers_count_description') }}
               </BooleanSetting>
@@ -292,17 +290,15 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path="serverSide_hideFollows">
+          <BooleanSetting source="profile" path="hideFollows">
             {{ $t('settings.hide_follows_description') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !serverSide_hideFollows}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                path="serverSide_hideFollowsCount"
-                :disabled="!serverSide_hideFollows"
+                source="profile"
+                path="hideFollowsCount"
+                parentPath="hideFollows"
               >
                 {{ $t('settings.hide_follows_count_description') }}
               </BooleanSetting>
diff --git a/src/main.js b/src/main.js
index d3e60a0f..fd712113 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,7 +10,7 @@ import listsModule from './modules/lists.js'
 import usersModule from './modules/users.js'
 import apiModule from './modules/api.js'
 import configModule from './modules/config.js'
-import serverSideConfigModule from './modules/serverSideConfig.js'
+import profileConfigModule from './modules/profileConfig.js'
 import serverSideStorageModule from './modules/serverSideStorage.js'
 import shoutModule from './modules/shout.js'
 import oauthModule from './modules/oauth.js'
@@ -80,7 +80,7 @@ const persistedStateOptions = {
       lists: listsModule,
       api: apiModule,
       config: configModule,
-      serverSideConfig: serverSideConfigModule,
+      profileConfig: profileConfigModule,
       serverSideStorage: serverSideStorageModule,
       shout: shoutModule,
       oauth: oauthModule,
diff --git a/src/modules/config.js b/src/modules/config.js
index 3d9cf591..6ab59d6d 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,6 +1,7 @@
 import Cookies from 'js-cookie'
 import { setPreset, applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
 import messages from '../i18n/messages'
+import { set } from 'lodash'
 import localeService from '../services/locale/locale.service.js'
 
 const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
@@ -147,7 +148,7 @@ const config = {
   },
   mutations: {
     setOption (state, { name, value }) {
-      state[name] = value
+      set(state, name, value)
     },
     setHighlight (state, { user, color, type }) {
       const data = this.state.config.highlight[user]
diff --git a/src/modules/profileConfig.js b/src/modules/profileConfig.js
new file mode 100644
index 00000000..2cb2014a
--- /dev/null
+++ b/src/modules/profileConfig.js
@@ -0,0 +1,140 @@
+import { get, set } from 'lodash'
+
+const defaultApi = ({ rootState, commit }, { path, value }) => {
+  const params = {}
+  set(params, path, value)
+  return rootState
+    .api
+    .backendInteractor
+    .updateProfile({ params })
+    .then(result => {
+      commit('addNewUsers', [result])
+      commit('setCurrentUser', result)
+    })
+}
+
+const notificationsApi = ({ rootState, commit }, { path, value, oldValue }) => {
+  const settings = {}
+  set(settings, path, value)
+  return rootState
+    .api
+    .backendInteractor
+    .updateNotificationSettings({ settings })
+    .then(result => {
+      if (result.status === 'success') {
+        commit('confirmProfileOption', { name, value })
+      } else {
+        commit('confirmProfileOption', { name, value: oldValue })
+      }
+    })
+}
+
+/**
+ * Map that stores relation between path for reading (from user profile),
+ * for writing (into API) an what API to use.
+ *
+ * Shorthand - instead of { get, set, api? } object it's possible to use string
+ * in case default api is used and get = set
+ *
+ * If no api is specified, defaultApi is used (see above)
+ */
+export const settingsMap = {
+  defaultScope: 'source.privacy',
+  defaultNSFW: 'source.sensitive', // BROKEN: pleroma/pleroma#2837
+  stripRichContent: {
+    get: 'source.pleroma.no_rich_text',
+    set: 'no_rich_text'
+  },
+  // Privacy
+  locked: 'locked',
+  acceptChatMessages: {
+    get: 'pleroma.accepts_chat_messages',
+    set: 'accepts_chat_messages'
+  },
+  allowFollowingMove: {
+    get: 'pleroma.allow_following_move',
+    set: 'allow_following_move'
+  },
+  discoverable: {
+    get: 'source.pleroma.discoverable',
+    set: 'discoverable'
+  },
+  hideFavorites: {
+    get: 'pleroma.hide_favorites',
+    set: 'hide_favorites'
+  },
+  hideFollowers: {
+    get: 'pleroma.hide_followers',
+    set: 'hide_followers'
+  },
+  hideFollows: {
+    get: 'pleroma.hide_follows',
+    set: 'hide_follows'
+  },
+  hideFollowersCount: {
+    get: 'pleroma.hide_followers_count',
+    set: 'hide_followers_count'
+  },
+  hideFollowsCount: {
+    get: 'pleroma.hide_follows_count',
+    set: 'hide_follows_count'
+  },
+  // NotificationSettingsAPIs
+  webPushHideContents: {
+    get: 'pleroma.notification_settings.hide_notification_contents',
+    set: 'hide_notification_contents',
+    api: notificationsApi
+  },
+  blockNotificationsFromStrangers: {
+    get: 'pleroma.notification_settings.block_from_strangers',
+    set: 'block_from_strangers',
+    api: notificationsApi
+  }
+}
+
+export const defaultState = Object.fromEntries(Object.keys(settingsMap).map(key => [key, null]))
+
+const profileConfig = {
+  state: { ...defaultState },
+  mutations: {
+    confirmProfileOption (state, { name, value }) {
+      set(state, name, value)
+    },
+    wipeProfileOption (state, { name }) {
+      set(state, name, null)
+    },
+    wipeAllProfileOptions (state) {
+      Object.keys(settingsMap).forEach(key => {
+        set(state, key, null)
+      })
+    },
+    // Set the settings based on their path location
+    setCurrentUser (state, user) {
+      Object.entries(settingsMap).forEach((map) => {
+        const [name, value] = map
+        const { get: path = value } = value
+        set(state, name, get(user._original, path))
+      })
+    }
+  },
+  actions: {
+    setProfileOption ({ rootState, state, commit, dispatch }, { name, value }) {
+      const oldValue = get(state, name)
+      const map = settingsMap[name]
+      if (!map) throw new Error('Invalid server-side setting')
+      const { set: path = map, api = defaultApi } = map
+      commit('wipeProfileOption', { name })
+
+      api({ rootState, commit }, { path, value, oldValue })
+        .catch((e) => {
+          console.warn('Error setting server-side option:', e)
+          commit('confirmProfileOption', { name, value: oldValue })
+        })
+    },
+    logout ({ commit }) {
+      commit('wipeAllProfileOptions')
+    }
+  }
+}
+
+export default profileConfig
diff --git a/src/modules/serverSideConfig.js b/src/modules/serverSideConfig.js
deleted file mode 100644
index 476263bc..00000000
--- a/src/modules/serverSideConfig.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import { get, set } from 'lodash'
-
-const defaultApi = ({ rootState, commit }, { path, value }) => {
-  const params = {}
-  set(params, path, value)
-  return rootState
-    .api
-    .backendInteractor
-    .updateProfile({ params })
-    .then(result => {
-      commit('addNewUsers', [result])
-      commit('setCurrentUser', result)
-    })
-}
-
-const notificationsApi = ({ rootState, commit }, { path, value, oldValue }) => {
-  const settings = {}
-  set(settings, path, value)
-  return rootState
-    .api
-    .backendInteractor
-    .updateNotificationSettings({ settings })
-    .then(result => {
-      if (result.status === 'success') {
-        commit('confirmServerSideOption', { name, value })
-      } else {
-        commit('confirmServerSideOption', { name, value: oldValue })
-      }
-    })
-}
-
-/**
- * Map that stores relation between path for reading (from user profile),
- * for writing (into API) an what API to use.
- *
- * Shorthand - instead of { get, set, api? } object it's possible to use string
- * in case default api is used and get = set
- *
- * If no api is specified, defaultApi is used (see above)
- */
-export const settingsMap = {
-  defaultScope: 'source.privacy',
-  defaultNSFW: 'source.sensitive', // BROKEN: pleroma/pleroma#2837
-  stripRichContent: {
-    get: 'source.pleroma.no_rich_text',
-    set: 'no_rich_text'
-  },
-  // Privacy
-  locked: 'locked',
-  acceptChatMessages: {
-    get: 'pleroma.accepts_chat_messages',
-    set: 'accepts_chat_messages'
-  },
-  allowFollowingMove: {
-    get: 'pleroma.allow_following_move',
-    set: 'allow_following_move'
-  },
-  discoverable: {
-    get: 'source.pleroma.discoverable',
-    set: 'discoverable'
-  },
-  hideFavorites: {
-    get: 'pleroma.hide_favorites',
-    set: 'hide_favorites'
-  },
-  hideFollowers: {
-    get: 'pleroma.hide_followers',
-    set: 'hide_followers'
-  },
-  hideFollows: {
-    get: 'pleroma.hide_follows',
-    set: 'hide_follows'
-  },
-  hideFollowersCount: {
-    get: 'pleroma.hide_followers_count',
-    set: 'hide_followers_count'
-  },
-  hideFollowsCount: {
-    get: 'pleroma.hide_follows_count',
-    set: 'hide_follows_count'
-  },
-  // NotificationSettingsAPIs
-  webPushHideContents: {
-    get: 'pleroma.notification_settings.hide_notification_contents',
-    set: 'hide_notification_contents',
-    api: notificationsApi
-  },
-  blockNotificationsFromStrangers: {
-    get: 'pleroma.notification_settings.block_from_strangers',
-    set: 'block_from_strangers',
-    api: notificationsApi
-  }
-}
-
-export const defaultState = Object.fromEntries(Object.keys(settingsMap).map(key => [key, null]))
-
-const serverSideConfig = {
-  state: { ...defaultState },
-  mutations: {
-    confirmServerSideOption (state, { name, value }) {
-      set(state, name, value)
-    },
-    wipeServerSideOption (state, { name }) {
-      set(state, name, null)
-    },
-    wipeAllServerSideOptions (state) {
-      Object.keys(settingsMap).forEach(key => {
-        set(state, key, null)
-      })
-    },
-    // Set the settings based on their path location
-    setCurrentUser (state, user) {
-      Object.entries(settingsMap).forEach((map) => {
-        const [name, value] = map
-        const { get: path = value } = value
-        set(state, name, get(user._original, path))
-      })
-    }
-  },
-  actions: {
-    setServerSideOption ({ rootState, state, commit, dispatch }, { name, value }) {
-      const oldValue = get(state, name)
-      const map = settingsMap[name]
-      if (!map) throw new Error('Invalid server-side setting')
-      const { set: path = map, api = defaultApi } = map
-      commit('wipeServerSideOption', { name })
-
-      api({ rootState, commit }, { path, value, oldValue })
-        .catch((e) => {
-          console.warn('Error setting server-side option:', e)
-          commit('confirmServerSideOption', { name, value: oldValue })
-        })
-    },
-    logout ({ commit }) {
-      commit('wipeAllServerSideOptions')
-    }
-  }
-}
-
-export default serverSideConfig
-- 
cgit v1.2.3-70-g09d2


From ac32997f8b17ba3f2209c992c27394c48a1594c7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Mar 2023 16:51:50 +0200
Subject: move websocket connection logic into module

---
 .../helpers/shared_computed_object.js              | 19 +-----
 src/modules/config.js                              | 70 ++++++++++++++--------
 2 files changed, 46 insertions(+), 43 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index 6b22174d..e898c8ac 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -12,24 +12,7 @@ const SharedComputedObject = () => ({
         this.$store.dispatch('setOption', { name: key, value })
       }
     }])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-  // Special cases (need to transform values or perform actions first)
-  useStreamingApi: {
-    get () { return this.$store.getters.mergedConfig.useStreamingApi },
-    set (value) {
-      const promise = value
-        ? this.$store.dispatch('enableMastoSockets')
-        : this.$store.dispatch('disableMastoSockets')
-
-      promise.then(() => {
-        this.$store.dispatch('setOption', { name: 'useStreamingApi', value })
-      }).catch((e) => {
-        console.error('Failed starting MastoAPI Streaming socket', e)
-        this.$store.dispatch('disableMastoSockets')
-        this.$store.dispatch('setOption', { name: 'useStreamingApi', value: false })
-      })
-    }
-  }
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
 })
 
 export default SharedComputedObject
diff --git a/src/modules/config.js b/src/modules/config.js
index 6ab59d6d..5e3f0105 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -178,31 +178,51 @@ const config = {
       commit('setHighlight', { user, color, type })
     },
     setOption ({ commit, dispatch, state }, { name, value }) {
-      commit('setOption', { name, value })
-      switch (name) {
-        case 'theme':
-          setPreset(value)
-          break
-        case 'sidebarColumnWidth':
-        case 'contentColumnWidth':
-        case 'notifsColumnWidth':
-          applyConfig(state)
-          break
-        case 'customTheme':
-        case 'customThemeSource':
-          applyTheme(value)
-          break
-        case 'interfaceLanguage':
-          messages.setLanguage(this.getters.i18n, value)
-          dispatch('loadUnicodeEmojiData', value)
-          Cookies.set(
-            BACKEND_LANGUAGE_COOKIE_NAME,
-            localeService.internalToBackendLocaleMulti(value)
-          )
-          break
-        case 'thirdColumnMode':
-          dispatch('setLayoutWidth', undefined)
-          break
+      const exceptions = new Set([
+        'useStreamingApi'
+      ])
+
+      if (exceptions.has(name)) {
+        switch (name) {
+          case 'useStreamingApi': {
+            const action = value ? 'enableMastoSockets' : 'disableMastoSockets'
+
+            dispatch(action).then(() => {
+              commit('setOption', { name: 'useStreamingApi', value })
+            }).catch((e) => {
+              console.error('Failed starting MastoAPI Streaming socket', e)
+              dispatch('disableMastoSockets')
+              dispatch('setOption', { name: 'useStreamingApi', value: false })
+            })
+          }
+        }
+      } else {
+        commit('setOption', { name, value })
+        switch (name) {
+          case 'theme':
+            setPreset(value)
+            break
+          case 'sidebarColumnWidth':
+          case 'contentColumnWidth':
+          case 'notifsColumnWidth':
+            applyConfig(state)
+            break
+          case 'customTheme':
+          case 'customThemeSource':
+            applyTheme(value)
+            break
+          case 'interfaceLanguage':
+            messages.setLanguage(this.getters.i18n, value)
+            dispatch('loadUnicodeEmojiData', value)
+            Cookies.set(
+              BACKEND_LANGUAGE_COOKIE_NAME,
+              localeService.internalToBackendLocaleMulti(value)
+            )
+            break
+          case 'thirdColumnMode':
+            dispatch('setLayoutWidth', undefined)
+            break
+        }
       }
     }
   }
-- 
cgit v1.2.3-70-g09d2


From 947b73f8702ff4b7c5f74620204e86a4f375315c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Mar 2023 16:55:39 +0200
Subject: minimize the rest of the sharedcomputedobject

---
 .../settings_modal/helpers/shared_computed_object.js       | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index e898c8ac..b8a016e6 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -1,18 +1,10 @@
-import { defaultState as configDefaultState } from 'src/modules/config.js'
-
 const SharedComputedObject = () => ({
   user () {
     return this.$store.state.users.currentUser
   },
-  // Generating computed values for vuex properties
-  ...Object.keys(configDefaultState)
-    .map(key => [key, {
-      get () { return this.$store.getters.mergedConfig[key] },
-      set (value) {
-        this.$store.dispatch('setOption', { name: key, value })
-      }
-    }])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
+  expertLevel () {
+    return this.$store.getters.mergedConfig.expertLevel > 0
+  }
 })
 
 export default SharedComputedObject
-- 
cgit v1.2.3-70-g09d2


From 6a7b182af11af6c50439c62bc5ee37cc5960810e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Mar 2023 17:11:20 +0200
Subject: fixes for stuff i missed

---
 .../settings_modal/helpers/boolean_setting.vue     |  2 +-
 src/components/settings_modal/helpers/setting.js   |  2 +-
 .../helpers/shared_computed_object.js              |  3 +++
 src/components/settings_modal/tabs/general_tab.vue |  2 +-
 .../tabs/security_tab/security_tab.vue             | 22 +++++++++++-----------
 5 files changed, 17 insertions(+), 14 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index bc014bc9..260ee75e 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -19,7 +19,7 @@
         :changed="isChanged"
         :onclick="reset"
       />
-      <ProfileSettingIndicator :is-profile="isProfileTied" />
+      <ProfileSettingIndicator :is-profile="isProfileSetting" />
     </Checkbox>
   </label>
 </template>
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index dc37675c..a766e6dc 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -62,7 +62,7 @@ export default {
           return get(this.$store.getters.defaultConfig, this.path)
       }
     },
-    isProfileTied () {
+    isProfileSetting () {
       return this.source === 'profile'
     },
     isChanged () {
diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index b8a016e6..912999ce 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -4,6 +4,9 @@ const SharedComputedObject = () => ({
   },
   expertLevel () {
     return this.$store.getters.mergedConfig.expertLevel > 0
+  },
+  mergedConfig () {
+    return this.$store.getters.mergedConfig
   }
 })
 
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 0eb3d06c..eb2cef9b 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -210,7 +210,7 @@
           </ChoiceSetting>
         </li>
         <ul
-          v-if="conversationDisplay !== 'linear'"
+          v-if="mergedConfig.conversationDisplay !== 'linear'"
           class="setting-list suboptions"
         >
           <li>
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.vue b/src/components/settings_modal/tabs/security_tab/security_tab.vue
index 6e03bef4..d36d478f 100644
--- a/src/components/settings_modal/tabs/security_tab/security_tab.vue
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@@ -143,8 +143,8 @@
         />
       </div>
       <div>
-        <i18n
-          path="settings.new_alias_target"
+        <i18n-t
+          keypath="settings.new_alias_target"
           tag="p"
         >
           <code
@@ -152,7 +152,7 @@
           >
             foo@example.org
           </code>
-        </i18n>
+        </i18n-t>
         <input
           v-model="addAliasTarget"
         >
@@ -175,16 +175,16 @@
       <h2>{{ $t('settings.move_account') }}</h2>
       <p>{{ $t('settings.move_account_notes') }}</p>
       <div>
-        <i18n
-          path="settings.move_account_target"
+        <i18n-t
+          keypath="settings.move_account_target"
           tag="p"
         >
-          <code
-            place="example"
-          >
-            foo@example.org
-          </code>
-        </i18n>
+          <template #example>
+            <code>
+              foo@example.org
+            </code>
+          </template>
+        </i18n-t>
         <input
           v-model="moveAccountTarget"
         >
-- 
cgit v1.2.3-70-g09d2


From 55ea6df40b7e2cfe2b1b5bde33204d4c03e54a12 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Mar 2023 17:28:14 +0200
Subject: lint

---
 .../interface_language_switcher.vue                |  4 ++-
 .../settings_modal/tabs/filtering_tab.vue          | 12 ++++----
 src/components/settings_modal/tabs/general_tab.vue | 11 +++----
 .../settings_modal/tabs/notifications_tab.vue      |  8 +++--
 src/components/settings_modal/tabs/profile_tab.vue | 34 +++++++++++++++++-----
 5 files changed, 47 insertions(+), 22 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index a57e8761..364791a1 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -36,7 +36,9 @@
         <button
           class="button-default btn"
           @click="addLanguage"
-        >{{ $t('settings.add_language') }}</button>
+        >
+          {{ $t('settings.add_language') }}
+        </button>
       </li>
     </ul>
   </div>
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 46c6bc5c..41d1b54f 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -10,8 +10,8 @@
           <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                parentPath="hideFilteredStatuses"
-                :parentInvert="true"
+                parent-path="hideFilteredStatuses"
+                :parent-invert="true"
                 path="hideWordFilteredPosts"
               >
                 {{ $t('settings.hide_wordfiltered_statuses') }}
@@ -20,8 +20,8 @@
             <li>
               <BooleanSetting
                 v-if="user"
-                parentPath="hideFilteredStatuses"
-                :parentInvert="true"
+                parent-path="hideFilteredStatuses"
+                :parent-invert="true"
                 path="hideMutedThreads"
               >
                 {{ $t('settings.hide_muted_threads') }}
@@ -30,8 +30,8 @@
             <li>
               <BooleanSetting
                 v-if="user"
-                parentPath="hideFilteredStatuses"
-                :parentInvert="true"
+                parent-path="hideFilteredStatuses"
+                :parent-invert="true"
                 path="hideMutedPosts"
               >
                 {{ $t('settings.hide_muted_posts') }}
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index eb2cef9b..641d850a 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -33,7 +33,7 @@
             <li>
               <BooleanSetting
                 path="pauseOnUnfocused"
-                parentPath="streaming"
+                parent-path="streaming"
               >
                 {{ $t('settings.pause_on_unfocused') }}
               </BooleanSetting>
@@ -262,7 +262,8 @@
         <li>
           <BooleanSetting
             v-if="user"
-            source="profile" path="stripRichContent"
+            source="profile"
+            path="stripRichContent"
             expert="1"
           >
             {{ $t('settings.no_rich_text_description') }}
@@ -287,7 +288,7 @@
             <BooleanSetting
               path="preloadImage"
               expert="1"
-              parentPath="hideNsfw"
+              parent-path="hideNsfw"
             >
               {{ $t('settings.preload_images') }}
             </BooleanSetting>
@@ -296,7 +297,7 @@
             <BooleanSetting
               path="useOneClickNsfw"
               expert="1"
-              parentPath="hideNsfw"
+              parent-path="hideNsfw"
             >
               {{ $t('settings.use_one_click_nsfw') }}
             </BooleanSetting>
@@ -314,7 +315,7 @@
               <BooleanSetting
                 path="loopVideoSilentOnly"
                 expert="1"
-                parentPath="loopVideo"
+                parent-path="loopVideo"
                 :disabled="!loopSilentAvailable"
               >
                 {{ $t('settings.loop_video_silent_only') }}
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index ea095372..fcb92135 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -4,7 +4,10 @@
       <h2>{{ $t('settings.notification_setting_filters') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting source="profile" path="blockNotificationsFromStrangers">
+          <BooleanSetting
+            source="profile"
+            path="blockNotificationsFromStrangers"
+          >
             {{ $t('settings.notification_setting_block_from_strangers') }}
           </BooleanSetting>
         </li>
@@ -67,7 +70,8 @@
         </li>
         <li>
           <BooleanSetting
-            source="profile" path="webPushHideContents"
+            source="profile"
+            path="webPushHideContents"
             expert="1"
           >
             {{ $t('settings.notification_setting_hide_notification_contents') }}
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 74652990..1cc850cb 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -254,27 +254,42 @@
       <h2>{{ $t('settings.account_privacy') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting source="profile" path="locked">
+          <BooleanSetting
+            source="profile"
+            path="locked"
+          >
             {{ $t('settings.lock_account_description') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting source="profile" path="discoverable">
+          <BooleanSetting
+            source="profile"
+            path="discoverable"
+          >
             {{ $t('settings.discoverable') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting source="profile" path="allowFollowingMove">
+          <BooleanSetting
+            source="profile"
+            path="allowFollowingMove"
+          >
             {{ $t('settings.allow_following_move') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting source="profile" path="hideFavorites">
+          <BooleanSetting
+            source="profile"
+            path="hideFavorites"
+          >
             {{ $t('settings.hide_favorites_description') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting source="profile" path="hideFollowers">
+          <BooleanSetting
+            source="profile"
+            path="hideFollowers"
+          >
             {{ $t('settings.hide_followers_description') }}
           </BooleanSetting>
           <ul class="setting-list suboptions">
@@ -282,7 +297,7 @@
               <BooleanSetting
                 source="profile"
                 path="hideFollowersCount"
-                parentPath="hideFollowers"
+                parent-path="hideFollowers"
               >
                 {{ $t('settings.hide_followers_count_description') }}
               </BooleanSetting>
@@ -290,7 +305,10 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting source="profile" path="hideFollows">
+          <BooleanSetting
+            source="profile"
+            path="hideFollows"
+          >
             {{ $t('settings.hide_follows_description') }}
           </BooleanSetting>
           <ul class="setting-list suboptions">
@@ -298,7 +316,7 @@
               <BooleanSetting
                 source="profile"
                 path="hideFollowsCount"
-                parentPath="hideFollows"
+                parent-path="hideFollows"
               >
                 {{ $t('settings.hide_follows_count_description') }}
               </BooleanSetting>
-- 
cgit v1.2.3-70-g09d2


From 4d23d31fecf480abfccc4db3ac79c6640078dc3b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 14 Mar 2023 21:50:43 +0200
Subject: initial admin settings prototype (WIP)

---
 src/components/admin_modal/admin_modal.js          |  68 ++++++++++++
 src/components/admin_modal/admin_modal.scss        |  80 ++++++++++++++
 src/components/admin_modal/admin_modal.vue         | 121 +++++++++++++++++++++
 src/components/admin_modal/admin_modal_content.js  |  88 +++++++++++++++
 .../admin_modal/admin_modal_content.scss           |  56 ++++++++++
 src/components/admin_modal/tabs/general_tab.js     |  33 ++++++
 src/components/desktop_nav/desktop_nav.js          |   5 +-
 src/components/desktop_nav/desktop_nav.vue         |   9 +-
 src/components/notification/notification.vue       |   2 +-
 .../settings_modal/admin_tabs/instance_tab.js      |  29 +++++
 .../settings_modal/admin_tabs/instance_tab.vue     |  35 ++++++
 src/components/settings_modal/helpers/setting.js   |  14 ++-
 .../settings_modal/helpers/string_setting.js       |   9 ++
 .../settings_modal/helpers/string_setting.vue      |  25 +++++
 src/components/settings_modal/settings_modal.js    |  23 +++-
 src/components/settings_modal/settings_modal.vue   |   3 +-
 .../settings_modal/settings_modal_admin_content.js |  76 +++++++++++++
 .../settings_modal_admin_content.scss              |  56 ++++++++++
 .../settings_modal_admin_content.vue               |  21 ++++
 .../settings_modal/settings_modal_content.js       |  88 ---------------
 .../settings_modal/settings_modal_content.scss     |  56 ----------
 .../settings_modal/settings_modal_content.vue      |  83 --------------
 .../settings_modal/settings_modal_user_content.js  |  88 +++++++++++++++
 .../settings_modal_user_content.scss               |  56 ++++++++++
 .../settings_modal/settings_modal_user_content.vue |  83 ++++++++++++++
 src/components/tab_switcher/tab_switcher.jsx       |   8 +-
 src/modules/adminSettings.js                       |   5 +-
 src/modules/interface.js                           |  21 +++-
 28 files changed, 985 insertions(+), 256 deletions(-)
 create mode 100644 src/components/admin_modal/admin_modal.js
 create mode 100644 src/components/admin_modal/admin_modal.scss
 create mode 100644 src/components/admin_modal/admin_modal.vue
 create mode 100644 src/components/admin_modal/admin_modal_content.js
 create mode 100644 src/components/admin_modal/admin_modal_content.scss
 create mode 100644 src/components/admin_modal/tabs/general_tab.js
 create mode 100644 src/components/settings_modal/admin_tabs/instance_tab.js
 create mode 100644 src/components/settings_modal/admin_tabs/instance_tab.vue
 create mode 100644 src/components/settings_modal/helpers/string_setting.js
 create mode 100644 src/components/settings_modal/helpers/string_setting.vue
 create mode 100644 src/components/settings_modal/settings_modal_admin_content.js
 create mode 100644 src/components/settings_modal/settings_modal_admin_content.scss
 create mode 100644 src/components/settings_modal/settings_modal_admin_content.vue
 delete mode 100644 src/components/settings_modal/settings_modal_content.js
 delete mode 100644 src/components/settings_modal/settings_modal_content.scss
 delete mode 100644 src/components/settings_modal/settings_modal_content.vue
 create mode 100644 src/components/settings_modal/settings_modal_user_content.js
 create mode 100644 src/components/settings_modal/settings_modal_user_content.scss
 create mode 100644 src/components/settings_modal/settings_modal_user_content.vue

(limited to 'src/components/settings_modal')

diff --git a/src/components/admin_modal/admin_modal.js b/src/components/admin_modal/admin_modal.js
new file mode 100644
index 00000000..525f09aa
--- /dev/null
+++ b/src/components/admin_modal/admin_modal.js
@@ -0,0 +1,68 @@
+import Modal from 'src/components/modal/modal.vue'
+import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
+import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
+import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
+import Popover from '../popover/popover.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  newImporter,
+  newExporter
+} from 'src/services/export_import/export_import.js'
+import {
+  faTimes,
+  faFileUpload,
+  faFileDownload,
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faWindowMinimize
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(
+  faTimes,
+  faWindowMinimize,
+  faFileUpload,
+  faFileDownload,
+  faChevronDown
+)
+
+const AdminModal = {
+  data () {
+    return {}
+  },
+  components: {
+    Modal,
+    Popover,
+    Checkbox,
+    AdminModalContent: getResettableAsyncComponent(
+      () => import('./admin_modal_content.vue'),
+      {
+        loadingComponent: PanelLoading,
+        errorComponent: AsyncComponentError,
+        delay: 0
+      }
+    )
+  },
+  methods: {
+    closeModal () {
+      this.$store.dispatch('closeAdminModal')
+    },
+    peekModal () {
+      this.$store.dispatch('togglePeekAdminModal')
+    }
+  },
+  computed: {
+    modalActivated () {
+      return this.$store.state.interface.adminModalState !== 'hidden'
+    },
+    modalOpenedOnce () {
+      return this.$store.state.interface.adminModalLoaded
+    },
+    modalPeeked () {
+      return this.$store.state.interface.adminModalState === 'minimized'
+    }
+  }
+}
+
+export default AdminModal
diff --git a/src/components/admin_modal/admin_modal.scss b/src/components/admin_modal/admin_modal.scss
new file mode 100644
index 00000000..0d916f32
--- /dev/null
+++ b/src/components/admin_modal/admin_modal.scss
@@ -0,0 +1,80 @@
+@import "src/variables";
+
+.admin-modal {
+  overflow: hidden;
+
+  .setting-list,
+  .option-list {
+    list-style-type: none;
+    padding-left: 2em;
+
+    li {
+      margin-bottom: 0.5em;
+    }
+
+    .suboptions {
+      margin-top: 0.3em;
+    }
+  }
+
+  .admin-modal-panel {
+    overflow: hidden;
+    transition: transform;
+    transition-timing-function: ease-in-out;
+    transition-duration: 300ms;
+    width: 1000px;
+    max-width: 90vw;
+    height: 90vh;
+
+    @media all and (max-width: 800px) {
+      max-width: 100vw;
+      height: 100%;
+    }
+
+    >.panel-body {
+      height: 100%;
+      overflow-y: hidden;
+
+      .btn {
+        min-height: 2em;
+        min-width: 10em;
+        padding: 0 2em;
+      }
+    }
+  }
+
+  .admin-footer {
+    display: flex;
+
+    >* {
+      margin-right: 0.5em;
+    }
+
+    .extra-content {
+      display: flex;
+      flex-grow: 1;
+    }
+  }
+
+  &.peek {
+    .admin-modal-panel {
+      /* Explanation:
+       * Modal is positioned vertically centered.
+       * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
+       * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
+       * + 100% - we move modal completely off-screen, it's top boundary touches
+       *   bottom of the screen
+       * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
+       */
+      transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
+
+      @media all and (max-width: 800px) {
+        /* For mobile, the modal takes 100% of the available screen.
+           This ensures the minimized modal is always 50px above the browser bottom
+           bar regardless of whether or not it is visible.
+        */
+        transform: translateY(calc(100% - 50px));
+      }
+    }
+  }
+}
diff --git a/src/components/admin_modal/admin_modal.vue b/src/components/admin_modal/admin_modal.vue
new file mode 100644
index 00000000..d7e5a80f
--- /dev/null
+++ b/src/components/admin_modal/admin_modal.vue
@@ -0,0 +1,121 @@
+<template>
+  <Modal
+    :is-open="modalActivated"
+    class="admin-modal"
+    :class="{ peek: modalPeeked }"
+    :no-background="modalPeeked"
+  >
+    <div class="admin-modal-panel panel">
+      <div class="panel-heading">
+        <span class="title">
+          {{ $t('admin.settings') }}
+        </span>
+        <transition name="fade">
+          <div
+            v-if="currentSaveStateNotice"
+            class="alert"
+            :class="{ transparent: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
+            @click.prevent
+          >
+            {{ currentSaveStateNotice.error ? $t('admin.saving_err') : $t('settings.saving_ok') }}
+          </div>
+        </transition>
+        <button
+          class="btn button-default"
+          :title="$t('general.peek')"
+          @click="peekModal"
+        >
+          <FAIcon
+            :icon="['far', 'window-minimize']"
+            fixed-width
+          />
+        </button>
+        <button
+          class="btn button-default"
+          :title="$t('general.close')"
+          @click="closeModal"
+        >
+          <FAIcon
+            icon="times"
+            fixed-width
+          />
+        </button>
+      </div>
+      <div class="panel-body">
+        <AdminModalContent v-if="modalOpenedOnce" />
+      </div>
+      <div class="panel-footer admin-footer">
+        <Popover
+          class="export"
+          trigger="click"
+          placement="top"
+          :offset="{ y: 5, x: 5 }"
+          :bound-to="{ x: 'container' }"
+          remove-padding
+        >
+          <template #trigger>
+            <button
+              class="btn button-default"
+              :title="$t('general.close')"
+            >
+              <span>{{ $t("admin.file_export_import.backup_restore") }}</span>
+              {{ ' ' }}
+              <FAIcon
+                icon="chevron-down"
+              />
+            </button>
+          </template>
+          <template #content="{close}">
+            <div class="dropdown-menu">
+              <button
+                class="button-default dropdown-item dropdown-item-icon"
+                @click.prevent="backup"
+                @click="close"
+              >
+                <FAIcon
+                  icon="file-download"
+                  fixed-width
+                /><span>{{ $t("admin.file_export_import.backup_settings") }}</span>
+              </button>
+              <button
+                class="button-default dropdown-item dropdown-item-icon"
+                @click.prevent="backupWithTheme"
+                @click="close"
+              >
+                <FAIcon
+                  icon="file-download"
+                  fixed-width
+                /><span>{{ $t("admin.file_export_import.backup_settings_theme") }}</span>
+              </button>
+              <button
+                class="button-default dropdown-item dropdown-item-icon"
+                @click.prevent="restore"
+                @click="close"
+              >
+                <FAIcon
+                  icon="file-upload"
+                  fixed-width
+                /><span>{{ $t("admin.file_export_import.restore_settings") }}</span>
+              </button>
+            </div>
+          </template>
+        </Popover>
+
+        <Checkbox
+          :model-value="!!expertLevel"
+          @update:modelValue="expertLevel = Number($event)"
+        >
+          {{ $t("admin.expert_mode") }}
+        </Checkbox>
+        <span
+          id="unscrolled-content"
+          class="extra-content"
+        />
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script src="./admin_modal.js"></script>
+
+<style src="./admin_modal.scss" lang="scss"></style>
diff --git a/src/components/admin_modal/admin_modal_content.js b/src/components/admin_modal/admin_modal_content.js
new file mode 100644
index 00000000..897cc163
--- /dev/null
+++ b/src/components/admin_modal/admin_modal_content.js
@@ -0,0 +1,88 @@
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+
+import DataImportExportTab from './tabs/data_import_export_tab.vue'
+import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
+import NotificationsTab from './tabs/notifications_tab.vue'
+import FilteringTab from './tabs/filtering_tab.vue'
+import SecurityTab from './tabs/security_tab/security_tab.vue'
+import ProfileTab from './tabs/profile_tab.vue'
+import GeneralTab from './tabs/general_tab.vue'
+import VersionTab from './tabs/version_tab.vue'
+import ThemeTab from './tabs/theme_tab/theme_tab.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+)
+
+const AdminModalContent = {
+  components: {
+    TabSwitcher,
+
+    DataImportExportTab,
+    MutesAndBlocksTab,
+    NotificationsTab,
+    FilteringTab,
+    SecurityTab,
+    ProfileTab,
+    GeneralTab,
+    VersionTab,
+    ThemeTab
+  },
+  computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    open () {
+      return this.$store.state.interface.AdminModalState !== 'hidden'
+    },
+    bodyLock () {
+      return this.$store.state.interface.AdminModalState === 'visible'
+    }
+  },
+  methods: {
+    onOpen () {
+      const targetTab = this.$store.state.interface.AdminModalTargetTab
+      // We're being told to open in specific tab
+      if (targetTab) {
+        const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
+          return elm.props && elm.props['data-tab-name'] === targetTab
+        })
+        if (tabIndex >= 0) {
+          this.$refs.tabSwitcher.setTab(tabIndex)
+        }
+      }
+      // Clear the state of target tab, so that next time Admin is opened
+      // it doesn't force it.
+      this.$store.dispatch('clearAdminModalTargetTab')
+    }
+  },
+  mounted () {
+    this.onOpen()
+  },
+  watch: {
+    open: function (value) {
+      if (value) this.onOpen()
+    }
+  }
+}
+
+export default AdminModalContent
diff --git a/src/components/admin_modal/admin_modal_content.scss b/src/components/admin_modal/admin_modal_content.scss
new file mode 100644
index 00000000..2db7b2f8
--- /dev/null
+++ b/src/components/admin_modal/admin_modal_content.scss
@@ -0,0 +1,56 @@
+@import "src/variables";
+
+.admin_tab-switcher {
+  height: 100%;
+
+  .setting-item {
+    border-bottom: 2px solid var(--fg, $fallback--fg);
+    margin: 1em 1em 1.4em;
+    padding-bottom: 1.4em;
+
+    > div,
+    > label {
+      display: block;
+      margin-bottom: 0.5em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .select-multiple {
+      display: flex;
+
+      .option-list {
+        margin: 0;
+        padding-left: 0.5em;
+      }
+    }
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+      margin-bottom: 1em;
+    }
+
+    select {
+      min-width: 10em;
+    }
+
+    textarea {
+      width: 100%;
+      max-width: 100%;
+      height: 100px;
+    }
+
+    .unavailable,
+    .unavailable svg {
+      color: var(--cRed, $fallback--cRed);
+      color: $fallback--cRed;
+    }
+
+    .number-input {
+      max-width: 6em;
+    }
+  }
+}
diff --git a/src/components/admin_modal/tabs/general_tab.js b/src/components/admin_modal/tabs/general_tab.js
new file mode 100644
index 00000000..8c166f19
--- /dev/null
+++ b/src/components/admin_modal/tabs/general_tab.js
@@ -0,0 +1,33 @@
+import BooleanSetting from '../settings_modal/helpers/boolean_setting.vue'
+import ChoiceSetting from '../settings_modal/helpers/choice_setting.vue'
+import IntegerSetting from '../settings_modal/helpers/integer_setting.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faGlobe
+)
+
+const GeneralTab = {
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+  },
+  computed: {
+    mergedConfig () {
+      console.log(this.$store.state)
+      return this.$store.state
+    }
+  },
+  methods: {
+    changeDefaultScope (value) {
+      this.$store.dispatch('setProfileOption', { name: 'defaultScope', value })
+    }
+  }
+}
+
+export default GeneralTab
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 745b1a81..f6a2e294 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -107,7 +107,10 @@ export default {
       this.searchBarHidden = hidden
     },
     openSettingsModal () {
-      this.$store.dispatch('openSettingsModal')
+      this.$store.dispatch('openSettingsModal', 'user')
+    },
+    openAdminModal () {
+      this.$store.dispatch('openSettingsModal', 'admin')
     }
   }
 }
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index dc8bbfd3..49382f8e 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -48,20 +48,19 @@
             icon="cog"
           />
         </button>
-        <a
+        <button
           v-if="currentUser && currentUser.role === 'admin'"
-          href="/pleroma/admin/#/login-pleroma"
-          class="nav-icon"
+          class="button-unstyled nav-icon"
           target="_blank"
           :title="$t('nav.administration')"
-          @click.stop
+          @click.stop="openAdminModal"
         >
           <FAIcon
             fixed-width
             class="fa-scale-110 fa-old-padding"
             icon="tachometer-alt"
           />
-        </a>
+        </button>
         <span class="spacer" />
         <button
           v-if="currentUser"
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index e1ea42ad..8d4cc2d1 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -153,9 +153,9 @@
             </router-link>
             <button
               class="button-unstyled expand-icon"
-              @click.prevent="toggleStatusExpanded"
               :title="$t('tool_tip.toggle_expand')"
               :aria-expanded="statusExpanded"
+              @click.prevent="toggleStatusExpanded"
             >
               <FAIcon
                 class="fa-scale-110"
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.js b/src/components/settings_modal/admin_tabs/instance_tab.js
new file mode 100644
index 00000000..4a261659
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/instance_tab.js
@@ -0,0 +1,29 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faGlobe
+)
+
+const InstanceTab = {
+  data () {},
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting
+  },
+  computed: {
+    ...SharedComputedObject()
+  }
+}
+
+export default InstanceTab
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
new file mode 100644
index 00000000..65b3d12f
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -0,0 +1,35 @@
+<template>
+  <div :label="$t('settings.general')">
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.instance') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <StringSetting source="admin" path=":pleroma.:instance.:name">
+            NAME
+          </StringSetting>
+        </li>
+        <li>
+          <StringSetting source="admin" path=":pleroma.:instance.:description">
+            DESCRIPTION
+          </StringSetting>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./instance_tab.js"></script>
+
+<style lang="scss">
+.column-settings {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+
+.column-settings .size-label {
+  display: block;
+  margin-bottom: 0.5em;
+  margin-top: 0.5em;
+}
+</style>
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index a766e6dc..9195d3e9 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -42,6 +42,8 @@ export default {
       switch (this.source) {
         case 'profile':
           return this.$store.state.profileConfig
+        case 'admin':
+          return this.$store.state.adminSettings.config
         default:
           return this.$store.getters.mergedConfig
       }
@@ -50,6 +52,8 @@ export default {
       switch (this.source) {
         case 'profile':
           return (k, v) => this.$store.dispatch('setProfileOption', { name: k, value: v })
+        case 'admin':
+          return (k, v) => console.log(this.path, k, v)
         default:
           return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
       }
@@ -66,7 +70,15 @@ export default {
       return this.source === 'profile'
     },
     isChanged () {
-      return !this.source === 'default' && this.state !== this.defaultState
+      switch (this.source) {
+        case 'profile':
+          return false
+        case 'admin':
+          console.log(this.$store.state.adminSettings.modifiedPaths)
+          return this.$store.state.adminSettings.modifiedPaths.has(this.path)
+        default:
+          return this.state !== this.defaultState
+      }
     },
     matchesExpertLevel () {
       return (this.expert || 0) <= this.$store.state.config.expertLevel > 0
diff --git a/src/components/settings_modal/helpers/string_setting.js b/src/components/settings_modal/helpers/string_setting.js
new file mode 100644
index 00000000..64f8772d
--- /dev/null
+++ b/src/components/settings_modal/helpers/string_setting.js
@@ -0,0 +1,9 @@
+import ModifiedIndicator from './modified_indicator.vue'
+import Setting from './setting.js'
+
+export default {
+  components: {
+    ModifiedIndicator
+  },
+  ...Setting
+}
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
new file mode 100644
index 00000000..e4bd2de9
--- /dev/null
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -0,0 +1,25 @@
+<template>
+  <label
+    v-if="matchesExpertLevel"
+    class="StringSetting"
+  >
+    <label :for="path">
+      <slot />
+    </label>
+    <input
+      :id="path"
+      class="string-input"
+      step="1"
+      :disabled="disabled"
+      :value="state"
+      @change="update"
+    >
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+  </label>
+</template>
+
+<script src="./boolean_setting.js"></script>
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 0a72dca1..e033d999 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -53,8 +53,16 @@ const SettingsModal = {
     Modal,
     Popover,
     Checkbox,
-    SettingsModalContent: getResettableAsyncComponent(
-      () => import('./settings_modal_content.vue'),
+    SettingsModalUserContent: getResettableAsyncComponent(
+      () => import('./settings_modal_user_content.vue'),
+      {
+        loadingComponent: PanelLoading,
+        errorComponent: AsyncComponentError,
+        delay: 0
+      }
+    ),
+    SettingsModalAdminContent: getResettableAsyncComponent(
+      () => import('./settings_modal_admin_content.vue'),
       {
         loadingComponent: PanelLoading,
         errorComponent: AsyncComponentError,
@@ -156,8 +164,14 @@ const SettingsModal = {
     modalActivated () {
       return this.$store.state.interface.settingsModalState !== 'hidden'
     },
-    modalOpenedOnce () {
-      return this.$store.state.interface.settingsModalLoaded
+    modalMode () {
+      return this.$store.state.interface.settingsModalMode
+    },
+    modalOpenedOnceUser () {
+      return this.$store.state.interface.settingsModalLoadedUser
+    },
+    modalOpenedOnceAdmin () {
+      return this.$store.state.interface.settingsModalLoadedAdmin
     },
     modalPeeked () {
       return this.$store.state.interface.settingsModalState === 'minimized'
@@ -167,7 +181,6 @@ const SettingsModal = {
         return this.$store.state.config.expertLevel > 0
       },
       set (value) {
-        console.log(value)
         this.$store.dispatch('setOption', { name: 'expertLevel', value: value ? 1 : 0 })
       }
     }
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 7b457371..73e1524a 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -42,7 +42,8 @@
         </button>
       </div>
       <div class="panel-body">
-        <SettingsModalContent v-if="modalOpenedOnce" />
+        <SettingsModalUserContent v-if="modalMode === 'user' && modalOpenedOnceUser" />
+        <SettingsModalAdminContent v-if="modalMode === 'admin' && modalOpenedOnceAdmin" />
       </div>
       <div class="panel-footer settings-footer">
         <Popover
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
new file mode 100644
index 00000000..88ba1755
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -0,0 +1,76 @@
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+
+import DataImportExportTab from './tabs/data_import_export_tab.vue'
+import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
+import InstanceTab from './admin_tabs/instance_tab.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+)
+
+const SettingsModalAdminContent = {
+  components: {
+    TabSwitcher,
+
+    DataImportExportTab,
+    MutesAndBlocksTab,
+    InstanceTab
+  },
+  computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    open () {
+      return this.$store.state.interface.settingsModalState !== 'hidden'
+    },
+    bodyLock () {
+      return this.$store.state.interface.settingsModalState === 'visible'
+    }
+  },
+  methods: {
+    onOpen () {
+      const targetTab = this.$store.state.interface.settingsModalTargetTab
+      // We're being told to open in specific tab
+      if (targetTab) {
+        const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
+          return elm.props && elm.props['data-tab-name'] === targetTab
+        })
+        if (tabIndex >= 0) {
+          this.$refs.tabSwitcher.setTab(tabIndex)
+        }
+      }
+      // Clear the state of target tab, so that next time settings is opened
+      // it doesn't force it.
+      this.$store.dispatch('clearSettingsModalTargetTab')
+    }
+  },
+  mounted () {
+    this.onOpen()
+  },
+  watch: {
+    open: function (value) {
+      if (value) this.onOpen()
+    }
+  }
+}
+
+export default SettingsModalAdminContent
diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss
new file mode 100644
index 00000000..87df7982
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_admin_content.scss
@@ -0,0 +1,56 @@
+@import "src/variables";
+
+.settings_tab-switcher {
+  height: 100%;
+
+  .setting-item {
+    border-bottom: 2px solid var(--fg, $fallback--fg);
+    margin: 1em 1em 1.4em;
+    padding-bottom: 1.4em;
+
+    > div,
+    > label {
+      display: block;
+      margin-bottom: 0.5em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .select-multiple {
+      display: flex;
+
+      .option-list {
+        margin: 0;
+        padding-left: 0.5em;
+      }
+    }
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+      margin-bottom: 1em;
+    }
+
+    select {
+      min-width: 10em;
+    }
+
+    textarea {
+      width: 100%;
+      max-width: 100%;
+      height: 100px;
+    }
+
+    .unavailable,
+    .unavailable svg {
+      color: var(--cRed, $fallback--cRed);
+      color: $fallback--cRed;
+    }
+
+    .number-input {
+      max-width: 6em;
+    }
+  }
+}
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
new file mode 100644
index 00000000..9873b127
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -0,0 +1,21 @@
+<template>
+  <tab-switcher
+    ref="tabSwitcher"
+    class="settings_tab-switcher"
+    :side-tab-bar="true"
+    :scrollable-tabs="true"
+    :body-scroll-lock="bodyLock"
+  >
+    <div
+      :label="$t('settings.general')"
+      icon="wrench"
+      data-tab-name="general"
+    >
+      <InstanceTab />
+    </div>
+  </tab-switcher>
+</template>
+
+<script src="./settings_modal_admin_content.js"></script>
+
+<style src="./settings_modal_admin_content.scss" lang="scss"></style>
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
deleted file mode 100644
index 9ac0301f..00000000
--- a/src/components/settings_modal/settings_modal_content.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
-
-import DataImportExportTab from './tabs/data_import_export_tab.vue'
-import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
-import NotificationsTab from './tabs/notifications_tab.vue'
-import FilteringTab from './tabs/filtering_tab.vue'
-import SecurityTab from './tabs/security_tab/security_tab.vue'
-import ProfileTab from './tabs/profile_tab.vue'
-import GeneralTab from './tabs/general_tab.vue'
-import VersionTab from './tabs/version_tab.vue'
-import ThemeTab from './tabs/theme_tab/theme_tab.vue'
-
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faWrench,
-  faUser,
-  faFilter,
-  faPaintBrush,
-  faBell,
-  faDownload,
-  faEyeSlash,
-  faInfo
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faWrench,
-  faUser,
-  faFilter,
-  faPaintBrush,
-  faBell,
-  faDownload,
-  faEyeSlash,
-  faInfo
-)
-
-const SettingsModalContent = {
-  components: {
-    TabSwitcher,
-
-    DataImportExportTab,
-    MutesAndBlocksTab,
-    NotificationsTab,
-    FilteringTab,
-    SecurityTab,
-    ProfileTab,
-    GeneralTab,
-    VersionTab,
-    ThemeTab
-  },
-  computed: {
-    isLoggedIn () {
-      return !!this.$store.state.users.currentUser
-    },
-    open () {
-      return this.$store.state.interface.settingsModalState !== 'hidden'
-    },
-    bodyLock () {
-      return this.$store.state.interface.settingsModalState === 'visible'
-    }
-  },
-  methods: {
-    onOpen () {
-      const targetTab = this.$store.state.interface.settingsModalTargetTab
-      // We're being told to open in specific tab
-      if (targetTab) {
-        const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
-          return elm.props && elm.props['data-tab-name'] === targetTab
-        })
-        if (tabIndex >= 0) {
-          this.$refs.tabSwitcher.setTab(tabIndex)
-        }
-      }
-      // Clear the state of target tab, so that next time settings is opened
-      // it doesn't force it.
-      this.$store.dispatch('clearSettingsModalTargetTab')
-    }
-  },
-  mounted () {
-    this.onOpen()
-  },
-  watch: {
-    open: function (value) {
-      if (value) this.onOpen()
-    }
-  }
-}
-
-export default SettingsModalContent
diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
deleted file mode 100644
index 87df7982..00000000
--- a/src/components/settings_modal/settings_modal_content.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-@import "src/variables";
-
-.settings_tab-switcher {
-  height: 100%;
-
-  .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
-    margin: 1em 1em 1.4em;
-    padding-bottom: 1.4em;
-
-    > div,
-    > label {
-      display: block;
-      margin-bottom: 0.5em;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    .select-multiple {
-      display: flex;
-
-      .option-list {
-        margin: 0;
-        padding-left: 0.5em;
-      }
-    }
-
-    &:last-child {
-      border-bottom: none;
-      padding-bottom: 0;
-      margin-bottom: 1em;
-    }
-
-    select {
-      min-width: 10em;
-    }
-
-    textarea {
-      width: 100%;
-      max-width: 100%;
-      height: 100px;
-    }
-
-    .unavailable,
-    .unavailable svg {
-      color: var(--cRed, $fallback--cRed);
-      color: $fallback--cRed;
-    }
-
-    .number-input {
-      max-width: 6em;
-    }
-  }
-}
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
deleted file mode 100644
index 0be76d22..00000000
--- a/src/components/settings_modal/settings_modal_content.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <tab-switcher
-    ref="tabSwitcher"
-    class="settings_tab-switcher"
-    :side-tab-bar="true"
-    :scrollable-tabs="true"
-    :body-scroll-lock="bodyLock"
-  >
-    <div
-      :label="$t('settings.general')"
-      icon="wrench"
-      data-tab-name="general"
-    >
-      <GeneralTab />
-    </div>
-    <div
-      v-if="isLoggedIn"
-      :label="$t('settings.profile_tab')"
-      icon="user"
-      data-tab-name="profile"
-    >
-      <ProfileTab />
-    </div>
-    <div
-      v-if="isLoggedIn"
-      :label="$t('settings.security_tab')"
-      icon="lock"
-      data-tab-name="security"
-    >
-      <SecurityTab />
-    </div>
-    <div
-      :label="$t('settings.filtering')"
-      icon="filter"
-      data-tab-name="filtering"
-    >
-      <FilteringTab />
-    </div>
-    <div
-      :label="$t('settings.theme')"
-      icon="paint-brush"
-      data-tab-name="theme"
-    >
-      <ThemeTab />
-    </div>
-    <div
-      v-if="isLoggedIn"
-      :label="$t('settings.notifications')"
-      icon="bell"
-      data-tab-name="notifications"
-    >
-      <NotificationsTab />
-    </div>
-    <div
-      v-if="isLoggedIn"
-      :label="$t('settings.data_import_export_tab')"
-      icon="download"
-      data-tab-name="dataImportExport"
-    >
-      <DataImportExportTab />
-    </div>
-    <div
-      v-if="isLoggedIn"
-      :label="$t('settings.mutes_and_blocks')"
-      :fullHeight="true"
-      icon="eye-slash"
-      data-tab-name="mutesAndBlocks"
-    >
-      <MutesAndBlocksTab />
-    </div>
-    <div
-      :label="$t('settings.version.title')"
-      icon="info"
-      data-tab-name="version"
-    >
-      <VersionTab />
-    </div>
-  </tab-switcher>
-</template>
-
-<script src="./settings_modal_content.js"></script>
-
-<style src="./settings_modal_content.scss" lang="scss"></style>
diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js
new file mode 100644
index 00000000..9ac0301f
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_user_content.js
@@ -0,0 +1,88 @@
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+
+import DataImportExportTab from './tabs/data_import_export_tab.vue'
+import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
+import NotificationsTab from './tabs/notifications_tab.vue'
+import FilteringTab from './tabs/filtering_tab.vue'
+import SecurityTab from './tabs/security_tab/security_tab.vue'
+import ProfileTab from './tabs/profile_tab.vue'
+import GeneralTab from './tabs/general_tab.vue'
+import VersionTab from './tabs/version_tab.vue'
+import ThemeTab from './tabs/theme_tab/theme_tab.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+)
+
+const SettingsModalContent = {
+  components: {
+    TabSwitcher,
+
+    DataImportExportTab,
+    MutesAndBlocksTab,
+    NotificationsTab,
+    FilteringTab,
+    SecurityTab,
+    ProfileTab,
+    GeneralTab,
+    VersionTab,
+    ThemeTab
+  },
+  computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    open () {
+      return this.$store.state.interface.settingsModalState !== 'hidden'
+    },
+    bodyLock () {
+      return this.$store.state.interface.settingsModalState === 'visible'
+    }
+  },
+  methods: {
+    onOpen () {
+      const targetTab = this.$store.state.interface.settingsModalTargetTab
+      // We're being told to open in specific tab
+      if (targetTab) {
+        const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
+          return elm.props && elm.props['data-tab-name'] === targetTab
+        })
+        if (tabIndex >= 0) {
+          this.$refs.tabSwitcher.setTab(tabIndex)
+        }
+      }
+      // Clear the state of target tab, so that next time settings is opened
+      // it doesn't force it.
+      this.$store.dispatch('clearSettingsModalTargetTab')
+    }
+  },
+  mounted () {
+    this.onOpen()
+  },
+  watch: {
+    open: function (value) {
+      if (value) this.onOpen()
+    }
+  }
+}
+
+export default SettingsModalContent
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
new file mode 100644
index 00000000..87df7982
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_user_content.scss
@@ -0,0 +1,56 @@
+@import "src/variables";
+
+.settings_tab-switcher {
+  height: 100%;
+
+  .setting-item {
+    border-bottom: 2px solid var(--fg, $fallback--fg);
+    margin: 1em 1em 1.4em;
+    padding-bottom: 1.4em;
+
+    > div,
+    > label {
+      display: block;
+      margin-bottom: 0.5em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .select-multiple {
+      display: flex;
+
+      .option-list {
+        margin: 0;
+        padding-left: 0.5em;
+      }
+    }
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+      margin-bottom: 1em;
+    }
+
+    select {
+      min-width: 10em;
+    }
+
+    textarea {
+      width: 100%;
+      max-width: 100%;
+      height: 100px;
+    }
+
+    .unavailable,
+    .unavailable svg {
+      color: var(--cRed, $fallback--cRed);
+      color: $fallback--cRed;
+    }
+
+    .number-input {
+      max-width: 6em;
+    }
+  }
+}
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
new file mode 100644
index 00000000..0221cccb
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -0,0 +1,83 @@
+<template>
+  <tab-switcher
+    ref="tabSwitcher"
+    class="settings_tab-switcher"
+    :side-tab-bar="true"
+    :scrollable-tabs="true"
+    :body-scroll-lock="bodyLock"
+  >
+    <div
+      :label="$t('settings.general')"
+      icon="wrench"
+      data-tab-name="general"
+    >
+      <GeneralTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.profile_tab')"
+      icon="user"
+      data-tab-name="profile"
+    >
+      <ProfileTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.security_tab')"
+      icon="lock"
+      data-tab-name="security"
+    >
+      <SecurityTab />
+    </div>
+    <div
+      :label="$t('settings.filtering')"
+      icon="filter"
+      data-tab-name="filtering"
+    >
+      <FilteringTab />
+    </div>
+    <div
+      :label="$t('settings.theme')"
+      icon="paint-brush"
+      data-tab-name="theme"
+    >
+      <ThemeTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.notifications')"
+      icon="bell"
+      data-tab-name="notifications"
+    >
+      <NotificationsTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.data_import_export_tab')"
+      icon="download"
+      data-tab-name="dataImportExport"
+    >
+      <DataImportExportTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.mutes_and_blocks')"
+      :fullHeight="true"
+      icon="eye-slash"
+      data-tab-name="mutesAndBlocks"
+    >
+      <MutesAndBlocksTab />
+    </div>
+    <div
+      :label="$t('settings.version.title')"
+      icon="info"
+      data-tab-name="version"
+    >
+      <VersionTab />
+    </div>
+  </tab-switcher>
+</template>
+
+<script src="./settings_modal_user_content.js"></script>
+
+<style src="./settings_modal_user_content.scss" lang="scss"></style>
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index a7ef8560..b444da43 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -60,13 +60,7 @@ export default {
         const isWanted = slot => slot.props && slot.props['data-tab-name'] === tabName
         return this.$slots.default().findIndex(isWanted) === this.activeIndex
       }
-    },
-    settingsModalVisible () {
-      return this.settingsModalState === 'visible'
-    },
-    ...mapState({
-      settingsModalState: state => state.interface.settingsModalState
-    })
+    }
   },
   beforeUpdate () {
     const currentSlot = this.slots()[this.active]
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index 01e9a49e..8006717d 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -10,7 +10,7 @@ export const newUserFlags = {
   ...defaultState.flagStorage
 }
 
-const serverSideStorage = {
+const adminSettingsStorage = {
   state: {
     ...cloneDeep(defaultState)
   },
@@ -40,9 +40,10 @@ const serverSideStorage = {
         }
         set(config, path, convert(c.value))
       })
+      console.log(config)
       commit('updateAdminSettings', { config, modifiedPaths })
     }
   }
 }
 
-export default serverSideStorage
+export default adminSettingsStorage
diff --git a/src/modules/interface.js b/src/modules/interface.js
index a86193ea..2d012f1b 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -1,7 +1,9 @@
 const defaultState = {
   settingsModalState: 'hidden',
-  settingsModalLoaded: false,
+  settingsModalLoadedUser: false,
+  settingsModalLoadedAdmin: false,
   settingsModalTargetTab: null,
+  settingsModalMode: 'user',
   settings: {
     currentSaveStateNotice: null,
     noticeClearTimeout: null,
@@ -54,10 +56,17 @@ const interfaceMod = {
           throw new Error('Illegal minimization state of settings modal')
       }
     },
-    openSettingsModal (state) {
+    openSettingsModal (state, value) {
+      state.settingsModalMode = value
       state.settingsModalState = 'visible'
-      if (!state.settingsModalLoaded) {
-        state.settingsModalLoaded = true
+      if (value === 'user') {
+        if (!state.settingsModalLoadedUser) {
+          state.settingsModalLoadedUser = true
+        }
+      } else if (value === 'admin') {
+        if (!state.settingsModalLoadedAdmin) {
+          state.settingsModalLoadedAdmin = true
+        }
       }
     },
     setSettingsModalTargetTab (state, value) {
@@ -92,8 +101,8 @@ const interfaceMod = {
     closeSettingsModal ({ commit }) {
       commit('closeSettingsModal')
     },
-    openSettingsModal ({ commit }) {
-      commit('openSettingsModal')
+    openSettingsModal ({ commit }, value = 'user') {
+      commit('openSettingsModal', value)
     },
     togglePeekSettingsModal ({ commit }) {
       commit('togglePeekSettingsModal')
-- 
cgit v1.2.3-70-g09d2


From bfd802ad046886230574cf2262f9c2e5f1b03a3f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 16 Mar 2023 23:18:55 +0200
Subject: setting admin settings works now. also now we have draftable settings

---
 .../settings_modal/admin_tabs/instance_tab.vue     |  23 ++++-
 .../settings_modal/helpers/boolean_setting.js      |  15 +--
 .../settings_modal/helpers/boolean_setting.vue     |   3 +-
 .../settings_modal/helpers/choice_setting.js       |   9 +-
 .../settings_modal/helpers/draft_buttons.vue       | 102 +++++++++++++++++++++
 .../settings_modal/helpers/integer_setting.js      |   8 +-
 .../settings_modal/helpers/integer_setting.vue     |   4 +-
 src/components/settings_modal/helpers/setting.js   |  70 ++++++++++++--
 .../settings_modal/helpers/size_setting.js         |   5 +-
 .../settings_modal/helpers/string_setting.js       |   4 -
 .../settings_modal/helpers/string_setting.vue      |   6 +-
 src/modules/adminSettings.js                       |  52 ++++++++++-
 src/modules/users.js                               |   2 +-
 src/services/api/api.service.js                    |  26 +++++-
 14 files changed, 284 insertions(+), 45 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/draft_buttons.vue

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index 65b3d12f..18ba6127 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -1,18 +1,35 @@
 <template>
-  <div :label="$t('settings.general')">
+  <div :label="$t('admin_dash.instance')">
     <div class="setting-item">
       <h2>{{ $t('admin_dash.instance') }}</h2>
       <ul class="setting-list">
         <li>
-          <StringSetting source="admin" path=":pleroma.:instance.:name">
+          <StringSetting
+            source="admin"
+            path=":pleroma.:instance.:name"
+            draft-mode
+          >
             NAME
           </StringSetting>
         </li>
         <li>
-          <StringSetting source="admin" path=":pleroma.:instance.:description">
+          <StringSetting
+            source="admin"
+            path=":pleroma.:instance.:description"
+            draft-mode
+          >
             DESCRIPTION
           </StringSetting>
         </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:limit"
+            draft-mode
+          >
+            POST LIMIT
+          </IntegerSetting>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/components/settings_modal/helpers/boolean_setting.js b/src/components/settings_modal/helpers/boolean_setting.js
index 078cc5ff..0df01d31 100644
--- a/src/components/settings_modal/helpers/boolean_setting.js
+++ b/src/components/settings_modal/helpers/boolean_setting.js
@@ -1,13 +1,16 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ModifiedIndicator from './modified_indicator.vue'
-import ProfileSettingIndicator from './profile_setting_indicator.vue'
 import Setting from './setting.js'
 
 export default {
+  ...Setting,
   components: {
-    Checkbox,
-    ModifiedIndicator,
-    ProfileSettingIndicator
+    ...Setting.components,
+    Checkbox
   },
-  ...Setting
+  methods: {
+    ...Setting.methods,
+    getValue (e) {
+      return e
+    }
+  }
 }
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 260ee75e..7e05fe85 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -4,7 +4,7 @@
     class="BooleanSetting"
   >
     <Checkbox
-      :model-value="state"
+      :model-value="draftMode ? draft :state"
       :disabled="shouldBeDisabled"
       @update:modelValue="update"
     >
@@ -20,6 +20,7 @@
         :onclick="reset"
       />
       <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      <DraftButtons />
     </Checkbox>
   </label>
 </template>
diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js
index 8aa5f54b..a3c3bf44 100644
--- a/src/components/settings_modal/helpers/choice_setting.js
+++ b/src/components/settings_modal/helpers/choice_setting.js
@@ -1,15 +1,12 @@
 import Select from 'src/components/select/select.vue'
-import ModifiedIndicator from './modified_indicator.vue'
-import ProfileSettingIndicator from './profile_setting_indicator.vue'
 import Setting from './setting.js'
 
 export default {
+  ...Setting,
   components: {
-    Select,
-    ModifiedIndicator,
-    ProfileSettingIndicator
+    ...Setting.components,
+    Select
   },
-  ...Setting,
   props: {
     ...Setting.props,
     options: {
diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
new file mode 100644
index 00000000..0d99da13
--- /dev/null
+++ b/src/components/settings_modal/helpers/draft_buttons.vue
@@ -0,0 +1,102 @@
+<!-- this is a helper exclusive to Setting components -->
+<!-- TODO make it reusable -->
+<template>
+  <span
+    class="DraftButtons"
+  >
+    <Popover
+      trigger="hover"
+      :trigger-attrs="{ 'aria-label': $t('settings.commit_value_tooltip') }"
+    >
+      <template #trigger>
+        &nbsp;
+        <button
+        v-if="$parent.isDirty"
+        class="button button-default btn"
+        type="button"
+        :title="$t('settings.commit_value')"
+        @click="$parent.commitDraft"
+        >
+        {{ $t('settings.commit_value') }}
+        </button>
+      </template>
+      <template #content>
+        <div class="modified-tooltip">
+          {{ $t('settings.commit_value_tooltip') }}
+        </div>
+      </template>
+    </Popover>
+    <Popover
+      trigger="hover"
+      :trigger-attrs="{ 'aria-label': $t('settings.reset_value_tooltip') }"
+    >
+      <template #trigger>
+        &nbsp;
+        <button
+        v-if="$parent.isDirty"
+        class="button button-default btn"
+        type="button"
+        :title="$t('settings.reset_value')"
+        @click="$parent.reset"
+        >
+        {{ $t('settings.reset_value') }}
+        </button>
+      </template>
+      <template #content>
+        <div class="modified-tooltip">
+          {{ $t('settings.reset_value_tooltip') }}
+        </div>
+      </template>
+    </Popover>
+    <Popover
+      trigger="hover"
+      :trigger-attrs="{ 'aria-label': $t('settings.hard_reset_value_tooltip') }"
+    >
+      <template #trigger>
+        &nbsp;
+        <button
+        v-if="$parent.canHardReset"
+        class="button button-default btn"
+        type="button"
+        :title="$t('settings.hard_reset_value')"
+        @click="$parent.hardReset"
+        >
+        {{ $t('settings.hard_reset_value') }}
+        </button>
+      </template>
+      <template #content>
+        <div class="modified-tooltip">
+          {{ $t('settings.hard_reset_value_tooltip') }}
+        </div>
+      </template>
+    </Popover>
+  </span>
+</template>
+
+<script>
+import Popover from 'src/components/popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faWrench } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench
+)
+
+export default {
+  components: { Popover },
+  props: ['changed']
+}
+</script>
+
+<style lang="scss">
+.DraftButtons {
+  display: inline-block;
+  position: relative;
+}
+
+.draft-tooltip {
+  margin: 0.5em 1em;
+  min-width: 10em;
+  text-align: center;
+}
+</style>
diff --git a/src/components/settings_modal/helpers/integer_setting.js b/src/components/settings_modal/helpers/integer_setting.js
index 0f29f11a..8ad033e7 100644
--- a/src/components/settings_modal/helpers/integer_setting.js
+++ b/src/components/settings_modal/helpers/integer_setting.js
@@ -1,15 +1,11 @@
-import ModifiedIndicator from './modified_indicator.vue'
 import Setting from './setting.js'
 
 export default {
-  components: {
-    ModifiedIndicator
-  },
   ...Setting,
   methods: {
     ...Setting.methods,
-    update (e) {
-      this.configSink(this.path, parseInt(e.target.value))
+    getValue (e) {
+      return parseInt(e.target.value)
     }
   }
 }
diff --git a/src/components/settings_modal/helpers/integer_setting.vue b/src/components/settings_modal/helpers/integer_setting.vue
index 695e2673..e900b87c 100644
--- a/src/components/settings_modal/helpers/integer_setting.vue
+++ b/src/components/settings_modal/helpers/integer_setting.vue
@@ -13,7 +13,7 @@
       step="1"
       :disabled="disabled"
       :min="min || 0"
-      :value="state"
+      :value="draftMode ? draft :state"
       @change="update"
     >
     {{ ' ' }}
@@ -21,6 +21,8 @@
       :changed="isChanged"
       :onclick="reset"
     />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
   </span>
 </template>
 
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index 9195d3e9..0971b919 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -1,5 +1,16 @@
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ModifiedIndicator from './modified_indicator.vue'
+import ProfileSettingIndicator from './profile_setting_indicator.vue'
+import DraftButtons from './draft_buttons.vue'
 import { get, set } from 'lodash'
+
 export default {
+  components: {
+    Checkbox,
+    ModifiedIndicator,
+    DraftButtons,
+    ProfileSettingIndicator
+  },
   props: {
     path: {
       type: String,
@@ -23,6 +34,20 @@ export default {
     source: {
       type: String,
       default: 'default'
+    },
+    draftMode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      draft: null
+    }
+  },
+  created () {
+    if (this.draftMode) {
+      this.draft = this.state
     }
   },
   computed: {
@@ -53,7 +78,7 @@ export default {
         case 'profile':
           return (k, v) => this.$store.dispatch('setProfileOption', { name: k, value: v })
         case 'admin':
-          return (k, v) => console.log(this.path, k, v)
+          return (k, v) => this.$store.dispatch('pushAdminSetting', { path: k, value: v })
         default:
           return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
       }
@@ -72,25 +97,56 @@ export default {
     isChanged () {
       switch (this.source) {
         case 'profile':
-          return false
         case 'admin':
-          console.log(this.$store.state.adminSettings.modifiedPaths)
-          return this.$store.state.adminSettings.modifiedPaths.has(this.path)
+          return false
         default:
           return this.state !== this.defaultState
       }
     },
+    isDirty () {
+      return this.draftMode && this.draft !== this.state
+    },
+    canHardReset () {
+      return this.source === 'admin' && this.$store.state.adminSettings.modifiedPaths.has(this.path)
+    },
     matchesExpertLevel () {
       return (this.expert || 0) <= this.$store.state.config.expertLevel > 0
     }
   },
   methods: {
+    getValue (e) {
+      return e.target.value
+    },
     update (e) {
-      console.log('U', this.path, e)
-      this.configSink(this.path, e)
+      if (this.draftMode) {
+        this.draft = this.getValue(e)
+      } else {
+        this.configSink(this.path, this.getValue(e))
+      }
+    },
+    commitDraft () {
+      if (this.draftMode) {
+        this.configSink(this.path, this.draft)
+      }
     },
     reset () {
-      set(this.$store.getters.mergedConfig, this.path, this.defaultState)
+      console.log('reset')
+      if (this.draftMode) {
+        console.log(this.draft)
+        console.log(this.state)
+        this.draft = this.state
+      } else {
+        set(this.$store.getters.mergedConfig, this.path, this.defaultState)
+      }
+    },
+    hardReset () {
+      switch (this.source) {
+        case 'admin':
+          return this.$store.dispatch('resetAdminSetting', { path: this.path })
+            .then(() => { this.draft = this.state })
+        default:
+          console.warn('Hard reset not implemented yet!')
+      }
     }
   }
 }
diff --git a/src/components/settings_modal/helpers/size_setting.js b/src/components/settings_modal/helpers/size_setting.js
index 4a0f7e48..12cef705 100644
--- a/src/components/settings_modal/helpers/size_setting.js
+++ b/src/components/settings_modal/helpers/size_setting.js
@@ -1,4 +1,3 @@
-import ModifiedIndicator from './modified_indicator.vue'
 import Select from 'src/components/select/select.vue'
 import Setting from './setting.js'
 
@@ -7,11 +6,11 @@ export const defaultHorizontalUnits = ['px', 'rem', 'vw']
 export const defaultVerticalUnits = ['px', 'rem', 'vh']
 
 export default {
+  ...Setting,
   components: {
-    ModifiedIndicator,
+    ...Setting.components,
     Select
   },
-  ...Setting,
   props: {
     ...Setting.props,
     min: Number,
diff --git a/src/components/settings_modal/helpers/string_setting.js b/src/components/settings_modal/helpers/string_setting.js
index 64f8772d..b368cfc8 100644
--- a/src/components/settings_modal/helpers/string_setting.js
+++ b/src/components/settings_modal/helpers/string_setting.js
@@ -1,9 +1,5 @@
-import ModifiedIndicator from './modified_indicator.vue'
 import Setting from './setting.js'
 
 export default {
-  components: {
-    ModifiedIndicator
-  },
   ...Setting
 }
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index e4bd2de9..0a71aeab 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -11,7 +11,7 @@
       class="string-input"
       step="1"
       :disabled="disabled"
-      :value="state"
+      :value="draftMode ? draft :state"
       @change="update"
     >
     {{ ' ' }}
@@ -19,7 +19,9 @@
       :changed="isChanged"
       :onclick="reset"
     />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
   </label>
 </template>
 
-<script src="./boolean_setting.js"></script>
+<script src="./string_setting.js"></script>
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index 8006717d..d1df67d4 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -22,8 +22,8 @@ const adminSettingsStorage = {
   },
   actions: {
     setInstanceAdminSettings ({ state, commit, dispatch }, { backendDbConfig }) {
-      const config = {}
-      const modifiedPaths = new Set()
+      const config = state.config || {}
+      const modifiedPaths = state.modifiedPaths || new Set()
       backendDbConfig.configs.forEach(c => {
         const path = c.group + '.' + c.key
         if (c.db) {
@@ -40,8 +40,54 @@ const adminSettingsStorage = {
         }
         set(config, path, convert(c.value))
       })
-      console.log(config)
       commit('updateAdminSettings', { config, modifiedPaths })
+    },
+    pushAdminSetting ({ rootState, state, commit, dispatch }, { path, value }) {
+      const [group, key, ...rest] = path.split(/\./g)
+      const clone = {} // not actually cloning the entire thing to avoid excessive writes
+      set(clone, rest.join('.'), value)
+
+      // TODO cleanup paths in modifiedPaths
+      const convert = (value) => {
+        if (typeof value !== 'object') {
+          return value
+        } else if (Array.isArray(value)) {
+          return value.map(convert)
+        } else {
+          return Object.entries(value).map(([k, v]) => ({ tuple: [k, v] }))
+        }
+      }
+
+      rootState.api.backendInteractor.pushInstanceDBConfig({
+        payload: {
+          configs: [{
+            group,
+            key,
+            value: convert(clone)
+          }]
+        }
+      })
+        .then(() => rootState.api.backendInteractor.fetchInstanceDBConfig())
+        .then(backendDbConfig => dispatch('setInstanceAdminSettings', { backendDbConfig }))
+    },
+    resetAdminSetting ({ rootState, state, commit, dispatch }, { path }) {
+      console.log('ASS')
+      const [group, key, subkey] = path.split(/\./g)
+
+      state.modifiedPaths.delete(path)
+
+      return rootState.api.backendInteractor.pushInstanceDBConfig({
+        payload: {
+          configs: [{
+            group,
+            key,
+            delete: true,
+            subkeys: [subkey]
+          }]
+        }
+      })
+        .then(() => rootState.api.backendInteractor.fetchInstanceDBConfig())
+        .then(backendDbConfig => dispatch('setInstanceAdminSettings', { backendDbConfig }))
     }
   }
 }
diff --git a/src/modules/users.js b/src/modules/users.js
index 74dbdffc..12e582f4 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -564,7 +564,7 @@ const users = {
               user.domainMutes = []
               commit('setCurrentUser', user)
               commit('setServerSideStorage', user)
-              if (user.rights.moderator || user.rights.admin) {
+              if (user.rights.admin) {
                 store.rootState.api.backendInteractor.fetchInstanceDBConfig()
                   .then(backendDbConfig => dispatch('setInstanceAdminSettings', { backendDbConfig }))
               }
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index f0aa898a..71ba1dec 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -108,7 +108,7 @@ const PLEROMA_POST_ANNOUNCEMENT_URL = '/api/v1/pleroma/admin/announcements'
 const PLEROMA_EDIT_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 
-const PLEROMA_ADMIN_CONFIG_URL = '/api/v1/pleroma/admin/config'
+const PLEROMA_ADMIN_CONFIG_URL = '/api/pleroma/admin/config'
 
 const oldfetch = window.fetch
 
@@ -1677,6 +1677,27 @@ const fetchInstanceDBConfig = ({ credentials }) => {
     })
 }
 
+const pushInstanceDBConfig = ({ credentials, payload }) => {
+  return fetch(PLEROMA_ADMIN_CONFIG_URL, {
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      ...authHeaders(credentials)
+    },
+    method: 'POST',
+    body: JSON.stringify(payload)
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
 const apiService = {
   verifyCredentials,
   fetchTimeline,
@@ -1791,7 +1812,8 @@ const apiService = {
   editAnnouncement,
   deleteAnnouncement,
   adminFetchAnnouncements,
-  fetchInstanceDBConfig
+  fetchInstanceDBConfig,
+  pushInstanceDBConfig
 }
 
 export default apiService
-- 
cgit v1.2.3-70-g09d2


From 27f63d5e50de0ccb005f8591baa9a117969fee56 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 17 Mar 2023 00:06:31 +0200
Subject: lint

---
 src/components/admin_modal/tabs/general_tab.js     |  2 +-
 .../settings_modal/helpers/draft_buttons.vue       | 36 +++++++++++-----------
 2 files changed, 19 insertions(+), 19 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/admin_modal/tabs/general_tab.js b/src/components/admin_modal/tabs/general_tab.js
index 8c166f19..68b0ac4b 100644
--- a/src/components/admin_modal/tabs/general_tab.js
+++ b/src/components/admin_modal/tabs/general_tab.js
@@ -15,7 +15,7 @@ const GeneralTab = {
   components: {
     BooleanSetting,
     ChoiceSetting,
-    IntegerSetting,
+    IntegerSetting
   },
   computed: {
     mergedConfig () {
diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
index 0d99da13..53ddc9b4 100644
--- a/src/components/settings_modal/helpers/draft_buttons.vue
+++ b/src/components/settings_modal/helpers/draft_buttons.vue
@@ -11,13 +11,13 @@
       <template #trigger>
         &nbsp;
         <button
-        v-if="$parent.isDirty"
-        class="button button-default btn"
-        type="button"
-        :title="$t('settings.commit_value')"
-        @click="$parent.commitDraft"
+          v-if="$parent.isDirty"
+          class="button button-default btn"
+          type="button"
+          :title="$t('settings.commit_value')"
+          @click="$parent.commitDraft"
         >
-        {{ $t('settings.commit_value') }}
+          {{ $t('settings.commit_value') }}
         </button>
       </template>
       <template #content>
@@ -33,13 +33,13 @@
       <template #trigger>
         &nbsp;
         <button
-        v-if="$parent.isDirty"
-        class="button button-default btn"
-        type="button"
-        :title="$t('settings.reset_value')"
-        @click="$parent.reset"
+          v-if="$parent.isDirty"
+          class="button button-default btn"
+          type="button"
+          :title="$t('settings.reset_value')"
+          @click="$parent.reset"
         >
-        {{ $t('settings.reset_value') }}
+          {{ $t('settings.reset_value') }}
         </button>
       </template>
       <template #content>
@@ -55,13 +55,13 @@
       <template #trigger>
         &nbsp;
         <button
-        v-if="$parent.canHardReset"
-        class="button button-default btn"
-        type="button"
-        :title="$t('settings.hard_reset_value')"
-        @click="$parent.hardReset"
+          v-if="$parent.canHardReset"
+          class="button button-default btn"
+          type="button"
+          :title="$t('settings.hard_reset_value')"
+          @click="$parent.hardReset"
         >
-        {{ $t('settings.hard_reset_value') }}
+          {{ $t('settings.hard_reset_value') }}
         </button>
       </template>
       <template #content>
-- 
cgit v1.2.3-70-g09d2


From 3403f6a1ed5388291244487ae7eb3190d7c4353e Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Fri, 17 Mar 2023 23:30:46 +0300
Subject: Allow custom emoji reactions: add option to scale reaction buttons

---
 src/components/emoji_reactions/emoji_reactions.vue | 27 ++++++++++++++--------
 src/components/settings_modal/tabs/general_tab.vue |  9 ++++++++
 src/i18n/en.json                                   |  1 +
 src/modules/config.js                              |  2 ++
 src/services/style_setter/style_setter.js          |  4 ++--
 5 files changed, 32 insertions(+), 11 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 12783114..eb46018e 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -12,20 +12,20 @@
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
         <span
-          v-if="reaction.url"
           class="reaction-emoji"
         >
           <img
+            v-if="reaction.url"
             :src="reaction.url"
             :title="reaction.name"
             class="reaction-emoji-content"
             width="1em"
           >
+          <span
+            v-else
+            class="reaction-emoji reaction-emoji-content"
+          >{{ reaction.name }}</span>
         </span>
-        <span
-          v-else
-          class="reaction-emoji reaction-emoji-content"
-        >{{ reaction.name }}</span>
         <span>{{ reaction.count }}</span>
       </button>
     </UserListPopover>
@@ -49,6 +49,8 @@
   margin-top: 0.25em;
   flex-wrap: wrap;
 
+  --emoji-size: calc(1.25em * var(--emojiReactionsScale, 1));
+
   .emoji-reaction {
     padding: 0 0.5em;
     margin-right: 0.5em;
@@ -59,17 +61,24 @@
     box-sizing: border-box;
 
     .reaction-emoji {
-      width: 1.25em;
-      height: 1.25em;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
       margin-right: 0.25em;
+      line-height: var(--emoji-size);
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .reaction-emoji-content {
-      max-width: 1.25em;
-      max-height: 1.25em;
+      max-width: 100%;
+      max-height: 100%;
       width: auto;
       height: auto;
+      line-height: inherit;
       overflow: hidden;
+      font-size: calc(var(--emoji-size) * 0.8);
+      margin: 0;
     }
 
     &:focus {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 65248ac1..17afc5ba 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -271,6 +271,15 @@
             {{ $t('settings.no_rich_text_description') }}
           </BooleanSetting>
         </li>
+        <li>
+          <IntegerSetting
+            v-if="user"
+            path="emojiReactionsScale"
+            expert="1"
+          >
+            {{ $t('settings.emoji_reactions_scale') }}
+          </IntegerSetting>
+        </li>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
           <BooleanSetting
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6c9bc8e2..10ba2ef8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -467,6 +467,7 @@
     "pad_emoji": "Pad emoji with spaces when adding from picker",
     "autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
     "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
+    "emoji_reactions_scale": "Reactions scale factor",
     "export_theme": "Save preset",
     "filtering": "Filtering",
     "wordfilter": "Wordfilter",
diff --git a/src/modules/config.js b/src/modules/config.js
index 3d9cf591..7597886e 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -97,6 +97,7 @@ export const defaultState = {
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
   notifsColumnWidth: '25rem',
+  emojiReactionsScale: 1.0,
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -185,6 +186,7 @@ const config = {
         case 'sidebarColumnWidth':
         case 'contentColumnWidth':
         case 'notifsColumnWidth':
+        case 'emojiReactionsScale':
           applyConfig(state)
           break
         case 'customTheme':
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index d6e973a1..43fe3c73 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -21,8 +21,8 @@ export const applyTheme = (input) => {
   body.classList.remove('hidden')
 }
 
-const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth }) =>
-  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth })
+const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>
+  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale })
 
 const defaultConfigColumns = configColumns(defaultState)
 
-- 
cgit v1.2.3-70-g09d2


From 493120b5456282756d05d9afaf66b11a2f87d8fc Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Sat, 18 Mar 2023 20:48:36 +0300
Subject: Generalize IntegerSetting into NumberSetting, add Integer/Float
 wrappers

---
 .../settings_modal/helpers/float_setting.vue       | 16 +++++++
 .../settings_modal/helpers/integer_setting.js      | 44 -----------------
 .../settings_modal/helpers/integer_setting.vue     | 36 +++++---------
 .../settings_modal/helpers/number_setting.js       | 56 ++++++++++++++++++++++
 .../settings_modal/helpers/number_setting.vue      | 27 +++++++++++
 src/components/settings_modal/tabs/general_tab.js  |  2 +
 src/components/settings_modal/tabs/general_tab.vue |  4 +-
 7 files changed, 116 insertions(+), 69 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/float_setting.vue
 delete mode 100644 src/components/settings_modal/helpers/integer_setting.js
 create mode 100644 src/components/settings_modal/helpers/number_setting.js
 create mode 100644 src/components/settings_modal/helpers/number_setting.vue

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/float_setting.vue b/src/components/settings_modal/helpers/float_setting.vue
new file mode 100644
index 00000000..15edb3c3
--- /dev/null
+++ b/src/components/settings_modal/helpers/float_setting.vue
@@ -0,0 +1,16 @@
+<template>
+  <NumberSetting
+    v-bind="$attrs"
+  >
+    <slot />
+  </NumberSetting>
+</template>
+
+<script>
+import NumberSetting from './number_setting.vue'
+export default {
+  components: {
+    NumberSetting
+  }
+}
+</script>
diff --git a/src/components/settings_modal/helpers/integer_setting.js b/src/components/settings_modal/helpers/integer_setting.js
deleted file mode 100644
index e64d0cee..00000000
--- a/src/components/settings_modal/helpers/integer_setting.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { get, set } from 'lodash'
-import ModifiedIndicator from './modified_indicator.vue'
-export default {
-  components: {
-    ModifiedIndicator
-  },
-  props: {
-    path: String,
-    disabled: Boolean,
-    min: Number,
-    expert: [Number, String]
-  },
-  computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
-    state () {
-      const value = get(this.$parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
-      }
-    },
-    defaultState () {
-      return get(this.$parent, this.pathDefault)
-    },
-    isChanged () {
-      return this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
-    }
-  },
-  methods: {
-    update (e) {
-      set(this.$parent, this.path, parseInt(e.target.value))
-    },
-    reset () {
-      set(this.$parent, this.path, this.defaultState)
-    }
-  }
-}
diff --git a/src/components/settings_modal/helpers/integer_setting.vue b/src/components/settings_modal/helpers/integer_setting.vue
index 695e2673..43fa7e1a 100644
--- a/src/components/settings_modal/helpers/integer_setting.vue
+++ b/src/components/settings_modal/helpers/integer_setting.vue
@@ -1,27 +1,17 @@
 <template>
-  <span
-    v-if="matchesExpertLevel"
-    class="IntegerSetting"
+  <NumberSetting
+    v-bind="$attrs"
+    truncate="1"
   >
-    <label :for="path">
-      <slot />
-    </label>
-    <input
-      :id="path"
-      class="number-input"
-      type="number"
-      step="1"
-      :disabled="disabled"
-      :min="min || 0"
-      :value="state"
-      @change="update"
-    >
-    {{ ' ' }}
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-  </span>
+    <slot />
+  </NumberSetting>
 </template>
 
-<script src="./integer_setting.js"></script>
+<script>
+import NumberSetting from './number_setting.vue'
+export default {
+  components: {
+    NumberSetting
+  }
+}
+</script>
diff --git a/src/components/settings_modal/helpers/number_setting.js b/src/components/settings_modal/helpers/number_setting.js
new file mode 100644
index 00000000..73c39948
--- /dev/null
+++ b/src/components/settings_modal/helpers/number_setting.js
@@ -0,0 +1,56 @@
+import { get, set } from 'lodash'
+import ModifiedIndicator from './modified_indicator.vue'
+export default {
+  components: {
+    ModifiedIndicator
+  },
+  props: {
+    path: String,
+    disabled: Boolean,
+    min: Number,
+    step: Number,
+    truncate: Number,
+    expert: [Number, String]
+  },
+  computed: {
+    pathDefault () {
+      const [firstSegment, ...rest] = this.path.split('.')
+      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    },
+    parent () {
+      return this.$parent.$parent
+    },
+    state () {
+      const value = get(this.parent, this.path)
+      if (value === undefined) {
+        return this.defaultState
+      } else {
+        return value
+      }
+    },
+    defaultState () {
+      return get(this.parent, this.pathDefault)
+    },
+    isChanged () {
+      return this.state !== this.defaultState
+    },
+    matchesExpertLevel () {
+      return (this.expert || 0) <= this.parent.expertLevel
+    }
+  },
+  methods: {
+    truncateValue (value) {
+      if (!this.truncate) {
+        return value
+      }
+
+      return Math.trunc(value / this.truncate) * this.truncate
+    },
+    update (e) {
+      set(this.parent, this.path, this.truncateValue(parseFloat(e.target.value)))
+    },
+    reset () {
+      set(this.parent, this.path, this.defaultState)
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
new file mode 100644
index 00000000..3eab5178
--- /dev/null
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -0,0 +1,27 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="NumberSetting"
+  >
+    <label :for="path">
+      <slot />
+    </label>
+    <input
+      :id="path"
+      class="number-input"
+      type="number"
+      :step="step || 1"
+      :disabled="disabled"
+      :min="min || 0"
+      :value="state"
+      @change="update"
+    >
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+  </span>
+</template>
+
+<script src="./number_setting.js"></script>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index ea24d6ad..be97710f 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -2,6 +2,7 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
+import FloatSetting from '../helpers/float_setting.vue'
 import SizeSetting, { defaultHorizontalUnits } from '../helpers/size_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
@@ -62,6 +63,7 @@ const GeneralTab = {
     BooleanSetting,
     ChoiceSetting,
     IntegerSetting,
+    FloatSetting,
     SizeSetting,
     InterfaceLanguageSwitcher,
     ScopeSelector,
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 17afc5ba..21e2d855 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -272,13 +272,13 @@
           </BooleanSetting>
         </li>
         <li>
-          <IntegerSetting
+          <FloatSetting
             v-if="user"
             path="emojiReactionsScale"
             expert="1"
           >
             {{ $t('settings.emoji_reactions_scale') }}
-          </IntegerSetting>
+          </FloatSetting>
         </li>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
-- 
cgit v1.2.3-70-g09d2


From 332ad77e3579d2b512ba236b3f2c94ad8875864d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 19 Mar 2023 21:27:07 +0200
Subject: limits tab, backend descriptions

---
 .../settings_modal/admin_tabs/instance_tab.vue     | 103 +++++++++++---
 .../settings_modal/admin_tabs/limits_tab.js        |  29 ++++
 .../settings_modal/admin_tabs/limits_tab.vue       | 152 +++++++++++++++++++++
 .../settings_modal/helpers/boolean_setting.vue     |  13 +-
 .../settings_modal/helpers/integer_setting.vue     |  13 +-
 src/components/settings_modal/helpers/setting.js   |  10 ++
 .../settings_modal/helpers/string_setting.vue      |  13 +-
 src/components/settings_modal/settings_modal.scss  |   6 +
 .../settings_modal/settings_modal_admin_content.js |   4 +-
 .../settings_modal_admin_content.vue               |   9 +-
 src/modules/adminSettings.js                       |  24 +++-
 src/modules/users.js                               |   2 +
 src/services/api/api.service.js                    |  17 +++
 13 files changed, 370 insertions(+), 25 deletions(-)
 create mode 100644 src/components/settings_modal/admin_tabs/limits_tab.js
 create mode 100644 src/components/settings_modal/admin_tabs/limits_tab.vue

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index 18ba6127..ad271293 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -12,6 +12,15 @@
             NAME
           </StringSetting>
         </li>
+        <li>
+          <StringSetting
+            source="admin"
+            path=":pleroma.:instance.:email"
+            draft-mode
+          >
+            ADMIN EMAIL
+          </StringSetting>
+        </li>
         <li>
           <StringSetting
             source="admin"
@@ -22,13 +31,85 @@
           </StringSetting>
         </li>
         <li>
-          <IntegerSetting
+          <StringSetting
             source="admin"
-            path=":pleroma.:instance.:limit"
+            path=":pleroma.:instance.:short_description"
             draft-mode
           >
-            POST LIMIT
-          </IntegerSetting>
+            SHORT DESCRIPTION
+          </StringSetting>
+        </li>
+        <li>
+          <StringSetting
+            source="admin"
+            path=":pleroma.:instance.:instance_thumbnail"
+            draft-mode
+          >
+            INSTANCE THUMBNAIL
+          </StringSetting>
+        </li>
+        <li>
+          <StringSetting
+            source="admin"
+            path=":pleroma.:instance.:background_image"
+            draft-mode
+          >
+            BACKGROUND IMAGE
+          </StringSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            source="admin"
+            path=":pleroma.:instance.:public"
+            draft-mode
+          >
+            PUBLIC
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.registrations') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting
+            source="admin"
+            path=":pleroma.:instance.:registrations_open"
+            draft-mode
+          >
+            REGISTRATIONS OPEN
+          </BooleanSetting>
+          <ul class="setting-list suboptions">
+            <li>
+              <BooleanSetting
+                source="admin"
+                path=":pleroma.:instance.:invites_enabled"
+                parent-path=":pleroma.:instance.:registrations_open"
+                :parent-invert="true"
+                draft-mode
+              >
+                INVITES ENABLED
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting
+            source="admin"
+            path=":pleroma.:instance.:account_activation_required"
+            draft-mode
+          >
+            ACTIVATION REQUIRED
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            source="admin"
+            path=":pleroma.:instance.:account_approval_required"
+            draft-mode
+          >
+            APPROVAL REQUIRED
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -36,17 +117,3 @@
 </template>
 
 <script src="./instance_tab.js"></script>
-
-<style lang="scss">
-.column-settings {
-  display: flex;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
-}
-
-.column-settings .size-label {
-  display: block;
-  margin-bottom: 0.5em;
-  margin-top: 0.5em;
-}
-</style>
diff --git a/src/components/settings_modal/admin_tabs/limits_tab.js b/src/components/settings_modal/admin_tabs/limits_tab.js
new file mode 100644
index 00000000..684739c3
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/limits_tab.js
@@ -0,0 +1,29 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faGlobe
+)
+
+const LimitsTab = {
+  data () {},
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting
+  },
+  computed: {
+    ...SharedComputedObject()
+  }
+}
+
+export default LimitsTab
diff --git a/src/components/settings_modal/admin_tabs/limits_tab.vue b/src/components/settings_modal/admin_tabs/limits_tab.vue
new file mode 100644
index 00000000..3f07c554
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/limits_tab.vue
@@ -0,0 +1,152 @@
+<template>
+  <div :label="$t('admin_dash.instance')">
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.arbitrary_limits') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <h3>{{ $t('admin_dash.limits.posts') }}</h3>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:limit"
+            draft-mode
+          >
+            POST LIMIT
+          </IntegerSetting>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:remote_limit"
+            draft-mode
+          >
+            POST LIMIT (remote)
+          </IntegerSetting>
+        </li>
+        <li>
+          <h3>{{ $t('admin_dash.limits.uploads') }}</h3>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:description_limit"
+            draft-mode
+          >
+            IMAGE DESCRIPTION LIMIT
+          </IntegerSetting>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:upload_limit"
+            draft-mode
+          >
+            UPLOAD LIMIT KiB
+          </IntegerSetting>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:max_media_attachments"
+            draft-mode
+          >
+            MAX ATTACHMENTS
+          </IntegerSetting>
+        </li>
+        <li>
+          <h3>{{ $t('admin_dash.limits.users') }}</h3>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:user_bio_length"
+            draft-mode
+          >
+            BIO LENGTH
+          </IntegerSetting>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:user_name_length"
+            draft-mode
+          >
+            NAME LENGTH
+          </IntegerSetting>
+        </li>
+        <li>
+          <h4>{{ $t('admin_dash.limits.profile_fields') }}</h4>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:max_account_fields"
+            draft-mode
+          >
+            MAX ACCOUNT FIELDS
+          </IntegerSetting>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:max_remote_account_fields"
+            draft-mode
+          >
+            MAX ACCOUNT FIELDS (remote)
+          </IntegerSetting>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:account_field_name_length"
+            draft-mode
+          >
+            MAX ACCOUNT FIELD NAME
+          </IntegerSetting>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:account_field_value_length"
+            draft-mode
+          >
+            MAX ACCOUNT VALUE NAME
+          </IntegerSetting>
+        </li>
+        <li>
+          <h4>{{ $t('admin_dash.limits.user_uploads') }}</h4>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:avatar_upload_limit"
+            draft-mode
+          >
+            MAX AVATAR SIZE KiB
+          </IntegerSetting>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:banner_upload_limit"
+            draft-mode
+          >
+            MAX BANNER SIZE KiB
+          </IntegerSetting>
+        </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:max_pinned_statuses"
+            draft-mode
+          >
+            MAX PINNED POSTS
+          </IntegerSetting>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./limits_tab.js"></script>
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 7e05fe85..aedbf23e 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -12,7 +12,12 @@
         v-if="!!$slots.default"
         class="label"
       >
-        <slot />
+        <template v-if="backendDescription">
+          {{ backendDescriptionLabel + ' ' }}
+        </template>
+        <template v-else>
+          <slot />
+        </template>
       </span>
       {{ ' ' }}
       <ModifiedIndicator
@@ -21,6 +26,12 @@
       />
       <ProfileSettingIndicator :is-profile="isProfileSetting" />
       <DraftButtons />
+      <p
+        v-if="backendDescriptionDescription"
+        class="setting-description"
+      >
+        {{ backendDescriptionDescription + ' ' }}
+      </p>
     </Checkbox>
   </label>
 </template>
diff --git a/src/components/settings_modal/helpers/integer_setting.vue b/src/components/settings_modal/helpers/integer_setting.vue
index e900b87c..e935dfb0 100644
--- a/src/components/settings_modal/helpers/integer_setting.vue
+++ b/src/components/settings_modal/helpers/integer_setting.vue
@@ -4,7 +4,12 @@
     class="IntegerSetting"
   >
     <label :for="path">
-      <slot />
+      <template v-if="backendDescription">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else>
+        <slot />
+      </template>
     </label>
     <input
       :id="path"
@@ -23,6 +28,12 @@
     />
     <ProfileSettingIndicator :is-profile="isProfileSetting" />
     <DraftButtons />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
   </span>
 </template>
 
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index 0971b919..f270216f 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -59,6 +59,16 @@ export default {
         return value
       }
     },
+    backendDescription () {
+      console.log(get(this.$store.state.adminSettings.descriptions, this.path))
+      return get(this.$store.state.adminSettings.descriptions, this.path)
+    },
+    backendDescriptionLabel () {
+      return this.backendDescription.label
+    },
+    backendDescriptionDescription () {
+      return this.backendDescription.description
+    },
     shouldBeDisabled () {
       const parentValue = this.parentPath !== undefined ? get(this.configSource, this.parentPath) : null
       return this.disabled || (parentValue !== null ? (this.parentInvert ? parentValue : !parentValue) : false)
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index 0a71aeab..91a4afa4 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -4,7 +4,12 @@
     class="StringSetting"
   >
     <label :for="path">
-      <slot />
+      <template v-if="backendDescription">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else>
+        <slot />
+      </template>
     </label>
     <input
       :id="path"
@@ -21,6 +26,12 @@
     />
     <ProfileSettingIndicator :is-profile="isProfileSetting" />
     <DraftButtons />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
   </label>
 </template>
 
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index f5861229..4cce6099 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -17,6 +17,12 @@
     }
   }
 
+  .setting-description {
+    margin-top: 0.2em;
+    margin-bottom: 2em;
+    font-size: 70%;
+  }
+
   .settings-modal-panel {
     overflow: hidden;
     transition: transform;
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
index 88ba1755..c6c8837f 100644
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -3,6 +3,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import DataImportExportTab from './tabs/data_import_export_tab.vue'
 import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
 import InstanceTab from './admin_tabs/instance_tab.vue'
+import LimitsTab from './admin_tabs/limits_tab.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -33,7 +34,8 @@ const SettingsModalAdminContent = {
 
     DataImportExportTab,
     MutesAndBlocksTab,
-    InstanceTab
+    InstanceTab,
+    LimitsTab
   },
   computed: {
     isLoggedIn () {
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
index 9873b127..16b55828 100644
--- a/src/components/settings_modal/settings_modal_admin_content.vue
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -7,12 +7,19 @@
     :body-scroll-lock="bodyLock"
   >
     <div
-      :label="$t('settings.general')"
+      :label="$t('admin_dash.instance')"
       icon="wrench"
       data-tab-name="general"
     >
       <InstanceTab />
     </div>
+    <div
+      :label="$t('admin_dash.limits')"
+      icon="wrench"
+      data-tab-name="limits"
+    >
+      <LimitsTab />
+    </div>
   </tab-switcher>
 </template>
 
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index d1df67d4..44a4d409 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -3,7 +3,8 @@ import { set, cloneDeep } from 'lodash'
 export const defaultState = {
   needsReboot: null,
   config: null,
-  modifiedPaths: null
+  modifiedPaths: null,
+  descriptions: null
 }
 
 export const newUserFlags = {
@@ -18,6 +19,9 @@ const adminSettingsStorage = {
     updateAdminSettings (state, { config, modifiedPaths }) {
       state.config = config
       state.modifiedPaths = modifiedPaths
+    },
+    updateAdminDescriptions (state, { descriptions }) {
+      state.descriptions = descriptions
     }
   },
   actions: {
@@ -40,8 +44,25 @@ const adminSettingsStorage = {
         }
         set(config, path, convert(c.value))
       })
+      console.log(config[':pleroma'][':welcome'])
       commit('updateAdminSettings', { config, modifiedPaths })
     },
+    setInstanceAdminDescriptions ({ state, commit, dispatch }, { backendDescriptions }) {
+      const convert = ({ children, description, label, key = '<ROOT>', group, suggestions }, path, acc) => {
+        const newPath = group ? group + '.' + key : key
+        const obj = { description, label, suggestions }
+        if (Array.isArray(children)) {
+          children.forEach(c => {
+            convert(c, '.' + newPath, obj)
+          })
+        }
+        set(acc, newPath, obj)
+      }
+
+      const descriptions = {}
+      backendDescriptions.forEach(d => convert(d, '', descriptions))
+      commit('updateAdminDescriptions', { descriptions })
+    },
     pushAdminSetting ({ rootState, state, commit, dispatch }, { path, value }) {
       const [group, key, ...rest] = path.split(/\./g)
       const clone = {} // not actually cloning the entire thing to avoid excessive writes
@@ -71,7 +92,6 @@ const adminSettingsStorage = {
         .then(backendDbConfig => dispatch('setInstanceAdminSettings', { backendDbConfig }))
     },
     resetAdminSetting ({ rootState, state, commit, dispatch }, { path }) {
-      console.log('ASS')
       const [group, key, subkey] = path.split(/\./g)
 
       state.modifiedPaths.delete(path)
diff --git a/src/modules/users.js b/src/modules/users.js
index 12e582f4..45cba334 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -567,6 +567,8 @@ const users = {
               if (user.rights.admin) {
                 store.rootState.api.backendInteractor.fetchInstanceDBConfig()
                   .then(backendDbConfig => dispatch('setInstanceAdminSettings', { backendDbConfig }))
+                store.rootState.api.backendInteractor.fetchInstanceConfigDescriptions()
+                  .then(backendDescriptions => dispatch('setInstanceAdminDescriptions', { backendDescriptions }))
               }
               commit('addNewUsers', [user])
 
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 71ba1dec..073f40a3 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -109,6 +109,7 @@ const PLEROMA_EDIT_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements
 const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 
 const PLEROMA_ADMIN_CONFIG_URL = '/api/pleroma/admin/config'
+const PLEROMA_ADMIN_DESCRIPTIONS_URL = '/api/pleroma/admin/config/descriptions'
 
 const oldfetch = window.fetch
 
@@ -1677,6 +1678,21 @@ const fetchInstanceDBConfig = ({ credentials }) => {
     })
 }
 
+const fetchInstanceConfigDescriptions = ({ credentials }) => {
+  return fetch(PLEROMA_ADMIN_DESCRIPTIONS_URL, {
+    headers: authHeaders(credentials)
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
 const pushInstanceDBConfig = ({ credentials, payload }) => {
   return fetch(PLEROMA_ADMIN_CONFIG_URL, {
     headers: {
@@ -1813,6 +1829,7 @@ const apiService = {
   deleteAnnouncement,
   adminFetchAnnouncements,
   fetchInstanceDBConfig,
+  fetchInstanceConfigDescriptions,
   pushInstanceDBConfig
 }
 
-- 
cgit v1.2.3-70-g09d2


From 0b5e536b4c96a81ec78f323be9bece6deae61773 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 20 Mar 2023 23:36:47 +0200
Subject: ChoiceSetting support added, added captcha settings

---
 .../settings_modal/admin_tabs/instance_tab.vue     | 51 ++++++++++++++++++++++
 .../settings_modal/helpers/choice_setting.js       | 27 +++++++++++-
 .../settings_modal/helpers/choice_setting.vue      | 18 ++++++--
 .../settings_modal/helpers/number_setting.vue      | 15 ++++++-
 src/components/settings_modal/helpers/setting.js   |  7 ++-
 .../helpers/shared_computed_object.js              |  3 ++
 src/modules/adminSettings.js                       | 13 +++---
 7 files changed, 121 insertions(+), 13 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index ad271293..ff784287 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -111,6 +111,57 @@
             APPROVAL REQUIRED
           </BooleanSetting>
         </li>
+        <li>
+          <h3>{{ $t('admin_dash.captcha.header') }}</h3>
+        </li>
+        <li>
+          <BooleanSetting
+            source="admin"
+            :path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+            draft-mode
+          >
+            CAPTCHA
+          </BooleanSetting>
+          <ul class="setting-list suboptions">
+            <li>
+              <ChoiceSetting
+                source="admin"
+                :path="[':pleroma', 'Pleroma.Captcha', ':method']"
+                :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+                :option-label-map="{
+                  'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
+                  'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
+                }"
+                draft-mode
+              >
+                CAPTCHA TYPE
+              </ChoiceSetting>
+              <IntegerSetting
+                source="admin"
+                :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
+                :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+                draft-mode
+              >
+                VALID
+              </IntegerSetting>
+            </li>
+          </ul>
+          <ul
+            v-if="adminConfig[':pleroma']['Pleroma.Captcha'][':enabled'] && adminConfig[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
+            class="setting-list suboptions"
+          >
+            <h4>{{ $t('admin_dash.kocaptcha') }}</h4>
+            <li>
+              <StringSetting
+                source="admin"
+                :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']"
+                draft-mode
+              >
+                cockAPTCHA ENDPOINT
+              </StringSetting>
+            </li>
+          </ul>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js
index a3c3bf44..3ff81bc9 100644
--- a/src/components/settings_modal/helpers/choice_setting.js
+++ b/src/components/settings_modal/helpers/choice_setting.js
@@ -11,7 +11,32 @@ export default {
     ...Setting.props,
     options: {
       type: Array,
-      required: true
+      required: false
+    },
+    optionLabelMap: {
+      type: Object,
+      required: false,
+      default: {}
+    }
+  },
+  computed: {
+    ...Setting.computed,
+    realOptions () {
+      if (this.source === 'admin') {
+        console.log(this.backendDescriptionSuggestions)
+        return this.backendDescriptionSuggestions.map(x => ({
+          key: x,
+          value: x,
+          label: this.optionLabelMap[x] || x
+        }))
+      }
+      return this.options
+    }
+  },
+  methods: {
+    ...Setting.methods,
+    getValue (e) {
+      return e
     }
   }
 }
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
index 4c4cdefe..55f9a62c 100644
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -3,15 +3,20 @@
     v-if="matchesExpertLevel"
     class="ChoiceSetting"
   >
-    <slot />
+    <template v-if="backendDescription">
+      {{ backendDescriptionLabel }}
+    </template>
+    <template v-else>
+      <slot />
+    </template>
     {{ ' ' }}
     <Select
-      :model-value="state"
+      :model-value="draftMode ? draft :state"
       :disabled="disabled"
       @update:modelValue="update"
     >
       <option
-        v-for="option in options"
+        v-for="option in realOptions"
         :key="option.key"
         :value="option.value"
       >
@@ -24,6 +29,13 @@
       :onclick="reset"
     />
     <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
   </label>
 </template>
 
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index 81335762..93a7a79a 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -4,7 +4,12 @@
     class="NumberSetting"
   >
     <label :for="path">
-      <slot />
+      <template v-if="backendDescription">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else>
+        <slot />
+      </template>
     </label>
     <input
       :id="path"
@@ -21,6 +26,14 @@
       :changed="isChanged"
       :onclick="reset"
     />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
   </span>
 </template>
 
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index 8c7074a5..a6d35fb9 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -13,7 +13,7 @@ export default {
   },
   props: {
     path: {
-      type: String,
+      type: [String, Array],
       required: true
     },
     disabled: {
@@ -21,7 +21,7 @@ export default {
       default: false
     },
     parentPath: {
-      type: String
+      type: [String, Array]
     },
     parentInvert: {
       type: Boolean,
@@ -68,6 +68,9 @@ export default {
     backendDescriptionDescription () {
       return this.backendDescription?.description
     },
+    backendDescriptionSuggestions () {
+      return this.backendDescription?.suggestions
+    },
     shouldBeDisabled () {
       const parentValue = this.parentPath !== undefined ? get(this.configSource, this.parentPath) : null
       return this.disabled || (parentValue !== null ? (this.parentInvert ? parentValue : !parentValue) : false)
diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index 912999ce..d02db542 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -7,6 +7,9 @@ const SharedComputedObject = () => ({
   },
   mergedConfig () {
     return this.$store.getters.mergedConfig
+  },
+  adminConfig () {
+    return this.$store.state.adminSettings.config
   }
 })
 
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index 44a4d409..a84fadbf 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -29,7 +29,7 @@ const adminSettingsStorage = {
       const config = state.config || {}
       const modifiedPaths = state.modifiedPaths || new Set()
       backendDbConfig.configs.forEach(c => {
-        const path = c.group + '.' + c.key
+        const path = [c.group, c.key]
         if (c.db) {
           c.db.forEach(x => modifiedPaths.add(path + '.' + x))
         }
@@ -44,16 +44,16 @@ const adminSettingsStorage = {
         }
         set(config, path, convert(c.value))
       })
-      console.log(config[':pleroma'][':welcome'])
+      console.log(config[':pleroma'])
       commit('updateAdminSettings', { config, modifiedPaths })
     },
     setInstanceAdminDescriptions ({ state, commit, dispatch }, { backendDescriptions }) {
       const convert = ({ children, description, label, key = '<ROOT>', group, suggestions }, path, acc) => {
-        const newPath = group ? group + '.' + key : key
+        const newPath = group ? [group, key] : [key]
         const obj = { description, label, suggestions }
         if (Array.isArray(children)) {
           children.forEach(c => {
-            convert(c, '.' + newPath, obj)
+            convert(c, newPath, obj)
           })
         }
         set(acc, newPath, obj)
@@ -61,12 +61,13 @@ const adminSettingsStorage = {
 
       const descriptions = {}
       backendDescriptions.forEach(d => convert(d, '', descriptions))
+      console.log(descriptions[':pleroma']['Pleroma.Captcha'])
       commit('updateAdminDescriptions', { descriptions })
     },
     pushAdminSetting ({ rootState, state, commit, dispatch }, { path, value }) {
-      const [group, key, ...rest] = path.split(/\./g)
+      const [group, key, ...rest] = Array.isArray(path) ? path : path.split(/\./g)
       const clone = {} // not actually cloning the entire thing to avoid excessive writes
-      set(clone, rest.join('.'), value)
+      set(clone, rest, value)
 
       // TODO cleanup paths in modifiedPaths
       const convert = (value) => {
-- 
cgit v1.2.3-70-g09d2


From 9a97e0d196c879e41dcb8bda8bd8128a039bacdc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 21 Mar 2023 10:26:25 +0200
Subject: modal update, initial localization

---
 .../settings_modal/admin_tabs/instance_tab.vue     | 10 ++++----
 .../settings_modal/admin_tabs/limits_tab.vue       | 24 ++++++++++---------
 src/components/settings_modal/settings_modal.vue   | 15 +++++++++++-
 .../settings_modal/settings_modal_admin_content.js |  4 ++--
 .../settings_modal_admin_content.vue               |  6 ++---
 src/i18n/en.json                                   | 27 ++++++++++++++++++++++
 6 files changed, 64 insertions(+), 22 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index ff784287..411982cc 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -1,7 +1,7 @@
 <template>
-  <div :label="$t('admin_dash.instance')">
+  <div :label="$t('admin_dash.tabs.instance')">
     <div class="setting-item">
-      <h2>{{ $t('admin_dash.instance') }}</h2>
+      <h2>{{ $t('admin_dash.instance.instance') }}</h2>
       <ul class="setting-list">
         <li>
           <StringSetting
@@ -69,7 +69,7 @@
       </ul>
     </div>
     <div class="setting-item">
-      <h2>{{ $t('admin_dash.registrations') }}</h2>
+      <h2>{{ $t('admin_dash.instance.registrations') }}</h2>
       <ul class="setting-list">
         <li>
           <BooleanSetting
@@ -112,7 +112,7 @@
           </BooleanSetting>
         </li>
         <li>
-          <h3>{{ $t('admin_dash.captcha.header') }}</h3>
+          <h3>{{ $t('admin_dash.instance.captcha_header') }}</h3>
         </li>
         <li>
           <BooleanSetting
@@ -150,7 +150,7 @@
             v-if="adminConfig[':pleroma']['Pleroma.Captcha'][':enabled'] && adminConfig[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
             class="setting-list suboptions"
           >
-            <h4>{{ $t('admin_dash.kocaptcha') }}</h4>
+            <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
             <li>
               <StringSetting
                 source="admin"
diff --git a/src/components/settings_modal/admin_tabs/limits_tab.vue b/src/components/settings_modal/admin_tabs/limits_tab.vue
index 3f07c554..f7a70c97 100644
--- a/src/components/settings_modal/admin_tabs/limits_tab.vue
+++ b/src/components/settings_modal/admin_tabs/limits_tab.vue
@@ -1,7 +1,7 @@
 <template>
-  <div :label="$t('admin_dash.instance')">
+  <div :label="$t('admin_dash.tabs.limits')">
     <div class="setting-item">
-      <h2>{{ $t('admin_dash.arbitrary_limits') }}</h2>
+      <h2>{{ $t('admin_dash.limits.arbitrary_limits') }}</h2>
       <ul class="setting-list">
         <li>
           <h3>{{ $t('admin_dash.limits.posts') }}</h3>
@@ -19,6 +19,7 @@
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:remote_limit"
+            expert="1"
             draft-mode
           >
             POST LIMIT (remote)
@@ -57,6 +58,15 @@
         <li>
           <h3>{{ $t('admin_dash.limits.users') }}</h3>
         </li>
+        <li>
+          <IntegerSetting
+            source="admin"
+            path=":pleroma.:instance.:max_pinned_statuses"
+            draft-mode
+          >
+            MAX PINNED POSTS
+          </IntegerSetting>
+        </li>
         <li>
           <IntegerSetting
             source="admin"
@@ -92,6 +102,7 @@
             source="admin"
             path=":pleroma.:instance.:max_remote_account_fields"
             draft-mode
+            expert="1"
           >
             MAX ACCOUNT FIELDS (remote)
           </IntegerSetting>
@@ -135,15 +146,6 @@
             MAX BANNER SIZE KiB
           </IntegerSetting>
         </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:max_pinned_statuses"
-            draft-mode
-          >
-            MAX PINNED POSTS
-          </IntegerSetting>
-        </li>
       </ul>
     </div>
   </div>
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 73e1524a..303050e4 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -8,7 +8,7 @@
     <div class="settings-modal-panel panel">
       <div class="panel-heading">
         <span class="title">
-          {{ $t('settings.settings') }}
+          {{ modalMode === 'user' ? $t('settings.settings') : $t('admin_dash.window_title') }}
         </span>
         <transition name="fade">
           <div
@@ -47,6 +47,7 @@
       </div>
       <div class="panel-footer settings-footer">
         <Popover
+          v-if="modalMode === 'user'"
           class="export"
           trigger="click"
           placement="top"
@@ -108,6 +109,18 @@
         >
           {{ $t("settings.expert_mode") }}
         </Checkbox>
+        <span v-if="modalMode === 'admin'">
+          <i18n-t keypath="admin_dash.wip_notice">
+            <template #adminFeLink>
+              <a
+                href="/pleroma/admin/#/login-pleroma"
+                target="_blank"
+              >
+                {{ $t("admin_dash.old_ui_link") }}
+              </a>
+            </template>
+          </i18n-t>
+        </span>
         <span
           id="unscrolled-content"
           class="extra-content"
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
index c6c8837f..07d4cf2e 100644
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -8,7 +8,7 @@ import LimitsTab from './admin_tabs/limits_tab.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faWrench,
-  faUser,
+  faHand,
   faFilter,
   faPaintBrush,
   faBell,
@@ -19,7 +19,7 @@ import {
 
 library.add(
   faWrench,
-  faUser,
+  faHand,
   faFilter,
   faPaintBrush,
   faBell,
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
index 16b55828..52c6ddf5 100644
--- a/src/components/settings_modal/settings_modal_admin_content.vue
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -7,15 +7,15 @@
     :body-scroll-lock="bodyLock"
   >
     <div
-      :label="$t('admin_dash.instance')"
+      :label="$t('admin_dash.tabs.instance')"
       icon="wrench"
       data-tab-name="general"
     >
       <InstanceTab />
     </div>
     <div
-      :label="$t('admin_dash.limits')"
-      icon="wrench"
+      :label="$t('admin_dash.tabs.limits')"
+      icon="hand"
       data-tab-name="limits"
     >
       <LimitsTab />
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 10ba2ef8..8e36a7b8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -832,6 +832,33 @@
       "frontend_version": "Frontend version"
     }
   },
+  "admin_dash": {
+    "window_title": "Administration",
+    "wip_notice": "This admin dashboard is experimental and WIP, {adminFeLink}.",
+    "old_ui_link": "old admin UI available here",
+    "tabs": {
+      "instance": "Instance",
+      "limits": "Limits"
+    },
+    "captcha": {
+      "native": "Native",
+      "kocaptcha": "KoCaptcha"
+    },
+    "instance": {
+      "instance": "Instance information",
+      "registrations": "User sign-ups",
+      "captcha_header": "CAPTCHA",
+      "kocaptcha": "KoCaptcha settings"
+    },
+    "limits": {
+      "arbitrary_limits": "Arbitrary limits",
+      "posts": "Post limits",
+      "uploads": "Attachments limits",
+      "users": "User profile limits",
+      "profile_fields": "Profile fields limits",
+      "user_uploads": "Profile media limits"
+    }
+  },
   "time": {
     "unit": {
       "days": "{0} day | {0} days",
-- 
cgit v1.2.3-70-g09d2


From 6b40fc989575fd52b3b9bf3e8d78d7fb4a6c7696 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 21 Mar 2023 22:26:11 +0200
Subject: fixes

---
 .../settings_modal/admin_tabs/instance_tab.js      |  1 -
 .../settings_modal/helpers/boolean_setting.vue     | 27 +++++++++++-----------
 .../settings_modal/helpers/draft_buttons.vue       |  4 ++--
 src/components/settings_modal/helpers/setting.js   |  2 --
 4 files changed, 15 insertions(+), 19 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.js b/src/components/settings_modal/admin_tabs/instance_tab.js
index 4a261659..77a05d38 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.js
+++ b/src/components/settings_modal/admin_tabs/instance_tab.js
@@ -14,7 +14,6 @@ library.add(
 )
 
 const InstanceTab = {
-  data () {},
   components: {
     BooleanSetting,
     ChoiceSetting,
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index aedbf23e..07971b00 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -13,26 +13,25 @@
         class="label"
       >
         <template v-if="backendDescription">
-          {{ backendDescriptionLabel + ' ' }}
+          {{ backendDescriptionLabel }}
         </template>
         <template v-else>
           <slot />
         </template>
       </span>
-      {{ ' ' }}
-      <ModifiedIndicator
-        :changed="isChanged"
-        :onclick="reset"
-      />
-      <ProfileSettingIndicator :is-profile="isProfileSetting" />
-      <DraftButtons />
-      <p
-        v-if="backendDescriptionDescription"
-        class="setting-description"
-      >
-        {{ backendDescriptionDescription + ' ' }}
-      </p>
     </Checkbox>
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
   </label>
 </template>
 
diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
index 53ddc9b4..9e972b14 100644
--- a/src/components/settings_modal/helpers/draft_buttons.vue
+++ b/src/components/settings_modal/helpers/draft_buttons.vue
@@ -5,13 +5,13 @@
     class="DraftButtons"
   >
     <Popover
+      v-if="$parent.isDirty"
       trigger="hover"
       :trigger-attrs="{ 'aria-label': $t('settings.commit_value_tooltip') }"
     >
       <template #trigger>
         &nbsp;
         <button
-          v-if="$parent.isDirty"
           class="button button-default btn"
           type="button"
           :title="$t('settings.commit_value')"
@@ -27,13 +27,13 @@
       </template>
     </Popover>
     <Popover
+      v-if="$parent.isDirty"
       trigger="hover"
       :trigger-attrs="{ 'aria-label': $t('settings.reset_value_tooltip') }"
     >
       <template #trigger>
         &nbsp;
         <button
-          v-if="$parent.isDirty"
           class="button button-default btn"
           type="button"
           :title="$t('settings.reset_value')"
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index a6d35fb9..fd730db9 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -1,4 +1,3 @@
-import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ModifiedIndicator from './modified_indicator.vue'
 import ProfileSettingIndicator from './profile_setting_indicator.vue'
 import DraftButtons from './draft_buttons.vue'
@@ -6,7 +5,6 @@ import { get, set } from 'lodash'
 
 export default {
   components: {
-    Checkbox,
     ModifiedIndicator,
     DraftButtons,
     ProfileSettingIndicator
-- 
cgit v1.2.3-70-g09d2


From 2bf224e214d9b42333a2139a89c089ca9a544149 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 21 Mar 2023 22:46:40 +0200
Subject: made draft-mode and source inject-able

---
 .../settings_modal/admin_tabs/instance_tab.js      |  6 ++
 .../settings_modal/admin_tabs/instance_tab.vue     | 78 ++++------------------
 .../settings_modal/helpers/choice_setting.js       |  3 +-
 .../settings_modal/helpers/choice_setting.vue      |  2 +-
 .../settings_modal/helpers/number_setting.vue      |  2 +-
 src/components/settings_modal/helpers/setting.js   | 41 ++++++++----
 .../settings_modal/helpers/string_setting.vue      |  2 +-
 7 files changed, 50 insertions(+), 84 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.js b/src/components/settings_modal/admin_tabs/instance_tab.js
index 77a05d38..7aaedbce 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.js
+++ b/src/components/settings_modal/admin_tabs/instance_tab.js
@@ -14,6 +14,12 @@ library.add(
 )
 
 const InstanceTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
   components: {
     BooleanSetting,
     ChoiceSetting,
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index 411982cc..43ad4c8c 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -4,65 +4,37 @@
       <h2>{{ $t('admin_dash.instance.instance') }}</h2>
       <ul class="setting-list">
         <li>
-          <StringSetting
-            source="admin"
-            path=":pleroma.:instance.:name"
-            draft-mode
-          >
+          <StringSetting path=":pleroma.:instance.:name">
             NAME
           </StringSetting>
         </li>
         <li>
-          <StringSetting
-            source="admin"
-            path=":pleroma.:instance.:email"
-            draft-mode
-          >
+          <StringSetting path=":pleroma.:instance.:email">
             ADMIN EMAIL
           </StringSetting>
         </li>
         <li>
-          <StringSetting
-            source="admin"
-            path=":pleroma.:instance.:description"
-            draft-mode
-          >
+          <StringSetting path=":pleroma.:instance.:description">
             DESCRIPTION
           </StringSetting>
         </li>
         <li>
-          <StringSetting
-            source="admin"
-            path=":pleroma.:instance.:short_description"
-            draft-mode
-          >
+          <StringSetting path=":pleroma.:instance.:short_description">
             SHORT DESCRIPTION
           </StringSetting>
         </li>
         <li>
-          <StringSetting
-            source="admin"
-            path=":pleroma.:instance.:instance_thumbnail"
-            draft-mode
-          >
+          <StringSetting path=":pleroma.:instance.:instance_thumbnail">
             INSTANCE THUMBNAIL
           </StringSetting>
         </li>
         <li>
-          <StringSetting
-            source="admin"
-            path=":pleroma.:instance.:background_image"
-            draft-mode
-          >
+          <StringSetting path=":pleroma.:instance.:background_image">
             BACKGROUND IMAGE
           </StringSetting>
         </li>
         <li>
-          <BooleanSetting
-            source="admin"
-            path=":pleroma.:instance.:public"
-            draft-mode
-          >
+          <BooleanSetting path=":pleroma.:instance.:public">
             PUBLIC
           </BooleanSetting>
         </li>
@@ -72,21 +44,15 @@
       <h2>{{ $t('admin_dash.instance.registrations') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting
-            source="admin"
-            path=":pleroma.:instance.:registrations_open"
-            draft-mode
-          >
+          <BooleanSetting path=":pleroma.:instance.:registrations_open">
             REGISTRATIONS OPEN
           </BooleanSetting>
           <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                source="admin"
                 path=":pleroma.:instance.:invites_enabled"
                 parent-path=":pleroma.:instance.:registrations_open"
                 :parent-invert="true"
-                draft-mode
               >
                 INVITES ENABLED
               </BooleanSetting>
@@ -94,20 +60,12 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting
-            source="admin"
-            path=":pleroma.:instance.:account_activation_required"
-            draft-mode
-          >
+          <BooleanSetting path=":pleroma.:instance.:account_activation_required">
             ACTIVATION REQUIRED
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting
-            source="admin"
-            path=":pleroma.:instance.:account_approval_required"
-            draft-mode
-          >
+          <BooleanSetting path=":pleroma.:instance.:account_approval_required">
             APPROVAL REQUIRED
           </BooleanSetting>
         </li>
@@ -115,32 +73,24 @@
           <h3>{{ $t('admin_dash.instance.captcha_header') }}</h3>
         </li>
         <li>
-          <BooleanSetting
-            source="admin"
-            :path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
-            draft-mode
-          >
+          <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']">
             CAPTCHA
           </BooleanSetting>
           <ul class="setting-list suboptions">
             <li>
               <ChoiceSetting
-                source="admin"
                 :path="[':pleroma', 'Pleroma.Captcha', ':method']"
                 :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
                 :option-label-map="{
                   'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
                   'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
                 }"
-                draft-mode
               >
                 CAPTCHA TYPE
               </ChoiceSetting>
               <IntegerSetting
-                source="admin"
                 :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
                 :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
-                draft-mode
               >
                 VALID
               </IntegerSetting>
@@ -152,11 +102,7 @@
           >
             <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
             <li>
-              <StringSetting
-                source="admin"
-                :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']"
-                draft-mode
-              >
+              <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']">
                 cockAPTCHA ENDPOINT
               </StringSetting>
             </li>
diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js
index 3ff81bc9..bdeece76 100644
--- a/src/components/settings_modal/helpers/choice_setting.js
+++ b/src/components/settings_modal/helpers/choice_setting.js
@@ -22,8 +22,7 @@ export default {
   computed: {
     ...Setting.computed,
     realOptions () {
-      if (this.source === 'admin') {
-        console.log(this.backendDescriptionSuggestions)
+      if (this.realSource === 'admin') {
         return this.backendDescriptionSuggestions.map(x => ({
           key: x,
           value: x,
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
index 55f9a62c..8713acf5 100644
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -11,7 +11,7 @@
     </template>
     {{ ' ' }}
     <Select
-      :model-value="draftMode ? draft :state"
+      :model-value="realDraftMode ? draft :state"
       :disabled="disabled"
       @update:modelValue="update"
     >
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index 93a7a79a..f97d5cf2 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -18,7 +18,7 @@
       :step="step || 1"
       :disabled="disabled"
       :min="min || 0"
-      :value="draftMode ? draft :state"
+      :value="realDraftMode ? draft :state"
       @change="update"
     >
     {{ ' ' }}
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index fd730db9..7cad27b7 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -31,10 +31,18 @@ export default {
     },
     source: {
       type: String,
-      default: 'default'
+      default: undefined
     },
     draftMode: {
       type: Boolean,
+      default: undefined
+    }
+  },
+  inject: {
+    defaultSource: {
+      default: 'default'
+    },
+    defaultDraftMode: {
       default: false
     }
   },
@@ -44,7 +52,7 @@ export default {
     }
   },
   created () {
-    if (this.draftMode) {
+    if (this.realDraftMode) {
       this.draft = this.state
     }
   },
@@ -57,6 +65,12 @@ export default {
         return value
       }
     },
+    realSource () {
+      return this.source || this.defaultSource
+    },
+    realDraftMode () {
+      return typeof this.draftMode === 'undefined' ? this.defaultDraftMode : this.draftMode
+    },
     backendDescription () {
       return get(this.$store.state.adminSettings.descriptions, this.path)
     },
@@ -74,7 +88,8 @@ export default {
       return this.disabled || (parentValue !== null ? (this.parentInvert ? parentValue : !parentValue) : false)
     },
     configSource () {
-      switch (this.source) {
+      console.log('SRC', this.realSource)
+      switch (this.realSource) {
         case 'profile':
           return this.$store.state.profileConfig
         case 'admin':
@@ -84,7 +99,7 @@ export default {
       }
     },
     configSink () {
-      switch (this.source) {
+      switch (this.realSource) {
         case 'profile':
           return (k, v) => this.$store.dispatch('setProfileOption', { name: k, value: v })
         case 'admin':
@@ -94,7 +109,7 @@ export default {
       }
     },
     defaultState () {
-      switch (this.source) {
+      switch (this.realSource) {
         case 'profile':
           return {}
         default:
@@ -102,10 +117,10 @@ export default {
       }
     },
     isProfileSetting () {
-      return this.source === 'profile'
+      return this.realSource === 'profile'
     },
     isChanged () {
-      switch (this.source) {
+      switch (this.realSource) {
         case 'profile':
         case 'admin':
           return false
@@ -114,10 +129,10 @@ export default {
       }
     },
     isDirty () {
-      return this.draftMode && this.draft !== this.state
+      return this.realDraftMode && this.draft !== this.state
     },
     canHardReset () {
-      return this.source === 'admin' && this.$store.state.adminSettings.modifiedPaths.has(this.path)
+      return this.realSource === 'admin' && this.$store.state.adminSettings.modifiedPaths.has(this.path)
     },
     matchesExpertLevel () {
       return (this.expert || 0) <= this.$store.state.config.expertLevel > 0
@@ -128,20 +143,20 @@ export default {
       return e.target.value
     },
     update (e) {
-      if (this.draftMode) {
+      if (this.realDraftMode) {
         this.draft = this.getValue(e)
       } else {
         this.configSink(this.path, this.getValue(e))
       }
     },
     commitDraft () {
-      if (this.draftMode) {
+      if (this.realDraftMode) {
         this.configSink(this.path, this.draft)
       }
     },
     reset () {
       console.log('reset')
-      if (this.draftMode) {
+      if (this.realDraftMode) {
         console.log(this.draft)
         console.log(this.state)
         this.draft = this.state
@@ -150,7 +165,7 @@ export default {
       }
     },
     hardReset () {
-      switch (this.source) {
+      switch (this.realSource) {
         case 'admin':
           return this.$store.dispatch('resetAdminSetting', { path: this.path })
             .then(() => { this.draft = this.state })
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index 91a4afa4..fb91b5d9 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -16,7 +16,7 @@
       class="string-input"
       step="1"
       :disabled="disabled"
-      :value="draftMode ? draft :state"
+      :value="realDraftMode ? draft : state"
       @change="update"
     >
     {{ ' ' }}
-- 
cgit v1.2.3-70-g09d2


From 6992439c92c247bf5b48155a76ff4e39a57b0ec7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Mar 2023 00:00:52 +0200
Subject: fixes for diabled state, tri-state boolean and access control

---
 .../settings_modal/admin_tabs/instance_tab.vue     | 87 +++++++++++++++++++++-
 .../settings_modal/helpers/boolean_setting.js      | 15 ++++
 .../settings_modal/helpers/boolean_setting.vue     |  5 +-
 .../settings_modal/helpers/draft_buttons.vue       |  2 +-
 .../settings_modal/helpers/number_setting.vue      |  5 +-
 src/components/settings_modal/helpers/setting.js   |  4 +-
 .../settings_modal/helpers/string_setting.vue      |  5 +-
 7 files changed, 115 insertions(+), 8 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index 43ad4c8c..96d8a17e 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -33,11 +33,81 @@
             BACKGROUND IMAGE
           </StringSetting>
         </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.instance.access') }}</h2>
+      <ul class="setting-list">
         <li>
           <BooleanSetting path=":pleroma.:instance.:public">
             PUBLIC
           </BooleanSetting>
         </li>
+        <li>
+          <h3>{{ $t('admin_dash.instance.restrict.header') }}</h3>
+        </li>
+        <li>
+          <ChoiceSetting path=":pleroma.:instance.:limit_to_local_content">
+            SEARCH RESTRICTION
+          </ChoiceSetting>
+        </li>
+        <li>
+          <h4>{{ $t('admin_dash.instance.restrict.timelines') }}</h4>
+        </li>
+        <li>
+          <BooleanSetting
+            path=":pleroma.:restrict_unauthenticated.:timelines.:local"
+            indeterminate-state=":if_instance_is_private"
+          >
+            LOCAL TIMELINES
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path=":pleroma.:restrict_unauthenticated.:timelines.:federated"
+            indeterminate-state=":if_instance_is_private"
+          >
+            FED TIMELINES
+          </BooleanSetting>
+        </li>
+        <li>
+          <h4>{{ $t('admin_dash.instance.restrict.profiles') }}</h4>
+        </li>
+        <li>
+          <BooleanSetting
+            path=":pleroma.:restrict_unauthenticated.:profiles.:local"
+            indeterminate-state=":if_instance_is_private"
+          >
+            LOCAL PROFILES
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path=":pleroma.:restrict_unauthenticated.:profiles.:remote"
+            indeterminate-state=":if_instance_is_private"
+          >
+            FED PROFILES
+          </BooleanSetting>
+        </li>
+        <li>
+          <h4>{{ $t('admin_dash.instance.restrict.activities') }}</h4>
+        </li>
+        <li>
+          <BooleanSetting
+            path=":pleroma.:restrict_unauthenticated.:activities.:local"
+            indeterminate-state=":if_instance_is_private"
+          >
+            LOCAL STATUSES
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path=":pleroma.:restrict_unauthenticated.:activities.:remote"
+            indeterminate-state=":if_instance_is_private"
+          >
+            FED STATUSES
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
     <div class="setting-item">
@@ -52,13 +122,28 @@
               <BooleanSetting
                 path=":pleroma.:instance.:invites_enabled"
                 parent-path=":pleroma.:instance.:registrations_open"
-                :parent-invert="true"
+                parent-invert
               >
                 INVITES ENABLED
               </BooleanSetting>
             </li>
           </ul>
         </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:birthday_required">
+            BDEY REQUIRED
+          </BooleanSetting>
+          <ul class="setting-list suboptions">
+            <li>
+              <IntegerSetting
+                path=":pleroma.:instance.:birthday_min_age"
+                parent-path=":pleroma.:instance.:birthday_required"
+              >
+                BDEY age of consent
+              </IntegerSetting>
+            </li>
+          </ul>
+        </li>
         <li>
           <BooleanSetting path=":pleroma.:instance.:account_activation_required">
             ACTIVATION REQUIRED
diff --git a/src/components/settings_modal/helpers/boolean_setting.js b/src/components/settings_modal/helpers/boolean_setting.js
index 0df01d31..199d3d0f 100644
--- a/src/components/settings_modal/helpers/boolean_setting.js
+++ b/src/components/settings_modal/helpers/boolean_setting.js
@@ -3,13 +3,28 @@ import Setting from './setting.js'
 
 export default {
   ...Setting,
+  props: {
+    ...Setting.props,
+    indeterminateState: [String, Object]
+  },
   components: {
     ...Setting.components,
     Checkbox
   },
+  computed: {
+    ...Setting.computed,
+    isIndeterminate () {
+      return this.visibleState === this.indeterminateState
+    }
+  },
   methods: {
     ...Setting.methods,
     getValue (e) {
+      // Basic tri-state toggle implementation
+      if (!!this.indeterminateState && !e && this.visibleState === true) {
+        // If we have indeterminate state, switching from true to false first goes through indeterminate
+        return this.indeterminateState
+      }
       return e
     }
   }
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 07971b00..6307d526 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -4,13 +4,15 @@
     class="BooleanSetting"
   >
     <Checkbox
-      :model-value="draftMode ? draft :state"
+      :model-value="visibleState"
       :disabled="shouldBeDisabled"
+      :indeterminate="isIndeterminate"
       @update:modelValue="update"
     >
       <span
         v-if="!!$slots.default"
         class="label"
+        :class="{ 'faint': shouldBeDisabled }"
       >
         <template v-if="backendDescription">
           {{ backendDescriptionLabel }}
@@ -29,6 +31,7 @@
     <p
       v-if="backendDescriptionDescription"
       class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
index 9e972b14..80da92e8 100644
--- a/src/components/settings_modal/helpers/draft_buttons.vue
+++ b/src/components/settings_modal/helpers/draft_buttons.vue
@@ -49,13 +49,13 @@
       </template>
     </Popover>
     <Popover
+      v-if="$parent.canHardReset"
       trigger="hover"
       :trigger-attrs="{ 'aria-label': $t('settings.hard_reset_value_tooltip') }"
     >
       <template #trigger>
         &nbsp;
         <button
-          v-if="$parent.canHardReset"
           class="button button-default btn"
           type="button"
           :title="$t('settings.hard_reset_value')"
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index f97d5cf2..2b90c336 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -3,7 +3,7 @@
     v-if="matchesExpertLevel"
     class="NumberSetting"
   >
-    <label :for="path">
+    <label :for="path" :class="{ 'faint': shouldBeDisabled }">
       <template v-if="backendDescription">
         {{ backendDescriptionLabel + ' ' }}
       </template>
@@ -16,7 +16,7 @@
       class="number-input"
       type="number"
       :step="step || 1"
-      :disabled="disabled"
+      :disabled="shouldBeDisabled"
       :min="min || 0"
       :value="realDraftMode ? draft :state"
       @change="update"
@@ -31,6 +31,7 @@
     <p
       v-if="backendDescriptionDescription"
       class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index 7cad27b7..d42ae763 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -65,6 +65,9 @@ export default {
         return value
       }
     },
+    visibleState () {
+      return this.realDraftMode ? this.draft : this.state
+    },
     realSource () {
       return this.source || this.defaultSource
     },
@@ -88,7 +91,6 @@ export default {
       return this.disabled || (parentValue !== null ? (this.parentInvert ? parentValue : !parentValue) : false)
     },
     configSource () {
-      console.log('SRC', this.realSource)
       switch (this.realSource) {
         case 'profile':
           return this.$store.state.profileConfig
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index fb91b5d9..5ee75a84 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -3,7 +3,7 @@
     v-if="matchesExpertLevel"
     class="StringSetting"
   >
-    <label :for="path">
+    <label :for="path" :class="{ 'faint': shouldBeDisabled }">
       <template v-if="backendDescription">
         {{ backendDescriptionLabel + ' ' }}
       </template>
@@ -15,7 +15,7 @@
       :id="path"
       class="string-input"
       step="1"
-      :disabled="disabled"
+      :disabled="shouldBeDisabled"
       :value="realDraftMode ? draft : state"
       @change="update"
     >
@@ -29,6 +29,7 @@
     <p
       v-if="backendDescriptionDescription"
       class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
-- 
cgit v1.2.3-70-g09d2


From c7a16bdfe2cebe51c232ae3fe3101d35c4f877a2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Mar 2023 12:43:53 +0200
Subject: grouped settings/managed drafts support added

---
 .../settings_modal/admin_tabs/instance_tab.js      |  4 ++-
 .../settings_modal/admin_tabs/instance_tab.vue     | 15 ++++++++++
 .../settings_modal/helpers/group_setting.js        | 14 ++++++++++
 .../settings_modal/helpers/group_setting.vue       | 15 ++++++++++
 src/components/settings_modal/helpers/setting.js   | 32 +++++++++++++++++++---
 src/modules/adminSettings.js                       | 24 ++++++++++++++--
 6 files changed, 96 insertions(+), 8 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/group_setting.js
 create mode 100644 src/components/settings_modal/helpers/group_setting.vue

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.js b/src/components/settings_modal/admin_tabs/instance_tab.js
index 7aaedbce..f702afcf 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.js
+++ b/src/components/settings_modal/admin_tabs/instance_tab.js
@@ -2,6 +2,7 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import StringSetting from '../helpers/string_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -24,7 +25,8 @@ const InstanceTab = {
     BooleanSetting,
     ChoiceSetting,
     IntegerSetting,
-    StringSetting
+    StringSetting,
+    GroupSetting
   },
   computed: {
     ...SharedComputedObject()
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index 96d8a17e..9291ddf8 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -70,6 +70,11 @@
             FED TIMELINES
           </BooleanSetting>
         </li>
+        <li>
+          <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines">
+            TIMELINES
+          </GroupSetting>
+        </li>
         <li>
           <h4>{{ $t('admin_dash.instance.restrict.profiles') }}</h4>
         </li>
@@ -89,6 +94,11 @@
             FED PROFILES
           </BooleanSetting>
         </li>
+        <li>
+          <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles">
+            PROFILES
+          </GroupSetting>
+        </li>
         <li>
           <h4>{{ $t('admin_dash.instance.restrict.activities') }}</h4>
         </li>
@@ -108,6 +118,11 @@
             FED STATUSES
           </BooleanSetting>
         </li>
+        <li>
+          <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities">
+            STATUSES
+          </GroupSetting>
+        </li>
       </ul>
     </div>
     <div class="setting-item">
diff --git a/src/components/settings_modal/helpers/group_setting.js b/src/components/settings_modal/helpers/group_setting.js
new file mode 100644
index 00000000..12a49000
--- /dev/null
+++ b/src/components/settings_modal/helpers/group_setting.js
@@ -0,0 +1,14 @@
+import { isEqual } from 'lodash'
+
+import Setting from './setting.js'
+
+export default {
+  ...Setting,
+  computed: {
+    ...Setting.computed,
+    isDirty () {
+      console.log(this.state, this.draft)
+      return !isEqual(this.state, this.draft)
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/group_setting.vue b/src/components/settings_modal/helpers/group_setting.vue
new file mode 100644
index 00000000..a4df4bf3
--- /dev/null
+++ b/src/components/settings_modal/helpers/group_setting.vue
@@ -0,0 +1,15 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="GroupSetting"
+  >
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+  </span>
+</template>
+
+<script src="./group_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index d42ae763..d2e1a6f4 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -48,15 +48,32 @@ export default {
   },
   data () {
     return {
-      draft: null
+      localDraft: null
     }
   },
   created () {
-    if (this.realDraftMode) {
+    if (this.realDraftMode && this.realSource !== 'admin') {
       this.draft = this.state
     }
   },
   computed: {
+    draft: {
+      // TODO allow passing shared draft object?
+      get () {
+        if (this.realSource === 'admin') {
+          return get(this.$store.state.adminSettings.draft, this.path)
+        } else {
+          return this.localDraft
+        }
+      },
+      set (value) {
+        if (this.realSource === 'admin') {
+          this.$store.commit('updateAdminDraft', { path: this.canonPath, value })
+        } else {
+          this.localDraft = value
+        }
+      }
+    },
     state () {
       const value = get(this.configSource, this.path)
       if (value === undefined) {
@@ -130,11 +147,18 @@ export default {
           return this.state !== this.defaultState
       }
     },
+    canonPath () {
+      return Array.isArray(this.path) ? this.path : this.path.split('.')
+    },
     isDirty () {
-      return this.realDraftMode && this.draft !== this.state
+      if (this.realSource === 'admin' && this.canonPath.length > 3) {
+        return false // should not show draft buttons for "grouped" values
+      } else {
+        return this.realDraftMode && this.draft !== this.state
+      }
     },
     canHardReset () {
-      return this.realSource === 'admin' && this.$store.state.adminSettings.modifiedPaths.has(this.path)
+      return this.realSource === 'admin' && this.$store.state.adminSettings.modifiedPaths.has(this.canonPath.join(' -> '))
     },
     matchesExpertLevel () {
       return (this.expert || 0) <= this.$store.state.config.expertLevel > 0
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index a84fadbf..27d5b37d 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -1,10 +1,11 @@
-import { set, cloneDeep } from 'lodash'
+import { set, get, cloneDeep } from 'lodash'
 
 export const defaultState = {
   needsReboot: null,
   config: null,
   modifiedPaths: null,
-  descriptions: null
+  descriptions: null,
+  draft: null
 }
 
 export const newUserFlags = {
@@ -22,6 +23,20 @@ const adminSettingsStorage = {
     },
     updateAdminDescriptions (state, { descriptions }) {
       state.descriptions = descriptions
+    },
+    updateAdminDraft (state, { path, value }) {
+      const [group, key, subkey] = path
+      const parent = [group, key, subkey]
+
+      set(state.draft, path, value)
+
+      // force-updating grouped draft to trigger refresh of group settings
+      if (path.length > parent.length) {
+        set(state.draft, parent, cloneDeep(get(state.draft, parent)))
+      }
+    },
+    resetAdminDraft (state) {
+      state.draft = cloneDeep(state.config)
     }
   },
   actions: {
@@ -31,7 +46,9 @@ const adminSettingsStorage = {
       backendDbConfig.configs.forEach(c => {
         const path = [c.group, c.key]
         if (c.db) {
-          c.db.forEach(x => modifiedPaths.add(path + '.' + x))
+          // Path elements can contain dot, therefore we use ' -> ' as a separator instead
+          // Using strings for modified paths for easier searching
+          c.db.forEach(x => modifiedPaths.add([...path, x].join(' -> ')))
         }
         const convert = (value) => {
           if (Array.isArray(value) && value.length > 0 && value[0].tuple) {
@@ -46,6 +63,7 @@ const adminSettingsStorage = {
       })
       console.log(config[':pleroma'])
       commit('updateAdminSettings', { config, modifiedPaths })
+      commit('resetAdminDraft')
     },
     setInstanceAdminDescriptions ({ state, commit, dispatch }, { backendDescriptions }) {
       const convert = ({ children, description, label, key = '<ROOT>', group, suggestions }, path, acc) => {
-- 
cgit v1.2.3-70-g09d2


From ece69f01b790b4bc02387d31ca911a0588e0664c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Mar 2023 18:57:23 +0200
Subject: added mass-draft-push and mass-draft-reset, small stylistic fixes

---
 src/components/settings_modal/settings_modal.js   | 14 +++++-
 src/components/settings_modal/settings_modal.scss |  2 +
 src/components/settings_modal/settings_modal.vue  | 19 +++++++-
 src/modules/adminSettings.js                      | 57 ++++++++++++++++++++++-
 4 files changed, 88 insertions(+), 4 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index e033d999..ff58f2c3 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -5,7 +5,7 @@ import getResettableAsyncComponent from 'src/services/resettable_async_component
 import Popover from '../popover/popover.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { cloneDeep } from 'lodash'
+import { cloneDeep, isEqual } from 'lodash'
 import {
   newImporter,
   newExporter
@@ -155,6 +155,12 @@ const SettingsModal = {
         PLEROMAFE_SETTINGS_MINOR_VERSION
       ]
       return clone
+    },
+    resetAdminDraft () {
+      this.$store.commit('resetAdminDraft')
+    },
+    pushAdminDraft () {
+      this.$store.dispatch('pushAdminDraft')
     }
   },
   computed: {
@@ -183,6 +189,12 @@ const SettingsModal = {
       set (value) {
         this.$store.dispatch('setOption', { name: 'expertLevel', value: value ? 1 : 0 })
       }
+    },
+    adminDraftAny () {
+      return !isEqual(
+        this.$store.state.adminSettings.config,
+        this.$store.state.adminSettings.draft
+      )
     }
   }
 }
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 4cce6099..4cb506f9 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -51,6 +51,8 @@
 
   .settings-footer {
     display: flex;
+    flex-wrap: wrap;
+    line-height: 2;
 
     >* {
       margin-right: 0.5em;
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 303050e4..57ec5535 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -45,7 +45,7 @@
         <SettingsModalUserContent v-if="modalMode === 'user' && modalOpenedOnceUser" />
         <SettingsModalAdminContent v-if="modalMode === 'admin' && modalOpenedOnceAdmin" />
       </div>
-      <div class="panel-footer settings-footer">
+      <div class="panel-footer settings-footer -flexible-height">
         <Popover
           v-if="modalMode === 'user'"
           class="export"
@@ -125,6 +125,23 @@
           id="unscrolled-content"
           class="extra-content"
         />
+        <span class="admin-buttons" v-if="modalMode === 'admin'">
+          <button
+            class="button-default btn"
+            @click="resetAdminDraft"
+            :disabled="!adminDraftAny"
+          >
+              {{ $t("admin_dash.reset_all") }}
+          </button>
+          {{ ' ' }}
+          <button
+            class="button-default btn"
+            @click="pushAdminDraft"
+            :disabled="!adminDraftAny"
+          >
+              {{ $t("admin_dash.commit_all") }}
+          </button>
+        </span>
       </div>
     </div>
   </Modal>
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index 27d5b37d..25fb8e50 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -1,4 +1,4 @@
-import { set, get, cloneDeep } from 'lodash'
+import { set, get, cloneDeep, differenceWith, isEqual, flatten } from 'lodash'
 
 export const defaultState = {
   needsReboot: null,
@@ -42,7 +42,7 @@ const adminSettingsStorage = {
   actions: {
     setInstanceAdminSettings ({ state, commit, dispatch }, { backendDbConfig }) {
       const config = state.config || {}
-      const modifiedPaths = state.modifiedPaths || new Set()
+      const modifiedPaths = new Set()
       backendDbConfig.configs.forEach(c => {
         const path = [c.group, c.key]
         if (c.db) {
@@ -82,6 +82,59 @@ const adminSettingsStorage = {
       console.log(descriptions[':pleroma']['Pleroma.Captcha'])
       commit('updateAdminDescriptions', { descriptions })
     },
+
+    // This action takes draft state, diffs it with live config state and then pushes
+    // only differences between the two. Difference detection only work up to subkey (third) level.
+    pushAdminDraft ({ rootState, state, commit, dispatch }) {
+      // TODO cleanup paths in modifiedPaths
+      const convert = (value) => {
+        if (typeof value !== 'object') {
+          return value
+        } else if (Array.isArray(value)) {
+          return value.map(convert)
+        } else {
+          return Object.entries(value).map(([k, v]) => ({ tuple: [k, v] }))
+        }
+      }
+
+      // Getting all group-keys used in config
+      const allGroupKeys = flatten(
+        Object
+          .entries(state.config)
+          .map(
+            ([group, lv1data]) => Object
+              .keys(lv1data)
+              .map((key) => ({ group, key }))
+          )
+      )
+
+      // Only using group-keys where there are changes detected
+      const changedGroupKeys = allGroupKeys.filter(({ group, key }) => {
+        return !isEqual(state.config[group][key], state.draft[group][key])
+      })
+
+      // Here we take all changed group-keys and get all changed subkeys
+      const changed = changedGroupKeys.map(({ group, key }) => {
+        const config = state.config[group][key]
+        const draft = state.draft[group][key]
+
+        // We convert group-key value into entries arrays
+        const eConfig = Object.entries(config)
+        const eDraft = Object.entries(draft)
+
+        // Then those entries array we diff so only changed subkey entries remain
+        // We use the diffed array to reconstruct the object and then shove it into convert()
+        return ({ group, key, value: convert(Object.fromEntries(differenceWith(eDraft, eConfig, isEqual))) })
+      })
+
+      rootState.api.backendInteractor.pushInstanceDBConfig({
+        payload: {
+          configs: changed
+        }
+      })
+        .then(() => rootState.api.backendInteractor.fetchInstanceDBConfig())
+        .then(backendDbConfig => dispatch('setInstanceAdminSettings', { backendDbConfig }))
+    },
     pushAdminSetting ({ rootState, state, commit, dispatch }, { path, value }) {
       const [group, key, ...rest] = Array.isArray(path) ? path : path.split(/\./g)
       const clone = {} // not actually cloning the entire thing to avoid excessive writes
-- 
cgit v1.2.3-70-g09d2


From 4c3af5c362574aad4d851990265ebc7252c6f990 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Mar 2023 22:57:50 +0300
Subject: handle db config disabled case

---
 .../settings_modal/settings_modal_admin_content.js | 18 ++++++++--
 .../settings_modal_admin_content.vue               | 39 ++++++++++++++++++++++
 src/i18n/en.json                                   | 10 +++++-
 src/modules/adminSettings.js                       | 30 ++++++++++++++++-
 src/modules/users.js                               |  6 ----
 5 files changed, 93 insertions(+), 10 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
index 07d4cf2e..1c239e59 100644
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -9,7 +9,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faWrench,
   faHand,
-  faFilter,
+  faLaptopCode,
   faPaintBrush,
   faBell,
   faDownload,
@@ -20,7 +20,7 @@ import {
 library.add(
   faWrench,
   faHand,
-  faFilter,
+  faLaptopCode,
   faPaintBrush,
   faBell,
   faDownload,
@@ -38,6 +38,9 @@ const SettingsModalAdminContent = {
     LimitsTab
   },
   computed: {
+    user () {
+      return this.$store.state.users.currentUser
+    },
     isLoggedIn () {
       return !!this.$store.state.users.currentUser
     },
@@ -46,6 +49,17 @@ const SettingsModalAdminContent = {
     },
     bodyLock () {
       return this.$store.state.interface.settingsModalState === 'visible'
+    },
+    adminDbLoaded () {
+      return this.$store.state.adminSettings.loaded
+    },
+    noDb () {
+      return this.$store.state.adminSettings.dbConfigEnabled === false
+    }
+  },
+  created () {
+    if (this.user.rights.admin) {
+      this.$store.dispatch('loadAdminStuff')
     }
   },
   methods: {
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
index 52c6ddf5..ae670a90 100644
--- a/src/components/settings_modal/settings_modal_admin_content.vue
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -4,9 +4,40 @@
     class="settings_tab-switcher"
     :side-tab-bar="true"
     :scrollable-tabs="true"
+    :render-only-focused="true"
     :body-scroll-lock="bodyLock"
   >
     <div
+      v-if="noDb"
+      :label="$t('admin_dash.tabs.nodb')"
+      icon="exclamation-triangle"
+      data-tab-name="nodb-notice"
+    >
+      <div :label="$t('admin_dash.tabs.nodb')">
+        <div class="setting-item">
+          <h2>{{ $t('admin_dash.nodb.heading') }}</h2>
+          <i18n-t keypath="admin_dash.nodb.text">
+            <template #documentation>
+              <a
+                href="https://docs-develop.pleroma.social/backend/configuration/howto_database_config/"
+                target="_blank"
+              >
+                {{ $t("admin_dash.nodb.documentation") }}
+              </a>
+            </template>
+            <template #property>
+              <code>config :pleroma, configurable_from_database</code>
+            </template>
+            <template #value>
+              <code>true</code>
+            </template>
+          </i18n-t>
+          <p>{{ $t('admin_dash.nodb.text2') }}</p>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="adminDbLoaded"
       :label="$t('admin_dash.tabs.instance')"
       icon="wrench"
       data-tab-name="general"
@@ -14,12 +45,20 @@
       <InstanceTab />
     </div>
     <div
+      v-if="adminDbLoaded"
       :label="$t('admin_dash.tabs.limits')"
       icon="hand"
       data-tab-name="limits"
     >
       <LimitsTab />
     </div>
+    <div
+      :label="$t('admin_dash.tabs.frontends')"
+      icon="laptop-code"
+      data-tab-name="frontends"
+    >
+      <FrontendsTab />
+    </div>
   </tab-switcher>
 </template>
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index dd78d148..86ae7f06 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -845,8 +845,16 @@
     "reset_all": "Reset all",
     "commit_all": "Save all",
     "tabs": {
+      "nodb": "No DB Config",
       "instance": "Instance",
-      "limits": "Limits"
+      "limits": "Limits",
+      "frontends": "Front-ends"
+    },
+    "nodb": {
+      "heading": "Database config is disabled",
+      "text": "You need to change backend config files so that {property} is set to {value}, see more in {documentation}.",
+      "documentation": "documentation",
+      "text2": "Most configuration options will be unavailable."
     },
     "captcha": {
       "native": "Native",
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index 25fb8e50..fef73974 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -1,11 +1,13 @@
 import { set, get, cloneDeep, differenceWith, isEqual, flatten } from 'lodash'
 
 export const defaultState = {
+  loaded: false,
   needsReboot: null,
   config: null,
   modifiedPaths: null,
   descriptions: null,
-  draft: null
+  draft: null,
+  dbConfigEnabled: null
 }
 
 export const newUserFlags = {
@@ -17,7 +19,13 @@ const adminSettingsStorage = {
     ...cloneDeep(defaultState)
   },
   mutations: {
+    setInstanceAdminNoDbConfig (state) {
+      state.loaded = false
+      state.dbConfigEnabled = false
+    },
     updateAdminSettings (state, { config, modifiedPaths }) {
+      state.loaded = true
+      state.dbConfigEnabled = true
       state.config = config
       state.modifiedPaths = modifiedPaths
     },
@@ -40,6 +48,26 @@ const adminSettingsStorage = {
     }
   },
   actions: {
+    loadAdminStuff ({ state, rootState, dispatch, commit }) {
+      rootState.api.backendInteractor.fetchInstanceDBConfig()
+        .then(backendDbConfig => {
+          if (backendDbConfig.error) {
+            if (backendDbConfig.error.status === 400) {
+              backendDbConfig.error.json().then(errorJson => {
+                if (/configurable_from_database/.test(errorJson.error)) {
+                  commit('setInstanceAdminNoDbConfig')
+                }
+              })
+            }
+          } else {
+            dispatch('setInstanceAdminSettings', { backendDbConfig })
+          }
+        })
+      if (state.descriptions === null) {
+        rootState.api.backendInteractor.fetchInstanceConfigDescriptions()
+          .then(backendDescriptions => this.$store.dispatch('setInstanceAdminDescriptions', { backendDescriptions }))
+      }
+    },
     setInstanceAdminSettings ({ state, commit, dispatch }, { backendDbConfig }) {
       const config = state.config || {}
       const modifiedPaths = new Set()
diff --git a/src/modules/users.js b/src/modules/users.js
index 45cba334..a23f6d7d 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -564,12 +564,6 @@ const users = {
               user.domainMutes = []
               commit('setCurrentUser', user)
               commit('setServerSideStorage', user)
-              if (user.rights.admin) {
-                store.rootState.api.backendInteractor.fetchInstanceDBConfig()
-                  .then(backendDbConfig => dispatch('setInstanceAdminSettings', { backendDbConfig }))
-                store.rootState.api.backendInteractor.fetchInstanceConfigDescriptions()
-                  .then(backendDescriptions => dispatch('setInstanceAdminDescriptions', { backendDescriptions }))
-              }
               commit('addNewUsers', [user])
 
               dispatch('fetchEmoji')
-- 
cgit v1.2.3-70-g09d2


From 7bb28bb23c61e2d648eecf5d59969d32631f78e8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 29 Mar 2023 00:58:07 +0300
Subject: frontends tab initial implementation, now you can (re)install
 frontends! yay!

---
 src/App.scss                                       | 22 ++++++-
 .../settings_modal/admin_tabs/frontends_tab.js     | 58 +++++++++++++++++
 .../settings_modal/admin_tabs/frontends_tab.scss   | 13 ++++
 .../settings_modal/admin_tabs/frontends_tab.vue    | 72 ++++++++++++++++++++++
 src/components/settings_modal/settings_modal.scss  |  1 -
 .../settings_modal/settings_modal_admin_content.js |  8 +--
 src/i18n/en.json                                   |  8 +++
 src/modules/adminSettings.js                       | 15 +++++
 src/services/api/api.service.js                    | 42 ++++++++++++-
 9 files changed, 229 insertions(+), 10 deletions(-)
 create mode 100644 src/components/settings_modal/admin_tabs/frontends_tab.js
 create mode 100644 src/components/settings_modal/admin_tabs/frontends_tab.scss
 create mode 100644 src/components/settings_modal/admin_tabs/frontends_tab.vue

(limited to 'src/components/settings_modal')

diff --git a/src/App.scss b/src/App.scss
index 3f352e8d..149d640f 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -645,6 +645,19 @@ option {
   }
 }
 
+.cards-list {
+  display: grid;
+  grid-auto-flow: row dense;
+  grid-template-columns: 1fr 1fr;
+
+  li {
+    border: 1px solid var(--border);
+    border-radius: var(--inputRadius);
+    padding: 0.5em;
+    margin: 0.25em;
+  }
+}
+
 .btn-block {
   display: block;
   width: 100%;
@@ -655,16 +668,19 @@ option {
   display: inline-flex;
   vertical-align: middle;
 
-  button {
+  button,
+  .button-dropdown {
     position: relative;
     flex: 1 1 auto;
 
-    &:not(:last-child) {
+    &:not(:last-child),
+    &:not(:last-child) .button-default {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
 
-    &:not(:first-child) {
+    &:not(:first-child),
+    &:not(:first-child) .button-default {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
new file mode 100644
index 00000000..a5d33cbe
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -0,0 +1,58 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import Popover from 'src/components/popover/popover.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faGlobe
+)
+
+const FrontendsTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    GroupSetting,
+    Popover
+  },
+  created () {
+    if (this.user.rights.admin) {
+      this.$store.dispatch('loadFrontendsStuff')
+    }
+  },
+  computed: {
+    frontends () {
+      return this.$store.state.adminSettings.frontends
+    },
+    ...SharedComputedObject()
+  },
+  methods: {
+    update (frontend, suggestRef) {
+      const ref = suggestRef || frontend.refs[0]
+      const { name } = frontend
+      const payload = { name, ref }
+
+      this.$store.state.api.backendInteractor.installFrontend({ payload })
+        .then((externalUser) => {
+          this.$store.dispatch('loadFrontendsStuff')
+        })
+    }
+  }
+}
+
+export default FrontendsTab
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss
new file mode 100644
index 00000000..1e1881ff
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss
@@ -0,0 +1,13 @@
+.frontends-tab {
+  .cards-list {
+    padding: 0;
+  }
+
+  dd {
+    text-overflow: ellipsis;
+    word-wrap: nowrap;
+    white-space: nowrap;
+    overflow-x: hidden;
+    max-width: 80%;
+  }
+}
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
new file mode 100644
index 00000000..48649dfb
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="frontends-tab" :label="$t('admin_dash.tabs.frontends')">
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.tabs.frontends') }}</h2>
+      <ul class="setting-list cards-list">
+        <li v-for="frontend in frontends" :key="frontend.name">
+          <strong>{{ frontend.name }}</strong>
+          <dl>
+            <dt>{{ $t('admin_dash.frontend.repository') }}</dt>
+            <dd><a :href="frontend.git">{{ frontend.git }}</a></dd>
+            <dt v-if="expertLevel">{{ $t('admin_dash.frontend.versions') }}</dt>
+            <dd v-if="expertLevel">{{ frontend.refs }}</dd>
+            <dt v-if="expertLevel">{{ $t('admin_dash.frontend.build_url') }}</dt>
+            <dd v-if="expertLevel">{{ frontend.build_url }}</dd>
+          </dl>
+          <div>
+            <span class="btn-group">
+              <button
+                class="button button-default btn"
+                type="button"
+                :title="$t('admin_dash.frontend.update')"
+                @click="update(frontend)"
+              >
+                {{
+                    frontend.installed
+                    ? $t('admin_dash.frontend.reinstall')
+                    : $t('admin_dash.frontend.install')
+                }}
+              </button>
+              <Popover
+                v-if="frontend.refs.length > 1"
+                trigger="click"
+                class="button-dropdown"
+                placement="bottom"
+              >
+                <template #content>
+                  <div class="dropdown-menu">
+                    <button
+                      v-for="ref in frontend.refs"
+                      :key="ref"
+                      class="button-default dropdown-item"
+                      @click="update(frontend, ref)"
+                    >
+                      <i18n-t keypath="admin_dash.frontend.install_version">
+                        <template #version>
+                          <code>{{ ref }}</code>
+                        </template>
+                      </i18n-t>
+                    </button>
+                  </div>
+                </template>
+                <template #trigger>
+                  <button
+                    class="button button-default btn"
+                    type="button"
+                    :title="$t('admin_dash.frontend.update')"
+                  >
+                    <FAIcon icon="chevron-down" />
+                  </button>
+                </template>
+              </Popover>
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./frontends_tab.js"></script>
+
+<style lang="scss" src="./frontends_tab.scss"></style>
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 4cb506f9..98de736b 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -43,7 +43,6 @@
 
       .btn {
         min-height: 2em;
-        min-width: 10em;
         padding: 0 2em;
       }
     }
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
index 1c239e59..b7c0de57 100644
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -1,9 +1,8 @@
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 
-import DataImportExportTab from './tabs/data_import_export_tab.vue'
-import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
 import InstanceTab from './admin_tabs/instance_tab.vue'
 import LimitsTab from './admin_tabs/limits_tab.vue'
+import FrontendsTab from './admin_tabs/frontends_tab.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -32,10 +31,9 @@ const SettingsModalAdminContent = {
   components: {
     TabSwitcher,
 
-    DataImportExportTab,
-    MutesAndBlocksTab,
     InstanceTab,
-    LimitsTab
+    LimitsTab,
+    FrontendsTab
   },
   computed: {
     user () {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 86ae7f06..ede5d494 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -873,6 +873,14 @@
       "users": "User profile limits",
       "profile_fields": "Profile fields limits",
       "user_uploads": "Profile media limits"
+    },
+    "frontend": {
+      "repository": "Repository link",
+      "versions": "Available versions",
+      "build_url": "Build URL",
+      "reinstall": "Reinstall",
+      "install": "Install",
+      "install_version": "Install version {version}"
     }
   },
   "time": {
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index b8265949..cad9c0ca 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -1,6 +1,7 @@
 import { set, get, cloneDeep, differenceWith, isEqual, flatten } from 'lodash'
 
 export const defaultState = {
+  frontends: [],
   loaded: false,
   needsReboot: null,
   config: null,
@@ -23,6 +24,16 @@ const adminSettingsStorage = {
       state.loaded = false
       state.dbConfigEnabled = false
     },
+    setAvailableFrontends (state, { frontends }) {
+      state.frontends = frontends.map(f => {
+        if (f.name === 'pleroma-fe') {
+          f.refs = ['master', 'develop']
+        } else {
+          f.refs = [f.ref]
+        }
+        return f
+      })
+    },
     updateAdminSettings (state, { config, modifiedPaths }) {
       state.loaded = true
       state.dbConfigEnabled = true
@@ -48,6 +59,10 @@ const adminSettingsStorage = {
     }
   },
   actions: {
+    loadFrontendsStuff ({ state, rootState, dispatch, commit }) {
+      rootState.api.backendInteractor.fetchAvailableFrontends()
+        .then(frontends => commit('setAvailableFrontends', { frontends }))
+    },
     loadAdminStuff ({ state, rootState, dispatch, commit }) {
       rootState.api.backendInteractor.fetchInstanceDBConfig()
         .then(backendDbConfig => {
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 073f40a3..56e7de71 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -110,6 +110,8 @@ const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcemen
 
 const PLEROMA_ADMIN_CONFIG_URL = '/api/pleroma/admin/config'
 const PLEROMA_ADMIN_DESCRIPTIONS_URL = '/api/pleroma/admin/config/descriptions'
+const PLEROMA_ADMIN_FRONTENDS_URL = '/api/pleroma/admin/frontends'
+const PLEROMA_ADMIN_FRONTENDS_INSTALL_URL = '/api/pleroma/admin/frontends/install'
 
 const oldfetch = window.fetch
 
@@ -1693,6 +1695,21 @@ const fetchInstanceConfigDescriptions = ({ credentials }) => {
     })
 }
 
+const fetchAvailableFrontends = ({ credentials }) => {
+  return fetch(PLEROMA_ADMIN_FRONTENDS_URL, {
+    headers: authHeaders(credentials)
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
 const pushInstanceDBConfig = ({ credentials, payload }) => {
   return fetch(PLEROMA_ADMIN_CONFIG_URL, {
     headers: {
@@ -1714,6 +1731,27 @@ const pushInstanceDBConfig = ({ credentials, payload }) => {
     })
 }
 
+const installFrontend = ({ credentials, payload }) => {
+  return fetch(PLEROMA_ADMIN_FRONTENDS_INSTALL_URL, {
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      ...authHeaders(credentials)
+    },
+    method: 'POST',
+    body: JSON.stringify(payload)
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
 const apiService = {
   verifyCredentials,
   fetchTimeline,
@@ -1830,7 +1868,9 @@ const apiService = {
   adminFetchAnnouncements,
   fetchInstanceDBConfig,
   fetchInstanceConfigDescriptions,
-  pushInstanceDBConfig
+  fetchAvailableFrontends,
+  pushInstanceDBConfig,
+  installFrontend
 }
 
 export default apiService
-- 
cgit v1.2.3-70-g09d2


From ac75d051b720da2c47393de6b35663afe50d37cc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 29 Mar 2023 23:26:57 +0300
Subject: better frontends tab, now you can set default frontend

---
 src/App.scss                                       |   1 +
 .../settings_modal/admin_tabs/frontends_tab.js     |   6 +
 .../settings_modal/admin_tabs/frontends_tab.scss   |   2 +-
 .../settings_modal/admin_tabs/frontends_tab.vue    | 204 +++++++++++++++------
 .../settings_modal/helpers/group_setting.js        |   1 -
 src/components/settings_modal/helpers/setting.js   |   4 +-
 .../helpers/shared_computed_object.js              |   3 +
 src/components/settings_modal/settings_modal.scss  |   3 +
 .../settings_modal/settings_modal_admin_content.js |   3 +
 .../settings_modal_admin_content.vue               |   1 +
 src/i18n/en.json                                   |  11 +-
 11 files changed, 177 insertions(+), 62 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/App.scss b/src/App.scss
index 149d640f..ef68ac50 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -646,6 +646,7 @@ option {
 }
 
 .cards-list {
+  list-style: none;
   display: grid;
   grid-auto-flow: row dense;
   grid-template-columns: 1fr 1fr;
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
index a5d33cbe..a2c27c2a 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -51,6 +51,12 @@ const FrontendsTab = {
         .then((externalUser) => {
           this.$store.dispatch('loadFrontendsStuff')
         })
+    },
+    setDefault (frontend, suggestRef) {
+      const ref = suggestRef || frontend.refs[0]
+      const { name } = frontend
+
+      this.$store.commit('updateAdminDraft', { path: [':pleroma', ':frontends', ':primary'], value: { name, ref } })
     }
   }
 }
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss
index 1e1881ff..e3e04bc6 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.scss
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss
@@ -8,6 +8,6 @@
     word-wrap: nowrap;
     white-space: nowrap;
     overflow-x: hidden;
-    max-width: 80%;
+    max-width: 10em;
   }
 }
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 48649dfb..71bbfa69 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -2,67 +2,157 @@
   <div class="frontends-tab" :label="$t('admin_dash.tabs.frontends')">
     <div class="setting-item">
       <h2>{{ $t('admin_dash.tabs.frontends') }}</h2>
-      <ul class="setting-list cards-list">
-        <li v-for="frontend in frontends" :key="frontend.name">
-          <strong>{{ frontend.name }}</strong>
-          <dl>
-            <dt>{{ $t('admin_dash.frontend.repository') }}</dt>
-            <dd><a :href="frontend.git">{{ frontend.git }}</a></dd>
-            <dt v-if="expertLevel">{{ $t('admin_dash.frontend.versions') }}</dt>
-            <dd v-if="expertLevel">{{ frontend.refs }}</dd>
-            <dt v-if="expertLevel">{{ $t('admin_dash.frontend.build_url') }}</dt>
-            <dd v-if="expertLevel">{{ frontend.build_url }}</dd>
-          </dl>
-          <div>
-            <span class="btn-group">
-              <button
-                class="button button-default btn"
-                type="button"
-                :title="$t('admin_dash.frontend.update')"
-                @click="update(frontend)"
-              >
-                {{
-                    frontend.installed
-                    ? $t('admin_dash.frontend.reinstall')
-                    : $t('admin_dash.frontend.install')
-                }}
-              </button>
-              <Popover
-                v-if="frontend.refs.length > 1"
-                trigger="click"
-                class="button-dropdown"
-                placement="bottom"
+      <p>{{ $t('admin_dash.frontend.wip_notice') }}</p>
+      <ul class="setting-list">
+        <li>
+          <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
+          <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
+          <p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
+        </li>
+        <li>
+          <StringSetting path=":pleroma.:frontends.:primary.name">
+            NAME
+          </StringSetting>
+        </li>
+        <li>
+          <StringSetting path=":pleroma.:frontends.:primary.ref">
+            REF
+          </StringSetting>
+        </li>
+        <li>
+          <GroupSetting path=":pleroma.:frontends.:primary"/>
+        </li>
+      </ul>
+      <div class="setting-list">
+        <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
+        <ul class="cards-list">
+          <li v-for="frontend in frontends" :key="frontend.name">
+            <strong>{{ frontend.name }}</strong>
+            {{ ' ' }}
+            <span v-if="adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name">
+              <i18n-t
+                keypath="admin_dash.frontend.is_default"
+                v-if="adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]"
+              />
+              <i18n-t
+                keypath="admin_dash.frontend.is_default_custom"
+                v-else
               >
-                <template #content>
-                  <div class="dropdown-menu">
+                <template #version>
+                  <code>{{ adminDraft[':pleroma'][':frontends'][':primary'].ref }}</code>
+                </template>
+              </i18n-t>
+            </span>
+            <dl>
+              <dt>{{ $t('admin_dash.frontend.repository') }}</dt>
+              <dd><a :href="frontend.git" target="_blank">{{ frontend.git }}</a></dd>
+              <template v-if="expertLevel">
+                <dt>{{ $t('admin_dash.frontend.versions') }}</dt>
+                <dd v-for="ref in frontend.refs" :key="ref"><code>{{ ref }}</code></dd>
+              </template>
+              <dt v-if="expertLevel">{{ $t('admin_dash.frontend.build_url') }}</dt>
+              <dd v-if="expertLevel"><a :href="frontend.build_url" target="_blank">{{ frontend.build_url }}</a></dd>
+            </dl>
+            <div>
+              <span class="btn-group">
+                <button
+                  class="button button-default btn"
+                  type="button"
+                  :title="$t('admin_dash.frontend.update')"
+                  @click="update(frontend)"
+                >
+                  {{
+                      frontend.installed
+                      ? $t('admin_dash.frontend.reinstall')
+                      : $t('admin_dash.frontend.install')
+                  }}
+                </button>
+                <Popover
+                  v-if="frontend.refs.length > 1"
+                  trigger="click"
+                  class="button-dropdown"
+                  placement="bottom"
+                >
+                  <template #content>
+                    <div class="dropdown-menu">
+                      <button
+                        v-for="ref in frontend.refs"
+                        :key="ref"
+                        class="button-default dropdown-item"
+                        @click="update(frontend, ref)"
+                      >
+                        <i18n-t keypath="admin_dash.frontend.install_version">
+                          <template #version>
+                            <code>{{ ref }}</code>
+                          </template>
+                        </i18n-t>
+                      </button>
+                    </div>
+                  </template>
+                  <template #trigger>
                     <button
-                      v-for="ref in frontend.refs"
-                      :key="ref"
-                      class="button-default dropdown-item"
-                      @click="update(frontend, ref)"
+                      class="button button-default btn dropdown-button"
+                      type="button"
+                      :title="$t('admin_dash.frontend.update')"
                     >
-                      <i18n-t keypath="admin_dash.frontend.install_version">
-                        <template #version>
-                          <code>{{ ref }}</code>
-                        </template>
-                      </i18n-t>
+                      <FAIcon icon="chevron-down" />
                     </button>
-                  </div>
-                </template>
-                <template #trigger>
-                  <button
-                    class="button button-default btn"
-                    type="button"
-                    :title="$t('admin_dash.frontend.update')"
-                  >
-                    <FAIcon icon="chevron-down" />
-                  </button>
-                </template>
-              </Popover>
-            </span>
-          </div>
-        </li>
-      </ul>
+                  </template>
+                </Popover>
+              </span>
+              <span class="btn-group" v-if="frontend.name !== 'admin-fe'">
+                <button
+                  class="button button-default btn"
+                  type="button"
+                  :disabled="
+                             adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name &&
+                             adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]
+                             "
+                  :title="$t('admin_dash.frontend.update')"
+                  @click="setDefault(frontend)"
+                >
+                  {{
+                      $t('admin_dash.frontend.set_default')
+                  }}
+                </button>
+                {{ ' ' }}
+                <Popover
+                  v-if="frontend.refs.length > 1"
+                  trigger="click"
+                  class="button-dropdown"
+                  placement="bottom"
+                >
+                  <template #content>
+                    <div class="dropdown-menu">
+                      <button
+                        v-for="ref in frontend.refs.slice(1)"
+                        :key="ref"
+                        class="button-default dropdown-item"
+                        @click="setDefault(frontend, ref)"
+                      >
+                        <i18n-t keypath="admin_dash.frontend.set_default_version">
+                          <template #version>
+                            <code>{{ ref }}</code>
+                          </template>
+                        </i18n-t>
+                      </button>
+                    </div>
+                  </template>
+                  <template #trigger>
+                    <button
+                      class="button button-default btn dropdown-button"
+                      type="button"
+                      :title="$t('admin_dash.frontend.update')"
+                    >
+                      <FAIcon icon="chevron-down" />
+                    </button>
+                  </template>
+                </Popover>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/settings_modal/helpers/group_setting.js b/src/components/settings_modal/helpers/group_setting.js
index 12a49000..23a2a202 100644
--- a/src/components/settings_modal/helpers/group_setting.js
+++ b/src/components/settings_modal/helpers/group_setting.js
@@ -7,7 +7,6 @@ export default {
   computed: {
     ...Setting.computed,
     isDirty () {
-      console.log(this.state, this.draft)
       return !isEqual(this.state, this.draft)
     }
   }
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index d2e1a6f4..4f0be448 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -61,7 +61,7 @@ export default {
       // TODO allow passing shared draft object?
       get () {
         if (this.realSource === 'admin') {
-          return get(this.$store.state.adminSettings.draft, this.path)
+          return get(this.$store.state.adminSettings.draft, this.canonPath)
         } else {
           return this.localDraft
         }
@@ -75,7 +75,7 @@ export default {
       }
     },
     state () {
-      const value = get(this.configSource, this.path)
+      const value = get(this.configSource, this.canonPath)
       if (value === undefined) {
         return this.defaultState
       } else {
diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index d02db542..bb3d36ac 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -10,6 +10,9 @@ const SharedComputedObject = () => ({
   },
   adminConfig () {
     return this.$store.state.adminSettings.config
+  },
+  adminDraft () {
+    return this.$store.state.adminSettings.draft
   }
 })
 
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 98de736b..49ef83e0 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -43,6 +43,9 @@
 
       .btn {
         min-height: 2em;
+      }
+
+      .btn:not(.dropdown-button) {
         padding: 0 2em;
       }
     }
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
index b7c0de57..f94721ec 100644
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -51,6 +51,9 @@ const SettingsModalAdminContent = {
     adminDbLoaded () {
       return this.$store.state.adminSettings.loaded
     },
+    adminDescriptionsLoaded () {
+      return this.$store.state.adminSettings.descriptions !== null
+    },
     noDb () {
       return this.$store.state.adminSettings.dbConfigEnabled === false
     }
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
index ae670a90..a7a2ac9a 100644
--- a/src/components/settings_modal/settings_modal_admin_content.vue
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -1,5 +1,6 @@
 <template>
   <tab-switcher
+    v-if="adminDescriptionsLoaded && (noDb || adminDbLoaded)"
     ref="tabSwitcher"
     class="settings_tab-switcher"
     :side-tab-bar="true"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ede5d494..6ae31ee8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -879,8 +879,17 @@
       "versions": "Available versions",
       "build_url": "Build URL",
       "reinstall": "Reinstall",
+      "is_default": "(Default)",
+      "is_default_custom": "(Default, version: {version})",
       "install": "Install",
-      "install_version": "Install version {version}"
+      "install_version": "Install version {version}",
+      "set_default": "Set default",
+      "set_default_version": "Set version {version} as default",
+      "wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
+      "default_frontend": "Default front-end",
+      "default_frontend_tip": "Default front-end will be shown to all users. Currently there's no way to for a user to select personal front-end. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
+      "default_frontend_tip2": "WIP: Since Pleroma backend doesn't properly list all installed frontends you'll have to enter name and reference manually. List below provides shortcuts to fill the values.",
+      "available_frontends": "Available for install"
     }
   },
   "time": {
-- 
cgit v1.2.3-70-g09d2


From 9e5c7313c64c9f9eeff7184f5f474cc055d80715 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 29 Mar 2023 23:33:50 +0300
Subject: use draft state instead of live state in that one place

---
 src/components/settings_modal/admin_tabs/instance_tab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index 9291ddf8..fc41af65 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -197,7 +197,7 @@
             </li>
           </ul>
           <ul
-            v-if="adminConfig[':pleroma']['Pleroma.Captcha'][':enabled'] && adminConfig[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
+            v-if="adminDraft[':pleroma']['Pleroma.Captcha'][':enabled'] && adminDraft[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
             class="setting-list suboptions"
           >
             <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
-- 
cgit v1.2.3-70-g09d2


From 4c158e636bd7ae9ec03a202e54aa681e66645a78 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 12 Apr 2023 23:58:21 +0300
Subject: more i18n stuff, added missing labels and such

---
 .../settings_modal/admin_tabs/instance_tab.vue     | 12 +++++++
 .../settings_modal/helpers/boolean_setting.vue     |  2 +-
 .../settings_modal/helpers/choice_setting.vue      |  2 +-
 .../settings_modal/helpers/number_setting.vue      |  2 +-
 src/components/settings_modal/helpers/setting.js   | 41 ++++++++++++++++++++--
 .../settings_modal/helpers/string_setting.vue      |  2 +-
 src/i18n/en.json                                   | 23 +++++++++++-
 7 files changed, 77 insertions(+), 7 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index fc41af65..40e33495 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -58,6 +58,8 @@
           <BooleanSetting
             path=":pleroma.:restrict_unauthenticated.:timelines.:local"
             indeterminate-state=":if_instance_is_private"
+            swap-description-and-label
+            hide-description
           >
             LOCAL TIMELINES
           </BooleanSetting>
@@ -66,6 +68,8 @@
           <BooleanSetting
             path=":pleroma.:restrict_unauthenticated.:timelines.:federated"
             indeterminate-state=":if_instance_is_private"
+            swap-description-and-label
+            hide-description
           >
             FED TIMELINES
           </BooleanSetting>
@@ -82,6 +86,8 @@
           <BooleanSetting
             path=":pleroma.:restrict_unauthenticated.:profiles.:local"
             indeterminate-state=":if_instance_is_private"
+            swap-description-and-label
+            hide-description
           >
             LOCAL PROFILES
           </BooleanSetting>
@@ -90,6 +96,8 @@
           <BooleanSetting
             path=":pleroma.:restrict_unauthenticated.:profiles.:remote"
             indeterminate-state=":if_instance_is_private"
+            swap-description-and-label
+            hide-description
           >
             FED PROFILES
           </BooleanSetting>
@@ -106,6 +114,8 @@
           <BooleanSetting
             path=":pleroma.:restrict_unauthenticated.:activities.:local"
             indeterminate-state=":if_instance_is_private"
+            swap-description-and-label
+            hide-description
           >
             LOCAL STATUSES
           </BooleanSetting>
@@ -114,6 +124,8 @@
           <BooleanSetting
             path=":pleroma.:restrict_unauthenticated.:activities.:remote"
             indeterminate-state=":if_instance_is_private"
+            swap-description-and-label
+            hide-description
           >
             FED STATUSES
           </BooleanSetting>
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 6307d526..3089c3b3 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -14,7 +14,7 @@
         class="label"
         :class="{ 'faint': shouldBeDisabled }"
       >
-        <template v-if="backendDescription">
+        <template v-if="backendDescriptionLabel">
           {{ backendDescriptionLabel }}
         </template>
         <template v-else>
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
index 8713acf5..114e9b7d 100644
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -3,7 +3,7 @@
     v-if="matchesExpertLevel"
     class="ChoiceSetting"
   >
-    <template v-if="backendDescription">
+    <template v-if="backendDescriptionLabel">
       {{ backendDescriptionLabel }}
     </template>
     <template v-else>
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index 2b90c336..ce168570 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -4,7 +4,7 @@
     class="NumberSetting"
   >
     <label :for="path" :class="{ 'faint': shouldBeDisabled }">
-      <template v-if="backendDescription">
+      <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
       <template v-else>
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index 4f0be448..fec1b947 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -33,6 +33,18 @@ export default {
       type: String,
       default: undefined
     },
+    hideDescription: {
+      type: Boolean
+    },
+    swapDescriptionAndLabel: {
+      type: Boolean
+    },
+    overrideBackendDescription: {
+      type: Boolean
+    },
+    overrideBackendDescriptionLabel: {
+      type: Boolean
+    },
     draftMode: {
       type: Boolean,
       default: undefined
@@ -95,10 +107,35 @@ export default {
       return get(this.$store.state.adminSettings.descriptions, this.path)
     },
     backendDescriptionLabel () {
-      return this.backendDescription?.label
+      if (this.realSource !== 'admin') return ''
+      if (!this.backendDescription || this.overrideBackendDescriptionLabel) {
+        return this.$t([
+          'admin_dash',
+          'temp_overrides',
+          ...this.canonPath.map(p => p.replace(/\./g, '_DOT_')),
+          'label'
+        ].join('.'))
+      } else {
+        return this.swapDescriptionAndLabel
+          ? this.backendDescription?.description
+          : this.backendDescription?.label
+      }
     },
     backendDescriptionDescription () {
-      return this.backendDescription?.description
+      if (this.realSource !== 'admin') return ''
+      if (this.hideDescription) return null
+      if (!this.backendDescription || this.overrideBackendDescription) {
+        return this.$t([
+          'admin_dash',
+          'temp_overrides',
+          ...this.canonPath.map(p => p.replace(/\./g, '_DOT_')),
+          'description'
+        ].join('.'))
+      } else {
+        return this.swapDescriptionAndLabel
+          ? this.backendDescription?.label
+          : this.backendDescription?.description
+      }
     },
     backendDescriptionSuggestions () {
       return this.backendDescription?.suggestions
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index 5ee75a84..7e70b82f 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -4,7 +4,7 @@
     class="StringSetting"
   >
     <label :for="path" :class="{ 'faint': shouldBeDisabled }">
-      <template v-if="backendDescription">
+      <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
       <template v-else>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f4c2df3e..082ad826 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -864,7 +864,14 @@
       "instance": "Instance information",
       "registrations": "User sign-ups",
       "captcha_header": "CAPTCHA",
-      "kocaptcha": "KoCaptcha settings"
+      "kocaptcha": "KoCaptcha settings",
+      "access": "Instance access",
+      "restrict": {
+        "header": "Restrict access",
+        "timelines": "Timelines access",
+        "profiles": "User profiles access",
+        "activities": "Statues/activities access"
+      }
     },
     "limits": {
       "arbitrary_limits": "Arbitrary limits",
@@ -890,6 +897,20 @@
       "default_frontend_tip": "Default front-end will be shown to all users. Currently there's no way to for a user to select personal front-end. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
       "default_frontend_tip2": "WIP: Since Pleroma backend doesn't properly list all installed frontends you'll have to enter name and reference manually. List below provides shortcuts to fill the values.",
       "available_frontends": "Available for install"
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":description_limit": {
+            "label": "Limit",
+            "description": "Character limit for attachment descriptions"
+          },
+          ":background_image": {
+            "label": "Background image",
+            "description": "Background image (primarily used by PleromaFE)"
+          }
+        }
+      }
     }
   },
   "time": {
-- 
cgit v1.2.3-70-g09d2


From d8ed541d12382ec58ea1ab75acb1ca153e22f2e4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 13 Apr 2023 00:02:35 +0300
Subject: reordered registrations section to be above access since it's more
 likely to be used more often

---
 .../settings_modal/admin_tabs/instance_tab.vue     | 170 ++++++++++-----------
 1 file changed, 85 insertions(+), 85 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index 40e33495..535e4132 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -35,6 +35,91 @@
         </li>
       </ul>
     </div>
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.instance.registrations') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:registrations_open">
+            REGISTRATIONS OPEN
+          </BooleanSetting>
+          <ul class="setting-list suboptions">
+            <li>
+              <BooleanSetting
+                path=":pleroma.:instance.:invites_enabled"
+                parent-path=":pleroma.:instance.:registrations_open"
+                parent-invert
+              >
+                INVITES ENABLED
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:birthday_required">
+            BDEY REQUIRED
+          </BooleanSetting>
+          <ul class="setting-list suboptions">
+            <li>
+              <IntegerSetting
+                path=":pleroma.:instance.:birthday_min_age"
+                parent-path=":pleroma.:instance.:birthday_required"
+              >
+                BDEY age of consent
+              </IntegerSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:account_activation_required">
+            ACTIVATION REQUIRED
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:account_approval_required">
+            APPROVAL REQUIRED
+          </BooleanSetting>
+        </li>
+        <li>
+          <h3>{{ $t('admin_dash.instance.captcha_header') }}</h3>
+        </li>
+        <li>
+          <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']">
+            CAPTCHA
+          </BooleanSetting>
+          <ul class="setting-list suboptions">
+            <li>
+              <ChoiceSetting
+                :path="[':pleroma', 'Pleroma.Captcha', ':method']"
+                :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+                :option-label-map="{
+                  'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
+                  'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
+                }"
+              >
+                CAPTCHA TYPE
+              </ChoiceSetting>
+              <IntegerSetting
+                :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
+                :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+              >
+                VALID
+              </IntegerSetting>
+            </li>
+          </ul>
+          <ul
+            v-if="adminDraft[':pleroma']['Pleroma.Captcha'][':enabled'] && adminDraft[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
+            class="setting-list suboptions"
+          >
+            <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
+            <li>
+              <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']">
+                cockAPTCHA ENDPOINT
+              </StringSetting>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
     <div class="setting-item">
       <h2>{{ $t('admin_dash.instance.access') }}</h2>
       <ul class="setting-list">
@@ -137,91 +222,6 @@
         </li>
       </ul>
     </div>
-    <div class="setting-item">
-      <h2>{{ $t('admin_dash.instance.registrations') }}</h2>
-      <ul class="setting-list">
-        <li>
-          <BooleanSetting path=":pleroma.:instance.:registrations_open">
-            REGISTRATIONS OPEN
-          </BooleanSetting>
-          <ul class="setting-list suboptions">
-            <li>
-              <BooleanSetting
-                path=":pleroma.:instance.:invites_enabled"
-                parent-path=":pleroma.:instance.:registrations_open"
-                parent-invert
-              >
-                INVITES ENABLED
-              </BooleanSetting>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <BooleanSetting path=":pleroma.:instance.:birthday_required">
-            BDEY REQUIRED
-          </BooleanSetting>
-          <ul class="setting-list suboptions">
-            <li>
-              <IntegerSetting
-                path=":pleroma.:instance.:birthday_min_age"
-                parent-path=":pleroma.:instance.:birthday_required"
-              >
-                BDEY age of consent
-              </IntegerSetting>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <BooleanSetting path=":pleroma.:instance.:account_activation_required">
-            ACTIVATION REQUIRED
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path=":pleroma.:instance.:account_approval_required">
-            APPROVAL REQUIRED
-          </BooleanSetting>
-        </li>
-        <li>
-          <h3>{{ $t('admin_dash.instance.captcha_header') }}</h3>
-        </li>
-        <li>
-          <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']">
-            CAPTCHA
-          </BooleanSetting>
-          <ul class="setting-list suboptions">
-            <li>
-              <ChoiceSetting
-                :path="[':pleroma', 'Pleroma.Captcha', ':method']"
-                :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
-                :option-label-map="{
-                  'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
-                  'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
-                }"
-              >
-                CAPTCHA TYPE
-              </ChoiceSetting>
-              <IntegerSetting
-                :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
-                :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
-              >
-                VALID
-              </IntegerSetting>
-            </li>
-          </ul>
-          <ul
-            v-if="adminDraft[':pleroma']['Pleroma.Captcha'][':enabled'] && adminDraft[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
-            class="setting-list suboptions"
-          >
-            <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
-            <li>
-              <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']">
-                cockAPTCHA ENDPOINT
-              </StringSetting>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
   </div>
 </template>
 
-- 
cgit v1.2.3-70-g09d2


From 9aaa8a86f52bc97838c768a8859919a3ad6fd54f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 13 Apr 2023 01:11:20 +0300
Subject: initial implementation of attachmentsetting

---
 .../settings_modal/admin_tabs/instance_tab.js      |  2 +
 .../settings_modal/admin_tabs/instance_tab.vue     |  8 +--
 .../settings_modal/helpers/attachment_setting.js   | 42 +++++++++++++
 .../settings_modal/helpers/attachment_setting.vue  | 70 ++++++++++++++++++++++
 .../settings_modal/helpers/string_setting.vue      |  1 -
 src/services/file_type/file_type.service.js        | 18 +++++-
 6 files changed, 134 insertions(+), 7 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/attachment_setting.js
 create mode 100644 src/components/settings_modal/helpers/attachment_setting.vue

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.js b/src/components/settings_modal/admin_tabs/instance_tab.js
index f702afcf..b07bafe8 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.js
+++ b/src/components/settings_modal/admin_tabs/instance_tab.js
@@ -3,6 +3,7 @@ import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import StringSetting from '../helpers/string_setting.vue'
 import GroupSetting from '../helpers/group_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -26,6 +27,7 @@ const InstanceTab = {
     ChoiceSetting,
     IntegerSetting,
     StringSetting,
+    AttachmentSetting,
     GroupSetting
   },
   computed: {
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index 535e4132..e519e135 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -24,14 +24,14 @@
           </StringSetting>
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:instance_thumbnail">
+          <AttachmentSetting path=":pleroma.:instance.:instance_thumbnail">
             INSTANCE THUMBNAIL
-          </StringSetting>
+          </AttachmentSetting>
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:background_image">
+          <AttachmentSetting path=":pleroma.:instance.:background_image">
             BACKGROUND IMAGE
-          </StringSetting>
+          </AttachmentSetting>
         </li>
       </ul>
     </div>
diff --git a/src/components/settings_modal/helpers/attachment_setting.js b/src/components/settings_modal/helpers/attachment_setting.js
new file mode 100644
index 00000000..a0a12ead
--- /dev/null
+++ b/src/components/settings_modal/helpers/attachment_setting.js
@@ -0,0 +1,42 @@
+import Setting from './setting.js'
+import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
+import MediaUpload from 'src/components/media_upload/media_upload.vue'
+import Attachment from 'src/components/attachment/attachment.vue'
+
+export default {
+  ...Setting,
+  props: {
+    ...Setting.props,
+    type: {
+      type: Array,
+      required: false,
+      default: []
+    }
+  },
+  components: {
+    ...Setting.components,
+    MediaUpload,
+    Attachment
+  },
+  computed: {
+    ...Setting.computed,
+    attachment () {
+      const path = this.realDraftMode ? this.draft : this.state
+      const url = path.includes('://') ? path : this.$store.state.instance.server + path
+      return {
+        mimetype: fileTypeExt(url),
+        url
+      }
+    }
+  },
+  methods: {
+    ...Setting.methods,
+    setMediaFile (fileInfo) {
+      if (this.realDraftMode) {
+        this.draft = fileInfo.url
+      } else {
+        this.configSink(this.path, fileInfo.url)
+      }
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
new file mode 100644
index 00000000..3a933511
--- /dev/null
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -0,0 +1,70 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="AttachmentSetting"
+  >
+    <label :for="path" :class="{ 'faint': shouldBeDisabled }">
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else>
+        <slot />
+      </template>
+
+    </label>
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+    <div class="attachment-input">
+      <Attachment
+        class="attachment"
+        :compact="compact"
+        :attachment="attachment"
+        size="small"
+        hide-description
+        @setMedia="onMedia"
+        @naturalSizeLoad="onNaturalSizeLoad"
+      />
+      <div class="controls">
+        <media-upload
+          normal-button
+          ref="mediaUpload"
+          class="media-upload-icon"
+          :drop-files="dropFiles"
+          @uploaded="setMediaFile"
+          @upload-failed="uploadFailed"
+        />
+        <input
+          :id="path"
+          class="string-input"
+          :disabled="shouldBeDisabled"
+          :value="realDraftMode ? draft : state"
+          @change="update"
+        >
+        {{ ' ' }}
+        <ModifiedIndicator
+          :changed="isChanged"
+          :onclick="reset"
+        />
+        <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      </div>
+    </div>
+    <DraftButtons />
+  </span>
+</template>
+
+<script src="./attachment_setting.js"></script>
+
+<style lang="scss">
+.AttachmentSetting {
+  .attachment {
+    display: block;
+    width: 20em;
+    height: 15em;
+  }
+}
+</style>
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index 7e70b82f..84d0a9d6 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -14,7 +14,6 @@
     <input
       :id="path"
       class="string-input"
-      step="1"
       :disabled="shouldBeDisabled"
       :value="realDraftMode ? draft : state"
       @change="update"
diff --git a/src/services/file_type/file_type.service.js b/src/services/file_type/file_type.service.js
index 5182ecd1..b92c6c64 100644
--- a/src/services/file_type/file_type.service.js
+++ b/src/services/file_type/file_type.service.js
@@ -1,7 +1,7 @@
 // TODO this func might as well take the entire file and use its mimetype
 // or the entire service could be just mimetype service that only operates
 // on mimetypes and not files. Currently the naming is confusing.
-const fileType = mimetype => {
+export const fileType = mimetype => {
   if (mimetype.match(/flash/)) {
     return 'flash'
   }
@@ -25,11 +25,25 @@ const fileType = mimetype => {
   return 'unknown'
 }
 
-const fileMatchesSomeType = (types, file) =>
+export const fileTypeExt = url => {
+  if (url.match(/\.(png|jpe?g|gif|webp|avif)$/)) {
+    return 'image'
+  }
+  if (url.match(/\.(ogv|mp4|webm|mov)$/)) {
+    return 'video'
+  }
+  if (url.match(/\.(it|s3m|mod|umx|mp3|aac|m4a|flac|alac|ogg|oga|opus|wav|ape|midi?)$/)) {
+    return 'audio'
+  }
+  return 'unknown'
+}
+
+export const fileMatchesSomeType = (types, file) =>
   types.some(type => fileType(file.mimetype) === type)
 
 const fileTypeService = {
   fileType,
+  fileTypeExt,
   fileMatchesSomeType
 }
 
-- 
cgit v1.2.3-70-g09d2


From e0fbeee88edb29f04a3260560d10d1a812f84029 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 24 Apr 2023 21:57:31 +0300
Subject: finish up attachment setting (right now only for admin section only)

---
 src/components/media_upload/media_upload.js        | 18 ++++++--
 src/components/media_upload/media_upload.vue       | 22 ++++++---
 .../settings_modal/helpers/attachment_setting.js   |  7 +--
 .../settings_modal/helpers/attachment_setting.vue  | 53 +++++++++++++++-------
 src/i18n/en.json                                   |  2 +
 5 files changed, 73 insertions(+), 29 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index cfd42d4c..8c9e5f71 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -23,6 +23,11 @@ const mediaUpload = {
     }
   },
   methods: {
+    onClick () {
+      if (this.uploadReady) {
+        this.$refs.input.click()
+      }
+    },
     uploadFile (file) {
       const self = this
       const store = this.$store
@@ -69,10 +74,15 @@ const mediaUpload = {
       this.multiUpload(target.files)
     }
   },
-  props: [
-    'dropFiles',
-    'disabled'
-  ],
+  props: {
+    dropFiles: Object,
+    disabled: Boolean,
+    normalButton: Boolean,
+    acceptTypes: {
+      type: String,
+      default: '*/*'
+    }
+  },
   watch: {
     dropFiles: function (fileInfos) {
       if (!this.uploading) {
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 2799495b..c761b94f 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,8 +1,10 @@
 <template>
-  <label
+  <component
     class="media-upload"
-    :class="{ disabled: disabled }"
+    :is="normalButton ? 'button' : 'label'"
+    :class="{ disabled: disabled, ['media-upload button-default btn']: normalButton }"
     :title="$t('tool_tip.media_upload')"
+    @click="onClick"
   >
     <FAIcon
       v-if="uploading"
@@ -15,6 +17,10 @@
       class="new-icon"
       icon="upload"
     />
+    <template v-if="normalButton">
+      {{ ' ' }}
+      {{ uploading ? $t('general.loading') : $t('tool_tip.media_upload') }}
+    </template>
     <input
       v-if="uploadReady"
       class="hidden-input-file"
@@ -22,8 +28,10 @@
       type="file"
       multiple="true"
       @change="change"
+      ref="input"
+      :accept="acceptTypes"
     >
-  </label>
+  </component>
 </template>
 
 <script src="./media_upload.js"></script>
@@ -32,10 +40,12 @@
 @import "../../variables";
 
 .media-upload {
-  cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
-
   .hidden-input-file {
     display: none;
   }
 }
- </style>
+
+label.media-upload {
+  cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
+}
+</style>
diff --git a/src/components/settings_modal/helpers/attachment_setting.js b/src/components/settings_modal/helpers/attachment_setting.js
index a0a12ead..ac5c6f86 100644
--- a/src/components/settings_modal/helpers/attachment_setting.js
+++ b/src/components/settings_modal/helpers/attachment_setting.js
@@ -7,10 +7,10 @@ export default {
   ...Setting,
   props: {
     ...Setting.props,
-    type: {
-      type: Array,
+    acceptTypes: {
+      type: String,
       required: false,
-      default: []
+      default: 'image/*'
     }
   },
   components: {
@@ -22,6 +22,7 @@ export default {
     ...Setting.computed,
     attachment () {
       const path = this.realDraftMode ? this.draft : this.state
+      // The "server" part is primarily for local dev, but could be useful for alt-domain or multiuser usage.
       const url = path.includes('://') ? path : this.$store.state.instance.server + path
       return {
         mimetype: fileTypeExt(url),
diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index 3a933511..cc2278b0 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -20,6 +20,23 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <div class="attachment-input">
+      <div>{{ $t('settings.url') }}</div>
+      <div class="controls">
+        <input
+          :id="path"
+          class="string-input"
+          :disabled="shouldBeDisabled"
+          :value="realDraftMode ? draft : state"
+          @change="update"
+        >
+        {{ ' ' }}
+        <ModifiedIndicator
+          :changed="isChanged"
+          :onclick="reset"
+        />
+        <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      </div>
+      <div>{{ $t('settings.preview') }}</div>
       <Attachment
         class="attachment"
         :compact="compact"
@@ -30,27 +47,15 @@
         @naturalSizeLoad="onNaturalSizeLoad"
       />
       <div class="controls">
-        <media-upload
-          normal-button
+        <MediaUpload
           ref="mediaUpload"
           class="media-upload-icon"
           :drop-files="dropFiles"
           @uploaded="setMediaFile"
           @upload-failed="uploadFailed"
+          normal-button
+          :accept-types="acceptTypes"
         />
-        <input
-          :id="path"
-          class="string-input"
-          :disabled="shouldBeDisabled"
-          :value="realDraftMode ? draft : state"
-          @change="update"
-        >
-        {{ ' ' }}
-        <ModifiedIndicator
-          :changed="isChanged"
-          :onclick="reset"
-        />
-        <ProfileSettingIndicator :is-profile="isProfileSetting" />
       </div>
     </div>
     <DraftButtons />
@@ -63,8 +68,24 @@
 .AttachmentSetting {
   .attachment {
     display: block;
-    width: 20em;
+    width: 100%;
     height: 15em;
+    margin-bottom: 0.5em;
+  }
+
+  .attachment-input {
+    margin-left: 1em;
+    display: flex;
+    flex-direction: column;
+    width: 20em;
+  }
+
+  .controls {
+    margin-bottom: 0.5em;
+
+    input, button {
+      width: 100%;
+    }
   }
 }
 </style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 082ad826..44998453 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -519,6 +519,8 @@
     "loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
     "mutes_tab": "Mutes",
     "play_videos_in_modal": "Play videos in a popup frame",
+    "url": "URL",
+    "preview": "Preview",
     "file_export_import": {
       "backup_restore": "Settings backup",
       "backup_settings": "Backup settings to file",
-- 
cgit v1.2.3-70-g09d2


From 1492937a7e8e27a31699879dc710d3e36c67b953 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 24 Apr 2023 23:01:29 +0300
Subject: lint

---
 src/components/media_upload/media_upload.vue       |  6 +--
 .../settings_modal/admin_tabs/frontends_tab.vue    | 56 ++++++++++++++++------
 .../settings_modal/helpers/attachment_setting.vue  |  9 ++--
 .../settings_modal/helpers/number_setting.vue      |  5 +-
 .../settings_modal/helpers/string_setting.vue      |  5 +-
 src/components/settings_modal/settings_modal.vue   | 13 +++--
 6 files changed, 66 insertions(+), 28 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index c761b94f..993c01a4 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,7 +1,7 @@
 <template>
   <component
-    class="media-upload"
     :is="normalButton ? 'button' : 'label'"
+    class="media-upload"
     :class="{ disabled: disabled, ['media-upload button-default btn']: normalButton }"
     :title="$t('tool_tip.media_upload')"
     @click="onClick"
@@ -23,13 +23,13 @@
     </template>
     <input
       v-if="uploadReady"
+      ref="input"
       class="hidden-input-file"
       :disabled="disabled"
       type="file"
       multiple="true"
-      @change="change"
-      ref="input"
       :accept="acceptTypes"
+      @change="change"
     >
   </component>
 </template>
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 71bbfa69..e108a963 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="frontends-tab" :label="$t('admin_dash.tabs.frontends')">
+  <div
+    class="frontends-tab"
+    :label="$t('admin_dash.tabs.frontends')"
+  >
     <div class="setting-item">
       <h2>{{ $t('admin_dash.tabs.frontends') }}</h2>
       <p>{{ $t('admin_dash.frontend.wip_notice') }}</p>
@@ -20,23 +23,26 @@
           </StringSetting>
         </li>
         <li>
-          <GroupSetting path=":pleroma.:frontends.:primary"/>
+          <GroupSetting path=":pleroma.:frontends.:primary" />
         </li>
       </ul>
       <div class="setting-list">
         <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
         <ul class="cards-list">
-          <li v-for="frontend in frontends" :key="frontend.name">
+          <li
+            v-for="frontend in frontends"
+            :key="frontend.name"
+          >
             <strong>{{ frontend.name }}</strong>
             {{ ' ' }}
             <span v-if="adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name">
               <i18n-t
-                keypath="admin_dash.frontend.is_default"
                 v-if="adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]"
+                keypath="admin_dash.frontend.is_default"
               />
               <i18n-t
-                keypath="admin_dash.frontend.is_default_custom"
                 v-else
+                keypath="admin_dash.frontend.is_default_custom"
               >
                 <template #version>
                   <code>{{ adminDraft[':pleroma'][':frontends'][':primary'].ref }}</code>
@@ -45,13 +51,30 @@
             </span>
             <dl>
               <dt>{{ $t('admin_dash.frontend.repository') }}</dt>
-              <dd><a :href="frontend.git" target="_blank">{{ frontend.git }}</a></dd>
+              <dd>
+                <a
+                  :href="frontend.git"
+                  target="_blank"
+                >{{ frontend.git }}</a>
+              </dd>
               <template v-if="expertLevel">
                 <dt>{{ $t('admin_dash.frontend.versions') }}</dt>
-                <dd v-for="ref in frontend.refs" :key="ref"><code>{{ ref }}</code></dd>
+                <dd
+                  v-for="ref in frontend.refs"
+                  :key="ref"
+                >
+                  <code>{{ ref }}</code>
+                </dd>
               </template>
-              <dt v-if="expertLevel">{{ $t('admin_dash.frontend.build_url') }}</dt>
-              <dd v-if="expertLevel"><a :href="frontend.build_url" target="_blank">{{ frontend.build_url }}</a></dd>
+              <dt v-if="expertLevel">
+                {{ $t('admin_dash.frontend.build_url') }}
+              </dt>
+              <dd v-if="expertLevel">
+                <a
+                  :href="frontend.build_url"
+                  target="_blank"
+                >{{ frontend.build_url }}</a>
+              </dd>
             </dl>
             <div>
               <span class="btn-group">
@@ -62,7 +85,7 @@
                   @click="update(frontend)"
                 >
                   {{
-                      frontend.installed
+                    frontend.installed
                       ? $t('admin_dash.frontend.reinstall')
                       : $t('admin_dash.frontend.install')
                   }}
@@ -100,19 +123,22 @@
                   </template>
                 </Popover>
               </span>
-              <span class="btn-group" v-if="frontend.name !== 'admin-fe'">
+              <span
+                v-if="frontend.name !== 'admin-fe'"
+                class="btn-group"
+              >
                 <button
                   class="button button-default btn"
                   type="button"
                   :disabled="
-                             adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name &&
-                             adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]
-                             "
+                    adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name &&
+                      adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]
+                  "
                   :title="$t('admin_dash.frontend.update')"
                   @click="setDefault(frontend)"
                 >
                   {{
-                      $t('admin_dash.frontend.set_default')
+                    $t('admin_dash.frontend.set_default')
                   }}
                 </button>
                 {{ ' ' }}
diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index cc2278b0..0bede2c2 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -3,7 +3,10 @@
     v-if="matchesExpertLevel"
     class="AttachmentSetting"
   >
-    <label :for="path" :class="{ 'faint': shouldBeDisabled }">
+    <label
+      :for="path"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
@@ -51,10 +54,10 @@
           ref="mediaUpload"
           class="media-upload-icon"
           :drop-files="dropFiles"
-          @uploaded="setMediaFile"
-          @upload-failed="uploadFailed"
           normal-button
           :accept-types="acceptTypes"
+          @uploaded="setMediaFile"
+          @upload-failed="uploadFailed"
         />
       </div>
     </div>
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index ce168570..065cfbcf 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -3,7 +3,10 @@
     v-if="matchesExpertLevel"
     class="NumberSetting"
   >
-    <label :for="path" :class="{ 'faint': shouldBeDisabled }">
+    <label
+      :for="path"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index 84d0a9d6..9de99d78 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -3,7 +3,10 @@
     v-if="matchesExpertLevel"
     class="StringSetting"
   >
-    <label :for="path" :class="{ 'faint': shouldBeDisabled }">
+    <label
+      :for="path"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 57ec5535..4e7fd931 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -125,21 +125,24 @@
           id="unscrolled-content"
           class="extra-content"
         />
-        <span class="admin-buttons" v-if="modalMode === 'admin'">
+        <span
+          v-if="modalMode === 'admin'"
+          class="admin-buttons"
+        >
           <button
             class="button-default btn"
-            @click="resetAdminDraft"
             :disabled="!adminDraftAny"
+            @click="resetAdminDraft"
           >
-              {{ $t("admin_dash.reset_all") }}
+            {{ $t("admin_dash.reset_all") }}
           </button>
           {{ ' ' }}
           <button
             class="button-default btn"
-            @click="pushAdminDraft"
             :disabled="!adminDraftAny"
+            @click="pushAdminDraft"
           >
-              {{ $t("admin_dash.commit_all") }}
+            {{ $t("admin_dash.commit_all") }}
           </button>
         </span>
       </div>
-- 
cgit v1.2.3-70-g09d2


From 6816bc8badb34a41e41718b0d42e1021c974ff64 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 5 May 2023 01:50:41 +0300
Subject: remove unused stuff

---
 .../settings_modal/admin_tabs/frontends_tab.vue    |   8 +-
 .../settings_modal/admin_tabs/instance_tab.vue     | 108 ++++++---------------
 .../settings_modal/admin_tabs/limits_tab.vue       |  56 +++--------
 3 files changed, 43 insertions(+), 129 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index e108a963..5281ef22 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -13,14 +13,10 @@
           <p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
         </li>
         <li>
-          <StringSetting path=":pleroma.:frontends.:primary.name">
-            NAME
-          </StringSetting>
+          <StringSetting path=":pleroma.:frontends.:primary.name"/>
         </li>
         <li>
-          <StringSetting path=":pleroma.:frontends.:primary.ref">
-            REF
-          </StringSetting>
+          <StringSetting path=":pleroma.:frontends.:primary.ref"/>
         </li>
         <li>
           <GroupSetting path=":pleroma.:frontends.:primary" />
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index e519e135..d537adb6 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -4,34 +4,22 @@
       <h2>{{ $t('admin_dash.instance.instance') }}</h2>
       <ul class="setting-list">
         <li>
-          <StringSetting path=":pleroma.:instance.:name">
-            NAME
-          </StringSetting>
+          <StringSetting path=":pleroma.:instance.:name"/>
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:email">
-            ADMIN EMAIL
-          </StringSetting>
+          <StringSetting path=":pleroma.:instance.:email"/>
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:description">
-            DESCRIPTION
-          </StringSetting>
+          <StringSetting path=":pleroma.:instance.:description"/>
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:short_description">
-            SHORT DESCRIPTION
-          </StringSetting>
+          <StringSetting path=":pleroma.:instance.:short_description"/>
         </li>
         <li>
-          <AttachmentSetting path=":pleroma.:instance.:instance_thumbnail">
-            INSTANCE THUMBNAIL
-          </AttachmentSetting>
+          <AttachmentSetting path=":pleroma.:instance.:instance_thumbnail"/>
         </li>
         <li>
-          <AttachmentSetting path=":pleroma.:instance.:background_image">
-            BACKGROUND IMAGE
-          </AttachmentSetting>
+          <AttachmentSetting path=":pleroma.:instance.:background_image"/>
         </li>
       </ul>
     </div>
@@ -39,53 +27,39 @@
       <h2>{{ $t('admin_dash.instance.registrations') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path=":pleroma.:instance.:registrations_open">
-            REGISTRATIONS OPEN
-          </BooleanSetting>
+          <BooleanSetting path=":pleroma.:instance.:registrations_open"/>
           <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
                 path=":pleroma.:instance.:invites_enabled"
                 parent-path=":pleroma.:instance.:registrations_open"
                 parent-invert
-              >
-                INVITES ENABLED
-              </BooleanSetting>
+              />
             </li>
           </ul>
         </li>
         <li>
-          <BooleanSetting path=":pleroma.:instance.:birthday_required">
-            BDEY REQUIRED
-          </BooleanSetting>
+          <BooleanSetting path=":pleroma.:instance.:birthday_required"/>
           <ul class="setting-list suboptions">
             <li>
               <IntegerSetting
                 path=":pleroma.:instance.:birthday_min_age"
                 parent-path=":pleroma.:instance.:birthday_required"
-              >
-                BDEY age of consent
-              </IntegerSetting>
+              />
             </li>
           </ul>
         </li>
         <li>
-          <BooleanSetting path=":pleroma.:instance.:account_activation_required">
-            ACTIVATION REQUIRED
-          </BooleanSetting>
+          <BooleanSetting path=":pleroma.:instance.:account_activation_required"/>
         </li>
         <li>
-          <BooleanSetting path=":pleroma.:instance.:account_approval_required">
-            APPROVAL REQUIRED
-          </BooleanSetting>
+          <BooleanSetting path=":pleroma.:instance.:account_approval_required"/>
         </li>
         <li>
           <h3>{{ $t('admin_dash.instance.captcha_header') }}</h3>
         </li>
         <li>
-          <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']">
-            CAPTCHA
-          </BooleanSetting>
+          <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']"/>
           <ul class="setting-list suboptions">
             <li>
               <ChoiceSetting
@@ -95,15 +69,11 @@
                   'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
                   'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
                 }"
-              >
-                CAPTCHA TYPE
-              </ChoiceSetting>
+              />
               <IntegerSetting
                 :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
                 :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
-              >
-                VALID
-              </IntegerSetting>
+              />
             </li>
           </ul>
           <ul
@@ -112,9 +82,7 @@
           >
             <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
             <li>
-              <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']">
-                cockAPTCHA ENDPOINT
-              </StringSetting>
+              <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']"/>
             </li>
           </ul>
         </li>
@@ -124,17 +92,13 @@
       <h2>{{ $t('admin_dash.instance.access') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path=":pleroma.:instance.:public">
-            PUBLIC
-          </BooleanSetting>
+          <BooleanSetting path=":pleroma.:instance.:public"/>
         </li>
         <li>
           <h3>{{ $t('admin_dash.instance.restrict.header') }}</h3>
         </li>
         <li>
-          <ChoiceSetting path=":pleroma.:instance.:limit_to_local_content">
-            SEARCH RESTRICTION
-          </ChoiceSetting>
+          <ChoiceSetting path=":pleroma.:instance.:limit_to_local_content"/>
         </li>
         <li>
           <h4>{{ $t('admin_dash.instance.restrict.timelines') }}</h4>
@@ -145,9 +109,7 @@
             indeterminate-state=":if_instance_is_private"
             swap-description-and-label
             hide-description
-          >
-            LOCAL TIMELINES
-          </BooleanSetting>
+          />
         </li>
         <li>
           <BooleanSetting
@@ -155,14 +117,10 @@
             indeterminate-state=":if_instance_is_private"
             swap-description-and-label
             hide-description
-          >
-            FED TIMELINES
-          </BooleanSetting>
+          />
         </li>
         <li>
-          <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines">
-            TIMELINES
-          </GroupSetting>
+          <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines"/>
         </li>
         <li>
           <h4>{{ $t('admin_dash.instance.restrict.profiles') }}</h4>
@@ -173,9 +131,7 @@
             indeterminate-state=":if_instance_is_private"
             swap-description-and-label
             hide-description
-          >
-            LOCAL PROFILES
-          </BooleanSetting>
+          />
         </li>
         <li>
           <BooleanSetting
@@ -183,14 +139,10 @@
             indeterminate-state=":if_instance_is_private"
             swap-description-and-label
             hide-description
-          >
-            FED PROFILES
-          </BooleanSetting>
+          />
         </li>
         <li>
-          <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles">
-            PROFILES
-          </GroupSetting>
+          <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles"/>
         </li>
         <li>
           <h4>{{ $t('admin_dash.instance.restrict.activities') }}</h4>
@@ -201,9 +153,7 @@
             indeterminate-state=":if_instance_is_private"
             swap-description-and-label
             hide-description
-          >
-            LOCAL STATUSES
-          </BooleanSetting>
+          />
         </li>
         <li>
           <BooleanSetting
@@ -211,14 +161,10 @@
             indeterminate-state=":if_instance_is_private"
             swap-description-and-label
             hide-description
-          >
-            FED STATUSES
-          </BooleanSetting>
+          />
         </li>
         <li>
-          <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities">
-            STATUSES
-          </GroupSetting>
+          <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities"/>
         </li>
       </ul>
     </div>
diff --git a/src/components/settings_modal/admin_tabs/limits_tab.vue b/src/components/settings_modal/admin_tabs/limits_tab.vue
index f7a70c97..068f2cda 100644
--- a/src/components/settings_modal/admin_tabs/limits_tab.vue
+++ b/src/components/settings_modal/admin_tabs/limits_tab.vue
@@ -11,9 +11,7 @@
             source="admin"
             path=":pleroma.:instance.:limit"
             draft-mode
-          >
-            POST LIMIT
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
@@ -21,9 +19,7 @@
             path=":pleroma.:instance.:remote_limit"
             expert="1"
             draft-mode
-          >
-            POST LIMIT (remote)
-          </IntegerSetting>
+          />
         </li>
         <li>
           <h3>{{ $t('admin_dash.limits.uploads') }}</h3>
@@ -33,27 +29,21 @@
             source="admin"
             path=":pleroma.:instance.:description_limit"
             draft-mode
-          >
-            IMAGE DESCRIPTION LIMIT
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:upload_limit"
             draft-mode
-          >
-            UPLOAD LIMIT KiB
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:max_media_attachments"
             draft-mode
-          >
-            MAX ATTACHMENTS
-          </IntegerSetting>
+          />
         </li>
         <li>
           <h3>{{ $t('admin_dash.limits.users') }}</h3>
@@ -63,27 +53,21 @@
             source="admin"
             path=":pleroma.:instance.:max_pinned_statuses"
             draft-mode
-          >
-            MAX PINNED POSTS
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:user_bio_length"
             draft-mode
-          >
-            BIO LENGTH
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:user_name_length"
             draft-mode
-          >
-            NAME LENGTH
-          </IntegerSetting>
+          />
         </li>
         <li>
           <h4>{{ $t('admin_dash.limits.profile_fields') }}</h4>
@@ -93,9 +77,7 @@
             source="admin"
             path=":pleroma.:instance.:max_account_fields"
             draft-mode
-          >
-            MAX ACCOUNT FIELDS
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
@@ -103,27 +85,21 @@
             path=":pleroma.:instance.:max_remote_account_fields"
             draft-mode
             expert="1"
-          >
-            MAX ACCOUNT FIELDS (remote)
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:account_field_name_length"
             draft-mode
-          >
-            MAX ACCOUNT FIELD NAME
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:account_field_value_length"
             draft-mode
-          >
-            MAX ACCOUNT VALUE NAME
-          </IntegerSetting>
+          />
         </li>
         <li>
           <h4>{{ $t('admin_dash.limits.user_uploads') }}</h4>
@@ -133,18 +109,14 @@
             source="admin"
             path=":pleroma.:instance.:avatar_upload_limit"
             draft-mode
-          >
-            MAX AVATAR SIZE KiB
-          </IntegerSetting>
+          />
         </li>
         <li>
           <IntegerSetting
             source="admin"
             path=":pleroma.:instance.:banner_upload_limit"
             draft-mode
-          >
-            MAX BANNER SIZE KiB
-          </IntegerSetting>
+          />
         </li>
       </ul>
     </div>
-- 
cgit v1.2.3-70-g09d2


From b9c69a2272219865ff7e5b35dd1a0df7ead16538 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 21:01:29 +0300
Subject: improve the semantics

---
 .../settings_modal/admin_tabs/frontends_tab.vue    |  28 +--
 .../settings_modal/admin_tabs/limits_tab.vue       | 222 +++++++++++----------
 2 files changed, 130 insertions(+), 120 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 5281ef22..f09e6a80 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -11,15 +11,17 @@
           <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
           <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
           <p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
-        </li>
-        <li>
-          <StringSetting path=":pleroma.:frontends.:primary.name"/>
-        </li>
-        <li>
-          <StringSetting path=":pleroma.:frontends.:primary.ref"/>
-        </li>
-        <li>
-          <GroupSetting path=":pleroma.:frontends.:primary" />
+          <ul class="setting-list">
+            <li>
+              <StringSetting path=":pleroma.:frontends.:primary.name"/>
+            </li>
+            <li>
+              <StringSetting path=":pleroma.:frontends.:primary.ref"/>
+            </li>
+            <li>
+              <GroupSetting path=":pleroma.:frontends.:primary" />
+            </li>
+          </ul>
         </li>
       </ul>
       <div class="setting-list">
@@ -77,7 +79,6 @@
                 <button
                   class="button button-default btn"
                   type="button"
-                  :title="$t('admin_dash.frontend.update')"
                   @click="update(frontend)"
                 >
                   {{
@@ -112,7 +113,7 @@
                     <button
                       class="button button-default btn dropdown-button"
                       type="button"
-                      :title="$t('admin_dash.frontend.update')"
+                      :title="$t('admin_dash.frontend.more_install_options')"
                     >
                       <FAIcon icon="chevron-down" />
                     </button>
@@ -120,7 +121,7 @@
                 </Popover>
               </span>
               <span
-                v-if="frontend.name !== 'admin-fe'"
+                v-if="frontend.installed && frontend.name !== 'admin-fe'"
                 class="btn-group"
               >
                 <button
@@ -130,7 +131,6 @@
                     adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name &&
                       adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]
                   "
-                  :title="$t('admin_dash.frontend.update')"
                   @click="setDefault(frontend)"
                 >
                   {{
@@ -164,7 +164,7 @@
                     <button
                       class="button button-default btn dropdown-button"
                       type="button"
-                      :title="$t('admin_dash.frontend.update')"
+                      :title="$t('admin_dash.frontend.more_default_options')"
                     >
                       <FAIcon icon="chevron-down" />
                     </button>
diff --git a/src/components/settings_modal/admin_tabs/limits_tab.vue b/src/components/settings_modal/admin_tabs/limits_tab.vue
index 068f2cda..ef4b9271 100644
--- a/src/components/settings_modal/admin_tabs/limits_tab.vue
+++ b/src/components/settings_modal/admin_tabs/limits_tab.vue
@@ -5,118 +5,128 @@
       <ul class="setting-list">
         <li>
           <h3>{{ $t('admin_dash.limits.posts') }}</h3>
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:limit"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:remote_limit"
-            expert="1"
-            draft-mode
-          />
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:limit"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:remote_limit"
+                expert="1"
+                draft-mode
+              />
+            </li>
+          </ul>
         </li>
         <li>
           <h3>{{ $t('admin_dash.limits.uploads') }}</h3>
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:description_limit"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:upload_limit"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:max_media_attachments"
-            draft-mode
-          />
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:description_limit"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:upload_limit"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:max_media_attachments"
+                draft-mode
+              />
+            </li>
+          </ul>
         </li>
         <li>
           <h3>{{ $t('admin_dash.limits.users') }}</h3>
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:max_pinned_statuses"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:user_bio_length"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:user_name_length"
-            draft-mode
-          />
-        </li>
-        <li>
-          <h4>{{ $t('admin_dash.limits.profile_fields') }}</h4>
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:max_account_fields"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:max_remote_account_fields"
-            draft-mode
-            expert="1"
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:account_field_name_length"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:account_field_value_length"
-            draft-mode
-          />
-        </li>
-        <li>
-          <h4>{{ $t('admin_dash.limits.user_uploads') }}</h4>
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:avatar_upload_limit"
-            draft-mode
-          />
-        </li>
-        <li>
-          <IntegerSetting
-            source="admin"
-            path=":pleroma.:instance.:banner_upload_limit"
-            draft-mode
-          />
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:max_pinned_statuses"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:user_bio_length"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:user_name_length"
+                draft-mode
+              />
+            </li>
+            <li>
+              <h4>{{ $t('admin_dash.limits.profile_fields') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:max_account_fields"
+                    draft-mode
+                  />
+                </li>
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:max_remote_account_fields"
+                    draft-mode
+                    expert="1"
+                  />
+                </li>
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:account_field_name_length"
+                    draft-mode
+                  />
+                </li>
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:account_field_value_length"
+                    draft-mode
+                  />
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4>{{ $t('admin_dash.limits.user_uploads') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:avatar_upload_limit"
+                    draft-mode
+                  />
+                </li>
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:banner_upload_limit"
+                    draft-mode
+                  />
+                </li>
+              </ul>
+            </li>
+          </ul>
         </li>
       </ul>
     </div>
-- 
cgit v1.2.3-70-g09d2


From 05a7e612aa6d9f2a44eea22266b325933da6f5ad Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 21:10:06 +0300
Subject: show warning for developer for missing labels

---
 .../settings_modal/helpers/attachment_setting.vue        |  5 +++--
 .../settings_modal/helpers/boolean_setting.vue           | 16 +++++++++++++---
 src/components/settings_modal/helpers/number_setting.vue |  5 +++--
 src/components/settings_modal/helpers/string_setting.vue |  5 +++--
 4 files changed, 22 insertions(+), 9 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index 0bede2c2..447fa172 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -10,9 +10,10 @@
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
-      <template v-else>
-        <slot />
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
       </template>
+      <slot v-else />
 
     </label>
     <p
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 3089c3b3..5ddf5aad 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -10,16 +10,16 @@
       @update:modelValue="update"
     >
       <span
-        v-if="!!$slots.default"
         class="label"
         :class="{ 'faint': shouldBeDisabled }"
       >
         <template v-if="backendDescriptionLabel">
           {{ backendDescriptionLabel }}
         </template>
-        <template v-else>
-          <slot />
+        <template v-else-if="source === 'admin'">
+          MISSING LABEL FOR {{ path }}
         </template>
+        <slot v-else />
       </span>
     </Checkbox>
     <ModifiedIndicator
@@ -35,6 +35,16 @@
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
+    <!-- debugging -->
+    <!--
+    <p
+      v-else
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      MISSING DESCRIPTION FOR {{ path }}
+    </p>
+    -->
   </label>
 </template>
 
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index 065cfbcf..93f11331 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -10,9 +10,10 @@
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
-      <template v-else>
-        <slot />
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
       </template>
+      <slot v-else />
     </label>
     <input
       :id="path"
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index 9de99d78..0cfa61ce 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -10,9 +10,10 @@
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
-      <template v-else>
-        <slot />
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
       </template>
+      <slot v-else />
     </label>
     <input
       :id="path"
-- 
cgit v1.2.3-70-g09d2


From 0f812394515c2dd428e3889a924df2885bdf44f1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 21:11:48 +0300
Subject: remove restriction on number input's width

---
 src/components/settings_modal/settings_modal_admin_content.scss | 4 ----
 src/components/settings_modal/settings_modal_user_content.scss  | 4 ----
 2 files changed, 8 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss
index 87df7982..c984d703 100644
--- a/src/components/settings_modal/settings_modal_admin_content.scss
+++ b/src/components/settings_modal/settings_modal_admin_content.scss
@@ -48,9 +48,5 @@
       color: var(--cRed, $fallback--cRed);
       color: $fallback--cRed;
     }
-
-    .number-input {
-      max-width: 6em;
-    }
   }
 }
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
index 87df7982..c984d703 100644
--- a/src/components/settings_modal/settings_modal_user_content.scss
+++ b/src/components/settings_modal/settings_modal_user_content.scss
@@ -48,9 +48,5 @@
       color: var(--cRed, $fallback--cRed);
       color: $fallback--cRed;
     }
-
-    .number-input {
-      max-width: 6em;
-    }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 2322646442365b0575393a897098a90c3bdc961f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 21:13:07 +0300
Subject: reintroduce width limit on number input but only for sizesetting

---
 .../settings_modal/helpers/size_setting.vue           | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/size_setting.vue b/src/components/settings_modal/helpers/size_setting.vue
index 5a78f100..6c3fbaeb 100644
--- a/src/components/settings_modal/helpers/size_setting.vue
+++ b/src/components/settings_modal/helpers/size_setting.vue
@@ -45,11 +45,18 @@
 <script src="./size_setting.js"></script>
 
 <style lang="scss">
-.css-unit-input,
-.css-unit-input select {
-  margin-left: 0.5em;
-  width: 4em;
-  max-width: 4em;
-  min-width: 4em;
+.SizeSetting {
+  .number-input {
+    max-width: 6.5em;
+  }
+
+  .css-unit-input,
+  .css-unit-input select {
+    margin-left: 0.5em;
+    width: 4em;
+    max-width: 4em;
+    min-width: 4em;
+  }
 }
+
 </style>
-- 
cgit v1.2.3-70-g09d2


From 09e3735e375b9b8248d9aa1153d065a118abca58 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 21:36:18 +0300
Subject: semantics + description for instance access section

---
 .../settings_modal/admin_tabs/instance_tab.vue     | 206 ++++++++++++---------
 src/i18n/en.json                                   |  11 +-
 2 files changed, 124 insertions(+), 93 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index d537adb6..a7ef0f68 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -57,32 +57,35 @@
         </li>
         <li>
           <h3>{{ $t('admin_dash.instance.captcha_header') }}</h3>
-        </li>
-        <li>
-          <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']"/>
-          <ul class="setting-list suboptions">
+          <ul class="setting-list">
             <li>
-              <ChoiceSetting
-                :path="[':pleroma', 'Pleroma.Captcha', ':method']"
-                :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
-                :option-label-map="{
-                  'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
-                  'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
-                }"
-              />
-              <IntegerSetting
-                :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
-                :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
-              />
-            </li>
-          </ul>
-          <ul
-            v-if="adminDraft[':pleroma']['Pleroma.Captcha'][':enabled'] && adminDraft[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
-            class="setting-list suboptions"
-          >
-            <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
-            <li>
-              <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']"/>
+              <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']"/>
+              <ul class="setting-list suboptions">
+                <li>
+                  <ChoiceSetting
+                    :path="[':pleroma', 'Pleroma.Captcha', ':method']"
+                    :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+                    :option-label-map="{
+                      'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
+                      'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
+                    }"
+                  />
+                  <IntegerSetting
+                    :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
+                    :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+                  />
+                </li>
+                <li
+                  v-if="adminDraft[':pleroma']['Pleroma.Captcha'][':enabled'] && adminDraft[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
+                >
+                  <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
+                  <ul class="setting-list">
+                    <li>
+                      <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']"/>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
             </li>
           </ul>
         </li>
@@ -91,80 +94,99 @@
     <div class="setting-item">
       <h2>{{ $t('admin_dash.instance.access') }}</h2>
       <ul class="setting-list">
-        <li>
-          <BooleanSetting path=":pleroma.:instance.:public"/>
-        </li>
-        <li>
-          <h3>{{ $t('admin_dash.instance.restrict.header') }}</h3>
-        </li>
-        <li>
-          <ChoiceSetting path=":pleroma.:instance.:limit_to_local_content"/>
-        </li>
-        <li>
-          <h4>{{ $t('admin_dash.instance.restrict.timelines') }}</h4>
-        </li>
-        <li>
-          <BooleanSetting
-            path=":pleroma.:restrict_unauthenticated.:timelines.:local"
-            indeterminate-state=":if_instance_is_private"
-            swap-description-and-label
-            hide-description
-          />
-        </li>
-        <li>
-          <BooleanSetting
-            path=":pleroma.:restrict_unauthenticated.:timelines.:federated"
-            indeterminate-state=":if_instance_is_private"
-            swap-description-and-label
-            hide-description
-          />
-        </li>
-        <li>
-          <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines"/>
-        </li>
-        <li>
-          <h4>{{ $t('admin_dash.instance.restrict.profiles') }}</h4>
-        </li>
-        <li>
-          <BooleanSetting
-            path=":pleroma.:restrict_unauthenticated.:profiles.:local"
-            indeterminate-state=":if_instance_is_private"
-            swap-description-and-label
-            hide-description
-          />
-        </li>
-        <li>
-          <BooleanSetting
-            path=":pleroma.:restrict_unauthenticated.:profiles.:remote"
-            indeterminate-state=":if_instance_is_private"
-            swap-description-and-label
-            hide-description
-          />
-        </li>
-        <li>
-          <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles"/>
-        </li>
-        <li>
-          <h4>{{ $t('admin_dash.instance.restrict.activities') }}</h4>
-        </li>
         <li>
           <BooleanSetting
-            path=":pleroma.:restrict_unauthenticated.:activities.:local"
-            indeterminate-state=":if_instance_is_private"
-            swap-description-and-label
-            hide-description
-          />
+            override-backend-description
+            override-backend-description-label
+            path=":pleroma.:instance.:public"
+            />
         </li>
         <li>
-          <BooleanSetting
-            path=":pleroma.:restrict_unauthenticated.:activities.:remote"
-            indeterminate-state=":if_instance_is_private"
-            swap-description-and-label
-            hide-description
+          <ChoiceSetting
+            override-backend-description
+            override-backend-description-label
+            path=":pleroma.:instance.:limit_to_local_content"
           />
         </li>
         <li>
-          <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities"/>
+          <h3>{{ $t('admin_dash.instance.restrict.header') }}</h3>
+          <p>
+            {{ $t('admin_dash.instance.restrict.description') }}
+          </p>
+          <ul class="setting-list">
+            <li>
+              <h4>{{ $t('admin_dash.instance.restrict.timelines') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:timelines.:local"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                    />
+                </li>
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:timelines.:federated"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                    />
+                </li>
+                <li>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines"/>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4>{{ $t('admin_dash.instance.restrict.profiles') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:profiles.:local"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                    />
+                </li>
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:profiles.:remote"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                    />
+                </li>
+                <li>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles"/>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4>{{ $t('admin_dash.instance.restrict.activities') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:activities.:local"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                    />
+                </li>
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:activities.:remote"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                    />
+                </li>
+                <li>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities"/>
+                </li>
+              </ul>
+            </li>
+          </ul>
         </li>
       </ul>
     </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 072ce952..33f48225 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -869,7 +869,8 @@
       "kocaptcha": "KoCaptcha settings",
       "access": "Instance access",
       "restrict": {
-        "header": "Restrict access",
+        "header": "Restrict access for anonymous visitors",
+        "description": "Detailed setting for allowing/disallowing access to certain aspects of API. By default (indeterminate state) it will disallow if instance is not public, ticked checkbox means disallow access even if instance is public, unticked means allow access even if instance is private. Please note that unexpected behavior might happen if some settings are set, i.e. if profile access is disabled posts will show without profile information.",
         "timelines": "Timelines access",
         "profiles": "User profiles access",
         "activities": "Statues/activities access"
@@ -905,6 +906,14 @@
     "temp_overrides": {
       ":pleroma": {
         ":instance": {
+          ":public": {
+            "label": "Instance is public",
+            "description": "Disabling this will make all API accessible only for logged-in users, this will make Public and Federated timelines inaccessible to anonymous visitors."
+          },
+          ":limit_to_local_content": {
+            "label": "Limit search to local content",
+            "description": "Disables global network search for unauthenticated (default), all users or none"
+          },
           ":description_limit": {
             "label": "Limit",
             "description": "Character limit for attachment descriptions"
-- 
cgit v1.2.3-70-g09d2


From 039b6c61a2ac0c64b1d24295374401f8bf56af0a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 21:37:29 +0300
Subject: lint

---
 .../settings_modal/admin_tabs/frontends_tab.vue    |  4 +-
 .../settings_modal/admin_tabs/instance_tab.vue     | 44 +++++++++++-----------
 2 files changed, 24 insertions(+), 24 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index f09e6a80..13b8fa6b 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -13,10 +13,10 @@
           <p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
           <ul class="setting-list">
             <li>
-              <StringSetting path=":pleroma.:frontends.:primary.name"/>
+              <StringSetting path=":pleroma.:frontends.:primary.name" />
             </li>
             <li>
-              <StringSetting path=":pleroma.:frontends.:primary.ref"/>
+              <StringSetting path=":pleroma.:frontends.:primary.ref" />
             </li>
             <li>
               <GroupSetting path=":pleroma.:frontends.:primary" />
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index a7ef0f68..cbc578f1 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -4,22 +4,22 @@
       <h2>{{ $t('admin_dash.instance.instance') }}</h2>
       <ul class="setting-list">
         <li>
-          <StringSetting path=":pleroma.:instance.:name"/>
+          <StringSetting path=":pleroma.:instance.:name" />
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:email"/>
+          <StringSetting path=":pleroma.:instance.:email" />
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:description"/>
+          <StringSetting path=":pleroma.:instance.:description" />
         </li>
         <li>
-          <StringSetting path=":pleroma.:instance.:short_description"/>
+          <StringSetting path=":pleroma.:instance.:short_description" />
         </li>
         <li>
-          <AttachmentSetting path=":pleroma.:instance.:instance_thumbnail"/>
+          <AttachmentSetting path=":pleroma.:instance.:instance_thumbnail" />
         </li>
         <li>
-          <AttachmentSetting path=":pleroma.:instance.:background_image"/>
+          <AttachmentSetting path=":pleroma.:instance.:background_image" />
         </li>
       </ul>
     </div>
@@ -27,7 +27,7 @@
       <h2>{{ $t('admin_dash.instance.registrations') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path=":pleroma.:instance.:registrations_open"/>
+          <BooleanSetting path=":pleroma.:instance.:registrations_open" />
           <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
@@ -39,7 +39,7 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path=":pleroma.:instance.:birthday_required"/>
+          <BooleanSetting path=":pleroma.:instance.:birthday_required" />
           <ul class="setting-list suboptions">
             <li>
               <IntegerSetting
@@ -50,16 +50,16 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path=":pleroma.:instance.:account_activation_required"/>
+          <BooleanSetting path=":pleroma.:instance.:account_activation_required" />
         </li>
         <li>
-          <BooleanSetting path=":pleroma.:instance.:account_approval_required"/>
+          <BooleanSetting path=":pleroma.:instance.:account_approval_required" />
         </li>
         <li>
           <h3>{{ $t('admin_dash.instance.captcha_header') }}</h3>
           <ul class="setting-list">
             <li>
-              <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']"/>
+              <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']" />
               <ul class="setting-list suboptions">
                 <li>
                   <ChoiceSetting
@@ -81,7 +81,7 @@
                   <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
                   <ul class="setting-list">
                     <li>
-                      <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']"/>
+                      <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']" />
                     </li>
                   </ul>
                 </li>
@@ -99,7 +99,7 @@
             override-backend-description
             override-backend-description-label
             path=":pleroma.:instance.:public"
-            />
+          />
         </li>
         <li>
           <ChoiceSetting
@@ -123,7 +123,7 @@
                     indeterminate-state=":if_instance_is_private"
                     swap-description-and-label
                     hide-description
-                    />
+                  />
                 </li>
                 <li>
                   <BooleanSetting
@@ -131,10 +131,10 @@
                     indeterminate-state=":if_instance_is_private"
                     swap-description-and-label
                     hide-description
-                    />
+                  />
                 </li>
                 <li>
-                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines"/>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines" />
                 </li>
               </ul>
             </li>
@@ -147,7 +147,7 @@
                     indeterminate-state=":if_instance_is_private"
                     swap-description-and-label
                     hide-description
-                    />
+                  />
                 </li>
                 <li>
                   <BooleanSetting
@@ -155,10 +155,10 @@
                     indeterminate-state=":if_instance_is_private"
                     swap-description-and-label
                     hide-description
-                    />
+                  />
                 </li>
                 <li>
-                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles"/>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles" />
                 </li>
               </ul>
             </li>
@@ -171,7 +171,7 @@
                     indeterminate-state=":if_instance_is_private"
                     swap-description-and-label
                     hide-description
-                    />
+                  />
                 </li>
                 <li>
                   <BooleanSetting
@@ -179,10 +179,10 @@
                     indeterminate-state=":if_instance_is_private"
                     swap-description-and-label
                     hide-description
-                    />
+                  />
                 </li>
                 <li>
-                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities"/>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities" />
                 </li>
               </ul>
             </li>
-- 
cgit v1.2.3-70-g09d2


From b79f297692eeca5e774a1dd124cec2b3bc41b977 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 22:04:05 +0300
Subject: fix double pushbuttons in the draft buttons

---
 src/components/popover/popover.js                  |  3 ++
 src/components/popover/popover.vue                 |  3 +-
 .../settings_modal/helpers/draft_buttons.vue       | 40 +++++++---------------
 3 files changed, 18 insertions(+), 28 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index d44b266b..bc078533 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -45,6 +45,9 @@ const Popover = {
     // Lets hover popover stay when clicking inside of it
     stayOnClick: Boolean,
 
+    // Use styled button (to avoid nested buttons)
+    normalButton: Boolean,
+
     triggerAttrs: {
       type: Object,
       default: {}
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index fd0fd821..1a4bffd9 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -5,7 +5,8 @@
   >
     <button
       ref="trigger"
-      class="button-unstyled popover-trigger-button"
+      class="popover-trigger-button"
+      :class="normalButton ? 'button-default btn' : 'button-unstyled'"
       type="button"
       v-bind="triggerAttrs"
       @click="onClick"
diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
index 80da92e8..fd6d50e3 100644
--- a/src/components/settings_modal/helpers/draft_buttons.vue
+++ b/src/components/settings_modal/helpers/draft_buttons.vue
@@ -7,18 +7,12 @@
     <Popover
       v-if="$parent.isDirty"
       trigger="hover"
+      normal-button
+      @click="$parent.commitDraft"
       :trigger-attrs="{ 'aria-label': $t('settings.commit_value_tooltip') }"
     >
       <template #trigger>
-        &nbsp;
-        <button
-          class="button button-default btn"
-          type="button"
-          :title="$t('settings.commit_value')"
-          @click="$parent.commitDraft"
-        >
-          {{ $t('settings.commit_value') }}
-        </button>
+        {{ $t('settings.commit_value') }}
       </template>
       <template #content>
         <div class="modified-tooltip">
@@ -29,18 +23,12 @@
     <Popover
       v-if="$parent.isDirty"
       trigger="hover"
+      normal-button
       :trigger-attrs="{ 'aria-label': $t('settings.reset_value_tooltip') }"
+      @click="$parent.reset"
     >
       <template #trigger>
-        &nbsp;
-        <button
-          class="button button-default btn"
-          type="button"
-          :title="$t('settings.reset_value')"
-          @click="$parent.reset"
-        >
-          {{ $t('settings.reset_value') }}
-        </button>
+        {{ $t('settings.reset_value') }}
       </template>
       <template #content>
         <div class="modified-tooltip">
@@ -51,18 +39,12 @@
     <Popover
       v-if="$parent.canHardReset"
       trigger="hover"
+      normal-button
+      @click="$parent.hardReset"
       :trigger-attrs="{ 'aria-label': $t('settings.hard_reset_value_tooltip') }"
     >
       <template #trigger>
-        &nbsp;
-        <button
-          class="button button-default btn"
-          type="button"
-          :title="$t('settings.hard_reset_value')"
-          @click="$parent.hardReset"
-        >
-          {{ $t('settings.hard_reset_value') }}
-        </button>
+        {{ $t('settings.hard_reset_value') }}
       </template>
       <template #content>
         <div class="modified-tooltip">
@@ -92,6 +74,10 @@ export default {
 .DraftButtons {
   display: inline-block;
   position: relative;
+
+  .button-default {
+    margin-left: 0.5em;
+  }
 }
 
 .draft-tooltip {
-- 
cgit v1.2.3-70-g09d2


From ad3916027a1994cbc2a5a7b6c35576ef7a971c12 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 22:14:49 +0300
Subject: lint

---
 src/components/settings_modal/helpers/draft_buttons.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
index fd6d50e3..46a70e86 100644
--- a/src/components/settings_modal/helpers/draft_buttons.vue
+++ b/src/components/settings_modal/helpers/draft_buttons.vue
@@ -8,8 +8,8 @@
       v-if="$parent.isDirty"
       trigger="hover"
       normal-button
-      @click="$parent.commitDraft"
       :trigger-attrs="{ 'aria-label': $t('settings.commit_value_tooltip') }"
+      @click="$parent.commitDraft"
     >
       <template #trigger>
         {{ $t('settings.commit_value') }}
@@ -40,8 +40,8 @@
       v-if="$parent.canHardReset"
       trigger="hover"
       normal-button
-      @click="$parent.hardReset"
       :trigger-attrs="{ 'aria-label': $t('settings.hard_reset_value_tooltip') }"
+      @click="$parent.hardReset"
     >
       <template #trigger>
         {{ $t('settings.hard_reset_value') }}
-- 
cgit v1.2.3-70-g09d2


From 4664d99af26bfebadf70be740abfd49acc045897 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 9 May 2023 23:29:30 +0300
Subject: lint

---
 src/components/settings_modal/helpers/attachment_setting.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index 447fa172..bbc5172c 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -87,7 +87,8 @@
   .controls {
     margin-bottom: 0.5em;
 
-    input, button {
+    input,
+    button {
       width: 100%;
     }
   }
-- 
cgit v1.2.3-70-g09d2


From 6b0d72937e19c87ea8a925b41a1475704bbd1a56 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 21 May 2023 18:31:25 +0000
Subject: Apply 1 suggestion(s) to 1 file(s)

---
 src/components/settings_modal/helpers/boolean_setting.vue | 10 ----------
 1 file changed, 10 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 5ddf5aad..5a9eab34 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -35,16 +35,6 @@
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
-    <!-- debugging -->
-    <!--
-    <p
-      v-else
-      class="setting-description"
-      :class="{ 'faint': shouldBeDisabled }"
-    >
-      MISSING DESCRIPTION FOR {{ path }}
-    </p>
-    -->
   </label>
 </template>
 
-- 
cgit v1.2.3-70-g09d2


From d223683b2e1d7f3fc4c2dfc4e4a532cc6c3d67a1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 May 2023 11:32:16 +0300
Subject: make detailed access restriction an expert section

---
 src/components/settings_modal/admin_tabs/instance_tab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index cbc578f1..a6be776b 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -108,7 +108,7 @@
             path=":pleroma.:instance.:limit_to_local_content"
           />
         </li>
-        <li>
+        <li v-if="expertLevel">
           <h3>{{ $t('admin_dash.instance.restrict.header') }}</h3>
           <p>
             {{ $t('admin_dash.instance.restrict.description') }}
-- 
cgit v1.2.3-70-g09d2


From b3d0360699d2c4a05f92cdbc58493afc2aa55f7a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 May 2023 11:44:41 +0300
Subject: fix and cleanup reset button

---
 src/components/settings_modal/helpers/setting.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index fec1b947..b3add346 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -1,7 +1,7 @@
 import ModifiedIndicator from './modified_indicator.vue'
 import ProfileSettingIndicator from './profile_setting_indicator.vue'
 import DraftButtons from './draft_buttons.vue'
-import { get, set } from 'lodash'
+import { get, set, cloneDeep } from 'lodash'
 
 export default {
   components: {
@@ -218,13 +218,10 @@ export default {
       }
     },
     reset () {
-      console.log('reset')
       if (this.realDraftMode) {
-        console.log(this.draft)
-        console.log(this.state)
-        this.draft = this.state
+        this.draft = cloneDeep(this.state)
       } else {
-        set(this.$store.getters.mergedConfig, this.path, this.defaultState)
+        set(this.$store.getters.mergedConfig, this.path, cloneDeep(this.defaultState))
       }
     },
     hardReset () {
-- 
cgit v1.2.3-70-g09d2