todo-list

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const [list, current, openTitle, armed, selectedTitles] = await Promise.all([
      read($, items),
      read($, focused),
      read($, detailed),
      read($, deleting),
      read($, selected),
    ])
    const picked = pickedFrom(list, selectedTitles)
    const { isWorking } = e.props
    // While one item's detail is shown, the band shows that item alone.
    const opened = list.find(one => one.title === openTitle)
    if (list.length === 0 || e.props.hasSurvey) {
      return next(e)
    }

    const { Box, Button, Text } = $.ui.resolve(e)
    const numberWidth = labelWidth(list.length)

    return (
      <Box flexDirection="column">
        <Text dimColor>{'─'.repeat(e.props.bodyColumns)}</Text>
        <Text bold>{GUTTER}Todos</Text>
        {list.map((item, i) => {
          // The focus ring tracks its stop by position, so every row keeps its
          // Button in every view; dropping the hidden rows' Buttons would slide
          // the ring onto the next stop, the first hotkey Button.
          const button = (
            <Button key={`${ROW_PREFIX}${i}`} label=" " plain onPress={() => toggleDetails($)} />
          )
          if (opened !== undefined && item !== opened) {
            return (
              <Box key={`row-${i}`} width={0} height={0} overflow="hidden">
                {button}
              </Box>
            )
          }
          // Items stored before parentheses were normalized still need normalizing here.
          const shown = normalizeParens(item.title)
          const [, main = shown] = NOTE.exec(shown) ?? []
          const room = e.props.bodyColumns - GUTTER.length - numberWidth
          const isFocused = item.title === current
          const color = picked.includes(item) ? SELECTED_COLOR : undefined
          const isLong = !isFocused && opened === undefined && cellWidth(shown) > room
          // The cut may end inside the note.
          const cut = isLong ? fit(shown, room) : shown
          const head = cut.slice(0, main.length)
          const tail = cut.slice(main.length)
          return (
            <Box key={`row-${i}`} flexDirection="row">
              {/* The focus ring always inverts a Button, so the row's Button takes
                  no cells and the dot beside it marks the focus instead. */}
              <Box width={0} overflow="hidden">
                {button}
              </Box>
              <Text>{isFocused ? '• ' : '  '}</Text>
              <Text color={color}>{numberLabel(i + 1, numberWidth)}</Text>
              <Text color={color} wrap={isLong ? 'truncate-end' : 'wrap'}>
                {head}
                {tail !== '' && <Text dimColor>{tail}</Text>}
              </Text>
              {item.title === armed && (
                <Text bold color={DELETE_COLOR}>
                  {' '}
                  delete?
                </Text>
              )}
            </Box>
          )
        })}
        {opened !== undefined && (
          <Box flexDirection="row">
            <Text>{' '.repeat(GUTTER.length + numberWidth)}</Text>
            <Text wrap="wrap">{opened.detail || '(No detail. Run /todos refresh to add one.)'}</Text>
          </Box>
        )}
        <Box flexDirection="row">
          <Text dimColor>
            {GUTTER}
            {helpLine(current !== '', armed !== '', opened !== undefined, picked.length)}
          </Text>
          {/* Holds the hotkeys out of sight: a drawn hotkey takes the accent color. */}
          <Box width={0} overflow="hidden">
            <Button key="next" label="next" hotkey={NEXT_KEY} plain onPress={() => moveFocus($, e.requestId, 1)} />
            <Button key="previous" label="previous" hotkey={PREVIOUS_KEY} plain onPress={() => moveFocus($, e.requestId, -1)} />
            <Button key="details" label="details" hotkey={DETAILS_KEY} plain onPress={() => toggleDetails($)} />
            <Button key="paste" label="paste" hotkey={PASTE_KEY} plain onPress={() => paste($)} />
            <Button key="select" label="select" hotkey={SELECT_KEY} plain onPress={() => toggleSelected($)} />
            <Button key="select-all" label="select all" hotkey={SELECT_ALL_KEY} plain onPress={() => toggleAll($)} />
            <Button key="ask" label="ask" hotkey={ASK_KEY} plain onPress={() => askAbout($, isWorking)} />
            <Button key="delete" label="delete" hotkey={DELETE_KEY} plain onPress={() => deleteFocused($)} />
          </Box>
        </Box>
      </Box>
    )
  })