Merge remote-tracking branch 'origin/develop' into migrate/vuex-to-pinia

src/components/nav_panel/nav_panel.js

@@ -1,3 +1,4 @@
+import BookmarkFoldersMenuContent from 'src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue'
 import ListsMenuContent from 'src/components/lists_menu/lists_menu_content.vue'
 import { mapState, mapGetters } from 'vuex'
 import { mapState as mapPiniaState } from 'pinia'
@@ -20,7 +21,8 @@ import {
   faInfoCircle,
   faStream,
   faList,
-  faBullhorn
+  faBullhorn,
+  faFilePen
 } from '@fortawesome/free-solid-svg-icons'
 import { useAnnouncementsStore } from '../../stores/announcements'
 
@@ -36,13 +38,15 @@ library.add(
   faInfoCircle,
   faStream,
   faList,
-  faBullhorn
+  faBullhorn,
+  faFilePen
 )
 const NavPanel = {
   props: ['forceExpand', 'forceEditMode'],
   created () {
   },
   components: {
+    BookmarkFoldersMenuContent,
     ListsMenuContent,
     NavigationEntry,
     NavigationPins,
@@ -53,6 +57,7 @@ const NavPanel = {
       editMode: false,
       showTimelines: false,
       showLists: false,
+      showBookmarkFolders: false,
       timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
       rootList: Object.entries(ROOT_ITEMS).map(([k, v]) => ({ ...v, name: k }))
     }
@@ -64,6 +69,9 @@ const NavPanel = {
     toggleLists () {
       this.showLists = !this.showLists
     },
+    toggleBookmarkFolders () {
+      this.showBookmarkFolders = !this.showBookmarkFolders
+    },
     toggleEditMode () {
       this.editMode = !this.editMode
     },
@@ -95,7 +103,8 @@ const NavPanel = {
       federating: state => state.instance.federating,
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
       pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems),
-      collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav
+      collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav,
+      bookmarkFolders: state => state.instance.pleromaBookmarkFoldersAvailable
     }),
     timelinesItems () {
       return filterNavigation(
@@ -107,7 +116,8 @@ const NavPanel = {
           hasAnnouncements: this.supportsAnnouncements,
           isFederating: this.federating,
           isPrivate: this.privateMode,
-          currentUser: this.currentUser
+          currentUser: this.currentUser,
+          supportsBookmarkFolders: this.bookmarkFolders
         }
       )
     },
@@ -121,7 +131,8 @@ const NavPanel = {
           hasAnnouncements: this.supportsAnnouncements,
           isFederating: this.federating,
           isPrivate: this.privateMode,
-          currentUser: this.currentUser
+          currentUser: this.currentUser,
+          supportsBookmarkFolders: this.bookmarkFolders
         }
       )
     },

src/components/nav_panel/nav_panel.vue

@@ -37,7 +37,8 @@
         </NavigationEntry>
         <div
           v-show="showTimelines"
-          class="timelines-background"
+          class="timelines-background menu-item-collapsible"
+          :class="{ '-expanded': showTimelines }"
         >
           <div class="timelines">
             <NavigationEntry
@@ -57,12 +58,11 @@
         >
           <router-link
             :title="$t('lists.manage_lists')"
-            class="extra-button"
+            class="button-unstyled extra-button"
             :to="{ name: 'lists' }"
             @click.stop
           >
             <FAIcon
-              class="extra-button"
               fixed-width
               icon="wrench"
             />
@@ -75,13 +75,48 @@
         </NavigationEntry>
         <div
           v-show="showLists"
-          class="timelines-background"
+          class="timelines-background menu-item-collapsible"
+          :class="{ '-expanded': showLists }"
         >
           <ListsMenuContent
             :show-pin="editMode || forceEditMode"
             class="timelines"
           />
         </div>
+        <NavigationEntry
+          v-if="currentUser && bookmarkFolders"
+          :show-pin="false"
+          :item="{ icon: 'bookmark', label: 'nav.bookmarks' }"
+          :aria-expanded="showBookmarkFolders ? 'true' : 'false'"
+          @click="toggleBookmarkFolders"
+        >
+          <router-link
+            :title="$t('bookmarks.manage_bookmark_folders')"
+            class="button-unstyled extra-button"
+            :to="{ name: 'bookmark-folders' }"
+            @click.stop
+          >
+            <FAIcon
+              fixed-width
+              icon="wrench"
+            />
+          </router-link>
+          <FAIcon
+            class="timelines-chevron"
+            fixed-width
+            :icon="showBookmarkFolders ? 'chevron-up' : 'chevron-down'"
+          />
+        </NavigationEntry>
+        <div
+          v-show="showBookmarkFolders"
+          class="timelines-background menu-item-collapsible"
+          :class="{ '-expanded': showBookmarkFolders }"
+        >
+          <BookmarkFoldersMenuContent
+            :show-pin="editMode || forceEditMode"
+            class="timelines"
+          />
+        </div>
         <NavigationEntry
           v-for="item in rootItems"
           :key="item.name"
@@ -91,7 +126,7 @@
         <NavigationEntry
           v-if="!forceEditMode && currentUser"
           :show-pin="false"
-          :item="{ label: editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned'), icon: editMode ? 'check' : 'wrench' }"
+          :item="{ labelRaw: editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned'), icon: editMode ? 'check' : 'wrench' }"
           @click="toggleEditMode"
         />
       </ul>
@@ -102,12 +137,10 @@
 <script src="./nav_panel.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .NavPanel {
   .panel {
     overflow: hidden;
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
   }
 
   ul {
@@ -116,56 +149,14 @@
     padding: 0;
   }
 
-  li {
-    position: relative;
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-  }
-
-  > li {
-    &:first-child .menu-item {
-      border-top-right-radius: $fallback--panelRadius;
-      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-top-left-radius: $fallback--panelRadius;
-      border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
-    }
-
-    &:last-child .menu-item {
-      border-bottom-right-radius: $fallback--panelRadius;
-      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-bottom-left-radius: $fallback--panelRadius;
-      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
-    }
-  }
-
-  li:last-child {
-    border: none;
-  }
-
   .navigation-chevron {
     margin-left: 0.8em;
     margin-right: 0.8em;
     font-size: 1.1em;
   }
 
-  .timelines-chevron {
-    margin-left: 0.8em;
-    font-size: 1.1em;
-  }
-
   .timelines-background {
     padding: 0 0 0 0.6em;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-  }
-
-  .timelines {
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
   }
 
   .nav-panel-heading {