Migrate bookmark folders state to pinia store

src/components/bookmark_folder_edit/bookmark_folder_edit.js

@@ -1,5 +1,7 @@
 import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import apiService from '../../services/api/api.service'
+import { useInterfaceStore } from 'src/stores/interface'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 const BookmarkFolderEdit = {
   data () {
@@ -52,18 +54,18 @@ const BookmarkFolderEdit = {
       this.emojiPickerExpanded = false
     },
     updateFolder () {
-      this.$store.dispatch('setBookmarkFolder', { folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
+      useBookmarkFoldersStore().updateBookmarkFolder({ folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
         .then(() => {
           this.$router.push({ name: 'bookmark-folders' })
         })
     },
     createFolder () {
-      this.$store.dispatch('createBookmarkFolder', { name: this.nameDraft, emoji: this.emojiDraft })
+      useBookmarkFoldersStore().createBookmarkFolder({ name: this.nameDraft, emoji: this.emojiDraft })
         .then(() => {
           this.$router.push({ name: 'bookmark-folders' })
         })
         .catch((e) => {
-          this.$store.useInterfaceStore().pushGlobalNotice({
+          useInterfaceStore().pushGlobalNotice({
             messageKey: 'bookmark_folders.error',
             messageArgs: [e.message],
             level: 'error'
@@ -71,7 +73,7 @@ const BookmarkFolderEdit = {
         })
     },
     deleteFolder () {
-      this.$store.dispatch('deleteBookmarkFolder', { folderId: this.id })
+      useBookmarkFoldersStore().deleteBookmarkFolder({ folderId: this.id })
       this.$router.push({ name: 'bookmark-folders' })
     }
   }

src/components/bookmark_folders/bookmark_folders.js

@@ -1,4 +1,5 @@
 import BookmarkFolderCard from '../bookmark_folder_card/bookmark_folder_card.vue'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 const BookmarkFolders = {
   data () {
@@ -11,7 +12,7 @@ const BookmarkFolders = {
   },
   computed: {
     bookmarkFolders () {
-      return this.$store.state.bookmarkFolders.allFolders
+      return useBookmarkFoldersStore().allFolders
     }
   },
   methods: {

src/components/bookmark_folders_menu/bookmark_folders_menu_content.js

@@ -1,6 +1,7 @@
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import { getBookmarkFolderEntries } from 'src/components/navigation/filter.js'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 export const BookmarkFoldersMenuContent = {
   props: [
@@ -10,7 +11,7 @@ export const BookmarkFoldersMenuContent = {
     NavigationEntry
   },
   computed: {
-    ...mapState({
+    ...mapState(useBookmarkFoldersStore, {
       folders: getBookmarkFolderEntries
     })
   }

src/components/navigation/filter.js

@@ -19,7 +19,7 @@ export const getListEntries = store => store.allLists.map(list => ({
   iconLetter: list.title[0]
 }))
 
-export const getBookmarkFolderEntries = state => state.bookmarkFolders.allFolders.map(folder => ({
+export const getBookmarkFolderEntries = store => store.allFolders.map(folder => ({
   name: 'bookmark-folder-' + folder.id,
   routeObject: { name: 'bookmark-folder', params: { id: folder.id } },
   labelRaw: folder.name,

src/components/navigation/navigation_pins.js

@@ -19,6 +19,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { useListsStore } from 'src/stores/lists'
 import { useAnnouncementsStore } from 'src/stores/announcements'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 library.add(
   faUsers,
@@ -52,8 +53,10 @@ const NavPanel = {
     ...mapPiniaState(useAnnouncementsStore, {
       supportsAnnouncements: store => store.supportsAnnouncements
     }),
+    ...mapPiniaState(useBookmarkFoldersStore, {
+      bookmarks: getBookmarkFolderEntries
+    }),
     ...mapState({
-      bookmarks: getBookmarkFolderEntries,
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,
       privateMode: state => state.instance.private,

src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js

@@ -1,6 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronRight, faFolder } from '@fortawesome/free-solid-svg-icons'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 import Popover from 'src/components/popover/popover.vue'
 import StillImage from 'src/components/still-image/still-image.vue'
@@ -20,8 +21,8 @@ const StatusBookmarkFolderMenu = {
     StillImage
   },
   computed: {
-    ...mapState({
-      folders: state => state.bookmarkFolders.allFolders
+    ...mapState(useBookmarkFoldersStore, {
+      folders: store => store.allFolders
     }),
     folderId () {
       return this.status.bookmark_folder_id

src/components/timeline_menu/timeline_menu.js

@@ -11,6 +11,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { useInterfaceStore } from 'src/stores/interface'
 import { useListsStore } from 'src/stores/lists'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 library.add(faChevronDown)
 
@@ -100,7 +101,7 @@ const TimelineMenu = {
         return useListsStore().findListTitle(this.$route.params.id)
       }
       if (route === 'bookmark-folder') {
-        return this.$store.getters.findBookmarkFolderName(this.$route.params.id)
+        return useBookmarkFoldersStore().findBookmarkFolderName(this.$route.params.id)
       }
       const i18nkey = timelineNames(this.bookmarkFolders)[this.$route.name]
       return i18nkey ? this.$t(i18nkey) : route