stratanodex 0.1.0

package/dist/tui/hooks/useTree.js

@@ -0,0 +1,93 @@
+// Tree hook
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { getNodes } from '../../api/client.js';
+import { assignNumbers } from '../../utils/numbering.js';
+/**
+ * Reconstruct a nested tree from the flat node array the backend returns.
+ * Each node has a `parentId`; we group children under their parent.
+ */
+function buildTree(flat) {
+    const map = new Map();
+    const roots = [];
+    for (const node of flat) {
+        map.set(node.id, { ...node, children: [] });
+    }
+    for (const node of flat) {
+        const mapped = map.get(node.id);
+        if (node.parentId && map.has(node.parentId)) {
+            map.get(node.parentId).children.push(mapped);
+        }
+        else {
+            roots.push(mapped);
+        }
+    }
+    return roots;
+}
+/** Collect ALL node IDs (at every depth) so we can auto-expand the entire tree. */
+function collectAllIds(nodes) {
+    const ids = new Set();
+    function walk(list) {
+        for (const n of list) {
+            ids.add(n.id);
+            if (n.children?.length)
+                walk(n.children);
+        }
+    }
+    walk(nodes);
+    return ids;
+}
+function computeVisible(nodes, expandedIds) {
+    const result = [];
+    function walk(children) {
+        const sorted = [...children].sort((a, b) => a.position - b.position);
+        for (const node of sorted) {
+            result.push(node);
+            if (expandedIds.has(node.id) && (node.children ?? []).length > 0) {
+                walk(node.children ?? []);
+            }
+        }
+    }
+    walk(nodes);
+    return result;
+}
+export function useTree(listId) {
+    const [state, setState] = useState({ nodes: [], loading: true, error: null });
+    const [expandedIds, setExpandedIds] = useState(new Set());
+    const fetch = useCallback(() => {
+        setState((s) => ({ ...s, loading: true, error: null }));
+        getNodes(listId)
+            .then((flatNodes) => {
+            // Backend returns a flat list — rebuild nested tree
+            const tree = buildTree(flatNodes);
+            // Auto-expand ALL nodes so the full tree is visible by default
+            setExpandedIds(collectAllIds(tree));
+            setState({ nodes: tree, loading: false, error: null });
+        })
+            .catch((err) => setState({ nodes: [], loading: false, error: err.message }));
+    }, [listId]);
+    useEffect(() => {
+        fetch();
+    }, [fetch]);
+    const toggleExpand = useCallback((nodeId) => {
+        setExpandedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(nodeId))
+                next.delete(nodeId);
+            else
+                next.add(nodeId);
+            return next;
+        });
+    }, []);
+    const numberMap = useMemo(() => assignNumbers(state.nodes), [state.nodes]);
+    const flatNodes = useMemo(() => computeVisible(state.nodes, expandedIds), [state.nodes, expandedIds]);
+    return {
+        nodes: state.nodes,
+        flatNodes,
+        expandedIds,
+        toggleExpand,
+        numberMap,
+        loading: state.loading,
+        error: state.error,
+        refetch: fetch,
+    };
+}

package/dist/tui/screens/DailyScreen.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Daily tasks screen
+import { useState, useEffect, useCallback } from 'react';
+import { Box, Text } from 'ink';
+import { getDailyToday, getDailyOverdue, updateNode } from '../../api/client.js';
+import { NodeRow } from '../components/NodeRow.js';
+import { Keybindings } from '../components/Keybindings.js';
+import { Spinner } from '../components/Spinner.js';
+const BINDINGS = '[↑↓] navigate  [b] back  [/done <n>] mark done';
+export function DailyScreen({ push, pop, registerActions }) {
+    const [todayNodes, setTodayNodes] = useState([]);
+    const [overdueNodes, setOverdueNodes] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [cursor, setCursor] = useState(0);
+    const [status, setStatus] = useState(null);
+    const allNodes = [...todayNodes, ...overdueNodes];
+    const fetchData = useCallback(() => {
+        setLoading(true);
+        Promise.all([getDailyToday(), getDailyOverdue()])
+            .then(([today, overdue]) => {
+            setTodayNodes(today);
+            setOverdueNodes(overdue);
+            setLoading(false);
+        })
+            .catch((e) => {
+            setError(e.message);
+            setLoading(false);
+        });
+    }, []);
+    useEffect(() => {
+        fetchData();
+    }, [fetchData]);
+    const handleCommand = useCallback(async (cmd) => {
+        const parts = cmd.trim().split(/\s+/);
+        const verb = parts[0];
+        const arg = parts.slice(1).join(' ');
+        if (verb === '/done' && arg) {
+            const idx = parseInt(arg, 10) - 1;
+            const node = allNodes[idx];
+            if (!node) {
+                setStatus(`✗ Node "${arg}" not found.`);
+                return;
+            }
+            updateNode(node.id, { status: 'DONE' })
+                .then(() => {
+                setStatus(`✓ Done: ${node.title}`);
+                fetchData();
+            })
+                .catch((e) => setStatus(`✗ ${e.message}`));
+        }
+        else if (verb === '/back') {
+            pop();
+        }
+    }, [allNodes, fetchData, pop]);
+    useEffect(() => {
+        registerActions({
+            onUp: () => setCursor((c) => Math.max(0, c - 1)),
+            onDown: () => setCursor((c) => Math.min(allNodes.length - 1, c + 1)),
+            onEnter: () => {
+                const node = allNodes[cursor];
+                if (node) {
+                    push('node-details', { nodeId: node.id });
+                }
+            },
+            onBack: () => pop(),
+            onCommand: handleCommand,
+            onRefetch: fetchData,
+        });
+    }, [allNodes.length, pop, registerActions, handleCommand, fetchData]);
+    if (loading)
+        return (_jsx(Box, { paddingX: 2, children: _jsx(Spinner, { label: "Loading daily tasks..." }) }));
+    if (error)
+        return (_jsx(Box, { paddingX: 2, children: _jsxs(Text, { color: "red", children: ["\u2717 ", error] }) }));
+    let idx = 0;
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "\uD83D\uDCC5 Today" }) }), todayNodes.length === 0 ? (_jsx(Text, { dimColor: true, children: " No tasks for today." })) : (todayNodes.map((node) => (_jsx(NodeRow, { node: node, number: String(++idx), depth: 0, isSelected: idx - 1 === cursor, isLast: true, isLastRoot: true, parentLines: [] }, node.id)))), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { bold: true, color: "red", children: "\u26A0 Overdue" }) }), overdueNodes.length === 0 ? (_jsx(Text, { dimColor: true, children: " No overdue tasks." })) : (overdueNodes.map((node) => (_jsx(NodeRow, { node: node, number: String(++idx), depth: 0, isSelected: idx - 1 === cursor, isLast: true, isLastRoot: true, parentLines: [] }, node.id)))), status && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: status }) })), _jsx(Box, { marginTop: 1, children: _jsx(Keybindings, { bindings: BINDINGS }) })] }));
+}

package/dist/tui/screens/DashboardScreen.js

@@ -0,0 +1,262 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// DashboardScreen.tsx — CLI Dashboard matching the web app design.
+// Shows: Welcome header, streak, today's score, multi-range ASCII chart, and recents.
+import { useEffect, useState, useCallback } from 'react';
+import { Box, Text } from 'ink';
+import { getDailyScore, getStreak, getScores, getFolders } from '../../api/client.js';
+import { Spinner } from '../components/Spinner.js';
+import { Keybindings } from '../components/Keybindings.js';
+import { getRecents } from '../../utils/recents.js';
+// ── Chart constants ──────────────────────────────────────────────────────────
+const FILL = '█';
+const SHADE = '▓';
+const LIGHT = '░';
+const EMPTY_CHAR = ' ';
+const CHART_HEIGHT = 8;
+const RANGES = ['1W', '1M', '3M', '1Y'];
+const RANGE_LABEL = {
+    '1W': 'Weekly',
+    '1M': 'Monthly',
+    '3M': 'Quarterly',
+    '1Y': 'Yearly',
+};
+const RANGE_DAYS = {
+    '1W': 7,
+    '1M': 30,
+    '3M': 90,
+    '1Y': 365,
+};
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+// ── Helpers ──────────────────────────────────────────────────────────────────
+function todayISO() {
+    return new Date().toISOString().slice(0, 10);
+}
+function getStreakMessage(streak) {
+    if (streak === 0)
+        return "Let's get started — build your first streak!";
+    if (streak === 1)
+        return 'Good start! Keep it going tomorrow.';
+    if (streak <= 3)
+        return "You're building momentum!";
+    if (streak <= 6)
+        return "You're on a roll! Don't break it. 🔥";
+    if (streak <= 13)
+        return 'You have been on fire lately. 🔥';
+    if (streak <= 29)
+        return "Incredible consistency! You're unstoppable. 🔥🔥";
+    return "Legendary streak. You're a machine. 🔥🔥🔥";
+}
+function formatDateLabel(iso, range) {
+    const [y, m, d] = iso.split('-').map(Number);
+    if (range === '1Y')
+        return `${MONTHS[m - 1]} '${String(y).slice(2)}`;
+    return `${MONTHS[m - 1]} ${d}`;
+}
+function buildChartData(scores, days, range) {
+    const scoreMap = new Map(scores.map((s) => [s.date.slice(0, 10), s.points]));
+    const result = [];
+    for (let i = days - 1; i >= 0; i--) {
+        const d = new Date();
+        d.setDate(d.getDate() - i);
+        const iso = d.toISOString().slice(0, 10);
+        result.push({ label: formatDateLabel(iso, range), points: scoreMap.get(iso) ?? null });
+    }
+    return result;
+}
+/** Downsample data to fit the terminal width. */
+function downsample(data, maxColumns) {
+    if (data.length <= maxColumns)
+        return data;
+    const step = data.length / maxColumns;
+    const result = [];
+    for (let i = 0; i < maxColumns; i++) {
+        const start = Math.floor(i * step);
+        const end = Math.floor((i + 1) * step);
+        const slice = data.slice(start, end);
+        const nonNull = slice.filter((d) => d.points !== null);
+        const avg = nonNull.length > 0 ? nonNull.reduce((a, b) => a + b.points, 0) / nonNull.length : null;
+        result.push({
+            label: slice[Math.floor(slice.length / 2)]?.label ?? '',
+            points: avg !== null ? Math.round(avg * 10) / 10 : null,
+        });
+    }
+    return result;
+}
+// ── Component ────────────────────────────────────────────────────────────────
+const BINDINGS = '[←→] range  [↑↓] recents  [Enter] open  [/folders] your folders';
+export function DashboardScreen({ push, pop, registerActions, width, authUser }) {
+    const [streak, setStreak] = useState(0);
+    const [todayScore, setTodayScore] = useState(null);
+    const [allScores, setAllScores] = useState([]);
+    const [range, setRange] = useState('1W');
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [recents, setRecents] = useState([]);
+    const [recentCursor, setRecentCursor] = useState(0);
+    const termWidth = width ?? 80;
+    // ── Load data ────────────────────────────────────────────────────────────
+    useEffect(() => {
+        let cancelled = false;
+        const load = async () => {
+            try {
+                // Don't call getMe() — user is passed from App via useAuth (already resolved)
+                const [streakData, scoresData] = await Promise.all([getStreak(), getScores(365)]);
+                let todayData = null;
+                try {
+                    todayData = await getDailyScore(todayISO());
+                }
+                catch {
+                    // 404 = no score yet today
+                }
+                // Build recents from persisted store + live folder/list data
+                const recentEntries = getRecents();
+                const recentItems = [];
+                if (recentEntries.length > 0) {
+                    // Fetch all folders to resolve names and list folder associations
+                    try {
+                        const folders = await getFolders();
+                        const folderMap = new Map(folders.map((f) => [f.id, f]));
+                        for (const entry of recentEntries.slice(0, 10)) {
+                            if (entry.type === 'folder') {
+                                const folder = folderMap.get(entry.id);
+                                recentItems.push({
+                                    id: entry.id,
+                                    name: folder?.name ?? entry.name,
+                                    type: 'folder',
+                                });
+                            }
+                            else {
+                                // List — try to find its folder
+                                recentItems.push({
+                                    id: entry.id,
+                                    name: entry.name,
+                                    type: 'list',
+                                    folderId: entry.folderId,
+                                    folderName: entry.folderName,
+                                });
+                            }
+                        }
+                    }
+                    catch {
+                        // If folders API fails, still show entries with stored names
+                        for (const entry of recentEntries.slice(0, 10)) {
+                            recentItems.push({
+                                id: entry.id,
+                                name: entry.name,
+                                type: entry.type,
+                                folderId: entry.folderId,
+                                folderName: entry.folderName,
+                            });
+                        }
+                    }
+                }
+                if (!cancelled) {
+                    setStreak(streakData.streak);
+                    setTodayScore(todayData);
+                    setAllScores(scoresData);
+                    setRecents(recentItems);
+                    setLoading(false);
+                }
+            }
+            catch (e) {
+                if (!cancelled) {
+                    setError(e.message);
+                    setLoading(false);
+                }
+            }
+        };
+        load();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    // ── Key bindings ─────────────────────────────────────────────────────────
+    const openRecent = useCallback(() => {
+        const item = recents[recentCursor];
+        if (!item)
+            return;
+        if (item.type === 'folder') {
+            push('lists', { folderId: item.id, folderName: item.name });
+        }
+        else {
+            push('tree', {
+                listId: item.id,
+                listName: item.name,
+                ...(item.folderId ? { folderId: item.folderId } : {}),
+                ...(item.folderName ? { folderName: item.folderName } : {}),
+            });
+        }
+    }, [recents, recentCursor, push]);
+    useEffect(() => {
+        registerActions({
+            onLeft: () => setRange((r) => RANGES[Math.max(0, RANGES.indexOf(r) - 1)]),
+            onRight: () => setRange((r) => RANGES[Math.min(RANGES.length - 1, RANGES.indexOf(r) + 1)]),
+            onUp: () => setRecentCursor((c) => (c > 0 ? c - 1 : recents.length - 1)),
+            onDown: () => setRecentCursor((c) => (c < recents.length - 1 ? c + 1 : 0)),
+            onEnter: openRecent,
+            onBack: () => pop(),
+            onCommand: (cmd) => {
+                if (cmd === '/back')
+                    pop();
+            },
+        });
+    }, [registerActions, pop, recents, openRecent]);
+    // ── Render ───────────────────────────────────────────────────────────────
+    if (loading) {
+        return (_jsx(Box, { paddingX: 2, children: _jsx(Spinner, { label: "Loading dashboard..." }) }));
+    }
+    if (error) {
+        return (_jsx(Box, { paddingX: 2, children: _jsxs(Text, { color: "red", children: ["\u2717 ", error] }) }));
+    }
+    // Chart data
+    const days = RANGE_DAYS[range];
+    const rawData = buildChartData(allScores, days, range);
+    // Reserve space: 2 padding + some chars for labels. Each column = 4 chars wide
+    const maxCols = Math.min(rawData.length, Math.floor((termWidth - 8) / 4));
+    const chartData = downsample(rawData, maxCols);
+    const allPoints = chartData.map((d) => d.points).filter((p) => p !== null);
+    const maxPts = allPoints.length > 0 ? Math.max(...allPoints) : 1;
+    const minPts = allPoints.length > 0 ? Math.min(...allPoints, 0) : 0;
+    const pointRange = Math.max(maxPts - minPts, 1);
+    // ── Sub-renders ──────────────────────────────────────────────────────────
+    const renderChart = () => {
+        // Build rows from top to bottom
+        const rows = [];
+        for (let row = CHART_HEIGHT - 1; row >= 0; row--) {
+            const threshold = minPts + (row / CHART_HEIGHT) * pointRange;
+            const cells = [];
+            for (let col = 0; col < chartData.length; col++) {
+                const p = chartData[col].points;
+                if (p === null || p < threshold) {
+                    cells.push(_jsx(Text, { color: "#1a1a2e", children: '   ' }, col));
+                }
+                else {
+                    // Determine intensity
+                    const intensity = (p - minPts) / pointRange;
+                    const char = intensity > 0.7 ? FILL : intensity > 0.35 ? SHADE : LIGHT;
+                    cells.push(_jsx(Text, { color: "#00bfff", children: ` ${char} ` }, col));
+                }
+            }
+            rows.push(_jsx(Box, { flexDirection: "row", children: cells }, row));
+        }
+        return rows;
+    };
+    const renderLabels = () => {
+        // Show a subset of date labels
+        const labelInterval = Math.max(1, Math.floor(chartData.length / 6));
+        const labels = chartData.map((d, i) => {
+            if (i % labelInterval === 0 || i === chartData.length - 1) {
+                return d.label.padStart(3).padEnd(4).slice(0, 4);
+            }
+            return '    ';
+        });
+        return (_jsx(Box, { flexDirection: "row", children: labels.map((l, i) => (_jsx(Text, { color: "#8b949e", dimColor: true, children: l }, i))) }));
+    };
+    const userName = authUser?.name ?? authUser?.email ?? 'User';
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { bold: true, color: "#EDEFF3", children: ["Welcome Back, ", userName] }), _jsx(Text, { color: "#8b949e", children: getStreakMessage(streak) })] }), _jsxs(Box, { gap: 4, marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: "#00c896", children: "\uD83D\uDD25 Streak: " }), _jsxs(Text, { bold: true, children: [streak, " days"] })] }), _jsxs(Box, { children: [_jsx(Text, { color: "#00c896", children: "Today: " }), todayScore ? (_jsxs(Text, { bold: true, children: [todayScore.doneNodes, "/", todayScore.totalNodes, " tasks \u00B7 ", todayScore.points, " pts"] })) : (_jsx(Text, { dimColor: true, children: "No score yet today" }))] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { justifyContent: "space-between", marginBottom: 1, children: [_jsx(Text, { color: "#8b949e", children: "Account Performance" }), _jsx(Box, { gap: 1, children: RANGES.map((r) => (_jsx(Text, { color: r === range ? '#00bfff' : '#8b949e', bold: r === range, dimColor: r !== range, children: r === range ? `[${RANGE_LABEL[r]}]` : ` ${RANGE_LABEL[r]} ` }, r))) })] }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#32363C", paddingX: 1, children: allPoints.length === 0 ? (_jsx(Box, { height: CHART_HEIGHT, alignItems: "center", justifyContent: "center", children: _jsx(Text, { color: "#8b949e", dimColor: true, children: "No data yet \u2014 complete some tasks to see your graph!" }) })) : (_jsxs(_Fragment, { children: [renderChart(), renderLabels()] })) })] }), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: "#EDEFF3", children: "Recents" }), recents.length === 0 ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "#8b949e", dimColor: true, children: "Open a folder or list to see it here." }) })) : (_jsx(Box, { flexDirection: "column", marginTop: 1, children: recents.map((item, i) => {
+                            const isSelected = i === recentCursor;
+                            const icon = item.type === 'folder' ? '📁' : '📋';
+                            const suffix = item.type === 'list' && item.folderName ? ` (${item.folderName})` : '';
+                            return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? '#00bfff' : '#8b949e', bold: isSelected, children: [isSelected ? '❯ ' : '  ', icon, " ", item.name] }), suffix && (_jsx(Text, { color: "#8b949e", dimColor: true, children: suffix }))] }, `${item.type}-${item.id}`));
+                        }) }))] }), _jsx(Box, { marginTop: 1, children: _jsx(Keybindings, { bindings: BINDINGS }) })] }));
+}

package/dist/tui/screens/HomeScreen.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Home screen - folders list
+import { useState, useEffect, useCallback } from 'react';
+import { Box, Text } from 'ink';
+import { useApp } from 'ink';
+import { useFolders } from '../hooks/useFolders.js';
+import { FolderItem } from '../components/FolderItem.js';
+import { Keybindings } from '../components/Keybindings.js';
+import { Spinner } from '../components/Spinner.js';
+import { createFolder, deleteFolder } from '../../api/client.js';
+import { recordRecent } from '../../utils/recents.js';
+const BINDINGS = '[↑↓] navigate  [Enter] open  [n] new  [e] edit  [d] delete  [q] quit';
+export function HomeScreen({ push, registerActions }) {
+    const { folders, loading, error, refetch } = useFolders();
+    const [cursor, setCursor] = useState(0);
+    const [status, setStatus] = useState(null);
+    const { exit } = useApp();
+    const handleCommand = useCallback(async (cmd) => {
+        const parts = cmd.trim().split(/\s+/);
+        const verb = parts[0];
+        const arg = parts.slice(1).join(' ');
+        if (verb === '/retry') {
+            refetch();
+            return;
+        }
+        if (verb === '/add' && arg) {
+            setStatus('Creating folder...');
+            createFolder(arg)
+                .then(() => {
+                setStatus(`✓ Created "${arg}"`);
+                refetch();
+            })
+                .catch((e) => setStatus(`✗ ${e.message}`));
+        }
+        else if (verb === '/delete') {
+            const folder = folders[cursor];
+            if (!folder)
+                return;
+            setStatus('Deleting...');
+            deleteFolder(folder.id)
+                .then(() => {
+                setStatus(`✓ Deleted "${folder.name}"`);
+                setCursor(0);
+                refetch();
+            })
+                .catch((e) => setStatus(`✗ ${e.message}`));
+        }
+        else if (verb === '/quit' || verb === 'q') {
+            exit();
+        }
+    }, [folders, cursor, refetch, exit]);
+    useEffect(() => {
+        const len = folders.length;
+        registerActions({
+            onUp: () => setCursor((c) => (c > 0 ? c - 1 : len - 1)),
+            onDown: () => setCursor((c) => (c < len - 1 ? c + 1 : 0)),
+            onEnter: () => {
+                const folder = folders[cursor];
+                if (folder) {
+                    recordRecent({ id: folder.id, name: folder.name, type: 'folder' });
+                    push('lists', { folderId: folder.id, folderName: folder.name });
+                }
+            },
+            onBack: () => { },
+            onQuit: () => exit(),
+            onCommand: handleCommand,
+            onRefetch: refetch,
+        });
+    }, [folders, cursor, push, exit, registerActions, handleCommand, refetch]);
+    if (loading)
+        return (_jsx(Box, { paddingX: 2, children: _jsx(Spinner, { label: "Loading folders..." }) }));
+    if (error)
+        return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Text, { dimColor: true, children: "Server offline or unreachable" }), _jsx(Text, { dimColor: true, children: error }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "Type /retry to try again \u00B7 /add <name> to work offline" })] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "#00bfff", children: "\uD83D\uDCC1 Your Folders" }) }), folders.length === 0 ? (_jsxs(Box, { children: [_jsxs(Text, { color: "#8b949e", dimColor: true, children: ["No folders yet. Type", ' '] }), _jsxs(Text, { color: "#00bfff", children: ["/new folder ", '<name>'] }), _jsxs(Text, { color: "#8b949e", dimColor: true, children: [' ', "to create one."] })] })) : (folders.map((folder, i) => (_jsx(FolderItem, { folder: folder, isSelected: i === cursor }, folder.id)))), status && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: status }) })), _jsx(Box, { marginTop: 1, children: _jsx(Keybindings, { bindings: BINDINGS }) })] }));
+}

package/dist/tui/screens/ListsScreen.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Lists screen
+import { useState, useEffect, useCallback } from 'react';
+import { Box, Text } from 'ink';
+import { useLists } from '../hooks/useLists.js';
+import { ListItem } from '../components/ListItem.js';
+import { Breadcrumb } from '../components/Breadcrumb.js';
+import { Keybindings } from '../components/Keybindings.js';
+import { Spinner } from '../components/Spinner.js';
+import { createList, deleteList } from '../../api/client.js';
+import { recordRecent } from '../../utils/recents.js';
+const BINDINGS = '[↑↓] navigate  [Enter] open  [b] back  [n] new  [e] edit  [d] delete';
+export function ListsScreen({ push, pop, registerActions, folderId, folderName }) {
+    const { lists, loading, error, refetch } = useLists(folderId);
+    const [cursor, setCursor] = useState(0);
+    const [status, setStatus] = useState(null);
+    const handleCommand = useCallback(async (cmd) => {
+        const parts = cmd.trim().split(/\s+/);
+        const verb = parts[0];
+        const arg = parts.slice(1).join(' ');
+        if (verb === '/add' && arg) {
+            setStatus('Creating list...');
+            createList(arg, folderId)
+                .then(() => {
+                setStatus(`✓ Created "${arg}"`);
+                refetch();
+            })
+                .catch((e) => setStatus(`✗ ${e.message}`));
+        }
+        else if (verb === '/delete') {
+            const list = lists[cursor];
+            if (!list)
+                return;
+            setStatus('Deleting...');
+            deleteList(list.id)
+                .then(() => {
+                setStatus(`✓ Deleted "${list.name}"`);
+                setCursor(0);
+                refetch();
+            })
+                .catch((e) => setStatus(`✗ ${e.message}`));
+        }
+        else if (verb === '/back') {
+            pop();
+        }
+    }, [lists, cursor, folderId, refetch, pop]);
+    useEffect(() => {
+        const len = lists.length;
+        registerActions({
+            onUp: () => setCursor((c) => (c > 0 ? c - 1 : Math.max(0, len - 1))),
+            onDown: () => setCursor((c) => (c < len - 1 ? c + 1 : 0)),
+            onEnter: () => {
+                const list = lists[cursor];
+                if (list) {
+                    recordRecent({ id: list.id, name: list.name, type: 'list', folderId, folderName });
+                    push('tree', { listId: list.id, listName: list.name, folderName: folderName ?? '' });
+                }
+            },
+            onBack: () => pop(),
+            onCommand: handleCommand,
+            onRefetch: refetch,
+        });
+    }, [lists, cursor, push, pop, folderName, registerActions, handleCommand, refetch]);
+    const breadcrumbParts = folderName ? [folderName, 'Lists'] : ['Lists'];
+    if (loading)
+        return (_jsx(Box, { paddingX: 2, children: _jsx(Spinner, { label: "Loading lists..." }) }));
+    if (error)
+        return (_jsx(Box, { paddingX: 2, children: _jsxs(Text, { color: "red", children: ["\u2717 ", error] }) }));
+    if (lists.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", paddingX: 2, children: [_jsx(Breadcrumb, { parts: breadcrumbParts }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "No lists yet. Type /add <name> to create one." }) })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, children: [_jsx(Breadcrumb, { parts: breadcrumbParts }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { bold: true, children: "\uD83D\uDCCB Lists" }) }), lists.map((list, i) => (_jsx(ListItem, { list: list, isSelected: i === cursor }, list.id))), status && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: status }) })), _jsx(Box, { marginTop: 1, children: _jsx(Keybindings, { bindings: BINDINGS }) })] }));
+}