migrate to pinia

src/components/navigation/navigation_entry.js

@@ -3,8 +3,10 @@ import { routeTo } from 'src/components/navigation/navigation.js'
 import OptionalRouterLink from 'src/components/optional_router_link/optional_router_link.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
-import { mapStores } from 'pinia'
+import { mapStores, mapState as mapPiniaState } from 'pinia'
+
 import { useAnnouncementsStore } from 'src/stores/announcements'
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 
 library.add(faThumbtack)
 
@@ -19,11 +21,11 @@ const NavigationEntry = {
     },
     togglePin (value) {
       if (this.isPinned(value)) {
-        this.$store.commit('removeCollectionPreference', { path: 'collections.pinnedNavItems', value })
+        useServerSideStorageStore().removeCollectionPreference({ path: 'collections.pinnedNavItems', value })
       } else {
-        this.$store.commit('addCollectionPreference', { path: 'collections.pinnedNavItems', value })
+        useServerSideStorageStore().addCollectionPreference({ path: 'collections.pinnedNavItems', value })
       }
-      this.$store.dispatch('pushServerSideStorage')
+      useServerSideStorageStore().pushServerSideStorage()
     }
   },
   computed: {
@@ -35,9 +37,11 @@ const NavigationEntry = {
     },
     ...mapStores(useAnnouncementsStore),
     ...mapState({
-      currentUser: state => state.users.currentUser,
-      pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
-    })
+      currentUser: state => state.users.currentUser
+    }),
+    ...mapPiniaState(useServerSideStorageStore, {
+      pinnedItems: store => new Set(store.prefsStorage.collections.pinnedNavItems)
+    }),
   }
 }
 

src/components/navigation/navigation_pins.js

@@ -20,6 +20,7 @@ import {
 import { useListsStore } from 'src/stores/lists'
 import { useAnnouncementsStore } from 'src/stores/announcements'
 import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 
 library.add(
   faUsers,
@@ -54,15 +55,17 @@ const NavPanel = {
       supportsAnnouncements: store => store.supportsAnnouncements
     }),
     ...mapPiniaState(useBookmarkFoldersStore, {
-      bookmarks: getBookmarkFolderEntries
+      bookmarks: getBookmarkFolderEntries,
+    }),
+    ...mapPiniaState(useServerSideStorageStore, {
+      pinnedItems: store => new Set(store.prefsStorage.collections.pinnedNavItems)
     }),
     ...mapState({
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,
       privateMode: state => state.instance.private,
       federating: state => state.instance.federating,
-      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
-      pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
+      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
     }),
     pinnedList () {
       if (!this.currentUser) {