From a5689464d0829ae038fbba72f3ab96afd917bd8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 26 Sep 2024 09:54:02 +0200
Subject: [PATCH] Add 'all bookmarks' link to bookmark folders list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../bookmark_folder_card.js                   |  5 ++-
 .../bookmark_folder_card.vue                  | 42 +++++++++++++++----
 .../bookmark_folders/bookmark_folders.vue     |  4 ++
 3 files changed, 40 insertions(+), 11 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;
-  }
-
-  .iconLetter {
+    display: inline-block;
     height: 2.5rem;
     width: 2.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .icon,
+  .iconLetter {
     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
@@ -12,6 +12,10 @@
       </router-link>
     </div>
     <div class="panel-body">
+      <BookmarkFolderCard
+        :all-bookmarks="true"
+        class="list-item"
+      />
       <BookmarkFolderCard
         v-for="folder in bookmarkFolders.slice().reverse()"
         :key="folder"