floq 0.5.0 → 0.6.0

package/dist/ui/components/DQLayout.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTheme } from '../theme/index.js';
+/**
+ * Dragon Quest style multi-window layout
+ *
+ * ╭────────────────────────────────────────────╮
+ * │           FLOQ - GTD Manager               │
+ * ╰────────────────────────────────────────────╯
+ * ╭─ コマンド ─╮  ╭─ Inbox ──────────────────────╮
+ * │ ▶ Inbox   │  │ ▶ タスク1                    │
+ * │   次      │  │   タスク2                    │
+ * │   待ち    │  │   タスク3                    │
+ * │   いつか  │  ╰────────────────────────────────╯
+ * │   完了    │
+ * ╰───────────╯
+ */
+export function DQLayout({ title, subtitle, menuTitle, menuItems, contentTitle, children, statusTitle, statusItems, footer, }) {
+    const theme = useTheme();
+    const borderColor = theme.colors.border;
+    const activeColor = theme.colors.borderActive;
+    // Render a window with title on border
+    const renderWindow = (windowTitle, content, options = {}) => {
+        const { width, minHeight = 3, active = false, flexGrow } = options;
+        const color = active ? activeColor : borderColor;
+        const titleDisplay = ` ${windowTitle} `;
+        const minW = width || 20;
+        return (_jsxs(Box, { flexDirection: "column", width: width, minHeight: minHeight, flexGrow: flexGrow, children: [_jsxs(Box, { children: [_jsx(Text, { color: color, children: "\u256D\u2500\u2500" }), _jsx(Text, { color: theme.colors.text, bold: true, children: titleDisplay }), _jsxs(Text, { color: color, children: ['─'.repeat(Math.max(minW - titleDisplay.length - 6, 2)), "\u256E"] })] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsx(Text, { color: color, children: "\u2502 " }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: content }), _jsx(Text, { color: color, children: " \u2502" })] }) }), _jsx(Box, { children: _jsxs(Text, { color: color, children: ["\u2570", '─'.repeat(Math.max(minW - 2, 2)), "\u256F"] }) })] }));
+    };
+    // Render header window
+    const renderHeader = () => {
+        const headerWidth = 50;
+        const padding = Math.floor((headerWidth - title.length - 4) / 2);
+        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { children: _jsxs(Text, { color: borderColor, children: ["\u256D", '─'.repeat(headerWidth - 2), "\u256E"] }) }), _jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsxs(Text, { color: theme.colors.primary, bold: true, children: [' '.repeat(padding), title, ' '.repeat(padding)] }), _jsx(Text, { color: borderColor, children: "\u2502" })] }), subtitle && (_jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsxs(Text, { color: theme.colors.textMuted, children: [' '.repeat(Math.floor((headerWidth - subtitle.length - 4) / 2)), subtitle] }), _jsx(Text, { color: borderColor, children: "\u2502" })] })), _jsx(Box, { children: _jsxs(Text, { color: borderColor, children: ["\u2570", '─'.repeat(headerWidth - 2), "\u256F"] }) })] }));
+    };
+    // Render menu items
+    const renderMenuContent = () => (_jsx(_Fragment, { children: menuItems.map((item, index) => (_jsx(Box, { children: _jsxs(Text, { color: item.isActive ? theme.colors.textSelected : theme.colors.text, bold: item.isActive, children: [item.isActive ? theme.style.selectedPrefix : theme.style.unselectedPrefix, item.label, item.count !== undefined && ` (${item.count})`] }) }, index))) }));
+    // Render status window
+    const renderStatus = () => {
+        if (!statusTitle || !statusItems)
+            return null;
+        return (_jsx(Box, { marginTop: 1, children: renderWindow(statusTitle, _jsx(_Fragment, { children: statusItems.map((item, index) => (_jsxs(Box, { children: [_jsxs(Text, { color: theme.colors.textMuted, children: [item.label, ": "] }), _jsx(Text, { color: theme.colors.accent, children: item.value })] }, index))) }), { width: 20, minHeight: statusItems.length + 2 }) }));
+    };
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [renderHeader(), _jsxs(Box, { flexDirection: "row", children: [_jsxs(Box, { flexDirection: "column", marginRight: 1, children: [renderWindow(menuTitle, renderMenuContent(), {
+                                width: 18,
+                                minHeight: menuItems.length + 2,
+                                active: true,
+                            }), renderStatus()] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: renderWindow(contentTitle, children, {
+                            minHeight: 12,
+                            active: true,
+                            flexGrow: 1,
+                        }) })] }), footer && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, children: footer }) }))] }));
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { Task } from '../../db/schema.js';
+import type { ProjectProgress } from './TaskItem.js';
+interface DQTaskListProps {
+    tasks: Task[];
+    selectedIndex: number;
+    emptyMessage: string;
+    showProject?: boolean;
+    getParentProject?: (parentId: string | null) => Task | undefined;
+    projectProgress?: Record<string, ProjectProgress>;
+    isProjectTab?: boolean;
+}
+/**
+ * Dragon Quest style task list inside a window
+ */
+export declare function DQTaskList({ tasks, selectedIndex, emptyMessage, showProject, getParentProject, projectProgress, isProjectTab, }: DQTaskListProps): React.ReactElement;
+interface DQWindowFrameProps {
+    title: string;
+    children: React.ReactNode;
+    width?: number | string;
+    minHeight?: number;
+    active?: boolean;
+    flexGrow?: number;
+}
+/**
+ * Dragon Quest style window frame with title on border
+ */
+export declare function DQWindowFrame({ title, children, width, minHeight, active, flexGrow, }: DQWindowFrameProps): React.ReactElement;
+interface DQMenuProps {
+    title: string;
+    items: Array<{
+        key: string;
+        label: string;
+        count: number;
+        isActive: boolean;
+    }>;
+    width?: number;
+}
+/**
+ * Dragon Quest style menu (left side panel)
+ */
+export declare function DQMenu({ title, items, width }: DQMenuProps): React.ReactElement;
+interface DQHeaderProps {
+    title: string;
+    version: string;
+    dbMode: string;
+    contextFilter?: string | null;
+}
+/**
+ * Dragon Quest style header window
+ */
+export declare function DQHeader({ title, version, dbMode, contextFilter }: DQHeaderProps): React.ReactElement;
+export {};

package/dist/ui/components/DQTaskList.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTheme } from '../theme/index.js';
+/**
+ * Dragon Quest style task list inside a window
+ */
+export function DQTaskList({ tasks, selectedIndex, emptyMessage, showProject = false, getParentProject, projectProgress, isProjectTab = false, }) {
+    const theme = useTheme();
+    if (tasks.length === 0) {
+        return (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: emptyMessage }));
+    }
+    return (_jsx(_Fragment, { children: tasks.map((task, index) => {
+            const isSelected = index === selectedIndex;
+            const parentProject = showProject && getParentProject ? getParentProject(task.parentId) : undefined;
+            const progress = isProjectTab && projectProgress ? projectProgress[task.id] : undefined;
+            return (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: [isSelected ? theme.style.selectedPrefix : theme.style.unselectedPrefix, task.title, task.waitingFor && (_jsxs(Text, { color: theme.colors.statusWaiting, children: [" [", task.waitingFor, "]"] })), task.context && (_jsxs(Text, { color: theme.colors.accent, children: [" @", task.context] })), parentProject && (_jsxs(Text, { color: theme.colors.textMuted, children: [" \u2190 ", parentProject.title] })), progress && (_jsxs(Text, { color: theme.colors.textMuted, children: [" [", progress.completed, "/", progress.total, "]"] }))] }) }, task.id));
+        }) }));
+}
+/**
+ * Dragon Quest style window frame with title on border
+ */
+export function DQWindowFrame({ title, children, width, minHeight = 10, active = false, flexGrow, }) {
+    const theme = useTheme();
+    const borderColor = active ? theme.colors.borderActive : theme.colors.border;
+    const titleText = ` ${title} `;
+    return (_jsxs(Box, { flexDirection: "column", width: width, minHeight: minHeight, flexGrow: flexGrow, children: [_jsxs(Text, { color: borderColor, children: ["\u256D\u2500\u2500", _jsx(Text, { color: theme.colors.text, bold: true, children: titleText }), _jsx(Text, { color: borderColor, children: '─'.repeat(30) })] }), _jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsx(Text, { color: borderColor, children: "\u2502 " }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: children }), _jsx(Text, { color: borderColor, children: " \u2502" })] }), _jsxs(Text, { color: borderColor, children: ["\u2570", '─'.repeat(titleText.length + 32), "\u256F"] })] }));
+}
+/**
+ * Dragon Quest style menu (left side panel)
+ */
+export function DQMenu({ title, items, width = 16 }) {
+    const theme = useTheme();
+    const borderColor = theme.colors.border;
+    const titleText = ` ${title} `;
+    const innerWidth = width - 4;
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Text, { color: borderColor, children: ["\u256D\u2500", _jsx(Text, { color: theme.colors.text, bold: true, children: titleText }), _jsxs(Text, { color: borderColor, children: ['─'.repeat(Math.max(innerWidth - titleText.length, 0)), "\u256E"] })] }), items.map((item) => (_jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsxs(Text, { color: item.isActive ? theme.colors.textSelected : theme.colors.text, bold: item.isActive, children: [item.isActive ? theme.style.selectedPrefix : theme.style.unselectedPrefix, item.label] }), _jsxs(Text, { color: theme.colors.textMuted, children: ["(", item.count, ")"] }), _jsx(Text, { color: borderColor, children: "\u2502" })] }, item.key))), _jsxs(Text, { color: borderColor, children: ["\u2570", '─'.repeat(innerWidth + 2), "\u256F"] })] }));
+}
+/**
+ * Dragon Quest style header window
+ */
+export function DQHeader({ title, version, dbMode, contextFilter }) {
+    const theme = useTheme();
+    const borderColor = theme.colors.border;
+    const headerText = `${title}  ver.${version}`;
+    const width = 50;
+    const padding = Math.floor((width - headerText.length - 2) / 2);
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: borderColor, children: ["\u256D", '─'.repeat(width - 2), "\u256E"] }), _jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsxs(Text, { color: theme.colors.primary, bold: true, children: [' '.repeat(padding), headerText, ' '.repeat(padding)] }), _jsx(Text, { color: borderColor, children: "\u2502" })] }), _jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsxs(Text, { children: [' '.repeat(Math.floor((width - 20) / 2)), _jsxs(Text, { color: theme.colors.textMuted, children: ["[", dbMode, "]"] }), contextFilter !== null && contextFilter !== undefined && (_jsxs(Text, { color: theme.colors.accent, children: [" @", contextFilter === '' ? 'none' : contextFilter] }))] }), _jsx(Text, { color: borderColor, children: "\u2502" })] }), _jsxs(Text, { color: borderColor, children: ["\u2570", '─'.repeat(width - 2), "\u256F"] })] }));
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+interface DQWindowProps {
+    title?: string;
+    children: React.ReactNode;
+    width?: number | string;
+    height?: number | string;
+    minHeight?: number;
+    minWidth?: number;
+    active?: boolean;
+}
+/**
+ * Dragon Quest style window with title on the border
+ *
+ * ╭─ Title ──────────╮
+ * │ Content here     │
+ * ╰──────────────────╯
+ */
+export declare function DQWindow({ title, children, width, height, minHeight, minWidth, active, }: DQWindowProps): React.ReactElement;
+export {};

package/dist/ui/components/DQWindow.js

@@ -0,0 +1,33 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useTheme } from '../theme/index.js';
+/**
+ * Dragon Quest style window with title on the border
+ *
+ * ╭─ Title ──────────╮
+ * │ Content here     │
+ * ╰──────────────────╯
+ */
+export function DQWindow({ title, children, width, height, minHeight, minWidth, active = false, }) {
+    const theme = useTheme();
+    const borderColor = active ? theme.colors.borderActive : theme.colors.border;
+    // Build the top border with title embedded
+    const renderTopBorder = (contentWidth) => {
+        if (!title) {
+            // No title - just return standard corner
+            return null;
+        }
+        const titleText = ` ${title} `;
+        const titleLen = titleText.length;
+        // Calculate dashes needed (minimum 2 on each side of title)
+        const availableWidth = Math.max(contentWidth - titleLen - 4, 0);
+        const leftDashes = 2;
+        const rightDashes = Math.max(availableWidth - leftDashes, 2);
+        return (_jsxs(Box, { children: [_jsxs(Text, { color: borderColor, children: ["\u256D", '─'.repeat(leftDashes)] }), _jsx(Text, { color: theme.colors.text, bold: true, children: titleText }), _jsxs(Text, { color: borderColor, children: ['─'.repeat(rightDashes), "\u256E"] })] }));
+    };
+    const renderBottomBorder = (contentWidth) => {
+        return (_jsx(Box, { children: _jsxs(Text, { color: borderColor, children: ["\u2570", '─'.repeat(contentWidth), "\u256F"] }) }));
+    };
+    // For DQ style, we render custom borders
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, minHeight: minHeight, minWidth: minWidth, children: [title && renderTopBorder(typeof minWidth === 'number' ? minWidth - 2 : 20), _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsx(Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, children: children }), _jsx(Text, { color: borderColor, children: "\u2502" })] }), renderBottomBorder(typeof minWidth === 'number' ? minWidth - 2 : 20)] }));
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type SettingsMode = 'none' | 'theme-select' | 'mode-select' | 'lang-select';
+interface GtdDQProps {
+    onOpenSettings?: (mode: SettingsMode) => void;
+}
+export declare function GtdDQ({ onOpenSettings }: GtdDQProps): React.ReactElement;
+export {};