From 00aa0d03f86023a666dd7ad25b00eccfcee4f3ac Mon Sep 17 00:00:00 2001
From: Aly Raffauf <aly@aly.codes>
Date: Wed, 11 Feb 2026 14:53:52 -0500
Subject: [PATCH] make ui layout and rendering pretty

---
 source/app.tsx            |  84 +++++++++++++++++++-------
 source/commands.ts        |   1 -
 source/edit-view.tsx      |   9 +--
 source/task-list-view.tsx | 124 +++++++++++++++++++-------------------
 4 files changed, 130 insertions(+), 88 deletions(-)

diff --git a/source/app.tsx b/source/app.tsx
index c2cc47c..33be1d4 100644
--- a/source/app.tsx
+++ b/source/app.tsx
@@ -1,5 +1,6 @@
 import React, {useState, useEffect, useCallback} from 'react';
 import {Box, Text, useApp} from 'ink';
+import TextInput from 'ink-text-input';
 import {TodoistApi, type Task} from '@doist/todoist-api-typescript';
 import {type View, commands} from './commands.js';
 import {loadConfig, configPath} from './config.js';
@@ -63,6 +64,10 @@ export default function App() {
 		const trimmed = value.trim();
 		setInput('');
 
+		if (!trimmed || trimmed === '?') {
+			return;
+		}
+
 		const ctx = {
 			api,
 			tasks,
@@ -91,39 +96,76 @@ export default function App() {
 	const viewLabel =
 		view.type === 'edit'
 			? `dewy ∙ edit: ${view.task.content}`
-			: `dewy ∙ ${view.query}`;
+			: `dewy ∙ ${view.query === homeFilter ? 'home' : view.query}`;
 
 	if (view.type === 'edit') {
 		return (
-			<Box flexDirection="column">
+			<Box flexDirection="column" paddingLeft={2}>
 				<Text bold color="cyan">
 					{viewLabel}
 				</Text>
-				<EditView
-					task={view.task}
-					api={api}
-					onBack={() => {
-						setView({type: 'filter', query: homeFilter});
-						refresh();
-					}}
-				/>
+				<Box
+					flexDirection="column"
+					borderStyle="round"
+					borderColor="cyan"
+					paddingX={1}
+				>
+					<EditView
+						task={view.task}
+						api={api}
+						onBack={() => {
+							setView({type: 'filter', query: homeFilter});
+							refresh();
+						}}
+					/>
+				</Box>
 			</Box>
 		);
 	}
 
 	return (
 		<Box flexDirection="column">
-			<Text bold color="cyan">
-				{viewLabel}
-			</Text>
-			<TaskListView
-				tasks={tasks}
-				projects={projects}
-				message={message}
-				input={input}
-				setInput={setInput}
-				onSubmit={handleSubmit}
-			/>
+			<Box flexDirection="column" paddingLeft={2}>
+				<TaskListView tasks={tasks} projects={projects} viewLabel={viewLabel} />
+				{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>
+			)}
 		</Box>
 	);
 }
diff --git a/source/commands.ts b/source/commands.ts
index 02c8278..c6cfbbd 100644
--- a/source/commands.ts
+++ b/source/commands.ts
@@ -8,7 +8,6 @@ export type CommandContext = {
 	projects: Map<string, string>;
 	homeFilter: string;
 	setMessage: (msg: string) => void;
-
 	refresh: () => Promise<void>;
 	setView: (view: View) => void;
 	exit: () => void;
diff --git a/source/edit-view.tsx b/source/edit-view.tsx
index d7fd280..01aac8e 100644
--- a/source/edit-view.tsx
+++ b/source/edit-view.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {Box, Text, useInput} from 'ink';
+import {Text, useInput} from 'ink';
 import TextInput from 'ink-text-input';
 import {type TodoistApi, type Task} from '@doist/todoist-api-typescript';
 import {priorityColor} from './utils.js';
@@ -98,7 +98,7 @@ export default function EditView({task, api, onBack}: EditViewProps) {
 
 			if (key.return && !editing) {
 				setEditing(true);
-				setEditValue(getFieldValue(task, fields[cursor]!.key));
+				setEditValue(fieldValues[fields[cursor]!.key] ?? '');
 			}
 		},
 		{isActive: !editing},
@@ -114,7 +114,7 @@ export default function EditView({task, api, onBack}: EditViewProps) {
 	);
 
 	return (
-		<Box flexDirection="column">
+		<>
 			{fields.map((f, i) => (
 				<Text key={f.key}>
 					{cursor === i ? '> ' : '  '}
@@ -132,11 +132,12 @@ export default function EditView({task, api, onBack}: EditViewProps) {
 					)}
 				</Text>
 			))}
+			<Text>{''}</Text>
 			<Text dimColor>
 				{editing
 					? '  Enter to save ∙ Escape to cancel'
 					: '  Enter to edit ∙ Escape to go back'}
 			</Text>
-		</Box>
+		</>
 	);
 }
diff --git a/source/task-list-view.tsx b/source/task-list-view.tsx
index 1f92689..be56b5e 100644
--- a/source/task-list-view.tsx
+++ b/source/task-list-view.tsx
@@ -1,82 +1,82 @@
 import React from 'react';
 import {Box, Text} from 'ink';
-import TextInput from 'ink-text-input';
 import {type Task} from '@doist/todoist-api-typescript';
-import {commands} from './commands.js';
 import {priorityColor} from './utils.js';
 
 type TaskListViewProps = {
 	tasks: Task[];
 	projects: Map<string, string>;
-	message: string;
-	input: string;
-	setInput: (value: string) => void;
-	onSubmit: (value: string) => Promise<void>;
+	viewLabel: string;
 };
 
+function ProjectLabel({name}: {name: string | undefined}) {
+	if (!name) return null;
+	return (
+		<Text dimColor color="blue">
+			{' '}
+			#{name}
+		</Text>
+	);
+}
+
+function Labels({labels}: {labels: string[]}) {
+	if (labels.length === 0) return null;
+	return (
+		<Text dimColor color="yellow">
+			{' '}
+			{labels.map(l => `@${l}`).join(' ')}
+		</Text>
+	);
+}
+
+function DueDate({date}: {date: string | undefined}) {
+	if (!date) return null;
+	return (
+		<Text dimColor color="magenta">
+			{' '}
+			{date}
+		</Text>
+	);
+}
+
+function Priority({priority}: {priority: number}) {
+	const display = 5 - priority;
+	if (display >= 4) return null;
+	return (
+		<Text dimColor color={priorityColor(display)}>
+			{' '}
+			p{display}
+		</Text>
+	);
+}
+
 export default function TaskListView({
 	tasks,
 	projects,
-	message,
-	input,
-	setInput,
-	onSubmit,
+	viewLabel,
 }: TaskListViewProps) {
 	return (
 		<>
-			{tasks.map((task, i) => (
-				<Text key={task.id}>
-					<Text dimColor>{i + 1}.</Text> {task.content}
-					{projects.get(task.projectId) ? (
-						<Text dimColor color="blue">
-							{' '}
-							#{projects.get(task.projectId)}
-						</Text>
-					) : (
-						''
-					)}
-					{task.labels.length > 0 ? (
-						<Text dimColor color="yellow">
-							{' '}
-							{task.labels.map(l => `@${l}`).join(' ')}
-						</Text>
-					) : (
-						''
-					)}
-					{task.due?.date ? (
-						<Text dimColor color="magenta">
-							{' '}
-							{task.due.date}
-						</Text>
-					) : (
-						''
-					)}
-					{task.priority > 1 ? (
-						<Text dimColor color={priorityColor(5 - task.priority)}>
-							{' '}
-							p{5 - task.priority}
-						</Text>
-					) : (
-						''
-					)}
-				</Text>
-			))}
-			{message && <Text color="yellow">{message}</Text>}
-			<Box>
-				<Text bold color="green">
-					{'> '}
-				</Text>
-				<TextInput value={input} onChange={setInput} onSubmit={onSubmit} />
+			<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>
-			{input &&
-				commands
-					.filter(c => c.prefix.startsWith(input))
-					.map(c => (
-						<Text key={c.prefix} dimColor>
-							{'  '}
-							{c.hint}
-						</Text>
-					))}
 		</>
 	);
 }
-- 
2.51.2