Allow adding bookmarks to folders

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

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}`
     },

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"

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

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>

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"
   }
 }

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 })
         })

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
+    }
   })
 }
 

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