pinafore/routes/_components/status/StatusComposeBox.html

<div class="status-article-compose-box">
  <ComposeBox realm="{{originalStatusId}}"
              size="slim"
              autoFocus="true"
              hideBottomBorder="true"
              on:postedStatus="onPostedStatus()"
  />
</div>
<style>
  .status-article-compose-box {
    grid-area: compose;
    background: var(--main-bg);
  }
</style>
<script>
  import ComposeBox from '../../_components/compose/ComposeBox.html'
  import { store } from '../../_store/store'
  import debounce from 'lodash/debounce'
  import throttle from 'lodash/throttle'

  const DEBOUNCE_DELAY = 400
  const THROTTLE_DELAY = 150

  export default {
    oncreate() {
      const recalc = () => {
        requestAnimationFrame(() => {
          this.fire('recalculateHeight')
        })
      }
      // debounce AND throttle due to 333ms content warning animation
      const debounced = debounce(recalc, DEBOUNCE_DELAY)
      const throttled = throttle(() => {
        debounced()
        recalc()
      }, THROTTLE_DELAY, {
        leading: true,
        trailing: true
      })
      this.observe('composeData', throttled)
    },
    components: {
      ComposeBox
    },
    store: () => store,
    computed: {
      composeData: ($currentComposeData, originalStatusId) => $currentComposeData[originalStatusId] || {},
    },
    methods: {
      onPostedStatus() {
        requestAnimationFrame(() => {
          let uuid = this.get('uuid')
          let $repliesShown = this.store.get('repliesShown')
          $repliesShown[uuid] = false
          this.store.set({'repliesShown': $repliesShown})
          this.fire('recalculateHeight')
        })
      }
    }
  }
</script>