20 changed files with 278 additions and 332 deletions
--- a/changelog.d/settings-shuffle.change
+++ b/changelog.d/settings-shuffle.change
@ -1,3 +0,0 @@
-rearranged and split settings to make more sense and be less of a wall of text
-on mobile settings now take up full width and presented in navigation style
-improved styles for settings
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@ -50,11 +50,9 @@
    }

    &.two-column {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
+      column-count: 2;

      > li {
-        margin: 0;
        break-inside: avoid;
      }
    }
@ -108,13 +106,11 @@
  &.-mobile {
    .tabs {
      .menu-item {
-        font-size: 1.2em;
-        padding-top: 0.75em;
-        padding-bottom: 0.75em;
+        font-size: 1.2em
      }
    }

-    .setting-list:not(.suboptions),
+    .setting-list,
    .option-list {
      padding-left: 0.25em;

@ -125,7 +121,7 @@
      }

      &.two-column {
-        grid-template-columns: 1fr;
+        column-count: 1;
      }
    }
  }
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@ -1,4 +1,4 @@
-import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
+import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx'

 import InstanceTab from './admin_tabs/instance_tab.vue'
 import LimitsTab from './admin_tabs/limits_tab.vue'
--- a/src/components/settings_modal/settings_modal_user_content.js
+++ b/src/components/settings_modal/settings_modal_user_content.js
@ -1,4 +1,4 @@
-import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
+import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx'

 import DataImportExportTab from './tabs/data_import_export_tab.vue'
 import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
--- a/src/components/settings_modal/settings_modal_user_content.scss
+++ b/src/components/settings_modal/settings_modal_user_content.scss
@ -1,11 +1,8 @@
 .settings_tab-switcher {
  height: 100%;

-  [full-height="true"] {
-    height: 100%
-  }
-
  .setting-item {
+    border-bottom: 2px solid var(--border);
    margin: 1em 1em 1.4em;
    padding-bottom: 1.4em;

--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@ -80,7 +80,6 @@
      icon="eye-slash"
      data-tab-name="mutesAndBlocks"
      :full-width="true"
-      :full-height="true"
    >
      <MutesAndBlocksTab />
    </div>
@ -96,6 +95,7 @@
      :label="$t('settings.security_tab')"
      icon="lock"
      data-tab-name="security"
+      :full-width="true"
    >
      <SecurityTab />
    </div>
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@ -1,3 +1,5 @@
+import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx'
+
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
@ -86,7 +88,8 @@ const AppearanceTab = {
    UnitSetting,
    ProfileSettingIndicator,
    Preview,
-    PaletteEditor
+    PaletteEditor,
+    VerticalTabSwitcher
  },
  mounted () {
    useInterfaceStore().getThemeData()
--- a/src/components/settings_modal/tabs/composing_tab.vue
+++ b/src/components/settings_modal/tabs/composing_tab.vue
@ -13,8 +13,7 @@
              :user-default="$store.state.profileConfig.defaultScope"
              :initial-scope="$store.state.profileConfig.defaultScope"
              :on-scope-change="changeDefaultScope"
-              :unstyled="false"
-              uns
+              :unstyled="false"uns
            />
            <ProfileSettingIndicator :is-profile="true" />
          </label>
@ -83,9 +82,7 @@
          </ChoiceSetting>
        </li>
      </ul>
-      <h3 v-if="expertLevel > 0">
-        {{ $t('settings.attachments') }}
-      </h3>
+      <h3 v-if="expertLevel > 0">{{ $t('settings.attachments') }}</h3>
      <ul class="setting-list">
        <li>
          <BooleanSetting
@ -94,18 +91,18 @@
          >
            {{ $t('settings.image_compression') }}
          </BooleanSetting>
-          <ul class="setting-list suboptions">
-            <li>
-              <BooleanSetting
-                path="alwaysUseJpeg"
-                expert="1"
-                parent-path="imageCompression"
-              >
-                {{ $t('settings.always_use_jpeg') }}
-              </BooleanSetting>
-            </li>
-          </ul>
        </li>
+        <ul class="setting-list suboptions">
+          <li>
+            <BooleanSetting
+              path="alwaysUseJpeg"
+              expert="1"
+              parent-path="imageCompression"
+            >
+              {{ $t('settings.always_use_jpeg') }}
+            </BooleanSetting>
+          </li>
+        </ul>
      </ul>
    </div>
  </div>
--- a/src/components/settings_modal/tabs/developer_tab.js
+++ b/src/components/settings_modal/tabs/developer_tab.js
@ -23,23 +23,6 @@ const VersionTab = {
      return pleromaFeCommitUrl + this.frontendVersion
    },
    ...SharedComputedObject(),
-  },
-  methods: {
-    clearAssetCache () {
-      this.clearCache(cacheKey)
-    },
-    clearEmojiCache () {
-      this.clearCache(emojiCacheKey)
-    },
-    clearCache (key) {
-      clearCache(key)
-        .then(() => {
-          this.$store.dispatch('settingsSaved', { success: true })
-        })
-        .catch(error => {
-          this.$store.dispatch('settingsSaved', { error })
-        })
-    }
  }
 }

--- a/src/components/settings_modal/tabs/developer_tab.vue
+++ b/src/components/settings_modal/tabs/developer_tab.vue
@ -4,7 +4,7 @@
    class="developer-tab"
  >
    <div class="setting-item">
-      <h3>{{ $t('settings.version.title') }}</h3>
+      <h3>{{ $t('settings.version.title')}}</h3>
      <dl class="setting-list">
        <dt>{{ $t('settings.version.backend_version') }}</dt>
        <dd>
@ -20,12 +20,12 @@
          <a
            :href="frontendVersionLink"
            target="_blank"
-          >
+            >
            {{ frontendVersion }}
          </a>
        </dd>
      </dl>
-      <h3>{{ $t('settings.debug') }}</h3>
+      <h3>{{ $t('settings.debug')}}</h3>
      <ul class="setting-list">
        <li>
          <BooleanSetting path="virtualScrolling">
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@ -7,10 +7,12 @@ import FloatSetting from '../helpers/float_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import FontControl from 'src/components/font_control/font_control.vue'
+import { defaultHorizontalUnits } from '../helpers/unit_setting.js'

 import SharedComputedObject from '../helpers/shared_computed_object.js'

 import localeService from 'src/services/locale/locale.service.js'
+import { clearCache, cacheKey, emojiCacheKey } from 'src/services/sw/sw.js'

 const GeneralTab = {
  props: {
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -136,13 +136,8 @@
          </BooleanSetting>
        </li>
      </ul>
-      <h3 v-if="expertLevel > 0">
-        {{ $t('settings.confirmations') }}
-      </h3>
-      <ul
-        v-if="expertLevel > 0"
-        class="setting-list"
-      >
+      <h3 v-if="expertLevel > 0">{{ $t('settings.confirmations') }}</h3>
+      <ul v-if="expertLevel > 0" class="setting-list">
        <li class="select-multiple">
          <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
          <ul class="option-list">
--- a/src/components/settings_modal/tabs/layout_tab.vue
+++ b/src/components/settings_modal/tabs/layout_tab.vue
@ -24,6 +24,16 @@
            {{ $t('settings.autohide_floating_post_button') }}
          </BooleanSetting>
        </li>
+        <li>
+          <BooleanSetting path="disableStickyHeaders">
+            {{ $t('settings.disable_sticky_headers') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="showScrollbars">
+            {{ $t('settings.show_scrollbars') }}
+          </BooleanSetting>
+        </li>
        <li>
          <BooleanSetting
            path="userPopoverOverlay"
@ -49,6 +59,9 @@
            {{ $t('settings.theme_editor_min_width') }}
          </UnitSetting>
        </li>
+      </ul>
+      <h3>{{ $t('settings.columns') }}</h3>
+      <ul class="setting-list">
        <li>
          <UnitSetting
            path="navbarSize"
@ -59,19 +72,6 @@
            {{ $t('settings.navbar_size') }}
          </UnitSetting>
        </li>
-      </ul>
-      <h3>{{ $t('settings.columns') }}</h3>
-      <ul class="setting-list">
-        <li>
-          <BooleanSetting path="disableStickyHeaders">
-            {{ $t('settings.disable_sticky_headers') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="showScrollbars">
-            {{ $t('settings.show_scrollbars') }}
-          </BooleanSetting>
-        </li>
        <li v-if="instanceSpecificPanelPresent">
          <BooleanSetting path="hideISP">
            {{ $t('settings.hide_isp') }}
@ -109,7 +109,7 @@
          </ChoiceSetting>
        </li>
        <li v-if="expertLevel > 0">
-          <h4> {{ $t('settings.column_sizes') }} </h4>
+          {{ $t('settings.column_sizes') }}
          <div class="column-settings">
            <UnitSetting
              v-for="column in columns"
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@ -1,7 +1,7 @@
 <template>
  <div :label="$t('settings.notifications')">
    <div class="setting-item">
-      <h3>{{ $t('settings.notification_setting_annoyance') }}</h3>
+      <h2>{{ $t('settings.notification_setting_annoyance') }}</h2>
      <ul class="setting-list">
        <li>
          <BooleanSetting path="closingDrawerMarksAsSeen">
@ -29,7 +29,7 @@
      </ul>
    </div>
    <div class="setting-item">
-      <h3>{{ $t('settings.notification_setting_filters') }}</h3>
+      <h2>{{ $t('settings.notification_setting_filters') }}</h2>
      <ul class="setting-list">
        <li>
          <BooleanSetting
@ -40,13 +40,13 @@
          </BooleanSetting>
        </li>
        <li>
-          <h4> {{ $t('settings.notification_visibility') }}</h4>
+          <h3> {{ $t('settings.notification_visibility') }}</h3>
          <p v-if="expertLevel > 0">
            {{ $t('settings.notification_setting_filters_chrome_push') }}
          </p>
          <ul class="setting-list two-column">
            <li>
-              <h5> {{ $t('settings.notification_visibility_mentions') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_mentions') }}</h4>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.mentions">
@ -61,7 +61,7 @@
              </ul>
            </li>
            <li>
-              <h5> {{ $t('settings.notification_visibility_statuses') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_statuses') }}</h4>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.statuses">
@ -76,7 +76,7 @@
              </ul>
            </li>
            <li>
-              <h5> {{ $t('settings.notification_visibility_likes') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_likes') }}</h4>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.likes">
@ -91,7 +91,7 @@
              </ul>
            </li>
            <li>
-              <h5> {{ $t('settings.notification_visibility_repeats') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_repeats') }}</h4>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.repeats">
@ -106,7 +106,7 @@
              </ul>
            </li>
            <li>
-              <h5> {{ $t('settings.notification_visibility_emoji_reactions') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_emoji_reactions') }}</h4>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.emojiReactions">
@ -121,7 +121,7 @@
              </ul>
            </li>
            <li>
-              <h5> {{ $t('settings.notification_visibility_follows') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_follows') }}</h4>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.follows">
@ -136,7 +136,7 @@
              </ul>
            </li>
            <li>
-              <h5> {{ $t('settings.notification_visibility_follow_requests') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_follow_requests') }}</h4>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.followRequest">
@ -151,7 +151,7 @@
              </ul>
            </li>
            <li>
-              <h5> {{ $t('settings.notification_visibility_moves') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_moves') }}</h4>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.moves">
@ -166,7 +166,7 @@
              </ul>
            </li>
            <li>
-              <h5> {{ $t('settings.notification_visibility_polls') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_polls') }}</h4>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.polls">
@ -181,7 +181,7 @@
              </ul>
            </li>
            <li v-if="canReceiveReports">
-              <h5> {{ $t('settings.notification_visibility_reports') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_reports') }}</h4>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.reports">
@ -201,6 +201,8 @@
          <BooleanSetting path="showExtraNotifications">
            {{ $t('settings.notification_show_extra') }}
          </BooleanSetting>
+        </li>
+        <li>
          <ul class="setting-list suboptions">
            <li>
              <BooleanSetting
@ -243,7 +245,7 @@
      v-if="expertLevel > 0"
      class="setting-item"
    >
-      <h3>{{ $t('settings.notification_setting_privacy') }}</h3>
+      <h2>{{ $t('settings.notification_setting_privacy') }}</h2>
      <ul class="setting-list">
        <li>
          <BooleanSetting
--- a/src/components/settings_modal/tabs/posts_tab.vue
+++ b/src/components/settings_modal/tabs/posts_tab.vue
@ -16,43 +16,6 @@
          >
            {{ $t('settings.conversation_display') }}
          </ChoiceSetting>
-          <ul
-            v-if="mergedConfig.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>
        <li>
          <FontControl
@ -72,6 +35,43 @@
            @update:model-value="v => updateFont('monospace', v)"
          />
        </li>
+        <ul
+          v-if="mergedConfig.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="greentext">
            <i18n-t
@ -103,16 +103,6 @@
          >
            {{ $t('settings.mention_link_display') }}
          </ChoiceSetting>
-          <ul class="setting-list suboptions">
-            <li>
-              <BooleanSetting
-                v-if="mergedConfig.mentionLinkDisplay !== 'short'"
-                path="mentionLinkFadeDomain"
-              >
-                {{ $t('settings.mention_link_fade_domain') }}
-              </BooleanSetting>
-            </li>
-          </ul>
        </li>
        <li>
          <BooleanSetting
@ -127,6 +117,14 @@
            {{ $t('settings.mention_link_show_avatar') }}
          </BooleanSetting>
        </li>
+        <li>
+          <BooleanSetting
+            v-if="mergedConfig.mentionLinkDisplay !== 'short'"
+            path="mentionLinkFadeDomain"
+          >
+            {{ $t('settings.mention_link_fade_domain') }}
+          </BooleanSetting>
+        </li>
        <li v-if="user">
          <BooleanSetting
            path="mentionLinkBoldenYou"
@ -144,22 +142,22 @@
          >
            {{ $t('settings.no_rich_text_description') }}
          </BooleanSetting>
-          <ul
-            v-if="mergedConfig.useAbsoluteTimeFormat"
-            class="setting-list suboptions"
-          >
-            <li>
-              <UnitSetting
-                path="absoluteTimeFormatMinAge"
-                unit-set="time"
-                :units="['s', 'm', 'h', 'd']"
-                :min="0"
-              >
-                {{ $t('settings.absolute_time_format_min_age') }}
-              </UnitSetting>
-            </li>
-          </ul>
        </li>
+        <ul
+          v-if="mergedConfig.useAbsoluteTimeFormat"
+          class="setting-list suboptions"
+        >
+          <li>
+            <UnitSetting
+              path="absoluteTimeFormatMinAge"
+              unit-set="time"
+              :units="['s', 'm', 'h', 'd']"
+              :min="0"
+            >
+              {{ $t('settings.absolute_time_format_min_age') }}
+            </UnitSetting>
+          </li>
+        </ul>
      </ul>
      <h3>{{ $t('settings.attachments') }}</h3>
      <ul class="setting-list">
@ -172,27 +170,27 @@
          <BooleanSetting path="hideNsfw">
            {{ $t('settings.nsfw_clickthrough') }}
          </BooleanSetting>
-          <ul class="setting-list suboptions">
-            <li>
-              <BooleanSetting
-                path="preloadImage"
-                expert="1"
-                parent-path="hideNsfw"
-              >
-                {{ $t('settings.preload_images') }}
-              </BooleanSetting>
-            </li>
-            <li>
-              <BooleanSetting
-                path="useOneClickNsfw"
-                expert="1"
-                parent-path="hideNsfw"
-              >
-                {{ $t('settings.use_one_click_nsfw') }}
-              </BooleanSetting>
-            </li>
-          </ul>
        </li>
+        <ul class="setting-list suboptions">
+          <li>
+            <BooleanSetting
+              path="preloadImage"
+              expert="1"
+              parent-path="hideNsfw"
+            >
+              {{ $t('settings.preload_images') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <BooleanSetting
+              path="useOneClickNsfw"
+              expert="1"
+              parent-path="hideNsfw"
+            >
+              {{ $t('settings.use_one_click_nsfw') }}
+            </BooleanSetting>
+          </li>
+        </ul>
        <li>
          <BooleanSetting
            path="loopVideo"
--- a/src/components/settings_modal/tabs/security_tab/security_tab.vue
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@ -1,97 +1,116 @@
 <template>
  <div :label="$t('settings.security_tab')">
    <div class="setting-item">
-      <h3>{{ $t('settings.change_email') }}</h3>
-      <ul class="setting-list">
-        <li>
-          <h4>{{ $t('settings.new_email') }}</h4>
-          <input
-            v-model="newEmail"
-            type="email"
-            autocomplete="email"
-            class="input"
-          >
-        </li>
-        <li>
-          <h4>{{ $t('settings.current_password') }}</h4>
-          <input
-            v-model="changeEmailPassword"
-            type="password"
-            autocomplete="current-password"
-            class="input"
-          >
-        </li>
-        <li>
-          <button
-            class="btn button-default"
-            @click="changeEmail"
-          >
-            {{ $t('settings.save') }}
-          </button>
-        </li>
-        <li>
-          <p v-if="changedEmail">
-            {{ $t('settings.changed_email') }}
-          </p>
-          <template v-if="changeEmailError !== false">
-            <p>{{ $t('settings.change_email_error') }}</p>
-            <p>{{ changeEmailError }}</p>
-          </template>
-        </li>
-      </ul>
+      <h2>{{ $t('settings.change_email') }}</h2>
+      <div>
+        <p>{{ $t('settings.new_email') }}</p>
+        <input
+          v-model="newEmail"
+          type="email"
+          autocomplete="email"
+          class="input"
+        >
+      </div>
+      <div>
+        <p>{{ $t('settings.current_password') }}</p>
+        <input
+          v-model="changeEmailPassword"
+          type="password"
+          autocomplete="current-password"
+          class="input"
+        >
+      </div>
+      <button
+        class="btn button-default"
+        @click="changeEmail"
+      >
+        {{ $t('settings.save') }}
+      </button>
+      <p v-if="changedEmail">
+        {{ $t('settings.changed_email') }}
+      </p>
+      <template v-if="changeEmailError !== false">
+        <p>{{ $t('settings.change_email_error') }}</p>
+        <p>{{ changeEmailError }}</p>
+      </template>
    </div>

    <div class="setting-item">
-      <h3>{{ $t('settings.change_password') }}</h3>
-      <ul class="setting-list">
-        <li>
-          <h4>{{ $t('settings.current_password') }}</h4>
-          <input
-            v-model="changePasswordInputs[0]"
-            type="password"
-            class="input"
-          >
-        </li>
-        <li>
-          <h4>{{ $t('settings.new_password') }}</h4>
-          <input
-            v-model="changePasswordInputs[1]"
-            type="password"
-            class="input"
-          >
-        </li>
-        <li>
-          <h4>{{ $t('settings.confirm_new_password') }}</h4>
-          <input
-            v-model="changePasswordInputs[2]"
-            type="password"
-            class="input"
-          >
-        </li>
-        <li>
-          <button
-            class="btn button-default"
-            @click="changePassword"
-          >
-            {{ $t('settings.save') }}
-          </button>
-        </li>
-        <li>
-          <p v-if="changedPassword">
-            {{ $t('settings.changed_password') }}
-          </p>
-          <p v-else-if="changePasswordError !== false">
-            {{ $t('settings.change_password_error') }}
-          </p>
-          <p v-if="changePasswordError">
-            {{ changePasswordError }}
-          </p>
-        </li>
-      </ul>
+      <h2>{{ $t('settings.change_password') }}</h2>
+      <div>
+        <p>{{ $t('settings.current_password') }}</p>
+        <input
+          v-model="changePasswordInputs[0]"
+          type="password"
+          class="input"
+        >
+      </div>
+      <div>
+        <p>{{ $t('settings.new_password') }}</p>
+        <input
+          v-model="changePasswordInputs[1]"
+          type="password"
+          class="input"
+        >
+      </div>
+      <div>
+        <p>{{ $t('settings.confirm_new_password') }}</p>
+        <input
+          v-model="changePasswordInputs[2]"
+          type="password"
+          class="input"
+        >
+      </div>
+      <button
+        class="btn button-default"
+        @click="changePassword"
+      >
+        {{ $t('settings.save') }}
+      </button>
+      <p v-if="changedPassword">
+        {{ $t('settings.changed_password') }}
+      </p>
+      <p v-else-if="changePasswordError !== false">
+        {{ $t('settings.change_password_error') }}
+      </p>
+      <p v-if="changePasswordError">
+        {{ changePasswordError }}
+      </p>
    </div>

    <div class="setting-item">
-      <h3>{{ $t('settings.account_alias') }}</h3>
+      <h2>{{ $t('settings.oauth_tokens') }}</h2>
+      <table class="oauth-tokens">
+        <thead>
+          <tr>
+            <th>{{ $t('settings.app_name') }}</th>
+            <th>{{ $t('settings.valid_until') }}</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="oauthToken in oauthTokens"
+            :key="oauthToken.id"
+          >
+            <td>{{ oauthToken.appName }}</td>
+            <td>{{ oauthToken.validUntil }}</td>
+            <td class="actions">
+              <button
+                class="btn button-default"
+                @click="revokeToken(oauthToken.id)"
+              >
+                {{ $t('settings.revoke_token') }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <mfa />
+
+    <div class="setting-item">
+      <h2>{{ $t('settings.account_alias') }}</h2>
      <table>
        <thead>
          <tr>
@ -159,40 +178,8 @@
      </template>
    </div>

-
    <div class="setting-item">
-      <h3>{{ $t('settings.oauth_tokens') }}</h3>
-      <table class="oauth-tokens">
-        <thead>
-          <tr>
-            <th>{{ $t('settings.app_name') }}</th>
-            <th>{{ $t('settings.valid_until') }}</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="oauthToken in oauthTokens"
-            :key="oauthToken.id"
-          >
-            <td>{{ oauthToken.appName }}</td>
-            <td>{{ oauthToken.validUntil }}</td>
-            <td class="actions">
-              <button
-                class="btn button-default"
-                @click="revokeToken(oauthToken.id)"
-              >
-                {{ $t('settings.revoke_token') }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <mfa />
-
-    <div class="setting-item">
-      <h3>{{ $t('settings.move_account') }}</h3>
+      <h2>{{ $t('settings.move_account') }}</h2>
      <p>{{ $t('settings.move_account_notes') }}</p>
      <div>
        <i18n-t
@ -235,7 +222,7 @@
    </div>

    <div class="setting-item">
-      <h3>{{ $t('settings.delete_account') }}</h3>
+      <h2>{{ $t('settings.delete_account') }}</h2>
      <p v-if="!deletingAccount">
        {{ $t('settings.delete_account_description') }}
      </p>
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -139,34 +139,32 @@
            class="status-heading"
          >
            <div class="heading-name-row">
-              <div
-                v-if="status.user"
-                class="heading-left"
-              >
+              <div class="heading-left">
                <h4
-                  v-if="status.user.name_html"
                  class="status-username"
-                  :title="status.user.name"
+                  :title="status.user?.name ?? $t('status.unknown_user_info')"
                >
-                  <RichContent
-                    :html="status.user.name"
-                    :emoji="status.user.emoji"
-                    :is-local="status.user.is_local"
-                  />
+                  <user-link
+                    v-if="status.user?.name"
+                    class="account-name"
+                    :title="status.user?.screen_name_ui"
+                    :user="status?.user"
+                    :at="false"
+                  >
+                    <RichContent
+                      :html="status.user.name"
+                      :emoji="status.user.emoji"
+                      :is-local="status.user.is_local"
+                    />
+                    <span>{{ status.user.name }}</span>
+                  </user-link>
+                  <span
+                    v-else
+                    class="account-name unknown"
+                  >
+                    {{ $t('status.unknown_user') }}
+                  </span>
                </h4>
-                <h4
-                  v-else
-                  class="status-username"
-                  :title="status.user.name"
-                >
-                  {{ status.user.name }}
-                </h4>
-                <user-link
-                  class="account-name"
-                  :title="status.user.screen_name_ui"
-                  :user="status.user"
-                  :at="false"
-                />
                <img
                  v-if="!!(status.user && status.user.favicon)"
                  class="status-favicon"
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
@ -128,8 +128,10 @@ export default {
      const props = slot.props
      if (!props) return
      const active = this.activeIndex === index
-      const wrapperClasses = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
-
+      const classes = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
+      if (props.fullHeight) {
+        classes.push('-full-height')
+      }
      let delayRender = slot.props['delay-render']
      if (delayRender && active) {
        slot.props['delay-render'] = false
@ -157,20 +159,13 @@ export default {
        </h2>
      )

-      const contentClasses = ['tab-content']
-      if (props['full-width']) {
-        contentClasses.push('-full-width')
-      }
-      if (props['full-height']) {
-        contentClasses.push('-full-height')
-      }
      return (
-        <div class={wrapperClasses} >
+        <div class={classes} >
          <div class="tab-mobile-header">
            {header}
          </div>
          <div class="tab-slot-wrapper">
-            <div class={contentClasses} >
+            <div class={ ['tab-content', props['full-width'] ? '-full-width' : null].join(' ') } >
              {renderSlot}
            </div>
          </div>
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.scss
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
@ -39,10 +39,6 @@
      &.-full-width {
        align-self: stretch;
      }
-
-      &.-full-height {
-        flex: 1;
-      }
    }

    .tab-content-label {
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -407,7 +407,7 @@
    "posts": "Posts",
    "developer": "Developer",
    "debug": "Debug",
-    "mention_links": "Mention Links",
+    "mention_links": "Mention links",
    "appearance": "Appearance",
    "confirm_new_setting": "Confirm new setting?",
    "confirm_new_question": "Does this look ok? Setting will be reverted in 10 seconds.",
@ -830,7 +830,7 @@
    "user_popover_avatar_overlay": "Show user popover over user avatar",
    "user_card_left_justify": "Justify user bio to the left",
    "user_card_hide_personal_marks": "Hide personal marks (highlight/note) in user profiles",
-    "posts_appearance": "Posts Appearance",
+    "posts_appearance": "Posts appearance",
    "fun": "Fun",
    "greentext": "Meme arrows",
    "plaintext_quotes": "Highlight plaintext {0}",