initial nested settings impl

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