Merge branch 'settings-shuffle' into shigusegubu-themes3

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

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' ]
+      const wrapperClasses = ['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
@@ -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>

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 {

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

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'

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'

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;
 

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>

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,
+    PaletteEditor
-    VerticalTabSwitcher
   },
   mounted () {
     useInterfaceStore().getThemeData()

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>

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

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

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

src/components/settings_modal/tabs/general_tab.vue

@@ -136,8 +136,13 @@
           </BooleanSetting>
         </li>
       </ul>
-      <h3 v-if="expertLevel > 0">{{ $t('settings.confirmations') }}</h3>
+      <h3 v-if="expertLevel > 0">
-      <ul v-if="expertLevel > 0" class="setting-list">
+        {{ $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">

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"

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

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"

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>
+      <h3>{{ $t('settings.change_email') }}</h3>
-      <div>
+      <ul class="setting-list">
-        <p>{{ $t('settings.new_email') }}</p>
+        <li>
-        <input
+          <h4>{{ $t('settings.new_email') }}</h4>
-          v-model="newEmail"
+          <input
-          type="email"
+            v-model="newEmail"
-          autocomplete="email"
+            type="email"
-          class="input"
+            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"
           >
-            <td>{{ oauthToken.appName }}</td>
+        </li>
-            <td>{{ oauthToken.validUntil }}</td>
+        <li>
-            <td class="actions">
+          <h4>{{ $t('settings.current_password') }}</h4>
-              <button
+          <input
-                class="btn button-default"
+            v-model="changeEmailPassword"
-                @click="revokeToken(oauthToken.id)"
+            type="password"
-              >
+            autocomplete="current-password"
-                {{ $t('settings.revoke_token') }}
+            class="input"
-              </button>
+          >
-            </td>
+        </li>
-          </tr>
+        <li>
-        </tbody>
+          <button
-      </table>
+            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>

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
+                  <RichContent
-                    v-if="status.user?.name"
+                    :html="status.user.name"
-                    class="account-name"
+                    :emoji="status.user.emoji"
-                    :title="status.user?.screen_name_ui"
+                    :is-local="status.user.is_local"
-                    :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"

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