queue

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (queue.items.length === 0 || e.props.hasSurvey) {
      return next(e)
    }

    const { Box, Text, Button } = $.ui.resolve(e)

    const children = []

    if (queue.pausedBecause !== undefined) {
      children.push(
        Box({
          flexDirection: 'row',
          columnGap: 2,
          children: [
            Text({ children: ['Queue paused because ' + queue.pausedBecause] }),
            Button({
              key: 'resume',
              label: 'Resume',
              hotkey: 'r',
              plain: true,
              onPress: () => resume($, queue),
            }),
          ],
        }),
      )
    }

    // Each message takes two lines: its text, and under it the buttons, so more of the text fits. A longer list scrolls.
    queue.items.forEach((item, index) => {
      let hotkeys = { steer: {}, edit: {}, delete: {} }

      if (index === 0) {
        hotkeys = { steer: { hotkey: 's' }, edit: { hotkey: 'e' }, delete: { hotkey: 'd' } }
      }

      const buttons = []

      if (index > 0) {
        buttons.push(
          Button({
            key: 'up-' + index,
            label: '↑',
            plain: true,
            dimColor: true,
            onPress: () => move($, queue, item, -1),
          }),
        )
      }

      if (index < queue.items.length - 1) {
        buttons.push(
          Button({
            key: 'down-' + index,
            label: '↓',
            plain: true,
            dimColor: true,
            onPress: () => move($, queue, item, 1),
          }),
        )
      }

      buttons.push(
        Button({
          ...hotkeys.steer,
          key: 'steer-' + index,
          label: 'Steer',
          plain: true,
          dimColor: true,
          onPress: () => steer($, queue, item),
        }),
        Button({
          ...hotkeys.edit,
          key: 'edit-' + index,
          label: 'Edit',
          plain: true,
          dimColor: true,
          onPress: () => edit($, queue, item),
        }),
        Button({
          ...hotkeys.delete,
          key: 'delete-' + index,
          label: 'Delete',
          plain: true,
          dimColor: true,
          onPress: () => discard($, queue, item),
        }),
      )

      children.push(
        Box({
          key: 'row-' + index,
          flexDirection: 'column',
          children: [
            Box({
              flexDirection: 'row',
              columnGap: 1,
              children: [
                Text({ dimColor: true, children: [String(index + 1) + '.'] }),
                Text({ wrap: 'truncate-end', children: [item.text.replace(/\s+/g, ' ')] }),
              ],
            }),
            Box({ flexDirection: 'row', columnGap: 2, paddingLeft: 3, children: buttons }),
          ],
        }),
      )
    })

    return Box({ flexDirection: 'column', paddingRight: 4, children })
  })