folio

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e, next) => {
    if (isIdle) {
      return next(e)
    }

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

    try {
      const base = await rootOf($)
      const state = await read($, ui)
      const written = await read($, touched)

      if (state.tick !== seenTick) {
        forget()
        seenTick = state.tick
      }

      const columns = Math.max(24, e.props.bodyColumns)
      const rows = Math.max(8, e.props.scroll.bodyRows)
      const isSplit = columns >= SPLIT_FROM
      const treeWidth = isSplit ? clamp(Math.round(columns * 0.29), 26, 38) : columns
      const isTreeRight = isSplit && state.side === 'right'
      const frame: Frame = {
        columns,
        rows,
        isSplit,
        isTreeRight,
        treeWidth,
        // Beside the text: the tree, the line between them and the two thumbs, or one margin and a thumb.
        textWidth: Math.max(8, isSplit ? columns - treeWidth - 5 : columns - 3),
        treeRows: rows - 2,
        docRows: rows - 5,
      }
      const nodes = await treeNodes($, new Set(state.expanded))
      const treeMax = Math.max(0, nodes.length - frame.treeRows)
      let treeTop = clamp(state.treeTop, 0, treeMax)

      if (reveal !== '') {
        const at = nodes.findIndex(node => node.rel === reveal)

        if (at !== -1 && (at < treeTop || at >= treeTop + frame.treeRows)) {
          treeTop = clamp(at - Math.floor(frame.treeRows / 3), 0, treeMax)
        }

        reveal = ''
      }

      const isSource = state.mode === 'source' && hasTwoForms(baseOf(state.selected))
      const doc =
        state.selected === ''
          ? undefined
          : await loadDoc($, {
              root: base,
              path: state.selected,
              isSource,
              isRevealed: state.revealed.includes(state.selected),
              columns: frame.textWidth,
              measure: MEASURE,
              rows: frame.docRows,
              now: await $.clock.now(),
            })
      const docMax = doc === undefined || doc.picture !== undefined ? 0 : Math.max(0, doc.rows.length - frame.docRows)
      const docTop = clamp(state.docTop, 0, docMax)

      Object.assign(drawn, {
        isSplit,
        isReading: state.selected !== '',
        treeFrom: isTreeRight ? columns - treeWidth - 1 : 0,
        treeTo: isTreeRight ? columns : treeWidth,
        treeTop,
        treeMax,
        docTop,
        docMax,
      })

      const change = (step: (state: FolioUi) => FolioUi) => {
        void update($, ui, step).then(() => keep($))
      }
      const actions: Actions = {
        toggle: path =>
          change(now => ({
            ...now,
            expanded: now.expanded.includes(path) ? now.expanded.filter(open => open !== path) : [...now.expanded, path],
          })),
        open: path => change(now => ({ ...now, selected: path, docTop: 0 })),
        back: () => change(now => ({ ...now, selected: '' })),
        mode: (mode: FolioMode) => change(now => ({ ...now, mode, docTop: 0 })),
        reveal: () => change(now => ({ ...now, revealed: [...now.revealed, state.selected] })),
        mention: () => {
          void $.prompt.fill({ text: `@${state.selected} `, mode: 'insert' })
        },
        outside: () => {
          void $.process.run(['open', `${base}/${state.selected}`], { timeoutMs: 10_000 }).catch(() => undefined)
        },
        swap: () => {
          void update($, ui, (now): FolioUi => ({ ...now, side: now.side === 'right' ? 'left' : 'right' })).then(now => $.store.set('side', now.side))
        },
        follow: href => {
          const path = resolve(dirOf(state.selected), href)

          void show($, path).then(isShown => {
            if (!isShown) {
              $.ui.toast(`${path} is not in this project`)
            }
          })
        },
      }

      return drawPane(e.surface === 'terminal' ? $.ui.resolve(e) : el, {
        frame,
        title: baseOf(base) || base,
        nodes,
        treeTop,
        selected: state.selected,
        touched: new Set(written),
        touchedFolders: new Set(written.flatMap(path => ancestors(path))),
        doc,
        docTop,
        mode: isSource ? 'source' : 'read',
        on: actions,
      })
    } catch (error) {
      return (
        <Box flexDirection="column">
          <Text bold>The files pane could not draw.</Text>
          <Text dimColor>{String(error instanceof Error ? error.message : error).slice(0, 300)}</Text>
        </Box>
      )
    }
  })

export const drawPane = (el: El, props: PaneProps): RenderElement => {
  const { Box, Text } = el
  const { frame, doc } = props
  const docTotal = doc === undefined || doc.picture !== undefined ? 0 : doc.rows.length
  const docRail = (rest: string) => rail(el, frame.rows, 3, frame.docRows, docTotal, props.docTop, rest)
  const treeRail = (rest: string) => rail(el, frame.rows, 2, frame.treeRows, props.nodes.length, props.treeTop, rest)

  if (!frame.isSplit) {
    if (props.selected === '') {
      return tree(el, props)
    }

    return (
      <Box flexDirection="row" width={frame.columns} height={frame.rows} overflow="hidden">
        <Text> </Text>
        {reader(el, props)}
        <Text> </Text>
        {docRail(' ')}
      </Box>
    )
  }

  // The line between the two parts carries the thumb of the part on its left.
  if (frame.isTreeRight) {
    return (
      <Box flexDirection="row" width={frame.columns} height={frame.rows} overflow="hidden">
        <Text> </Text>
        {reader(el, props)}
        <Text>{'  '}</Text>
        {docRail('│')}
        {tree(el, props)}
        {treeRail(' ')}
      </Box>
    )
  }

  return (
    <Box flexDirection="row" width={frame.columns} height={frame.rows} overflow="hidden">
      {tree(el, props)}
      {treeRail('│')}
      <Text>{'  '}</Text>
      {reader(el, props)}
      <Text> </Text>
      {docRail(' ')}
    </Box>
  )
}

const tree = (el: El, props: PaneProps): RenderElement => {
  const { Box, Text, Button } = el
  const { frame } = props
  const cells = frame.treeWidth
  const shown = props.nodes.slice(props.treeTop, props.treeTop + frame.treeRows)

  return (
    <Box flexDirection="column" width={cells} height={frame.rows} overflow="hidden">
      <Box key="tree-head" flexDirection="row" width={cells} height={1} overflow="hidden">
        <Box width={Math.max(1, cells - 3)}>
          <Text bold wrap="truncate-end">
            {` ${truncate(props.title, cells - 5)}`}
          </Text>
        </Box>
        {props.frame.isSplit ? (
          <Button key="swap" plain hover={{ inverse: false, color: C.accent }} onPress={() => props.on.swap()}>
            <Text color={C.faint}>⇄</Text>
          </Button>
        ) : null}
      </Box>
      {empty(el)}
      {shown.map(node => treeRow(el, props, node, cells))}
      {shown.length === 0 ? <Text color={C.faint}>{'   This folder is empty.'}</Text> : null}
    </Box>
  )
}

const empty = (el: El): RenderElement => <el.Text> </el.Text>

const treeRow = (el: El, props: PaneProps, node: Node, cells: number): RenderElement => {
  const { Box, Text, Button } = el
  const indent = '  '.repeat(Math.min(node.depth, 12))

  if (node.isEmpty) {
    return (
      <Text color={C.faint} wrap="truncate-end">
        {`   ${indent}empty`}
      </Text>
    )
  }

  const isOpenFile = !node.isDir && node.rel === props.selected
  const room = Math.max(4, cells - 4 - indent.length)
  const name = pad(truncateMiddle(node.name, room), room)
  const mark = node.isDir ? (node.isOpen ? '▾ ' : '▸ ') : '  '
  const dot = props.touched.has(node.rel) ? '●' : node.isDir && !node.isOpen && props.touchedFolders.has(node.rel) ? '•' : ' '
  const isQuiet = node.name.startsWith('.')

  return (
    <Box key={`row:${node.rel}`} width={cells} {...(isOpenFile ? { backgroundColor: C.fill } : {})}>
      <Button
        key={`node:${node.rel}`}
        plain
        hover={SOFT}
        onPress={() => (node.isDir ? props.on.toggle(node.rel) : props.on.open(node.rel))}
      >
        {isOpenFile ? <Text color={C.accent}>▎</Text> : ' '}
        {indent}
        {node.isDir ? <Text color={C.muted}>{mark}</Text> : mark}
        <Text {...(isOpenFile ? { bold: true } : {})} {...(isQuiet && !isOpenFile ? { color: C.muted } : {})}>
          {name}
        </Text>
        {dot === ' ' ? ' ' : <Text color={C.touched}>{dot}</Text>}
      </Button>
    </Box>
  )
}

const reader = (el: El, props: PaneProps): RenderElement => {
  const { Box, Text } = el
  const { frame, doc } = props
  const cells = frame.textWidth
  const isBare = doc === undefined && frame.isSplit

  return (
    <Box flexDirection="column" width={cells} height={frame.rows} overflow="hidden">
      {isBare ? empty(el) : header(el, props, cells)}
      <Text color={C.faint}>{isBare ? ' ' : '─'.repeat(cells)}</Text>
      {empty(el)}
      {body(el, props, cells, frame.docRows)}
      {empty(el)}
      {footer(el, props, cells)}
    </Box>
  )
}