pass 4 - non-obvious changes

src/App.js

@@ -1,4 +1,5 @@
 import { throttle } from 'lodash'
+import { mapState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
 import { mapGetters } from 'vuex'
 
@@ -92,12 +93,9 @@ export default {
     this.scrollParent.removeEventListener('scroll', this.updateScrollState)
   },
   computed: {
-    themeApplied() {
-      return useInterfaceStore().themeApplied
-    },
     currentTheme() {
-      if (useInterfaceStore().styleDataUsed) {
-        const styleMeta = useInterfaceStore().styleDataUsed.find(
+      if (this.styleDataUsed) {
+        const styleMeta = this.styleDataUsed.find(
           (x) => x.component === '@meta',
         )
 
@@ -135,9 +133,7 @@ export default {
       return this.currentUser.background_image
     },
     instanceBackground() {
-      return this.mergedConfig.hideInstanceWallpaper
-        ? null
-        : useInstanceStore().background
+      return this.mergedConfig.hideInstanceWallpaper ? null : this.background
     },
     background() {
       return this.userBackground || this.instanceBackground
@@ -152,14 +148,11 @@ export default {
     shout() {
       return useShoutStore().joined
     },
-    suggestionsEnabled() {
-      return useInstanceStore().suggestionsEnabled
-    },
     showInstanceSpecificPanel() {
       return (
-        useInstanceStore().showInstanceSpecificPanel &&
+        this.showInstanceSpecificPanel &&
         !this.$store.getters.mergedConfig.hideISP &&
-        useInstanceStore().instanceSpecificPanelContent
+        this.instanceSpecificPanelContent
       )
     },
     isChats() {
@@ -176,24 +169,12 @@ export default {
         this.layoutType === 'mobile'
       )
     },
-    showFeaturesPanel() {
-      return useInstanceStore().showFeaturesPanel
-    },
-    editingAvailable() {
-      return useInstanceStore().editingAvailable
-    },
     shoutboxPosition() {
       return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
     },
     hideShoutbox() {
       return this.$store.getters.mergedConfig.hideShoutbox
     },
-    layoutType() {
-      return useInterfaceStore().layoutType
-    },
-    privateMode() {
-      return useInstanceStore().private
-    },
     reverseLayout() {
       const { thirdColumnMode, sidebarRight: reverseSetting } =
         this.$store.getters.mergedConfig
@@ -215,6 +196,24 @@ export default {
       return window /* this.$refs.appContentRef */
     },
     ...mapGetters(['mergedConfig']),
+    ...mapState(useInterfaceStore, [
+      'themeApplied',
+      'styleDataUsed',
+      'layoutType',
+    ]),
+    ...mapState(useInstanceStore, [
+      'styleDataUsed',
+      'instanceSpecificPanelContent',
+      'private',
+    ]),
+    ...mapState(useInstanceStore, {
+      background: (store) => store.instanceIdentity.background,
+      showFeaturesPanel: (store) => store.instanceIdentity.showFeaturesPanel,
+      showInstanceSpecificPanel: (store) =>
+        store.instanceIdentity.showInstanceSpecificPanel,
+      suggestionsEnabled: (store) => store.featureSet.suggestionsEnabled,
+      editingAvailable: (store) => store.featureSet.editingAvailable,
+    }),
   },
   methods: {
     resizeHandler() {

src/boot/after_store.js

@@ -22,8 +22,8 @@ import {
 import { useAnnouncementsStore } from 'src/stores/announcements'
 import { useAuthFlowStore } from 'src/stores/auth_flow'
 import { useI18nStore } from 'src/stores/i18n'
-import { useInterfaceStore } from 'src/stores/interface.js'
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 import { useOAuthStore } from 'src/stores/oauth'
 import App from '../App.vue'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
@@ -168,8 +168,12 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
     }
   }
 
-  Object.keys(staticOrApiConfigDefault).map(k => `instanceIdentity.${k}`).forEach(copyInstanceOption)
-  Object.keys(instanceDefaultConfig).map(k => `prefsStorage.${k}`).forEach(copyInstanceOption)
+  Object.keys(staticOrApiConfigDefault)
+    .map((k) => `instanceIdentity.${k}`)
+    .forEach(copyInstanceOption)
+  Object.keys(instanceDefaultConfig)
+    .map((k) => `prefsStorage.${k}`)
+    .forEach(copyInstanceOption)
 
   useAuthFlowStore().setInitialStrategy(config.loginMethod)
 }

src/components/desktop_nav/desktop_nav.js

@@ -1,4 +1,5 @@
 import SearchBar from 'components/search_bar/search_bar.vue'
+import { mapState } from 'pinia'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
@@ -52,7 +53,7 @@ export default {
   }),
   computed: {
     enableMask() {
-      return this.supportsMask && useInstanceStore().logoMask
+      return this.supportsMask && this.logoMask
     },
     logoStyle() {
       return {
@@ -62,7 +63,7 @@ export default {
     logoMaskStyle() {
       return this.enableMask
         ? {
-            'mask-image': `url(${useInstanceStore().logo})`,
+            'mask-image': `url(${this.logo})`,
           }
         : {
             'background-color': this.enableMask ? '' : 'transparent',
@@ -71,7 +72,7 @@ export default {
     logoBgStyle() {
       return Object.assign(
         {
-          margin: `${useInstanceStore().logoMargin} 0`,
+          margin: `${this.logoMargin} 0`,
           opacity: this.searchBarHidden ? 1 : 0,
         },
         this.enableMask
@@ -81,24 +82,18 @@ export default {
             },
       )
     },
-    logo() {
-      return useInstanceStore().logo
-    },
-    sitename() {
-      return useInstanceStore().name
-    },
-    hideSitename() {
-      return useInstanceStore().hideSitename
-    },
-    logoLeft() {
-      return useInstanceStore().logoLeft
-    },
+    ...mapState(useInstanceStore, ['private']),
+    ...mapState(useInstanceStore, {
+      logoMask: (store) => store.instanceIdentity.logoMask,
+      logo: (store) => store.instanceIdentity.logo,
+      logoLeft: (store) => store.instanceIdentity.logoLeft,
+      logoMargin: (store) => store.instanceIdentity.logoMargin,
+      name: (store) => store.instanceIdentity.name,
+      hideSitename: (store) => store.instanceIdentity.hideSitename,
+    }),
     currentUser() {
       return this.$store.state.users.currentUser
     },
-    privateMode() {
-      return useInstanceStore().private
-    },
     shouldConfirmLogout() {
       return this.$store.getters.mergedConfig.modalOnLogout
     },

src/components/emoji_picker/emoji_picker.js

@@ -2,8 +2,8 @@ import { chunk, debounce, trim } from 'lodash'
 import { defineAsyncComponent } from 'vue'
 
 import Popover from 'src/components/popover/popover.vue'
-import { useInstanceStore } from 'src/stores/instance.js'
 import { useEmojiStore } from 'src/stores/emoji.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import { ensureFinalFallback } from '../../i18n/languages.js'
 import Checkbox from '../checkbox/checkbox.vue'
 import StillImage from '../still-image/still-image.vue'

src/components/login_form/login_form.js

@@ -17,12 +17,11 @@ const LoginForm = {
     error: false,
   }),
   computed: {
-    ...mapState(useInstanceStore, ['server'])
-    ...mapStores(useOAuthStore),
     ...mapState({
-      registrationOpen: (state) => useInstanceStore().registrationOpen,
       loggingIn: (state) => state.users.loggingIn,
     }),
+    ...mapPiniaState(useOAuthStore, ['clientId', 'clientSecret']),
+    ...mapPiniaState(useInstanceStore, ['server', 'registrationOpen']),
     ...mapPiniaState(useAuthFlowStore, {
       isTokenAuth: (store) => store.requiredToken,
       isPasswordAuth: (store) => !store.requiredToken,
@@ -30,6 +29,7 @@ const LoginForm = {
   },
   methods: {
     ...mapActions(useAuthFlowStore, ['requireMFA', 'login']),
+    ...mapActions(useOAuthStore, ['ensureAppToken']),
     submit() {
       this.isTokenAuth ? this.submitToken() : this.submitPassword()
     },
@@ -41,10 +41,10 @@ const LoginForm = {
 
       // NOTE: we do not really need the app token, but obtaining a token and
       // calling verify_credentials is the only way to ensure the app still works.
-      this.oauthStore.ensureAppToken().then(() => {
+      this.ensureAppToken().then(() => {
         const app = {
-          clientId: this.oauthStore.clientId,
-          clientSecret: this.oauthStore.clientSecret,
+          clientId: this.clientId,
+          clientSecret: this.clientSecret,
         }
         oauthApi.login({ ...app, ...data })
       })
@@ -54,10 +54,10 @@ const LoginForm = {
 
       // NOTE: we do not really need the app token, but obtaining a token and
       // calling verify_credentials is the only way to ensure the app still works.
-      this.oauthStore.ensureAppToken().then(() => {
+      this.ensureAppToken().then(() => {
         const app = {
-          clientId: this.oauthStore.clientId,
-          clientSecret: this.oauthStore.clientSecret,
+          clientId: this.clientId,
+          clientSecret: this.clientSecret,
         }
 
         oauthApi

src/components/media_upload/media_upload.js

@@ -1,8 +1,7 @@
+import { useInstanceStore } from 'src/stores/instance.js'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 import statusPosterService from '../../services/status_poster/status_poster.service.js'
 
-import { useInstanceStore } from 'src/stores/instance.js'
-
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch, faUpload } from '@fortawesome/free-solid-svg-icons'
 

src/components/mfa_form/recovery_form.js

@@ -17,7 +17,7 @@ export default {
   }),
   computed: {
     ...mapStores(useOAuthStore),
-    ...mapState(useOAuthStore, ['clientId','clientSecret']),
+    ...mapState(useOAuthStore, ['clientId', 'clientSecret']),
     ...mapState(useAuthFlowStore, ['settings']),
     ...mapState(useInstanceStore, ['server']),
   },

src/components/mfa_form/totp_form.js

@@ -19,11 +19,8 @@ export default {
     ...mapState(useAuthFlowStore, {
       authSettings: (store) => store.settings,
     }),
-    ...mapState(useInstanceStore, ['server'])
+    ...mapState(useInstanceStore, ['server']),
     ...mapStores(useOAuthStore),
-    ...mapState({
-      instance: 'instance',
-    }),
   },
   methods: {
     ...mapActions(useAuthFlowStore, ['requireRecovery', 'abortMFA', 'login']),

src/components/post_status_form/post_status_form.js

@@ -6,8 +6,8 @@ import DraftCloser from 'src/components/draft_closer/draft_closer.vue'
 import Gallery from 'src/components/gallery/gallery.vue'
 import Popover from 'src/components/popover/popover.vue'
 import { pollFormToMasto } from 'src/services/poll/poll.service.js'
-import { useInstanceStore } from 'src/stores/instance.js'
 import { useEmojiStore } from 'src/stores/emoji.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useMediaViewerStore } from 'src/stores/media_viewer.js'
 import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'

src/components/status_action_buttons/action_button.js

@@ -108,7 +108,7 @@ export default {
       ]
     },
     remoteInteractionLink() {
-      return this.$store.getters.remoteInteractionLink({
+      return useInstanceStore().getRemoteInteractionLink({
         statusId: this.status.id,
       })
     },

src/modules/config.js

@@ -1,10 +1,10 @@
 import Cookies from 'js-cookie'
 import { set } from 'lodash'
 
-import { useI18nStore } from 'src/stores/i18n.js'
-import { useInterfaceStore } from 'src/stores/interface.js'
-import { useInstanceStore } from 'src/stores/instance.js'
 import { useEmojiStore } from 'src/stores/emoji.js'
+import { useI18nStore } from 'src/stores/i18n.js'
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 import messages from '../i18n/messages'
 import localeService from '../services/locale/locale.service.js'
 import { applyConfig } from '../services/style_setter/style_setter.js'
@@ -49,7 +49,10 @@ const config = {
       return {
         ...defaultState,
         ...Object.fromEntries(
-          instanceDefaultProperties.map((key) => [key, useInstanceStore()[key]]),
+          instanceDefaultProperties.map((key) => [
+            key,
+            useInstanceStore()[key],
+          ]),
         ),
       }
     },

src/modules/users.js

@@ -10,9 +10,9 @@ import {
 } from 'lodash'
 
 import { declarations } from 'src/modules/config_declaration'
+import { useEmojiStore } from 'src/stores/emoji.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
-import { useEmojiStore } from 'src/stores/emoji.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
 import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import apiService from '../services/api/api.service.js'

src/stores/emoji.js

@@ -1,8 +1,7 @@
 import { defineStore } from 'pinia'
 
-import { useInstanceStore } from 'src/stores/instance.js'
-
 import { ensureFinalFallback } from 'src/i18n/languages.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 
 import { annotationsLoader } from 'virtual:pleroma-fe/emoji-annotations'
 

src/stores/instance.js

@@ -113,25 +113,13 @@ export const useInstanceStore = defineStore('instance', {
     instanceDomain(state) {
       return new URL(this.server).hostname
     },
-    remoteInteractionLink(state) {
-      const server = this.server.endsWith('/')
-        ? this.server.slice(0, -1)
-        : this.server
-      const link = server + REMOTE_INTERACTION_URL
-
-      return ({ statusId, nickname }) => {
-        if (statusId) {
-          return `${link}?status_id=${statusId}`
-        } else {
-          return `${link}?nickname=${nickname}`
-        }
-      }
-    },
   },
   actions: {
     set({ path, name, value }) {
       if (get(defaultState, path ?? name) === undefined)
-        console.error(`Unknown instance option ${path ?? name}, value: ${value}`)
+        console.error(
+          `Unknown instance option ${path ?? name}, value: ${value}`,
+        )
       set(this, path ?? name, value)
       switch (name) {
         case 'name':
@@ -153,5 +141,17 @@ export const useInstanceStore = defineStore('instance', {
         console.warn("Can't load known domains\n", e)
       }
     },
+    getRemoteInteractionLink({ statusId, nickname }) {
+      const server = this.server.endsWith('/')
+        ? this.server.slice(0, -1)
+        : this.server
+      const link = server + REMOTE_INTERACTION_URL
+
+      if (statusId) {
+        return `${link}?status_id=${statusId}`
+      } else {
+        return `${link}?nickname=${nickname}`
+      }
+    },
   },
 })