maxlearn

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const columns = e.props.bodyColumns ?? 40
    const d: Draw = {
      ui: $.ui.resolve(e),
      surface: e.surface,
      density: density(columns),
      width: Math.max(20, columns - 2),
    }
    const { Box } = d.ui
    const v = await read($, view)
    const i = await readInsights($)
    const { card, ctx } = await activeCard($)

    const cards = await read($, deck)
    let body
    if (v.mode === 'welcome') {
      body = WelcomeTab($, d, v, await read($, settings))
    } else if (v.mode === 'learn') {
      const id = await read($, lessonNow)
      const lesson = id === null || id === PENDING ? undefined : findLesson(id, cards, await read($, lessons))
      if (lesson !== undefined) markShown(lesson.id, await $.clock.now())
      body = LearnTab($, d, id, lesson, (await read($, lessonQueue)).length, await read($, generating), v.from ?? 'all', i)
    } else if (v.mode === 'progress') {
      body = InsightsTab($, d, v, i)
    } else if (v.mode === 'settings') {
      body = SettingsTab($, d, await read($, settings), v)
    } else if (v.mode === 'add') {
      body = MoreTab($, d, v, i)
    } else {
      if (card !== undefined) markShown(card.id, await $.clock.now())
      body = StudyTab($, d, v, card, i, cards, await read($, session))
    }

    // Where i j k l walk the highlight: other tabs, and a study tab with nothing due.
    ringOrder =
      v.mode === 'review' && v.isRevealed && card !== undefined
        ? GRADE_KEYS
        : (v.mode === 'review' || v.mode === 'quiz') && card !== undefined
          ? []
          : focusOrder(body)

    // Content on top, the grey footer pinned to the bottom of the pane: the box is
    // at least as tall as the rows the pane shows, and space-between pushes the
    // footer down. Taller content grows the box and the pane scrolls as before.
    // On the study tabs the card sits in the middle: two empty boxes above and
    // below share the free rows, and shrink to nothing when the content is taller.
    const rows = e.props.scroll?.bodyRows ?? 0
    const isCentered = v.mode === 'welcome' || v.mode === 'learn' || v.mode === 'review' || v.mode === 'quiz'
    const hasFilter = v.mode === 'learn' || v.mode === 'review' || v.mode === 'quiz'
    let counts: Record<LearnFrom, number> = { all: 0, interests: 0, chats: 0 }
    if (v.mode === 'learn') counts = await learnCounts($)
    else if (hasFilter) {
      const due = dueCards(cards, i.now).filter(c => v.mode !== 'quiz' || c.choices.length > 0)
      counts = {
        all: due.length,
        interests: due.filter(c => c.source === 'interest').length,
        chats: due.filter(c => c.source === 'chat').length,
      }
    }
    return (
      <Box flexDirection="column" minHeight={rows} width={d.width}>
        <Box key="top" flexDirection="column" flexShrink={0} gap={1}>
          {TopBar($, d, v)}
          {hasFilter && FilterRow($, d, v, counts)}
        </Box>
        {isCentered && <Box key="space-above" flexGrow={1} />}
        <Box flexDirection="column" gap={1} flexShrink={0}>
          {body}
        </Box>
        <Box key="space-below" flexGrow={1} />
        {Footer($, d, v, ctx, card, i.overview.dueNow, await read($, generating), cards.filter(isToLearn).length)}
      </Box>
    )
  })

function TopBar($: $, d: Draw, v: View) {
  const { Box, Button } = d.ui
  const isTerminal = d.surface === 'terminal'
  return (
    <Box key="top-bar" gap={1} flexWrap="wrap">
      {TAB_ORDER.map((mode: Mode) =>
        isTerminal ? (
          <Button
            key={`tab-${mode}`}
            label={TAB_LABELS[d.density][mode]}
            hotkey={TAB_KEYS[mode]}
            plain
            dimColor={mode !== v.mode}
            onPress={() => setMode($, mode)}
          />
        ) : (
          <Button
            key={`tab-${mode}`}
            label={TAB_LABELS[d.density][mode]}
            hotkey={TAB_KEYS[mode]}
            variant={mode === v.mode ? 'primary' : 'secondary'}
            dimColor={mode !== v.mode}
            onPress={() => setMode($, mode)}
          />
        ),
      )}
    </Box>
  )
}

function FilterRow($: $, d: Draw, v: View, counts: Record<LearnFrom, number>) {
  const { Box, Button, Text } = d.ui
  const current = v.from ?? 'all'
  return (
    <Box key="from-row" gap={2} flexWrap="wrap" alignItems="center">
      <Text dimColor>Show</Text>
      {(['all', 'interests', 'chats'] as const).map(from => (
        <Button
          key={`from-${from}`}
          label={counts[from] > 0 ? `${FROM_LABELS[from]} · ${counts[from]}` : FROM_LABELS[from]}
          plain
          dimColor={from !== current}
          onPress={() => setFrom($, from)}
        />
      ))}
    </Box>
  )
}

function Footer($: $, d: Draw, v: View, ctx: KeyContext, card: Card | undefined, due: number, busy: Generating | null, toLearn = 0) {
  const { Box, Text, Button } = d.ui
  const Client = d.surface === 'terminal' || d.surface === 'desktop' ? d.ui.Client : undefined
  const roomy = isRoomy(d)
  const isTerminal = d.surface === 'terminal'
  const key = (k: string, label: string, onPress: () => unknown, extra: Record<string, unknown> = {}) => (
    <Button key={k} label={label} plain dimColor onPress={onPress} {...extra} />
  )
  const isStudy = v.mode === 'review' || v.mode === 'quiz'
  const cursor = Math.min((card?.choices.length ?? 1) - 1, v.cursor ?? 0)

  const actions = []
  if (isStudy && card !== undefined) {
    if (!v.isRevealed) actions.push(key('skip', 'skip', () => runKey($, { type: 'skip' }, card), { hotkey: 'n' }))
    else actions.push(key('drop', 'drop', () => dropCard($, card), { hotkey: 'd' }))
  }
  actions.push(
    key('undo', 'undo', () => undoLast($), { hotkey: 'u' }),
    key('help', 'keys', () => runKey($, { type: 'help' }, card), { hotkey: 'h' }),
    key('close', 'close', () => closePane($), { hotkey: 'x', role: 'dismiss' }),
  )

  // The i j k l map, shaped like the keys. Where the keys only move or pick (other
  // tabs, the quiz) the map's cells are the Buttons that carry them; on a revealed
  // card the grade buttons above own those hotkeys, so the map is text.
  const map = arrowMap(ctx)
  let arrows
  {
    const isQuizPick = v.mode === 'quiz' && !v.isRevealed && card !== undefined
    const isFaceDown = v.mode === 'review' && !v.isRevealed && card !== undefined
    const isGrading = v.mode === 'review' && v.isRevealed && card !== undefined
    const press: Partial<Record<'i' | 'j' | 'k' | 'l', () => unknown>> = !isStudy || card === undefined || isGrading
      ? { i: () => moveRing($, -1), j: () => moveRing($, -1), k: () => moveRing($, 1), l: () => moveRing($, 1) }
      : isFaceDown
        ? { l: () => runKey($, { type: 'reveal' }, card) }
        : isQuizPick
        ? {
            i: () => moveCursor($, card, -1),
            k: () => moveCursor($, card, 1),
            l: () => runKey($, { type: 'choose', index: cursor }, card),
          }
        : {}
    const cell = (k: 'i' | 'j' | 'k' | 'l') => {
      const word = map[k]
      if (word === undefined) return null
      const onPress = press[k]
      const navKey = isFaceDown ? 'show-key' : isStudy && card !== undefined && !isGrading ? `quiz-${{ i: 'up', j: 'left', k: 'down', l: 'choose' }[k]}` : `nav-${{ i: 'up', j: 'left', k: 'down', l: 'right' }[k]}`
      // A plain Button draws `k: label`, so its label is the cell without the key.
      return onPress
        ? key(navKey, arrowCell(k, word).slice(3), onPress, { hotkey: k })
        : <Text key={`map-${k}`} dimColor>{arrowCell(k, word)}</Text>
    }
    const [top] = arrowLines(map)
    const indent = top.length - top.trimStart().length
    arrows = isTerminal ? (
      <Box flexDirection="column">
        <Box marginLeft={indent}>{cell('i')}</Box>
        <Box gap={2}>
          {cell('j')}
          {cell('k')}
          {cell('l')}
        </Box>
      </Box>
    ) : (
      // A proportional font cannot line `i` up over `k`: one row, in arrow order.
      <Box gap={2}>
        {cell('j')}
        {cell('i')}
        {cell('k')}
        {cell('l')}
      </Box>
    )
  }

  const status = `${due} due${toLearn > 0 ? ` · ${toLearn} to learn` : ''}${busy === null ? '' : ` · ⟳ ${busy.label}`}`
  const hint =
    isStudy && Client ? (
      <Client key={KEYS} module="./keys.tsx" props={{ hint: keyHint(ctx) }} />
    ) : (
      <Text dimColor wrap="truncate-end">
        {keyHint(ctx)}
      </Text>
    )
  const help = v.isHelp && (
    <Box flexDirection="column" marginTop={1}>
      {HELP_LINES.map(([keys, what]) => (
        <Text key={`help-${keys}`} dimColor wrap="truncate-end">
          {keys.padEnd(roomy ? 15 : 10)}
          {what}
        </Text>
      ))}
    </Box>
  )

  if (!isTerminal) {
    // Desktop, VS Code, mobile: draw keycaps for hotkeys in a proportional font, so a
    // drawn rule wraps and spaces do not align. One framed block, four short rows.
    return (
      <Box flexDirection="column" borderStyle="round" borderDimColor paddingX={2} paddingY={1} gap={1} marginTop={1}>
        <Box justifyContent="space-between">
          <Text dimColor bold>
            Shortcuts
          </Text>
          <Text dimColor>{status}</Text>
        </Box>
        {hint}
        <Box gap={3} flexWrap="wrap" rowGap={1}>
          {arrows}
          <Box gap={2} flexWrap="wrap">
            {actions}
          </Box>
        </Box>
        {help}
      </Box>
    )
  }

  return (
    <Box flexDirection="column">
      <Text dimColor>{`── Shortcuts ${'─'.repeat(Math.max(0, d.width - 13))}`}</Text>
      {arrows}
      {isStudy && Client ? (
        <Client key={KEYS} module="./keys.tsx" props={{ hint: keyHint(ctx) }} />
      ) : (
        <Text dimColor wrap="truncate-end">
          {keyHint(ctx)}
        </Text>
      )}
      <Box gap={1} flexWrap="wrap">
        {actions}
      </Box>
      <Text dimColor>
        {due} due{toLearn > 0 ? ` · ${toLearn} to learn` : ''}{busy === null ? '' : ` · ⟳ ${busy.label}`}
      </Text>
      {v.isHelp && (
        <Box flexDirection="column" marginTop={1}>
          {HELP_LINES.map(([keys, what]) => (
            <Text key={`help-${keys}`} dimColor wrap="truncate-end">
              {keys.padEnd(roomy ? 15 : 10)}
              {what}
            </Text>
          ))}
        </Box>
      )}
    </Box>
  )
}