pinafore/routes/_components/compose/ComposeBox.html

<div class="lite-compose-box {{overLimit ? 'over-char-limit' : ''}}">
  <div class="compose-box-current-user">
    <Avatar account="{{verifyCredentials}}" className="compose-box-avatar" size="small"/>
    <a class="compose-box-display-name" href="/accounts/{{verifyCredentials.id}}">
      {{verifyCredentials.display_name || verifyCredentials.acct}}
    </a>
    <span class="compose-box-handle">
      {{'@' + verifyCredentials.acct}}
    </span>
    <textarea
      class="compose-box-input"
      placeholder="What's on your mind?"
      ref:textarea
      bind:value=inputText
    ></textarea>
    <ComposeLengthGauge :inputLength />
    <ComposeToolbar />
    <ComposeLengthIndicator :inputLength />
    <button class="primary compose-box-button">
      Toot!
    </button>
  </div>
</div>
<style>
  .lite-compose-box {
    display: grid;
    flex-direction: row;
  }
  .compose-box-current-user {
    border-radius: 4px;
    padding: 20px;
    display: grid;
    align-items: flex-start;
    grid-template-areas:
      "avatar display-name handle   handle"
      "avatar input        input    input"
      "avatar gauge        gauge    gauge"
      "avatar toolbar      toolbar  length"
      "avatar button       button   button";
    grid-template-columns: min-content minmax(0, max-content) 1fr 1fr;
    border-bottom: 1px solid var(--main-border);
    width: 560px;
    max-width: calc(100vw - 40px);
  }
  :global(.compose-box-avatar) {
    grid-area: avatar;
    margin-right: 15px;
  }
  .compose-box-display-name {
    color: var(--deemphasized-text-color);
    grid-area: display-name;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.1em;
    margin-left: 5px;
    font-weight: 600;
  }
  .compose-box-display-name,
  .compose-box-display-name:hover,
  .compose-box-display-name:visited {
    color: var(--body-text-color);
  }
  :global(.compose-box-handle) {
    grid-area: handle;
    color: var(--deemphasized-text-color);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.1em;
    margin-left: 5px;
  }

  :global(.compose-box-input) {
    grid-area: input;
    margin: 10px 0 0 5px;
    padding: 10px;
    border: 1px solid var(--input-border);
    min-height: 75px;
    resize: none;
    overflow: hidden;
    word-wrap: break-word;
    /* Text must be at least 16px or else iOS Safari zooms in */
    font-size: 1.2em;
    /* Hack to make Edge stretch the element all the way to the right.
     * Also desktop Safari makes the gauge stretch too far to the right without it.
     */
    width: calc(100% - 5px);
  }

  .compose-box-button {
    grid-area: button;
    justify-self: right;
    text-transform: uppercase;
    margin-top: 10px;
  }

  @media (max-width: 767px) {
    .compose-box-current-user {
      padding: 10px 10px;
      max-width: calc(100vw - 20px);
      width: 580px;
    }
    :global(.compose-box-avatar) {
      grid-area: avatar;
      margin-right: 5px;
    }
  }

</style>
<script>
  import Avatar from '../Avatar.html'
  import { store } from '../../_store/store'
  import { autosize } from '../../_utils/autosize'
  import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
  import debounce from 'lodash/debounce'
  import { mark, stop } from '../../_utils/marks'
  import ComposeToolbar from './ComposeToolbar.html'
  import ComposeLengthGauge from './ComposeLengthGauge.html'
  import ComposeLengthIndicator from './ComposeLengthIndicator.html'

  export default {
    oncreate() {
      this.set({inputText: store.get('currentInputTextInCompose')})

      requestAnimationFrame(() => {
        mark('autosize()')
        autosize(this.refs.textarea)
        stop('autosize()')
      })

      const saveText = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)
      this.observe('inputText', inputText => {
        let inputTextInCompose = this.store.get('inputTextInCompose')
        let currentInstance = this.store.get('currentInstance')
        inputTextInCompose[currentInstance] = inputText || ''
        this.store.set({inputTextInCompose: inputTextInCompose})
        saveText()
      }, {init: false})
    },
    ondestroy() {
      mark('autosize.destroy()')
      autosize.destroy(this.refs.textarea)
      stop('autosize.destroy()')
    },
    data: () => ({
      inputText: ''
    }),
    components: {
      Avatar,
      ComposeToolbar,
      ComposeLengthGauge,
      ComposeLengthIndicator
    },
    store: () => store,
    computed: {
      currentInputTextInCompose: ($currentInputTextInCompose) => $currentInputTextInCompose,
      inputLength: (inputText) => inputText ? inputText.length : 0,
    }
  }
</script>