Merge remote-tracking branch 'origin/develop' into vue3-again

* origin/develop: (475 commits)
  Apply 1 suggestion(s) to 1 file(s)
  Update dependency @ungap/event-target to v0.2.3
  Update package.json
  fix broken icons after FA upgrade
  Update Font Awesome
  Update dependency webpack-dev-middleware to v3.7.3
  Update dependency vuelidate to v0.7.7
  Pin dependency @kazvmoe-infra/pinch-zoom-element to 1.2.0
  lint
  Make media modal buttons larger
  Add English translation for hide tooltip
  Add hide button to media modal
  Lint
  Prevent hiding media viewer if swiped over SwipeClick
  Fix webkit image blurs
  Fix video in media modal not displaying properly
  Add changelog for https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1403
  Remove image box-shadow in media modal
  Clean up debug code for image pinch zoom
  Bump @kazvmoe-infra/pinch-zoom-element to 1.2.0 on npm
  ...

23 files changed, 920 insertions, 450 deletions

diff --git a/src/components/settings_modal/helpers/boolean_setting.js b/src/components/settings_modal/helpers/boolean_setting.js
new file mode 100644
index 00000000..353e551c
--- /dev/null
+++ b/src/components/settings_modal/helpers/boolean_setting.js
@@ -0,0 +1,47 @@
+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'
+export default {
+  components: {
+    Checkbox,
+    ModifiedIndicator,
+    ServerSideIndicator
+  },
+  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) {
+      set(this.$parent, this.path, e)
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 146ad6c1..e0d825f2 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -1,5 +1,6 @@
 <template>
   <label
+    v-if="matchesExpertLevel"
     class="BooleanSetting"
   >
     <Checkbox
@@ -13,45 +14,8 @@
       >
         <slot />
       </span>
-      <ModifiedIndicator :changed="isChanged" />
-    </Checkbox>
+      <ModifiedIndicator :changed="isChanged" /><ServerSideIndicator :server-side="isServerSide" /> </Checkbox>
   </label>
 </template>
 
-<script>
-import { get, set } from 'lodash'
-import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ModifiedIndicator from './modified_indicator.vue'
-export default {
-  components: {
-    Checkbox,
-    ModifiedIndicator
-  },
-  props: [
-    'path',
-    'disabled'
-  ],
-  computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
-    state () {
-      return get(this.$parent, this.path)
-    },
-    isChanged () {
-      return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
-    }
-  },
-  methods: {
-    update (e) {
-      set(this.$parent, this.path, e)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.BooleanSetting {
-}
-</style>
+<script src="./boolean_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js
new file mode 100644
index 00000000..4677d4c1
--- /dev/null
+++ b/src/components/settings_modal/helpers/choice_setting.js
@@ -0,0 +1,48 @@
+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'
+export default {
+  components: {
+    Select,
+    ModifiedIndicator,
+    ServerSideIndicator
+  },
+  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)
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
new file mode 100644
index 00000000..54f5d0a7
--- /dev/null
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -0,0 +1,31 @@
+<template>
+  <label
+    v-if="matchesExpertLevel"
+    class="ChoiceSetting"
+  >
+    <slot />
+    <Select
+      :value="state"
+      :disabled="disabled"
+      @change="update"
+    >
+      <option
+        v-for="option in options"
+        :key="option.key"
+        :value="option.value"
+      >
+        {{ option.label }}
+        {{ option.value === defaultState ? $t('settings.instance_default_simple') : '' }}
+      </option>
+    </Select>
+    <ModifiedIndicator :changed="isChanged" />
+    <ServerSideIndicator :server-side="isServerSide" />
+  </label>
+</template>
+
+<script src="./choice_setting.js"></script>
+
+<style lang="scss">
+.ChoiceSetting {
+}
+</style>
diff --git a/src/components/settings_modal/helpers/integer_setting.js b/src/components/settings_modal/helpers/integer_setting.js
new file mode 100644
index 00000000..4a19bd7c
--- /dev/null
+++ b/src/components/settings_modal/helpers/integer_setting.js
@@ -0,0 +1,41 @@
+import { get, set } from 'lodash'
+import ModifiedIndicator from './modified_indicator.vue'
+export default {
+  components: {
+    ModifiedIndicator
+  },
+  props: {
+    path: String,
+    disabled: Boolean,
+    min: Number,
+    expert: Number
+  },
+  computed: {
+    pathDefault () {
+      const [firstSegment, ...rest] = this.path.split('.')
+      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    },
+    state () {
+      const value = get(this.$parent, this.path)
+      if (value === undefined) {
+        return this.defaultState
+      } else {
+        return value
+      }
+    },
+    defaultState () {
+      return get(this.$parent, this.pathDefault)
+    },
+    isChanged () {
+      return this.state !== this.defaultState
+    },
+    matchesExpertLevel () {
+      return (this.expert || 0) <= this.$parent.expertLevel
+    }
+  },
+  methods: {
+    update (e) {
+      set(this.$parent, this.path, parseInt(e.target.value))
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/integer_setting.vue b/src/components/settings_modal/helpers/integer_setting.vue
new file mode 100644
index 00000000..408b0925
--- /dev/null
+++ b/src/components/settings_modal/helpers/integer_setting.vue
@@ -0,0 +1,23 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="IntegerSetting"
+  >
+    <label :for="path">
+      <slot />
+    </label>
+    <input
+      :id="path"
+      class="number-input"
+      type="number"
+      step="1"
+      :disabled="disabled"
+      :min="min || 0"
+      :value="state"
+      @change="update"
+    >
+    <ModifiedIndicator :changed="isChanged" />
+  </span>
+</template>
+
+<script src="./integer_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/server_side_indicator.vue b/src/components/settings_modal/helpers/server_side_indicator.vue
new file mode 100644
index 00000000..143a86a1
--- /dev/null
+++ b/src/components/settings_modal/helpers/server_side_indicator.vue
@@ -0,0 +1,51 @@
+<template>
+  <span
+    v-if="serverSide"
+    class="ServerSideIndicator"
+  >
+    <Popover
+      trigger="hover"
+    >
+      <template v-slot:trigger>
+        &nbsp;
+        <FAIcon
+          icon="server"
+          :aria-label="$t('settings.setting_server_side')"
+        />
+      </template>
+      <template v-slot: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/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index 2c833c0c..12431dca 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -1,4 +1,5 @@
 import { defaultState as configDefaultState } from 'src/modules/config.js'
+import { defaultState as serverSideConfigDefaultState } from 'src/modules/serverSideConfig.js'
 
 const SharedComputedObject = () => ({
   user () {
@@ -22,6 +23,14 @@ 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/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 7f97fa08..82ea410e 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -1,8 +1,9 @@
-import { defineAsyncComponent } from 'vue'
 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 { cloneDeep } from 'lodash'
 import {
@@ -51,12 +52,15 @@ const SettingsModal = {
   components: {
     Modal,
     Popover,
-    SettingsModalContent: defineAsyncComponent({
-      loader: () => import('./settings_modal_content.vue'),
-      loadingComponent: PanelLoading,
-      errorComponent: AsyncComponentError,
-      delay: 0
-    })
+    Checkbox,
+    SettingsModalContent: getResettableAsyncComponent(
+      () => import('./settings_modal_content.vue'),
+      {
+        loading: PanelLoading,
+        error: AsyncComponentError,
+        delay: 0
+      }
+    )
   },
   methods: {
     closeModal () {
@@ -157,6 +161,15 @@ const SettingsModal = {
     },
     modalPeeked () {
       return this.$store.state.interface.settingsModalState === 'minimized'
+    },
+    expertLevel: {
+      get () {
+        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.scss b/src/components/settings_modal/settings_modal.scss
index 90446b36..fb466f2f 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -48,4 +48,11 @@
       }
     }
   }
+
+  .settings-footer {
+    display: flex;
+    >* {
+      margin-right: 0.5em;
+    }
+  }
 }
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 0c261474..1805c77f 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -11,24 +11,22 @@
           {{ $t('settings.settings') }}
         </span>
         <transition name="fade">
-          <template>
-            <template v-if="currentSaveStateNotice">
-              <div
-                v-if="currentSaveStateNotice.error"
-                class="alert error"
-                @click.prevent
-              >
-                {{ $t('settings.saving_err') }}
-              </div>
+          <template v-if="currentSaveStateNotice">
+            <div
+              v-if="currentSaveStateNotice.error"
+              class="alert error"
+              @click.prevent
+            >
+              {{ $t('settings.saving_err') }}
+            </div>
 
-              <div
-                v-if="!currentSaveStateNotice.error"
-                class="alert transparent"
-                @click.prevent
-              >
-                {{ $t('settings.saving_ok') }}
-              </div>
-            </template>
+            <div
+              v-if="!currentSaveStateNotice.error"
+              class="alert transparent"
+              @click.prevent
+            >
+              {{ $t('settings.saving_ok') }}
+            </div>
           </template>
         </transition>
         <button
@@ -55,7 +53,7 @@
       <div class="panel-body">
         <SettingsModalContent v-if="modalOpenedOnce" />
       </div>
-      <div class="panel-footer">
+      <div class="panel-footer settings-footer">
         <Popover
           class="export"
           trigger="click"
@@ -75,7 +73,7 @@
               />
             </button>
           </template>
-          <template v-slot:content ="{close}">
+          <template v-slot:content="{close}">
             <div class="dropdown-menu">
               <button
                 class="button-default dropdown-item dropdown-item-icon"
@@ -110,6 +108,10 @@
             </div>
           </template>
         </Popover>
+
+        <Checkbox v-model="expertLevel">
+          {{ $t("settings.expert_mode") }}
+        </Checkbox>
       </div>
     </div>
   </Modal>
diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
index f066234c..81ab434b 100644
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@@ -7,13 +7,24 @@
     margin: 1em 1em 1.4em;
     padding-bottom: 1.4em;
 
-    > div {
+    > div,
+    > label {
+      display: block;
       margin-bottom: .5em;
       &:last-child {
         margin-bottom: 0;
       }
     }
 
+    .select-multiple {
+      display: flex;
+
+      .option-list {
+        margin: 0;
+        padding-left: .5em;
+      }
+    }
+
     &:last-child {
       border-bottom: none;
       padding-bottom: 0;
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 6e95f7af..73413b48 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,24 +1,25 @@
 import { filter, trim } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
 
 const FilteringTab = {
   data () {
     return {
-      muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n')
+      muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n'),
+      replyVisibilityOptions: ['all', 'following', 'self'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.reply_visibility_${mode}`)
+      }))
     }
   },
   components: {
-    BooleanSetting
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting
   },
   computed: {
     ...SharedComputedObject(),
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 402c2a4a..dc48902f 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -1,89 +1,122 @@
 <template>
   <div :label="$t('settings.filtering')">
     <div class="setting-item">
-      <div class="select-multiple">
-        <span class="label">{{ $t('settings.notification_visibility') }}</span>
-        <ul class="option-list">
-          <li>
-            <BooleanSetting path="notificationVisibility.likes">
-              {{ $t('settings.notification_visibility_likes') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="notificationVisibility.repeats">
-              {{ $t('settings.notification_visibility_repeats') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="notificationVisibility.follows">
-              {{ $t('settings.notification_visibility_follows') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="notificationVisibility.mentions">
-              {{ $t('settings.notification_visibility_mentions') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="notificationVisibility.moves">
-              {{ $t('settings.notification_visibility_moves') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="notificationVisibility.emojiReactions">
-              {{ $t('settings.notification_visibility_emoji_reactions') }}
-            </BooleanSetting>
-          </li>
-        </ul>
-      </div>
-      <div>
-        {{ $t('settings.replies_in_timeline') }}
-        <label
-          for="replyVisibility"
-          class="select"
-        >
-          <select
-            id="replyVisibility"
-            v-model="replyVisibility"
+      <h2>{{ $t('settings.posts') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path="hideFilteredStatuses">
+            {{ $t('settings.hide_filtered_statuses') }}
+          </BooleanSetting>
+          <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !streaming}]"
           >
-            <option
-              value="all"
-              selected
-            >{{ $t('settings.reply_visibility_all') }}</option>
-            <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
-            <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
+            <li>
+              <BooleanSetting
+                :disabled="hideFilteredStatuses"
+                path="hideWordFilteredPosts"
+              >
+                {{ $t('settings.hide_wordfiltered_statuses') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting
+                v-if="user"
+                :disabled="hideFilteredStatuses"
+                path="hideMutedThreads"
+              >
+                {{ $t('settings.hide_muted_threads') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting
+                v-if="user"
+                :disabled="hideFilteredStatuses"
+                path="hideMutedPosts"
+              >
+                {{ $t('settings.hide_muted_posts') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting path="muteBotStatuses">
+            {{ $t('settings.mute_bot_posts') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="hidePostStats">
+            {{ $t('settings.hide_post_stats') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="hideBotIndication">
+            {{ $t('settings.hide_bot_indication') }}
+          </BooleanSetting>
+        </li>
+        <ChoiceSetting
+          v-if="user"
+          id="replyVisibility"
+          path="replyVisibility"
+          :options="replyVisibilityOptions"
+        >
+          {{ $t('settings.replies_in_timeline') }}
+        </ChoiceSetting>
+        <li>
+          <h3>{{ $t('settings.wordfilter') }}</h3>
+          <textarea
+            id="muteWords"
+            v-model="muteWordsString"
+            class="resize-height"
           />
-        </label>
-      </div>
-      <div>
-        <BooleanSetting path="hidePostStats">
-          {{ $t('settings.hide_post_stats') }}
-        </BooleanSetting>
-      </div>
-      <div>
-        <BooleanSetting path="hideUserStats">
-          {{ $t('settings.hide_user_stats') }}
-        </BooleanSetting>
-      </div>
+          <div>{{ $t('settings.filtering_explanation') }}</div>
+        </li>
+        <h3>{{ $t('settings.attachments') }}</h3>
+        <li v-if="expertLevel > 0">
+          <label for="maxThumbnails">
+            {{ $t('settings.max_thumbnails') }}
+          </label>
+          <input
+            id="maxThumbnails"
+            path.number="maxThumbnails"
+            class="number-input"
+            type="number"
+            min="0"
+            step="1"
+          >
+        </li>
+        <li>
+          <IntegerSetting
+            path="maxThumbnails"
+            :min="0"
+          >
+            {{ $t('settings.max_thumbnails') }}
+          </IntegerSetting>
+        </li>
+        <li>
+          <BooleanSetting path="hideAttachments">
+            {{ $t('settings.hide_attachments_in_tl') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="hideAttachmentsInConv">
+            {{ $t('settings.hide_attachments_in_convo') }}
+          </BooleanSetting>
+        </li>
+      </ul>
     </div>
-    <div class="setting-item">
-      <div>
-        <p>{{ $t('settings.filtering_explanation') }}</p>
-        <textarea
-          id="muteWords"
-          v-model="muteWordsString"
-          class="resize-height"
-        />
-      </div>
-      <div>
-        <BooleanSetting path="hideFilteredStatuses">
-          {{ $t('settings.hide_filtered_statuses') }}
-        </BooleanSetting>
-      </div>
+    <div
+      v-if="expertLevel > 0"
+      class="setting-item"
+    >
+      <h2>{{ $t('settings.user_profiles') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path="hideUserStats">
+            {{ $t('settings.hide_user_stats') }}
+          </BooleanSetting>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 2db523be..62d86176 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -1,21 +1,43 @@
 import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
 import 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 { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown,
   faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faChevronDown,
   faGlobe
 )
 
 const GeneralTab = {
   data () {
     return {
+      subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
+      })),
+      conversationDisplayOptions: ['tree', 'linear'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.conversation_display_${mode}`)
+      })),
+      conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.conversation_other_replies_button_${mode}`)
+      })),
+      mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.mention_link_display_${mode}`)
+      })),
       loopSilentAvailable:
       // Firefox
       Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@@ -27,18 +49,35 @@ const GeneralTab = {
   },
   components: {
     BooleanSetting,
-    InterfaceLanguageSwitcher
+    ChoiceSetting,
+    IntegerSetting,
+    InterfaceLanguageSwitcher,
+    ScopeSelector,
+    ServerSideIndicator
   },
   computed: {
     postFormats () {
       return this.$store.state.instance.postFormats || []
     },
+    postContentOptions () {
+      return this.postFormats.map(format => ({
+        key: format,
+        value: format,
+        label: this.$t(`post_status.content_type["${format}"]`)
+      }))
+    },
     instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
     instanceWallpaperUsed () {
       return this.$store.state.instance.background &&
         !this.$store.state.users.currentUser.background_image
     },
+    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
     ...SharedComputedObject()
+  },
+  methods: {
+    changeDefaultScope (value) {
+      this.$store.dispatch('setServerSideOption', { name: 'defaultScope', value })
+    }
   }
 }
 
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 9228c78e..a2c6bffa 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -11,24 +11,19 @@
             {{ $t('settings.hide_isp') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="sidebarRight">
+            {{ $t('settings.right_sidebar') }}
+          </BooleanSetting>
+        </li>
         <li v-if="instanceWallpaperUsed">
           <BooleanSetting path="hideInstanceWallpaper">
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
-      </ul>
-    </div>
-    <div class="setting-item">
-      <h2>{{ $t('nav.timeline') }}</h2>
-      <ul class="setting-list">
         <li>
-          <BooleanSetting path="hideMutedPosts">
-            {{ $t('settings.hide_muted_posts') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="collapseMessageWithSubject">
-            {{ $t('settings.collapse_subject') }}
+          <BooleanSetting path="stopGifs">
+            {{ $t('settings.stop_gifs') }}
           </BooleanSetting>
         </li>
         <li>
@@ -50,146 +45,126 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path="useStreamingApi">
+          <BooleanSetting
+            path="useStreamingApi"
+            expert="1"
+          >
             {{ $t('settings.useStreamingApi') }}
-            <br>
-            <small>
-              {{ $t('settings.useStreamingApiWarning') }}
-            </small>
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="emojiReactionsOnTimeline">
-            {{ $t('settings.emoji_reactions_on_timeline') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="virtualScrolling">
+          <BooleanSetting
+            path="virtualScrolling"
+            expert="1"
+          >
             {{ $t('settings.virtual_scrolling') }}
           </BooleanSetting>
         </li>
-      </ul>
-    </div>
-
-    <div class="setting-item">
-      <h2>{{ $t('settings.composing') }}</h2>
-      <ul class="setting-list">
-        <li>
-          <BooleanSetting path="scopeCopy">
-            {{ $t('settings.scope_copy') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="alwaysShowSubjectInput">
-            {{ $t('settings.subject_input_always_show') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <div>
-            {{ $t('settings.subject_line_behavior') }}
-            <label
-              for="subjectLineBehavior"
-              class="select"
-            >
-              <select
-                id="subjectLineBehavior"
-                v-model="subjectLineBehavior"
-              >
-                <option value="email">
-                  {{ $t('settings.subject_line_email') }}
-                  {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
-                </option>
-                <option value="masto">
-                  {{ $t('settings.subject_line_mastodon') }}
-                  {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
-                </option>
-                <option value="noop">
-                  {{ $t('settings.subject_line_noop') }}
-                  {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
-                </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
-          </div>
-        </li>
-        <li v-if="postFormats.length > 0">
-          <div>
-            {{ $t('settings.post_status_content_type') }}
-            <label
-              for="postContentType"
-              class="select"
-            >
-              <select
-                id="postContentType"
-                v-model="postContentType"
-              >
-                <option
-                  v-for="postFormat in postFormats"
-                  :key="postFormat"
-                  :value="postFormat"
-                >
-                  {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                  {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
-                </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
-          </div>
-        </li>
-        <li>
-          <BooleanSetting path="minimalScopesMode">
-            {{ $t('settings.minimal_scopes_mode') }}
-          </BooleanSetting>
-        </li>
         <li>
-          <BooleanSetting path="sensitiveByDefault">
-            {{ $t('settings.sensitive_by_default') }}
+          <BooleanSetting
+            path="alwaysShowNewPostButton"
+            expert="1"
+          >
+            {{ $t('settings.always_show_post_button') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="autohideFloatingPostButton">
+          <BooleanSetting
+            path="autohideFloatingPostButton"
+            expert="1"
+          >
             {{ $t('settings.autohide_floating_post_button') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting path="padEmoji">
-            {{ $t('settings.pad_emoji') }}
+        <li v-if="instanceShoutboxPresent">
+          <BooleanSetting
+            path="hideShoutbox"
+            expert="1"
+          >
+            {{ $t('settings.hide_shoutbox') }}
           </BooleanSetting>
         </li>
       </ul>
     </div>
-
     <div class="setting-item">
-      <h2>{{ $t('settings.attachments') }}</h2>
+      <h2>{{ $t('settings.post_look_feel') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="hideAttachments">
-            {{ $t('settings.hide_attachments_in_tl') }}
+          <ChoiceSetting
+            id="conversationDisplay"
+            path="conversationDisplay"
+            :options="conversationDisplayOptions"
+          >
+            {{ $t('settings.conversation_display') }}
+          </ChoiceSetting>
+        </li>
+        <ul
+          v-if="conversationDisplay !== 'linear'"
+          class="setting-list suboptions"
+        >
+          <li>
+            <BooleanSetting path="conversationTreeAdvanced">
+              {{ $t('settings.tree_advanced') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <BooleanSetting
+              path="conversationTreeFadeAncestors"
+              :expert="1"
+            >
+              {{ $t('settings.tree_fade_ancestors') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <IntegerSetting
+              path="maxDepthInThread"
+              :min="3"
+              :expert="1"
+            >
+              {{ $t('settings.max_depth_in_thread') }}
+            </IntegerSetting>
+          </li>
+          <li>
+            <ChoiceSetting
+              id="conversationOtherRepliesButton"
+              path="conversationOtherRepliesButton"
+              :options="conversationOtherRepliesButtonOptions"
+              :expert="1"
+            >
+              {{ $t('settings.conversation_other_replies_button') }}
+            </ChoiceSetting>
+          </li>
+        </ul>
+        <li>
+          <BooleanSetting path="collapseMessageWithSubject">
+            {{ $t('settings.collapse_subject') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="hideAttachmentsInConv">
-            {{ $t('settings.hide_attachments_in_convo') }}
+          <BooleanSetting
+            path="emojiReactionsOnTimeline"
+            expert="1"
+          >
+            {{ $t('settings.emoji_reactions_on_timeline') }}
           </BooleanSetting>
         </li>
         <li>
-          <label for="maxThumbnails">
-            {{ $t('settings.max_thumbnails') }}
-          </label>
-          <input
-            id="maxThumbnails"
-            path.number="maxThumbnails"
-            class="number-input"
-            type="number"
-            min="0"
-            step="1"
+          <BooleanSetting
+            v-if="user"
+            path="serverSide_stripRichContent"
+            expert="1"
           >
+            {{ $t('settings.no_rich_text_description') }}
+          </BooleanSetting>
+        </li>
+        <h3>{{ $t('settings.attachments') }}</h3>
+        <li>
+          <BooleanSetting
+            path="useContainFit"
+            expert="1"
+          >
+            {{ $t('settings.use_contain_fit') }}
+          </BooleanSetting>
         </li>
         <li>
           <BooleanSetting path="hideNsfw">
@@ -200,6 +175,7 @@
           <li>
             <BooleanSetting
               path="preloadImage"
+              expert="1"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.preload_images') }}
@@ -208,6 +184,7 @@
           <li>
             <BooleanSetting
               path="useOneClickNsfw"
+              expert="1"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.use_one_click_nsfw') }}
@@ -215,12 +192,10 @@
           </li>
         </ul>
         <li>
-          <BooleanSetting path="stopGifs">
-            {{ $t('settings.stop_gifs') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="loopVideo">
+          <BooleanSetting
+            path="loopVideo"
+            expert="1"
+          >
             {{ $t('settings.loop_video') }}
           </BooleanSetting>
           <ul
@@ -230,6 +205,7 @@
             <li>
               <BooleanSetting
                 path="loopVideoSilentOnly"
+                expert="1"
                 :disabled="!loopVideo || !loopSilentAvailable"
               >
                 {{ $t('settings.loop_video_silent_only') }}
@@ -244,35 +220,175 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path="playVideosInModal">
+          <BooleanSetting
+            path="playVideosInModal"
+            expert="1"
+          >
             {{ $t('settings.play_videos_in_modal') }}
           </BooleanSetting>
         </li>
+        <h3>{{ $t('settings.mention_links') }}</h3>
         <li>
-          <BooleanSetting path="useContainFit">
-            {{ $t('settings.use_contain_fit') }}
+          <ChoiceSetting
+            id="mentionLinkDisplay"
+            path="mentionLinkDisplay"
+            :options="mentionLinkDisplayOptions"
+          >
+            {{ $t('settings.mention_link_display') }}
+          </ChoiceSetting>
+        </li>
+        <ul
+          class="setting-list suboptions"
+        >
+          <li v-if="mentionLinkDisplay === 'short'">
+            <BooleanSetting
+              path="mentionLinkShowTooltip"
+              expert="1"
+            >
+              {{ $t('settings.mention_link_show_tooltip') }}
+            </BooleanSetting>
+          </li>
+        </ul>
+        <li>
+          <BooleanSetting
+            path="useAtIcon"
+            expert="1"
+          >
+            {{ $t('settings.use_at_icon') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="mentionLinkShowAvatar">
+            {{ $t('settings.mention_link_show_avatar') }}
           </BooleanSetting>
         </li>
-      </ul>
-    </div>
-
-    <div class="setting-item">
-      <h2>{{ $t('settings.notifications') }}</h2>
-      <ul class="setting-list">
         <li>
-          <BooleanSetting path="webPushNotifications">
-            {{ $t('settings.enable_web_push_notifications') }}
+          <BooleanSetting
+            path="mentionLinkFadeDomain"
+            expert="1"
+          >
+            {{ $t('settings.mention_link_fade_domain') }}
+          </BooleanSetting>
+        </li>
+        <li v-if="user">
+          <BooleanSetting
+            path="mentionLinkBoldenYou"
+            expert="1"
+          >
+            {{ $t('settings.mention_link_bolden_you') }}
+          </BooleanSetting>
+        </li>
+        <h3 v-if="expertLevel > 0">
+          {{ $t('settings.fun') }}
+        </h3>
+        <li>
+          <BooleanSetting
+            path="greentext"
+            expert="1"
+          >
+            {{ $t('settings.greentext') }}
+          </BooleanSetting>
+        </li>
+        <li v-if="user">
+          <BooleanSetting
+            path="mentionLinkShowYous"
+            expert="1"
+          >
+            {{ $t('settings.show_yous') }}
           </BooleanSetting>
         </li>
       </ul>
     </div>
 
-    <div class="setting-item">
-      <h2>{{ $t('settings.fun') }}</h2>
+    <div
+      v-if="user"
+      class="setting-item"
+    >
+      <h2>{{ $t('settings.composing') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="greentext">
-            {{ $t('settings.greentext') }}
+          <label for="default-vis">
+            {{ $t('settings.default_vis') }} <ServerSideIndicator :server-side="true" />
+            <ScopeSelector
+              class="scope-selector"
+              :show-all="true"
+              :user-default="serverSide_defaultScope"
+              :initial-scope="serverSide_defaultScope"
+              :on-scope-change="changeDefaultScope"
+            />
+          </label>
+        </li>
+        <li>
+          <!-- <BooleanSetting path="serverSide_defaultNSFW"> -->
+          <BooleanSetting path="sensitiveByDefault">
+            {{ $t('settings.sensitive_by_default') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="scopeCopy"
+            expert="1"
+          >
+            {{ $t('settings.scope_copy') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="alwaysShowSubjectInput"
+            expert="1"
+          >
+            {{ $t('settings.subject_input_always_show') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            id="subjectLineBehavior"
+            path="subjectLineBehavior"
+            :options="subjectLineOptions"
+            expert="1"
+          >
+            {{ $t('settings.subject_line_behavior') }}
+          </ChoiceSetting>
+        </li>
+        <li v-if="postFormats.length > 0">
+          <ChoiceSetting
+            id="postContentType"
+            path="postContentType"
+            :options="postContentOptions"
+          >
+            {{ $t('settings.post_status_content_type') }}
+          </ChoiceSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="minimalScopesMode"
+            expert="1"
+          >
+            {{ $t('settings.minimal_scopes_mode') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="alwaysShowNewPostButton"
+            expert="1"
+          >
+            {{ $t('settings.always_show_post_button') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="autohideFloatingPostButton"
+            expert="1"
+          >
+            {{ $t('settings.autohide_floating_post_button') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="padEmoji"
+            expert="1"
+          >
+            {{ $t('settings.pad_emoji') }}
           </BooleanSetting>
         </li>
       </ul>
diff --git a/src/components/settings_modal/tabs/notifications_tab.js b/src/components/settings_modal/tabs/notifications_tab.js
index 3e44c95d..3c6ab87f 100644
--- a/src/components/settings_modal/tabs/notifications_tab.js
+++ b/src/components/settings_modal/tabs/notifications_tab.js
@@ -1,4 +1,5 @@
-import Checkbox from 'src/components/checkbox/checkbox.vue'
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 const NotificationsTab = {
   data () {
@@ -9,12 +10,13 @@ const NotificationsTab = {
     }
   },
   components: {
-    Checkbox
+    BooleanSetting
   },
   computed: {
     user () {
       return this.$store.state.users.currentUser
-    }
+    },
+    ...SharedComputedObject()
   },
   methods: {
     updateNotificationSettings () {
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index 7e0568ea..86be6095 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -2,30 +2,77 @@
   <div :label="$t('settings.notifications')">
     <div class="setting-item">
       <h2>{{ $t('settings.notification_setting_filters') }}</h2>
-      <p>
-        <Checkbox v-model="notificationSettings.block_from_strangers">
-          {{ $t('settings.notification_setting_block_from_strangers') }}
-        </Checkbox>
-      </p>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path="serverSide_blockNotificationsFromStrangers">
+            {{ $t('settings.notification_setting_block_from_strangers') }}
+          </BooleanSetting>
+        </li>
+        <li class="select-multiple">
+          <span class="label">{{ $t('settings.notification_visibility') }}</span>
+          <ul class="option-list">
+            <li>
+              <BooleanSetting path="notificationVisibility.likes">
+                {{ $t('settings.notification_visibility_likes') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.repeats">
+                {{ $t('settings.notification_visibility_repeats') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.follows">
+                {{ $t('settings.notification_visibility_follows') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.mentions">
+                {{ $t('settings.notification_visibility_mentions') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.moves">
+                {{ $t('settings.notification_visibility_moves') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.emojiReactions">
+                {{ $t('settings.notification_visibility_emoji_reactions') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
+      </ul>
     </div>
 
-    <div class="setting-item">
+    <div
+      v-if="expertLevel > 0"
+      class="setting-item"
+    >
       <h2>{{ $t('settings.notification_setting_privacy') }}</h2>
-      <p>
-        <Checkbox v-model="notificationSettings.hide_notification_contents">
-          {{ $t('settings.notification_setting_hide_notification_contents') }}
-        </Checkbox>
-      </p>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting
+            path="webPushNotifications"
+            expert="1"
+          >
+            {{ $t('settings.enable_web_push_notifications') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="serverSide_webPushHideContents"
+            expert="1"
+          >
+            {{ $t('settings.notification_setting_hide_notification_contents') }}
+          </BooleanSetting>
+        </li>
+      </ul>
     </div>
     <div class="setting-item">
       <p>{{ $t('settings.notification_mutes') }}</p>
       <p>{{ $t('settings.notification_blocks') }}</p>
-      <button
-        class="btn button-default"
-        @click="updateNotificationSettings"
-      >
-        {{ $t('settings.save') }}
-      </button>
     </div>
   </div>
 </template>
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 9709424c..bee8a7bb 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -8,6 +8,9 @@ import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes,
@@ -24,21 +27,13 @@ library.add(
 const ProfileTab = {
   data () {
     return {
-      newName: this.$store.state.users.currentUser.name,
+      newName: this.$store.state.users.currentUser.name_unescaped,
       newBio: unescape(this.$store.state.users.currentUser.description),
       newLocked: this.$store.state.users.currentUser.locked,
-      newNoRichText: this.$store.state.users.currentUser.no_rich_text,
-      newDefaultScope: this.$store.state.users.currentUser.default_scope,
       newFields: this.$store.state.users.currentUser.fields.map(field => ({ name: field.name, value: field.value })),
-      hideFollows: this.$store.state.users.currentUser.hide_follows,
-      hideFollowers: this.$store.state.users.currentUser.hide_followers,
-      hideFollowsCount: this.$store.state.users.currentUser.hide_follows_count,
-      hideFollowersCount: this.$store.state.users.currentUser.hide_followers_count,
       showRole: this.$store.state.users.currentUser.show_role,
       role: this.$store.state.users.currentUser.role,
-      discoverable: this.$store.state.users.currentUser.discoverable,
       bot: this.$store.state.users.currentUser.bot,
-      allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
       pickAvatarBtnVisible: true,
       bannerUploading: false,
       backgroundUploading: false,
@@ -54,12 +49,14 @@ const ProfileTab = {
     EmojiInput,
     Autosuggest,
     ProgressButton,
-    Checkbox
+    Checkbox,
+    BooleanSetting
   },
   computed: {
     user () {
       return this.$store.state.users.currentUser
     },
+    ...SharedComputedObject(),
     emojiUserSuggestor () {
       return suggestor({
         emoji: [
@@ -123,15 +120,7 @@ const ProfileTab = {
             /* eslint-disable camelcase */
             display_name: this.newName,
             fields_attributes: this.newFields.filter(el => el != null),
-            default_scope: this.newDefaultScope,
-            no_rich_text: this.newNoRichText,
-            hide_follows: this.hideFollows,
-            hide_followers: this.hideFollowers,
-            discoverable: this.discoverable,
             bot: this.bot,
-            allow_following_move: this.allowFollowingMove,
-            hide_follows_count: this.hideFollowsCount,
-            hide_followers_count: this.hideFollowersCount,
             show_role: this.showRole
             /* eslint-enable camelcase */
           } }).then((user) => {
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index bb3c301d..e00f6e5b 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -25,61 +25,6 @@
           class="bio resize-height"
         />
       </EmojiInput>
-      <p>
-        <Checkbox v-model="newLocked">
-          {{ $t('settings.lock_account_description') }}
-        </Checkbox>
-      </p>
-      <div>
-        <label for="default-vis">{{ $t('settings.default_vis') }}</label>
-        <div
-          id="default-vis"
-          class="visibility-tray"
-        >
-          <scope-selector
-            :show-all="true"
-            :user-default="newDefaultScope"
-            :initial-scope="newDefaultScope"
-            :on-scope-change="changeVis"
-          />
-        </div>
-      </div>
-      <p>
-        <Checkbox v-model="newNoRichText">
-          {{ $t('settings.no_rich_text_description') }}
-        </Checkbox>
-      </p>
-      <p>
-        <Checkbox v-model="hideFollows">
-          {{ $t('settings.hide_follows_description') }}
-        </Checkbox>
-      </p>
-      <p class="setting-subitem">
-        <Checkbox
-          v-model="hideFollowsCount"
-          :disabled="!hideFollows"
-        >
-          {{ $t('settings.hide_follows_count_description') }}
-        </Checkbox>
-      </p>
-      <p>
-        <Checkbox v-model="hideFollowers">
-          {{ $t('settings.hide_followers_description') }}
-        </Checkbox>
-      </p>
-      <p class="setting-subitem">
-        <Checkbox
-          v-model="hideFollowersCount"
-          :disabled="!hideFollowers"
-        >
-          {{ $t('settings.hide_followers_count_description') }}
-        </Checkbox>
-      </p>
-      <p>
-        <Checkbox v-model="allowFollowingMove">
-          {{ $t('settings.allow_following_move') }}
-        </Checkbox>
-      </p>
       <p v-if="role === 'admin' || role === 'moderator'">
         <Checkbox v-model="showRole">
           <template v-if="role === 'admin'">
@@ -90,11 +35,6 @@
           </template>
         </Checkbox>
       </p>
-      <p>
-        <Checkbox v-model="discoverable">
-          {{ $t('settings.discoverable') }}
-        </Checkbox>
-      </p>
       <div v-if="maxFields > 0">
         <p>{{ $t('settings.profile_fields.label') }}</p>
         <div
@@ -269,6 +209,67 @@
         {{ $t('settings.save') }}
       </button>
     </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.account_privacy') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path="serverSide_locked">
+            {{ $t('settings.lock_account_description') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="serverSide_discoverable">
+            {{ $t('settings.discoverable') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="serverSide_allowFollowingMove">
+            {{ $t('settings.allow_following_move') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="serverSide_hideFavorites">
+            {{ $t('settings.hide_favorites_description') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="serverSide_hideFollowers">
+            {{ $t('settings.hide_followers_description') }}
+          </BooleanSetting>
+          <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !serverSide_hideFollowers}]"
+          >
+            <li>
+              <BooleanSetting
+                path="serverSide_hideFollowersCount"
+                :disabled="!serverSide_hideFollowers"
+              >
+                {{ $t('settings.hide_followers_count_description') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting path="serverSide_hideFollows">
+            {{ $t('settings.hide_follows_description') }}
+          </BooleanSetting>
+          <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !serverSide_hideFollows}]"
+          >
+            <li>
+              <BooleanSetting
+                path="serverSide_hideFollowsCount"
+                :disabled="!serverSide_hideFollows"
+              >
+                {{ $t('settings.hide_follows_count_description') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 9f4dd1a9..251f63fd 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -35,16 +35,9 @@ import FontControl from 'src/components/font_control/font_control.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Select from 'src/components/select/select.vue'
 
 import Preview from './preview.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
 
 // List of color values used in v1
 const v1OnlyNames = [
@@ -79,7 +72,8 @@ export default {
         getExportedObject: () => this.exportedTheme
       }),
       availableStyles: [],
-      selected: this.$store.getters.mergedConfig.theme,
+      selected: '',
+      selectedTheme: this.$store.getters.mergedConfig.theme,
       themeWarning: undefined,
       tempImportFile: undefined,
       engineVersion: 0,
@@ -213,7 +207,7 @@ export default {
       }
     },
     selectedVersion () {
-      return Array.isArray(this.selected) ? 1 : 2
+      return Array.isArray(this.selectedTheme) ? 1 : 2
     },
     currentColors () {
       return Object.keys(SLOT_INHERITANCE)
@@ -394,7 +388,8 @@ export default {
     FontControl,
     TabSwitcher,
     Preview,
-    Checkbox
+    Checkbox,
+    Select
   },
   methods: {
     loadTheme (
@@ -479,7 +474,7 @@ export default {
           this.loadThemeFromLocalStorage(false, true)
           break
         case 'file':
-          console.err('Forcing snapshout from file is not supported yet')
+          console.error('Forcing snapshot from file is not supported yet')
           break
       }
       this.dismissWarning()
@@ -750,6 +745,16 @@ export default {
       }
     },
     selected () {
+      this.selectedTheme = Object.entries(this.availableStyles).find(([k, s]) => {
+        if (Array.isArray(s)) {
+          console.log(s[0] === this.selected, this.selected)
+          return s[0] === this.selected
+        } else {
+          return s.name === this.selected
+        }
+      })[1]
+    },
+    selectedTheme () {
       this.dismissWarning()
       if (this.selectedVersion === 1) {
         if (!this.keepRoundness) {
@@ -767,17 +772,17 @@ export default {
         if (!this.keepColor) {
           this.clearV1()
 
-          this.bgColorLocal = this.selected[1]
-          this.fgColorLocal = this.selected[2]
-          this.textColorLocal = this.selected[3]
-          this.linkColorLocal = this.selected[4]
-          this.cRedColorLocal = this.selected[5]
-          this.cGreenColorLocal = this.selected[6]
-          this.cBlueColorLocal = this.selected[7]
-          this.cOrangeColorLocal = this.selected[8]
+          this.bgColorLocal = this.selectedTheme[1]
+          this.fgColorLocal = this.selectedTheme[2]
+          this.textColorLocal = this.selectedTheme[3]
+          this.linkColorLocal = this.selectedTheme[4]
+          this.cRedColorLocal = this.selectedTheme[5]
+          this.cGreenColorLocal = this.selectedTheme[6]
+          this.cBlueColorLocal = this.selectedTheme[7]
+          this.cOrangeColorLocal = this.selectedTheme[8]
         }
       } else if (this.selectedVersion >= 2) {
-        this.normalizeLocalState(this.selected.theme, 2, this.selected.source)
+        this.normalizeLocalState(this.selectedTheme.theme, 2, this.selectedTheme.source)
       }
     }
   }
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 1b7d9f31..0db21537 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -270,6 +270,9 @@
 
   .apply-container {
     justify-content: center;
+    position: absolute;
+    bottom: 8px;
+    right: 5px;
   }
 
   .radius-item,
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 62378867..c02986ed 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -55,7 +55,7 @@
               for="preset-switcher"
               class="select"
             >
-              <select
+              <Select
                 id="preset-switcher"
                 v-model="selected"
                 class="preset-switcher"
@@ -63,7 +63,7 @@
                 <option
                   v-for="style in availableStyles"
                   :key="style.name"
-                  :value="style"
+                  :value="style.name || style[0]"
                   :style="{
                     backgroundColor: style[1] || (style.theme || style.source).colors.bg,
                     color: style[3] || (style.theme || style.source).colors.text
@@ -71,11 +71,7 @@
                 >
                   {{ style[0] || style.name }}
                 </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
+              </Select>
             </label>
           </div>
           <div class="export-import">
@@ -907,28 +903,19 @@
           <div class="tab-header shadow-selector">
             <div class="select-container">
               {{ $t('settings.style.shadows.component') }}
-              <label
-                for="shadow-switcher"
-                class="select"
+              <Select
+                id="shadow-switcher"
+                v-model="shadowSelected"
+                class="shadow-switcher"
               >
-                <select
-                  id="shadow-switcher"
-                  v-model="shadowSelected"
-                  class="shadow-switcher"
+                <option
+                  v-for="shadow in shadowsAvailable"
+                  :key="shadow"
+                  :value="shadow"
                 >
-                  <option
-                    v-for="shadow in shadowsAvailable"
-                    :key="shadow"
-                    :value="shadow"
-                  >
-                    {{ $t('settings.style.shadows.components.' + shadow) }}
-                  </option>
-                </select>
-                <FAIcon
-                  class="select-down-icon"
-                  icon="chevron-down"
-                />
-              </label>
+                  {{ $t('settings.style.shadows.components.' + shadow) }}
+                </option>
+              </Select>
             </div>
             <div class="override">
               <label