pinafore/routes/_components/status/StatusToolbar.html

<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
  <IconButton
    label="Reply"
    href="#fa-reply"
    disabled="{{disableReply}}"
    delegateKey="{{replyKey}}"
    />
  <IconButton
    label="{{reblogLabel}}"
    pressable="{{!reblogDisabled}}"
    pressed="{{reblogged}}"
    disabled="{{reblogDisabled}}"
    href="{{reblogIcon}}"
    delegateKey="{{reblogKey}}"
  />
  <IconButton
    label="Favorite"
    pressable="true"
    pressed="{{favorited}}"
    href="#fa-star"
    delegateKey="{{favoriteKey}}"
  />
  <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 { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
  import { setFavorited } from '../../_actions/favorite'
  import { setReblogged } from '../../_actions/reblog'
  import { goto } from 'sapper/runtime.js'
  import { importDialogs } from '../../_utils/asyncModules'
  import { updateProfileAndRelationship } from '../../_actions/accounts'

  export default {
    oncreate() {
      registerClickDelegate(this.get('favoriteKey'), () => this.onFavoriteClick())
      registerClickDelegate(this.get('reblogKey'), () => this.onReblogClick())
      registerClickDelegate(this.get('replyKey'), () => this.onReplyClick())
      registerClickDelegate(this.get('optionsKey'), () => this.onOptionsClick())
    },
    ondestroy() {
      unregisterClickDelegate(this.get('favoriteKey'))
      unregisterClickDelegate(this.get('reblogKey'))
      unregisterClickDelegate(this.get('replyKey'))
      unregisterClickDelegate(this.get('optionsKey'))
    },
    components: {
      IconButton
    },
    store: () => store,
    methods: {
      onFavoriteClick() {
        let statusId = this.get('statusId')
        let favorited = this.get('favorited')
        /* no await */ setFavorited(statusId, !favorited)
      },
      onReblogClick() {
        let statusId = this.get('statusId')
        let reblogged = this.get('reblogged')
        /* no await */ setReblogged(statusId, !reblogged)
      },
      onReplyClick() {
        let statusId = this.get('statusId')
        goto(`/statuses/${statusId}/reply`)
      },
      async onOptionsClick() {
        let statusId = this.get('statusId')
        let accountId = this.get('accountId')
        let updateRelationshipPromise = updateProfileAndRelationship(accountId)
        let dialogs = await importDialogs()
        await updateRelationshipPromise
        dialogs.showStatusOptionsDialog(statusId)
      }
    },
    computed: {
      visibility: (status) => status.visibility,
      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: (status, $currentStatusModifications) => {
        if ($currentStatusModifications && status.id in $currentStatusModifications.reblogs) {
          return $currentStatusModifications.reblogs[status.id]
        }
        return status.reblogged
      },
      favorited: (status, $currentStatusModifications) => {
        if ($currentStatusModifications && status.id in $currentStatusModifications.favorites) {
          return $currentStatusModifications.favorites[status.id]
        }
        return status.favourited
      },
      statusId: (status) => status.id,
      accountId: (status) => status.account.id,
      disableReply: (statusId, timelineType, timelineValue) => timelineType === 'reply' && statusId === timelineValue,
      keyPrefix: (timelineType, timelineValue, statusId) => `${timelineType}-${timelineValue}-${statusId}`,
      favoriteKey: (keyPrefix) => `${keyPrefix}-fav`,
      reblogKey: (keyPrefix) => `${keyPrefix}-reblog`,
      replyKey: (keyPrefix) => `${keyPrefix}-reply`,
      optionsKey: (keyPrefix) => `${keyPrefix}-options`,
    }
  }
</script>