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: [PATCH 01/49] 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 ++----------
 .../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 ++-------
 ...ator.vue => profile_setting_indicator.vue} | 12 +--
 .../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 ++--
 .../settings_modal/tabs/general_tab.js        |  6 +-
 .../settings_modal/tabs/general_tab.vue       | 29 +++----
 .../settings_modal/tabs/notifications_tab.vue |  4 +-
 .../settings_modal/tabs/profile_tab.vue       | 32 ++++---
 src/main.js                                   |  4 +-
 src/modules/config.js                         |  3 +-
 .../{serverSideConfig.js => profileConfig.js} | 22 ++---
 17 files changed, 177 insertions(+), 248 deletions(-)
 rename src/components/settings_modal/helpers/{server_side_indicator.vue => profile_setting_indicator.vue} (81%)
 create mode 100644 src/components/settings_modal/helpers/setting.js
 rename src/modules/{serverSideConfig.js => profileConfig.js} (85%)

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/server_side_indicator.vue b/src/components/settings_modal/helpers/profile_setting_indicator.vue
similarity index 81%
rename from src/components/settings_modal/helpers/server_side_indicator.vue
rename to src/components/settings_modal/helpers/profile_setting_indicator.vue
index bf181959..d160781b 100644
--- a/src/components/settings_modal/helpers/server_side_indicator.vue
+++ b/src/components/settings_modal/helpers/profile_setting_indicator.vue
@@ -1,7 +1,7 @@
 <template>
   <span
-    v-if="serverSide"
-    class="ServerSideIndicator"
+    v-if="isProfile"
+    class="ProfileSettingIndicator"
   >
     <Popover
       trigger="hover"
@@ -14,7 +14,7 @@
         />
       </template>
       <template #content>
-        <div class="serverside-tooltip">
+        <div class="profilesetting-tooltip">
           {{ $t('settings.setting_server_side') }}
         </div>
       </template>
@@ -33,17 +33,17 @@ library.add(
 
 export default {
   components: { Popover },
-  props: ['serverSide']
+  props: ['isProfile']
 }
 </script>
 
 <style lang="scss">
-.ServerSideIndicator {
+.ProfileSettingIndicator {
   display: inline-block;
   position: relative;
 }
 
-.serverside-tooltip {
+.profilesetting-tooltip {
   margin: 0.5em 1em;
   min-width: 10em;
   text-align: center;
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/serverSideConfig.js b/src/modules/profileConfig.js
similarity index 85%
rename from src/modules/serverSideConfig.js
rename to src/modules/profileConfig.js
index 476263bc..2cb2014a 100644
--- a/src/modules/serverSideConfig.js
+++ b/src/modules/profileConfig.js
@@ -22,9 +22,9 @@ const notificationsApi = ({ rootState, commit }, { path, value, oldValue }) => {
     .updateNotificationSettings({ settings })
     .then(result => {
       if (result.status === 'success') {
-        commit('confirmServerSideOption', { name, value })
+        commit('confirmProfileOption', { name, value })
       } else {
-        commit('confirmServerSideOption', { name, value: oldValue })
+        commit('confirmProfileOption', { name, value: oldValue })
       }
     })
 }
@@ -94,16 +94,16 @@ export const settingsMap = {
 
 export const defaultState = Object.fromEntries(Object.keys(settingsMap).map(key => [key, null]))
 
-const serverSideConfig = {
+const profileConfig = {
   state: { ...defaultState },
   mutations: {
-    confirmServerSideOption (state, { name, value }) {
+    confirmProfileOption (state, { name, value }) {
       set(state, name, value)
     },
-    wipeServerSideOption (state, { name }) {
+    wipeProfileOption (state, { name }) {
       set(state, name, null)
     },
-    wipeAllServerSideOptions (state) {
+    wipeAllProfileOptions (state) {
       Object.keys(settingsMap).forEach(key => {
         set(state, key, null)
       })
@@ -118,23 +118,23 @@ const serverSideConfig = {
     }
   },
   actions: {
-    setServerSideOption ({ rootState, state, commit, dispatch }, { name, value }) {
+    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('wipeServerSideOption', { name })
+      commit('wipeProfileOption', { name })
 
       api({ rootState, commit }, { path, value, oldValue })
         .catch((e) => {
           console.warn('Error setting server-side option:', e)
-          commit('confirmServerSideOption', { name, value: oldValue })
+          commit('confirmProfileOption', { name, value: oldValue })
         })
     },
     logout ({ commit }) {
-      commit('wipeAllServerSideOptions')
+      commit('wipeAllProfileOptions')
     }
   }
 }
 
-export default serverSideConfig
+export default profileConfig

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: [PATCH 02/49] move websocket connection logic into module

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

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
+        }
       }
     }
   }

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: [PATCH 03/49] minimize the rest of the sharedcomputedobject

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

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

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: [PATCH 04/49] fixes for stuff i missed

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

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"
         >

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: [PATCH 05/49] lint

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

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>

From 9632b77786a9d3735f04ecf4a814311fad926ad0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Mar 2023 00:09:47 +0200
Subject: [PATCH 06/49] initial implementation of an admin settings module

---
 src/main.js                     |  2 ++
 src/modules/adminSettings.js    | 48 +++++++++++++++++++++++++++++++++
 src/modules/users.js            | 39 +++++++++++++++------------
 src/services/api/api.service.js | 21 ++++++++++++++-
 4 files changed, 92 insertions(+), 18 deletions(-)
 create mode 100644 src/modules/adminSettings.js

diff --git a/src/main.js b/src/main.js
index fd712113..71f19a82 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@ import apiModule from './modules/api.js'
 import configModule from './modules/config.js'
 import profileConfigModule from './modules/profileConfig.js'
 import serverSideStorageModule from './modules/serverSideStorage.js'
+import adminSettingsModule from './modules/adminSettings.js'
 import shoutModule from './modules/shout.js'
 import oauthModule from './modules/oauth.js'
 import authFlowModule from './modules/auth_flow.js'
@@ -82,6 +83,7 @@ const persistedStateOptions = {
       config: configModule,
       profileConfig: profileConfigModule,
       serverSideStorage: serverSideStorageModule,
+      adminSettings: adminSettingsModule,
       shout: shoutModule,
       oauth: oauthModule,
       authFlow: authFlowModule,
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
new file mode 100644
index 00000000..01e9a49e
--- /dev/null
+++ b/src/modules/adminSettings.js
@@ -0,0 +1,48 @@
+import { set, cloneDeep } from 'lodash'
+
+export const defaultState = {
+  needsReboot: null,
+  config: null,
+  modifiedPaths: null
+}
+
+export const newUserFlags = {
+  ...defaultState.flagStorage
+}
+
+const serverSideStorage = {
+  state: {
+    ...cloneDeep(defaultState)
+  },
+  mutations: {
+    updateAdminSettings (state, { config, modifiedPaths }) {
+      state.config = config
+      state.modifiedPaths = modifiedPaths
+    }
+  },
+  actions: {
+    setInstanceAdminSettings ({ state, commit, dispatch }, { backendDbConfig }) {
+      const config = {}
+      const modifiedPaths = new Set()
+      backendDbConfig.configs.forEach(c => {
+        const path = c.group + '.' + c.key
+        if (c.db) {
+          c.db.forEach(x => modifiedPaths.add(path + '.' + x))
+        }
+        const convert = (value) => {
+          if (Array.isArray(value) && value.length > 0 && value[0].tuple) {
+            return value.reduce((acc, c) => {
+              return { ...acc, [c.tuple[0]]: convert(c.tuple[1]) }
+            }, {})
+          } else {
+            return value
+          }
+        }
+        set(config, path, convert(c.value))
+      })
+      commit('updateAdminSettings', { config, modifiedPaths })
+    }
+  }
+}
+
+export default serverSideStorage
diff --git a/src/modules/users.js b/src/modules/users.js
index a1316ba2..74dbdffc 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -551,6 +551,7 @@ const users = {
     loginUser (store, accessToken) {
       return new Promise((resolve, reject) => {
         const commit = store.commit
+        const dispatch = store.dispatch
         commit('beginLogin')
         store.rootState.api.backendInteractor.verifyCredentials(accessToken)
           .then((data) => {
@@ -563,59 +564,63 @@ const users = {
               user.domainMutes = []
               commit('setCurrentUser', user)
               commit('setServerSideStorage', user)
+              if (user.rights.moderator || user.rights.admin) {
+                store.rootState.api.backendInteractor.fetchInstanceDBConfig()
+                  .then(backendDbConfig => dispatch('setInstanceAdminSettings', { backendDbConfig }))
+              }
               commit('addNewUsers', [user])
 
-              store.dispatch('fetchEmoji')
+              dispatch('fetchEmoji')
 
               getNotificationPermission()
                 .then(permission => commit('setNotificationPermission', permission))
 
               // Set our new backend interactor
               commit('setBackendInteractor', backendInteractorService(accessToken))
-              store.dispatch('pushServerSideStorage')
+              dispatch('pushServerSideStorage')
 
               if (user.token) {
-                store.dispatch('setWsToken', user.token)
+                dispatch('setWsToken', user.token)
 
                 // Initialize the shout socket.
-                store.dispatch('initializeSocket')
+                dispatch('initializeSocket')
               }
 
               const startPolling = () => {
                 // Start getting fresh posts.
-                store.dispatch('startFetchingTimeline', { timeline: 'friends' })
+                dispatch('startFetchingTimeline', { timeline: 'friends' })
 
                 // Start fetching notifications
-                store.dispatch('startFetchingNotifications')
+                dispatch('startFetchingNotifications')
 
                 // Start fetching chats
-                store.dispatch('startFetchingChats')
+                dispatch('startFetchingChats')
               }
 
-              store.dispatch('startFetchingLists')
+              dispatch('startFetchingLists')
 
               if (user.locked) {
-                store.dispatch('startFetchingFollowRequests')
+                dispatch('startFetchingFollowRequests')
               }
 
               if (store.getters.mergedConfig.useStreamingApi) {
-                store.dispatch('fetchTimeline', { timeline: 'friends', since: null })
-                store.dispatch('fetchNotifications', { since: null })
-                store.dispatch('enableMastoSockets', true).catch((error) => {
+                dispatch('fetchTimeline', { timeline: 'friends', since: null })
+                dispatch('fetchNotifications', { since: null })
+                dispatch('enableMastoSockets', true).catch((error) => {
                   console.error('Failed initializing MastoAPI Streaming socket', error)
                 }).then(() => {
-                  store.dispatch('fetchChats', { latest: true })
-                  setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000)
+                  dispatch('fetchChats', { latest: true })
+                  setTimeout(() => dispatch('setNotificationsSilence', false), 10000)
                 })
               } else {
                 startPolling()
               }
 
               // Get user mutes
-              store.dispatch('fetchMutes')
+              dispatch('fetchMutes')
 
-              store.dispatch('setLayoutWidth', windowWidth())
-              store.dispatch('setLayoutHeight', windowHeight())
+              dispatch('setLayoutWidth', windowWidth())
+              dispatch('setLayoutHeight', windowHeight())
 
               // Fetch our friends
               store.rootState.api.backendInteractor.fetchFriends({ id: user.id })
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index b8c10b21..f0aa898a 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -108,6 +108,8 @@ 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 oldfetch = window.fetch
 
 const fetch = (url, options) => {
@@ -1659,6 +1661,22 @@ const setReportState = ({ id, state, credentials }) => {
     })
 }
 
+// ADMIN STUFF // EXPERIMENTAL
+const fetchInstanceDBConfig = ({ credentials }) => {
+  return fetch(PLEROMA_ADMIN_CONFIG_URL, {
+    headers: authHeaders(credentials)
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
 const apiService = {
   verifyCredentials,
   fetchTimeline,
@@ -1772,7 +1790,8 @@ const apiService = {
   postAnnouncement,
   editAnnouncement,
   deleteAnnouncement,
-  adminFetchAnnouncements
+  adminFetchAnnouncements,
+  fetchInstanceDBConfig
 }
 
 export default apiService

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: [PATCH 07/49] 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 ++++++++++++++++++
 .../admin_modal/admin_modal_content.js        |  88 +++++++++++++
 .../admin_modal/admin_modal_content.scss      |  56 ++++++++
 .../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 +++++
 .../admin_tabs/instance_tab.vue               |  35 +++++
 .../settings_modal/helpers/setting.js         |  14 +-
 .../settings_modal/helpers/string_setting.js  |   9 ++
 .../settings_modal/helpers/string_setting.vue |  25 ++++
 .../settings_modal/settings_modal.js          |  23 +++-
 .../settings_modal/settings_modal.vue         |   3 +-
 .../settings_modal_admin_content.js           |  76 +++++++++++
 ...scss => settings_modal_admin_content.scss} |   0
 .../settings_modal_admin_content.vue          |  21 +++
 ...tent.js => settings_modal_user_content.js} |   0
 .../settings_modal_user_content.scss          |  56 ++++++++
 ...nt.vue => settings_modal_user_content.vue} |   4 +-
 src/components/tab_switcher/tab_switcher.jsx  |   8 +-
 src/modules/adminSettings.js                  |   5 +-
 src/modules/interface.js                      |  21 ++-
 25 files changed, 760 insertions(+), 31 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
 rename src/components/settings_modal/{settings_modal_content.scss => settings_modal_admin_content.scss} (100%)
 create mode 100644 src/components/settings_modal/settings_modal_admin_content.vue
 rename src/components/settings_modal/{settings_modal_content.js => settings_modal_user_content.js} (100%)
 create mode 100644 src/components/settings_modal/settings_modal_user_content.scss
 rename src/components/settings_modal/{settings_modal_content.vue => settings_modal_user_content.vue} (92%)

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_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss
similarity index 100%
rename from src/components/settings_modal/settings_modal_content.scss
rename to src/components/settings_modal/settings_modal_admin_content.scss
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_user_content.js
similarity index 100%
rename from src/components/settings_modal/settings_modal_content.js
rename to src/components/settings_modal/settings_modal_user_content.js
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_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
similarity index 92%
rename from src/components/settings_modal/settings_modal_content.vue
rename to src/components/settings_modal/settings_modal_user_content.vue
index 0be76d22..0221cccb 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -78,6 +78,6 @@
   </tab-switcher>
 </template>
 
-<script src="./settings_modal_content.js"></script>
+<script src="./settings_modal_user_content.js"></script>
 
-<style src="./settings_modal_content.scss" lang="scss"></style>
+<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')

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: [PATCH 08/49] setting admin settings works now. also now we have
 draftable settings

---
 .../admin_tabs/instance_tab.vue               |  23 +++-
 .../settings_modal/helpers/boolean_setting.js |  15 +--
 .../helpers/boolean_setting.vue               |   3 +-
 .../settings_modal/helpers/choice_setting.js  |  11 +-
 .../settings_modal/helpers/draft_buttons.vue  | 102 ++++++++++++++++++
 .../settings_modal/helpers/integer_setting.js |   8 +-
 .../helpers/integer_setting.vue               |   4 +-
 .../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, 285 insertions(+), 46 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/draft_buttons.vue

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 {
-  components: {
-    Select,
-    ModifiedIndicator,
-    ProfileSettingIndicator
-  },
   ...Setting,
+  components: {
+    ...Setting.components,
+    Select
+  },
   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

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: [PATCH 09/49] lint

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

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>

From ab5408d36e74b435bb38f6c8fb6389b4babc388d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 17 Mar 2023 00:10:37 +0200
Subject: [PATCH 10/49] remove obsolete files

---
 src/components/admin_modal/admin_modal.js     |  68 ----------
 src/components/admin_modal/admin_modal.scss   |  80 ------------
 src/components/admin_modal/admin_modal.vue    | 121 ------------------
 .../admin_modal/admin_modal_content.js        |  88 -------------
 .../admin_modal/admin_modal_content.scss      |  56 --------
 .../admin_modal/tabs/general_tab.js           |  33 -----
 6 files changed, 446 deletions(-)
 delete mode 100644 src/components/admin_modal/admin_modal.js
 delete mode 100644 src/components/admin_modal/admin_modal.scss
 delete mode 100644 src/components/admin_modal/admin_modal.vue
 delete mode 100644 src/components/admin_modal/admin_modal_content.js
 delete mode 100644 src/components/admin_modal/admin_modal_content.scss
 delete mode 100644 src/components/admin_modal/tabs/general_tab.js

diff --git a/src/components/admin_modal/admin_modal.js b/src/components/admin_modal/admin_modal.js
deleted file mode 100644
index 525f09aa..00000000
--- a/src/components/admin_modal/admin_modal.js
+++ /dev/null
@@ -1,68 +0,0 @@
-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
deleted file mode 100644
index 0d916f32..00000000
--- a/src/components/admin_modal/admin_modal.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-@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
deleted file mode 100644
index d7e5a80f..00000000
--- a/src/components/admin_modal/admin_modal.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<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
deleted file mode 100644
index 897cc163..00000000
--- a/src/components/admin_modal/admin_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 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
deleted file mode 100644
index 2db7b2f8..00000000
--- a/src/components/admin_modal/admin_modal_content.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-@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
deleted file mode 100644
index 68b0ac4b..00000000
--- a/src/components/admin_modal/tabs/general_tab.js
+++ /dev/null
@@ -1,33 +0,0 @@
-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

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: [PATCH 11/49] limits tab, backend descriptions

---
 .../admin_tabs/instance_tab.vue               | 103 +++++++++---
 .../settings_modal/admin_tabs/limits_tab.js   |  29 ++++
 .../settings_modal/admin_tabs/limits_tab.vue  | 152 ++++++++++++++++++
 .../helpers/boolean_setting.vue               |  13 +-
 .../helpers/integer_setting.vue               |  13 +-
 .../settings_modal/helpers/setting.js         |  10 ++
 .../settings_modal/helpers/string_setting.vue |  13 +-
 .../settings_modal/settings_modal.scss        |   6 +
 .../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

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
 }
 

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: [PATCH 12/49] ChoiceSetting support added, added captcha settings

---
 .../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 +++++-
 .../settings_modal/helpers/setting.js         |  7 ++-
 .../helpers/shared_computed_object.js         |  3 ++
 src/modules/adminSettings.js                  | 13 ++---
 7 files changed, 121 insertions(+), 13 deletions(-)

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) => {

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: [PATCH 13/49] modal update, initial localization

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

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",

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: [PATCH 14/49] fixes

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

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

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: [PATCH 15/49] made draft-mode and source inject-able

---
 .../settings_modal/admin_tabs/instance_tab.js |  6 ++
 .../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 +-
 .../settings_modal/helpers/setting.js         | 41 ++++++----
 .../settings_modal/helpers/string_setting.vue |  2 +-
 7 files changed, 50 insertions(+), 84 deletions(-)

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"
     >
     {{ ' ' }}

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: [PATCH 16/49] fixes for diabled state, tri-state boolean and access
 control

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

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>

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: [PATCH 17/49] grouped settings/managed drafts support added

---
 .../settings_modal/admin_tabs/instance_tab.js |  4 ++-
 .../admin_tabs/instance_tab.vue               | 15 +++++++++
 .../settings_modal/helpers/group_setting.js   | 14 ++++++++
 .../settings_modal/helpers/group_setting.vue  | 15 +++++++++
 .../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

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) => {

From 91534172027a587c7cab2cd3bedc51c1e24905ef Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Mar 2023 12:48:21 +0200
Subject: [PATCH 18/49] localization strings

---
 src/i18n/en.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8e36a7b8..f84b5a34 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -830,7 +830,13 @@
       "title": "Version",
       "backend_version": "Backend version",
       "frontend_version": "Frontend version"
-    }
+    },
+    "commit_value": "Save",
+    "commit_value_tooltip": "Value is not saved, press this button to commit your changes",
+    "reset_value": "Reset",
+    "reset_value_tooltip": "Reset draft",
+    "hard_reset_value": "Hard reset",
+    "hard_reset_value_tooltip": "Remove setting from storage, forcing use of default value"
   },
   "admin_dash": {
     "window_title": "Administration",

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: [PATCH 19/49] added mass-draft-push and mass-draft-reset, small
 stylistic fixes

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

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

From df9fe6d261ca554b8f886e45ccf70b44b47e53f5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Mar 2023 19:23:36 +0200
Subject: [PATCH 20/49] localization strings

---
 src/i18n/en.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index f84b5a34..dd78d148 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -842,6 +842,8 @@
     "window_title": "Administration",
     "wip_notice": "This admin dashboard is experimental and WIP, {adminFeLink}.",
     "old_ui_link": "old admin UI available here",
+    "reset_all": "Reset all",
+    "commit_all": "Save all",
     "tabs": {
       "instance": "Instance",
       "limits": "Limits"

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: [PATCH 21/49] handle db config disabled case

---
 .../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(-)

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')

From 3ac67ab7274c199766d026fcf168bd2a3d4e2692 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Mar 2023 23:00:52 +0300
Subject: [PATCH 22/49] fix

---
 src/modules/adminSettings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index fef73974..b8265949 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -65,7 +65,7 @@ const adminSettingsStorage = {
         })
       if (state.descriptions === null) {
         rootState.api.backendInteractor.fetchInstanceConfigDescriptions()
-          .then(backendDescriptions => this.$store.dispatch('setInstanceAdminDescriptions', { backendDescriptions }))
+          .then(backendDescriptions => dispatch('setInstanceAdminDescriptions', { backendDescriptions }))
       }
     },
     setInstanceAdminSettings ({ state, commit, dispatch }, { backendDbConfig }) {

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: [PATCH 23/49] frontends tab initial implementation, now you can
 (re)install frontends! yay!

---
 src/App.scss                                  | 22 +++++-
 .../admin_tabs/frontends_tab.js               | 58 +++++++++++++++
 .../admin_tabs/frontends_tab.scss             | 13 ++++
 .../admin_tabs/frontends_tab.vue              | 72 +++++++++++++++++++
 .../settings_modal/settings_modal.scss        |  1 -
 .../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

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

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: [PATCH 24/49] better frontends tab, now you can set default frontend

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

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"
-              >
-                <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>
+      <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 #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
+                      class="button button-default btn dropdown-button"
+                      type="button"
+                      :title="$t('admin_dash.frontend.update')"
+                    >
+                      <FAIcon icon="chevron-down" />
+                    </button>
+                  </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": {

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: [PATCH 25/49] 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(-)

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>

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: [PATCH 26/49] more i18n stuff, added missing labels and such

---
 .../admin_tabs/instance_tab.vue               | 12 ++++++
 .../helpers/boolean_setting.vue               |  2 +-
 .../settings_modal/helpers/choice_setting.vue |  2 +-
 .../settings_modal/helpers/number_setting.vue |  2 +-
 .../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(-)

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": {

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: [PATCH 27/49] reordered registrations section to be above access
 since it's more likely to be used more often

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

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>
 

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: [PATCH 28/49] initial implementation of attachmentsetting

---
 .../settings_modal/admin_tabs/instance_tab.js |  2 +
 .../admin_tabs/instance_tab.vue               |  8 +--
 .../helpers/attachment_setting.js             | 42 +++++++++++
 .../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

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
 }
 

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: [PATCH 29/49] 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 +++++--
 .../helpers/attachment_setting.js             |  7 ++-
 .../helpers/attachment_setting.vue            | 57 +++++++++++++------
 src/i18n/en.json                              |  2 +
 5 files changed, 75 insertions(+), 31 deletions(-)

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,24 +20,8 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <div class="attachment-input">
-      <Attachment
-        class="attachment"
-        :compact="compact"
-        :attachment="attachment"
-        size="small"
-        hide-description
-        @setMedia="onMedia"
-        @naturalSizeLoad="onNaturalSizeLoad"
-      />
+      <div>{{ $t('settings.url') }}</div>
       <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"
@@ -52,6 +36,27 @@
         />
         <ProfileSettingIndicator :is-profile="isProfileSetting" />
       </div>
+      <div>{{ $t('settings.preview') }}</div>
+      <Attachment
+        class="attachment"
+        :compact="compact"
+        :attachment="attachment"
+        size="small"
+        hide-description
+        @setMedia="onMedia"
+        @naturalSizeLoad="onNaturalSizeLoad"
+      />
+      <div class="controls">
+        <MediaUpload
+          ref="mediaUpload"
+          class="media-upload-icon"
+          :drop-files="dropFiles"
+          @uploaded="setMediaFile"
+          @upload-failed="uploadFailed"
+          normal-button
+          :accept-types="acceptTypes"
+        />
+      </div>
     </div>
     <DraftButtons />
   </span>
@@ -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",

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: [PATCH 30/49] lint

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

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>

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: [PATCH 31/49] remove unused stuff

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

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>

From 1935bf6bd4fdef1336b8b709c38dba0ee8d7448f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 20:49:44 +0300
Subject: [PATCH 32/49] fix media upload bug

---
 src/components/media_upload/media_upload.vue | 7 +++----
 src/i18n/en.json                             | 2 ++
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 993c01a4..2ea5567a 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,8 +1,7 @@
 <template>
-  <component
-    :is="normalButton ? 'button' : 'label'"
+  <button
     class="media-upload"
-    :class="{ disabled: disabled, ['media-upload button-default btn']: normalButton }"
+    :class="[normalButton ? 'button-default btn' : 'button-unstyled', { disabled }]"
     :title="$t('tool_tip.media_upload')"
     @click="onClick"
   >
@@ -31,7 +30,7 @@
       :accept="acceptTypes"
       @change="change"
     >
-  </component>
+  </button>
 </template>
 
 <script src="./media_upload.js"></script>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 44998453..072ce952 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -892,6 +892,8 @@
       "is_default_custom": "(Default, version: {version})",
       "install": "Install",
       "install_version": "Install version {version}",
+      "more_install_options": "More install options",
+      "more_default_options": "More default setting options",
       "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.",

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: [PATCH 33/49] improve the semantics

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

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>

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: [PATCH 34/49] show warning for developer for missing labels

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

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"

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: [PATCH 35/49] remove restriction on number input's width

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

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;
-    }
   }
 }

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: [PATCH 36/49] reintroduce width limit on number input but only for
 sizesetting

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

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>

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: [PATCH 37/49] semantics + description for instance access section

---
 .../admin_tabs/instance_tab.vue               | 212 ++++++++++--------
 src/i18n/en.json                              |  11 +-
 2 files changed, 127 insertions(+), 96 deletions(-)

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>
@@ -92,79 +95,98 @@
       <h2>{{ $t('admin_dash.instance.access') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path=":pleroma.:instance.:public"/>
+          <BooleanSetting
+            override-backend-description
+            override-backend-description-label
+            path=":pleroma.:instance.:public"
+            />
+        </li>
+        <li>
+          <ChoiceSetting
+            override-backend-description
+            override-backend-description-label
+            path=":pleroma.:instance.:limit_to_local_content"
+          />
         </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
-          />
-        </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"/>
+          <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"

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: [PATCH 38/49] lint

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

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>

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: [PATCH 39/49] 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(-)

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 {

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: [PATCH 40/49] lint

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

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') }}

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: [PATCH 41/49] lint

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

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%;
     }
   }

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

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

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>
 

From 99f85069b8a3bc44c3c0a5c6cac35dbfbd740dd5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 May 2023 18:52:10 +0300
Subject: [PATCH 43/49] fix indeterminate state animation

---
 src/components/checkbox/checkbox.vue | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 42f89be9..274e8d0b 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -1,7 +1,7 @@
 <template>
   <label
     class="checkbox"
-    :class="{ disabled, indeterminate }"
+    :class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
   >
     <input
       type="checkbox"
@@ -14,6 +14,7 @@
     <i
       class="checkbox-indicator"
       :aria-hidden="true"
+      @transitionend.capture="onTransitionEnd"
     />
     <span
       v-if="!!$slots.default"
@@ -31,7 +32,22 @@ export default {
     'indeterminate',
     'disabled'
   ],
-  emits: ['update:modelValue']
+  emits: ['update:modelValue'],
+  data: () => ({
+    indeterminateTransitionFix: false
+  }),
+  watch: {
+    indeterminate (e) {
+      if (e) {
+        this.indeterminateTransitionFix = true
+      }
+    }
+  },
+  methods: {
+    onTransitionEnd (e) {
+      this.indeterminateTransitionFix = false
+    }
+  }
 }
 </script>
 
@@ -98,6 +114,12 @@ export default {
     }
   }
 
+  &.indeterminate-fix {
+    input[type="checkbox"] + .checkbox-indicator::before {
+      content: "–";
+    }
+  }
+
   & > span {
     margin-left: 0.5em;
   }

From 3ead21bcc640dfd2fb0f4080e532ba637cc2fdb3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 May 2023 22:30:24 +0300
Subject: [PATCH 44/49] changelog

---
 changelog.d/adminfe.add | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/adminfe.add

diff --git a/changelog.d/adminfe.add b/changelog.d/adminfe.add
new file mode 100644
index 00000000..188c4555
--- /dev/null
+++ b/changelog.d/adminfe.add
@@ -0,0 +1 @@
+Implemented a very basic instance administration screen

From 9f77f910b86ada3ef9f7e537003ef62ec193c741 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 May 2023 11:29:59 +0300
Subject: [PATCH 45/49] fix animation when ideterminate is the initial state

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

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 274e8d0b..7d4e0e95 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -33,8 +33,8 @@ export default {
     'disabled'
   ],
   emits: ['update:modelValue'],
-  data: () => ({
-    indeterminateTransitionFix: false
+  data: (vm) => ({
+    indeterminateTransitionFix: vm.indeterminate
   }),
   watch: {
     indeterminate (e) {

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: [PATCH 46/49] make detailed access restriction an expert section

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

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') }}

From ed34b07b3f5e902a59638e3c1fd138a5d90d2d03 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 May 2023 11:44:26 +0300
Subject: [PATCH 47/49] fix transition when resetting to indeterminate state

---
 src/components/checkbox/checkbox.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 7d4e0e95..b8b77e7c 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -45,7 +45,9 @@ export default {
   },
   methods: {
     onTransitionEnd (e) {
-      this.indeterminateTransitionFix = false
+      if (!this.indeterminate) {
+        this.indeterminateTransitionFix = false
+      }
     }
   }
 }

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: [PATCH 48/49] fix and cleanup reset button

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

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 () {

From cbd22d52b8d0cacf01f71edcb799294b93754f60 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 May 2023 12:00:16 +0300
Subject: [PATCH 49/49] make admin settings modal available on mobile

---
 src/components/side_drawer/side_drawer.js  | 5 ++++-
 src/components/side_drawer/side_drawer.vue | 8 ++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 27019577..81c5a612 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -115,7 +115,10 @@ const SideDrawer = {
       GestureService.updateSwipe(e, this.closeGesture)
     },
     openSettingsModal () {
-      this.$store.dispatch('openSettingsModal')
+      this.$store.dispatch('openSettingsModal', 'user')
+    },
+    openAdminModal () {
+      this.$store.dispatch('openSettingsModal', 'admin')
     }
   }
 }
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 994ac953..09588767 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -180,16 +180,16 @@
           v-if="currentUser && currentUser.role === 'admin'"
           @click="toggleDrawer"
         >
-          <a
-            href="/pleroma/admin/#/login-pleroma"
-            target="_blank"
+          <button
+            class="button-unstyled -link -fullwidth"
+            @click.stop="openAdminModal"
           >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="tachometer-alt"
             /> {{ $t("nav.administration") }}
-          </a>
+          </button>
         </li>
         <li
           v-if="currentUser && supportsAnnouncements"