From 9e45228823cd0fa7eb9388b0eb7780b9609edf66 Mon Sep 17 00:00:00 2001
From: marcin mikołajczak <git@mkljczk.pl>
Date: Mon, 23 Sep 2024 23:10:32 +0200
Subject: Bookmark folders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/services/api/api.service.js | 52 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 50 insertions(+), 2 deletions(-)

(limited to 'src/services/api/api.service.js')

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index fa417193..c22042aa 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -110,6 +110,8 @@ const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcemen
 const PLEROMA_SCROBBLES_URL = id => `/api/v1/pleroma/accounts/${id}/scrobbles`
 const PLEROMA_STATUS_QUOTES_URL = id => `/api/v1/pleroma/statuses/${id}/quotes`
 const PLEROMA_USER_FAVORITES_TIMELINE_URL = id => `/api/v1/pleroma/accounts/${id}/favourites`
+const PLEROMA_BOOKMARK_FOLDERS_URL = '/api/v1/pleroma/bookmark_folders'
+const PLEROMA_BOOKMARK_FOLDER_URL = id => `/api/v1/pleroma/bookmark_folders/${id}`
 
 const PLEROMA_ADMIN_CONFIG_URL = '/api/pleroma/admin/config'
 const PLEROMA_ADMIN_DESCRIPTIONS_URL = '/api/pleroma/admin/config/descriptions'
@@ -690,7 +692,8 @@ const fetchTimeline = ({
   tag = false,
   withMuted = false,
   replyVisibility = 'all',
-  includeTypes = []
+  includeTypes = [],
+  bookmarkFolderId = false
 }) => {
   const timelineUrls = {
     public: MASTODON_PUBLIC_TIMELINE,
@@ -760,6 +763,9 @@ const fetchTimeline = ({
       params.push(['include_types[]', type])
     })
   }
+  if (timeline === 'bookmarks' && bookmarkFolderId) {
+    params.push(['folder_id', bookmarkFolderId])
+  }
 
   params.push(['limit', 20])
 
@@ -1893,6 +1899,44 @@ const deleteEmojiFile = ({ packName, shortcode }) => {
   return fetch(`${PLEROMA_EMOJI_UPDATE_FILE_URL(packName)}&shortcode=${shortcode}`, { method: 'DELETE' })
 }
 
+const fetchBookmarkFolders = ({ credentials }) => {
+  const url = PLEROMA_BOOKMARK_FOLDERS_URL
+  return fetch(url, { headers: authHeaders(credentials) })
+    .then((data) => data.json())
+}
+
+const createBookmarkFolder = ({ name, emoji, credentials }) => {
+  const url = PLEROMA_BOOKMARK_FOLDERS_URL
+  const headers = authHeaders(credentials)
+  headers['Content-Type'] = 'application/json'
+
+  return fetch(url, {
+    headers,
+    method: 'POST',
+    body: JSON.stringify({ name, emoji })
+  }).then((data) => data.json())
+}
+
+const updateBookmarkFolder = ({ folderId, name, emoji, credentials }) => {
+  const url = PLEROMA_BOOKMARK_FOLDER_URL(folderId)
+  const headers = authHeaders(credentials)
+  headers['Content-Type'] = 'application/json'
+
+  return fetch(url, {
+    headers,
+    method: 'PUT',
+    body: JSON.stringify({ name, emoji })
+  })
+}
+
+const deleteBookmarkFolder = ({ folderId, credentials }) => {
+  const url = PLEROMA_BOOKMARK_FOLDER_URL(folderId)
+  return fetch(url, {
+    method: 'DELETE',
+    headers: authHeaders(credentials)
+  })
+}
+
 const apiService = {
   verifyCredentials,
   fetchTimeline,
@@ -2023,7 +2067,11 @@ const apiService = {
   updateEmojiFile,
   deleteEmojiFile,
   listRemoteEmojiPacks,
-  downloadRemoteEmojiPack
+  downloadRemoteEmojiPack,
+  fetchBookmarkFolders,
+  createBookmarkFolder,
+  updateBookmarkFolder,
+  deleteBookmarkFolder
 }
 
 export default apiService
-- 
cgit v1.2.3-70-g09d2


From 89fbaa159f29a7d175a5323eded29e20c9f3a752 Mon Sep 17 00:00:00 2001
From: marcin mikołajczak <git@mkljczk.pl>
Date: Tue, 24 Sep 2024 00:05:33 +0200
Subject: Allow adding bookmarks to folders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/extra_buttons/extra_buttons.js      |  7 +++-
 src/components/extra_buttons/extra_buttons.vue     |  4 +++
 .../status_bookmark_folder_menu.js                 | 40 ++++++++++++++++++++++
 .../status_bookmark_folder_menu.vue                | 38 ++++++++++++++++++++
 src/i18n/en.json                                   |  3 +-
 src/modules/statuses.js                            |  4 ++-
 src/services/api/api.service.js                    |  7 ++--
 .../entity_normalizer/entity_normalizer.service.js |  1 +
 8 files changed, 99 insertions(+), 5 deletions(-)
 create mode 100644 src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
 create mode 100644 src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue

(limited to 'src/services/api/api.service.js')

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index e2c88ceb..b3e1cb2b 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,6 +1,7 @@
 import Popover from '../popover/popover.vue'
 import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+import StatusBookmarkFolderMenu from '../status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisH,
@@ -36,7 +37,8 @@ const ExtraButtons = {
   props: ['status'],
   components: {
     Popover,
-    ConfirmModal
+    ConfirmModal,
+    StatusBookmarkFolderMenu
   },
   data () {
     return {
@@ -145,6 +147,9 @@ const ExtraButtons = {
     canBookmark () {
       return !!this.currentUser
     },
+    bookmarkFolders () {
+      return this.$store.state.instance.pleromaBookmarkFoldersAvailable
+    },
     statusLink () {
       return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
     },
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 7b38d974..c030de0c 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -87,6 +87,10 @@
               icon="bookmark"
             /><span>{{ $t("status.unbookmark") }}</span>
           </button>
+          <StatusBookmarkFolderMenu
+            v-if="status.bookmarked && bookmarkFolders"
+            :status="status"
+          />
         </template>
         <button
           v-if="ownStatus && editingAvailable"
diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
new file mode 100644
index 00000000..16b414ac
--- /dev/null
+++ b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
@@ -0,0 +1,40 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { mapState } from 'vuex'
+
+import DialogModal from '../dialog_modal/dialog_modal.vue'
+import Popover from '../popover/popover.vue'
+
+library.add(faChevronRight)
+
+const StatusBookmarkFolderMenu = {
+  props: [
+    'status'
+  ],
+  data () {
+    return {}
+  },
+  components: {
+    DialogModal,
+    Popover
+  },
+  computed: {
+    ...mapState({
+      folders: state => state.bookmarkFolders.allFolders
+    }),
+    folderId () {
+      return this.status.bookmark_folder_id
+    }
+  },
+  methods: {
+    toggleFolder (id) {
+      const value = id === this.folderId ? null : id
+
+      this.$store.dispatch('bookmark', { id: this.status.id, bookmark_folder_id: value })
+        .then(() => this.$emit('onSuccess'))
+        .catch(err => this.$emit('onError', err.error.error))
+    }
+  }
+}
+
+export default StatusBookmarkFolderMenu
diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
new file mode 100644
index 00000000..48b7fe70
--- /dev/null
+++ b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="StatusBookmarkFolderMenu">
+    <Popover
+      trigger="hover"
+      placement="left"
+      remove-padding
+    >
+      <template #content>
+        <div class="dropdown-menu">
+          <button
+            v-for="folder in folders"
+            :key="folder.id"
+            class="menu-item dropdown-item"
+            @click="toggleFolder(folder.id)"
+          >
+            <span
+              class="input menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': status.bookmark_folder_id == folder.id }"
+            />
+            {{ folder.name }}
+          </button>
+        </div>
+      </template>
+      <template #trigger>
+        <button class="menu-item dropdown-item -has-submenu">
+          {{ $t('bookmark_folders.select_folder') }}
+          <FAIcon
+            class="chevron-icon"
+            size="lg"
+            icon="chevron-right"
+          />
+        </button>
+      </template>
+    </Popover>
+  </div>
+</template>
+
+<script src="./status_bookmark_folder_menu.js"></script>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8b5fb98d..9d10b560 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1409,6 +1409,7 @@
     "tooltip": "This domain contains non-ascii characters."
   },
   "bookmark_folders": {
-    "new": "New Folder"
+    "new": "New Folder",
+    "select_folder": "Select bookmark folder"
   }
 }
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 462def22..5822c533 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -385,10 +385,12 @@ export const mutations = {
   setBookmarked (state, { status, value }) {
     const newStatus = state.allStatusesObject[status.id]
     newStatus.bookmarked = value
+    newStatus.bookmark_folder_id = status.bookmark_folder_id
   },
   setBookmarkedConfirm (state, { status }) {
     const newStatus = state.allStatusesObject[status.id]
     newStatus.bookmarked = status.bookmarked
+    if (status.pleroma) newStatus.bookmark_folder_id = status.pleroma.bookmark_folder
   },
   setDeleted (state, { status }) {
     const newStatus = state.allStatusesObject[status.id]
@@ -569,7 +571,7 @@ const statuses = {
     },
     bookmark ({ rootState, commit }, status) {
       commit('setBookmarked', { status, value: true })
-      rootState.api.backendInteractor.bookmarkStatus({ id: status.id })
+      rootState.api.backendInteractor.bookmarkStatus({ id: status.id, folder_id: status.bookmark_folder_id })
         .then(status => {
           commit('setBookmarkedConfirm', { status })
         })
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index c22042aa..43896ae7 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -835,11 +835,14 @@ const unretweet = ({ id, credentials }) => {
     .then((data) => parseStatus(data))
 }
 
-const bookmarkStatus = ({ id, credentials }) => {
+const bookmarkStatus = ({ id, credentials, ...options }) => {
   return promisedRequest({
     url: MASTODON_BOOKMARK_STATUS_URL(id),
     headers: authHeaders(credentials),
-    method: 'POST'
+    method: 'POST',
+    payload: {
+      folder_id: options.folder_id
+    }
   })
 }
 
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index e41e7125..550543e0 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -332,6 +332,7 @@ export const parseStatus = (data) => {
       output.quote_url = pleroma.quote_url
       output.quote_visible = pleroma.quote_visible
       output.quotes_count = pleroma.quotes_count
+      output.bookmark_folder_id = pleroma.bookmark_folder
     } else {
       output.text = data.content
       output.summary = data.spoiler_text
-- 
cgit v1.2.3-70-g09d2


From 2b6de423d5a02413924f18910b1ce3538a5a1625 Mon Sep 17 00:00:00 2001
From: marcin mikołajczak <git@mkljczk.pl>
Date: Tue, 24 Sep 2024 18:15:49 +0200
Subject: Bookmark folder editing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/boot/routes.js                                 |   5 +-
 .../bookmark_folder_card/bookmark_folder_card.js   |   7 +-
 .../bookmark_folder_card/bookmark_folder_card.vue  |  51 ++++++++-
 .../bookmark_folder_edit/bookmark_folder_edit.js   |  65 +++++++++++
 .../bookmark_folder_edit/bookmark_folder_edit.vue  | 125 +++++++++++++++++++++
 .../bookmark_folders/bookmark_folders.vue          |   2 +-
 src/components/navigation/navigation_entry.vue     |   5 +
 src/i18n/en.json                                   |  10 +-
 src/modules/bookmark_folders.js                    |   6 +-
 src/services/api/api.service.js                    |   4 +-
 10 files changed, 269 insertions(+), 11 deletions(-)
 create mode 100644 src/components/bookmark_folder_edit/bookmark_folder_edit.js
 create mode 100644 src/components/bookmark_folder_edit/bookmark_folder_edit.vue

(limited to 'src/services/api/api.service.js')

diff --git a/src/boot/routes.js b/src/boot/routes.js
index ff93bb51..f87b2ec8 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -27,6 +27,7 @@ import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
 import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
 import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
+import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -89,7 +90,9 @@ export default (store) => {
     { name: 'lists-new', path: '/lists/new', component: ListsEdit },
     { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute },
     { name: 'bookmark-folders', path: '/bookmark_folders', component: BookmarkFolders },
-    { name: 'bookmark-folder', path: '/bookmarks/:id', component: BookmarkTimeline }
+    { name: 'bookmark-folder-new', path: '/bookmarks/new-folder', component: BookmarkFolderEdit },
+    { name: 'bookmark-folder', path: '/bookmarks/:id', component: BookmarkTimeline },
+    { name: 'bookmark-folder-edit', path: '/bookmarks/:id/edit', component: BookmarkFolderEdit }
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {
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,
diff --git a/src/components/bookmark_folder_edit/bookmark_folder_edit.js b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
new file mode 100644
index 00000000..8c5d3cfd
--- /dev/null
+++ b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
@@ -0,0 +1,65 @@
+import apiService from '../../services/api/api.service'
+
+const BookmarkFolderEdit = {
+  data () {
+    return {
+      name: '',
+      nameDraft: '',
+      emoji: '',
+      emojiUrl: null,
+      emojiDraft: '',
+      emojiUrlDraft: null,
+      reallyDelete: false
+    }
+  },
+  created () {
+    if (!this.id) return
+    const credentials = this.$store.state.users.currentUser.credentials
+    apiService.fetchBookmarkFolders({ credentials })
+      .then((folders) => {
+        const folder = folders.find(folder => folder.id === this.id)
+        if (!folder) return
+
+        this.nameDraft = this.name = folder.name
+        this.emojiDraft = this.emoji = folder.emoji
+        this.emojiUrlDraft = this.emojiUrl = folder.emoji_url
+      })
+  },
+  computed: {
+    id () {
+      return this.$route.params.id
+    }
+  },
+  methods: {
+    updateFolder () {
+      this.$store.dispatch('setBookmarkFolder', { folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
+        .then((folder) => {
+          this.nameDraft = this.name = folder.name
+          this.emojiDraft = this.emoji = folder.emoji
+          this.emojiUrlDraft = this.emojiUrl = folder.emoji_url
+        })
+    },
+    createFolder () {
+      this.$store.dispatch('createBookmarkFolder', { name: this.nameDraft, emoji: this.emojiDraft })
+        .then((folder) => {
+          return folder.id
+        })
+        .then((folderId) => {
+          this.$router.push({ name: 'bookmark-folders' })
+        })
+        .catch((e) => {
+          this.$store.dispatch('pushGlobalNotice', {
+            messageKey: 'bookmark_folders.error',
+            messageArgs: [e.message],
+            level: 'error'
+          })
+        })
+    },
+    deleteFolder () {
+      this.$store.dispatch('deleteBookmarkFolder', { folderId: this.id })
+      this.$router.push({ name: 'bookmark-folders' })
+    }
+  }
+}
+
+export default BookmarkFolderEdit
diff --git a/src/components/bookmark_folder_edit/bookmark_folder_edit.vue b/src/components/bookmark_folder_edit/bookmark_folder_edit.vue
new file mode 100644
index 00000000..30bbde09
--- /dev/null
+++ b/src/components/bookmark_folder_edit/bookmark_folder_edit.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="panel-default panel BookmarkFolderEdit">
+    <div
+      ref="header"
+      class="panel-heading folder-edit-heading"
+    >
+      <button
+        class="button-unstyled go-back-button"
+        @click="$router.back"
+      >
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
+      </button>
+      <div class="title">
+        <i18n-t
+          v-if="id"
+          keypath="bookmark_folders.editing_folder"
+        >
+          <template #folderName>
+            {{ name }}
+          </template>
+        </i18n-t>
+        <i18n-t
+          v-else
+          keypath="bookmark_folders.creating_folder"
+        />
+      </div>
+    </div>
+    <div class="panel-body">
+      <div class="input-wrap">
+        <label for="folder-edit-title">{{ $t('bookmark_folders.name') }}</label>
+        {{ ' ' }}
+        <input
+          id="folder-edit-title"
+          ref="name"
+          v-model="nameDraft"
+          class="input"
+        >
+        <button
+          v-if="id"
+          class="btn button-default follow-button"
+          @click="updateFolder"
+        >
+          {{ $t('bookmark_folders.update_folder') }}
+        </button>
+      </div>
+    </div>
+    <div class="panel-footer">
+      <span class="spacer" />
+      <button
+        v-if="!id"
+        class="btn button-default footer-button"
+        @click="createFolder"
+      >
+        {{ $t('bookmark_folders.create') }}
+      </button>
+      <button
+        v-else-if="!reallyDelete"
+        class="btn button-default footer-button"
+        @click="reallyDelete = true"
+      >
+        {{ $t('bookmark_folders.delete') }}
+      </button>
+      <template v-else>
+        {{ $t('bookmark_folders.really_delete') }}
+        <button
+          class="btn button-default footer-button"
+          @click="deleteFolder"
+        >
+          {{ $t('general.yes') }}
+        </button>
+        <button
+          class="btn button-default footer-button"
+          @click="reallyDelete = false"
+        >
+          {{ $t('general.no') }}
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script src="./bookmark_folder_edit.js"></script>
+
+<style lang="scss">
+.BookmarkFolderEdit {
+  --panel-body-padding: 0.5em;
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .folder-edit-heading {
+    grid-template-columns: auto minmax(50%, 1fr);
+  }
+
+  .panel-body {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .go-back-button {
+    text-align: center;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
+  }
+
+  .btn {
+    margin: 0 0.5em;
+  }
+
+  .panel-footer {
+    grid-template-columns: minmax(10%, 1fr);
+
+    .footer-button {
+      min-width: 9em;
+    }
+  }
+}
+</style>
diff --git a/src/components/bookmark_folders/bookmark_folders.vue b/src/components/bookmark_folders/bookmark_folders.vue
index 733e4cab..65b1a11b 100644
--- a/src/components/bookmark_folders/bookmark_folders.vue
+++ b/src/components/bookmark_folders/bookmark_folders.vue
@@ -5,7 +5,7 @@
         {{ $t('nav.bookmark_folders') }}
       </div>
       <router-link
-        :to="{ name: 'bookmark-folders' /* 'new' */ }"
+        :to="{ name: 'bookmark-folder-new' }"
         class="button-default btn new-folder-button"
       >
         {{ $t("bookmark_folders.new") }}
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 728de1be..024ee314 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -137,5 +137,10 @@
       font-size: 1.5rem;
     }
   }
+
+  img.iconEmoji {
+    padding: 0.25rem;
+    box-sizing: border-box;
+  }
 }
 </style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 9d10b560..5a9bee32 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1409,7 +1409,15 @@
     "tooltip": "This domain contains non-ascii characters."
   },
   "bookmark_folders": {
+    "create": "Create folder",
+    "creating_folder": "Creating bookmark folder",
+    "delete": "Delete folder",
+    "editing_folder": "Editing folder {folderName}",
+    "error": "Error manipulating bookmark folders: {0}",
+    "name": "Folder name",
     "new": "New Folder",
-    "select_folder": "Select bookmark folder"
+    "really_delete": "Do you really want to delete the folder?",
+    "select_folder": "Select bookmark folder",
+    "update_folder": "Save changes"
   }
 }
diff --git a/src/modules/bookmark_folders.js b/src/modules/bookmark_folders.js
index e5f25791..5dde58a7 100644
--- a/src/modules/bookmark_folders.js
+++ b/src/modules/bookmark_folders.js
@@ -8,10 +8,10 @@ export const mutations = {
   setBookmarkFolders (state, value) {
     state.allFolders = value
   },
-  setBookmarkFolder (state, { folderId, name, emoji, emojiUrl }) {
-    const entry = find(state.allFolders, { id: name })
+  setBookmarkFolder (state, { id, name, emoji, emojiUrl }) {
+    const entry = find(state.allFolders, { id })
     if (!entry) {
-      state.allFolders.push({ id: folderId, name, emoji, emojiUrl })
+      state.allFolders.push({ id, name, emoji, emojiUrl })
     } else {
       entry.name = name
       entry.emoji = emoji
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 43896ae7..94c12360 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -1927,9 +1927,9 @@ const updateBookmarkFolder = ({ folderId, name, emoji, credentials }) => {
 
   return fetch(url, {
     headers,
-    method: 'PUT',
+    method: 'PATCH',
     body: JSON.stringify({ name, emoji })
-  })
+  }).then((data) => data.json())
 }
 
 const deleteBookmarkFolder = ({ folderId, credentials }) => {
-- 
cgit v1.2.3-70-g09d2