@sascha384/tic 1.34.0 → 1.35.0

package/dist/components/WorkItemList.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState, useMemo, useEffect, useCallback } from 'react';
+import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
 import { Box, Text, useInput, useApp } from 'ink';
 import { navigationStore, useNavigationStore, } from '../stores/navigationStore.js';
 import { listViewStore, useListViewStore } from '../stores/listViewStore.js';
@@ -20,6 +20,9 @@ import { DetailPanel } from './DetailPanel.js';
 import { undoStore } from '../stores/undoStore.js';
 import { recentCommandsStore, useRecentCommandsStore, } from '../stores/recentCommandsStore.js';
 import { isSoftDeleteBackend } from '../backends/types.js';
+import { filterStore, useFilterStore } from '../stores/filterStore.js';
+import { applyFilters, countActiveFilters, summarizeFilters, } from '../filters.js';
+const EMPTY_VIEWS = [];
 export function getTargetIds(markedIds, cursorItem) {
     if (markedIds.size > 0) {
         return [...markedIds];
@@ -77,6 +80,8 @@ export function WorkItemList() {
     const branchCommand = useConfigStore((s) => s.config.branchCommand);
     const copyToClipboard = useConfigStore((s) => s.config.copyToClipboard);
     const showDetailPanel = useConfigStore((s) => s.config.showDetailPanel ?? true);
+    const savedViews = useConfigStore((s) => s.config.views ?? EMPTY_VIEWS);
+    const defaultView = useConfigStore((s) => s.config.defaultView);
     const { exit } = useApp();
     // Store selectors for persistent list view state
     const { cursor, markedIds, expandedIds, rangeAnchor, sortStack } = useListViewStore(useShallow((s) => ({
@@ -86,6 +91,11 @@ export function WorkItemList() {
         rangeAnchor: s.rangeAnchor,
         sortStack: s.sortStack,
     })));
+    const { activeFilters, activeViewName } = useFilterStore(useShallow((s) => ({
+        activeFilters: s.activeFilters,
+        activeViewName: s.activeViewName,
+    })));
+    const filterCount = useMemo(() => countActiveFilters(activeFilters), [activeFilters]);
     const { setCursor, toggleExpanded, toggleMarked, clearMarked, setMarkedIds, setRangeAnchor, clampCursor, removeDeletedItem, toggleSortColumn, clearSort, } = listViewStore.getState();
     // Local state for inputs and templates
     const [allSearchItems, setAllSearchItems] = useState([]);
@@ -121,6 +131,22 @@ export function WorkItemList() {
             void backend.listTemplates().then(setTemplates);
         }
     }, [backend, capabilities.templates]);
+    // Load default view on startup
+    const defaultViewLoadedRef = useRef(false);
+    useEffect(() => {
+        if (defaultViewLoadedRef.current)
+            return;
+        if (!defaultView)
+            return;
+        const view = savedViews.find((v) => v.name === defaultView);
+        if (view) {
+            defaultViewLoadedRef.current = true;
+            filterStore.getState().loadView(view);
+            if (view.sort) {
+                listViewStore.getState().setSortStack(view.sort);
+            }
+        }
+    }, [savedViews, defaultView]);
     const queueStore = useMemo(() => {
         if (!syncManager)
             return null;
@@ -155,13 +181,29 @@ export function WorkItemList() {
             setActiveType(defaultType && types.includes(defaultType) ? defaultType : types[0]);
         }
     }, [activeType, types, setActiveType, defaultType]);
-    const items = useMemo(() => allItems.filter((item) => item.type === activeType), [allItems, activeType]);
+    // Apply view filters to all items (used for children in tree view)
+    const viewFilteredItems = useMemo(() => applyFilters(allItems, activeFilters), [allItems, activeFilters]);
+    const unfilteredCount = useMemo(() => allItems.filter((item) => item.type === activeType).length, [allItems, activeType]);
+    const items = useMemo(() => {
+        const hasTypeFilter = (activeFilters.types?.length ?? 0) > 0;
+        let filtered = hasTypeFilter
+            ? allItems
+            : allItems.filter((item) => item.type === activeType);
+        filtered = applyFilters(filtered, activeFilters);
+        return filtered;
+    }, [allItems, activeType, activeFilters]);
     const fullTree = useMemo(() => {
         const tree = capabilities.relationships
-            ? buildTree(items, allItems, activeType ?? '')
+            ? buildTree(items, viewFilteredItems, activeType ?? '')
             : buildTree(items, items, activeType ?? '');
         return sortTree(tree, sortStack);
-    }, [items, allItems, activeType, capabilities.relationships, sortStack]);
+    }, [
+        items,
+        viewFilteredItems,
+        activeType,
+        capabilities.relationships,
+        sortStack,
+    ]);
     const parentSuggestions = useMemo(() => allItems.map((item) => `${item.id} - ${item.title}`), [allItems]);
     // Collapse state: set of item IDs that are collapsed (collapsed by default)
     // Track explicitly expanded items (inverse of collapsed).
@@ -434,6 +476,8 @@ export function WorkItemList() {
             try {
                 const itemUrl = backend?.getItemUrl(item.id) || '';
                 const result = beginImplementation(item, comments, { branchMode, branchCommand, copyToClipboard }, process.cwd(), { itemUrl });
+                // Restore raw mode after interactive shell changed terminal settings
+                process.stdin.setRawMode?.(true);
                 let msg = result.resumed
                     ? `Resumed work on #${item.id}`
                     : `Started work on #${item.id}`;
@@ -443,6 +487,7 @@ export function WorkItemList() {
                 setWarning(msg);
             }
             catch (e) {
+                process.stdin.setRawMode?.(true);
                 setWarning(e instanceof Error ? e.message : 'Failed to start implementation');
             }
             refreshData();
@@ -453,6 +498,16 @@ export function WorkItemList() {
         if (input === 'O') {
             openOverlay({ type: 'sort-picker' });
         }
+        if (input === 'F') {
+            openOverlay({ type: 'filter-picker' });
+        }
+        if (input === 'V') {
+            openOverlay({ type: 'view-picker' });
+        }
+        if (input === 'X' && filterCount > 0) {
+            filterStore.getState().clearFilters();
+            setToast('Filters cleared');
+        }
         if (input === 's' && treeItems.length > 0) {
             const targetIds = getTargetIds(markedIds, treeItems[cursor]?.item);
             if (targetIds.length > 0) {
@@ -551,6 +606,8 @@ export function WorkItemList() {
         activeType,
         hasSyncManager: syncManager !== null,
         gitAvailable,
+        hasActiveFilters: filterCount > 0,
+        hasSavedViews: savedViews.length > 0,
     };
     const paletteCommands = useMemo(() => getVisibleCommands(commandContext), [
         commandContext.markedCount,
@@ -618,6 +675,93 @@ export function WorkItemList() {
         }
         return items;
     }, [sortStack, capabilities.fields.priority, capabilities.fields.assignee]);
+    const filterPickerItems = useMemo(() => {
+        const items = [];
+        if (filterCount > 0) {
+            items.push({
+                id: '__clear__',
+                label: 'Clear all filters',
+                value: '__clear__',
+            });
+        }
+        for (const s of statuses) {
+            items.push({
+                id: `status-${s}`,
+                label: s,
+                value: s,
+                category: 'Status',
+                selected: activeFilters.statuses?.includes(s),
+            });
+        }
+        for (const p of ['critical', 'high', 'medium', 'low']) {
+            if (!capabilities.fields.priority)
+                continue;
+            items.push({
+                id: `priority-${p}`,
+                label: p.charAt(0).toUpperCase() + p.slice(1),
+                value: p,
+                category: 'Priority',
+                selected: activeFilters.priorities?.includes(p),
+            });
+        }
+        for (const t of types) {
+            items.push({
+                id: `type-${t}`,
+                label: t.charAt(0).toUpperCase() + t.slice(1),
+                value: t,
+                category: 'Type',
+                selected: activeFilters.types?.includes(t),
+            });
+        }
+        for (const a of assignees) {
+            if (!capabilities.fields.assignee)
+                continue;
+            items.push({
+                id: `assignee-${a}`,
+                label: a,
+                value: a,
+                category: 'Assignee',
+                selected: activeFilters.assignees?.includes(a),
+            });
+        }
+        for (const l of labelSuggestions) {
+            if (!capabilities.fields.labels)
+                continue;
+            items.push({
+                id: `label-${l}`,
+                label: l,
+                value: l,
+                category: 'Labels',
+                selected: activeFilters.labels?.includes(l),
+            });
+        }
+        return items;
+    }, [
+        statuses,
+        types,
+        assignees,
+        labelSuggestions,
+        capabilities,
+        activeFilters,
+        filterCount,
+    ]);
+    const viewPickerItems = useMemo(() => {
+        const noFilterLabel = !defaultView ? 'No filters (default)' : 'No filters';
+        return [
+            {
+                id: '__no-filters__',
+                label: noFilterLabel,
+                value: '__no-filters__',
+                hint: !activeViewName && filterCount === 0 ? '●' : '',
+            },
+            ...savedViews.map((v) => ({
+                id: v.name,
+                label: v.name + (v.name === defaultView ? ' (default)' : ''),
+                value: v.name,
+                hint: summarizeFilters(v.filters) + (v.name === activeViewName ? ' ●' : ''),
+            })),
+        ];
+    }, [savedViews, defaultView, activeViewName, filterCount]);
     const handleCommandSelect = (command) => {
         closeOverlay();
         recentCommandsStore.getState().addRecent(command.id);
@@ -655,6 +799,7 @@ export function WorkItemList() {
                     try {
                         const itemUrl = backend?.getItemUrl(item.id) || '';
                         const result = beginImplementation(item, comments, { branchMode, branchCommand, copyToClipboard }, process.cwd(), { itemUrl });
+                        process.stdin.setRawMode?.(true);
                         let msg = result.resumed
                             ? `Resumed work on #${item.id}`
                             : `Started work on #${item.id}`;
@@ -664,6 +809,7 @@ export function WorkItemList() {
                         setWarning(msg);
                     }
                     catch (e) {
+                        process.stdin.setRawMode?.(true);
                         setWarning(e instanceof Error ? e.message : 'Failed to start implementation');
                     }
                     refreshData();
@@ -733,6 +879,25 @@ export function WorkItemList() {
             case 'sort':
                 openOverlay({ type: 'sort-picker' });
                 break;
+            case 'filter':
+                openOverlay({ type: 'filter-picker' });
+                break;
+            case 'clear-filters':
+                filterStore.getState().clearFilters();
+                setToast('Filters cleared');
+                break;
+            case 'load-view':
+                openOverlay({ type: 'view-picker' });
+                break;
+            case 'save-view':
+                openOverlay({ type: 'save-view-input' });
+                break;
+            case 'delete-view':
+                openOverlay({ type: 'delete-view-picker' });
+                break;
+            case 'set-default-view':
+                openOverlay({ type: 'set-default-view' });
+                break;
             case 'quit':
                 exit();
                 break;
@@ -785,7 +950,7 @@ export function WorkItemList() {
     const positionText = treeItems.length > viewport.maxVisible
         ? `${cursor + 1}/${treeItems.length}`
         : '';
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { bold: true, color: "cyan", children: [typeLabel, " \u2014 ", iteration] }), _jsx(Text, { dimColor: true, children: ` (${items.length} items)` }), markedCount > 0 && (_jsx(Text, { color: "magenta", children: ` ● ${markedCount} marked` }))] }) }), _jsx(TableLayout, { treeItems: visibleTreeItems, cursor: viewport.visibleCursor, capabilities: capabilities, collapsedIds: collapsedIds, markedIds: markedIds, terminalWidth: terminalWidth, sortStack: sortStack }), treeItems.length === 0 && !loading && initError && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "red", children: "Failed to connect to backend:" }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "red", children: initError }) }), _jsx(Text, { dimColor: true, children: "Press , for settings or q to quit." })] })), treeItems.length === 0 && !loading && !initError && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["No ", activeType ?? 'item', "s in this iteration. Press c to create, / to search all."] }) })), loading && treeItems.length === 0 && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Loading..." }) })), showDetailPanel && treeItems.length > 0 && treeItems[cursor] && (_jsx(DetailPanel, { item: treeItems[cursor].item, terminalWidth: terminalWidth, showFullDescription: showFullDescription, descriptionScrollOffset: descriptionScrollOffset, maxDescriptionHeight: maxDescriptionHeight })), _jsx(Box, { marginTop: 1, children: showFullDescription ? (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "\u2191\u2193 scroll space/esc close" }), positionText && _jsxs(Text, { dimColor: true, children: [" ", positionText] })] })) : activeOverlay?.type === 'search' ? ((() => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { bold: true, color: "cyan", children: [typeLabel, " \u2014 ", iteration] }), _jsx(Text, { dimColor: true, children: ` (${filterCount > 0 ? `${items.length}/${unfilteredCount}` : items.length} item${unfilteredCount === 1 ? '' : 's'})` }), markedCount > 0 && (_jsx(Text, { color: "magenta", children: ` ● ${markedCount} marked` })), filterCount > 0 && (_jsx(Text, { color: "yellow", children: ` [${filterCount} filter${filterCount === 1 ? '' : 's'}${activeViewName ? `: ${activeViewName}` : ''}]` }))] }) }), _jsx(TableLayout, { treeItems: visibleTreeItems, cursor: viewport.visibleCursor, capabilities: capabilities, collapsedIds: collapsedIds, markedIds: markedIds, terminalWidth: terminalWidth, sortStack: sortStack }), treeItems.length === 0 && !loading && initError && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "red", children: "Failed to connect to backend:" }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "red", children: initError }) }), _jsx(Text, { dimColor: true, children: "Press , for settings or q to quit." })] })), treeItems.length === 0 && !loading && !initError && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["No ", activeType ?? 'item', "s in this iteration. Press c to create, / to search all."] }) })), loading && treeItems.length === 0 && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Loading..." }) })), showDetailPanel && treeItems.length > 0 && treeItems[cursor] && (_jsx(Box, { marginTop: 1, children: _jsx(DetailPanel, { item: treeItems[cursor].item, terminalWidth: terminalWidth, showFullDescription: showFullDescription, descriptionScrollOffset: descriptionScrollOffset, maxDescriptionHeight: maxDescriptionHeight }) })), _jsx(Box, { marginTop: 1, children: showFullDescription ? (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "\u2191\u2193 scroll space/esc close" }), positionText && _jsxs(Text, { dimColor: true, children: [" ", positionText] })] })) : activeOverlay?.type === 'search' ? ((() => {
                     const searchItems = allSearchItems.map((item) => ({
                         id: item.id,
                         label: `#${item.id} ${item.title}`,
@@ -1099,6 +1264,107 @@ export function WorkItemList() {
                         else {
                             toggleSortColumn(item.value);
                         }
+                    }, onCancel: () => closeOverlay() })) : activeOverlay?.type === 'filter-picker' ? ((() => {
+                    const handleFilterConfirm = (selected) => {
+                        const newFilters = {};
+                        for (const item of selected) {
+                            const cat = item.category;
+                            if (cat === 'Status') {
+                                (newFilters.statuses ??= []).push(item.value);
+                            }
+                            else if (cat === 'Priority') {
+                                (newFilters.priorities ??= []).push(item.value);
+                            }
+                            else if (cat === 'Type') {
+                                (newFilters.types ??= []).push(item.value);
+                            }
+                            else if (cat === 'Assignee') {
+                                (newFilters.assignees ??= []).push(item.value);
+                            }
+                            else if (cat === 'Labels') {
+                                (newFilters.labels ??= []).push(item.value);
+                            }
+                        }
+                        filterStore.getState().setFilters(newFilters);
+                        closeOverlay();
+                        const count = countActiveFilters(newFilters);
+                        if (count > 0) {
+                            setToast(`${count} filter${count === 1 ? '' : 's'} applied`);
+                        }
+                        else {
+                            setToast('Filters cleared');
+                        }
+                    };
+                    const handleFilterSelect = (item) => {
+                        if (item.value === '__clear__') {
+                            filterStore.getState().clearFilters();
+                            closeOverlay();
+                            setToast('Filters cleared');
+                        }
+                    };
+                    return (_jsx(OverlayPanel, { title: filterCount > 0 ? `Filter [${filterCount} active]` : 'Filter', items: filterPickerItems, multiSelect: true, onSelect: handleFilterSelect, onConfirm: handleFilterConfirm, onCancel: () => closeOverlay(), placeholder: "Type to filter...", footer: "space toggle  enter confirm  esc cancel" }));
+                })()) : activeOverlay?.type === 'view-picker' ? (_jsx(OverlayPanel, { title: "Load View", items: viewPickerItems, onSelect: (item) => {
+                        if (item.value === '__no-filters__') {
+                            filterStore.getState().clearFilters();
+                            listViewStore.getState().setSortStack([]);
+                            closeOverlay();
+                            setToast('Filters cleared');
+                            return;
+                        }
+                        const view = savedViews.find((v) => v.name === item.value);
+                        if (view) {
+                            filterStore.getState().loadView(view);
+                            if (view.sort) {
+                                listViewStore
+                                    .getState()
+                                    .setSortStack(view.sort);
+                            }
+                            closeOverlay();
+                            setToast(`View "${view.name}" loaded`);
+                        }
+                    }, onCancel: () => closeOverlay(), footer: savedViews.length === 0
+                        ? 'Tip: press F to filter, then :save-view to save | enter select  esc cancel'
+                        : 'enter select  esc cancel' })) : activeOverlay?.type === 'save-view-input' ? (_jsx(OverlayPanel, { title: "Save View", items: [], allowFreeform: true, onSelect: () => { }, onSubmitFreeform: (name) => {
+                        if (!name.trim()) {
+                            closeOverlay();
+                            return;
+                        }
+                        const newView = {
+                            name: name.trim(),
+                            filters: { ...activeFilters },
+                            ...(sortStack.length > 0 ? { sort: [...sortStack] } : {}),
+                        };
+                        const existing = savedViews.filter((v) => v.name !== name.trim());
+                        void configStore.getState().update({
+                            views: [...existing, newView],
+                        });
+                        filterStore.setState({ activeViewName: name.trim() });
+                        closeOverlay();
+                        setToast(`View "${name.trim()}" saved`);
+                    }, onCancel: () => closeOverlay(), placeholder: "Enter view name...", emptyMessage: "Type a name and press enter" })) : activeOverlay?.type === 'delete-view-picker' ? (_jsx(OverlayPanel, { title: "Delete View", items: viewPickerItems.filter((i) => i.id !== '__no-filters__'), onSelect: (item) => {
+                        const remaining = savedViews.filter((v) => v.name !== item.value);
+                        void configStore.getState().update({
+                            views: remaining,
+                            ...(defaultView === item.value
+                                ? { defaultView: undefined }
+                                : {}),
+                        });
+                        if (activeViewName === item.value) {
+                            filterStore.setState({ activeViewName: null });
+                        }
+                        closeOverlay();
+                        setToast(`View "${item.value}" deleted`);
+                    }, onCancel: () => closeOverlay() })) : activeOverlay?.type === 'set-default-view' ? (_jsx(OverlayPanel, { title: "Set Default View", items: viewPickerItems, onSelect: (item) => {
+                        if (item.value === '__no-filters__') {
+                            void configStore.getState().update({ defaultView: undefined });
+                            closeOverlay();
+                            setToast('Default view cleared');
+                        }
+                        else {
+                            void configStore.getState().update({ defaultView: item.value });
+                            closeOverlay();
+                            setToast(`View "${item.value}" set as default`);
+                        }
                     }, onCancel: () => closeOverlay() })) : activeOverlay?.type === 'delete-confirm' ? (_jsx(OverlayPanel, { title: `Delete ${activeOverlay.targetIds.length} item${activeOverlay.targetIds.length > 1 ? 's' : ''}?`, items: [
                         { id: 'yes', label: 'Yes, delete', value: 'yes' },
                         { id: 'no', label: 'Cancel', value: 'no' },