pleroma-fe boots once again

src/components/settings_modal/tabs/appearance_tab.js

@@ -7,7 +7,7 @@ import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
 
 import FontControl from 'src/components/font_control/font_control.vue'
 
-import { normalizeThemeData } from 'src/modules/interface'
+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'
@@ -131,7 +131,7 @@ const AppearanceTab = {
       }))
     })
 
-    this.userPalette = this.$store.state.interface.paletteDataUsed || {}
+    this.userPalette = useInterfaceStore().paletteDataUsed || {}
 
     updateIndex('palette').then(bundledPalettes => {
       bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
@@ -187,10 +187,10 @@ const AppearanceTab = {
   },
   computed: {
     switchInProgress () {
-      return this.$store.state.interface.themeChangeInProgress
+      return useInterfaceStore().themeChangeInProgress
     },
     paletteDataUsed () {
-      return this.$store.state.interface.paletteDataUsed
+      return useInterfaceStore().paletteDataUsed
     },
     availableStyles () {
       return [
@@ -205,7 +205,7 @@ const AppearanceTab = {
       ]
     },
     stylePalettes () {
-      const ruleset = this.$store.state.interface.styleDataUsed || []
+      const ruleset = useInterfaceStore().styleDataUsed || []
       if (!ruleset && ruleset.length === 0) return
       const meta = ruleset.find(x => x.component === '@meta')
       const result = ruleset.filter(x => x.component.startsWith('@palette'))
@@ -273,7 +273,7 @@ const AppearanceTab = {
       }
     },
     customThemeVersion () {
-      const { themeVersion } = this.$store.state.interface
+      const { themeVersion } = useInterfaceStore()
       return themeVersion
     },
     isCustomThemeUsed () {

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

@@ -1,5 +1,6 @@
 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'
 
 import Select from 'src/components/select/select.vue'
@@ -81,9 +82,10 @@ export default {
   setup (props, context) {
     const exports = {}
     const store = useStore()
+    const interfaceStore = useInterfaceStore()
     // All rules that are made by editor
-    const allEditedRules = ref(store.state.interface.styleDataUsed || {})
-    const styleDataUsed = computed(() => store.state.interface.styleDataUsed)
+    const allEditedRules = ref(interfaceStore.styleDataUsed || {})
+    const styleDataUsed = computed(() => interfaceStore.styleDataUsed)
 
     watch([styleDataUsed], (value) => {
       onImport(store.state.interface.styleDataUsed)

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

@@ -297,7 +297,7 @@ export default {
       }
     },
     themeDataUsed () {
-      return this.$store.state.interface.themeDataUsed
+      return useInterfaceStore().themeDataUsed
     },
     shadowsAvailable () {
       return Object.keys(DEFAULT_SHADOWS).sort()