From fd43ba828e8092e2067ff3d35e640a54a4e9e72a Mon Sep 17 00:00:00 2001
From: Aly Raffauf <aly@aly.codes>
Date: Wed, 11 Feb 2026 21:49:29 +0000
Subject: [PATCH] improve edit view UI + extract command input and add command hints

---
 source/app.tsx | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------
 source/edit-view.tsx | 18 +++++++++++++-----
 source/task-list-view.tsx | 39 ++++++++++++---------------------------
 3 file(s) changed, 119 insertion(s)(+), 94 deletion(s)(-)

diff --git a/source/app.tsx b/source/app.tsx
--- a/source/app.tsx
+++ b/source/app.tsx
@@ -20,6 +20,60 @@
 
 const api = new TodoistApi(apiToken);
 
+function CommandHints({input}: {input: string}) {
+	if (input === '?') {
+		return commands.map(c => (
+			<Text key={c.prefix} dimColor>
+				{'  '}
+				{c.hint}
+			</Text>
+		));
+	}
+
+	if (input) {
+		return commands
+			.filter(c => c.prefix.startsWith(input))
+			.map(c => (
+				<Text key={c.prefix} dimColor>
+					{'  '}
+					{c.hint}
+				</Text>
+			));
+	}
+
+	return <Text dimColor>{'  type ? for help'}</Text>;
+}
+
+function CommandInput({
+	input,
+	setInput,
+	onSubmit,
+}: {
+	input: string;
+	setInput: (value: string) => void;
+	onSubmit: (value: string) => Promise<void>;
+}) {
+	return (
+		<>
+			<Box
+				flexDirection="column"
+				borderStyle="single"
+				borderColor="gray"
+				borderLeft={false}
+				borderRight={false}
+			>
+				<Box>
+					<Text bold color="white">
+						{'> '}
+					</Text>
+					<TextInput value={input} onChange={setInput} onSubmit={onSubmit} />
+				</Box>
+			</Box>
+			<CommandHints input={input} />
+		</>
+	);
+}
+
 export default function App() {
 	const {exit} = useApp();
 	const [tasks, setTasks] = useState<Task[]>([]);
@@ -98,73 +152,51 @@
 			? `dewy ∙ edit: ${view.task.content}`
 			: `dewy ∙ ${view.query === homeFilter ? 'home' : view.query}`;
 
-	if (view.type === 'edit') {
-		return (
-			<Box flexDirection="column" paddingLeft={2}>
-				<Text bold color="cyan">
-					{viewLabel}
-				</Text>
-				<Box
-					flexDirection="column"
-					borderStyle="round"
-					borderColor="cyan"
-					paddingX={1}
-				>
-					<EditView
-						task={view.task}
-						api={api}
-						onBack={() => {
-							setView({type: 'filter', query: homeFilter});
-							refresh();
-						}}
-					/>
-				</Box>
-			</Box>
-		);
-	}
+	const isEditing = view.type === 'edit';
 
 	return (
 		<Box flexDirection="column">
 			<Box flexDirection="column" paddingLeft={2}>
-				<TaskListView tasks={tasks} projects={projects} viewLabel={viewLabel} />
-				{message && <Text color="yellow">{message}</Text>}
+				<Text bold color="cyan">
+					{viewLabel}
+				</Text>
+				{isEditing ? (
+					<Box
+						flexDirection="column"
+						borderStyle="round"
+						borderColor="cyan"
+						paddingX={1}
+						width={50}
+					>
+						<EditView
+							task={view.task}
+							api={api}
+							onBack={() => {
+								setView({type: 'filter', query: homeFilter});
+								refresh();
+							}}
+						/>
+					</Box>
+				) : (
+					<>
+						<Box
+							flexDirection="column"
+							borderStyle="round"
+							borderColor="cyan"
+							paddingX={1}
+						>
+							<TaskListView tasks={tasks} projects={projects} />
+						</Box>
+						{message && <Text color="yellow">{message}</Text>}
+					</>
+				)}
 			</Box>
-			<Box
-				flexDirection="column"
-				borderStyle="single"
-				borderColor="gray"
-				borderLeft={false}
-				borderRight={false}
-			>
-				<Box>
-					<Text bold color="white">
-						{'> '}
-					</Text>
-					<TextInput
-						value={input}
-						onChange={setInput}
-						onSubmit={handleSubmit}
-					/>
-				</Box>
-			</Box>
-			{input === '?' ? (
-				commands.map(c => (
-					<Text key={c.prefix} dimColor>
-						{'  '}
-						{c.hint}
-					</Text>
-				))
-			) : input ? (
-				commands
-					.filter(c => c.prefix.startsWith(input))
-					.map(c => (
-						<Text key={c.prefix} dimColor>
-							{'  '}
-							{c.hint}
-						</Text>
-					))
-			) : (
-				<Text dimColor>{'  type ? for help'}</Text>
+			{!isEditing && (
+				<CommandInput
+					input={input}
+					setInput={setInput}
+					onSubmit={handleSubmit}
+				/>
 			)}
 		</Box>
 	);
diff --git a/source/edit-view.tsx b/source/edit-view.tsx
--- a/source/edit-view.tsx
+++ b/source/edit-view.tsx
@@ -11,15 +11,21 @@
 };
 
 const fields = [
-	{key: 'content', label: 'Title', color: () => undefined},
-	{key: 'description', label: 'Description', color: () => 'gray'},
-	{key: 'due', label: 'Due', color: () => 'magenta'},
+	{key: 'content', label: 'Title', placeholder: '', color: () => undefined},
+	{
+		key: 'description',
+		label: 'Description',
+		placeholder: 'n/a',
+		color: () => 'gray',
+	},
+	{key: 'due', label: 'Due', placeholder: 'no date', color: () => 'magenta'},
 	{
 		key: 'priority',
 		label: 'Priority',
+		placeholder: 'none',
 		color: (v: string) => priorityColor(Number.parseInt(v, 10)),
 	},
-	{key: 'labels', label: 'Labels', color: () => 'yellow'},
+	{key: 'labels', label: 'Labels', placeholder: 'none', color: () => 'yellow'},
 ];
 
 function getFieldValue(task: Task, key: string): string {
@@ -125,10 +131,12 @@
 							onChange={setEditValue}
 							onSubmit={handleSave}
 						/>
-					) : (
+					) : fieldValues[f.key] ? (
 						<Text color={f.color(fieldValues[f.key] ?? '')}>
 							{fieldValues[f.key]}
 						</Text>
+					) : (
+						<Text dimColor>{f.placeholder}</Text>
 					)}
 				</Text>
 			))}
diff --git a/source/task-list-view.tsx b/source/task-list-view.tsx
--- a/source/task-list-view.tsx
+++ b/source/task-list-view.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import {Box, Text} from 'ink';
+import {Text} from 'ink';
 import {type Task} from '@doist/todoist-api-typescript';
 import {priorityColor} from './utils.js';
 
 type TaskListViewProps = {
 	tasks: Task[];
 	projects: Map<string, string>;
-	viewLabel: string;
 };
 
 function ProjectLabel({name}: {name: string | undefined}) {
@@ -50,33 +49,19 @@
 	);
 }
 
-export default function TaskListView({
-	tasks,
-	projects,
-	viewLabel,
-}: TaskListViewProps) {
+export default function TaskListView({tasks, projects}: TaskListViewProps) {
 	return (
 		<>
-			<Text bold color="cyan">
-				{viewLabel}
-			</Text>
-			<Box
-				flexDirection="column"
-				borderStyle="round"
-				borderColor="cyan"
-				paddingX={1}
-			>
-				{tasks.length === 0 && <Text dimColor>No tasks</Text>}
-				{tasks.map((task, i) => (
-					<Text key={task.id}>
-						<Text dimColor>{i + 1}.</Text> {task.content}
-						<ProjectLabel name={projects.get(task.projectId)} />
-						<Labels labels={task.labels} />
-						<DueDate date={task.due?.date} />
-						<Priority priority={task.priority} />
-					</Text>
-				))}
-			</Box>
+			{tasks.length === 0 && <Text dimColor>No tasks</Text>}
+			{tasks.map((task, i) => (
+				<Text key={task.id}>
+					<Text dimColor>{i + 1}.</Text> {task.content}
+					<ProjectLabel name={projects.get(task.projectId)} />
+					<Labels labels={task.labels} />
+					<DueDate date={task.due?.date} />
+					<Priority priority={task.priority} />
+				</Text>
+			))}
 		</>
 	);
 }

--
tangled.sh