pinafore/routes/_components/dialog/ComposeDialog.html

<ModalDialog
  :label
  :shown
  :closed
  :title
  background="var(--main-bg)"
  on:destroyDialog="destroy()"
>
  <ComposeBox realm="dialog" size="slim" autoFocus="true" />
</ModalDialog>
<script>
  import ModalDialog from './ModalDialog.html'
  import ComposeBox from '../compose/ComposeBox.html'
  import { on } from '../../_utils/eventBus'

  export default {
    oncreate() {
      on('postedStatus', this, this.onPostedStatus)
    },
    components: {
      ModalDialog,
      ComposeBox
    },
    methods: {
      async show() {
        this.set({shown: true})
      },
      onPostedStatus(realm) {
        if (realm !== 'dialog') {
          return
        }
        try {
          this.set({closed: true})
        } catch (e) {
          // TODO: this seems to error sometimes, not sure why
          console.error(e)
        }
      }
    }
  }
</script>