TUI for Todoist written with React+Ink.
indent tasks when wrapping
Aly Raffauf
(Feb 14, 2026, 10:20 PM EST)
d7b5c14f
93d607f3
+14
-8
+14
-8
source/task-list-view.tsx
+14
-8
source/task-list-view.tsx
···
1
1
import React from 'react';
2
-
import {Text} from 'ink';
2
+
import {Box, Text} from 'ink';
3
3
import Link from 'ink-link';
4
4
import {type Task} from '@doist/todoist-api-typescript';
5
5
import {parseMdLink, priorityColor} from './utils.js';
···
70
70
}
71
71
72
72
export default function TaskListView({tasks, projects}: TaskListViewProps) {
73
+
const numWidth = String(tasks.length).length;
73
74
return (
74
75
<>
75
76
{tasks.length === 0 && <Text dimColor>No tasks</Text>}
76
77
{tasks.map((task, i) => (
77
-
<Text key={task.id}>
78
-
<Text dimColor>{i + 1}.</Text> <Content text={task.content} />
79
-
<ProjectLabel name={projects.get(task.projectId)} />
80
-
<Labels labels={task.labels} />
81
-
<DueDate date={task.due?.date} />
82
-
<Priority priority={task.priority} />
83
-
</Text>
78
+
<Box key={task.id}>
79
+
<Box width={numWidth + 2} flexShrink={0}>
80
+
<Text dimColor>{String(i + 1).padStart(numWidth)}.</Text>
81
+
</Box>
82
+
<Text wrap="wrap">
83
+
<Content text={task.content} />
84
+
<ProjectLabel name={projects.get(task.projectId)} />
85
+
<Labels labels={task.labels} />
86
+
<DueDate date={task.due?.date} />
87
+
<Priority priority={task.priority} />
88
+
</Text>
89
+
</Box>
84
90
))}
85
91
</>
86
92
);