fix some navigation issues

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 { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+import { useAnnouncementsStore } from 'src/stores/announcements.js'
+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,
-      bookmarkFolders: (state) =>
-        state.instance.pleromaBookmarkFoldersAvailable,
-      bubbleTimeline: (state) => state.instance.localBubbleInstances.length > 0,
+    }),
+    ...mapPiniaState(useInstanceStore, {
+      bookmarkFolders: (store) => store.featureSet.pleromaBookmarkFoldersAvailable,
+      bubbleTimeline: (state) => store.featureSet.localBubbleInstances.length > 0,
+      privateMode: (state) => store.private,
+      federating: (state) => store.federating,
     }),
     timelinesList() {
       return filterNavigation(