grudge

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const shown = await read($, offer)
    if (shown === null) return next(e)
    const below = await next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const where = shown.scope === 'global' ? ' (everywhere)' : ''
    return (
      <Box flexDirection="column">
        {below}
        {/* Wraps rather than truncates, so the rule and its buttons always show whole. */}
        <Box flexDirection="row" flexWrap="wrap" columnGap={2} width={e.props.bodyColumns - MARKER}>
          <Box flexShrink={1}>
            <Text>
              😤 Hold a grudge? "{shown.rule}"{where}
            </Text>
          </Box>
          {/* Digits press from an empty prompt; the Desk Neighbours split them so none clash (Grudge 4–5). */}
          <Box flexShrink={0} gap={1}>
            <Button key="grudge-hold" hotkey="4" plain label="Hold" onPress={() => void hold($)} />
            <Button key="grudge-nah" hotkey="5" plain label="Nah" onPress={() => void update($, offer, () => null)} />
          </Box>
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const held = await read($, list)
    const columns = e.props.bodyColumns

    const row = (g: Grudge) => {
      const tally = g.swap === null ? 'reminded' : `enforced ${g.hits}×`
      return (
        <Box key={`row-${g.id}`} flexDirection="row" width={columns}>
          <Box width={5} flexShrink={0}>
            <Text dimColor>#{String(g.id)}</Text>
          </Box>
          <Box flexGrow={1} flexShrink={1}>
            <Text>{g.rule}</Text>
          </Box>
          <Box flexShrink={0} marginLeft={2}>
            <Text dimColor>
              held {day(g.heldAt)} · {tally}
            </Text>
          </Box>
          <Box flexShrink={0} marginLeft={2}>
            <Button key={`forgive-${g.id}`} label="Forgive" dimColor onPress={() => void forgive($, g.id)} />
          </Box>
        </Box>
      )
    }

    const isEmpty = held.repo.length === 0 && held.global.length === 0
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" marginBottom={1}>
          <Text bold>😤 Grudges</Text>
          <Text dimColor> · {held.repoName}</Text>
        </Box>
        {isEmpty && <Text dimColor>None held. Yet.</Text>}
        {held.repo.map(row)}
        {held.global.length > 0 && (
          <Box marginTop={held.repo.length > 0 ? 1 : 0}>
            <Text dimColor>everywhere</Text>
          </Box>
        )}
        {held.global.map(row)}
        <Box marginTop={1}>
          <Text dimColor>Correct Claude in a prompt to start one · esc closes</Text>
        </Box>
      </Box>
    )
  })