small cleanup

src/components/status_action_buttons/action_button.js

@@ -1,4 +1,5 @@
 import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
+import EmojiPicker from 'src/components/emoji_picker/emoji_picker.vue'
 import Popover from 'src/components/popover/popover.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -67,11 +68,11 @@ export default {
   ],
   components: {
     StatusBookmarkFolderMenu,
+    EmojiPicker,
     Popover
   },
   computed: {
     buttonClass () {
-      if (!this.extra) console.log(this.button.name)
       return [
         this.button.name + '-button',
         {
@@ -93,5 +94,14 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    doActionWrap (button) {
+      if (button.name === 'emoji') {
+        this.$refs.picker.showPicker()
+      } else {
+        this.getComponent(button) === 'button' && this.doAction(button)
+      }
+    }
   }
 }

src/components/status_action_buttons/action_button.vue

@@ -11,7 +11,7 @@
       :tabindex="0"
       :disabled="buttonClass.disabled"
       :href="getComponent(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined"
-      @click.stop="getComponent(button) === 'button' && doAction(button)"
+      @click.stop="doActionWrap(button)"
       @click="close"
     >
       <FALayers>
@@ -80,6 +80,15 @@
         <StatusBookmarkFolderMenu v-if="button.name === 'bookmark'" :status="status" />
       </template>
     </Popover>
+
+    <EmojiPicker
+      ref="picker"
+      v-if="button.name === 'emoji'"
+      :enable-sticker-picker="false"
+      :hide-custom-emoji="hideCustomEmoji"
+      class="emoji-picker-panel"
+      @emoji="addReaction"
+    />
   </div>
 </template>
 

src/components/status_action_buttons/buttons_definitions.js

@@ -0,0 +1,227 @@
+const PRIVATE_SCOPES = new Set(['private', 'direct'])
+const PUBLIC_SCOPES = new Set(['public', 'unlisted'])
+export const BUTTONS = [{
+  // =========
+  // REPLY
+  // =========
+  name: 'reply',
+  label: 'tool_tip.reply',
+  icon: 'reply',
+  active: ({ replying }) => replying,
+  counter: ({ status }) => status.replies_count,
+  anon: true,
+  anonLink: true,
+  toggleable: true,
+  closeIndicator: 'times',
+  activeIndicator: 'none',
+  action ({ emit }) {
+    emit('toggleReplying')
+    return Promise.resolve()
+  }
+}, {
+  // =========
+  // REPEAT
+  // =========
+  name: 'retweet',
+  label: 'tool_tip.repeat',
+  icon ({ status }) {
+    if (PRIVATE_SCOPES.has(status.visibility)) {
+      return 'lock'
+    }
+    return 'retweet'
+  },
+  animated: true,
+  active: ({ status }) => status.repeated,
+  counter: ({ status }) => status.repeat_num,
+  anonLink: true,
+  interactive: ({ status, loggedIn }) => loggedIn && !PRIVATE_SCOPES.has(status.visibility),
+  toggleable: true,
+  confirm: ({ status, getters }) => !status.repeated && getters.mergedConfig.modalOnRepeat,
+  confirmStrings: {
+    title: 'status.repeat_confirm_title',
+    body: 'status.repeat_confirm',
+    confirm: 'status.repeat_confirm_accept_button',
+    cancel: 'status.repeat_confirm_cancel_button'
+  },
+  action ({ status, dispatch }) {
+    if (!status.repeated) {
+      return dispatch('retweet', { id: status.id })
+    } else {
+      return dispatch('unretweet', { id: status.id })
+    }
+  }
+}, {
+  // =========
+  // FAVORITE
+  // =========
+  name: 'favorite',
+  label: 'tool_tip.favorite',
+  icon: ({ status }) => status.favorited
+    ? ['fas', 'star']
+    : ['far', 'star'],
+  animated: true,
+  active: ({ status }) => status.favorited,
+  counter: ({ status }) => status.fave_num,
+  anonLink: true,
+  toggleable: true,
+  action ({ status, dispatch }) {
+    if (!status.favorited) {
+      return dispatch('favorite', { id: status.id })
+    } else {
+      return dispatch('unfavorite', { id: status.id })
+    }
+  }
+}, {
+  // =========
+  // EMOJI REACTIONS
+  // =========
+  name: 'emoji',
+  label: 'tool_tip.add_reaction',
+  icon: ['far', 'smile-beam'],
+  anonLink: true
+}, {
+  // =========
+  // MUTE
+  // =========
+  name: 'mute',
+  icon: 'eye-slash',
+  label: 'status.mute_ellipsis',
+  if: ({ loggedIn }) => loggedIn,
+  toggleable: true,
+  dropdown: true
+  // action ({ status, dispatch, emit }) {
+  //   if (status.thread_muted) {
+  //     return dispatch('unmuteConversation', { id: status.id })
+  //   } else {
+  //     return dispatch('muteConversation', { id: status.id })
+  //   }
+  // }
+}, {
+  // =========
+  // PIN STATUS
+  // =========
+  name: 'pin',
+  icon: 'thumbtack',
+  label: ({ status }) => status.pinned
+    ? 'status.unpin'
+    : 'status.pin',
+  if ({ status, loggedIn, currentUser }) {
+    return loggedIn &&
+      status.user.id === currentUser.id &&
+      PUBLIC_SCOPES.has(status.visibility)
+  },
+  action ({ status, dispatch, emit }) {
+    if (status.pinned) {
+      return dispatch('unpinStatus', { id: status.id })
+    } else {
+      return dispatch('pinStatus', { id: status.id })
+    }
+  }
+}, {
+  // =========
+  // BOOKMARK
+  // =========
+  name: 'bookmark',
+  icon: 'bookmark',
+  toggleable: true,
+  active: ({ status }) => status.bookmarked,
+  label: ({ status }) => status.bookmarked
+    ? 'status.unbookmark'
+    : 'status.bookmark',
+  if: ({ loggedIn }) => loggedIn,
+  action ({ status, dispatch, emit }) {
+    if (status.bookmarked) {
+      return dispatch('unbookmark', { id: status.id })
+    } else {
+      return dispatch('bookmark', { id: status.id })
+    }
+  }
+}, {
+  // =========
+  // EDIT
+  // =========
+  name: 'edit',
+  icon: 'pen',
+  label: 'status.edit',
+  if ({ status, loggedIn, currentUser, state }) {
+    return loggedIn &&
+      state.instance.editingAvailable &&
+      status.user.id === currentUser.id
+  },
+  action ({ dispatch, status }) {
+    return dispatch('fetchStatusSource', { id: status.id })
+      .then(data => dispatch('openEditStatusModal', {
+        statusId: status.id,
+        subject: data.spoiler_text,
+        statusText: data.text,
+        statusIsSensitive: status.nsfw,
+        statusPoll: status.poll,
+        statusFiles: [...status.attachments],
+        visibility: status.visibility,
+        statusContentType: data.content_type
+      }))
+  }
+}, {
+  // =========
+  // DELETE
+  // =========
+  name: 'delete',
+  icon: 'times',
+  label: 'status.delete',
+  if ({ status, loggedIn, currentUser }) {
+    return loggedIn && (
+      status.user.id === currentUser.id ||
+        currentUser.privileges.includes('messages_delete')
+    )
+  },
+  confirm: ({ status, getters }) => getters.mergedConfig.modalOnDelete,
+  confirmStrings: {
+    title: 'status.delete_confirm_title',
+    body: 'status.delete_confirm',
+    confirm: 'status.delete_confirm_accept_button',
+    cancel: 'status.delete_confirm_cancel_button'
+  },
+  action ({ dispatch, status }) {
+    return dispatch('deleteStatus', { id: status.id })
+  }
+}, {
+  // =========
+  // SHARE/COPY
+  // =========
+  name: 'share',
+  icon: 'share-alt',
+  label: 'status.copy_link',
+  action ({ state, status, router }) {
+    navigator.clipboard.writeText([
+      state.instance.server,
+      router.resolve({ name: 'conversation', params: { id: status.id } }).href
+    ].join(''))
+    return Promise.resolve()
+  }
+}, {
+  // =========
+  // EXTERNAL
+  // =========
+  name: 'external',
+  icon: 'external-link-alt',
+  label: 'status.external_source',
+  link: ({ status }) => status.external_url
+}, {
+  // =========
+  // REPORT
+  // =========
+  name: 'report',
+  icon: 'flag',
+  label: 'user_card.report',
+  if: ({ loggedIn }) => loggedIn,
+  action ({ dispatch, status }) {
+    dispatch('openUserReportingModal', { userId: status.user.id, statusIds: [status.id] })
+  }
+}].map(button => {
+  return Object.fromEntries(
+    Object.entries(button).map(([k, v]) => [
+      k,
+      (typeof v === 'function' || k === 'name') ? v : () => v
+    ])
+  )
+})

src/components/status_action_buttons/status_action_buttons.js

@@ -5,280 +5,16 @@ import ActionButtonContainer from './action_button_container.vue'
 import Popover from 'src/components/popover/popover.vue'
 import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
 
+import { BUTTONS } from './buttons_definitions.vue'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faPlus,
+  faEllipsisH
-  faMinus,
-  faCheck,
-  faTimes,
-  faWrench,
-
-  faReply,
-  faRetweet,
-  faStar,
-  faSmileBeam,
-
-  faEllipsisH,
-  faBookmark,
-  faEyeSlash,
-  faThumbtack,
-  faShareAlt,
-  faExternalLinkAlt,
-  faHistory
 } from '@fortawesome/free-solid-svg-icons'
-import {
-  faStar as faStarRegular
-} from '@fortawesome/free-regular-svg-icons'
 
 library.add(
-  faPlus,
+  faEllipsisH
-  faMinus,
-  faCheck,
-  faTimes,
-  faWrench,
-
-  faReply,
-  faRetweet,
-  faStar,
-  faStarRegular,
-  faSmileBeam,
-
-  faEllipsisH,
-  faBookmark,
-  faEyeSlash,
-  faThumbtack,
-  faShareAlt,
-  faExternalLinkAlt,
-  faHistory
 )
-const PRIVATE_SCOPES = new Set(['private', 'direct'])
-const PUBLIC_SCOPES = new Set(['public', 'unlisted'])
-const BUTTONS = [{
-  // =========
-  // REPLY
-  // =========
-  name: 'reply',
-  label: 'tool_tip.reply',
-  icon: 'reply',
-  active: ({ replying }) => replying,
-  counter: ({ status }) => status.replies_count,
-  anon: true,
-  anonLink: true,
-  toggleable: true,
-  closeIndicator: 'times',
-  activeIndicator: 'none',
-  action ({ emit }) {
-    emit('toggleReplying')
-    return Promise.resolve()
-  }
-}, {
-  // =========
-  // REPEAT
-  // =========
-  name: 'retweet',
-  label: 'tool_tip.repeat',
-  icon ({ status }) {
-    if (PRIVATE_SCOPES.has(status.visibility)) {
-      return 'lock'
-    }
-    return 'retweet'
-  },
-  animated: true,
-  active: ({ status }) => status.repeated,
-  counter: ({ status }) => status.repeat_num,
-  anonLink: true,
-  interactive: ({ status, loggedIn }) => loggedIn && !PRIVATE_SCOPES.has(status.visibility),
-  toggleable: true,
-  confirm: ({ status, getters }) => !status.repeated && getters.mergedConfig.modalOnRepeat,
-  confirmStrings: {
-    title: 'status.repeat_confirm_title',
-    body: 'status.repeat_confirm',
-    confirm: 'status.repeat_confirm_accept_button',
-    cancel: 'status.repeat_confirm_cancel_button'
-  },
-  action ({ status, dispatch }) {
-    if (!status.repeated) {
-      return dispatch('retweet', { id: status.id })
-    } else {
-      return dispatch('unretweet', { id: status.id })
-    }
-  }
-}, {
-  // =========
-  // FAVORITE
-  // =========
-  name: 'favorite',
-  label: 'tool_tip.favorite',
-  icon: ({ status }) => status.favorited
-    ? ['fas', 'star']
-    : ['far', 'star'],
-  animated: true,
-  active: ({ status }) => status.favorited,
-  counter: ({ status }) => status.fave_num,
-  anonLink: true,
-  toggleable: true,
-  action ({ status, dispatch }) {
-    if (!status.favorited) {
-      return dispatch('favorite', { id: status.id })
-    } else {
-      return dispatch('unfavorite', { id: status.id })
-    }
-  }
-}, {
-  // =========
-  // EMOJI REACTIONS
-  // =========
-  name: 'emoji',
-  label: 'tool_tip.add_reaction',
-  icon: ['far', 'smile-beam'],
-  anonLink: true,
-  popover: 'emoji-picker'
-}, {
-  // =========
-  // MUTE
-  // =========
-  name: 'mute',
-  icon: 'eye-slash',
-  label: 'status.mute_ellipsis',
-  if: ({ loggedIn }) => loggedIn,
-  toggleable: true,
-  dropdown: true
-  // action ({ status, dispatch, emit }) {
-  //   if (status.thread_muted) {
-  //     return dispatch('unmuteConversation', { id: status.id })
-  //   } else {
-  //     return dispatch('muteConversation', { id: status.id })
-  //   }
-  // }
-}, {
-  // =========
-  // PIN STATUS
-  // =========
-  name: 'pin',
-  icon: 'thumbtack',
-  label: ({ status }) => status.pinned
-    ? 'status.unpin'
-    : 'status.pin',
-  if ({ status, loggedIn, currentUser }) {
-    return loggedIn &&
-      status.user.id === currentUser.id &&
-      PUBLIC_SCOPES.has(status.visibility)
-  },
-  action ({ status, dispatch, emit }) {
-    if (status.pinned) {
-      return dispatch('unpinStatus', { id: status.id })
-    } else {
-      return dispatch('pinStatus', { id: status.id })
-    }
-  }
-}, {
-  // =========
-  // BOOKMARK
-  // =========
-  name: 'bookmark',
-  icon: 'bookmark',
-  toggleable: true,
-  active: ({ status }) => status.bookmarked,
-  label: ({ status }) => status.bookmarked
-    ? 'status.unbookmark'
-    : 'status.bookmark',
-  if: ({ loggedIn }) => loggedIn,
-  action ({ status, dispatch, emit }) {
-    if (status.bookmarked) {
-      return dispatch('unbookmark', { id: status.id })
-    } else {
-      return dispatch('bookmark', { id: status.id })
-    }
-  }
-}, {
-  // =========
-  // EDIT
-  // =========
-  name: 'edit',
-  icon: 'pen',
-  label: 'status.edit',
-  if ({ status, loggedIn, currentUser, state }) {
-    return loggedIn &&
-      state.instance.editingAvailable &&
-      status.user.id === currentUser.id
-  },
-  action ({ dispatch, status }) {
-    return dispatch('fetchStatusSource', { id: status.id })
-      .then(data => dispatch('openEditStatusModal', {
-        statusId: status.id,
-        subject: data.spoiler_text,
-        statusText: data.text,
-        statusIsSensitive: status.nsfw,
-        statusPoll: status.poll,
-        statusFiles: [...status.attachments],
-        visibility: status.visibility,
-        statusContentType: data.content_type
-      }))
-  }
-}, {
-  // =========
-  // DELETE
-  // =========
-  name: 'delete',
-  icon: 'times',
-  label: 'status.delete',
-  if ({ status, loggedIn, currentUser }) {
-    return loggedIn && (
-      status.user.id === currentUser.id ||
-        currentUser.privileges.includes('messages_delete')
-    )
-  },
-  confirm: ({ status, getters }) => getters.mergedConfig.modalOnDelete,
-  confirmStrings: {
-    title: 'status.delete_confirm_title',
-    body: 'status.delete_confirm',
-    confirm: 'status.delete_confirm_accept_button',
-    cancel: 'status.delete_confirm_cancel_button'
-  },
-  action ({ dispatch, status }) {
-    return dispatch('deleteStatus', { id: status.id })
-  }
-}, {
-  // =========
-  // SHARE/COPY
-  // =========
-  name: 'share',
-  icon: 'share-alt',
-  label: 'status.copy_link',
-  action ({ state, status, router }) {
-    navigator.clipboard.writeText([
-      state.instance.server,
-      router.resolve({ name: 'conversation', params: { id: status.id } }).href
-    ].join(''))
-    return Promise.resolve()
-  }
-}, {
-  // =========
-  // EXTERNAL
-  // =========
-  name: 'external',
-  icon: 'external-link-alt',
-  label: 'status.external_source',
-  link: ({ status }) => status.external_url
-}, {
-  // =========
-  // REPORT
-  // =========
-  name: 'report',
-  icon: 'flag',
-  label: 'user_card.report',
-  if: ({ loggedIn }) => loggedIn,
-  action ({ dispatch, status }) {
-    dispatch('openUserReportingModal', { userId: status.user.id, statusIds: [status.id] })
-  }
-}].map(button => {
-  return Object.fromEntries(
-    Object.entries(button).map(([k, v]) => [
-      k,
-      (typeof v === 'function' || k === 'name') ? v : () => v
-    ])
-  )
-})
 
 const StatusActionButtons = {
   props: ['status', 'replying'],
@@ -320,6 +56,9 @@ const StatusActionButtons = {
     currentUser () {
       return this.$store.state.users.currentUser
     },
+    hideCustomEmoji () {
+      return !this.$store.state.instance.pleromaCustomEmojiReactionsAvailable
+    },
     funcArg () {
       return {
         status: this.status,
@@ -345,6 +84,7 @@ const StatusActionButtons = {
   methods: {
     doAction (button) {
       if (button.confirm?.(this.funcArg)) {
+        // TODO move to action_button
         this.currentConfirmTitle = this.$t(button.confirmStrings(this.funcArg).title)
         this.currentConfirmOkText = this.$t(button.confirmStrings(this.funcArg).confirm)
         this.currentConfirmCancelText = this.$t(button.confirmStrings(this.funcArg).cancel)
@@ -366,7 +106,6 @@ const StatusActionButtons = {
         .finally(() => setTimeout(() => { this.animationState[button.name] = false }))
     },
     isPinned (button) {
-      console.log(this.pinnedItems, button.name)
       return this.pinnedItems.has(button.name)
     },
     unpin (button) {