file-explorer

  on('ui.render', { component: 'Pane', requestId: 'file-explorer' }, async ($, e, next) => {
    if (e.surface !== 'terminal' && e.surface !== 'desktop') {
      return next(e)
    }

    const host = hostOf($)
    const { Box, Text, Button, Code, Markdown, Input } = $.ui.resolve(e)

    const [expanded, selected, treeTop, previewTop, isPinned, markdownMode, helpShown, filterText, searchText, written] =
      await Promise.all([
        read($, EXPANDED),
        read($, SELECTED),
        read($, TREE_TOP),
        read($, PREVIEW_TOP),
        read($, PINNED),
        read($, MARKDOWN_MODE),
        read($, HELP_SHOWN),
        read($, FILTER),
        read($, SEARCH),
        read($, WRITTEN),
      ])

    const current = listing

    if (current === null) {
      void ensureListing(host).then(
        () => host.invalidate(),
        () => undefined,
      )
    }

    // A query filters the tree once the project's file list is read
    if (queryOf(filterText ?? '') !== null && filtering.index === null) {
      void ensureFilterIndex(host).catch(() => undefined)
    }

    const unread: string[] = []

    const shown =
      current === null
        ? { rows: flattenTree(() => undefined, new Set()), view: null }
        : shownTreeOf(current, expanded, filterText, dir => unread.push(dir))

    const { rows } = shown

    if (current !== null && unread.length > 0) {
      void loadDirs(host, current, unread).catch(() => undefined)
    }

    // Git's view as last read, of this root: a reload of the module drew
    // none yet, and reads it now
    if (isGitStale && gitLoad === null) {
      void loadGit(host).catch(() => undefined)
    }

    const marks =
      current === null
        ? NO_MARKS
        : treeMarksOf(rows, gitRead?.root === current.root ? gitRead.status : null, written, styleOf(current.root))

    // The file read for the selection, or while a switch waits for the state
    // to name the next, the one it leaves
    const inHand = preview?.path === selected ? preview : leaving?.path === selected ? leaving : null
    const isPreviewStale = selected !== null && inHand === null

    if (isPreviewStale && previewLoad !== selected) {
      void loadPreview(host, selected)
        .then(() => host.invalidate())
        .catch(() => undefined)
    }

    // The layout follows each drawing's seat: the pane moves between the dock
    // and inline as the terminal is resized. Inline it shows one view, as
    // tall as its content.
    seat = { placement: e.props.placement, isClassic: e.viewport?.isFullscreen === false }
    room = e.props.scroll.bodyRows

    // Without the keyboard the pane shows no ring, and it takes the keyboard
    // back with the ring on nothing, or on the row drawn to take it
    if (!e.props.isFocused) {
      dropRing()
    }

    // The cells across a row: the dock keeps a column clear at its edge
    const columns = Math.max(
      1,
      e.props.bodyColumns - (seat.placement === 'dock' ? Limits.RIGHT_PAD_COLUMNS : 0),
    )

    const shownPreview = inHand
    const inlineView = seat.placement === 'inline' ? inlineViewOf({ helpShown, isFileShown, selected }) : null

    // The filter's row sits over the tree, whole or filtered; the help and an
    // inline file view stand in for both. The search's row sits over the
    // preview, docked or inline
    const hasFilter = filterText !== null && !helpShown && inlineView !== 'file'
    const hasSearch = searchText !== null && !helpShown && (inlineView === null ? selected !== null : inlineView === 'file')

    const layout =
      inlineView === null
        ? paneLayoutOf(e.props.scroll.bodyRows, selected !== null, { hasFilter, hasSearch })
        : inlineLayoutOf(
            e.props.scroll.bodyRows,
            inlineView,
            inlineView === 'tree'
              ? rows.length
              : inlineView === 'file'
                ? previewHeightOf(shownPreview)
                : helpHeightOf(seat, columns),
            { hasFilter, hasSearch },
          )

    const window = treeWindowOf(rows.length, treeTop, layout.treeRows)

    // While the search shows, Markdown draws as its source, where the
    // search's marks have rows; the mode kept for the project stays as it is
    const shownMarkdownMode = hasSearch ? 'source' : markdownMode

    // A source preview gives the search's marks their cells while it shows
    const isSourceShown =
      shownPreview?.kind === 'code' || (shownPreview?.kind === 'markdown' && shownMarkdownMode === 'source')

    const textColumns = Math.max(1, columns - (hasSearch && isSourceShown ? Limits.SEARCH_MARK_CELLS : 0))

    // The help view stands in for the tree: the scroll and focus hooks then
    // have no rows to steer
    drawn = helpShown ? null : { rows, layout, textColumns, hasFilter, hasSearch }

    // The field holds what was typed, ahead of the query while typing pauses
    const filter: FilterModel | null =
      filterText === null
        ? null
        : {
            key: filterKeyOf(filtering.submits),
            value: filtering.typed ?? filterText,
            status: queryOf(filterText) === null ? '' : filterStatusOf(shown.view),
            isBlank: queryOf(filtering.typed ?? filterText) === null,
          }

    // The search marks what its query matches in the file shown, and the
    // match the steps stand on while it still matches
    const found = hasSearch && shownPreview !== null && searchText !== null ? foundIn(shownPreview, searchText) : null
    const match = found === null || shownPreview === null ? null : currentMatchOf(shownPreview.path, found)

    const search: SearchModel | null =
      !hasSearch || searchText === null
        ? null
        : {
            key: searchKeyOf(searching.submits),
            value: searching.typed ?? searchText,
            status: shownPreview === null ? '' : searchStatusOf(found?.lines ?? null, match),
            isBlank: searchQueryOf(searching.typed ?? searchText) === null,
            query: found?.query ?? null,
            matches: found?.set ?? NO_MATCHES,
            current: match,
          }

    const tree = paneView(
      { Box, Text, Button, Code, Markdown, Input },
      actionsOf(host),

export function paneView(
  ui: Ui,
  actions: PaneActions,
  columns: number,
  model: PaneModel,
): RenderElement {
  const { Box } = ui
  const kit: Kit = { ui, actions, columns }

  const search = model.search === null ? null : searchRow(kit, model.search)

  if (model.inlineView === 'file' && model.selected !== null) {
    const head = inlineFileHeadRow(kit, model, model.selected)

    return (
      <Box flexDirection="column" width={columns}>
        {head.row}
        {search?.row}
        {previewRegion(kit, model)}
        {hiddenKeys(kit, [...head.hidden, ...(search?.hidden ?? [])])}
      </Box>
    )
  }

  const header = headerRow(kit, model)

  if (model.helpShown) {
    return (
      <Box flexDirection="column" width={columns}>
        {header.row}
        {helpRegion(kit, model.layout.bodyRows - 1, model.seat)}
        {hiddenKeys(kit, header.hidden)}
      </Box>
    )
  }

  const filter = model.filter === null ? null : filterRow(kit, model.filter)

  if (model.inlineView === 'tree' || model.selected === null) {
    return (
      <Box flexDirection="column" width={columns}>
        {header.row}
        {filter}
        {treeRegion(kit, model)}
        {hiddenKeys(kit, header.hidden)}
      </Box>
    )
  }

  const meta = previewMetaRow(kit, model)

  return (
    <Box flexDirection="column" width={columns}>
      {header.row}
      {filter}
      {treeRegion(kit, model)}
      <Box height={1} />
      {previewTitleRow(kit, model.selected)}
      {meta.row}
      {search?.row}
      {previewRegion(kit, model)}
      {hiddenKeys(kit, [...header.hidden, ...meta.hidden, ...(search?.hidden ?? [])])}
    </Box>
  )
}

function previewRegion(kit: Kit, model: PaneModel): RenderElement {
  const { Box } = kit.ui

  // As in the help view: the content keeps its natural height and the
  // region clips it, or Markdown's rows shrink and drop or overprint lines
  return (
    <Box flexDirection="column" height={model.layout.previewRows} overflow="hidden">
      <Box flexDirection="column" flexShrink={0}>
        {previewBody(kit, model)}
      </Box>
    </Box>
  )
}

function previewBody(kit: Kit, model: PaneModel): RenderElement {
  const { Text, Markdown } = kit.ui
  const { preview, previewTop, layout, markdownMode } = model
  const rows = layout.previewRows

  if (preview === null) {
    return <Text dimColor italic>Loading…</Text>
  }

  switch (preview.kind) {
    case 'notice':
      return (
        <Text dimColor italic wrap="wrap">
          {preview.text}
        </Text>
      )
    case 'table':
      // The rows the window shows, each with its rule, set the columns'
      // widths, fitted to the row
      return (
        <Markdown
          text={tableWindowOf(preview.rows, previewTop, tableRowsIn(rows), kit.columns, tableMarkOf(model.search))}
        />
      )
    case 'markdown':
      if (markdownMode === 'rendered') {
        // Markdown can draw a line in less than a row (a joined paragraph),
        // so twice the rows are drawn and the region clips the rest.
        return <Markdown text={markdownWindowOf(preview.lines, previewTop, rows * 2)} />
      }

      return sourceOf(kit, model, preview.path, preview.lines, 'markdown')
    case 'code':
      return sourceOf(kit, model, preview.path, preview.lines)
  }
}

function sourceOf(
  kit: Kit,
  model: PaneModel,
  path: string,
  lines: readonly string[],
  language?: string,
): RenderElement {
  const { Box, Text, Code } = kit.ui
  const { search, previewTop, layout } = model
  const window = codeWindowOf(lines, previewTop, layout.previewRows)
  const code = codeOf(Code, path, window, language)

  if (search === null) {
    return code
  }

  const lastLine = window.startLine + window.source.split('\n').length - 1
  const codeCells = Math.max(1, kit.columns - Limits.SEARCH_MARK_CELLS)
  const columns = sourceColumnsOf(lastLine, codeCells)
  const marks = windowMarksOf(lines, window.startLine - 1, layout.previewRows, columns, search.matches, search.current)

  return (
    <Box flexDirection="row">
      <Box flexDirection="column" width={Limits.SEARCH_MARK_CELLS} flexShrink={0}>
        {marks.map(mark => (mark === null ? <Box height={1} /> : <Text {...MATCH_TONES[mark]}>{MATCH_GLYPH}</Text>))}
      </Box>
      <Box flexDirection="column" width={codeCells} flexShrink={0}>
        {code}
      </Box>
    </Box>
  )
}

function codeOf(
  Code: Ui['Code'],
  path: string,
  window: { source: string; startLine: number },
  language?: string,
): RenderElement {
  return language === undefined ? (
    <Code source={window.source} path={sanitize(path)} startLine={window.startLine} />
  ) : (
    <Code source={window.source} language={language} startLine={window.startLine} />
  )
}