Slack emoji bulk upload

// Slack emoji bulk upload from https://slack.green/en/tools/slack-emoji-bulk-upload
// Adds a panel to this Slack tab. Drop your emoji files on it. Each file name
// (without .png/.gif) becomes the emoji name. It calls only Slack's emoji.list
// and emoji.add, the same calls as the Add emoji dialog, as you.
(() => {
  const GAP_MS = 3100
  const teamId = (location.pathname.match(/\/client\/([TE][A-Z0-9]+)/) || [])[1]
  const teams = JSON.parse(localStorage.getItem('localConfig_v2') || '{}').teams || {}
  const team = teams[teamId] || Object.values(teams)[0]
  if (!team || !team.token) return alert('Open your workspace at app.slack.com in this tab first.')
  const wait = (ms) => new Promise((r) => setTimeout(r, ms))

  async function api(method, fields) {
    const body = new FormData()
    body.append('token', team.token)
    for (const [key, value] of Object.entries(fields)) body.append(key, value)
    for (;;) {
      const res = await fetch('/api/' + method, { method: 'POST', body, credentials: 'include' })
      const retry = Number(res.headers.get('retry-after')) || 30
      if (res.status === 429) { await wait(retry * 1000); continue }
      const json = await res.json()
      if (json.error === 'ratelimited') { await wait(retry * 1000); continue }
      return json
    }
  }

  const MEANING = {
    error_name_taken: 'name already used',
    error_name_taken_i18n: 'name is a built-in emoji',
    error_bad_name_i18n: 'name has characters Slack refuses',
    error_lower_case_names_only: 'name must be lowercase',
    resized_but_still_too_large: 'file too big, even after Slack resized it',
    no_permission: 'you are not allowed to add emoji here',
    not_allowed: 'you are not allowed to add emoji here',
    restricted_action: 'you are not allowed to add emoji here',
  }

  const panel = document.createElement('div')
  panel.style.cssText = 'position:fixed;top:16px;right:16px;z-index:99999;width:340px;max-height:80vh;overflow:auto;background:#fff;color:#1d1c1d;border:2px dashed #22c55e;border-radius:10px;padding:14px;font:14px/1.4 sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.25)'
  const title = document.createElement('b')
  title.textContent = 'Emoji upload to ' + (team.name || team.domain || 'this workspace')
  const hint = document.createElement('p')
  hint.textContent = 'Drop your emoji files here, or choose them.'
  const input = document.createElement('input')
  input.type = 'file'
  input.multiple = true
  input.accept = 'image/png,image/gif,image/jpeg,image/webp'
  const close = document.createElement('button')
  close.textContent = 'Close'
  close.style.cssText = 'float:right'
  close.onclick = () => panel.remove()
  const log = document.createElement('ol')
  log.style.cssText = 'padding-left:20px;margin:8px 0 0'
  panel.append(close, title, hint, input, log)
  document.body.append(panel)

  const line = (text) => {
    const li = document.createElement('li')
    li.textContent = text
    log.append(li)
    return li
  }

  async function upload(files) {
    const list = await api('emoji.list', {})
    if (!list.ok) return line('Could not read the emoji list: ' + list.error)
    const existing = new Set(Object.keys(list.emoji || {}))
    const counts = { added: 0, skipped: 0, failed: 0 }
    const images = [...files].filter((f) => /\.(png|gif|jpe?g|webp)$/i.test(f.name))
    for (const [i, file] of images.entries()) {
      const name = file.name.replace(/\.[a-z]+$/i, '')
      hint.textContent = 'Uploading ' + (i + 1) + ' of ' + images.length + '...'
      if (existing.has(name)) { line(':' + name + ': already in the workspace, skipped'); counts.skipped++; continue }
      const row = line(':' + name + ': uploading')
      const res = await api('emoji.add', { mode: 'data', name, image: file })
      if (res.ok) { row.textContent = ':' + name + ': added'; existing.add(name); counts.added++ }
      else { row.textContent = ':' + name + ': failed, ' + (MEANING[res.error] || res.error); counts.failed++ }
      if (i < images.length - 1) await wait(GAP_MS)
    }
    hint.textContent = 'Done: ' + counts.added + ' added, ' + counts.skipped + ' skipped, ' + counts.failed + ' failed.'
  }

  input.onchange = () => upload(input.files)
  panel.ondragover = (e) => e.preventDefault()
  panel.ondrop = (e) => { e.preventDefault(); upload(e.dataTransfer.files) }
})()