diff --git a/source/app.tsx b/source/app.tsx
index 33be1d4..b365049 100644
--- a/source/app.tsx
+++ b/source/app.tsx
@@ -20,6 +20,60 @@ if (!apiToken) {
const api = new TodoistApi(apiToken);
+function CommandHints({input}: {input: string}) {
+ if (input === '?') {
+ return commands.map(c => (
+
+ {' '}
+ {c.hint}
+
+ ));
+ }
+
+ if (input) {
+ return commands
+ .filter(c => c.prefix.startsWith(input))
+ .map(c => (
+
+ {' '}
+ {c.hint}
+
+ ));
+ }
+
+ return {' type ? for help'};
+}
+
+function CommandInput({
+ input,
+ setInput,
+ onSubmit,
+}: {
+ input: string;
+ setInput: (value: string) => void;
+ onSubmit: (value: string) => Promise;
+}) {
+ return (
+ <>
+
+
+
+ {'> '}
+
+
+
+
+
+ >
+ );
+}
+
export default function App() {
const {exit} = useApp();
const [tasks, setTasks] = useState([]);
@@ -98,73 +152,51 @@ export default function App() {
? `dewy ∙ edit: ${view.task.content}`
: `dewy ∙ ${view.query === homeFilter ? 'home' : view.query}`;
- if (view.type === 'edit') {
- return (
-
-
- {viewLabel}
-
-
- {
- setView({type: 'filter', query: homeFilter});
- refresh();
- }}
- />
-
-
- );
- }
+ const isEditing = view.type === 'edit';
return (
-
- {message && {message}}
-
-
-
-
- {'> '}
-
-
-
+
+ {viewLabel}
+
+ {isEditing ? (
+
+ {
+ setView({type: 'filter', query: homeFilter});
+ refresh();
+ }}
+ />
+
+ ) : (
+ <>
+
+
+
+ {message && {message}}
+ >
+ )}
- {input === '?' ? (
- commands.map(c => (
-
- {' '}
- {c.hint}
-
- ))
- ) : input ? (
- commands
- .filter(c => c.prefix.startsWith(input))
- .map(c => (
-
- {' '}
- {c.hint}
-
- ))
- ) : (
- {' type ? for help'}
+ {!isEditing && (
+
)}
);
diff --git a/source/edit-view.tsx b/source/edit-view.tsx
index 01aac8e..d56994c 100644
--- a/source/edit-view.tsx
+++ b/source/edit-view.tsx
@@ -11,15 +11,21 @@ type EditViewProps = {
};
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 @@ export default function EditView({task, api, onBack}: EditViewProps) {
onChange={setEditValue}
onSubmit={handleSave}
/>
- ) : (
+ ) : fieldValues[f.key] ? (
{fieldValues[f.key]}
+ ) : (
+ {f.placeholder}
)}
))}
diff --git a/source/task-list-view.tsx b/source/task-list-view.tsx
index be56b5e..8702d44 100644
--- 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;
- viewLabel: string;
};
function ProjectLabel({name}: {name: string | undefined}) {
@@ -50,33 +49,19 @@ function Priority({priority}: {priority: number}) {
);
}
-export default function TaskListView({
- tasks,
- projects,
- viewLabel,
-}: TaskListViewProps) {
+export default function TaskListView({tasks, projects}: TaskListViewProps) {
return (
<>
-
- {viewLabel}
-
-
- {tasks.length === 0 && No tasks}
- {tasks.map((task, i) => (
-
- {i + 1}. {task.content}
-
-
-
-
-
- ))}
-
+ {tasks.length === 0 && No tasks}
+ {tasks.map((task, i) => (
+
+ {i + 1}. {task.content}
+
+
+
+
+
+ ))}
>
);
}