most stuff seem to work without errors

src/App.js

@@ -1,8 +1,10 @@
 import { throttle } from 'lodash'
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
-import { mapGetters } from 'vuex'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+import { useShoutStore } from 'src/stores/shout.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
 import DesktopNav from './components/desktop_nav/desktop_nav.vue'
 import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
@@ -22,9 +24,6 @@ import UserReportingModal from './components/user_reporting_modal/user_reporting
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
 import { getOrCreateServiceWorker } from './services/sw/sw'
 import { windowHeight, windowWidth } from './services/window_utils/window_utils'
-import { useInstanceStore } from 'src/stores/instance.js'
-import { useInterfaceStore } from 'src/stores/interface.js'
-import { useShoutStore } from 'src/stores/shout.js'
 
 export default {
   name: 'app',
@@ -155,16 +154,7 @@ export default {
     newPostButtonShown() {
       if (this.isChats) return false
       if (this.isListEdit) return false
-      return (
-        useSyncConfigStore().mergedConfig.alwaysShowNewPostButton ||
-        this.layoutType === 'mobile'
-      )
-    },
-    shoutboxPosition() {
-      return useSyncConfigStore().mergedConfig.alwaysShowNewPostButton || false
-    },
-    layoutType() {
-      return useInterfaceStore().layoutType
+      return (this.alwaysShowNewPostButton || this.layoutType === 'mobile')
     },
     reverseLayout() {
       const { thirdColumnMode, sidebarRight: reverseSetting } =
@@ -177,19 +167,23 @@ export default {
           : !reverseSetting
       }
     },
-    noSticky() {
-      return useSyncConfigStore().mergedConfig.disableStickyHeaders
-    },
-    showScrollbars() {
-      return useSyncConfigStore().mergedConfig.showScrollbars
-    },
     scrollParent() {
       return window /* this.$refs.appContentRef */
     },
-    ...mapGetters(['mergedConfig']),
+
+    ...mapState(useSyncConfigStore, {
+      shoutboxPosition: (store) => store.mergedConfig.alwaysShowSubjectInput || false,
+      alwaysShowSubjectInput: (store) => store.mergedConfig.alwaysShowSubjectInput,
+    }),
+
+    ...mapState(useInterfaceStore, ['layoutType']),
+
     ...mapState(useSyncConfigStore, {
       hideShoutbox: (store) => store.mergedConfig.hideShoutbox,
+      noSticky: (store) => store.mergedConfig.disableStickyHeaders,
+      showScrollbars: (store) => store.mergedConfig.showScrollbars,
     }),
+
     ...mapState(useInstanceStore, {
       instanceBackground: (store) =>
         this.mergedConfig.hideInstanceWallpaper ? null : store.background,
@@ -207,8 +201,8 @@ export default {
   },
   methods: {
     resizeHandler() {
-      useInterfaceStore().setLayoutWidth(windowWidth())
-      useInterfaceStore().setLayoutHeight(windowHeight())
+      this.setLayoutWidth(windowWidth())
+      this.setLayoutHeight(windowHeight())
     },
     scrollHandler() {
       const scrollPosition =
@@ -255,5 +249,6 @@ export default {
       splashscreenRoot.classList.add('hidden')
       document.querySelector('#app').classList.remove('hidden')
     },
+    ...mapActions(useInterfaceStore, ['setLayoutWidth', 'setLayoutHeight']),
   },
 }