image-preview

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Markdown } = $.ui.resolve(e)
    const [kept, current, ready, isZoomed] = await Promise.all([read($, items), read($, selected), read($, files), read($, zoomed)])
    if (e.viewport && e.surface === 'terminal') {
      screen = { columns: e.viewport.columns + (e.props.placement === 'dock' ? e.props.bodyColumns : 0), rows: e.viewport.rows }
    }
    const list = [...kept].reverse()
    const at = Math.max(0, list.findIndex(item => item.id === current))
    const shown = list[at]
    if (!shown) return <Text dimColor>No images in this session yet.</Text>

    const first = Math.max(0, Math.min(at - Math.floor(LIST_ROWS / 2), list.length - LIST_ROWS))
    const file = ready[shown.id]
    const columns = e.props.bodyColumns
    const isEnlarged = isZoomed && e.surface === 'terminal'
    const isDrawable = file !== undefined && !('error' in file)
    const listRows = Math.min(list.length, LIST_ROWS) + (list.length > LIST_ROWS ? 1 : 0)
    const taken = isEnlarged ? CHROME_ROWS : listRows + FRAGMENT_ROWS + CHROME_ROWS
    const room = Math.max(MIN_PICTURE_ROWS, e.props.scroll.bodyRows - taken)

    const picture = () => {
      if (!file) return <Text dimColor>Loading…</Text>
      if ('error' in file) return <Text dimColor>{file.error}</Text>
      if (e.surface !== 'terminal') return <Markdown key="preview" text={`[Open ${shown.label}](file://${encodeURI(file.file)})`} />
      const { Image, Client } = $.ui.resolve(e)
      const source = { file: file.file, format: 'png' as const }
      const drawn = file.version === undefined ? source : { ...source, generation: Math.floor(file.version) }
      const size = fit(file, columns, room)
      return (
        <Box flexDirection="column">
          <Image key="preview" source={drawn} {...size} alt={shown.label} />
          <Box position="absolute" top={0} left={0}>
            <Client key="zone" module="./zone.tsx" props={size} width={size.columns} height={size.rows} />
          </Box>
        </Box>
      )
    }

    const actions = () => (
      <Box flexDirection="row" gap={3}>
        {(isEnlarged || isDrawable) && (
          <Button key="enlarge" plain hotkey="e" label={isEnlarged ? 'Back to list' : 'Enlarge'} onPress={() => void toggleZoom($)} />
        )}
        {file !== undefined && !('error' in file) && (
          <Button key="view" plain hotkey="o" label="Open in viewer" onPress={() => void view($, file.file)} />
        )}
      </Box>
    )

    if (isEnlarged) {
      return (
        <Box flexDirection="column">
          {picture()}
          {actions()}
        </Box>
      )
    }

    const last = Math.min(list.length, first + LIST_ROWS)
    const rows = (from: number, to: number) =>
      list.slice(from, to).map((item, i) => {
        const place = from + i + 1
        const time = timeOf(item)
        const text = Number.isFinite(time) ? `${item.label}  ${clockTime(time)}` : item.label
        const row = place <= 9 ? { hotkey: String(place), label: text } : { label: `${place}: ${text}` }
        const pick = () => void inOrder(() => show($, item.id, undefined, true))
        return <Button key={`pick-${item.id}`} plain {...row} dimColor={item.id !== current} onPress={pick} />
      })

    return (
      <Box flexDirection="column">
        {rows(first, at + 1)}
        <Box marginBottom={at + 1 < last || list.length > LIST_ROWS ? 1 : 0} flexDirection="column">
          {picture()}
          {e.surface === 'terminal' && actions()}
          <Text dimColor wrap="wrap">
            {shown.fragment.slice(0, columns * FRAGMENT_ROWS)}
          </Text>
        </Box>
        {rows(at + 1, last)}
        {list.length > LIST_ROWS && <Text dimColor>{list.length} images</Text>}
      </Box>
    )
  })