fix some navigation issues

src/boot/routes.js

@@ -32,6 +32,8 @@ import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_fold
 import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
 import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
     if (store.state.users.currentUser) {
@@ -200,7 +202,7 @@ export default (store) => {
     },
   ]
 
-  if (store.state.instance.pleromaChatMessagesAvailable) {
+  if (useInstanceStore().featureSet.pleromaChatMessagesAvailable) {
     routes = routes.concat([
       {
         name: 'chat',

src/components/nav_panel/nav_panel.js

@@ -8,8 +8,9 @@ import { filterNavigation } from 'src/components/navigation/filter.js'
 import { ROOT_ITEMS, TIMELINES } from 'src/components/navigation/navigation.js'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import NavigationPins from 'src/components/navigation/navigation_pins.vue'
-import { useAnnouncementsStore } from 'src/stores/announcements'
+import { useAnnouncementsStore } from 'src/stores/announcements.js'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -115,16 +116,19 @@ const NavPanel = {
       pinnedItems: (store) =>
         new Set(store.prefsStorage.collections.pinnedNavItems),
     }),
+    ...mapPiniaState(useInstanceStore, {
+      bubbleTimeline: (store) =>
+        store.featureSet.localBubbleInstances.length > 0,
+      pleromaChatMessagesAvailable: (store) =>
+        store.featureSet.pleromaChatMessagesAvailable,
+      bookmarkFolders: (store) =>
+        store.featureSet.pleromaBookmarkFoldersAvailable,
+    }),
     ...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,
-      bookmarkFolders: (state) =>
-        state.instance.pleromaBookmarkFoldersAvailable,
-      bubbleTimeline: (state) => state.instance.localBubbleInstances.length > 0,
     }),
     timelinesItems() {
       return filterNavigation(

src/components/navigation/navigation_pins.js

@@ -15,6 +15,7 @@ import StillImage from 'src/components/still-image/still-image.vue'
 import { useAnnouncementsStore } from 'src/stores/announcements'
 import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 import { useListsStore } from 'src/stores/lists'
+import { useInstanceStore } from 'src/stores/instance'
 import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -71,14 +72,15 @@ const NavPanel = {
       pinnedItems: (store) =>
         new Set(store.prefsStorage.collections.pinnedNavItems),
     }),
+    ...mapPiniaState(useInstanceStore, {
+      privateMode: (store) => store.featureSet.private,
+      federating: (store) => store.featureSet.federating,
+      pleromaChatMessagesAvailable: (store) => store.featureSet.pleromaChatMessagesAvailable,
+      bubbleTimelinesSupported: (store) => store.featureSet.localBubbleInstances.length > 0,
+    }),
     ...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,
-      bubbleTimeline: (state) => state.instance.localBubbleInstances.length > 0,
     }),
     pinnedList() {
       if (!this.currentUser) {
@@ -94,7 +96,7 @@ const NavPanel = {
             isFederating: this.federating,
             isPrivate: this.privateMode,
             currentUser: this.currentUser,
-            supportsBubbleTimeline: this.bubbleTimeline,
+            supportsBubbleTimeline: this.bubbleTimelinesSupported,
             supportsBookmarkFolders: this.bookmarks,
           },
         )
@@ -113,7 +115,7 @@ const NavPanel = {
         {
           hasChats: this.pleromaChatMessagesAvailable,
           hasAnnouncements: this.supportsAnnouncements,
-          supportsBubbleTimeline: this.bubbleTimeline,
+          supportsBubbleTimeline: this.bubbleTimelinesSupported,
           supportsBookmarkFolders: this.bookmarks,
           isFederating: this.federating,
           isPrivate: this.privateMode,

src/components/timeline_menu/timeline_menu.js

@@ -1,9 +1,11 @@
+import { mapState as mapPiniaState } from 'pinia'
 import { mapState } from 'vuex'
 
 import { filterNavigation } from 'src/components/navigation/filter.js'
 import { TIMELINES } from 'src/components/navigation/navigation.js'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
+import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
 import { useListsStore } from 'src/stores/lists'
 import BookmarkFoldersMenuContent from '../bookmark_folders_menu/bookmark_folders_menu_content.vue'
@@ -60,11 +62,12 @@ const TimelineMenu = {
     },
     ...mapState({
       currentUser: (state) => state.users.currentUser,
-      privateMode: (state) => state.instance.private,
+    }),
-      federating: (state) => state.instance.federating,
+    ...mapPiniaState(useInstanceStore, {
-      bookmarkFolders: (state) =>
+      bookmarkFolders: (store) => store.featureSet.pleromaBookmarkFoldersAvailable,
-        state.instance.pleromaBookmarkFoldersAvailable,
+      bubbleTimeline: (state) => store.featureSet.localBubbleInstances.length > 0,
-      bubbleTimeline: (state) => state.instance.localBubbleInstances.length > 0,
+      privateMode: (state) => store.private,
+      federating: (state) => store.federating,
     }),
     timelinesList() {
       return filterNavigation(

src/modules/api.js

@@ -1,5 +1,6 @@
 import { Socket } from 'phoenix'
 
+import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useShoutStore } from 'src/stores/shout.js'
 import { WSConnectionStatus } from '../services/api/api.service.js'
@@ -322,7 +323,7 @@ const api = {
     // Bookmark folders
     startFetchingBookmarkFolders(store) {
       if (store.state.fetchers.bookmarkFolders) return
-      if (!store.rootState.instance.pleromaBookmarkFoldersAvailable) return
+      if (!useInstanceStore().featureSet.pleromaBookmarkFoldersAvailable) return
       const fetcher =
         store.state.backendInteractor.startFetchingBookmarkFolders({ store })
       store.commit('addFetcher', { fetcherName: 'bookmarkFolders', fetcher })