open-tray

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const mine = await read($, items)
    const r = await read($, related)
    const away = new Set(await read($, hidden))
    const live = await read($, players)
    const now = await $.clock.now()
    const columns = e.props.bodyColumns
    const rows = flatten(mine, r, away)
    const pick = Math.min(await read($, selected), Math.max(0, rows.length - 1))
    const stopped = live.find(p => !p.isAlive)
    const mineCount = rows.filter(row => row.place === 'mine').length
    const areaCount = rows.length - mineCount

    const title = (text: string, count: number) => (
      <Box flexDirection="row" marginTop={1}>
        <Text bold color={THEME.accent}>{text.toUpperCase()}</Text>
        <Text color={THEME.faint}>{` ${count} `}</Text>
        <Text color={THEME.rule}>{'─'.repeat(Math.max(0, columns - text.length - String(count).length - 2))}</Text>
      </Box>
    )

    const line = (index: number) => {
      const row = rows[index]!
      const isPicked = index === pick
      const bar = <Text color={THEME.accent}>{isPicked ? '▌' : ' '}</Text>
      if (row.kind === 'action') {
        return (
          <Box flexDirection="row" backgroundColor={isPicked ? THEME.picked : undefined}>
            {bar}
            <Text color={THEME.go}>{' ⏵ '}</Text>
            <Button key={`row-${index}`} plain label={clip(row.action.label, columns - 5)} onPress={() => void runRow($, index)} />
          </Box>
        )
      }
      const meta = `${row.item.tag ? `${row.item.tag}  ` : ''}${ago(now - row.item.addedAt)}`
      return (
        <Box flexDirection="row" justifyContent="space-between" width={columns} backgroundColor={isPicked ? THEME.picked : undefined}>
          <Box flexDirection="row" flexShrink={1}>
            {bar}
            <Text color={KIND_COLORS[row.item.kind]}>{` ${ICONS[row.item.kind]} `}</Text>
            <Button
              key={`row-${index}`}
              plain
              label={clip(row.item.label, Math.max(8, columns - meta.length - 7))}
              onPress={() => void runRow($, index)}
            />
          </Box>
          <Text color={THEME.faint}>{` ${meta} `}</Text>
        </Box>
      )
    }

    // The area's rows, under a small heading per group.
    const areaLines: RenderChildren[] = []
    let lastGroup = ''
    rows.forEach((row, index) => {
      if (row.place !== 'area') return
      if (row.group !== lastGroup) {
        areaLines.push(<Text color={THEME.sub}>{`  ${row.group}`}</Text>)
        lastGroup = row.group
      }
      areaLines.push(line(index))
    })

    return (
      <Box flexDirection="column" width={columns}>
        <Box flexDirection="row" justifyContent="space-between" width={columns}>
          <Text bold>
            <Text color={THEME.accent}>{'◆ '}</Text>
            {'Open Tray'}
          </Text>
          {r.label ? (
            <Text backgroundColor={THEME.accent} color={THEME.onAccent} bold>{` ${r.label} `}</Text>
          ) : (
            <Text color={THEME.faint}>{'following your work'}</Text>
          )}
        </Box>

        {rows.length === 0 && (
          <Box flexDirection="column" marginTop={1} paddingX={1}>
            <Text color={THEME.sub}>{'Nothing here yet.'}</Text>
            <Text color={THEME.faint} wrap="wrap">
              {'Films, audio, images and pages I make for you land here. As we work, things related to what we are on show up below.'}
            </Text>
          </Box>
        )}

        {mineCount > 0 && title('Made this session', mineCount)}
        {rows.map((row, index) => (row.place === 'mine' ? line(index) : null))}

        {areaCount > 0 && title(r.label || 'Related', areaCount)}
        {areaLines}

        {rows.length > 0 && (
          <Box flexDirection="row" flexWrap="wrap" marginTop={1}>
            <Button key="open" plain hotkey="o" label="open   " onPress={() => void runRow($, pick)} />
            <Button key="finder" plain hotkey="f" label="Finder   " onPress={() => void act($, pick, 'finder')} />
            <Button key="audio" plain hotkey="a" label="audio   " onPress={() => void act($, pick, 'audio')} />
            <Button key="keep" plain hotkey="p" label="keep   " onPress={() => void keep($, pick)} />
            <Button key="remove" plain hotkey="x" label="remove   " onPress={() => void remove($, pick)} />
            <Button key="down" plain hotkey="j" label="down   " onPress={() => void move($, 1)} />
            <Button key="up" plain hotkey="k" label="up" onPress={() => void move($, -1)} />
          </Box>
        )}

        {live.length > 0 && (
          <Box flexDirection="column" borderStyle="round" borderColor={THEME.rule} paddingX={1} marginTop={1}>
            <Text bold color={THEME.sub}>{'Local servers'}</Text>
            {live.map((player, index) => (
              <Box flexDirection="row">
                <Text color={player.isAlive ? THEME.go : THEME.stop}>{player.isAlive ? '● ' : '○ '}</Text>
                <Button
                  key={`player-${index}`}
                  plain
                  dimColor={!player.isAlive}
                  label={`${player.tag ?? 'player'}  ${player.url}`}
                  onPress={() => void $.process.run(['open', player.url])}
                />
                {!player.isAlive && <Text color={THEME.stop}>{'  stopped'}</Text>}
              </Box>
            ))}
            {stopped && (
              <Button key="restart" plain hotkey="r" label={`restart ${stopped.tag ?? stopped.url}`} onPress={() => void restart($, stopped)} />
            )}
          </Box>
        )}
      </Box>
    )
  })