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

---
 .../settings_modal/helpers/boolean_setting.js      | 53 ++------------
 .../settings_modal/helpers/boolean_setting.vue     |  4 +-
 .../settings_modal/helpers/choice_setting.js       | 51 +++----------
 .../settings_modal/helpers/choice_setting.vue      |  2 +-
 .../settings_modal/helpers/integer_setting.js      | 39 ++--------
 .../helpers/profile_setting_indicator.vue          | 51 +++++++++++++
 .../helpers/server_side_indicator.vue              | 51 -------------
 src/components/settings_modal/helpers/setting.js   | 84 ++++++++++++++++++++++
 .../helpers/shared_computed_object.js              | 18 -----
 .../settings_modal/helpers/size_setting.js         | 48 +++----------
 .../settings_modal/tabs/filtering_tab.vue          | 14 ++--
 src/components/settings_modal/tabs/general_tab.js  |  6 +-
 src/components/settings_modal/tabs/general_tab.vue | 29 ++++----
 .../settings_modal/tabs/notifications_tab.vue      |  4 +-
 src/components/settings_modal/tabs/profile_tab.vue | 32 ++++-----
 15 files changed, 207 insertions(+), 279 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/profile_setting_indicator.vue
 delete mode 100644 src/components/settings_modal/helpers/server_side_indicator.vue
 create mode 100644 src/components/settings_modal/helpers/setting.js

(limited to 'src/components')

diff --git a/src/components/settings_modal/helpers/boolean_setting.js b/src/components/settings_modal/helpers/boolean_setting.js
index 2e6992cb..078cc5ff 100644
--- a/src/components/settings_modal/helpers/boolean_setting.js
+++ b/src/components/settings_modal/helpers/boolean_setting.js
@@ -1,56 +1,13 @@
-import { get, set } from 'lodash'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ModifiedIndicator from './modified_indicator.vue'
-import ServerSideIndicator from './server_side_indicator.vue'
+import ProfileSettingIndicator from './profile_setting_indicator.vue'
+import Setting from './setting.js'
+
 export default {
   components: {
     Checkbox,
     ModifiedIndicator,
-    ServerSideIndicator
+    ProfileSettingIndicator
   },
-  props: [
-    'path',
-    'disabled',
-    'expert'
-  ],
-  computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
-    state () {
-      const value = get(this.$parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
-      }
-    },
-    defaultState () {
-      return get(this.$parent, this.pathDefault)
-    },
-    isServerSide () {
-      return this.path.startsWith('serverSide_')
-    },
-    isChanged () {
-      return !this.path.startsWith('serverSide_') && this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
-    }
-  },
-  methods: {
-    update (e) {
-      const [firstSegment, ...rest] = this.path.split('.')
-      set(this.$parent, this.path, e)
-      // Updating nested properties does not trigger update on its parent.
-      // probably still not as reliable, but works for depth=1 at least
-      if (rest.length > 0) {
-        set(this.$parent, firstSegment, { ...get(this.$parent, firstSegment) })
-      }
-    },
-    reset () {
-      set(this.$parent, this.path, this.defaultState)
-    }
-  }
+  ...Setting
 }
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 41142966..bc014bc9 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -5,7 +5,7 @@
   >
     <Checkbox
       :model-value="state"
-      :disabled="disabled"
+      :disabled="shouldBeDisabled"
       @update:modelValue="update"
     >
       <span
@@ -19,7 +19,7 @@
         :changed="isChanged"
         :onclick="reset"
       />
-      <ServerSideIndicator :server-side="isServerSide" />
+      <ProfileSettingIndicator :is-profile="isProfileTied" />
     </Checkbox>
   </label>
 </template>
diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js
index 3da559fe..8aa5f54b 100644
--- a/src/components/settings_modal/helpers/choice_setting.js
+++ b/src/components/settings_modal/helpers/choice_setting.js
@@ -1,51 +1,20 @@
-import { get, set } from 'lodash'
 import Select from 'src/components/select/select.vue'
 import ModifiedIndicator from './modified_indicator.vue'
-import ServerSideIndicator from './server_side_indicator.vue'
+import ProfileSettingIndicator from './profile_setting_indicator.vue'
+import Setting from './setting.js'
+
 export default {
   components: {
     Select,
     ModifiedIndicator,
-    ServerSideIndicator
+    ProfileSettingIndicator
   },
-  props: [
-    'path',
-    'disabled',
-    'options',
-    'expert'
-  ],
-  computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
-    state () {
-      const value = get(this.$parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
-      }
-    },
-    defaultState () {
-      return get(this.$parent, this.pathDefault)
-    },
-    isServerSide () {
-      return this.path.startsWith('serverSide_')
-    },
-    isChanged () {
-      return !this.path.startsWith('serverSide_') && this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
-    }
-  },
-  methods: {
-    update (e) {
-      set(this.$parent, this.path, e)
-    },
-    reset () {
-      set(this.$parent, this.path, this.defaultState)
+  ...Setting,
+  props: {
+    ...Setting.props,
+    options: {
+      type: Array,
+      required: true
     }
   }
 }
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
index 8fdbb5d3..4c4cdefe 100644
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -23,7 +23,7 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ServerSideIndicator :server-side="isServerSide" />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
   </label>
 </template>
 
diff --git a/src/components/settings_modal/helpers/integer_setting.js b/src/components/settings_modal/helpers/integer_setting.js
index e64d0cee..0f29f11a 100644
--- a/src/components/settings_modal/helpers/integer_setting.js
+++ b/src/components/settings_modal/helpers/integer_setting.js
@@ -1,44 +1,15 @@
-import { get, set } from 'lodash'
 import ModifiedIndicator from './modified_indicator.vue'
+import Setting from './setting.js'
+
 export default {
   components: {
     ModifiedIndicator
   },
-  props: {
-    path: String,
-    disabled: Boolean,
-    min: Number,
-    expert: [Number, String]
-  },
-  computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
-    state () {
-      const value = get(this.$parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
-      }
-    },
-    defaultState () {
-      return get(this.$parent, this.pathDefault)
-    },
-    isChanged () {
-      return this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
-    }
-  },
+  ...Setting,
   methods: {
+    ...Setting.methods,
     update (e) {
-      set(this.$parent, this.path, parseInt(e.target.value))
-    },
-    reset () {
-      set(this.$parent, this.path, this.defaultState)
+      this.configSink(this.path, parseInt(e.target.value))
     }
   }
 }
diff --git a/src/components/settings_modal/helpers/profile_setting_indicator.vue b/src/components/settings_modal/helpers/profile_setting_indicator.vue
new file mode 100644
index 00000000..d160781b
--- /dev/null
+++ b/src/components/settings_modal/helpers/profile_setting_indicator.vue
@@ -0,0 +1,51 @@
+<template>
+  <span
+    v-if="isProfile"
+    class="ProfileSettingIndicator"
+  >
+    <Popover
+      trigger="hover"
+    >
+      <template #trigger>
+        &nbsp;
+        <FAIcon
+          icon="server"
+          :aria-label="$t('settings.setting_server_side')"
+        />
+      </template>
+      <template #content>
+        <div class="profilesetting-tooltip">
+          {{ $t('settings.setting_server_side') }}
+        </div>
+      </template>
+    </Popover>
+  </span>
+</template>
+
+<script>
+import Popover from 'src/components/popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faServer } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faServer
+)
+
+export default {
+  components: { Popover },
+  props: ['isProfile']
+}
+</script>
+
+<style lang="scss">
+.ProfileSettingIndicator {
+  display: inline-block;
+  position: relative;
+}
+
+.profilesetting-tooltip {
+  margin: 0.5em 1em;
+  min-width: 10em;
+  text-align: center;
+}
+</style>
diff --git a/src/components/settings_modal/helpers/server_side_indicator.vue b/src/components/settings_modal/helpers/server_side_indicator.vue
deleted file mode 100644
index bf181959..00000000
--- a/src/components/settings_modal/helpers/server_side_indicator.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <span
-    v-if="serverSide"
-    class="ServerSideIndicator"
-  >
-    <Popover
-      trigger="hover"
-    >
-      <template #trigger>
-        &nbsp;
-        <FAIcon
-          icon="server"
-          :aria-label="$t('settings.setting_server_side')"
-        />
-      </template>
-      <template #content>
-        <div class="serverside-tooltip">
-          {{ $t('settings.setting_server_side') }}
-        </div>
-      </template>
-    </Popover>
-  </span>
-</template>
-
-<script>
-import Popover from 'src/components/popover/popover.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faServer } from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faServer
-)
-
-export default {
-  components: { Popover },
-  props: ['serverSide']
-}
-</script>
-
-<style lang="scss">
-.ServerSideIndicator {
-  display: inline-block;
-  position: relative;
-}
-
-.serverside-tooltip {
-  margin: 0.5em 1em;
-  min-width: 10em;
-  text-align: center;
-}
-</style>
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
new file mode 100644
index 00000000..dc37675c
--- /dev/null
+++ b/src/components/settings_modal/helpers/setting.js
@@ -0,0 +1,84 @@
+import { get, set } from 'lodash'
+export default {
+  props: {
+    path: {
+      type: String,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    parentPath: {
+      type: String
+    },
+    parentInvert: {
+      type: Boolean,
+      default: false
+    },
+    expert: {
+      type: [Number, String],
+      default: 0
+    },
+    source: {
+      type: String,
+      default: 'default'
+    }
+  },
+  computed: {
+    state () {
+      const value = get(this.configSource, this.path)
+      if (value === undefined) {
+        return this.defaultState
+      } else {
+        return value
+      }
+    },
+    shouldBeDisabled () {
+      const parentValue = this.parentPath !== undefined ? get(this.configSource, this.parentPath) : null
+      return this.disabled || (parentValue !== null ? (this.parentInvert ? parentValue : !parentValue) : false)
+    },
+    configSource () {
+      switch (this.source) {
+        case 'profile':
+          return this.$store.state.profileConfig
+        default:
+          return this.$store.getters.mergedConfig
+      }
+    },
+    configSink () {
+      switch (this.source) {
+        case 'profile':
+          return (k, v) => this.$store.dispatch('setProfileOption', { name: k, value: v })
+        default:
+          return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
+      }
+    },
+    defaultState () {
+      switch (this.source) {
+        case 'profile':
+          return {}
+        default:
+          return get(this.$store.getters.defaultConfig, this.path)
+      }
+    },
+    isProfileTied () {
+      return this.source === 'profile'
+    },
+    isChanged () {
+      return !this.source === 'default' && this.state !== this.defaultState
+    },
+    matchesExpertLevel () {
+      return (this.expert || 0) <= this.$store.state.config.expertLevel > 0
+    }
+  },
+  methods: {
+    update (e) {
+      console.log('U', this.path, e)
+      this.configSink(this.path, e)
+    },
+    reset () {
+      set(this.$store.getters.mergedConfig, this.path, this.defaultState)
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index 12431dca..6b22174d 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -1,19 +1,9 @@
 import { defaultState as configDefaultState } from 'src/modules/config.js'
-import { defaultState as serverSideConfigDefaultState } from 'src/modules/serverSideConfig.js'
 
 const SharedComputedObject = () => ({
   user () {
     return this.$store.state.users.currentUser
   },
-  // Getting values for default properties
-  ...Object.keys(configDefaultState)
-    .map(key => [
-      key + 'DefaultValue',
-      function () {
-        return this.$store.getters.defaultConfig[key]
-      }
-    ])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
   // Generating computed values for vuex properties
   ...Object.keys(configDefaultState)
     .map(key => [key, {
@@ -23,14 +13,6 @@ const SharedComputedObject = () => ({
       }
     }])
     .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-  ...Object.keys(serverSideConfigDefaultState)
-    .map(key => ['serverSide_' + key, {
-      get () { return this.$store.state.serverSideConfig[key] },
-      set (value) {
-        this.$store.dispatch('setServerSideOption', { name: key, value })
-      }
-    }])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
   // Special cases (need to transform values or perform actions first)
   useStreamingApi: {
     get () { return this.$store.getters.mergedConfig.useStreamingApi },
diff --git a/src/components/settings_modal/helpers/size_setting.js b/src/components/settings_modal/helpers/size_setting.js
index 58697412..4a0f7e48 100644
--- a/src/components/settings_modal/helpers/size_setting.js
+++ b/src/components/settings_modal/helpers/size_setting.js
@@ -1,6 +1,6 @@
-import { get, set } from 'lodash'
 import ModifiedIndicator from './modified_indicator.vue'
 import Select from 'src/components/select/select.vue'
+import Setting from './setting.js'
 
 export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']
 export const defaultHorizontalUnits = ['px', 'rem', 'vw']
@@ -11,57 +11,31 @@ export default {
     ModifiedIndicator,
     Select
   },
+  ...Setting,
   props: {
-    path: String,
-    disabled: Boolean,
+    ...Setting.props,
     min: Number,
     units: {
-      type: [String],
+      type: Array,
       default: () => allCssUnits
-    },
-    expert: [Number, String]
+    }
   },
   computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
+    ...Setting.computed,
     stateUnit () {
-      return (this.state || '').replace(/\d+/, '')
+      return this.state.replace(/\d+/, '')
     },
     stateValue () {
-      return (this.state || '').replace(/\D+/, '')
-    },
-    state () {
-      const value = get(this.$parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
-      }
-    },
-    defaultState () {
-      return get(this.$parent, this.pathDefault)
-    },
-    isChanged () {
-      return this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
+      return this.state.replace(/\D+/, '')
     }
   },
   methods: {
-    update (e) {
-      set(this.$parent, this.path, e)
-    },
-    reset () {
-      set(this.$parent, this.path, this.defaultState)
-    },
+    ...Setting.methods,
     updateValue (e) {
-      set(this.$parent, this.path, parseInt(e.target.value) + this.stateUnit)
+      this.configSink(this.path, parseInt(e.target.value) + this.stateUnit)
     },
     updateUnit (e) {
-      set(this.$parent, this.path, this.stateValue + e.target.value)
+      this.configSink(this.path, this.stateValue + e.target.value)
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 97046ff0..46c6bc5c 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -7,13 +7,11 @@
           <BooleanSetting path="hideFilteredStatuses">
             {{ $t('settings.hide_filtered_statuses') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                :disabled="hideFilteredStatuses"
+                parentPath="hideFilteredStatuses"
+                :parentInvert="true"
                 path="hideWordFilteredPosts"
               >
                 {{ $t('settings.hide_wordfiltered_statuses') }}
@@ -22,7 +20,8 @@
             <li>
               <BooleanSetting
                 v-if="user"
-                :disabled="hideFilteredStatuses"
+                parentPath="hideFilteredStatuses"
+                :parentInvert="true"
                 path="hideMutedThreads"
               >
                 {{ $t('settings.hide_muted_threads') }}
@@ -31,7 +30,8 @@
             <li>
               <BooleanSetting
                 v-if="user"
-                :disabled="hideFilteredStatuses"
+                parentPath="hideFilteredStatuses"
+                :parentInvert="true"
                 path="hideMutedPosts"
               >
                 {{ $t('settings.hide_muted_posts') }}
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index ea24d6ad..e8f7016e 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -6,7 +6,7 @@ import SizeSetting, { defaultHorizontalUnits } from '../helpers/size_setting.vue
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import ServerSideIndicator from '../helpers/server_side_indicator.vue'
+import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faGlobe
@@ -65,7 +65,7 @@ const GeneralTab = {
     SizeSetting,
     InterfaceLanguageSwitcher,
     ScopeSelector,
-    ServerSideIndicator
+    ProfileSettingIndicator
   },
   computed: {
     horizontalUnits () {
@@ -108,7 +108,7 @@ const GeneralTab = {
   },
   methods: {
     changeDefaultScope (value) {
-      this.$store.dispatch('setServerSideOption', { name: 'defaultScope', value })
+      this.$store.dispatch('setProfileOption', { name: 'defaultScope', value })
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 65248ac1..0eb3d06c 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -29,14 +29,11 @@
           <BooleanSetting path="streaming">
             {{ $t('settings.streaming') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
                 path="pauseOnUnfocused"
-                :disabled="!streaming"
+                parentPath="streaming"
               >
                 {{ $t('settings.pause_on_unfocused') }}
               </BooleanSetting>
@@ -265,7 +262,7 @@
         <li>
           <BooleanSetting
             v-if="user"
-            path="serverSide_stripRichContent"
+            source="profile" path="stripRichContent"
             expert="1"
           >
             {{ $t('settings.no_rich_text_description') }}
@@ -290,7 +287,7 @@
             <BooleanSetting
               path="preloadImage"
               expert="1"
-              :disabled="!hideNsfw"
+              parentPath="hideNsfw"
             >
               {{ $t('settings.preload_images') }}
             </BooleanSetting>
@@ -299,7 +296,7 @@
             <BooleanSetting
               path="useOneClickNsfw"
               expert="1"
-              :disabled="!hideNsfw"
+              parentPath="hideNsfw"
             >
               {{ $t('settings.use_one_click_nsfw') }}
             </BooleanSetting>
@@ -312,15 +309,13 @@
           >
             {{ $t('settings.loop_video') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
                 path="loopVideoSilentOnly"
                 expert="1"
-                :disabled="!loopVideo || !loopSilentAvailable"
+                parentPath="loopVideo"
+                :disabled="!loopSilentAvailable"
               >
                 {{ $t('settings.loop_video_silent_only') }}
               </BooleanSetting>
@@ -418,18 +413,18 @@
       <ul class="setting-list">
         <li>
           <label for="default-vis">
-            {{ $t('settings.default_vis') }} <ServerSideIndicator :server-side="true" />
+            {{ $t('settings.default_vis') }} <ProfileSettingIndicator :is-profile="true" />
             <ScopeSelector
               class="scope-selector"
               :show-all="true"
-              :user-default="serverSide_defaultScope"
-              :initial-scope="serverSide_defaultScope"
+              :user-default="$store.state.profileConfig.defaultScope"
+              :initial-scope="$store.state.profileConfig.defaultScope"
               :on-scope-change="changeDefaultScope"
             />
           </label>
         </li>
         <li>
-          <!-- <BooleanSetting path="serverSide_defaultNSFW"> -->
+          <!-- <BooleanSetting source="profile" path="defaultNSFW"> -->
           <BooleanSetting path="sensitiveByDefault">
             {{ $t('settings.sensitive_by_default') }}
           </BooleanSetting>
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index dd3806ed..ea095372 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -4,7 +4,7 @@
       <h2>{{ $t('settings.notification_setting_filters') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="serverSide_blockNotificationsFromStrangers">
+          <BooleanSetting source="profile" path="blockNotificationsFromStrangers">
             {{ $t('settings.notification_setting_block_from_strangers') }}
           </BooleanSetting>
         </li>
@@ -67,7 +67,7 @@
         </li>
         <li>
           <BooleanSetting
-            path="serverSide_webPushHideContents"
+            source="profile" path="webPushHideContents"
             expert="1"
           >
             {{ $t('settings.notification_setting_hide_notification_contents') }}
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 6a5b478a..74652990 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -254,37 +254,35 @@
       <h2>{{ $t('settings.account_privacy') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="serverSide_locked">
+          <BooleanSetting source="profile" path="locked">
             {{ $t('settings.lock_account_description') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_discoverable">
+          <BooleanSetting source="profile" path="discoverable">
             {{ $t('settings.discoverable') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_allowFollowingMove">
+          <BooleanSetting source="profile" path="allowFollowingMove">
             {{ $t('settings.allow_following_move') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_hideFavorites">
+          <BooleanSetting source="profile" path="hideFavorites">
             {{ $t('settings.hide_favorites_description') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_hideFollowers">
+          <BooleanSetting source="profile" path="hideFollowers">
             {{ $t('settings.hide_followers_description') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !serverSide_hideFollowers}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                path="serverSide_hideFollowersCount"
-                :disabled="!serverSide_hideFollowers"
+                source="profile"
+                path="hideFollowersCount"
+                parentPath="hideFollowers"
               >
                 {{ $t('settings.hide_followers_count_description') }}
               </BooleanSetting>
@@ -292,17 +290,15 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path="serverSide_hideFollows">
+          <BooleanSetting source="profile" path="hideFollows">
             {{ $t('settings.hide_follows_description') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !serverSide_hideFollows}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                path="serverSide_hideFollowsCount"
-                :disabled="!serverSide_hideFollows"
+                source="profile"
+                path="hideFollowsCount"
+                parentPath="hideFollows"
               >
                 {{ $t('settings.hide_follows_count_description') }}
               </BooleanSetting>
-- 
cgit v1.2.3-70-g09d2