pinafore/routes/_components/compose/ComposeToolbar.html

<div class="compose-box-toolbar">
  <div class="compose-box-toolbar-items">
    <IconButton
      label="Insert emoji"
      href="#fa-smile"
      on:click="onEmojiClick()"
    />
    <IconButton
      className="{{$uploadingMedia ? 'spin' : ''}}"
      label="Add media"
      href="{{$uploadingMedia ? '#fa-spinner' : '#fa-camera'}}"
      on:click="onMediaClick()"
      disabled="{{$uploadingMedia || (media.length === 4)}}"
    />
    <IconButton
      label="Adjust privacy (currently {{postPrivacy.label}})"
      href="{{postPrivacy.icon}}"
      on:click="onPostPrivacyClick()"
    />
    <IconButton
      label="{{contentWarningShown ? 'Remove content warning' : 'Add content warning'}}"
      href="#fa-exclamation-triangle"
      on:click="onContentWarningClick()"
      pressable="true"
      pressed="{{contentWarningShown}}"
    />
  </div>
  <input ref:input
         on:change="onFileChange(event)"
         style="display: none;"
         type="file"
         accept=".jpg,.jpeg,.png,.gif,.webm,.mp4,.m4v,image/jpeg,image/png,image/gif,video/webm,video/mp4">
  <div class="compose-autosuggest-wrapper {{composeAutosuggestionShown ? '' : 'not-shown'}} {{realm === 'dialog' ? 'is-dialog' : ''}}">
    <ComposeAutosuggest :realm :text />
  </div>
</div>
<style>
  .compose-box-toolbar {
    grid-area: toolbar;
    position: relative;
    align-self: center;
  }
  .compose-box-toolbar-items {
    display: flex;
    align-items: center;
  }
  .compose-autosuggest-wrapper {
    position: absolute;
    left: 5px;
    top: 0;
    z-index: 7000;
  }
  .compose-autosuggest-wrapper.is-dialog {
    z-index: 11000;
  }
  .compose-autosuggest-wrapper.not-shown {
    pointer-events: none;
  }
</style>
<script>
  import IconButton from '../IconButton.html'
  import { store } from '../../_store/store'
  import { importDialogs } from '../../_utils/asyncModules'
  import { doMediaUpload } from '../../_actions/media'
  import { toggleContentWarningShown } from '../../_actions/contentWarnings'
  import ComposeAutosuggest from './ComposeAutosuggest.html'

  export default {
    oncreate() {
      if (process.env.NODE_ENV !== 'production') {
        window.__fakeFileInput = (file) => {
          this.onFileChange({
            target: {
              files: [file]
            }
          })
        }
      }
    },
    components: {
      IconButton,
      ComposeAutosuggest
    },
    store: () => store,
    computed: {
      composeAutosuggestionShown: ($composeAutosuggestionShown) => $composeAutosuggestionShown
    },
    methods: {
      async onEmojiClick() {
        let dialogs = await importDialogs()
        dialogs.showEmojiDialog(this.get('realm'))
      },
      onMediaClick() {
        this.refs.input.click()
      },
      onFileChange(e) {
        let file = e.target.files[0]
        let realm = this.get('realm')
        doMediaUpload(realm, file)
      },
      async onPostPrivacyClick() {
        let dialogs = await importDialogs()
        dialogs.showPostPrivacyDialog(this.get('realm'))
      },
      onContentWarningClick() {
        toggleContentWarningShown(this.get('realm'))
      }
    }
  }
</script>