From 031f8e65e645d750af3124ac672a7adc6d219a29 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Jan 2025 13:17:16 +0200
Subject: [PATCH] fix bookmark folders not being pinnable

---
 .../bookmark_folders_menu_content.js               |  3 +++
 .../bookmark_folders_menu_content.vue              |  2 ++
 src/components/nav_panel/nav_panel.vue             |  1 +
 src/components/navigation/filter.js                |  2 +-
 src/components/navigation/navigation_pins.js       |  9 ++++++++-
 src/components/navigation/navigation_pins.vue      | 14 +++++++++++++-
 6 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
index d5f82f466..43db7df32 100644
--- a/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
+++ b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
@@ -3,6 +3,9 @@ import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import { getBookmarkFolderEntries } from 'src/components/navigation/filter.js'
 
 export const BookmarkFoldersMenuContent = {
+  props: [
+    'showPin'
+  ],
   components: {
     NavigationEntry
   },
diff --git a/src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue
index d603cd010..197f79654 100644
--- a/src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue
+++ b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue
@@ -7,10 +7,12 @@
         label: 'nav.all_bookmarks',
         icon: 'bookmark'
       }"
+      :show-pin="showPin"
     />
     <NavigationEntry
       v-for="item in folders"
       :key="item.id"
+      :show-pin="showPin"
       :item="item"
     />
   </ul>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index f21b43e8b..10903bcae 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -113,6 +113,7 @@
           :class="{ '-expanded': showBookmarkFolders }"
         >
           <BookmarkFoldersMenuContent
+            :show-pin="editMode || forceEditMode"
             class="timelines"
           />
         </div>
diff --git a/src/components/navigation/filter.js b/src/components/navigation/filter.js
index 9b8f43cba..01ea7756f 100644
--- a/src/components/navigation/filter.js
+++ b/src/components/navigation/filter.js
@@ -24,6 +24,6 @@ export const getBookmarkFolderEntries = state => state.bookmarkFolders.allFolder
   routeObject: { name: 'bookmark-folder', params: { id: folder.id } },
   labelRaw: folder.name,
   iconEmoji: folder.emoji,
-  iconEmojiUrl: folder.emoji_url,
+  iconEmojiUrl: console.log(folder) || folder.emoji_url,
   iconLetter: folder.name[0]
 }))
diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
index 86c33d1fb..fa89b7599 100644
--- a/src/components/navigation/navigation_pins.js
+++ b/src/components/navigation/navigation_pins.js
@@ -1,6 +1,8 @@
 import { mapState } from 'vuex'
 import { TIMELINES, ROOT_ITEMS, routeTo } from 'src/components/navigation/navigation.js'
-import { getListEntries, filterNavigation } from 'src/components/navigation/filter.js'
+import { getBookmarkFolderEntries, getListEntries, filterNavigation } from 'src/components/navigation/filter.js'
+
+import StillImage from 'src/components/still-image/still-image.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -34,12 +36,16 @@ const NavPanel = {
       return routeTo(item, this.currentUser)
     }
   },
+  components: {
+    StillImage
+  },
   computed: {
     getters () {
       return this.$store.getters
     },
     ...mapState({
       lists: getListEntries,
+      bookmarks: getBookmarkFolderEntries,
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,
       privateMode: state => state.instance.private,
@@ -70,6 +76,7 @@ const NavPanel = {
             .filter(([k]) => this.pinnedItems.has(k))
             .map(([k, v]) => ({ ...v, name: k })),
           ...this.lists.filter((k) => this.pinnedItems.has(k.name)),
+          ...this.bookmarks.filter((k) => this.pinnedItems.has(k.name)),
           ...Object
             .entries({ ...ROOT_ITEMS })
             .filter(([k]) => this.pinnedItems.has(k))
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 37351b918..a9d11da87 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -14,9 +14,14 @@
         :icon="item.icon"
       />
       <span
-        v-if="item.iconLetter"
+        v-if="item.iconLetter && !item.iconEmoji"
         class="iconLetter fa-scale-110 fa-old-padding"
       >{{ item.iconLetter }}</span>
+      <StillImage
+        v-if="item.iconEmoji"
+        class="bookmark-emoji"
+        :src="item.iconEmojiUrl"
+      />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
         class="badge -dot"
@@ -52,6 +57,13 @@
     box-sizing: border-box;
     height: 100%;
 
+    .bookmark-emoji {
+      height: 100%;
+      box-sizing: border-box;
+      padding: 0.5em;
+    }
+
+    & .bookmark-emoji,
     & .svg-inline--fa,
     & .iconLetter {
       margin: 0;