MASSIVE refactor, replacing instance module with store, separating emoji stuff into its own store, making sure everything refers to new stores (WIP)

src/stores/interface.js

@@ -5,6 +5,8 @@ import {
   generatePreset,
 } from 'src/services/theme_data/theme_data.service.js'
 import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 import {
   applyTheme,
   getResourcesIndex,
@@ -86,7 +88,7 @@ export const useInterfaceStore = defineStore('interface', {
     },
     setPageTitle(option = '') {
       try {
-        document.title = `${option} ${window.vuex.state.instance.name}`
+        document.title = `${option} ${useInstanceStore().name}`
       } catch (error) {
         console.error(`${error}`)
       }
@@ -182,7 +184,7 @@ export const useInterfaceStore = defineStore('interface', {
 
       const mobileLayout = width <= 800
       const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
-      const { thirdColumnMode } = window.vuex.getters.mergedConfig
+      const { thirdColumnMode } = useSyncConfigStore().mergedConfig
       if (thirdColumnMode === 'none' || !window.vuex.state.users.currentUser) {
         this.layoutType = normalOrMobile
       } else {
@@ -221,15 +223,15 @@ export const useInterfaceStore = defineStore('interface', {
     async fetchPalettesIndex() {
       try {
         const value = await getResourcesIndex('/static/palettes/index.json')
-        window.vuex.commit('setInstanceOption', {
-          name: 'palettesIndex',
+        useInstanceStore().set({
+          path: 'palettesIndex',
           value,
         })
         return value
       } catch (e) {
         console.error('Could not fetch palettes index', e)
-        window.vuex.commit('setInstanceOption', {
-          name: 'palettesIndex',
+        useInstanceStore().set({
+          path: 'palettesIndex',
           value: { _error: e },
         })
         return Promise.resolve({})
@@ -239,7 +241,7 @@ export const useInterfaceStore = defineStore('interface', {
       this.resetThemeV3Palette()
       this.resetThemeV2()
 
-      window.vuex.commit('setOption', { name: 'palette', value })
+      useSyncConfigStore().setPreference({ path: 'palette', value })
 
       this.applyTheme({ recompile: true })
     },
@@ -247,7 +249,7 @@ export const useInterfaceStore = defineStore('interface', {
       this.resetThemeV3Palette()
       this.resetThemeV2()
 
-      window.vuex.commit('setOption', { name: 'paletteCustomData', value })
+      useSyncConfigStore().setPreference({ path: 'paletteCustomData', value })
 
       this.applyTheme({ recompile: true })
     },
@@ -257,12 +259,12 @@ export const useInterfaceStore = defineStore('interface', {
           '/static/styles/index.json',
           deserialize,
         )
-        window.vuex.commit('setInstanceOption', { name: 'stylesIndex', value })
+        useInstanceStore().set({ path: 'stylesIndex', value })
         return value
       } catch (e) {
         console.error('Could not fetch styles index', e)
-        window.vuex.commit('setInstanceOption', {
-          name: 'stylesIndex',
+        useInstanceStore().set({
+          path: 'stylesIndex',
           value: { _error: e },
         })
         return Promise.resolve({})
@@ -273,7 +275,7 @@ export const useInterfaceStore = defineStore('interface', {
       this.resetThemeV2()
       this.resetThemeV3Palette()
 
-      window.vuex.commit('setOption', { name: 'style', value })
+      useSyncConfigStore().setPreference({ path: 'style', value })
       this.useStylePalette = true
 
       this.applyTheme({ recompile: true }).then(() => {
@@ -285,7 +287,7 @@ export const useInterfaceStore = defineStore('interface', {
       this.resetThemeV2()
       this.resetThemeV3Palette()
 
-      window.vuex.commit('setOption', { name: 'styleCustomData', value })
+      useSyncConfigStore().setPreference({ path: 'styleCustomData', value })
 
       this.useStylePalette = true
       this.applyTheme({ recompile: true }).then(() => {
@@ -295,12 +297,12 @@ export const useInterfaceStore = defineStore('interface', {
     async fetchThemesIndex() {
       try {
         const value = await getResourcesIndex('/static/styles.json')
-        window.vuex.commit('setInstanceOption', { name: 'themesIndex', value })
+        useInstanceStore().set({ path: 'themesIndex', value })
         return value
       } catch (e) {
         console.error('Could not fetch themes index', e)
-        window.vuex.commit('setInstanceOption', {
-          name: 'themesIndex',
+        useInstanceStore().set({
+          path: 'themesIndex',
           value: { _error: e },
         })
         return Promise.resolve({})
@@ -311,7 +313,7 @@ export const useInterfaceStore = defineStore('interface', {
       this.resetThemeV3Palette()
       this.resetThemeV2()
 
-      window.vuex.commit('setOption', { name: 'theme', value })
+      useSyncConfigStore().setPreference({ name: 'theme', value })
 
       this.applyTheme({ recompile: true })
     },
@@ -320,27 +322,30 @@ export const useInterfaceStore = defineStore('interface', {
       this.resetThemeV3Palette()
       this.resetThemeV2()
 
-      window.vuex.commit('setOption', { name: 'customTheme', value })
-      window.vuex.commit('setOption', { name: 'customThemeSource', value })
+      useSyncConfigStore().setPreference({ path: 'customTheme', value })
+      useSyncConfigStore().setPreference({ path: 'customThemeSource', value })
 
       this.applyTheme({ recompile: true })
     },
     resetThemeV3() {
-      window.vuex.commit('setOption', { name: 'style', value: null })
-      window.vuex.commit('setOption', { name: 'styleCustomData', value: null })
+      useSyncConfigStore().setPreference({ path: 'style', value: null })
+      useSyncConfigStore().setPreference({
+        path: 'styleCustomData',
+        value: null,
+      })
     },
     resetThemeV3Palette() {
-      window.vuex.commit('setOption', { name: 'palette', value: null })
-      window.vuex.commit('setOption', {
+      useSyncConfigStore().setPreference({ path: 'palette', value: null })
+      useSyncConfigStore().setPreference({
         name: 'paletteCustomData',
         value: null,
       })
     },
     resetThemeV2() {
-      window.vuex.commit('setOption', { name: 'theme', value: null })
-      window.vuex.commit('setOption', { name: 'customTheme', value: null })
-      window.vuex.commit('setOption', {
-        name: 'customThemeSource',
+      useSyncConfigStore().setPreference({ path: 'theme', value: null })
+      useSyncConfigStore().setPreference({ path: 'customTheme', value: null })
+      useSyncConfigStore().setPreference({
+        path: 'customThemeSource',
         value: null,
       })
     },
@@ -385,14 +390,14 @@ export const useInterfaceStore = defineStore('interface', {
       }
 
       const { style: instanceStyleName, palette: instancePaletteName } =
-        window.vuex.state.instance
+        useInstanceStore()
 
       let {
         theme: instanceThemeV2Name,
         themesIndex,
         stylesIndex,
         palettesIndex,
-      } = window.vuex.state.instance
+      } = useInstanceStore()
 
       const {
         style: userStyleName,
@@ -508,8 +513,8 @@ export const useInterfaceStore = defineStore('interface', {
         )
 
         if (this.useStylePalette) {
-          window.vuex.commit('setOption', {
-            name: 'palette',
+          useSyncConfigStore().setPreference({
+            path: 'palette',
             value: firstStylePaletteName,
           })
         }