Migrate interface module to store

src/components/chat/chat.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import { WSConnectionStatus } from '../../services/api/api.service.js'
 import { mapGetters, mapState } from 'vuex'
+import { mapState as mapPiniaState } from 'pinia'
 import ChatMessage from '../chat_message/chat_message.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import ChatTitle from '../chat_title/chat_title.vue'
@@ -13,6 +14,7 @@ import {
   faChevronLeft
 } from '@fortawesome/free-solid-svg-icons'
 import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
+import { useInterfaceStore } from '../../stores/interface.js'
 
 library.add(
   faChevronDown,
@@ -90,10 +92,12 @@ const Chat = {
       'findOpenedChatByRecipientId',
       'mergedConfig'
     ]),
+    ...mapPiniaState(useInterfaceStore, {
+      mobileLayout: store => store.layoutType === 'mobile'
+    }),
     ...mapState({
       backendInteractor: state => state.api.backendInteractor,
       mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
-      mobileLayout: state => state.interface.layoutType === 'mobile',
       currentUser: state => state.users.currentUser
     })
   },

src/components/chat_message/chat_message.js

@@ -1,4 +1,5 @@
 import { mapState, mapGetters } from 'vuex'
+import { mapState as mapPiniaState } from 'pinia'
 import Popover from '../popover/popover.vue'
 import Attachment from '../attachment/attachment.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
@@ -12,6 +13,7 @@ import {
   faTimes,
   faEllipsisH
 } from '@fortawesome/free-solid-svg-icons'
+import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
   faTimes,
@@ -65,8 +67,10 @@ const ChatMessage = {
     hasAttachment () {
       return this.message.attachments.length > 0
     },
+    ...mapPiniaState(useInterfaceStore, {
+      betterShadow: store => store.browserSupport.cssFilter
+    }),
     ...mapState({
-      betterShadow: state => state.interface.browserSupport.cssFilter,
       currentUser: state => state.users.currentUser,
       restrictedNicknames: state => state.instance.restrictedNicknames
     }),

src/components/desktop_nav/desktop_nav.js

@@ -14,6 +14,7 @@ import {
   faCog,
   faInfoCircle
 } from '@fortawesome/free-solid-svg-icons'
+import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
   faSignInAlt,
@@ -107,7 +108,7 @@ export default {
       this.searchBarHidden = hidden
     },
     openSettingsModal () {
-      this.$store.dispatch('openSettingsModal')
+      useInterfaceStore().openSettingsModal()
     }
   }
 }

src/components/global_notice_list/global_notice_list.js

@@ -2,6 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes
 } from '@fortawesome/free-solid-svg-icons'
+import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
   faTimes
@@ -10,12 +11,12 @@ library.add(
 const GlobalNoticeList = {
   computed: {
     notices () {
-      return this.$store.state.interface.globalNotices
+      return useInterfaceStore().globalNotices
     }
   },
   methods: {
     closeNotice (notice) {
-      this.$store.dispatch('removeGlobalNotice', notice)
+      useInterfaceStore().removeGlobalNotice(notice)
     }
   }
 }

src/components/lists_edit/lists_edit.js

@@ -9,6 +9,7 @@ import {
   faSearch,
   faChevronLeft
 } from '@fortawesome/free-solid-svg-icons'
+import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
   faSearch,
@@ -128,7 +129,7 @@ const ListsNew = {
           this.$router.push({ name: 'lists-timeline', params: { id: listId } })
         })
         .catch((e) => {
-          this.$store.dispatch('pushGlobalNotice', {
+          useInterfaceStore().pushGlobalNotice({
             messageKey: 'lists.error',
             messageArgs: [e.message],
             level: 'error'

src/components/notification/notification.js

@@ -25,6 +25,7 @@ import {
   faExpandAlt,
   faCompressAlt
 } from '@fortawesome/free-solid-svg-icons'
+import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
   faCheck,
@@ -43,7 +44,7 @@ const Notification = {
   data () {
     return {
       statusExpanded: false,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
+      betterShadow: useInterfaceStore().browserSupport.cssFilter,
       unmuted: false,
       showingApproveConfirmDialog: false,
       showingDenyConfirmDialog: false

src/components/notifications/notifications.js

@@ -11,6 +11,7 @@ import {
 import FaviconService from '../../services/favicon_service/favicon_service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch, faArrowUp, faMinus } from '@fortawesome/free-solid-svg-icons'
+import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
   faCircleNotch,
@@ -75,11 +76,11 @@ const Notifications = {
       return this.$store.state.statuses.notifications.loading
     },
     noHeading () {
-      const { layoutType } = this.$store.state.interface
+      const { layoutType } = useInterfaceStore()
       return this.minimalMode || layoutType === 'mobile'
     },
     teleportTarget () {
-      const { layoutType } = this.$store.state.interface
+      const { layoutType } = useInterfaceStore()
       const map = {
         wide: '#notifs-column',
         mobile: '#mobile-notifications'
@@ -87,7 +88,7 @@ const Notifications = {
       return map[layoutType] || '#notifs-sidebar'
     },
     popoversZLayer () {
-      const { layoutType } = this.$store.state.interface
+      const { layoutType } = useInterfaceStore()
       return layoutType === 'mobile' ? 'navbar' : null
     },
     notificationsToDisplay () {
@@ -114,10 +115,10 @@ const Notifications = {
     unseenCountTitle (count) {
       if (count > 0) {
         FaviconService.drawFaviconBadge()
-        this.$store.dispatch('setPageTitle', `(${count})`)
+        useInterfaceStore().setPageTitle(`(${count})`)
       } else {
         FaviconService.clearFaviconBadge()
-        this.$store.dispatch('setPageTitle', '')
+        useInterfaceStore().setPageTitle('')
       }
     },
     teleportTarget () {

src/components/post_status_form/post_status_form.js

@@ -11,7 +11,8 @@ import { findOffset } from '../../services/offset_finder/offset_finder.service.j
 import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
 import { reject, map, uniqBy, debounce } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
-import { mapGetters, mapState } from 'vuex'
+import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 import Checkbox from '../checkbox/checkbox.vue'
 import Select from '../select/select.vue'
 
@@ -24,6 +25,7 @@ import {
   faTimes,
   faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
+import { useInterfaceStore } from '../../stores/interface.js'
 
 library.add(
   faSmileBeam,
@@ -266,8 +268,8 @@ const PostStatusForm = {
       return typeof this.statusId !== 'undefined' && this.statusId.trim() !== ''
     },
     ...mapGetters(['mergedConfig']),
-    ...mapState({
-      mobileLayout: state => state.interface.mobileLayout
+    ...mapState(useInterfaceStore, {
+      mobileLayout: store => store.mobileLayout
     })
   },
   watch: {
@@ -629,7 +631,7 @@ const PostStatusForm = {
       this.idempotencyKey = Date.now().toString()
     },
     openProfileTab () {
-      this.$store.dispatch('openSettingsModalTab', 'profile')
+      useInterfaceStore().openSettingsModalTab('profile')
     },
     propsToNative (props) {
       return propsToNative(props)

src/components/quick_filter_settings/quick_filter_settings.js

@@ -2,6 +2,7 @@ import Popover from '../popover/popover.vue'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'
+import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
   faFilter,
@@ -22,7 +23,7 @@ const QuickFilterSettings = {
       this.$store.dispatch('queueFlushAll')
     },
     openTab (tab) {
-      this.$store.dispatch('openSettingsModalTab', tab)
+      useInterfaceStore().openSettingsModalTab(tab)
     }
   },
   computed: {

src/components/quick_view_settings/quick_view_settings.js

@@ -2,6 +2,7 @@ import Popover from '../popover/popover.vue'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faList, faFolderTree, faBars, faWrench } from '@fortawesome/free-solid-svg-icons'
+import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
   faList,
@@ -22,7 +23,7 @@ const QuickViewSettings = {
       this.$store.dispatch('setOption', { name: 'conversationDisplay', value: visibility })
     },
     openTab (tab) {
-      this.$store.dispatch('openSettingsModalTab', tab)
+      useInterfaceStore().openSettingsModalTab(tab)
     }
   },
   computed: {

src/components/settings_modal/settings_modal.js

@@ -19,6 +19,7 @@ import {
 import {
   faWindowMinimize
 } from '@fortawesome/free-regular-svg-icons'
+import { useInterfaceStore } from '../../stores/interface'
 
 const PLEROMAFE_SETTINGS_MAJOR_VERSION = 1
 const PLEROMAFE_SETTINGS_MINOR_VERSION = 0
@@ -64,10 +65,10 @@ const SettingsModal = {
   },
   methods: {
     closeModal () {
-      this.$store.dispatch('closeSettingsModal')
+      useInterfaceStore().closeSettingsModal()
     },
     peekModal () {
-      this.$store.dispatch('togglePeekSettingsModal')
+      useInterfaceStore().togglePeekSettingsModal()
     },
     importValidator (data) {
       if (!Array.isArray(data._pleroma_settings_version)) {
@@ -99,7 +100,7 @@ const SettingsModal = {
       }
 
       if (minor > PLEROMAFE_SETTINGS_MINOR_VERSION) {
-        this.$store.dispatch('pushGlobalNotice', {
+        useInterfaceStore().pushGlobalNotice({
           level: 'warning',
           messageKey: 'settings.file_export_import.errors.file_slightly_new'
         })
@@ -109,9 +110,9 @@ const SettingsModal = {
     },
     onImportFailure (result) {
       if (result.error) {
-        this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_settings_imported', level: 'error' })
+        useInterfaceStore().pushGlobalNotice({ messageKey: 'settings.invalid_settings_imported', level: 'error' })
       } else {
-        this.$store.dispatch('pushGlobalNotice', { ...result.validationResult, level: 'error' })
+        useInterfaceStore().pushGlobalNotice({ ...result.validationResult, level: 'error' })
       }
     },
     onImport (data) {
@@ -151,16 +152,16 @@ const SettingsModal = {
   },
   computed: {
     currentSaveStateNotice () {
-      return this.$store.state.interface.settings.currentSaveStateNotice
+      return useInterfaceStore().settings.currentSaveStateNotice
     },
     modalActivated () {
-      return this.$store.state.interface.settingsModalState !== 'hidden'
+      return useInterfaceStore().settingsModalState !== 'hidden'
     },
     modalOpenedOnce () {
-      return this.$store.state.interface.settingsModalLoaded
+      return useInterfaceStore().settingsModalLoaded
     },
     modalPeeked () {
-      return this.$store.state.interface.settingsModalState === 'minimized'
+      return useInterfaceStore().settingsModalState === 'minimized'
     },
     expertLevel: {
       get () {

src/components/settings_modal/settings_modal_content.js

@@ -21,6 +21,7 @@ import {
   faEyeSlash,
   faInfo
 } from '@fortawesome/free-solid-svg-icons'
+import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
   faWrench,
@@ -52,15 +53,15 @@ const SettingsModalContent = {
       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'
     }
   },
   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 => {
@@ -72,7 +73,7 @@ const SettingsModalContent = {
       }
       // 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/profile_tab.js

@@ -20,6 +20,7 @@ import {
   faPlus,
   faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
+import { useInterfaceStore } from '../../../stores/interface'
 
 library.add(
   faTimes,
@@ -166,7 +167,7 @@ const ProfileTab = {
       if (file.size > this.$store.state.instance[slot + 'limit']) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
-        this.$store.dispatch('pushGlobalNotice', {
+        useInterfaceStore().pushGlobalNotice({
           messageKey: 'upload.error.message',
           messageArgs: [
             this.$t('upload.error.file_too_big', {
@@ -257,7 +258,7 @@ const ProfileTab = {
         .finally(() => { this.backgroundUploading = false })
     },
     displayUploadError (error) {
-      this.$store.dispatch('pushGlobalNotice', {
+      useInterfaceStore().pushGlobalNotice({
         messageKey: 'upload.error.message',
         messageArgs: [error.message],
         level: 'error'

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

@@ -38,6 +38,7 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
 
 import Preview from './preview.vue'
+import { useInterfaceStore } from '../../../../stores/interface'
 
 // List of color values used in v1
 const v1OnlyNames = [
@@ -548,7 +549,7 @@ export default {
       this.loadTheme(parsed, 'file', forceSource)
     },
     onImportFailure (result) {
-      this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
+      useInterfaceStore().pushGlobalNotice({ messageKey: 'settings.invalid_theme_imported', level: 'error' })
     },
     importValidator (parsed) {
       const version = parsed._pleroma_theme_version

src/components/side_drawer/side_drawer.js

@@ -20,6 +20,7 @@ import {
   faList
 } from '@fortawesome/free-solid-svg-icons'
 import { useShoutStore } from '../../stores/shout'
+import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
   faSignInAlt,
@@ -85,8 +86,8 @@ const SideDrawer = {
     },
     timelinesRoute () {
       let name
-      if (this.$store.state.interface.lastTimeline) {
-        name = this.$store.state.interface.lastTimeline
+      if (useInterfaceStore().lastTimeline) {
+        name = useInterfaceStore().lastTimeline
       }
       name = this.currentUser ? 'friends' : 'public-timeline'
       if (USERNAME_ROUTES.has(name)) {
@@ -116,7 +117,7 @@ const SideDrawer = {
       GestureService.updateSwipe(e, this.closeGesture)
     },
     openSettingsModal () {
-      this.$store.dispatch('openSettingsModal')
+      useInterfaceStore().openSettingsModal()
     }
   }
 }

src/components/status/status.js

@@ -20,6 +20,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import { muteWordHits } from '../../services/status_parser/status_parser.js'
 import { unescape, uniqBy } from 'lodash'
+import { useInterfaceStore } from '../../stores/interface'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -379,7 +380,7 @@ const Status = {
       return this.$store.state.users.currentUser
     },
     betterShadow () {
-      return this.$store.state.interface.browserSupport.cssFilter
+      return useInterfaceStore().browserSupport.cssFilter
     },
     mergedConfig () {
       return this.$store.getters.mergedConfig

src/components/tab_switcher/tab_switcher.jsx

@@ -1,9 +1,10 @@
 // eslint-disable-next-line no-unused
 import { h, Fragment } from 'vue'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
 
 import './tab_switcher.scss'
+import { useInterfaceStore } from '../../stores/interface'
 
 const findFirstUsable = (slots) => slots.findIndex(_ => _.props)
 
@@ -64,8 +65,8 @@ export default {
     settingsModalVisible () {
       return this.settingsModalState === 'visible'
     },
-    ...mapState({
-      settingsModalState: state => state.interface.settingsModalState
+    ...mapState(useInterfaceStore, {
+      settingsModalState: store => store.settingsModalState
     })
   },
   beforeUpdate () {

src/components/timeline/timeline.js

@@ -1,5 +1,5 @@
 import Status from '../status/status.vue'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
@@ -8,6 +8,7 @@ import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
 import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch, faCirclePlus, faCog, faMinus, faArrowUp, faCheck } from '@fortawesome/free-solid-svg-icons'
+import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
   faCircleNotch,
@@ -101,8 +102,8 @@ const Timeline = {
     virtualScrollingEnabled () {
       return this.$store.getters.mergedConfig.virtualScrolling
     },
-    ...mapState({
-      mobileLayout: state => state.interface.layoutType === 'mobile'
+    ...mapState(useInterfaceStore, {
+      mobileLayout: store => store.layoutType === 'mobile'
     })
   },
   created () {

src/components/timeline_menu/timeline_menu.js

@@ -8,6 +8,7 @@ import { filterNavigation } from 'src/components/navigation/filter.js'
 import {
   faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
+import { useInterfaceStore } from '../../stores/interface'
 
 library.add(faChevronDown)
 
@@ -36,7 +37,7 @@ const TimelineMenu = {
   },
   created () {
     if (timelineNames()[this.$route.name]) {
-      this.$store.dispatch('setLastTimeline', this.$route.name)
+      useInterfaceStore().setLastTimeline(this.$route.name)
     }
   },
   computed: {

src/components/user_card/user_card.js

@@ -24,6 +24,7 @@ import {
   faExpandAlt
 } from '@fortawesome/free-solid-svg-icons'
 import { useMediaViewerStore } from '../../stores/media_viewer'
+import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
   faRss,
@@ -50,7 +51,7 @@ export default {
   data () {
     return {
       followRequestInProgress: false,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
+      betterShadow: useInterfaceStore().browserSupport.cssFilter,
       showingConfirmMute: false,
       muteExpiryAmount: 0,
       muteExpiryUnit: 'minutes'
@@ -216,7 +217,7 @@ export default {
       )
     },
     openProfileTab () {
-      this.$store.dispatch('openSettingsModalTab', 'profile')
+      useInterfaceStore().openSettingsModalTab('profile')
     },
     zoomAvatar () {
       const attachment = {