pleroma-fe boots once again

src/components/conversation/conversation.js

@@ -3,8 +3,10 @@ import Status from '../status/status.vue'
 import ThreadTree from '../thread_tree/thread_tree.vue'
 import { WSConnectionStatus } from '../../services/api/api.service.js'
 import { mapGetters, mapState } from 'vuex'
+import { mapState as mapPiniaState } from 'pinia'
 import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
 import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
+import { useInterfaceStore } from 'src/stores/interface'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -350,8 +352,10 @@ const conversation = {
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({
-      mobileLayout: state => state.interface.layoutType === 'mobile',
       mastoUserSocketStatus: state => state.api.mastoUserSocketStatus
+    }),
+    ...mapPiniaState(useInterfaceStore, {
+      mobileLayout: store => store.layoutType === 'mobile'
     })
   },
   components: {

src/components/extra_notifications/extra_notifications.js

@@ -1,4 +1,6 @@
 import { mapGetters } from 'vuex'
+import { mapState as mapPiniaState } from 'pinia'
+import { useAnnouncementsStore } from '../../stores/announcements'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -33,7 +35,10 @@ const ExtraNotifications = {
     currentUser () {
       return this.$store.state.users.currentUser
     },
-    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount', 'mergedConfig'])
+    ...mapGetters(['unreadChatCount', 'followRequestCount', 'mergedConfig']),
+    ...mapPiniaState(useAnnouncementsStore, {
+      unreadAnnouncementCount: 'unreadAnnouncementCount'
+    })
   },
   methods: {
     openNotificationSettings () {

src/components/font_control/font_control.js

@@ -1,6 +1,7 @@
 import Select from '../select/select.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
+import { useInterfaceStore } from 'src/stores/interface'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -50,10 +51,10 @@ export default {
       return typeof this.modelValue !== 'undefined'
     },
     localFontsList () {
-      return this.$store.state.interface.localFonts
+      return useInterfaceStore().localFonts
     },
     localFontsSize () {
-      return this.$store.state.interface.localFonts?.length
+      return useInterfaceStore().localFonts?.length
     }
   }
 }

src/components/nav_panel/nav_panel.js

@@ -7,6 +7,7 @@ import { filterNavigation } from 'src/components/navigation/filter.js'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import NavigationPins from 'src/components/navigation/navigation_pins.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import { useAnnouncementsStore } from 'src/stores/announcements'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -24,7 +25,6 @@ import {
   faBullhorn,
   faFilePen
 } from '@fortawesome/free-solid-svg-icons'
-import { useAnnouncementsStore } from '../../stores/announcements'
 
 library.add(
   faUsers,

src/components/navigation/navigation_pins.js

@@ -17,7 +17,8 @@ import {
   faStream,
   faList
 } from '@fortawesome/free-solid-svg-icons'
-import { useListsStore } from '../../stores/lists'
+import { useListsStore } from 'src/stores/lists'
+import { useAnnouncementsStore } from 'src/stores/announcements'
 
 library.add(
   faUsers,
@@ -48,6 +49,9 @@ const NavPanel = {
     ...mapPiniaState(useListsStore, {
       lists: getListEntries
     }),
+    ...mapPiniaState(useAnnouncementsStore, {
+      supportsAnnouncements: store => store.supportsAnnouncements
+    }),
     ...mapState({
       bookmarks: getBookmarkFolderEntries,
       currentUser: state => state.users.currentUser,
@@ -55,7 +59,6 @@ const NavPanel = {
       privateMode: state => state.instance.private,
       federating: state => state.instance.federating,
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
-      supportsAnnouncements: state => state.announcements.supportsAnnouncements,
       pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
     }),
     pinnedList () {

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

src/components/user_avatar/user_avatar.js

@@ -1,4 +1,5 @@
 import StillImage from '../still-image/still-image.vue'
+import { useInterfaceStore } from 'src/stores/interface'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 
@@ -22,7 +23,7 @@ const UserAvatar = {
     return {
       showPlaceholder: false,
       defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter
+      betterShadow: useInterfaceStore().browserSupport.cssFilter
     }
   },
   components: {