vertical tab switcher initial implementation

src/components/settings_modal/tabs/appearance_tab.js

@@ -1,4 +1,4 @@
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+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'
@@ -97,7 +97,7 @@ const AppearanceTab = {
     FontControl,
     Preview,
     PaletteEditor,
-    TabSwitcher
+    VerticalTabSwitcher
   },
   mounted () {
     useInterfaceStore().getThemeData()

src/components/settings_modal/tabs/appearance_tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <tab-switcher
+  <vertical-tab-switcher
     class="appearance-tab"
     :label="$t('settings.appearance')"
     ref="tabSwitcher"
@@ -446,7 +446,7 @@
         </ul>
       </div>
     </div>
-  </tab-switcher>
+  </vertical-tab-switcher>
 </template>
 
 <script src="./appearance_tab.js"></script>

src/components/settings_modal/tabs/general_tab.js

@@ -1,6 +1,6 @@
 import { mapState } from 'vuex'
 
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+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'
@@ -92,7 +92,7 @@ const GeneralTab = {
     ProfileSettingIndicator,
     ScopeSelector,
     Select,
-    TabSwitcher,
+    VerticalTabSwitcher,
     FontControl
   },
   computed: {

src/components/settings_modal/tabs/general_tab.vue

@@ -1,10 +1,8 @@
 <template>
-  <tab-switcher
+  <vertical-tab-switcher
     :label="$t('settings.general')"
     ref="tabSwitcher"
     class="settings_tab-switcher"
-    :side-tab-bar="true"
-    :scrollable-tabs="true"
   >
     <div
       :label="$t('settings.behavior')"
@@ -551,7 +549,7 @@
         </li>
       </ul>
     </div>
-  </tab-switcher>
+  </vertical-tab-switcher>
 </template>
 
 <script src="./general_tab.js"></script>