pass 4 - non-obvious changes

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,
       })
     },