multirepo-diff-mod

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const table = $.ui.resolve(e)
    const { Box, Text, Button, Code } = table
    // Mobile has no Select; it shows the repo name instead.
    const Select = 'Select' in table ? table.Select : null

    const [repoList, current, currentMode, about, list, selected, view, problem, where, isListHidden, foldedDirs, colorTheme, page, treeAt, trees, activeTree, isShowingDetached] =
      await Promise.all([
        read($, repos),
        read($, repo),
        read($, mode),
        read($, note),
        read($, files),
        read($, file),
        read($, diff),
        read($, error),
        read($, root),
        read($, isListCollapsed),
        read($, collapsedDirs),
        read($, theme),
        read($, diffPage),
        read($, treePage),
        read($, worktrees),
        read($, worktree),
        read($, showDetached),
      ])

    const cols = e.props.bodyColumns || e.viewport?.columns || 100
    const isWide = cols >= 70
    const leftWidth = isWide ? Math.max(24, Math.min(48, Math.floor(cols * 0.3))) : cols
    const active = repoList.find(one => one.path === current)
    const modeInfo = MODES.find(one => one.value === currentMode) ?? MODES[0]

    const repoOptions = repoList.map(one => ({ value: one.path, label: one.name }))
    // Detached worktrees (no branch checked out, e.g. scratch checkouts) are
    // hidden unless asked for. The main checkout always shows, and so does
    // the worktree being viewed.
    const detachedCount = trees.filter((one: Worktree, i: number) => i > 0 && !one.branch).length
    const treeOptions = trees
      .map((one: Worktree, i: number) => ({ one, i }))
      .filter(({ one, i }) => i === 0 || one.branch || isShowingDetached || one.path === activeTree)
      .map(({ one, i }) => ({
        value: one.path,
        label: `${i === 0 ? 'main checkout' : baseName(one.path)} — ${one.branch ?? `detached at ${one.sha}`}`,
      }))
    const fileCount = `${list.length} file${list.length === 1 ? '' : 's'} changed`

    // Four rows: repo and pane controls; worktree; compare mode and count;
    // what exactly is being compared.
    const header = (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="row" justifyContent="space-between" alignItems="center">
          <Box flexDirection="row" gap={2} alignItems="center" flexShrink={1}>
            <Button key="files" plain onPress={() => void toggleList($)}>
              ☰
            </Button>
            {repoOptions.length > 0 && Select ? (
              <Select
                key="repo"
                label="Repo: "
                options={repoOptions}
                value={current || repoOptions[0].value}
                autoFocus
                onSelect={value => void selectRepo($, value)}
              />
            ) : (
              <Text bold>{active ? active.name : 'Multi-repo diff'}</Text>
            )}
          </Box>
          <Box flexDirection="row" gap={1} alignItems="center">
            <Button key="refresh" plain onPress={() => void refresh($)}>
              ⟳
            </Button>
            {/* Shows the mode a press switches to: ☾ while light, ☀ while dark. */}
            {e.surface !== 'terminal' && (
              <Button key="theme" plain onPress={() => void toggleTheme($)}>
                {colorTheme === 'light' ? '☾' : '☀'}
              </Button>
            )}
          </Box>
        </Box>
        {treeOptions.length > 0 && Select ? (
          <Box flexDirection="row" gap={2} alignItems="center">
            <Select
              key="worktree"
              label="Worktree: "
              options={treeOptions}
              value={activeTree || treeOptions[0].value}
              onSelect={value => void showTree($, value)}
            />
            {detachedCount > 0 && (
              <Button key="detached" plain dimColor onPress={() => void toggleDetached($)}>
                {isShowingDetached ? 'Hide detached' : `Show detached (${detachedCount})`}
              </Button>
            )}
          </Box>
        ) : null}
        <Box flexDirection="row" justifyContent="space-between" alignItems="center">
          {Select ? (
            <Select
              key="mode"
              label="Compare: "
              options={MODES.map(({ value, label }) => ({ value, label }))}
              value={currentMode}
              onSelect={value => void setMode($, value as DiffMode)}
            />
          ) : (
            <Text dimColor>{modeInfo.label}</Text>
          )}
          <Text dimColor>{fileCount}</Text>
        </Box>
        {about ? <Text dimColor>{about}</Text> : null}
      </Box>
    )

    // Folders first, files under them; the letter in front is the git status.
    // Paged like the diff, so a repo with many changed files can't push the
    // drawing past the desktop's size limit.
    const tree = toTree(list, new Set(foldedDirs))
    const treePages = Math.ceil(tree.length / TREE_ROWS)
    const treeStart = Math.min(treeAt, Math.max(0, treePages - 1)) * TREE_ROWS
    const treeShown = tree.slice(treeStart, treeStart + TREE_ROWS)
    const fileList = (
      <Box flexDirection="column" width={leftWidth} flexShrink={0}>
        {treePages > 1 && (
          <Box flexDirection="row" gap={1} alignItems="center">
            {treeStart > 0 && (
              <Button key="tree-prev" plain onPress={() => void turnTreePage($, -1)}>
                ◀
              </Button>
            )}
            <Text dimColor>{`${treeStart + 1}–${treeStart + treeShown.length} of ${tree.length}`}</Text>
            {treeStart + TREE_ROWS < tree.length && (
              <Button key="tree-next" plain onPress={() => void turnTreePage($, 1)}>
                ▶
              </Button>
            )}
          </Box>
        )}
        {treeShown.map(row => {
          if (row.kind === 'dir') {
            return (
              <Box paddingLeft={row.depth * 2}>
                <Button key={`dir:${row.path}`} plain dimColor onPress={() => void toggleDir($, row.path)}>
                  {`${row.isCollapsed ? '▸' : '▾'} ${row.name}`}
                </Button>
              </Box>
            )
          }
          const letter = statusLetter(row.change.status)
          const isOn = row.change.path === selected
          return (
            <Box flexDirection="row" gap={1} paddingLeft={row.depth * 2}>
              <Text color={STATUS_COLOR[letter] ?? 'gray'} bold>
                {letter}
              </Text>
              <Button key={`file:${row.change.path}`} plain dimColor={!isOn} onPress={() => void showFile($, row.change.path)}>
                {row.name}
              </Button>
            </Box>