initial nested settings impl

src/components/settings_modal/tabs/appearance_tab.js

@@ -1,3 +1,5 @@
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
@@ -26,11 +28,17 @@ import { useInterfaceStore, normalizeThemeData } from 'src/stores/interface'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faGlobe
+  faGlobe,
+  faDashboard,
+  faPaintRoller,
+  faTableColumns
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faGlobe
+  faGlobe,
+  faPaintRoller,
+  faDashboard,
+  faTableColumns
 )
 
 const AppearanceTab = {
@@ -88,7 +96,8 @@ const AppearanceTab = {
     ProfileSettingIndicator,
     FontControl,
     Preview,
-    PaletteEditor
+    PaletteEditor,
+    TabSwitcher
   },
   mounted () {
     useInterfaceStore().getThemeData()
@@ -200,6 +209,8 @@ const AppearanceTab = {
     paletteDataUsed () {
       return useInterfaceStore().paletteDataUsed
     },
+    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
+    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
     availableStyles () {
       return [
         ...this.availableThemesV3,

src/components/settings_modal/tabs/appearance_tab.scss

@@ -160,7 +160,7 @@
 
     .theme-preview {
       font-size: 1rem; // fix for firefox
-      width: 19rem;
+      width: 14rem;
       display: flex;
       flex-direction: column;
       align-items: center;

src/components/settings_modal/tabs/appearance_tab.vue

@@ -1,10 +1,287 @@
 <template>
-  <div
+  <tab-switcher
     class="appearance-tab"
-    :label="$t('settings.general')"
+    :label="$t('settings.appearance')"
+    ref="tabSwitcher"
+    :side-tab-bar="true"
+    :scrollable-tabs="true"
   >
-    <div class="setting-item">
+    <div
-      <h2>{{ $t('settings.theme') }}</h2>
+      :label="$t('settings.interface')"
+      icon="table-columns"
+    >
+      <div class="alert neutral theme-notice">
+        {{ $t("settings.style.appearance_tab_note") }}
+      </div>
+      <ul class="setting-list">
+        <h3>{{ $t('settings.general') }}</h3>
+        <li>
+          <UnitSetting
+            path="textSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 14, 'rem': 1 }"
+            timed-apply-mode
+          >
+            {{ $t('settings.text_size') }}
+          </UnitSetting>
+          <div>
+            <small>
+              <i18n-t
+                scope="global"
+                keypath="settings.text_size_tip"
+                tag="span"
+              >
+                <code>px</code>
+                <code>rem</code>
+              </i18n-t>
+              <br>
+              <i18n-t
+                scope="global"
+                keypath="settings.text_size_tip2"
+                tag="span"
+              >
+                <code>14px</code>
+              </i18n-t>
+            </small>
+          </div>
+        </li>
+        <li>
+          <FontControl
+            :model-value="mergedConfig.theme3hacks.fonts.interface"
+            name="ui"
+            :label="$t('settings.style.fonts.components.interface')"
+            :fallback="{ family: 'sans-serif' }"
+            no-inherit="1"
+            @update:model-value="v => updateFont('interface', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            :model-value="mergedConfig.theme3hacks.fonts.input"
+            name="input"
+            :fallback="{ family: 'inherit' }"
+            :label="$t('settings.style.fonts.components.input')"
+            @update:model-value="v => updateFont('input', v)"
+          />
+        </li>
+        <li>
+          <UnitSetting
+            path="emojiSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 32, 'rem': 2.2 }"
+          >
+            {{ $t('settings.emoji_size') }}
+          </UnitSetting>
+          <ul
+            class="setting-list suboptions"
+          >
+            <li>
+              <FloatSetting
+                v-if="user"
+                path="emojiReactionsScale"
+                expert="1"
+              >
+                {{ $t('settings.emoji_reactions_scale') }}
+              </FloatSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting
+            path="userPopoverOverlay"
+            expert="1"
+          >
+            {{ $t('settings.user_popover_avatar_overlay') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="userCardLeftJustify"
+            expert="1"
+          >
+            {{ $t('settings.user_card_left_justify') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="userCardHidePersonalMarks"
+            expert="1"
+          >
+            {{ $t('settings.user_card_hide_personal_marks') }}
+          </BooleanSetting>
+        </li>
+        <li v-if="instanceShoutboxPresent">
+          <BooleanSetting
+            path="hideShoutbox"
+            expert="1"
+          >
+            {{ $t('settings.hide_shoutbox') }}
+          </BooleanSetting>
+        </li>
+        <h3>{{ $t('settings.columns') }}</h3>
+        <li>
+          <UnitSetting
+            path="navbarSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 55, 'rem': 3.5 }"
+          >
+            {{ $t('settings.navbar_size') }}
+          </UnitSetting>
+        </li>
+        <li v-if="instanceSpecificPanelPresent">
+          <BooleanSetting path="hideISP">
+            {{ $t('settings.hide_isp') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <UnitSetting
+            path="panelHeaderSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 52, 'rem': 3.2 }"
+            timed-apply-mode
+          >
+            {{ $t('settings.panel_header_size') }}
+          </UnitSetting>
+        </li>
+        <li>
+          <BooleanSetting path="sidebarRight">
+            {{ $t('settings.right_sidebar') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="navbarColumnStretch">
+            {{ $t('settings.navbar_column_stretch') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            v-if="user"
+            id="thirdColumnMode"
+            path="thirdColumnMode"
+            :options="thirdColumnModeOptions"
+          >
+            {{ $t('settings.third_column_mode') }}
+          </ChoiceSetting>
+        </li>
+        <li v-if="expertLevel > 0">
+          {{ $t('settings.column_sizes') }}
+          <div class="column-settings">
+            <UnitSetting
+              v-for="column in columns"
+              :key="column"
+              :path="column + 'ColumnWidth'"
+              :units="horizontalUnits"
+              expert="1"
+            >
+              {{ $t('settings.column_sizes_' + column) }}
+            </UnitSetting>
+          </div>
+        </li>
+        <li>
+          <BooleanSetting path="disableStickyHeaders">
+            {{ $t('settings.disable_sticky_headers') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="showScrollbars">
+            {{ $t('settings.show_scrollbars') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <UnitSetting
+            path="themeEditorMinWidth"
+            :units="['px', 'rem']"
+            expert="1"
+          >
+            {{ $t('settings.theme_editor_min_width') }}
+          </UnitSetting>
+        </li>
+      </ul>
+      <ul class="setting-list">
+        <h3>{{ $t('settings.visual_tweaks') }}</h3>
+        <li>
+          <BooleanSetting path="modalMobileCenter">
+            {{ $t('settings.mobile_center_dialog') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            id="forcedRoundness"
+            path="forcedRoundness"
+            :options="forcedRoundnessOptions"
+          >
+            {{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
+          </ChoiceSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            id="underlayOverride"
+            path="theme3hacks.underlay"
+            :options="underlayOverrideModes"
+          >
+            {{ $t('settings.style.themes3.hacks.underlay_overrides') }}
+          </ChoiceSetting>
+        </li>
+        <li v-if="instanceWallpaperUsed">
+          <BooleanSetting path="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
+    <div
+      class="setting-item"
+      :label="$t('settings.theme')"
+      icon="paintbrush"
+    >
+      <div>
+        <h3>{{ $t('settings.background') }}</h3>
+        <div class="banner-background-preview">
+          <img :src="user.background_image">
+          <button
+            v-if="!isDefaultBackground"
+            class="button-unstyled reset-button"
+            :title="$t('settings.reset_profile_background')"
+            @click="resetBackground"
+          >
+            <FAIcon
+              icon="times"
+              type="button"
+            />
+          </button>
+        </div>
+        <p>{{ $t('settings.set_new_background') }}</p>
+        <img
+          v-if="backgroundPreview"
+          class="banner-background-preview"
+          :src="backgroundPreview"
+        >
+        <div>
+          <input
+            type="file"
+            class="input"
+            @change="uploadFile('background', $event)"
+          >
+        </div>
+        <FAIcon
+          v-if="backgroundUploading"
+          class="uploading"
+          spin
+          icon="circle-notch"
+        />
+        <button
+          v-else-if="backgroundPreview"
+          class="btn button-default"
+          @click="submitBackground(background)"
+        >
+          {{ $t('settings.save') }}
+        </button>
+      </div>
+      <h3>{{ $t('settings.style.style_section') }}</h3>
       <ul
         ref="themeList"
         class="theme-list"
@@ -149,279 +426,27 @@
             </div>
           </template>
         </div>
-      </div>
+        <ul class="setting-list">
-    </div>
+          <li>
-    <div class="setting-item">
+            <BooleanSetting
-      <h2>{{ $t('settings.background') }}</h2>
+              path="themeDebug"
-      <div class="banner-background-preview">
+              :expert="1"
-        <img :src="user.background_image">
-        <button
-          v-if="!isDefaultBackground"
-          class="button-unstyled reset-button"
-          :title="$t('settings.reset_profile_background')"
-          @click="resetBackground"
-        >
-          <FAIcon
-            icon="times"
-            type="button"
-          />
-        </button>
-      </div>
-      <p>{{ $t('settings.set_new_background') }}</p>
-      <img
-        v-if="backgroundPreview"
-        class="banner-background-preview"
-        :src="backgroundPreview"
-      >
-      <div>
-        <input
-          type="file"
-          class="input"
-          @change="uploadFile('background', $event)"
-        >
-      </div>
-      <FAIcon
-        v-if="backgroundUploading"
-        class="uploading"
-        spin
-        icon="circle-notch"
-      />
-      <button
-        v-else-if="backgroundPreview"
-        class="btn button-default"
-        @click="submitBackground(background)"
-      >
-        {{ $t('settings.save') }}
-      </button>
-    </div>
-    <div class="setting-item">
-      <h2>{{ $t('settings.scale_and_layout') }}</h2>
-      <div class="alert neutral theme-notice">
-        {{ $t("settings.style.appearance_tab_note") }}
-      </div>
-      <ul class="setting-list">
-        <li>
-          <UnitSetting
-            path="textSize"
-            :step="0.1"
-            :units="['px', 'rem']"
-            :reset-default="{ 'px': 14, 'rem': 1 }"
-            timed-apply-mode
-          >
-            {{ $t('settings.text_size') }}
-          </UnitSetting>
-          <div>
-            <small>
-              <i18n-t
-                scope="global"
-                keypath="settings.text_size_tip"
-                tag="span"
-              >
-                <code>px</code>
-                <code>rem</code>
-              </i18n-t>
-              <br>
-              <i18n-t
-                scope="global"
-                keypath="settings.text_size_tip2"
-                tag="span"
-              >
-                <code>14px</code>
-              </i18n-t>
-            </small>
-          </div>
-        </li>
-        <li>
-          <UnitSetting
-            path="emojiSize"
-            :step="0.1"
-            :units="['px', 'rem']"
-            :reset-default="{ 'px': 32, 'rem': 2.2 }"
-          >
-            {{ $t('settings.emoji_size') }}
-          </UnitSetting>
-          <ul
-            class="setting-list suboptions"
-          >
-            <li>
-              <FloatSetting
-                v-if="user"
-                path="emojiReactionsScale"
-                expert="1"
-              >
-                {{ $t('settings.emoji_reactions_scale') }}
-              </FloatSetting>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <UnitSetting
-            path="navbarSize"
-            :step="0.1"
-            :units="['px', 'rem']"
-            :reset-default="{ 'px': 55, 'rem': 3.5 }"
-          >
-            {{ $t('settings.navbar_size') }}
-          </UnitSetting>
-        </li>
-        <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
-        <li>
-          <FontControl
-            :model-value="mergedConfig.theme3hacks.fonts.interface"
-            name="ui"
-            :label="$t('settings.style.fonts.components.interface')"
-            :fallback="{ family: 'sans-serif' }"
-            no-inherit="1"
-            @update:model-value="v => updateFont('interface', v)"
-          />
-        </li>
-        <li>
-          <FontControl
-            v-if="expertLevel > 0"
-            :model-value="mergedConfig.theme3hacks.fonts.input"
-            name="input"
-            :fallback="{ family: 'inherit' }"
-            :label="$t('settings.style.fonts.components.input')"
-            @update:model-value="v => updateFont('input', v)"
-          />
-        </li>
-        <li>
-          <FontControl
-            v-if="expertLevel > 0"
-            :model-value="mergedConfig.theme3hacks.fonts.post"
-            name="post"
-            :fallback="{ family: 'inherit' }"
-            :label="$t('settings.style.fonts.components.post')"
-            @update:model-value="v => updateFont('post', v)"
-          />
-        </li>
-        <li>
-          <FontControl
-            v-if="expertLevel > 0"
-            :model-value="mergedConfig.theme3hacks.fonts.monospace"
-            name="postCode"
-            :fallback="{ family: 'monospace' }"
-            :label="$t('settings.style.fonts.components.monospace')"
-            @update:model-value="v => updateFont('monospace', v)"
-          />
-        </li>
-        <h3>{{ $t('settings.columns') }}</h3>
-        <li>
-          <UnitSetting
-            path="panelHeaderSize"
-            :step="0.1"
-            :units="['px', 'rem']"
-            :reset-default="{ 'px': 52, 'rem': 3.2 }"
-            timed-apply-mode
-          >
-            {{ $t('settings.panel_header_size') }}
-          </UnitSetting>
-        </li>
-        <li>
-          <BooleanSetting path="sidebarRight">
-            {{ $t('settings.right_sidebar') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="navbarColumnStretch">
-            {{ $t('settings.navbar_column_stretch') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <ChoiceSetting
-            v-if="user"
-            id="thirdColumnMode"
-            path="thirdColumnMode"
-            :options="thirdColumnModeOptions"
-          >
-            {{ $t('settings.third_column_mode') }}
-          </ChoiceSetting>
-        </li>
-        <li v-if="expertLevel > 0">
-          {{ $t('settings.column_sizes') }}
-          <div class="column-settings">
-            <UnitSetting
-              v-for="column in columns"
-              :key="column"
-              :path="column + 'ColumnWidth'"
-              :units="horizontalUnits"
-              expert="1"
             >
-              {{ $t('settings.column_sizes_' + column) }}
+              {{ $t('settings.theme_debug') }}
-            </UnitSetting>
+            </BooleanSetting>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <BooleanSetting
-          <BooleanSetting path="disableStickyHeaders">
+              path="forceThemeRecompilation"
-            {{ $t('settings.disable_sticky_headers') }}
+              :expert="1"
-          </BooleanSetting>
+            >
-        </li>
+              {{ $t('settings.force_theme_recompilation_debug') }}
-        <li>
+            </BooleanSetting>
-          <BooleanSetting path="showScrollbars">
+          </li>
-            {{ $t('settings.show_scrollbars') }}
+        </ul>
-          </BooleanSetting>
+      </div>
-        </li>
-        <li>
-          <UnitSetting
-            path="themeEditorMinWidth"
-            :units="['px', 'rem']"
-            expert="1"
-          >
-            {{ $t('settings.theme_editor_min_width') }}
-          </UnitSetting>
-        </li>
-      </ul>
     </div>
-    <div class="setting-item">
+  </tab-switcher>
-      <h2>{{ $t('settings.visual_tweaks') }}</h2>
-      <ul class="setting-list">
-        <li>
-          <BooleanSetting path="modalMobileCenter">
-            {{ $t('settings.mobile_center_dialog') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <ChoiceSetting
-            id="forcedRoundness"
-            path="forcedRoundness"
-            :options="forcedRoundnessOptions"
-          >
-            {{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
-          </ChoiceSetting>
-        </li>
-        <li>
-          <ChoiceSetting
-            id="underlayOverride"
-            path="theme3hacks.underlay"
-            :options="underlayOverrideModes"
-          >
-            {{ $t('settings.style.themes3.hacks.underlay_overrides') }}
-          </ChoiceSetting>
-        </li>
-        <li v-if="instanceWallpaperUsed">
-          <BooleanSetting path="hideInstanceWallpaper">
-            {{ $t('settings.hide_wallpaper') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting
-            path="forceThemeRecompilation"
-            :expert="1"
-          >
-            {{ $t('settings.force_theme_recompilation_debug') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting
-            path="themeDebug"
-            :expert="1"
-          >
-            {{ $t('settings.theme_debug') }}
-          </BooleanSetting>
-        </li>
-      </ul>
-    </div>
-  </div>
 </template>
 
 <script src="./appearance_tab.js"></script>

src/components/settings_modal/tabs/general_tab.js

@@ -1,5 +1,7 @@
 import { mapState } from 'vuex'
 
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
@@ -9,6 +11,7 @@ import UnitSetting from '../helpers/unit_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 import Select from 'src/components/select/select.vue'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
+import FontControl from 'src/components/font_control/font_control.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
@@ -16,11 +19,19 @@ import localeService from 'src/services/locale/locale.service.js'
 import { clearCache, cacheKey, emojiCacheKey } from 'src/services/sw/sw.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faGlobe
+  faGlobe,
+  faMessage,
+  faPenAlt,
+  faDatabase,
+  faSliders
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faGlobe
+  faGlobe,
+  faMessage,
+  faPenAlt,
+  faDatabase,
+  faSliders
 )
 
 const GeneralTab = {
@@ -80,7 +91,9 @@ const GeneralTab = {
     InterfaceLanguageSwitcher,
     ProfileSettingIndicator,
     ScopeSelector,
-    Select
+    Select,
+    TabSwitcher,
+    FontControl
   },
   computed: {
     postFormats () {
@@ -99,8 +112,6 @@ const GeneralTab = {
         this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
       }
     },
-    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
-    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
     ...SharedComputedObject(),
     ...mapState({
       blockExpirationSupported: state => state.instance.blockExpiration,
@@ -137,6 +148,18 @@ const GeneralTab = {
           this.$store.commit('setCurrentUser', user)
         })
     },
+    updateFont (key, value) {
+      this.$store.dispatch('setOption', {
+        name: 'theme3hacks',
+        value: {
+          ...this.mergedConfig.theme3hacks,
+          fonts: {
+            ...this.mergedConfig.theme3hacks.fonts,
+            [key]: value
+          }
+        }
+      })
+    },
   }
 }
 

src/components/settings_modal/tabs/general_tab.vue

@@ -1,8 +1,17 @@
 <template>
-  <div :label="$t('settings.general')">
+  <tab-switcher
-    <div class="setting-item">
+    :label="$t('settings.general')"
-      <h2>{{ $t('settings.interface') }}</h2>
+    ref="tabSwitcher"
+    class="settings_tab-switcher"
+    :side-tab-bar="true"
+    :scrollable-tabs="true"
+  >
+    <div
+      :label="$t('settings.behavior')"
+      icon="sliders"
+    >
       <ul class="setting-list">
+        <h3>{{ $t('settings.general') }}</h3>
         <li>
           <interface-language-switcher
             v-model="language"
@@ -20,14 +29,12 @@
             {{ $t('settings.email_language') }}
           </interface-language-switcher>
         </li>
-        <li v-if="instanceSpecificPanelPresent">
-          <BooleanSetting path="hideISP">
-            {{ $t('settings.hide_isp') }}
-          </BooleanSetting>
-        </li>
         <li>
-          <BooleanSetting path="stopGifs">
+          <BooleanSetting
-            {{ $t('settings.stop_gifs') }}
+            path="useAbsoluteTimeFormat"
+            expert="1"
+          >
+            {{ $t('settings.absolute_time_format') }}
           </BooleanSetting>
         </li>
         <li>
@@ -61,40 +68,6 @@
             {{ $t('settings.virtual_scrolling') }}
           </BooleanSetting>
         </li>
-        <li>
-          <ChoiceSetting
-            id="userPopoverAvatarAction"
-            path="userPopoverAvatarAction"
-            :options="userPopoverAvatarActionOptions"
-            expert="1"
-          >
-            {{ $t('settings.user_popover_avatar_action') }}
-          </ChoiceSetting>
-        </li>
-        <li>
-          <BooleanSetting
-            path="userPopoverOverlay"
-            expert="1"
-          >
-            {{ $t('settings.user_popover_avatar_overlay') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting
-            path="userCardLeftJustify"
-            expert="1"
-          >
-            {{ $t('settings.user_card_left_justify') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting
-            path="userCardHidePersonalMarks"
-            expert="1"
-          >
-            {{ $t('settings.user_card_hide_personal_marks') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting
             path="alwaysShowNewPostButton"
@@ -111,13 +84,15 @@
             {{ $t('settings.autohide_floating_post_button') }}
           </BooleanSetting>
         </li>
-        <li v-if="instanceShoutboxPresent">
+        <li>
-          <BooleanSetting
+          <ChoiceSetting
-            path="hideShoutbox"
+            id="userPopoverAvatarAction"
+            path="userPopoverAvatarAction"
+            :options="userPopoverAvatarActionOptions"
             expert="1"
           >
-            {{ $t('settings.hide_shoutbox') }}
+            {{ $t('settings.user_popover_avatar_action') }}
-          </BooleanSetting>
+          </ChoiceSetting>
         </li>
         <li class="select-multiple">
           <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
@@ -179,9 +154,12 @@
         </li>
       </ul>
     </div>
-    <div class="setting-item">
+    <div
-      <h2>{{ $t('settings.post_look_feel') }}</h2>
+      :label="$t('settings.posts')"
+      icon="message"
+    >
       <ul class="setting-list">
+        <h3>{{ $t('settings.general') }}</h3>
         <li>
           <ChoiceSetting
             id="conversationDisplay"
@@ -191,6 +169,24 @@
             {{ $t('settings.conversation_display') }}
           </ChoiceSetting>
         </li>
+        <li>
+          <FontControl
+            :model-value="mergedConfig.theme3hacks.fonts.post"
+            name="post"
+            :fallback="{ family: 'inherit' }"
+            :label="$t('settings.style.fonts.components.post')"
+            @update:model-value="v => updateFont('post', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            :model-value="mergedConfig.theme3hacks.fonts.monospace"
+            name="postCode"
+            :fallback="{ family: 'monospace' }"
+            :label="$t('settings.style.fonts.components.monospace')"
+            @update:model-value="v => updateFont('monospace', v)"
+          />
+        </li>
         <ul
           v-if="mergedConfig.conversationDisplay !== 'linear'"
           class="setting-list suboptions"
@@ -241,6 +237,45 @@
             {{ $t('settings.emoji_reactions_on_timeline') }}
           </BooleanSetting>
         </li>
+        <h3>{{ $t('settings.mention_links') }}</h3>
+        <li>
+          <ChoiceSetting
+            id="mentionLinkDisplay"
+            path="mentionLinkDisplay"
+            :options="mentionLinkDisplayOptions"
+          >
+            {{ $t('settings.mention_link_display') }}
+          </ChoiceSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="mentionLinkShowTooltip"
+            expert="1"
+          >
+            {{ $t('settings.mention_link_use_tooltip') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="mentionLinkShowAvatar">
+            {{ $t('settings.mention_link_show_avatar') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="mentionLinkFadeDomain"
+            expert="1"
+          >
+            {{ $t('settings.mention_link_fade_domain') }}
+          </BooleanSetting>
+        </li>
+        <li v-if="user">
+          <BooleanSetting
+            path="mentionLinkBoldenYou"
+            expert="1"
+          >
+            {{ $t('settings.mention_link_bolden_you') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             v-if="user"
@@ -251,14 +286,6 @@
             {{ $t('settings.no_rich_text_description') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting
-            path="useAbsoluteTimeFormat"
-            expert="1"
-          >
-            {{ $t('settings.absolute_time_format') }}
-          </BooleanSetting>
-        </li>
         <ul
           v-if="mergedConfig.useAbsoluteTimeFormat"
           class="setting-list suboptions"
@@ -286,30 +313,8 @@
         </ul>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
-          <BooleanSetting
+          <BooleanSetting path="stopGifs">
-            path="imageCompression"
+            {{ $t('settings.stop_gifs') }}
-            expert="1"
-          >
-            {{ $t('settings.image_compression') }}
-          </BooleanSetting>
-        </li>
-        <ul class="setting-list suboptions">
-          <li>
-            <BooleanSetting
-              path="alwaysUseJpeg"
-              expert="1"
-              parent-path="imageCompression"
-            >
-              {{ $t('settings.always_use_jpeg') }}
-            </BooleanSetting>
-          </li>
-        </ul>
-        <li>
-          <BooleanSetting
-            path="useContainFit"
-            expert="1"
-          >
-            {{ $t('settings.use_contain_fit') }}
           </BooleanSetting>
         </li>
         <li>
@@ -371,43 +376,12 @@
             {{ $t('settings.play_videos_in_modal') }}
           </BooleanSetting>
         </li>
-        <h3>{{ $t('settings.mention_links') }}</h3>
-        <li>
-          <ChoiceSetting
-            id="mentionLinkDisplay"
-            path="mentionLinkDisplay"
-            :options="mentionLinkDisplayOptions"
-          >
-            {{ $t('settings.mention_link_display') }}
-          </ChoiceSetting>
-        </li>
         <li>
           <BooleanSetting
-            path="mentionLinkShowTooltip"
+            path="useContainFit"
             expert="1"
           >
-            {{ $t('settings.mention_link_use_tooltip') }}
+            {{ $t('settings.use_contain_fit') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="mentionLinkShowAvatar">
-            {{ $t('settings.mention_link_show_avatar') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting
-            path="mentionLinkFadeDomain"
-            expert="1"
-          >
-            {{ $t('settings.mention_link_fade_domain') }}
-          </BooleanSetting>
-        </li>
-        <li v-if="user">
-          <BooleanSetting
-            path="mentionLinkBoldenYou"
-            expert="1"
-          >
-            {{ $t('settings.mention_link_bolden_you') }}
           </BooleanSetting>
         </li>
         <h3 v-if="expertLevel > 0">
@@ -431,13 +405,13 @@
         </li>
       </ul>
     </div>
-
     <div
       v-if="user"
-      class="setting-item"
+      :label="$t('settings.composing')"
+      icon="pen-alt"
     >
-      <h2>{{ $t('settings.composing') }}</h2>
       <ul class="setting-list">
+      <h3>{{ $t('settings.composing') }}</h3>
         <li>
           <label for="default-vis">
             {{ $t('settings.default_vis') }} <ProfileSettingIndicator :is-profile="true" />
@@ -531,12 +505,33 @@
             {{ $t('settings.unsaved_post_action') }}
           </ChoiceSetting>
         </li>
+        <h3>{{ $t('settings.attachments') }}</h3>
+        <li>
+          <BooleanSetting
+            path="imageCompression"
+            expert="1"
+          >
+            {{ $t('settings.image_compression') }}
+          </BooleanSetting>
+        </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
-      class="setting-item"
+      :label="$t('settings.cache')"
+      icon="database"
+      v-if="expertLevel > 0"
     >
-      <h2>{{ $t('settings.cache') }}</h2>
       <ul class="setting-list">
         <li>
           <button
@@ -556,7 +551,7 @@
         </li>
       </ul>
     </div>
-  </div>
+  </tab-switcher>
 </template>
 
 <script src="./general_tab.js"></script>

src/components/status/status.vue

@@ -152,12 +152,11 @@
                     :at="false"
                   >
                     <RichContent
-                      v-if="status.user.name_html"
                       :html="status.user.name"
                       :emoji="status.user.emoji"
                       :is-local="status.user.is_local"
                     />
-                    <span v-else>{{ status.user.name }}</span>
+                    <span>{{ status.user.name }}</span>
                   </user-link>
                   <span
                     v-else

src/i18n/en.json

@@ -403,6 +403,7 @@
     "setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
     "post_look_feel": "Posts Look & Feel",
+    "posts": "Posts",
     "mention_links": "Mention links",
     "appearance": "Appearance",
     "confirm_new_setting": "Confirm new setting?",
@@ -418,6 +419,8 @@
     "visual_tweaks": "Minor visual tweaks",
     "theme_debug": "Show what background theme engine assumes when dealing with transparancy (DEBUG)",
     "scale_and_layout": "Interface scale and layout",
+    "behavior": "Behavior",
+    "layout": "Layout",
     "enabled": "Enabled",
     "filter": {
       "clutter": "Remove clutter",
@@ -832,6 +835,7 @@
     "enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
     "more_settings": "More settings",
     "style": {
+      "style_section": "Style",
       "custom_theme_used": "(Custom theme)",
       "custom_style_used": "(Custom style)",
       "stock_theme_used": "(Stock theme)",