workbench

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const rows = e.props.placement === 'dock' ? e.props.scroll.bodyRows : 0
    const isGrid = e.surface === 'terminal'
    if (isGrid) hasGrid = true
    if (e.surface === 'desktop') isDesktopFocused = e.props.isFocused
    // As wide as the pane's terminal screen, so PowerShell's tables fit it.
    termColumns = Math.max(40, e.props.bodyColumns - 6)
    const { Box, Text, Button, Code, Input, Svg } = $.ui.resolve(e) as Kit
    const { Client } = $.ui.resolve(e) as Partial<Elements['terminal']>
    const kit: Kit = {
      Box,
      Text,
      Button,
      Code,
      ...(Input === undefined ? {} : { Input }),
      ...(Svg === undefined || isGrid ? {} : { Svg }),
      // Surface modules, named here because the engine reads their paths off this file's own source.
      ...(Client === undefined
        ? {}
        : {
            termInput: (props: InputProps) => {
              inputDrawn.set(props.termId, props)

              // The whole screen, as wide as the window and down to its foot, so a click anywhere there takes the keys.
              return <Client key={`${INPUT}${props.termId}`} module="./terminal-input.tsx" props={props} width="100%" flexGrow={1} />
            },
            editor: (props: EditorProps) => <Client key={EDITOR} module="./editor.tsx" props={props} />,
          }),
    }

    return pane(remembering(kit, e.surface), await model($, e.props.bodyColumns - 2, rows, e.props.isFocused, isGrid, 'pane'), actions($))
  })

export function pane(kit: Kit, m: Model, act: Actions): RenderElement {
  const { Box } = kit
  const frame = {
    flexDirection: 'column' as const,
    paddingX: 1,
    ...(m.isGrid && m.rows > 0 ? { minHeight: m.rows } : {}),
    ...(m.isGrid ? {} : { paddingTop: 0.5, paddingBottom: 1 }),
  }
  // A file being edited has the pane to itself; `done` gives the rest back.
  if (m.tab === 'git' && m.gitSection === 'files' && m.file !== null && m.file.isEditing) {
    return <Box {...frame}>{fileView(kit, m, m.file, act)}</Box>
  }

  const body = [m.tab === 'git' && gitTab(kit, m, act), m.tab === 'term' && termTab(kit, m, act), m.tab === 'ports' && portsTab(kit, m, act)]
  if (m.isGrid) {
    return (
      <Box {...frame}>
        {header(kit, m)}
        <Box marginTop={1}>{tabs(kit, m, act)}</Box>
        {rule(kit, m)}
        {body}
        <Box flexGrow={1} minHeight={1} />
        {footer(kit, m, act)}
      </Box>
    )
  }

  // As a browser: the tabs, and under them the open tab's page, one sheet with it.
  return (
    <Box {...frame}>
      {header(kit, m)}
      <Box flexDirection="column" marginTop={1}>
        {tabs(kit, m, act)}
        {tabPage(kit, m, body)}
      </Box>
    </Box>
  )
}

export function fileView(kit: Kit, m: Model, file: OpenFile, act: Actions): RenderElement {
  const { Box, Text, Code } = kit
  const lines = file.text.split('\n')
  const canEdit = kit.editor !== undefined && file.note === ''
  const top = Math.max(0, Math.min(file.top, Math.max(0, lines.length - 1)))
  const end = Math.min(lines.length, top + VIEW_LINES)
  const where = rel(dir(file.path), filesRoot(m))

  return (
    <Box flexDirection="column">
      {card(kit, m, [
        row(kit, m, {
          key: 'file-head',
          lead: tile(kit, m, file.isEditing ? 'pencil' : 'doc', file.isEditing ? 'orange' : 'blue', 26),
          title: base(file.path),
          isBold: true,
          sub: `${where === '' ? '' : `${where} · `}${file.isEditing ? 'Editing' : file.note === '' ? `Lines ${top + 1}–${end} of ${lines.length}` : 'Not shown'}`,
        }),
        toolbar(kit, [
          file.isEditing
            ? action(kit, m, 'file-back', 'check', 'Done', () => act.toggleEdit(), 'blue', true)
            : action(kit, m, 'file-back', 'back', 'Back', () => act.closeFile(), 'blue'),
          canEdit && !file.isEditing && action(kit, m, 'file-edit', 'pencil', 'Edit', () => act.toggleEdit(), 'orange'),
          action(kit, m, 'file-at', 'at', 'Mention', () => act.mention(file.path), 'gray'),
          !file.isEditing && file.note === '' && top > 0 && action(kit, m, 'file-prev', 'up', 'Previous', () => act.pageFile(-1), 'gray'),
          !file.isEditing && file.note === '' && end < lines.length && action(kit, m, 'file-next', 'down', 'Next', () => act.pageFile(1), 'gray'),
        ]),
      ])}
      <Box flexDirection="column" marginTop={0.5}>
        {file.note !== '' && card(kit, m, [<Text color={tone(m, 'orange')}>{file.note}</Text>])}
        {file.note === '' && file.isEditing && kit.editor !== undefined &&
          card(kit, m, [
            kit.editor({
              path: file.path,
              text: file.text,
              rev: file.mtimeMs,
              rows: m.rows > 0 ? m.rows - 6 : 30,
              isProportional: !m.isGrid,
              accent: tone(m, 'blue'),
            }),
          ])}
        {file.note === '' && !file.isEditing && <Code source={lines.slice(top, end).join('\n') || ' '} startLine={top + 1} path={file.path} />}
      </Box>
    </Box>
  )
}

export function card(
  kit: Kit,
  m: Look,
  children: (RenderElement | false | undefined | null)[],
  options: { isPicked?: boolean; gap?: number; dense?: boolean } = {},
): RenderElement {
  const { Box } = kit
  const shown = children.filter((one): one is RenderElement => one !== false && one !== undefined && one !== null)
  if (m.isGrid) return <Box flexDirection="column">{shown}</Box>
  const look = surface(m)

  return (
    <Box
      flexDirection="column"
      backgroundColor={options.isPicked === true ? look.picked : look.fill}
      borderStyle="round"
      borderColor={look.edge}
      paddingX={1}
      paddingY={options.dense === true ? 0.3 : 0}
      rowGap={options.dense === true ? 0 : (options.gap ?? 0.5)}
      marginTop={0.5}
    >
      {shown}
    </Box>
  )
}

export function header(kit: Kit, m: Model): RenderElement {
  const { Box, Text } = kit
  const at = place(m)
  const room = Math.max(8, m.width - 40)

  return (
    <Box flexDirection="row" alignItems="center" columnGap={1}>
      {mascot(kit, m, m.mood, 128)}
      <Box flexDirection="column" flexShrink={1} minWidth={0}>
        <Text bold>Workbench</Text>
        <Box flexDirection="row" alignItems="center" columnGap={1}>
          {at.name !== '' && m.width >= NARROW && <Text dimColor>{fit(at.name, Math.max(12, room - at.branch.length))}</Text>}
          {at.branch !== '' && icon(kit, m, 'branch', 'gray', 12)}
          {at.branch !== '' && <Text color={tone(m, 'blue')}>{fit(at.branch, Math.floor(room / 2))}</Text>}
          {at.ahead > 0 && <Text color={tone(m, 'orange')}>{`${G.up}${at.ahead}`}</Text>}
          {at.behind > 0 && <Text color={tone(m, 'orange')}>{`${G.down}${at.behind}`}</Text>}
        </Box>
        <Box flexDirection="row" marginTop={0.5}>
          {moodPill(kit, m, m.mood)}
        </Box>
      </Box>
      <Box flexGrow={1} />
      {m.counts.running > 0 && pill(kit, m, `${m.counts.running} running`, 'green', true)}
      {m.counts.ports > 0 && pill(kit, m, `${m.counts.ports} port${m.counts.ports === 1 ? '' : 's'}`, 'blue', true)}
    </Box>
  )
}

export function mascot(kit: Kit, m: Look, mood: Mood, size = 30): RenderElement {
  if (pictures(kit, m) && kit.Svg !== undefined) {
    // Keyed by mood so a new mood starts its animation afresh.
    return <kit.Svg key={`mascot-${mood}`} source={mascotSvg(mood, size)} alt={MOOD_WORDS[mood]} width={size} height={size} />
  }

  const [glyph, hue] = MOOD_GLYPHS[mood]

  return <kit.Text color={tone(m, hue)}>{glyph}</kit.Text>
}