From 89fbaa159f29a7d175a5323eded29e20c9f3a752 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 24 Sep 2024 00:05:33 +0200
Subject: [PATCH] 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 +++-
 .../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.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

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index e2c88cebb..b3e1cb2bb 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 7b38d9740..c030de0c8 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 000000000..16b414acc
--- /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 000000000..48b7fe70a
--- /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 8b5fb98d2..9d10b560f 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 462def22f..5822c533c 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 c22042aac..43896ae72 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 e41e7125f..550543e0b 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