todo-list

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Input } = $.ui.resolve(e)
    const c = await nowCtx($)
    const { today, hm } = c
    const list = await read($, items)
    const projs = await read($, projects)
    const v = await read($, view)
    const par = await read($, parent)
    const sel = await read($, selected)
    const ed = await read($, editing)
    const withDone = await read($, showDone)
    const text = await read($, draft)

    const count = (w: string) => {
      try {
        return select(list, w, c, false).length
      } catch {
        return 0
      }
    }
    const isProject = v.startsWith('p:')
    const isFlat = isFlatView(v)
    const title =
      v === 'inbox' ? 'Inbox' : v === 'today' ? 'Today' : v === 'upcoming' ? 'Upcoming' : v.slice(2)
    let rows: Task[] = []
    let problem = ''
    try {
      rows = select(list, v, c, withDone)
    } catch (err) {
      problem = String((err as Error).message)
    }
    const roots = isFlat ? rows : rows.filter(t => !t.parent || !rows.some(x => x.id === t.parent))
    const parentTask = list.find((t: Task) => t.id === par)
    const editTask = list.find((t: Task) => t.id === ed)

    const action = (key: string, label: string, run: () => unknown) => (
      <Button key={key} plain dimColor label={label} onPress={run} />
    )

    const row = (t: Task, depth: number): any[] => [
      <Box key={`row-${t.id}`} flexDirection="column" paddingLeft={depth * 2}>
        <Box gap={1} alignItems="flex-start">
          <Button key={`tog-${t.id}`} plain label={t.isDone ? '●' : '○'} onPress={() => completeTask($, t.id)} />
          {t.priority < 4 && <Text bold color={PRI_COLOR[t.priority]}>p{t.priority}</Text>}
          <Box flexGrow={1} flexShrink={1}>
            <Text wrap="wrap" strikethrough={t.isDone} dimColor={t.isDone}>{t.text}</Text>
          </Box>
          <Button
            key={`sel-${t.id}`}
            plain
            dimColor={sel !== t.id}
            label="⋯"
            onPress={() => update($, selected, (x: number) => (x === t.id ? 0 : t.id))}
          />
        </Box>
        {(!!t.due || t.labels.length > 0 || isFlat) && (
          <Box gap={1} flexWrap="wrap" paddingLeft={2}>
            {!!t.due && (
              <Text color={isLate(t, today, hm) ? 'red' : t.due === today ? 'green' : 'yellow'}>
                {t.recur ? '↻ ' : ''}{dueLabel(t.due, today, t.time)}
              </Text>
            )}
            {t.labels.length > 0 && <Text color="cyan">{t.labels.map(l => `@${l}`).join(' ')}</Text>}
            {isFlat && <Text dimColor>#{t.project}</Text>}
          </Box>
        )}
      </Box>,
      ...(sel === t.id
        ? [
            <Box key={`act-${t.id}`} gap={1} flexWrap="wrap" paddingLeft={depth * 2 + 2}>
              {!t.isDone && action(`run-${t.id}`, '▶ run here', () => runHere($, t.id))}
              {!t.isDone && action(`new-${t.id}`, '⧉ new session', () => runInNewSession($, t.id))}
              {action(`edit-${t.id}`, 'edit', () => startEdit($, t.id))}
              {action(`sub-${t.id}`, '+subtask', () => update($, parent, () => t.id))}
              {action(`pri-${t.id}`, 'priority', () => cyclePriority($, t.id))}
              {!isFlat && action(`up-${t.id}`, '↑', () => moveTask($, t.id, 'up'))}
              {!isFlat && action(`down-${t.id}`, '↓', () => moveTask($, t.id, 'down'))}
              {!isFlat && action(`top-${t.id}`, 'top', () => moveTask($, t.id, 'top'))}
              {action(`del-${t.id}`, 'delete', () => deleteTask($, t.id))}
            </Box>,
          ]
        : []),
      ...(isFlat ? [] : rows.filter(x => x.parent === t.id).flatMap(k => row(k, depth + 1))),
    ]

    const body: any[] = []
    let lastGroup = ''
    for (const t of roots) {
      if (v === 'today' || v === 'upcoming') {
        const group = t.due < today ? 'Overdue' : dueDay(t.due, today)
        if ((v === 'upcoming' || group === 'Overdue') && group !== lastGroup) {
          body.push(<Text key={`grp-${group}`} bold>{group}</Text>)
          lastGroup = group
        }
      }
      body.push(...row(t, 0))
    }

    const tab = (id: string, label: string, n: number) => (
      <Button
        key={`view-${id}`}
        plain={v !== id ? true : undefined}
        variant={v === id ? 'primary' : undefined}
        label={n > 0 ? `${label} ${n}` : label}
        onPress={() => update($, view, () => id)}
      />
    )

    const inputKey = ed ? 'edit' : 'new'
    const inputLabel = ed ? '✎ ' : '+ '
    const placeholder = ed ? 'Edit, then Enter' : 'Add a task…'

    return (
      <Box flexDirection="column">
        <Box gap={1} flexWrap="wrap">
          {tab('inbox', 'Inbox', count('inbox'))}
          {tab('today', 'Today', count('today'))}
          {tab('upcoming', 'Upcoming', count('upcoming'))}
          {projs.map((p: string) => tab(`p:${p}`, `#${p}`, count(`p:${p}`)))}
        </Box>
        <Input
          key={inputKey}
          label={inputLabel}
          placeholder={placeholder}
          value={text}
          onInput={(x: string) => update($, draft, () => x)}
          onSubmit={(x: string) => submitInput($, x)}
        />
        {(!!editTask || !!parentTask) && (
          <Box gap={1} flexWrap="wrap">
            <Text dimColor>
              {editTask ? `Editing: ${editTask.text}` : `Subtask of: ${parentTask?.text}`}
            </Text>
            {action('cancel-input', 'cancel', () => cancelInput($))}
          </Box>
        )}
        <Text bold>{title}</Text>
        {!!problem && <Text color="red">{problem}</Text>}
        {!problem && body.length === 0 && <Text dimColor>Nothing here.</Text>}
        {body}
        <Box gap={1} flexWrap="wrap">
          {!isFlat && action('toggle-done', withDone ? 'Hide completed' : 'Show completed', () => update($, showDone, (x: boolean) => !x))}
          {isProject && action('del-project', 'Delete project', () => deleteProject($, v.slice(2)))}
        </Box>
      </Box>
    )
  })