appshot

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!isStarted) void ensureStarted($)
    const shots = await read($, pending)
    if (shots.length === 0 || e.props.hasSurvey) return next(e)

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

    const remove = async (shot: Appshot) => {
      await dropPending($, [shot])
      await update($, pending, list => list.filter(one => one.id !== shot.id))
    }
    const actions = (shot: Appshot) => (
      <Box flexDirection="row" gap={1}>
        {shot.image && (
          <Button key={`open-${shot.id}`} label="🔍" plain onPress={() => void $.process.run(['open', shot.image as string])} />
        )}
        <Button key={`remove-${shot.id}`} label="✕" plain onPress={() => remove(shot)} />
      </Box>
    )

    // The image, and under it the caption with the buttons aligned right.
    const card = (shot: Appshot) => {
      if ('Svg' in elements) {
        return (
          <Box key={shot.id} flexDirection="column">
            {shot.thumb && (
              <elements.Svg source={imageSvg(shot.thumb)} alt={`Appshot: ${shot.title || shot.app}`} width={CARD_WIDTH} height={thumbHeight(shot.thumb)} />
            )}
            <Box flexDirection="row" justifyContent="space-between" alignItems="center">
              <elements.Svg source={captionSvg(shot)} alt={`${shot.title || shot.app}, ${shotMeta(shot)}`} width={CAPTION_WIDTH} height={CAPTION_HEIGHT} />
              {actions(shot)}
            </Box>
          </Box>
        )
      }
      const columns = 28
      const rows = shot.thumb ? Math.min(12, Math.max(4, Math.round((columns * shot.thumb.height) / shot.thumb.width / 2.1))) : 0
      return (
        <Box key={shot.id} flexDirection="column" width={columns}>
          {'Image' in elements && shot.thumb && (
            <elements.Image key={`thumb-${shot.id}`} source={{ file: shot.thumb.png, format: 'png' }} columns={columns} rows={rows} alt={`[${shot.app}]`} />
          )}
          <Box flexDirection="row" justifyContent="space-between">
            <Box flexDirection="column" flexShrink={1}>
              <Text bold wrap="truncate-end">{shot.title || shot.app}</Text>
              <Text dimColor wrap="truncate-end">{shotMeta(shot)}</Text>
            </Box>
            {actions(shot)}
          </Box>
        </Box>
      )
    }

    return (
      <Box flexDirection="row" flexWrap="wrap" gap={2}>
        {shots.map(card)}
      </Box>
    )
  })