quick-replies

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    if (await read($, isHidden)) return next(e)
    const current = await read($, board)
    if (current.replies.length === 0) return next(e)

    const el = $.ui.resolve(e)
    const { Box, Text, Button } = el
    const isOpen = await read($, isMoreOpen)
    const asking = await read($, isAsking)
    const uses = await read($, usesAtom)
    const context: LookContext = { isSmart: current.isSmart, isAsking: asking, isWorking: e.props.isWorking, uses }
    const visible = current.replies.filter(r => r.when === 'always' || asking)
    const primary = visible.filter(r => !r.more)
    const extra = visible.filter(r => r.more)
    const shown = isOpen ? [...primary, ...extra] : primary

    // Other mods' bands render beneath this hook; dropping next() would hide them, and a mod
    // above us that does the same would hide this one. Draw the chain, then stack on it.
    const beneath = await next(e)
    const mine = (
      <Box key="quick-replies" flexDirection="row" flexWrap="wrap" columnGap={1}>
        {shown.map(r => Chip(el, r, lookOf(r, context), current.hasIcons, () => void fire($, r)))}
        {extra.length > 0 && (
          <Button key="qr-toggle-more" plain onPress={() => update($, isMoreOpen, open => !open)}>
            <Text dimColor>{isOpen ? ' ‹ less ' : ` more ${extra.length} › `}</Text>
          </Button>
        )}
        {e.props.isWorking && <Text dimColor italic>sends after this turn</Text>}
      </Box>
    )
    return isBlank(beneath) ? mine : <Box flexDirection="column">{beneath}{mine}</Box>
  })

const Chip = (
  { Button, Text }: El,
  reply: Reply,
  look: { style: Reply['style']; isDim: boolean },
  hasIcons: boolean,
  onPress: () => void,
) => {
  // A button from the project's file is marked, so it is never mistaken for one of the person's own.
  const icon = hasIcons ? iconOf(reply) : ''
  const mark = reply.source === 'project' ? '◆ ' : icon === '' ? '' : `${icon} `
  const label = ` ${mark}${reply.label} `
  if (look.style === 'solid') {
    return (
      <Button key={`qr-${reply.id}`} plain hotkey={reply.key || undefined} onPress={onPress}>
        <Text backgroundColor={reply.color} color={inkOn(reply.color)} bold dimColor={look.isDim}>
          {label}
        </Text>
      </Button>
    )
  }
  return (
    <Button key={`qr-${reply.id}`} plain hotkey={reply.key || undefined} onPress={onPress}>
      <Text color={reply.color} dimColor={look.isDim} hover={{ scope: `qr-${reply.id}`, bold: true, underline: true, dimColor: false }}>
        {label}
      </Text>
    </Button>
  )
}