floq 0.1.0 → 0.2.0

package/dist/ui/components/KanbanBoard.js

@@ -0,0 +1,508 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import TextInput from 'ink-text-input';
+import { eq, and, inArray } from 'drizzle-orm';
+import { v4 as uuidv4 } from 'uuid';
+import { KanbanColumn } from './KanbanColumn.js';
+import { HelpModal } from './HelpModal.js';
+import { FunctionKeyBar } from './FunctionKeyBar.js';
+import { SearchBar } from './SearchBar.js';
+import { SearchResults } from './SearchResults.js';
+import { getDb, schema } from '../../db/index.js';
+import { t, fmt } from '../../i18n/index.js';
+import { useTheme } from '../theme/index.js';
+import { isTursoEnabled, getTursoConfig } from '../../config.js';
+import { VERSION } from '../../version.js';
+const COLUMNS = ['todo', 'doing', 'done'];
+export function KanbanBoard({ onSwitchToGtd }) {
+    const theme = useTheme();
+    const { exit } = useApp();
+    const [mode, setMode] = useState('normal');
+    const [inputValue, setInputValue] = useState('');
+    const [currentColumnIndex, setCurrentColumnIndex] = useState(0);
+    const [selectedTaskIndices, setSelectedTaskIndices] = useState({
+        todo: 0,
+        doing: 0,
+        done: 0,
+    });
+    const [tasks, setTasks] = useState({
+        todo: [],
+        doing: [],
+        done: [],
+    });
+    const [message, setMessage] = useState(null);
+    const [selectedTask, setSelectedTask] = useState(null);
+    const [taskComments, setTaskComments] = useState([]);
+    const [selectedCommentIndex, setSelectedCommentIndex] = useState(0);
+    const [projects, setProjects] = useState([]);
+    const [projectSelectIndex, setProjectSelectIndex] = useState(0);
+    // Search state
+    const [searchQuery, setSearchQuery] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [searchResultIndex, setSearchResultIndex] = useState(0);
+    const i18n = t();
+    // Status mapping:
+    // TODO = inbox + someday
+    // Doing = next + waiting
+    // Done = done
+    const loadTasks = useCallback(async () => {
+        const db = getDb();
+        // TODO: inbox + someday (non-project tasks)
+        const todoTasks = await db
+            .select()
+            .from(schema.tasks)
+            .where(and(inArray(schema.tasks.status, ['inbox', 'someday']), eq(schema.tasks.isProject, false)));
+        // Doing: next + waiting (non-project tasks)
+        const doingTasks = await db
+            .select()
+            .from(schema.tasks)
+            .where(and(inArray(schema.tasks.status, ['next', 'waiting']), eq(schema.tasks.isProject, false)));
+        // Done: done (non-project tasks)
+        const doneTasks = await db
+            .select()
+            .from(schema.tasks)
+            .where(and(eq(schema.tasks.status, 'done'), eq(schema.tasks.isProject, false)));
+        // Load projects for linking
+        const projectTasks = await db
+            .select()
+            .from(schema.tasks)
+            .where(and(eq(schema.tasks.isProject, true), eq(schema.tasks.status, 'next')));
+        setTasks({
+            todo: todoTasks,
+            doing: doingTasks,
+            done: doneTasks,
+        });
+        setProjects(projectTasks);
+    }, []);
+    useEffect(() => {
+        loadTasks();
+    }, [loadTasks]);
+    const loadTaskComments = useCallback(async (taskId) => {
+        const db = getDb();
+        const comments = await db
+            .select()
+            .from(schema.comments)
+            .where(eq(schema.comments.taskId, taskId));
+        setTaskComments(comments);
+    }, []);
+    const addCommentToTask = useCallback(async (task, content) => {
+        const db = getDb();
+        await db.insert(schema.comments).values({
+            id: uuidv4(),
+            taskId: task.id,
+            content: content.trim(),
+            createdAt: new Date(),
+        });
+        setMessage(i18n.tui.commentAdded || 'Comment added');
+        await loadTaskComments(task.id);
+    }, [i18n.tui.commentAdded, loadTaskComments]);
+    const deleteComment = useCallback(async (comment) => {
+        const db = getDb();
+        await db.delete(schema.comments).where(eq(schema.comments.id, comment.id));
+        setMessage(i18n.tui.commentDeleted || 'Comment deleted');
+        if (selectedTask) {
+            await loadTaskComments(selectedTask.id);
+        }
+    }, [i18n.tui.commentDeleted, loadTaskComments, selectedTask]);
+    const linkTaskToProject = useCallback(async (task, project) => {
+        const db = getDb();
+        await db.update(schema.tasks)
+            .set({ parentId: project.id, updatedAt: new Date() })
+            .where(eq(schema.tasks.id, task.id));
+        setMessage(fmt(i18n.tui.linkedToProject || 'Linked "{title}" to {project}', { title: task.title, project: project.title }));
+        await loadTasks();
+    }, [i18n.tui.linkedToProject, loadTasks]);
+    const currentColumn = COLUMNS[currentColumnIndex];
+    const currentTasks = tasks[currentColumn];
+    const selectedTaskIndex = selectedTaskIndices[currentColumn];
+    // Get all tasks for search
+    const getAllTasks = useCallback(() => {
+        const allTasks = [];
+        for (const col of COLUMNS) {
+            allTasks.push(...tasks[col]);
+        }
+        return allTasks;
+    }, [tasks]);
+    // Search tasks by query
+    const searchTasks = useCallback((query) => {
+        if (!query.trim())
+            return [];
+        const lowerQuery = query.toLowerCase();
+        const allTasks = getAllTasks();
+        return allTasks.filter(task => task.title.toLowerCase().includes(lowerQuery) ||
+            (task.description && task.description.toLowerCase().includes(lowerQuery)));
+    }, [getAllTasks]);
+    // Handle search query change
+    const handleSearchChange = useCallback((value) => {
+        setSearchQuery(value);
+        const results = searchTasks(value);
+        setSearchResults(results);
+        setSearchResultIndex(0);
+    }, [searchTasks]);
+    const addTask = useCallback(async (title) => {
+        if (!title.trim())
+            return;
+        const db = getDb();
+        const now = new Date();
+        await db.insert(schema.tasks)
+            .values({
+            id: uuidv4(),
+            title: title.trim(),
+            status: 'inbox', // New tasks go to inbox (which maps to TODO)
+            createdAt: now,
+            updatedAt: now,
+        });
+        setMessage(fmt(i18n.tui.added, { title: title.trim() }));
+        await loadTasks();
+    }, [i18n.tui.added, loadTasks]);
+    const handleInputSubmit = async (value) => {
+        if (mode === 'add-comment' && selectedTask) {
+            if (value.trim()) {
+                await addCommentToTask(selectedTask, value);
+            }
+            setMode('task-detail');
+            setInputValue('');
+            return;
+        }
+        // Handle search mode submit
+        if (mode === 'search') {
+            if (searchResults.length > 0) {
+                const task = searchResults[searchResultIndex];
+                setSelectedTask(task);
+                loadTaskComments(task.id);
+                setMode('task-detail');
+            }
+            else {
+                setMode('normal');
+            }
+            setSearchQuery('');
+            setSearchResults([]);
+            setSearchResultIndex(0);
+            return;
+        }
+        if (value.trim()) {
+            await addTask(value);
+        }
+        setInputValue('');
+        setMode('normal');
+    };
+    const moveTaskRight = useCallback(async (task) => {
+        const db = getDb();
+        let newStatus;
+        // Determine new status based on current status
+        if (task.status === 'inbox' || task.status === 'someday') {
+            // TODO -> Doing (next)
+            newStatus = 'next';
+        }
+        else if (task.status === 'next' || task.status === 'waiting') {
+            // Doing -> Done
+            newStatus = 'done';
+        }
+        else {
+            // Already done, do nothing
+            return;
+        }
+        await db.update(schema.tasks)
+            .set({ status: newStatus, waitingFor: null, updatedAt: new Date() })
+            .where(eq(schema.tasks.id, task.id));
+        setMessage(fmt(i18n.tui.movedTo, { title: task.title, status: i18n.status[newStatus] }));
+        await loadTasks();
+    }, [i18n.tui.movedTo, i18n.status, loadTasks]);
+    const moveTaskLeft = useCallback(async (task) => {
+        const db = getDb();
+        let newStatus;
+        // Determine new status based on current status
+        if (task.status === 'next' || task.status === 'waiting') {
+            // Doing -> TODO (inbox)
+            newStatus = 'inbox';
+        }
+        else if (task.status === 'done') {
+            // Done -> Doing (next)
+            newStatus = 'next';
+        }
+        else {
+            // Already in TODO, do nothing
+            return;
+        }
+        await db.update(schema.tasks)
+            .set({ status: newStatus, waitingFor: null, updatedAt: new Date() })
+            .where(eq(schema.tasks.id, task.id));
+        setMessage(fmt(i18n.tui.movedTo, { title: task.title, status: i18n.status[newStatus] }));
+        await loadTasks();
+    }, [i18n.tui.movedTo, i18n.status, loadTasks]);
+    const markTaskDone = useCallback(async (task) => {
+        const db = getDb();
+        await db.update(schema.tasks)
+            .set({ status: 'done', updatedAt: new Date() })
+            .where(eq(schema.tasks.id, task.id));
+        setMessage(fmt(i18n.tui.completed, { title: task.title }));
+        await loadTasks();
+    }, [i18n.tui.completed, loadTasks]);
+    const getColumnLabel = (column) => {
+        return i18n.kanban[column];
+    };
+    useInput((input, key) => {
+        // Handle help mode - any key closes
+        if (mode === 'help') {
+            setMode('normal');
+            return;
+        }
+        // Handle search mode
+        if (mode === 'search') {
+            if (key.escape) {
+                setSearchQuery('');
+                setSearchResults([]);
+                setSearchResultIndex(0);
+                setMode('normal');
+                return;
+            }
+            // Navigate search results with Ctrl+j/k or Ctrl+n/p
+            if (key.ctrl && (input === 'j' || input === 'n')) {
+                setSearchResultIndex((prev) => prev < searchResults.length - 1 ? prev + 1 : 0);
+                return;
+            }
+            if (key.ctrl && (input === 'k' || input === 'p')) {
+                setSearchResultIndex((prev) => prev > 0 ? prev - 1 : Math.max(0, searchResults.length - 1));
+                return;
+            }
+            // Let TextInput handle other keys
+            return;
+        }
+        // Handle add mode
+        if (mode === 'add' || mode === 'add-comment') {
+            if (key.escape) {
+                setInputValue('');
+                if (mode === 'add-comment') {
+                    setMode('task-detail');
+                }
+                else {
+                    setMode('normal');
+                }
+            }
+            return;
+        }
+        // Handle task-detail mode
+        if (mode === 'task-detail') {
+            if (key.escape || key.backspace || input === 'b') {
+                setMode('normal');
+                setSelectedTask(null);
+                setTaskComments([]);
+                setSelectedCommentIndex(0);
+                return;
+            }
+            // Navigate comments
+            if (key.upArrow || input === 'k') {
+                setSelectedCommentIndex((prev) => (prev > 0 ? prev - 1 : Math.max(0, taskComments.length - 1)));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setSelectedCommentIndex((prev) => (prev < taskComments.length - 1 ? prev + 1 : 0));
+                return;
+            }
+            // Delete comment
+            if (input === 'd' && taskComments.length > 0) {
+                const comment = taskComments[selectedCommentIndex];
+                deleteComment(comment).then(() => {
+                    if (selectedCommentIndex >= taskComments.length - 1) {
+                        setSelectedCommentIndex(Math.max(0, selectedCommentIndex - 1));
+                    }
+                });
+                return;
+            }
+            // Add comment
+            if (input === 'i') {
+                setMode('add-comment');
+                return;
+            }
+            // Link to project (P key)
+            if (input === 'P' && projects.length > 0) {
+                setProjectSelectIndex(0);
+                setMode('select-project');
+                return;
+            }
+            return;
+        }
+        // Handle select-project mode
+        if (mode === 'select-project') {
+            if (key.escape) {
+                setProjectSelectIndex(0);
+                setMode('task-detail');
+                return;
+            }
+            // Navigate projects
+            if (key.upArrow || input === 'k') {
+                setProjectSelectIndex((prev) => (prev > 0 ? prev - 1 : projects.length - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setProjectSelectIndex((prev) => (prev < projects.length - 1 ? prev + 1 : 0));
+                return;
+            }
+            // Select project with Enter
+            if (key.return && selectedTask && projects.length > 0) {
+                const project = projects[projectSelectIndex];
+                linkTaskToProject(selectedTask, project);
+                setProjectSelectIndex(0);
+                setMode('task-detail');
+                return;
+            }
+            return;
+        }
+        // Clear message on any input
+        if (message) {
+            setMessage(null);
+        }
+        // Show help
+        if (input === '?') {
+            setMode('help');
+            return;
+        }
+        // Search mode
+        if (input === '/') {
+            setMode('search');
+            setSearchQuery('');
+            setSearchResults([]);
+            setSearchResultIndex(0);
+            return;
+        }
+        // Quit
+        if (input === 'q' || (key.ctrl && input === 'c')) {
+            exit();
+            return;
+        }
+        // Add task
+        if (input === 'a') {
+            setMode('add');
+            return;
+        }
+        // Direct column switch with number keys
+        if (input === '1') {
+            setCurrentColumnIndex(0);
+            return;
+        }
+        if (input === '2') {
+            setCurrentColumnIndex(1);
+            return;
+        }
+        if (input === '3') {
+            setCurrentColumnIndex(2);
+            return;
+        }
+        // Navigate between columns
+        if (key.leftArrow || input === 'h') {
+            setCurrentColumnIndex((prev) => (prev > 0 ? prev - 1 : COLUMNS.length - 1));
+            return;
+        }
+        if (key.rightArrow || input === 'l') {
+            setCurrentColumnIndex((prev) => (prev < COLUMNS.length - 1 ? prev + 1 : 0));
+            return;
+        }
+        // Navigate within column
+        if (key.upArrow || input === 'k') {
+            setSelectedTaskIndices((prev) => ({
+                ...prev,
+                [currentColumn]: prev[currentColumn] > 0 ? prev[currentColumn] - 1 : Math.max(0, currentTasks.length - 1),
+            }));
+            return;
+        }
+        if (key.downArrow || input === 'j') {
+            setSelectedTaskIndices((prev) => ({
+                ...prev,
+                [currentColumn]: prev[currentColumn] < currentTasks.length - 1 ? prev[currentColumn] + 1 : 0,
+            }));
+            return;
+        }
+        // Open task detail (Enter)
+        if (key.return && currentTasks.length > 0) {
+            const task = currentTasks[selectedTaskIndex];
+            setSelectedTask(task);
+            loadTaskComments(task.id);
+            setMode('task-detail');
+            return;
+        }
+        // Move task right (m)
+        if (input === 'm' && currentTasks.length > 0 && currentColumn !== 'done') {
+            const task = currentTasks[selectedTaskIndex];
+            moveTaskRight(task).then(() => {
+                // Adjust selection if needed
+                if (selectedTaskIndex >= currentTasks.length - 1) {
+                    setSelectedTaskIndices((prev) => ({
+                        ...prev,
+                        [currentColumn]: Math.max(0, prev[currentColumn] - 1),
+                    }));
+                }
+            });
+            return;
+        }
+        // Move task left (Backspace)
+        if ((key.backspace || key.delete) && currentTasks.length > 0 && currentColumn !== 'todo') {
+            const task = currentTasks[selectedTaskIndex];
+            moveTaskLeft(task).then(() => {
+                // Adjust selection if needed
+                if (selectedTaskIndex >= currentTasks.length - 1) {
+                    setSelectedTaskIndices((prev) => ({
+                        ...prev,
+                        [currentColumn]: Math.max(0, prev[currentColumn] - 1),
+                    }));
+                }
+            });
+            return;
+        }
+        // Mark as done (d)
+        if (input === 'd' && currentTasks.length > 0) {
+            const task = currentTasks[selectedTaskIndex];
+            markTaskDone(task).then(() => {
+                if (selectedTaskIndex >= currentTasks.length - 1) {
+                    setSelectedTaskIndices((prev) => ({
+                        ...prev,
+                        [currentColumn]: Math.max(0, prev[currentColumn] - 1),
+                    }));
+                }
+            });
+            return;
+        }
+        // Refresh
+        if (input === 'r') {
+            loadTasks();
+            setMessage(i18n.tui.refreshed);
+            return;
+        }
+    });
+    // Help modal overlay
+    if (mode === 'help') {
+        return (_jsx(Box, { flexDirection: "column", padding: 1, children: _jsx(HelpModal, { onClose: () => setMode('normal'), isKanban: true }) }));
+    }
+    const formatTitle = (title) => theme.style.headerUppercase ? title.toUpperCase() : title;
+    // Turso connection info
+    const tursoEnabled = isTursoEnabled();
+    const tursoHost = tursoEnabled ? (() => {
+        const config = getTursoConfig();
+        if (config) {
+            try {
+                return new URL(config.url).host;
+            }
+            catch {
+                return config.url;
+            }
+        }
+        return '';
+    })() : '';
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.colors.primary, children: formatTitle(i18n.tui.title) }), _jsx(Text, { color: theme.colors.accent, children: " [KANBAN]" }), _jsx(Text, { color: theme.colors.textMuted, children: theme.name === 'modern' ? ` v${VERSION}` : ` VER ${VERSION}` }), tursoEnabled && (_jsxs(Text, { color: theme.colors.accent, children: [theme.name === 'modern' ? ' ☁️ ' : ' [SYNC] ', tursoHost] })), !tursoEnabled && (_jsx(Text, { color: theme.colors.textMuted, children: theme.name === 'modern' ? ' 💾 local' : ' [LOCAL]' }))] }), _jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.helpHint })] }), (mode === 'task-detail' || mode === 'add-comment' || mode === 'select-project') && selectedTask ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: theme.colors.accent, bold: true, children: [theme.name === 'modern' ? '📋 ' : '>> ', i18n.tui.taskDetailTitle || 'Task Details'] }), _jsxs(Text, { color: theme.colors.textMuted, children: [" (Esc/b: ", i18n.tui.back || 'back', ", ", i18n.tui.commentHint || 'i: add comment', ")"] })] }), _jsxs(Box, { flexDirection: "column", borderStyle: theme.borders.list, borderColor: theme.colors.border, paddingX: 1, paddingY: 1, marginBottom: 1, children: [_jsx(Text, { color: theme.colors.text, bold: true, children: selectedTask.title }), selectedTask.description && (_jsx(Text, { color: theme.colors.textMuted, children: selectedTask.description })), _jsxs(Text, { color: theme.colors.textMuted, children: [i18n.status[selectedTask.status], selectedTask.waitingFor && ` - ${selectedTask.waitingFor}`, selectedTask.dueDate && ` (${selectedTask.dueDate.toLocaleDateString()})`] })] }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.comments || 'Comments', " (", taskComments.length, ")"] }) }), _jsx(Box, { flexDirection: "column", borderStyle: theme.borders.list, borderColor: theme.colors.border, paddingX: 1, paddingY: 1, minHeight: 5, children: taskComments.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: i18n.tui.noComments || 'No comments yet' })) : (taskComments.map((comment, index) => {
+                            const isSelected = index === selectedCommentIndex && mode === 'task-detail';
+                            return (_jsxs(Box, { flexDirection: "row", marginBottom: 1, children: [_jsx(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.textMuted, children: isSelected ? theme.style.selectedPrefix : theme.style.unselectedPrefix }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.textMuted, children: ["[", comment.createdAt.toLocaleString(), "]"] }), _jsx(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: comment.content })] })] }, comment.id));
+                        })) }), mode === 'add-comment' && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: i18n.tui.addComment || 'New comment: ' }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleInputSubmit, placeholder: "" }), _jsxs(Text, { color: theme.colors.textMuted, children: [" ", i18n.tui.inputHelp] })] })), mode === 'select-project' && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.selectProject || 'Select project for', ": ", selectedTask.title] }), _jsx(Box, { flexDirection: "column", marginTop: 1, borderStyle: theme.borders.list, borderColor: theme.colors.borderActive, paddingX: 1, children: projects.map((project, index) => (_jsxs(Text, { color: index === projectSelectIndex ? theme.colors.textSelected : theme.colors.text, bold: index === projectSelectIndex, children: [index === projectSelectIndex ? theme.style.selectedPrefix : theme.style.unselectedPrefix, project.title] }, project.id))) }), _jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.selectProjectHelp || 'j/k: select, Enter: confirm, Esc: cancel' })] }))] })) : mode === 'search' ? (_jsx(_Fragment, { children: searchQuery && (_jsx(SearchResults, { results: searchResults, selectedIndex: searchResultIndex, query: searchQuery })) })) : (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, children: COLUMNS.map((column, index) => (_jsx(Box, { flexGrow: 1, flexBasis: 0, marginRight: index < 2 ? 1 : 0, children: _jsxs(Text, { color: currentColumnIndex === index ? theme.colors.textHighlight : theme.colors.textMuted, children: [index + 1, ":"] }) }, column))) }), _jsx(Box, { flexDirection: "row", children: COLUMNS.map((column, index) => (_jsx(KanbanColumn, { title: getColumnLabel(column), tasks: tasks[column], isActive: index === currentColumnIndex, selectedTaskIndex: selectedTaskIndices[column], columnIndex: index }, column))) })] })), mode === 'add' && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: i18n.tui.newTask }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleInputSubmit, placeholder: i18n.tui.placeholder }), _jsxs(Text, { color: theme.colors.textMuted, children: [" ", i18n.tui.inputHelp] })] })), mode === 'search' && (_jsx(SearchBar, { value: searchQuery, onChange: handleSearchChange, onSubmit: handleInputSubmit })), message && mode === 'normal' && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textHighlight, children: message }) })), _jsx(Box, { marginTop: 1, children: mode === 'select-project' ? (_jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.selectProjectHelp || 'j/k: select, Enter: confirm, Esc: cancel' })) : (mode === 'task-detail' || mode === 'add-comment') ? (theme.style.showFunctionKeys ? (_jsx(FunctionKeyBar, { keys: [
+                        { key: 'i', label: i18n.tui.keyBar.comment },
+                        { key: 'd', label: i18n.tui.keyBar.delete },
+                        { key: 'P', label: i18n.tui.keyBar.project },
+                        { key: 'b', label: i18n.tui.keyBar.back },
+                    ] })) : (_jsx(Text, { color: theme.colors.textMuted, children: "i=comment d=delete P=link j/k=select Esc/b=back" }))) : theme.style.showFunctionKeys ? (_jsx(FunctionKeyBar, { keys: [
+                        { key: 'a', label: i18n.tui.keyBar.add },
+                        { key: 'd', label: i18n.tui.keyBar.done },
+                        { key: 'm', label: '→' },
+                        { key: 'BS', label: '←' },
+                        { key: 'Enter', label: 'detail' },
+                        { key: '?', label: i18n.tui.keyBar.help },
+                        { key: 'q', label: i18n.tui.keyBar.quit },
+                    ] })) : (_jsx(Text, { color: theme.colors.textMuted, children: "a=add d=done m=\u2192 BS=\u2190 Enter=detail h/l=col j/k=task ?=help q=quit" })) })] }));
+}

package/dist/ui/components/KanbanColumn.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Task } from '../../db/schema.js';
+export type KanbanColumnType = 'todo' | 'doing' | 'done';
+interface KanbanColumnProps {
+    title: string;
+    tasks: Task[];
+    isActive: boolean;
+    selectedTaskIndex: number;
+    columnIndex: number;
+}
+export declare function KanbanColumn({ title, tasks, isActive, selectedTaskIndex, columnIndex, }: KanbanColumnProps): React.ReactElement;
+export {};

package/dist/ui/components/KanbanColumn.js

@@ -0,0 +1,11 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTheme } from '../theme/index.js';
+export function KanbanColumn({ title, tasks, isActive, selectedTaskIndex, columnIndex, }) {
+    const theme = useTheme();
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, flexBasis: 0, borderStyle: theme.borders.list, borderColor: isActive ? theme.colors.borderActive : theme.colors.border, marginRight: columnIndex < 2 ? 1 : 0, children: [_jsx(Box, { paddingX: 1, justifyContent: "center", borderStyle: undefined, children: _jsxs(Text, { bold: true, color: isActive ? theme.colors.primary : theme.colors.textMuted, inverse: isActive && theme.style.tabActiveInverse, children: [title, " (", tasks.length, ")"] }) }), _jsx(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, minHeight: 8, children: tasks.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: "-" })) : (tasks.map((task, index) => {
+                    const isSelected = isActive && index === selectedTaskIndex;
+                    const shortId = task.id.slice(0, 6);
+                    return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: [isSelected ? theme.style.selectedPrefix : theme.style.unselectedPrefix, "[", shortId, "] ", task.title] }) }, task.id));
+                })) })] }));
+}

package/dist/ui/components/ProgressBar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ProgressBarProps {
+    completed: number;
+    total: number;
+    width?: number;
+}
+export declare function ProgressBar({ completed, total, width }: ProgressBarProps): React.ReactElement;

package/dist/ui/components/ProgressBar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { useTheme } from '../theme/index.js';
+export function ProgressBar({ completed, total, width = 10 }) {
+    const theme = useTheme();
+    const [filledChar, emptyChar] = theme.style.loadingChars;
+    const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;
+    const filledCount = total > 0 ? Math.round((completed / total) * width) : 0;
+    const emptyCount = width - filledCount;
+    const filledBar = filledChar.repeat(filledCount);
+    const emptyBar = emptyChar.repeat(emptyCount);
+    return (_jsxs(Text, { color: theme.colors.textMuted, children: [' ', filledBar, _jsx(Text, { color: theme.colors.muted, children: emptyBar }), _jsxs(Text, { color: theme.colors.textMuted, children: [" ", percentage, "% (", completed, "/", total, ")"] })] }));
+}

package/dist/ui/components/SearchBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SearchBarProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+}
+export declare function SearchBar({ value, onChange, onSubmit }: SearchBarProps): React.ReactElement;
+export {};

package/dist/ui/components/SearchBar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { t } from '../../i18n/index.js';
+import { useTheme } from '../theme/index.js';
+export function SearchBar({ value, onChange, onSubmit }) {
+    const i18n = t();
+    const theme = useTheme();
+    const search = i18n.tui.search;
+    return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: search.prefix }), _jsx(TextInput, { value: value, onChange: onChange, onSubmit: onSubmit, placeholder: search.placeholder }), _jsxs(Text, { color: theme.colors.textMuted, children: [" ", search.help] })] }));
+}

package/dist/ui/components/SearchResults.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Task } from '../../db/schema.js';
+interface SearchResultsProps {
+    results: Task[];
+    selectedIndex: number;
+    query: string;
+}
+export declare function SearchResults({ results, selectedIndex, query }: SearchResultsProps): React.ReactElement;
+export {};

package/dist/ui/components/SearchResults.js

@@ -0,0 +1,18 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { t } from '../../i18n/index.js';
+import { useTheme } from '../theme/index.js';
+export function SearchResults({ results, selectedIndex, query }) {
+    const i18n = t();
+    const theme = useTheme();
+    const search = i18n.tui.search;
+    if (!query) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: theme.borders.list, borderColor: theme.colors.borderActive, paddingX: 1, paddingY: 1, minHeight: 5, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: theme.colors.secondary, bold: true, children: ["[", search.resultsTitle, "] (", results.length, ")"] }) }), results.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: search.noResults })) : (results.slice(0, 10).map((task, index) => {
+                const isSelected = index === selectedIndex;
+                const shortId = task.id.slice(0, 8);
+                const statusLabel = i18n.status[task.status];
+                return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: [isSelected ? theme.style.selectedPrefix : theme.style.unselectedPrefix, "[", shortId, "] ", task.title, _jsxs(Text, { color: theme.colors.textMuted, children: [" (", statusLabel, ")"] }), task.waitingFor && (_jsxs(Text, { color: theme.colors.statusWaiting, children: [" - ", task.waitingFor] }))] }) }, task.id));
+            })), results.length > 10 && (_jsxs(Text, { color: theme.colors.textMuted, italic: true, children: ["... and ", results.length - 10, " more"] }))] }));
+}

package/dist/ui/components/TaskItem.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
 import type { Task } from '../../db/schema.js';
+export interface ProjectProgress {
+    completed: number;
+    total: number;
+}
 interface TaskItemProps {
     task: Task;
     isSelected: boolean;
     projectName?: string;
+    progress?: ProjectProgress;
 }
-export declare function TaskItem({ task, isSelected, projectName }: TaskItemProps): React.ReactElement;
+export declare function TaskItem({ task, isSelected, projectName, progress }: TaskItemProps): React.ReactElement;
 export {};

package/dist/ui/components/TaskItem.js

@@ -2,9 +2,10 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { t } from '../../i18n/index.js';
 import { useTheme } from '../theme/index.js';
-export function TaskItem({ task, isSelected, projectName }) {
+import { ProgressBar } from './ProgressBar.js';
+export function TaskItem({ task, isSelected, projectName, progress }) {
     const shortId = task.id.slice(0, 8);
     const i18n = t();
     const theme = useTheme();
-    return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: [isSelected ? theme.style.selectedPrefix : theme.style.unselectedPrefix, "[", shortId, "] ", task.title, projectName && (_jsxs(Text, { color: theme.colors.statusSomeday, children: [" @", projectName] })), task.waitingFor && (_jsxs(Text, { color: theme.colors.statusWaiting, children: [" (", i18n.status.waiting.toLowerCase(), ": ", task.waitingFor, ")"] })), task.dueDate && (_jsxs(Text, { color: theme.colors.accent, children: [" (due: ", task.dueDate.toLocaleDateString(), ")"] }))] }) }));
+    return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: [isSelected ? theme.style.selectedPrefix : theme.style.unselectedPrefix, "[", shortId, "] ", task.title, projectName && (_jsxs(Text, { color: theme.colors.statusSomeday, children: [" @", projectName] })), progress && progress.total > 0 && (_jsx(ProgressBar, { completed: progress.completed, total: progress.total })), task.waitingFor && (_jsxs(Text, { color: theme.colors.statusWaiting, children: [" (", i18n.status.waiting.toLowerCase(), ": ", task.waitingFor, ")"] })), task.dueDate && (_jsxs(Text, { color: theme.colors.accent, children: [" (due: ", task.dueDate.toLocaleDateString(), ")"] }))] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "floq",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Floq - Getting Things Done Task Manager with MS-DOS style themes",
   "type": "module",
   "main": "dist/index.js",