cleanup and fixes

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -232,7 +232,7 @@ const EmojiTab = {
         })
     },
     displayError (msg) {
-      this.$store.dispatch('pushGlobalNotice', {
+      this.$store.useInterfaceStore().pushGlobalNotice({
         messageKey: 'admin_dash.emoji.error',
         messageArgs: [msg],
         level: 'error'

src/components/settings_modal/admin_tabs/frontends_tab.js

@@ -80,7 +80,7 @@ const FrontendsTab = {
           this.$store.dispatch('loadFrontendsStuff')
           if (response.error) {
             const reason = await response.error.json()
-            this.$store.dispatch('pushGlobalNotice', {
+            this.$store.useInterfaceStore().pushGlobalNotice({
               level: 'error',
               messageKey: 'admin_dash.frontend.failure_installing_frontend',
               messageArgs: {
@@ -90,7 +90,7 @@ const FrontendsTab = {
               timeout: 5000
             })
           } else {
-            this.$store.dispatch('pushGlobalNotice', {
+            this.$store.useInterfaceStore().pushGlobalNotice({
               level: 'success',
               messageKey: 'admin_dash.frontend.success_installing_frontend',
               messageArgs: {

src/components/settings_modal/settings_modal_admin_content.js

@@ -80,7 +80,7 @@ const SettingsModalAdminContent = {
       }
       // Clear the state of target tab, so that next time settings is opened
       // it doesn't force it.
-      this.$store.dispatch('clearSettingsModalTargetTab')
+      useInterfaceStore().clearSettingsModalTargetTab()
     }
   },
   mounted () {

src/components/settings_modal/tabs/appearance_tab.js

@@ -4,11 +4,9 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
 import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
 import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
-
+import Preview from './theme_tab/theme_preview.vue'
 import FontControl from 'src/components/font_control/font_control.vue'
 
-import { useInterfaceStore, normalizeThemeData } from 'src/stores/interface'
-
 import { newImporter } from 'src/services/export_import/export_import.js'
 import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
 import { init } from 'src/services/theme_data/theme_data_3.service.js'
@@ -20,17 +18,15 @@ import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
+
+import { mapActions } from 'pinia'
+import { useInterfaceStore, normalizeThemeData } from 'src/stores/interface'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
-import Preview from './theme_tab/theme_preview.vue'
-
-// helper for debugging
-// eslint-disable-next-line no-unused-vars
-const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
-
 library.add(
   faGlobe
 )
@@ -90,7 +86,7 @@ const AppearanceTab = {
     PaletteEditor
   },
   mounted () {
-    this.$store.dispatch('getThemeData')
+    useInterfaceStore().getThemeData()
 
     const updateIndex = (resource) => {
       const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
@@ -100,7 +96,7 @@ const AppearanceTab = {
       if (currentIndex) {
         promise = Promise.resolve(currentIndex)
       } else {
-        promise = this.$store.dispatch(`fetch${capitalizedResource}sIndex`)
+        promise = useInterfaceStore()[`fetch${capitalizedResource}sIndex`]()
       }
 
       return promise.then(index => {
@@ -311,14 +307,14 @@ const AppearanceTab = {
     },
     onImport (parsed, filename) {
       if (filename.endsWith('.json')) {
-        this.$store.dispatch('setThemeCustom', parsed.source || parsed.theme)
+        useInterfaceStore().setThemeCustom(parsed.source || parsed.theme)
       } else if (filename.endsWith('.iss')) {
-        this.$store.dispatch('setStyleCustom', parsed)
+        useInterfaceStore().setStyleCustom(parsed)
       }
     },
     onImportFailure (result) {
       console.error('Failure importing theme:', result)
-      this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
+      this.$store.useInterfaceStore().pushGlobalNotice({ messageKey: 'settings.invalid_theme_imported', level: 'error' })
     },
     importValidator (parsed, filename) {
       if (filename.endsWith('.json')) {
@@ -340,22 +336,20 @@ const AppearanceTab = {
     isPaletteActive (key) {
       return key === (this.mergedConfig.palette || this.$store.state.instance.palette)
     },
-    setStyle (name) {
-      this.$store.dispatch('setStyle', name)
-    },
-    setTheme (name) {
-      this.$store.dispatch('setTheme', name)
-    },
+    ...mapActions(useInterfaceStore, [
+      'setStyle',
+      'setTheme'
+    ]),
     setPalette (name, data) {
-      this.$store.dispatch('setPalette', name)
+      useInterfaceStore().setPalette(name)
       this.userPalette = data
     },
     setPaletteCustom (data) {
-      this.$store.dispatch('setPaletteCustom', data)
+      useInterfaceStore().setPaletteCustom(data)
       this.userPalette = data
     },
     resetTheming (name) {
-      this.$store.dispatch('setStyle', 'stock')
+      useInterfaceStore().setStyle('stock')
     },
     previewTheme (key, version, input) {
       let theme3

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -1,5 +1,4 @@
 import { ref, reactive, computed, watch, watchEffect, provide, getCurrentInstance } from 'vue'
-import { useStore } from 'vuex'
 import { useInterfaceStore } from 'src/stores/interface'
 import { get, set, unset, throttle } from 'lodash'
 
@@ -81,14 +80,13 @@ export default {
   },
   setup (props, context) {
     const exports = {}
-    const store = useStore()
     const interfaceStore = useInterfaceStore()
     // All rules that are made by editor
     const allEditedRules = ref(interfaceStore.styleDataUsed || {})
     const styleDataUsed = computed(() => interfaceStore.styleDataUsed)
 
     watch([styleDataUsed], (value) => {
-      onImport(store.state.interface.styleDataUsed)
+      onImport(interfaceStore.styleDataUsed)
     }, { once: true })
 
     exports.isActive = computed(() => {
@@ -642,7 +640,7 @@ export default {
       parser (string) { return deserialize(string) },
       onImportFailure (result) {
         console.error('Failure importing style:', result)
-        this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
+        this.$store.useInterfaceStore().pushGlobalNotice({ messageKey: 'settings.invalid_theme_imported', level: 'error' })
       },
       onImport
     })
@@ -666,7 +664,7 @@ export default {
     })
 
     exports.clearStyle = () => {
-      onImport(store.state.interface.styleDataUsed)
+      onImport(interfaceStore().styleDataUsed)
     }
 
     exports.exportStyle = () => {
@@ -678,7 +676,7 @@ export default {
     }
 
     exports.applyStyle = () => {
-      store.dispatch('setStyleCustom', exportRules.value)
+      useInterfaceStore().setStyleCustom(exportRules.value)
     }
 
     const overallPreviewRules = ref([])

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -127,7 +127,7 @@ export default {
     if (currentIndex) {
       promise = Promise.resolve(currentIndex)
     } else {
-      promise = this.$store.dispatch('fetchThemesIndex')
+      promise = useInterfaceStore().fetchThemesIndex()
     }
 
     promise.then(themesIndex => {
@@ -493,7 +493,7 @@ export default {
       }
     },
     setCustomTheme () {
-      this.$store.dispatch('setThemeV2', {
+      useInterfaceStore().setThemeV2({
         customTheme: {
           ignore: true,
           themeFileVersion: this.selectedVersion,