Add 'all bookmarks' link to bookmark folders list

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

3 files changed, 39 insertions, 10 deletions

diff --git a/src/components/bookmark_folder_card/bookmark_folder_card.js b/src/components/bookmark_folder_card/bookmark_folder_card.js
index 7a7206aa..bf274d9d 100644
--- a/src/components/bookmark_folder_card/bookmark_folder_card.js
+++ b/src/components/bookmark_folder_card/bookmark_folder_card.js
@@ -9,11 +9,12 @@ library.add(
 
 const BookmarkFolderCard = {
   props: [
-    'folder'
+    'folder',
+    'allBookmarks'
   ],
   computed: {
     firstLetter () {
-      return this.folder.name[0]
+      return this.folder ? this.folder.name[0] : null
     }
   }
 }
diff --git a/src/components/bookmark_folder_card/bookmark_folder_card.vue b/src/components/bookmark_folder_card/bookmark_folder_card.vue
index 50863071..9e8bef61 100644
--- a/src/components/bookmark_folder_card/bookmark_folder_card.vue
+++ b/src/components/bookmark_folder_card/bookmark_folder_card.vue
@@ -1,5 +1,25 @@
 <template>
-  <div class="bookmark-folder-card">
+  <div
+    v-if="allBookmarks"
+    class="bookmark-folder-card"
+  >
+    <router-link
+      :to="{ name: 'bookmarks' }"
+      class="bookmark-folder-name"
+    >
+      <span class="icon">
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 menu-icon"
+          icon="bookmark"
+        />
+      </span>{{ $t('nav.all_bookmarks') }}
+    </router-link>
+  </div>
+  <div
+    v-else
+    class="bookmark-folder-card"
+  >
     <router-link
       :to="{ name: 'bookmark-folder', params: { id: folder.id } }"
       class="bookmark-folder-name"
@@ -44,27 +64,31 @@
   align-items: center;
 }
 
-.bookmark-folder-name {
+a.bookmark-folder-name {
+  display: flex;
+  align-items: center;
   flex-grow: 1;
 
+  .icon,
   .iconLetter,
   .iconEmoji {
-    margin-right: 0.5em;
+    display: inline-block;
+    height: 2.5rem;
+    width: 2.5rem;
+    margin-right: 0.5rem;
   }
 
+  .icon,
   .iconLetter {
-    height: 2.5rem;
-    width: 2.5rem;
     font-size: 1.5rem;
+    line-height: 2.5rem;
+    text-align: center;
   }
 
   .iconEmoji {
-    display: inline-block;
     text-align: center;
     object-fit: contain;
     vertical-align: middle;
-    height: 2.5em;
-    width: 2.5em;
 
     > span {
       font-size: 1.5rem;
diff --git a/src/components/bookmark_folders/bookmark_folders.vue b/src/components/bookmark_folders/bookmark_folders.vue
index 11ec856d..d92e95df 100644
--- a/src/components/bookmark_folders/bookmark_folders.vue
+++ b/src/components/bookmark_folders/bookmark_folders.vue
@@ -13,6 +13,10 @@
     </div>
     <div class="panel-body">
       <BookmarkFolderCard
+        :all-bookmarks="true"
+        class="list-item"
+      />
+      <BookmarkFolderCard
         v-for="folder in bookmarkFolders.slice().reverse()"
         :key="folder"
         :folder="folder"