Bookmark folder editing

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

2 files changed, 55 insertions, 3 deletions

diff --git a/src/components/bookmark_folder_card/bookmark_folder_card.js b/src/components/bookmark_folder_card/bookmark_folder_card.js
index 9df28e19..7a7206aa 100644
--- a/src/components/bookmark_folder_card/bookmark_folder_card.js
+++ b/src/components/bookmark_folder_card/bookmark_folder_card.js
@@ -10,7 +10,12 @@ library.add(
 const BookmarkFolderCard = {
   props: [
     'folder'
-  ]
+  ],
+  computed: {
+    firstLetter () {
+      return this.folder.name[0]
+    }
+  }
 }
 
 export default BookmarkFolderCard
diff --git a/src/components/bookmark_folder_card/bookmark_folder_card.vue b/src/components/bookmark_folder_card/bookmark_folder_card.vue
index 10875e78..b773c9fb 100644
--- a/src/components/bookmark_folder_card/bookmark_folder_card.vue
+++ b/src/components/bookmark_folder_card/bookmark_folder_card.vue
@@ -4,10 +4,28 @@
       :to="{ name: 'bookmark-folder', params: { id: folder.id } }"
       class="bookmark-folder-name"
     >
-      {{ folder.name }}
+      <img
+        v-if="folder.emoji_url"
+        class="iconEmoji iconEmoji-image"
+        :src="folder.emoji_url"
+        :alt="folder.emoji"
+        :title="folder.emoji"
+      >
+      <span
+        v-else-if="folder.emoji"
+        class="iconEmoji"
+      >
+        <span>
+          {{ folder.emoji }}
+        </span>
+      </span>
+      <span
+        v-else-if="firstLetter"
+        class="icon iconLetter fa-scale-110"
+      >{{ firstLetter }}</span>{{ folder.name }}
     </router-link>
     <router-link
-      :to="{ name: 'bookmark-folder' /* -edit' */, params: { id: folder.id } }"
+      :to="{ name: 'bookmark-folder-edit', params: { id: folder.id } }"
       class="button-folder-edit"
     >
       <FAIcon
@@ -27,6 +45,35 @@
 
 .bookmark-folder-name {
   flex-grow: 1;
+
+  .iconLetter, .iconEmoji {
+    margin-right: 0.5em;
+  }
+
+  .iconLetter {
+    height: 2.5rem;
+    width: 2.5rem;
+    font-size: 1.5rem;
+  }
+
+  .iconEmoji {
+    display: inline-block;
+    text-align: center;
+    object-fit: contain;
+    vertical-align: middle;
+    height: 2.5em;
+    width: 2.5em;
+
+    > span {
+      font-size: 1.5rem;
+      line-height: 2.5rem;
+    }
+  }
+
+  img.iconEmoji {
+    padding: 0.25em;
+    box-sizing: border-box;
+  }
 }
 
 .bookmark-folder-name,