pinafore/routes/_components/status/StatusToolbar.html

<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}" ref:node>
  <IconButton
    className="status-toolbar-reply-button"
    label="{{replyLabel}}"
    pressable="true"
    pressed="{{replyShown}}"
    href="#fa-reply"
    delegateKey="{{replyKey}}"
    focusKey="{{replyKey}}"
    />
  <IconButton
    label="{{reblogLabel}}"
    pressable="{{!reblogDisabled}}"
    pressed="{{reblogged}}"
    disabled="{{reblogDisabled}}"
    href="{{reblogIcon}}"
    delegateKey="{{reblogKey}}"
    ref:reblogIcon
  />
  <IconButton
    label="Favorite"
    pressable="true"
    pressed="{{favorited}}"
    href="#fa-star"
    delegateKey="{{favoriteKey}}"
    ref:favoriteIcon
  />
  <IconButton
    label="Show more options"
    href="#fa-ellipsis-h"
    delegateKey="{{optionsKey}}"
  />
</div>
<style>
  .status-toolbar {
    grid-area: toolbar;
    display: flex;
    justify-content: space-between;
  }
  .status-toolbar.status-in-own-thread {
    margin-left: 58px;
  }
</style>
<script>
  import IconButton from '../IconButton.html'
  import { store } from '../../_store/store'
  import { registerClickDelegates } from '../../_utils/delegate'
  import { setFavorited } from '../../_actions/favorite'
  import { setReblogged } from '../../_actions/reblog'
  import { importShowStatusOptionsDialog } from '../dialog/asyncDialogs'
  import { updateProfileAndRelationship } from '../../_actions/accounts'
  import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations'
  import { on } from '../../_utils/eventBus'

  export default {
    oncreate () {
      let {
        favoriteKey,
        reblogKey,
        replyKey,
        optionsKey
      } = this.get()
      registerClickDelegates(this, {
        [favoriteKey]: (e) => this.onFavoriteClick(e),
        [reblogKey]: (e) => this.onReblogClick(e),
        [replyKey]: (e) => this.onReplyClick(e),
        [optionsKey]: (e) => this.onOptionsClick(e)
      })
      on('postedStatus', this, this.onPostedStatus)
    },
    components: {
      IconButton
    },
    store: () => store,
    methods: {
      onFavoriteClick (e) {
        e.preventDefault()
        e.stopPropagation()
        let { originalStatusId, favorited } = this.get()
        let newFavoritedValue = !favorited
        /* no await */ setFavorited(originalStatusId, newFavoritedValue)
        if (newFavoritedValue) {
          this.refs.favoriteIcon.animate(FAVORITE_ANIMATION)
        }
      },
      onReblogClick (e) {
        e.preventDefault()
        e.stopPropagation()
        let { originalStatusId, reblogged } = this.get()
        let newRebloggedValue = !reblogged
        /* no await */ setReblogged(originalStatusId, newRebloggedValue)
        if (newRebloggedValue) {
          this.refs.reblogIcon.animate(REBLOG_ANIMATION)
        }
      },
      onReplyClick (e) {
        e.preventDefault()
        e.stopPropagation()
        requestAnimationFrame(() => {
          let { uuid } = this.get()
          let { repliesShown } = this.store.get()
          repliesShown[uuid] = !repliesShown[uuid]
          this.store.set({repliesShown})
          this.fire('recalculateHeight')
        })
      },
      async onOptionsClick (e) {
        e.preventDefault()
        e.stopPropagation()
        let { originalStatusId, originalAccountId } = this.get()
        let updateRelationshipPromise = updateProfileAndRelationship(originalAccountId)
        let showStatusOptionsDialog = await importShowStatusOptionsDialog()
        await updateRelationshipPromise
        showStatusOptionsDialog(originalStatusId)
      },
      onPostedStatus (realm, inReplyToUuid) {
        let {
          originalStatusId,
          uuid
        } = this.get()
        if (realm !== originalStatusId ||
            inReplyToUuid !== uuid) {
          return
        }
        try {
          // return status to the reply button after posting a reply
          this.refs.node.querySelector('.status-toolbar-reply-button').focus()
        } catch (e) { /* ignore */ }
      }
    },
    data: () => ({
      favoriteAnimation: FAVORITE_ANIMATION,
      reblogAnimation: REBLOG_ANIMATION
    }),
    computed: {
      replyLabel: (replyShown) => replyShown ? 'Close reply' : 'Reply',
      reblogLabel: (visibility) => {
        switch (visibility) {
          case 'private':
            return 'Cannot be boosted because this is followers-only'
          case 'direct':
            return 'Cannot be boosted because this is a direct message'
          default:
            return 'Boost'
        }
      },
      reblogIcon: (visibility) => {
        switch (visibility) {
          case 'private':
            return '#fa-lock'
          case 'direct':
            return '#fa-envelope'
          default:
            return '#fa-retweet'
        }
      },
      reblogDisabled: (visibility) => {
        return visibility === 'private' || visibility === 'direct'
      },
      reblogged: (originalStatusId, $currentStatusModifications, originalStatus) => {
        if ($currentStatusModifications && originalStatusId in $currentStatusModifications.reblogs) {
          return $currentStatusModifications.reblogs[originalStatusId]
        }
        return originalStatus.reblogged
      },
      favorited: (originalStatusId, $currentStatusModifications, originalStatus) => {
        if ($currentStatusModifications && originalStatusId in $currentStatusModifications.favorites) {
          return $currentStatusModifications.favorites[originalStatusId]
        }
        return originalStatus.favourited
      },
      favoriteKey: (uuid) => `fav-${uuid}`,
      reblogKey: (uuid) => `reblog-${uuid}`,
      replyKey: (uuid) => `reply-${uuid}`,
      optionsKey: (uuid) => `options-${uuid}`
    }
  }
</script>