initial nested settings impl

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">
-      <h2>{{ $t('settings.theme') }}</h2>
+    <div
+      :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>
-    </div>
-    <div class="setting-item">
-      <h2>{{ $t('settings.background') }}</h2>
-      <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>
-    <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"
+        <ul class="setting-list">
+          <li>
+            <BooleanSetting
+              path="themeDebug"
+              :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>
+              {{ $t('settings.theme_debug') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <BooleanSetting
+              path="forceThemeRecompilation"
+              :expert="1"
+            >
+              {{ $t('settings.force_theme_recompilation_debug') }}
+            </BooleanSetting>
+          </li>
+        </ul>
+      </div>
     </div>
-    <div class="setting-item">
-      <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>
+  </tab-switcher>
 </template>
 
 <script src="./appearance_tab.js"></script>