Merge branch 'settings-shuffle' into shigusegubu-themes3

2025-11-25 20:30:02 +02:00 · 2025-11-25 20:30:02 +02:00 · f2db381817
commit f2db381817
parent 1abbba698d e01753830d
20 changed files with 334 additions and 280 deletions
--- a/changelog.d/settings-shuffle.change
+++ b/changelog.d/settings-shuffle.change
@ -0,0 +1,3 @@
+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/helpers/vertical_tab_switcher.jsx
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
@ -128,10 +128,8 @@ export default {
      const props = slot.props
      if (!props) return
      const active = this.activeIndex === index
-      const classes = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
-      if (props.fullHeight) {
-        classes.push('-full-height')
-      }
+      const wrapperClasses = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
+
      let delayRender = slot.props['delay-render']
      if (delayRender && active) {
        slot.props['delay-render'] = false
@ -159,13 +157,20 @@ 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={classes} >
+        <div class={wrapperClasses} >
          <div class="tab-mobile-header">
            {header}
          </div>
          <div class="tab-slot-wrapper">
-            <div class={ ['tab-content', props['full-width'] ? '-full-width' : null].join(' ') } >
+            <div class={contentClasses} >
              {renderSlot}
            </div>
          </div>
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.scss
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
@ -39,6 +39,10 @@
      &.-full-width {
        align-self: stretch;
      }
+
+      &.-full-height {
+        flex: 1;
+      }
    }

    .tab-content-label {
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@ -50,9 +50,11 @@
    }

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

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

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

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

      &.two-column {
-        column-count: 1;
+        grid-template-columns: 1fr;
      }
    }
  }
--- 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 'src/components/tab_switcher/vertical_tab_switcher.jsx'
+import VerticalTabSwitcher from './helpers/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 'src/components/tab_switcher/vertical_tab_switcher.jsx'
+import VerticalTabSwitcher from './helpers/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,8 +1,11 @@
 .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,6 +80,7 @@
      icon="eye-slash"
      data-tab-name="mutesAndBlocks"
      :full-width="true"
+      :full-height="true"
    >
      <MutesAndBlocksTab />
    </div>
@ -95,7 +96,6 @@
      :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,5 +1,3 @@
-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'
@ -88,8 +86,7 @@ const AppearanceTab = {
    UnitSetting,
    ProfileSettingIndicator,
    Preview,
-    PaletteEditor,
-    VerticalTabSwitcher
+    PaletteEditor
  },
  mounted () {
    useInterfaceStore().getThemeData()
--- a/src/components/settings_modal/tabs/composing_tab.vue
+++ b/src/components/settings_modal/tabs/composing_tab.vue
@ -13,7 +13,8 @@
              :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>
@ -82,7 +83,9 @@
          </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
@ -91,18 +94,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,6 +23,23 @@ 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,12 +7,10 @@ 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,8 +136,13 @@
          </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,16 +24,6 @@
            {{ $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"
@ -59,9 +49,6 @@
            {{ $t('settings.theme_editor_min_width') }}
          </UnitSetting>
        </li>
-      </ul>
-      <h3>{{ $t('settings.columns') }}</h3>
-      <ul class="setting-list">
        <li>
          <UnitSetting
            path="navbarSize"
@ -72,6 +59,19 @@
            {{ $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">
-          {{ $t('settings.column_sizes') }}
+          <h4> {{ $t('settings.column_sizes') }} </h4>
          <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">
-      <h2>{{ $t('settings.notification_setting_annoyance') }}</h2>
+      <h3>{{ $t('settings.notification_setting_annoyance') }}</h3>
      <ul class="setting-list">
        <li>
          <BooleanSetting path="closingDrawerMarksAsSeen">
@ -29,7 +29,7 @@
      </ul>
    </div>
    <div class="setting-item">
-      <h2>{{ $t('settings.notification_setting_filters') }}</h2>
+      <h3>{{ $t('settings.notification_setting_filters') }}</h3>
      <ul class="setting-list">
        <li>
          <BooleanSetting
@ -40,13 +40,13 @@
          </BooleanSetting>
        </li>
        <li>
-          <h3> {{ $t('settings.notification_visibility') }}</h3>
+          <h4> {{ $t('settings.notification_visibility') }}</h4>
          <p v-if="expertLevel > 0">
            {{ $t('settings.notification_setting_filters_chrome_push') }}
          </p>
          <ul class="setting-list two-column">
            <li>
-              <h4> {{ $t('settings.notification_visibility_mentions') }}</h4>
+              <h5> {{ $t('settings.notification_visibility_mentions') }}</h5>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.mentions">
@ -61,7 +61,7 @@
              </ul>
            </li>
            <li>
-              <h4> {{ $t('settings.notification_visibility_statuses') }}</h4>
+              <h5> {{ $t('settings.notification_visibility_statuses') }}</h5>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.statuses">
@ -76,7 +76,7 @@
              </ul>
            </li>
            <li>
-              <h4> {{ $t('settings.notification_visibility_likes') }}</h4>
+              <h5> {{ $t('settings.notification_visibility_likes') }}</h5>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.likes">
@ -91,7 +91,7 @@
              </ul>
            </li>
            <li>
-              <h4> {{ $t('settings.notification_visibility_repeats') }}</h4>
+              <h5> {{ $t('settings.notification_visibility_repeats') }}</h5>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.repeats">
@ -106,7 +106,7 @@
              </ul>
            </li>
            <li>
-              <h4> {{ $t('settings.notification_visibility_emoji_reactions') }}</h4>
+              <h5> {{ $t('settings.notification_visibility_emoji_reactions') }}</h5>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.emojiReactions">
@ -121,7 +121,7 @@
              </ul>
            </li>
            <li>
-              <h4> {{ $t('settings.notification_visibility_follows') }}</h4>
+              <h5> {{ $t('settings.notification_visibility_follows') }}</h5>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.follows">
@ -136,7 +136,7 @@
              </ul>
            </li>
            <li>
-              <h4> {{ $t('settings.notification_visibility_follow_requests') }}</h4>
+              <h5> {{ $t('settings.notification_visibility_follow_requests') }}</h5>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.followRequest">
@ -151,7 +151,7 @@
              </ul>
            </li>
            <li>
-              <h4> {{ $t('settings.notification_visibility_moves') }}</h4>
+              <h5> {{ $t('settings.notification_visibility_moves') }}</h5>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.moves">
@ -166,7 +166,7 @@
              </ul>
            </li>
            <li>
-              <h4> {{ $t('settings.notification_visibility_polls') }}</h4>
+              <h5> {{ $t('settings.notification_visibility_polls') }}</h5>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.polls">
@ -181,7 +181,7 @@
              </ul>
            </li>
            <li v-if="canReceiveReports">
-              <h4> {{ $t('settings.notification_visibility_reports') }}</h4>
+              <h5> {{ $t('settings.notification_visibility_reports') }}</h5>
              <ul class="setting-list">
                <li>
                  <BooleanSetting path="notificationVisibility.reports">
@ -201,8 +201,6 @@
          <BooleanSetting path="showExtraNotifications">
            {{ $t('settings.notification_show_extra') }}
          </BooleanSetting>
-        </li>
-        <li>
          <ul class="setting-list suboptions">
            <li>
              <BooleanSetting
@ -245,7 +243,7 @@
      v-if="expertLevel > 0"
      class="setting-item"
    >
-      <h2>{{ $t('settings.notification_setting_privacy') }}</h2>
+      <h3>{{ $t('settings.notification_setting_privacy') }}</h3>
      <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,6 +16,43 @@
          >
            {{ $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
@ -35,43 +72,6 @@
            @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,6 +103,16 @@
          >
            {{ $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
@ -117,14 +127,6 @@
            {{ $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"
@ -142,22 +144,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">
@ -170,27 +172,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,116 +1,97 @@
 <template>
  <div :label="$t('settings.security_tab')">
    <div class="setting-item">
-      <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">
-      <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">
-      <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"
+      <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"
          >
-            <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>
+        </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>
    </div>
-    <mfa />

    <div class="setting-item">
-      <h2>{{ $t('settings.account_alias') }}</h2>
+      <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>
+    </div>
+
+    <div class="setting-item">
+      <h3>{{ $t('settings.account_alias') }}</h3>
      <table>
        <thead>
          <tr>
@ -178,8 +159,40 @@
      </template>
    </div>

+
    <div class="setting-item">
-      <h2>{{ $t('settings.move_account') }}</h2>
+      <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>
      <p>{{ $t('settings.move_account_notes') }}</p>
      <div>
        <i18n-t
@ -222,7 +235,7 @@
    </div>

    <div class="setting-item">
-      <h2>{{ $t('settings.delete_account') }}</h2>
+      <h3>{{ $t('settings.delete_account') }}</h3>
      <p v-if="!deletingAccount">
        {{ $t('settings.delete_account_description') }}
      </p>
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -139,32 +139,34 @@
            class="status-heading"
          >
            <div class="heading-name-row">
-              <div class="heading-left">
+              <div
+                v-if="status.user"
+                class="heading-left"
+              >
                <h4
+                  v-if="status.user.name_html"
                  class="status-username"
-                  :title="status.user?.name ?? $t('status.unknown_user_info')"
+                  :title="status.user.name"
                >
-                  <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>
+                  <RichContent
+                    :html="status.user.name"
+                    :emoji="status.user.emoji"
+                    :is-local="status.user.is_local"
+                  />
                </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/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}",