todos

  on("ui.render", { component: "AbovePrompt" }, async ($, e, next) => {
    const scan = await read($, scanState);

    if (e.props.hasSurvey || scan === null || scan.total === 0 || !(await read($, isVisible))) {
      return next(e);
    }

    const { Box, Button, Link, Text } = $.ui.resolve(e);
    const mineOnly = await read($, isMineOnly);
    const listed = mineOnly ? scan.mineTodos : scan.todos;
    const listedTotal = mineOnly ? scan.mineTotal : scan.total;

    const fitRows = (chromeRows: number) =>
      Math.max(1, Math.min(settings.rows, e.props.maxRows - chromeRows));

    const hasPagerRoom = e.props.maxRows - BAND_CHROME_ROWS - PAGER_ROWS >= 1;
    const isPaged = hasPagerRoom && listed.length > fitRows(BAND_CHROME_ROWS);
    const windowRows = fitRows(isPaged ? BAND_CHROME_ROWS + PAGER_ROWS : BAND_CHROME_ROWS);
    drawnRows = windowRows;
    isPagerDrawn = isPaged;
    const start = windowStart(await read($, windowOffset), listed.length, windowRows);
    const shown = listed.slice(start, start + windowRows);
    const below = listed.length - start - shown.length;
    const picked = await read($, pickedIds);

    const labelLimit = Math.max(MIN_SOURCE_WIDTH, Math.floor(e.props.bodyColumns * SOURCE_SHARE));
    // Measured over the whole list, so the columns hold still while it scrolls.
    const labels = listed.map((todo) => shortenStart(sourceLabel(todo), labelLimit));
    const ages = listed.map((todo) => formatAge(scan.scannedAt - todo.authoredAt));
    const labelWidth = Math.max(0, ...labels.map((label) => label.length));
    const ageWidth = Math.max(0, ...ages.map((age) => age.length));
    const unkeptCount = listedTotal - listed.length;
    const count = mineOnly ? `${scan.mineTotal} of ${scan.total} yours` : `${scan.total}`;

    const footer = [
      listed.length > shown.length
        ? `${start + 1}–${start + shown.length} of ${listed.length}`
        : "",
      unkeptCount > 0 ? `+${unkeptCount} more` : "",
      picked.length > 0 ? `${picked.length} selected` : "hides on your next message",
      picked.length > 0 ? "" : `/${COMMAND} reopens`,
    ]
      .filter((part) => part !== "")
      .join(" · ");

    const issueOf = (tag: string | null) => {
      const number = issueNumber(tag);

      if (number === null) return [];

      return [
        Box({
          flexShrink: 0,
          children: [
            scan.issueBase === null
              ? Text({ dimColor: true, children: `#${number}` })
              : Link({ href: `${scan.issueBase}/issues/${number}`, label: `#${number}` }),
          ],
        }),
      ];
    };

    const togglePicked = (id: string) =>
      update($, pickedIds, (ids) =>
        ids.includes(id) ? ids.filter((other) => other !== id) : [...ids, id],
      );

    const pageBy = (by: number) =>
      update($, windowOffset, (offset) => pagedOffset(offset, by, listed.length, windowRows));

    // An arrow at its end stays drawn, dim: unarmed, its digit would land in the prompt and block the other.
    // Each keeps its own end of the row, so a second click lands on the arrow the first one hit.
    const pager = isPaged
      ? [
          Box({
            justifyContent: "space-between",
            children: [
              Button({
                key: "up",
                label: `↑ ${start} more`,
                hotkey: PAGE_UP_HOTKEY,
                plain: true,
                dimColor: start === 0,
                onPress: () => pageBy(-windowRows),
              }),
              Button({
                key: "down",
                label: `↓ ${below} more`,
                hotkey: PAGE_DOWN_HOTKEY,
                plain: true,
                dimColor: below === 0,
                onPress: () => pageBy(windowRows),
              }),
            ],
          }),
        ]
      : [];

    const rows = shown.map((todo, index) =>
      Box({
        key: `todo:${todoId(todo)}`,
        gap: 1,
        children: [
          Button({
            key: `pick:${todoId(todo)}`,
            label: picked.includes(todoId(todo)) ? "●" : "○",
            plain: true,
            dimColor: !picked.includes(todoId(todo)),
            onPress: () => togglePicked(todoId(todo)),
          }),
          Box({
            width: labelWidth,
            flexShrink: 0,
            children: [Text({ dimColor: true, children: labels[start + index] ?? "" })],
          }),
          Box({
            flexGrow: 1,
            flexShrink: 1,
            minWidth: 0,
            children: [Text({ wrap: "truncate-end", children: displayText(todo) })],
          }),
          ...issueOf(todo.tag),
          Box({
            width: ageWidth,
            flexShrink: 0,
            children: [Text({ dimColor: true, children: ages[start + index] ?? "" })],
          }),
        ],
      }),
    );

    const band = Box({
      flexDirection: "column",
      borderStyle: "round",
      borderColor: "cyan",
      paddingX: 1,
      children: [
        Box({
          gap: 1,
          children: [
            Text({ bold: true, color: "cyan", children: "todos" }),
            Text({ dimColor: true, children: `· ${count}` }),
          ],
        }),
        ...(rows.length > 0
          ? rows
          : [Text({ dimColor: true, children: "None of these TODOs is yours." })]),
        ...pager,
        Box({
          gap: 1,
          children: [
            Box({
              flexGrow: 1,
              flexShrink: 1,
              minWidth: 0,
              children: [Text({ dimColor: true, wrap: "truncate-end", children: footer })],
            }),
            Box({
              flexShrink: 0,
              gap: 1,