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" on:postedStatus="onPostedStatus()" />
</ModalDialog>
<script>
  import ModalDialog from './ModalDialog.html'
  import ComposeBox from '../compose/ComposeBox.html'

  export default {
    components: {
      ModalDialog,
      ComposeBox
    },
    methods: {
      async show() {
        this.set({shown: true})
      },
      onPostedStatus() {
        try {
          this.set({closed: true})
        } catch (e) {
          // TODO: this seems to error sometimes, not sure why
          console.error(e)
        }
      }
    }
  }
</script>