pinafore/src/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
      svgClassName={$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={mediaAccept} >
  <ComposeAutosuggest {realm} {text} />
</div>
<style>
  .compose-box-toolbar {
    grid-area: toolbar;
    position: relative;
    align-self: center;
  }
  .compose-box-toolbar-items {
    display: flex;
    align-items: center;
  }
</style>
<script>
  import IconButton from '../IconButton.html'
  import { store } from '../../_store/store'
  import { importShowEmojiDialog, importShowPostPrivacyDialog } from '../dialog/asyncDialogs'
  import { doMediaUpload } from '../../_actions/media'
  import { toggleContentWarningShown } from '../../_actions/contentWarnings'
  import ComposeAutosuggest from './ComposeAutosuggest.html'
  import { mediaAccept } from '../../_static/media'

  export default {
    oncreate () {
      // for testing
      window.__fakeFileInput = (file) => {
        this.onFileChange({
          target: {
            files: [file]
          }
        })
      }
    },
    components: {
      IconButton,
      ComposeAutosuggest
    },
    data: () => ({
      mediaAccept
    }),
    store: () => store,
    methods: {
      async onEmojiClick () {
        let { realm } = this.get()
        let showEmojiDialog = await importShowEmojiDialog()
        showEmojiDialog(realm)
      },
      onMediaClick () {
        this.refs.input.click()
      },
      onFileChange (e) {
        let file = e.target.files[0]
        let { realm } = this.get()
        doMediaUpload(realm, file)
      },
      async onPostPrivacyClick () {
        let { realm } = this.get()
        let showPostPrivacyDialog = await importShowPostPrivacyDialog()
        showPostPrivacyDialog(realm)
      },
      onContentWarningClick () {
        let { realm } = this.get()
        toggleContentWarningShown(realm)
      }
    }
  }
</script>