@rushinglabs/taskfile 0.2.0

package/dist/tui/App.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useApp, useInput } from "ink";
+import { Frame } from "./Frame.js";
+import { TodosPage } from "./TodosPage.js";
+import { SettingsPage } from "./SettingsPage.js";
+import { AddTaskInput } from "./AddTaskInput.js";
+import { SnapshotsModal } from "./SnapshotsModal.js";
+import { SnapshotDetailView } from "./SnapshotDetailView.js";
+import { loadSettings, saveSettings } from "../settings.js";
+import { computeProgress, createList, loadLists, loadTasks, renameList } from "../store.js";
+import { deleteSnapshot, listSnapshots, loadSnapshotDetail, } from "../snapshots.js";
+const NAV_HINT = "↑/↓ cycle pages · ←/→ switch focus · r rename list · Tab switch · Ctrl+N new list · h snapshots · q quit";
+const SNAPSHOT_MODAL_HINT = "↑/k ↓/j select · enter/space view · d delete · esc close";
+const SNAPSHOT_CONFIRM_DELETE_HINT = "y confirm delete · n/esc cancel";
+const VIEW_SNAPSHOT_HINT = "esc/h back to live view";
+function buildPages(lists) {
+    return [...lists.map((list) => ({ type: "list", listId: list.id })), { type: "settings" }];
+}
+function pagesEqual(a, b) {
+    if (a.type === "settings" || b.type === "settings") {
+        return a.type === b.type;
+    }
+    return a.listId === b.listId;
+}
+export function App() {
+    const { exit } = useApp();
+    const [lists, setLists] = useState(() => loadLists());
+    const [settings, setSettings] = useState(() => loadSettings());
+    const [page, setPage] = useState(() => {
+        const savedId = settings.lastActiveListId;
+        const match = savedId !== null && lists.some((list) => list.id === savedId);
+        return { type: "list", listId: match ? savedId : lists[0].id };
+    });
+    const [mode, setMode] = useState("normal");
+    const [focus, setFocus] = useState("content");
+    const [navLocked, setNavLocked] = useState(false);
+    const [message, setMessage] = useState(undefined);
+    const [hint, setHint] = useState("");
+    const [progress, setProgress] = useState(() => {
+        const activeListId = page.type === "list" ? page.listId : lists[0].id;
+        const { done, total } = computeProgress(loadTasks(activeListId));
+        return { done, total };
+    });
+    const [snapshotSummaries, setSnapshotSummaries] = useState([]);
+    const [snapshotSelectedIndex, setSnapshotSelectedIndex] = useState(0);
+    const [snapshotModalMode, setSnapshotModalMode] = useState("list");
+    const [pendingDeleteSnapshotId, setPendingDeleteSnapshotId] = useState(undefined);
+    const [viewingSnapshot, setViewingSnapshot] = useState(undefined);
+    useEffect(() => {
+        if (page.type === "list") {
+            setSettings(saveSettings({ lastActiveListId: page.listId }));
+        }
+    }, [page]);
+    function refreshLists() {
+        setLists(loadLists());
+    }
+    const renamingListId = mode === "nav-rename-list" && page.type === "list" ? page.listId : undefined;
+    function cyclePage(delta) {
+        const pages = buildPages(lists);
+        const currentIndex = pages.findIndex((candidate) => pagesEqual(candidate, page));
+        const nextIndex = (currentIndex + delta + pages.length) % pages.length;
+        setPage(pages[nextIndex]);
+    }
+    useInput((input, key) => {
+        if (key.ctrl && input === "c") {
+            exit();
+            return;
+        }
+        if (viewingSnapshot) {
+            if (key.escape || input === "h") {
+                setViewingSnapshot(undefined);
+                setHint(NAV_HINT);
+            }
+            return;
+        }
+        if (mode === "snapshots") {
+            if (snapshotModalMode === "confirm-delete") {
+                if (input === "y" || input === "d" || key.return) {
+                    if (pendingDeleteSnapshotId !== undefined) {
+                        deleteSnapshot(pendingDeleteSnapshotId);
+                        const next = listSnapshots();
+                        setSnapshotSummaries(next);
+                        setSnapshotSelectedIndex((index) => Math.min(index, Math.max(next.length - 1, 0)));
+                    }
+                    setPendingDeleteSnapshotId(undefined);
+                    setSnapshotModalMode("list");
+                    setHint(SNAPSHOT_MODAL_HINT);
+                }
+                else if (input === "n" || key.escape) {
+                    setPendingDeleteSnapshotId(undefined);
+                    setSnapshotModalMode("list");
+                    setHint(SNAPSHOT_MODAL_HINT);
+                }
+                return;
+            }
+            if (key.escape) {
+                setMode("normal");
+                setHint(NAV_HINT);
+                return;
+            }
+            if (key.upArrow || input === "k") {
+                setSnapshotSelectedIndex((index) => Math.max(index - 1, 0));
+                return;
+            }
+            if (key.downArrow || input === "j") {
+                setSnapshotSelectedIndex((index) => Math.min(index + 1, snapshotSummaries.length - 1));
+                return;
+            }
+            if (input === " " || key.return) {
+                const summary = snapshotSummaries[snapshotSelectedIndex];
+                if (summary) {
+                    const detail = loadSnapshotDetail(summary.id);
+                    if (detail) {
+                        setViewingSnapshot(detail);
+                        setMode("normal");
+                        setHint(VIEW_SNAPSHOT_HINT);
+                    }
+                }
+                return;
+            }
+            if (input === "d" || input === "x") {
+                const summary = snapshotSummaries[snapshotSelectedIndex];
+                if (summary) {
+                    setPendingDeleteSnapshotId(summary.id);
+                    setSnapshotModalMode("confirm-delete");
+                    setHint(SNAPSHOT_CONFIRM_DELETE_HINT);
+                }
+                return;
+            }
+            return;
+        }
+        if (mode === "new-list" || mode === "nav-rename-list") {
+            if (key.escape) {
+                setMode("normal");
+                setHint(NAV_HINT);
+            }
+            return;
+        }
+        if (navLocked) {
+            return;
+        }
+        if (input === "h") {
+            setMessage(undefined);
+            setSnapshotSummaries(listSnapshots());
+            setSnapshotSelectedIndex(0);
+            setSnapshotModalMode("list");
+            setMode("snapshots");
+            setHint(SNAPSHOT_MODAL_HINT);
+            return;
+        }
+        if (key.ctrl && input === "n") {
+            setMessage(undefined);
+            setHint("enter save · esc cancel");
+            setMode("new-list");
+            return;
+        }
+        if (key.tab) {
+            setMessage(undefined);
+            cyclePage(key.shift ? -1 : 1);
+            return;
+        }
+        if (key.leftArrow) {
+            setFocus("nav");
+            setHint(NAV_HINT);
+            return;
+        }
+        if (key.rightArrow) {
+            setFocus("content");
+            return;
+        }
+        if (focus === "nav") {
+            if (key.upArrow) {
+                setMessage(undefined);
+                cyclePage(-1);
+                return;
+            }
+            if (key.downArrow) {
+                setMessage(undefined);
+                cyclePage(1);
+                return;
+            }
+            if (input === "r" && page.type === "list") {
+                setMessage(undefined);
+                setHint("enter save · esc cancel");
+                setMode("nav-rename-list");
+                return;
+            }
+        }
+    });
+    return (_jsxs(Frame, { message: message, hint: hint, width: settings.width, height: settings.height, lists: lists, activePage: page, progress: progress, progressAnimated: settings.progressAnimation, navFocused: focus === "nav", snapshotDate: viewingSnapshot?.date, children: [lists.map((list) => {
+                const visible = !viewingSnapshot && mode === "normal" && page.type === "list" && page.listId === list.id;
+                return (_jsx(TodosPage, { listId: list.id, listName: list.name, onListRenamed: refreshLists, visible: visible, active: visible && focus === "content", setMessage: setMessage, onNavLockChange: setNavLocked, onHintChange: setHint, onProgressChange: setProgress }, list.id));
+            }), _jsx(SettingsPage, { visible: !viewingSnapshot && mode === "normal" && page.type === "settings", active: !viewingSnapshot && mode === "normal" && page.type === "settings" && focus === "content", settings: settings, onSettingsChange: setSettings, setMessage: setMessage, onNavLockChange: setNavLocked, onHintChange: setHint }), viewingSnapshot && _jsx(SnapshotDetailView, { detail: viewingSnapshot }), mode === "snapshots" && (_jsx(SnapshotsModal, { summaries: snapshotSummaries, selectedIndex: snapshotSelectedIndex, modalMode: snapshotModalMode, pendingDeleteId: pendingDeleteSnapshotId })), mode === "new-list" && (_jsx(AddTaskInput, { label: "New list: ", onSubmit: (name) => {
+                    const list = createList(name);
+                    setLists(loadLists());
+                    setPage({ type: "list", listId: list.id });
+                    setMode("normal");
+                } })), renamingListId !== undefined && (_jsx(AddTaskInput, { label: "Rename list: ", initialValue: lists.find((l) => l.id === renamingListId)?.name ?? "", onSubmit: (text) => {
+                    const result = renameList(renamingListId, text);
+                    if (result.status === "blocked") {
+                        setMessage(result.reason);
+                    }
+                    else if (result.status === "ok") {
+                        refreshLists();
+                    }
+                    setMode("normal");
+                    setHint(NAV_HINT);
+                } }))] }));
+}

package/dist/tui/Divider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "ink";
+export function Divider({ width, dotted }) {
+    return _jsx(Text, { dimColor: true, children: (dotted ? "·" : "─").repeat(width) });
+}

package/dist/tui/EditTaskModal.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import TextInput from "ink-text-input";
+import { theme } from "./theme.js";
+export function EditTaskModal({ value, onChange, onSubmit, focus, priority, }) {
+    return (_jsxs(Box, { borderStyle: "round", borderColor: theme.accent, flexDirection: "column", paddingX: 1, children: [_jsx(Text, { children: "Edit task:" }), _jsx(TextInput, { value: value, onChange: onChange, onSubmit: onSubmit, focus: focus === "input" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { inverse: focus === "priority", children: [" [", priority ? "★" : " ", "] Priority "] }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { inverse: focus === "save", children: " [Save] " }), _jsx(Text, { children: "  " }), _jsx(Text, { inverse: focus === "cancel", children: " [Cancel] " })] })] }));
+}

package/dist/tui/Frame.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { Divider } from "./Divider.js";
+import { MessageArea } from "./MessageArea.js";
+import { ProgressBar } from "./ProgressBar.js";
+import { Sidebar } from "./Sidebar.js";
+import { theme } from "./theme.js";
+const BORDER_WIDTH = 1; // each side
+const PADDING_X = 1; // each side
+const SIDEBAR_WIDTH = 16;
+const TITLE = "Taskfile";
+const TITLE_SEPARATOR = " │ ";
+export function Frame({ children, message, hint, width, height, lists, activePage, progress, progressAnimated, navFocused, snapshotDate, }) {
+    const innerWidth = width - BORDER_WIDTH * 2 - PADDING_X * 2;
+    const contentWidth = innerWidth - SIDEBAR_WIDTH;
+    const contentPaddingLeft = 1;
+    const messageAreaWidth = contentWidth - contentPaddingLeft;
+    const titleWidth = SIDEBAR_WIDTH;
+    const progressBarWidth = Math.max(innerWidth - titleWidth - TITLE_SEPARATOR.length, 0);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, width: width, height: height, paddingX: PADDING_X, children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { bold: true, color: theme.accent, children: TITLE.padEnd(titleWidth, " ") }), _jsx(Text, { dimColor: true, children: TITLE_SEPARATOR }), snapshotDate ? (_jsxs(Text, { bold: true, color: theme.accent, children: ["Snapshot - ", snapshotDate] })) : (_jsx(ProgressBar, { done: progress.done, total: progress.total, width: progressBarWidth, animated: progressAnimated }))] }), _jsx(Divider, { width: innerWidth }), _jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsx(Sidebar, { width: SIDEBAR_WIDTH, lists: lists, activePage: activePage, focused: navFocused }), _jsxs(Box, { flexDirection: "column", width: contentWidth, paddingLeft: contentPaddingLeft, children: [_jsx(MessageArea, { message: message, width: messageAreaWidth }), children] })] }), _jsx(Divider, { width: innerWidth }), _jsx(Text, { dimColor: true, children: hint || " " })] }));
+}

package/dist/tui/MessageArea.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { Divider } from "./Divider.js";
+export function MessageArea({ message, width }) {
+    return (_jsxs(Box, { height: 4, width: width, flexDirection: "column", children: [_jsx(Text, { color: "yellow", children: message || " " }), _jsx(Text, { children: " " }), _jsx(Divider, { width: width, dotted: true }), _jsx(Text, { children: " " })] }));
+}

package/dist/tui/ProgressBar.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Text } from "ink";
+import { theme } from "./theme.js";
+const WAVE_INTERVAL_MS = 120;
+const WAVE_WIDTH = 3;
+const WAVE_COLOR = "cyanBright"; // bright counterpart of theme.accent ("cyan")
+const FILLED_CHAR = "▓";
+const EMPTY_CHAR = "░";
+export function ProgressBar({ done, total, width, animated, }) {
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        if (!animated)
+            return;
+        const interval = setInterval(() => setTick((t) => t + 1), WAVE_INTERVAL_MS);
+        return () => clearInterval(interval);
+    }, [animated]);
+    const percent = total === 0 ? 0 : Math.round((done / total) * 100);
+    const label = `Progress ${percent} % `;
+    const barWidth = Math.max(width - label.length, 0);
+    const filledWidth = Math.min(barWidth, Math.round((percent / 100) * barWidth));
+    const emptyWidth = barWidth - filledWidth;
+    const segments = [];
+    if (animated && filledWidth > 0) {
+        const waveCenter = tick % filledWidth;
+        const waveStart = Math.max(0, waveCenter - Math.floor(WAVE_WIDTH / 2));
+        const waveEnd = Math.min(filledWidth, waveStart + WAVE_WIDTH);
+        if (waveStart > 0)
+            segments.push({ text: FILLED_CHAR.repeat(waveStart), color: theme.accent });
+        segments.push({ text: FILLED_CHAR.repeat(waveEnd - waveStart), color: WAVE_COLOR });
+        if (filledWidth > waveEnd)
+            segments.push({ text: FILLED_CHAR.repeat(filledWidth - waveEnd), color: theme.accent });
+    }
+    else if (filledWidth > 0) {
+        segments.push({ text: FILLED_CHAR.repeat(filledWidth), color: theme.accent });
+    }
+    if (emptyWidth > 0) {
+        segments.push({ text: EMPTY_CHAR.repeat(emptyWidth), dim: true });
+    }
+    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.accent, children: label }), segments.map((segment, index) => (_jsx(Text, { color: segment.color, dimColor: segment.dim, children: segment.text }, index)))] }));
+}

package/dist/tui/SettingsPage.js

@@ -0,0 +1,110 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Text, useApp, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { pruneSnapshots } from "../snapshots.js";
+import { saveSettings, SNAPSHOT_RETENTION_OPTIONS } from "../settings.js";
+const VIEW_HINT = "↑/k ↓/j select · enter edit · space toggle · ←/→ nav focus · Tab lists · Ctrl+N new list · q quit";
+const EDIT_HINT = "enter save · esc cancel";
+const RETENTION_LABELS = {
+    "1-week": "1 week",
+    "1-month": "1 month",
+    "3-months": "3 months",
+    "6-months": "6 months",
+    "12-months": "12 months",
+    forever: "Forever",
+};
+const FIELDS = [
+    { key: "width", label: "Window width", type: "number" },
+    { key: "height", label: "Window height", type: "number" },
+    { key: "progressAnimation", label: "Progress bar animation", type: "boolean" },
+    { key: "dailySnapshotsEnabled", label: "Daily snapshots", type: "boolean" },
+    {
+        key: "dailySnapshotRetention",
+        label: "Snapshot retention",
+        type: "select",
+        options: SNAPSHOT_RETENTION_OPTIONS,
+        formatOption: (value) => RETENTION_LABELS[value],
+    },
+];
+export function SettingsPage({ visible, active, settings, onSettingsChange, setMessage, onNavLockChange, onHintChange, }) {
+    const { exit } = useApp();
+    const [selectedField, setSelectedField] = useState(0);
+    const [mode, setMode] = useState("view");
+    const [editValue, setEditValue] = useState("");
+    useEffect(() => {
+        onNavLockChange(mode === "edit");
+        if (active) {
+            onHintChange(mode === "view" ? VIEW_HINT : EDIT_HINT);
+        }
+    }, [mode, active, onNavLockChange, onHintChange]);
+    useInput((input, key) => {
+        if (mode === "edit") {
+            if (key.escape) {
+                setMode("view");
+            }
+            return;
+        }
+        // mode === "view"
+        setMessage(undefined);
+        if (input === "q") {
+            exit();
+            return;
+        }
+        if (key.upArrow || input === "k") {
+            setSelectedField((index) => Math.max(index - 1, 0));
+            return;
+        }
+        if (key.downArrow || input === "j") {
+            setSelectedField((index) => Math.min(index + 1, FIELDS.length - 1));
+            return;
+        }
+        const field = FIELDS[selectedField];
+        if (field.type === "boolean" && (input === " " || key.return)) {
+            const next = saveSettings({ [field.key]: !settings[field.key] });
+            onSettingsChange(next);
+            return;
+        }
+        if (field.type === "select" && (input === " " || key.return)) {
+            const currentValue = settings[field.key];
+            const currentOptionIndex = field.options.indexOf(currentValue);
+            const nextValue = field.options[(currentOptionIndex + 1) % field.options.length];
+            const next = saveSettings({ [field.key]: nextValue });
+            onSettingsChange(next);
+            pruneSnapshots(nextValue);
+            return;
+        }
+        if (key.return) {
+            setEditValue("");
+            setMode("edit");
+        }
+    }, { isActive: active });
+    function submitEdit(text) {
+        const field = FIELDS[selectedField].key;
+        const parsed = Number.parseInt(text, 10);
+        if (Number.isNaN(parsed)) {
+            setMessage("Please enter a whole number.");
+            setMode("view");
+            return;
+        }
+        const next = saveSettings({ [field]: parsed });
+        onSettingsChange(next);
+        setMessage(next[field] === parsed ? "Saved." : `Saved (clamped to ${next[field]}).`);
+        setMode("view");
+    }
+    if (!visible)
+        return _jsx(_Fragment, {});
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Settings" }), _jsx(Text, { children: " " }), FIELDS.map((field, index) => {
+                const isSelected = visible && mode === "view" && index === selectedField;
+                const isEditing = visible && mode === "edit" && index === selectedField;
+                if (field.type === "boolean") {
+                    const value = settings[field.key];
+                    return (_jsx(Box, { children: _jsxs(Text, { inverse: isSelected, children: ["[", value ? "x" : " ", "] ", field.label] }) }, field.key));
+                }
+                if (field.type === "select") {
+                    const value = settings[field.key];
+                    return (_jsx(Box, { children: _jsxs(Text, { inverse: isSelected, children: [field.label, ": ", field.formatOption(value)] }) }, field.key));
+                }
+                return (_jsxs(Box, { children: [_jsxs(Text, { inverse: isSelected, children: [field.label, ": "] }), isEditing ? (_jsx(TextInput, { value: editValue, onChange: setEditValue, onSubmit: submitEdit, placeholder: String(settings[field.key]) })) : (_jsx(Text, { children: settings[field.key] }))] }, field.key));
+            })] }));
+}

package/dist/tui/Sidebar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { theme } from "./theme.js";
+function NavRow({ label, active, contentWidth }) {
+    const truncated = label.length > contentWidth ? `${label.slice(0, Math.max(contentWidth - 1, 0))}…` : label;
+    const row = ` ${truncated}`.padEnd(contentWidth, " ");
+    return (_jsx(Text, { backgroundColor: active ? theme.navHighlightBg : undefined, color: active ? theme.navHighlightFg : undefined, bold: active, children: row }));
+}
+export function Sidebar({ width, lists, activePage, focused, }) {
+    const contentWidth = width - 1; // 1 column reserved for the right border
+    return (_jsxs(Box, { flexDirection: "column", width: width, flexGrow: 1, borderStyle: "single", borderColor: focused ? theme.accent : undefined, borderTop: false, borderBottom: false, borderLeft: false, children: [lists.map((list) => (_jsx(NavRow, { label: list.name, active: activePage.type === "list" && activePage.listId === list.id, contentWidth: contentWidth }, list.id))), _jsx(Box, { flexGrow: 1 }), _jsx(NavRow, { label: "Settings", active: activePage.type === "settings", contentWidth: contentWidth })] }));
+}

package/dist/tui/SnapshotDetailView.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { TaskList } from "./TaskList.js";
+export function SnapshotDetailView({ detail }) {
+    return (_jsx(Box, { flexDirection: "column", children: detail.lists.map((list, index) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, underline: true, children: list.name }), _jsx(TaskList, { tasks: list.tasks, selectedIndex: -1 })] }, index))) }));
+}

package/dist/tui/SnapshotsModal.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { theme } from "./theme.js";
+export function SnapshotsModal({ summaries, selectedIndex, modalMode, pendingDeleteId, }) {
+    const pending = summaries.find((summary) => summary.id === pendingDeleteId);
+    return (_jsxs(Box, { borderStyle: "round", borderColor: theme.accent, flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, children: "Daily Snapshots" }), _jsx(Text, { children: " " }), summaries.length === 0 && _jsx(Text, { dimColor: true, children: "No snapshots yet." }), summaries.map((summary, index) => (_jsx(Text, { inverse: index === selectedIndex, children: summary.date }, summary.id))), modalMode === "confirm-delete" && pending && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Delete snapshot from ", pending.date, "? (y/n)"] }) }))] }));
+}

package/dist/tui/TaskList.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Text } from "ink";
+const TWINKLE_FRAMES = ["yellow", "yellowBright", "white", "yellowBright"];
+const TWINKLE_INTERVAL_MS = 400;
+export function TaskList({ tasks, selectedIndex }) {
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => setTick((t) => (t + 1) % TWINKLE_FRAMES.length), TWINKLE_INTERVAL_MS);
+        return () => clearInterval(interval);
+    }, []);
+    if (tasks.length === 0) {
+        return _jsx(Text, { dimColor: true, children: "No tasks yet. Press a to add one." });
+    }
+    return (_jsx(Box, { flexDirection: "column", children: tasks.map((task, index) => {
+            const marker = task.done ? "[x]" : "[ ]";
+            const selected = index === selectedIndex;
+            const label = task.parentId !== null
+                ? `  - ${marker} #${task.id} ${task.text}`
+                : `${marker} #${task.id} ${task.text}`;
+            return (_jsxs(Box, { children: [_jsx(Text, { color: task.priority ? TWINKLE_FRAMES[tick] : undefined, children: task.priority ? "*" : " " }), _jsx(Text, { inverse: selected, strikethrough: task.done, children: " " + label })] }, task.id));
+        }) }));
+}