73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import { Box, Text } from '@hermes/ink'
|
|
import { memo } from 'react'
|
|
|
|
import { countPendingTodos } from '../lib/liveProgress.js'
|
|
import { todoGlyph, todoTone } from '../lib/todo.js'
|
|
import type { Theme } from '../theme.js'
|
|
import type { TodoItem } from '../types.js'
|
|
|
|
const rowColor = (t: Theme, status: TodoItem['status']) => {
|
|
const tone = todoTone(status)
|
|
|
|
return tone === 'active' ? t.color.cornsilk : tone === 'body' ? t.color.statusFg : t.color.dim
|
|
}
|
|
|
|
export const TodoPanel = memo(function TodoPanel({
|
|
collapsed = false,
|
|
incomplete = false,
|
|
onToggle,
|
|
t,
|
|
todos
|
|
}: {
|
|
collapsed?: boolean
|
|
incomplete?: boolean
|
|
onToggle?: () => void
|
|
t: Theme
|
|
todos: TodoItem[]
|
|
}) {
|
|
if (!todos.length) {
|
|
return null
|
|
}
|
|
|
|
const done = todos.filter(todo => todo.status === 'completed').length
|
|
const pending = countPendingTodos(todos)
|
|
|
|
return (
|
|
<Box flexDirection="column" marginBottom={1}>
|
|
<Box onClick={onToggle}>
|
|
<Text color={t.color.dim}>
|
|
<Text color={t.color.amber}>{collapsed ? '▸ ' : '▾ '}</Text>
|
|
<Text bold color={t.color.cornsilk}>
|
|
Todo
|
|
</Text>{' '}
|
|
<Text color={t.color.statusFg} dim>
|
|
({done}/{todos.length})
|
|
</Text>
|
|
{incomplete && pending > 0 && (
|
|
<Text color={t.color.dim} dim>
|
|
{' '}
|
|
· incomplete · {pending} still {pending === 1 ? 'pending' : 'pending/in_progress'}
|
|
</Text>
|
|
)}
|
|
</Text>
|
|
</Box>
|
|
|
|
{!collapsed && (
|
|
<Box flexDirection="column" marginLeft={2}>
|
|
{todos.map(todo => {
|
|
const tone = todoTone(todo.status)
|
|
const color = rowColor(t, todo.status)
|
|
|
|
return (
|
|
<Text color={color} dim={tone === 'dim'} key={todo.id}>
|
|
<Text color={color}>{todoGlyph(todo.status)} </Text>
|
|
{todo.content}
|
|
</Text>
|
|
)
|
|
})}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
)
|
|
})
|