pleroma-fe boots once again

src/components/settings_modal/settings_modal.js

@@ -7,6 +7,7 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { cloneDeep, isEqual } from 'lodash'
+import { mapState as mapPiniaState } from 'pinia'
 import {
   newImporter,
   newExporter
@@ -167,24 +168,15 @@ const SettingsModal = {
     }
   },
   computed: {
-    currentSaveStateNotice () {
-      return useInterfaceStore().settings.currentSaveStateNotice
-    },
-    modalActivated () {
-      return useInterfaceStore().settingsModalState !== 'hidden'
-    },
-    modalMode () {
-      return useInterfaceStore().settingsModalMode
-    },
-    modalOpenedOnceUser () {
-      return useInterfaceStore().settingsModalLoadedUser
-    },
-    modalOpenedOnceAdmin () {
-      return useInterfaceStore().settingsModalLoadedAdmin
-    },
-    modalPeeked () {
-      return useInterfaceStore().settingsModalState === 'minimized'
-    },
+    ...mapPiniaState(useInterfaceStore, {
+      temporaryChangesTimeoutId: store => store.layoutType === 'mobile',
+      currentSaveStateNotice: store => store.settings.currentSaveStateNotice,
+      modalActivated: store => store.settingsModalState !== 'hidden',
+      modalMode: store => store.settingsModalMode,
+      modalOpenedOnceUser: store => store.settingsModalLoadedUser,
+      modalOpenedOnceAdmin: store => store.settingsModalLoadedAdmin,
+      modalPeeked: store => store.settingsModalState === 'minimized'
+    }),
     expertLevel: {
       get () {
         return this.$store.state.config.expertLevel > 0

src/components/settings_modal/settings_modal.vue

@@ -158,7 +158,7 @@
     </div>
     <teleport to="#modal">
       <ConfirmModal
-        v-if="$store.state.interface.temporaryChangesTimeoutId"
+        v-if="temporaryChangesTimeoutId"
         :title="$t('settings.confirm_new_setting')"
         :cancel-text="$t('settings.revert')"
         :confirm-text="$t('settings.confirm')"

src/components/settings_modal/settings_modal_admin_content.js

@@ -4,6 +4,7 @@ import InstanceTab from './admin_tabs/instance_tab.vue'
 import LimitsTab from './admin_tabs/limits_tab.vue'
 import FrontendsTab from './admin_tabs/frontends_tab.vue'
 import EmojiTab from './admin_tabs/emoji_tab.vue'
+import { useInterfaceStore } from 'src/stores/interface'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -45,10 +46,10 @@ const SettingsModalAdminContent = {
       return !!this.$store.state.users.currentUser
     },
     open () {
-      return this.$store.state.interface.settingsModalState !== 'hidden'
+      return useInterfaceStore().settingsModalState !== 'hidden'
     },
     bodyLock () {
-      return this.$store.state.interface.settingsModalState === 'visible'
+      return useInterfaceStore().settingsModalState === 'visible'
     },
     adminDbLoaded () {
       return this.$store.state.adminSettings.loaded
@@ -67,7 +68,7 @@ const SettingsModalAdminContent = {
   },
   methods: {
     onOpen () {
-      const targetTab = this.$store.state.interface.settingsModalTargetTab
+      const targetTab = useInterfaceStore().settingsModalTargetTab
       // We're being told to open in specific tab
       if (targetTab) {
         const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {

src/components/settings_modal/settings_modal_user_content.js

@@ -25,7 +25,7 @@ import {
   faInfo,
   faWindowRestore
 } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 library.add(
   faWrench,
@@ -70,7 +70,7 @@ const SettingsModalContent = {
       return this.$store.state.config.expertLevel
     },
     isMobileLayout () {
-      return this.$store.state.interface.layoutType === 'mobile'
+      return useInterfaceStore().layoutType === 'mobile'
     }
   },
   methods: {

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()