pinafore/routes/_components/dialog/components/AccountProfileOptionsDialog.html

<ModalDialog
  :id
  :label
  :title
  background="var(--main-bg)"
>
  <GenericDialogList :items on:click="onClick(event)"/>
</ModalDialog>
<script>
import ModalDialog from './ModalDialog.html'
import { store } from '../../../_store/store'
import GenericDialogList from './GenericDialogList.html'
import { importDialogs } from '../../../_utils/asyncModules'
import { createDialogId } from '../helpers/createDialogId'
import { show } from '../helpers/showDialog'
import { close } from '../helpers/closeDialog'
import { oncreate } from '../helpers/onCreateDialog'
import { setAccountBlocked } from '../../../_actions/block'

export default {
  oncreate,
  store: () => store,
  data: () => ({
    id: createDialogId()
  }),
  computed: {
    blocking: (relationship) => relationship && relationship.blocking,
    items: (account, blocking) => (
      [
        {
          key: 'mention',
          label: `Mention @${account.acct}`,
          icon: '#fa-comments'
        },
        {
          key: 'block',
          label: blocking ? `Unblock @${account.acct}` : `Block @${account.acct}`,
          icon: blocking ? '#fa-unlock' : '#fa-ban'
        }
      ]
    )
  },
  methods: {
    show,
    close,
    onClick(item) {
      switch (item.key) {
        case 'mention':
          return this.onMentionClicked()
        case 'block':
          return this.onBlockClicked()
      }
    },
    async onMentionClicked() {
      let account = this.get('account')
      this.store.setComposeData('dialog', {
        text: `@${account.acct} `
      })
      let dialogs = await importDialogs()
      dialogs.showComposeDialog()
      this.close()
    },
    async onBlockClicked() {
      let account = this.get('account')
      let blocking = this.get('blocking')
      let accountId = account.id
      this.close()
      await setAccountBlocked(accountId, !blocking, true)
    }
  },
  components: {
    ModalDialog,
    GenericDialogList
  },
}
</script>