3 files changed, 48 insertions, 5 deletions
diff --git a/src/components/navigation/filter.js b/src/components/navigation/filter.js
index e8e77f8f..9b8f43cb 100644
--- a/src/components/navigation/filter.js
+++ b/src/components/navigation/filter.js
@@ -1,4 +1,4 @@
-export const filterNavigation = (list = [], { hasChats, hasAnnouncements, isFederating, isPrivate, currentUser }) => {
+export const filterNavigation = (list = [], { hasChats, hasAnnouncements, isFederating, isPrivate, currentUser, supportsBookmarkFolders }) => {
   return list.filter(({ criteria, anon, anonRoute }) => {
     const set = new Set(criteria || [])
     if (!isFederating && set.has('federating')) return false
@@ -7,6 +7,7 @@ export const filterNavigation = (list = [], { hasChats, hasAnnouncements, isFede
     if ((!currentUser || !currentUser.locked) && set.has('lockedUser')) return false
     if (!hasChats && set.has('chats')) return false
     if (!hasAnnouncements && set.has('announcements')) return false
+    if (supportsBookmarkFolders && set.has('!supportsBookmarkFolders')) return false
     return true
   })
 }
@@ -17,3 +18,12 @@ export const getListEntries = state => state.lists.allLists.map(list => ({
   labelRaw: list.title,
   iconLetter: list.title[0]
 }))
+
+export const getBookmarkFolderEntries = state => state.bookmarkFolders.allFolders.map(folder => ({
+  name: 'bookmark-folder-' + folder.id,
+  routeObject: { name: 'bookmark-folder', params: { id: folder.id } },
+  labelRaw: folder.name,
+  iconEmoji: folder.emoji,
+  iconEmojiUrl: folder.emoji_url,
+  iconLetter: folder.name[0]
+}))
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
index face430e..9fc264ba 100644
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@@ -32,7 +32,8 @@ export const TIMELINES = {
   bookmarks: {
     route: 'bookmarks',
     icon: 'bookmark',
-    label: 'nav.bookmarks'
+    label: 'nav.bookmarks',
+    criteria: ['!supportsBookmarkFolders']
   },
   favorites: {
     routeObject: { name: 'user-profile', query: { tab: 'favorites' } },
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 4ea54ee3..024ee314 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -22,11 +22,25 @@
             :icon="item.icon"
           />
         </span>
+        <img
+          v-if="item.iconEmojiUrl"
+          class="menu-icon iconEmoji iconEmoji-image"
+          :src="item.iconEmojiUrl"
+          :alt="item.iconEmoji"
+          :title="item.iconEmoji"
+        >
         <span
-          v-if="item.iconLetter"
-          class="icon iconLetter fa-scale-110 menu-icon"
-        >{{ item.iconLetter }}
+          v-else-if="item.iconEmoji"
+          class="menu-icon iconEmoji"
+        >
+          <span>
+            {{ item.iconEmoji }}
+          </span>
         </span>
+        <span
+          v-else-if="item.iconLetter"
+          class="icon iconLetter fa-scale-110 menu-icon"
+        >{{ item.iconLetter }}</span>
         <span class="label">
           {{ item.labelRaw || $t(item.label) }}
         </span>
@@ -110,5 +124,23 @@
   .badge {
     margin: 0 var(--__horizontal-gap);
   }
+
+  .iconEmoji {
+    display: inline-block;
+    text-align: center;
+    object-fit: contain;
+    vertical-align: middle;
+    height: var(--__line-height);
+    width: var(--__line-height);
+
+    > span {
+      font-size: 1.5rem;
+    }
+  }
+
+  img.iconEmoji {
+    padding: 0.25rem;
+    box-sizing: border-box;
+  }
 }
 </style>