diff --git a/src/renderer/src/components/sidebar/WorkspaceKanbanDrawer.search.test.tsx b/src/renderer/src/components/sidebar/WorkspaceKanbanDrawer.search.test.tsx new file mode 100644 index 000000000..f1dd7234e --- /dev/null +++ b/src/renderer/src/components/sidebar/WorkspaceKanbanDrawer.search.test.tsx @@ -0,0 +1,416 @@ +// @vitest-environment happy-dom + +import React, { act } from 'react' +import { createRoot, type Root } from 'react-dom/client' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { WORKTREE_PALETTE_QUERY_MAX_BYTES } from '@/lib/worktree-palette-query-bounds' +import { useAppStore } from '@/store' +import type { Repo, Worktree, WorktreeMeta } from '../../../../shared/types' +import WorkspaceKanbanDrawer from './WorkspaceKanbanDrawer' +import type { WorkspaceKanbanLaneView } from './workspace-kanban-search' + +type HeaderCapture = { + selectedCount: number + query: string + isFiltering: boolean + isTooLarge: boolean + matchCount: number + totalCount: number + onQueryChange: (query: string) => void + onClearQuery: () => void +} + +type GridCapture = { + laneViews: ReadonlyMap + laneFullWorktreeIds: ReadonlyMap + hasQuery: boolean + selectedWorktreeIds: ReadonlySet + selectedWorktrees: readonly Worktree[] + onContextMenuSelect: ( + event: React.MouseEvent, + worktree: Worktree + ) => readonly Worktree[] +} + +type PointerDragCapture = { + selectedWorktrees: readonly Worktree[] + onDropWorktreesInStatus: (args: { + worktreeIds: readonly string[] + status: string + dropIndex: number + }) => void +} + +const { + syncWorkspaceBoardTaskStatusesMock, + headerState, + gridState, + pointerDragState, + selectionState, + selectionScopeState +} = vi.hoisted(() => ({ + syncWorkspaceBoardTaskStatusesMock: vi.fn(() => + Promise.resolve({ updated: 1, skipped: 0, failed: 0, messages: [] }) + ), + headerState: { current: null as HeaderCapture | null }, + gridState: { current: null as GridCapture | null }, + pointerDragState: { current: null as PointerDragCapture | null }, + selectionState: { current: [] as Worktree[] }, + selectionScopeState: { current: [] as readonly Worktree[] } +})) + +;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true + +vi.mock('sonner', () => ({ toast: { error: vi.fn(), warning: vi.fn() } })) + +vi.mock('@/components/ui/sheet', () => ({ + Sheet: ({ children }: { children: React.ReactNode }) =>
{children}
, + SheetContent: ({ children }: { children: React.ReactNode }) =>
{children}
+})) + +vi.mock('./WorkspaceKanbanDrawerHeader', () => ({ + default: (props: HeaderCapture) => { + headerState.current = props + return
+ } +})) + +vi.mock('./WorkspaceKanbanLaneGrid', () => ({ + default: (props: GridCapture) => { + gridState.current = props + return
+ } +})) + +vi.mock('./WorkspaceKanbanAreaSelectionOverlay', () => ({ + default: React.forwardRef((_, ref) =>
) +})) + +vi.mock('./WorkspaceKanbanPinDropTarget', () => ({ default: () =>
})) + +vi.mock('./use-visible-workspace-kanban-worktree-ids', () => ({ + useVisibleWorkspaceKanbanWorktreeIds: ({ allWorktrees }: { allWorktrees: readonly Worktree[] }) => + new Set(allWorktrees.map((worktree) => worktree.id)) +})) + +vi.mock('./use-workspace-kanban-selection', () => ({ + useWorkspaceKanbanSelection: ( + _open: boolean, + boardWorktrees: readonly Worktree[], + renderedWorktrees?: readonly Worktree[] + ) => { + selectionScopeState.current = renderedWorktrees ?? boardWorktrees + return { + selectedWorktreeIds: new Set(selectionState.current.map((worktree) => worktree.id)), + selectedWorktrees: selectionState.current, + selectionAnchorId: null, + updateSelectionForGesture: vi.fn(), + updateSelectionForArea: vi.fn(), + clearSelection: vi.fn(), + selectForContextMenu: vi.fn(() => selectionState.current) + } + } +})) + +vi.mock('./use-workspace-kanban-area-selection', () => ({ + useWorkspaceKanbanAreaSelection: () => ({ handleAreaSelectionPointerDown: vi.fn() }) +})) + +vi.mock('./use-workspace-kanban-column-resize', () => ({ + useWorkspaceKanbanColumnResize: () => ({ + columnWidth: 308, + isResizingColumn: false, + onColumnResizeStart: vi.fn(), + onColumnResizeKeyDown: vi.fn() + }) +})) + +vi.mock('./use-workspace-kanban-create-worktree', () => ({ + useWorkspaceKanbanCreateWorktree: () => ({ + canCreateWorktree: true, + createWorktreeForStatus: vi.fn() + }) +})) + +vi.mock('./use-workspace-kanban-shift-wheel-scroll', () => ({ + useWorkspaceKanbanShiftWheelScroll: vi.fn() +})) + +vi.mock('./use-workspace-kanban-outside-dismiss', () => ({ + isWorkspaceBoardKeepOpenTarget: () => false, + useWorkspaceKanbanOutsideDismiss: vi.fn() +})) + +vi.mock('@/components/contextual-tours/use-contextual-tour', () => ({ + useContextualTour: vi.fn() +})) + +vi.mock('./use-workspace-kanban-card-pointer-drag', () => ({ + useWorkspaceKanbanCardPointerDrag: (params: PointerDragCapture) => { + pointerDragState.current = params + return { isPointerDragActiveRef: { current: false }, onCardPointerDownCapture: vi.fn() } + } +})) + +vi.mock('./use-workspace-status-drop', () => ({ + useWorkspaceStatusDocumentDrop: vi.fn() +})) + +vi.mock('./workspace-board-task-status-sync', async (importOriginal) => ({ + ...(await importOriginal>()), + syncWorkspaceBoardTaskStatuses: syncWorkspaceBoardTaskStatusesMock +})) + +type UpdateWorktreesMeta = ( + updatesByWorktreeId: ReadonlyMap> +) => Promise + +const statuses = [ + { id: 'todo', label: 'Todo' }, + { id: 'in-review', label: 'In review' } +] + +function worktree(name: string, manualOrder: number, workspaceStatus: string): Worktree { + return { + id: `repo-a::/${name.toLowerCase()}`, + repoId: 'repo-a', + displayName: name, + path: `/${name.toLowerCase()}`, + branch: `feature/${name.toLowerCase()}`, + baseBranch: 'main', + isPinned: false, + sortOrder: manualOrder, + manualOrder, + lastActivityAt: 1, + workspaceStatus + } as unknown as Worktree +} + +const alpha = worktree('Alpha', 100, 'todo') +const beta = worktree('Beta', 200, 'todo') +const gamma = worktree('Gamma', 300, 'todo') +const delta = worktree('Delta', 400, 'todo') +const omega = worktree('Omega', 100, 'in-review') +const allWorktrees = [alpha, beta, gamma, delta, omega] + +let container: HTMLDivElement +let root: Root +let updateWorktreesMeta: ReturnType> + +function renderDrawer(open = true): void { + act(() => { + root.render( + + ) + }) +} + +function typeQuery(query: string): void { + act(() => { + headerState.current?.onQueryChange(query) + }) +} + +function laneIds(status: string): string[] { + return (gridState.current?.laneViews.get(status)?.items ?? []).map((item) => item.id) +} + +beforeEach(() => { + container = document.createElement('div') + document.body.appendChild(container) + root = createRoot(container) + headerState.current = null + gridState.current = null + pointerDragState.current = null + selectionState.current = [] + selectionScopeState.current = [] + syncWorkspaceBoardTaskStatusesMock.mockClear() + updateWorktreesMeta = vi.fn(() => Promise.resolve()) + useAppStore.setState({ + repos: [ + { id: 'repo-a', path: '/repo-a', name: 'repo-a', connectionId: null } as unknown as Repo + ], + worktreesByRepo: { 'repo-a': allWorktrees }, + activeWorktreeId: alpha.id, + workspaceStatuses: statuses, + syncTaskStatusFromWorkspaceBoard: true, + setSyncTaskStatusFromWorkspaceBoard: vi.fn(), + workspaceBoardColumnWidth: 308, + sidebarOpen: true, + sidebarWidth: 280, + sortBy: 'manual', + updateWorktreeMeta: vi.fn(), + updateWorktreesMeta, + getKnownWorktreeById: (id: string) => allWorktrees.find((item) => item.id === id), + recordFeatureInteraction: vi.fn() + }) +}) + +afterEach(() => { + act(() => { + root.unmount() + }) + container.remove() +}) + +describe('WorkspaceKanbanDrawer search', () => { + it('filters every lane in place and reports lane totals', () => { + renderDrawer() + expect(laneIds('todo')).toHaveLength(4) + + typeQuery('gamma') + + expect(laneIds('todo')).toEqual([gamma.id]) + expect(laneIds('in-review')).toEqual([]) + expect(gridState.current?.hasQuery).toBe(true) + expect(gridState.current?.laneViews.get('todo')?.totalCount).toBe(4) + expect(gridState.current?.laneViews.get('in-review')?.totalCount).toBe(1) + expect(headerState.current).toMatchObject({ matchCount: 1, totalCount: 5 }) + }) + + it('restores every lane when the query is cleared', () => { + renderDrawer() + typeQuery('gamma') + + act(() => { + headerState.current?.onClearQuery() + }) + + expect(laneIds('todo')).toHaveLength(4) + expect(laneIds('in-review')).toEqual([omega.id]) + expect(gridState.current?.hasQuery).toBe(false) + }) + + it('drops the query when the board closes so a reopen starts unfiltered', () => { + renderDrawer() + typeQuery('gamma') + expect(headerState.current?.query).toBe('gamma') + + renderDrawer(false) + renderDrawer(true) + + expect(headerState.current?.query).toBe('') + expect(laneIds('todo')).toHaveLength(4) + }) + + it('still runs the Linear status sync for a drop made under an active query', () => { + renderDrawer() + typeQuery('gamma') + + act(() => { + pointerDragState.current?.onDropWorktreesInStatus({ + worktreeIds: [omega.id], + status: 'todo', + dropIndex: 0 + }) + }) + + expect(syncWorkspaceBoardTaskStatusesMock).toHaveBeenCalledWith( + expect.objectContaining({ + worktreeIds: [omega.id], + targetStatus: { id: 'todo', label: 'Todo' } + }) + ) + }) + + it('narrows the pointer-drag payload to the rendered cards', () => { + selectionState.current = [alpha, gamma] + renderDrawer() + expect(pointerDragState.current?.selectedWorktrees).toEqual([alpha, gamma]) + + typeQuery('gamma') + + expect(pointerDragState.current?.selectedWorktrees).toEqual([gamma]) + }) + + it('narrows the context-menu "Move to Status" payload to the rendered cards', () => { + selectionState.current = [alpha, gamma] + renderDrawer() + typeQuery('gamma') + + const event = {} as React.MouseEvent + expect(gridState.current?.onContextMenuSelect(event, gamma)).toEqual([gamma]) + }) + + it('keeps selection highlighting unfiltered while a query is active', () => { + selectionState.current = [alpha, gamma] + renderDrawer() + typeQuery('gamma') + + expect(gridState.current?.selectedWorktreeIds.has(alpha.id)).toBe(true) + expect(gridState.current?.selectedWorktrees).toEqual([gamma]) + }) + + it('counts only the rendered cards in the header selection badge', () => { + selectionState.current = [alpha, gamma] + renderDrawer() + expect(headerState.current?.selectedCount).toBe(2) + + typeQuery('gamma') + + expect(headerState.current?.selectedCount).toBe(1) + }) + + it('scopes selection gestures to the rendered cards', () => { + renderDrawer() + expect(selectionScopeState.current).toHaveLength(5) + + typeQuery('gamma') + + expect(selectionScopeState.current).toEqual([gamma]) + }) + + it('reports a non-filtering query so the header withholds match counts', () => { + renderDrawer() + + typeQuery(' ') + + expect(headerState.current).toMatchObject({ isFiltering: false, matchCount: 5, totalCount: 5 }) + expect(laneIds('todo')).toHaveLength(4) + }) + + it('leaves the whole board unfiltered for an over-bound query', () => { + // Why: searchWorktrees returns [] past the byte bound, which would read as + // "matched nothing" and blank every lane on a paste accident. + renderDrawer() + + typeQuery('x'.repeat(WORKTREE_PALETTE_QUERY_MAX_BYTES + 1)) + + expect(laneIds('todo')).toHaveLength(4) + expect(laneIds('in-review')).toEqual([omega.id]) + expect(gridState.current?.hasQuery).toBe(false) + expect(headerState.current).toMatchObject({ + isFiltering: false, + isTooLarge: true, + matchCount: 5, + totalCount: 5 + }) + }) + + it('ranks a drop into a filtered lane against the full lane, not the rendered one', () => { + renderDrawer() + typeQuery('gamma') + + act(() => { + // Manual order is descending, so the lane is Delta, Gamma, Beta, Alpha. + // Rendered index 0 means "above Gamma" — full-lane index 1, not the top. + pointerDragState.current?.onDropWorktreesInStatus({ + worktreeIds: [omega.id], + status: 'todo', + dropIndex: 0 + }) + }) + + const dropped = updateWorktreesMeta.mock.calls.at(-1)?.[0].get(omega.id) + expect(dropped?.workspaceStatus).toBe('todo') + expect(dropped?.manualOrder).toBeGreaterThan(gamma.manualOrder ?? 0) + expect(dropped?.manualOrder).toBeLessThan(delta.manualOrder ?? 0) + }) +}) diff --git a/src/renderer/src/components/sidebar/WorkspaceKanbanDrawer.tsx b/src/renderer/src/components/sidebar/WorkspaceKanbanDrawer.tsx index dde9e91f9..b239aafea 100644 --- a/src/renderer/src/components/sidebar/WorkspaceKanbanDrawer.tsx +++ b/src/renderer/src/components/sidebar/WorkspaceKanbanDrawer.tsx @@ -27,6 +27,9 @@ import { import { useVisibleWorkspaceKanbanWorktreeIds } from './use-visible-workspace-kanban-worktree-ids' import { getSettingsForWorktreeRuntimeOwner } from '@/lib/worktree-runtime-owner' import { groupWorkspaceKanbanWorktrees } from './workspace-kanban-worktree-groups' +import { resolveFullLaneDropIndex } from './workspace-kanban-filtered-drop-index' +import { buildWorkspaceKanbanLaneViews } from './workspace-kanban-search' +import { useWorkspaceKanbanSearch } from './use-workspace-kanban-search' import { getWorkspaceBoardTaskStatusSyncRequest, syncWorkspaceBoardTaskStatuses, @@ -38,7 +41,7 @@ import { shouldWriteManualOrderForGroupDrop, type WorktreeDragGroup } from './worktree-manual-order' -import type { WorkspaceStatus, WorktreeMeta } from '../../../../shared/types' +import type { WorkspaceStatus, Worktree, WorktreeMeta } from '../../../../shared/types' import { makeWorkspaceStatusId } from '../../../../shared/workspace-statuses' import { STATUS_BAR_RESERVE_HEIGHT, WORKSPACE_TOP_CHROME_HEIGHT } from './workspace-chrome-metrics' import { useContextualTour } from '@/components/contextual-tours/use-contextual-tour' @@ -188,6 +191,29 @@ export default function WorkspaceKanbanDrawer({ })), [worktreesByStatus, workspaceStatuses] ) + const laneFullWorktreeIds = useMemo( + () => new Map(boardDragGroups.map((group) => [group.key, group.worktreeIds])), + [boardDragGroups] + ) + const { query, setQuery, clearQuery, matchingWorktreeIds, hasQuery, isQueryTooLarge } = + useWorkspaceKanbanSearch({ + open, + worktrees: boardWorktrees, + repoMap + }) + const laneViews = useMemo( + () => buildWorkspaceKanbanLaneViews({ worktreesByStatus, matchingWorktreeIds }), + [matchingWorktreeIds, worktreesByStatus] + ) + // Why: range and area gestures must index the cards the user can actually see, + // or a shift-click across a filtered gap silently selects hidden workspaces. + const renderedBoardWorktrees = useMemo( + () => + matchingWorktreeIds + ? boardWorktrees.filter((worktree) => matchingWorktreeIds.has(worktree.id)) + : boardWorktrees, + [boardWorktrees, matchingWorktreeIds] + ) const { selectedWorktreeIds, selectedWorktrees, @@ -196,7 +222,7 @@ export default function WorkspaceKanbanDrawer({ updateSelectionForArea, clearSelection, selectForContextMenu - } = useWorkspaceKanbanSelection(open, boardWorktrees) + } = useWorkspaceKanbanSelection(open, boardWorktrees, renderedBoardWorktrees) const { handleAreaSelectionPointerDown } = useWorkspaceKanbanAreaSelection({ open, boardRef, @@ -439,12 +465,50 @@ export default function WorkspaceKanbanDrawer({ }, [updateWorktreesMeta, worktreeById] ) + // Why: getCardDropTarget indexes the rendered cards, but manual-order math runs + // against the full lane. Translate at the pointer-drag boundary only — + // dropWorktreesAtEndOfStatus already passes a full-lane index. + const dropPointerDraggedWorktreesInStatus = useCallback( + (args: { worktreeIds: readonly string[]; status: WorkspaceStatus; dropIndex: number }) => { + dropWorktreesInStatus({ + worktreeIds: args.worktreeIds, + status: args.status, + dropIndex: resolveFullLaneDropIndex({ + fullLaneIds: laneFullWorktreeIds.get(args.status) ?? [], + renderedIds: (laneViews.get(args.status)?.items ?? []).map((worktree) => worktree.id), + filteredDropIndex: args.dropIndex + }) + }) + }, + [dropWorktreesInStatus, laneFullWorktreeIds, laneViews] + ) + // Why: dragging or right-clicking one visible match must not silently move + // hidden selected cards. selectedWorktreeIds stays unfiltered so highlighting + // and area-selection anchoring still see the whole selection. + const renderedSelectedWorktrees = useMemo( + () => + matchingWorktreeIds + ? selectedWorktrees.filter((worktree) => matchingWorktreeIds.has(worktree.id)) + : selectedWorktrees, + [matchingWorktreeIds, selectedWorktrees] + ) + // Why: selectForContextMenu closes over the unfiltered selection, so the + // "Move to Status" payload has to be narrowed here too. + const selectRenderedForContextMenu = useCallback( + (event: React.MouseEvent, worktree: Worktree): readonly Worktree[] => { + const selection = selectForContextMenu(event, worktree) + return matchingWorktreeIds + ? selection.filter((item) => matchingWorktreeIds.has(item.id)) + : selection + }, + [matchingWorktreeIds, selectForContextMenu] + ) const { isPointerDragActiveRef, onCardPointerDownCapture } = useWorkspaceKanbanCardPointerDrag({ open, boardRef, selectedWorktreeIds, - selectedWorktrees, - onDropWorktreesInStatus: dropWorktreesInStatus, + selectedWorktrees: renderedSelectedWorktrees, + onDropWorktreesInStatus: dropPointerDraggedWorktreesInStatus, onPinWorktrees: pinWorktrees, onDragTargetChange: setDragOverStatus, onShouldShowDropIndicator: shouldWriteDropManualOrder, @@ -695,6 +759,13 @@ export default function WorkspaceKanbanDrawer({ // its tooltip without hover and makes the drawer feel noisy. event.preventDefault() }} + onEscapeKeyDown={(event) => { + // Why: the board owns Escape — useWorkspaceBoardPanel closes it, and + // defers to board text fields so the search field can clear itself. + // Radix's own dismiss would bypass both, so keep it out of the path + // rather than relying on handleSheetOpenChange dropping the request. + event.preventDefault() + }} onPointerDownOutside={(event) => { const originalEvent = event.detail.originalEvent const target = originalEvent.target @@ -746,7 +817,16 @@ export default function WorkspaceKanbanDrawer({ }} > void } const statuses: WorkspaceStatusDefinition[] = [{ id: 'todo', label: 'Todo' }] -function findElement( +function findNode( node: React.ReactNode, - predicate: (props: InspectableProps) => boolean + predicate: (element: React.ReactElement) => boolean ): React.ReactElement | null { if (!isValidElement(node)) { return null } - if (predicate(node.props)) { + if (predicate(node)) { return node } let match: React.ReactElement | null = null @@ -26,14 +31,38 @@ function findElement( if (match) { return } - match = findElement(child, predicate) + match = findNode(child, predicate) }) return match } -function renderHeader(onClose: () => void): React.ReactElement { +function findElement( + node: React.ReactNode, + predicate: (props: InspectableProps) => boolean +): React.ReactElement | null { + return findNode(node, (element) => predicate(element.props)) +} + +function findByType( + node: React.ReactNode, + type: React.ElementType +): React.ReactElement | null { + return findNode(node, (element) => element.type === type) +} + +function renderHeader( + onClose: () => void, + overrides: Partial[0]> = {} +): React.ReactElement { return WorkspaceKanbanDrawerHeader({ selectedCount: 0, + query: '', + isFiltering: false, + isTooLarge: false, + matchCount: 0, + totalCount: 0, + onQueryChange: vi.fn(), + onClearQuery: vi.fn(), workspaceStatuses: statuses, syncTaskStatusFromWorkspaceBoard: false, onSyncTaskStatusFromWorkspaceBoardChange: vi.fn(), @@ -44,7 +73,8 @@ function renderHeader(onClose: () => void): React.ReactElement { onRemoveStatus: vi.fn(), onAddStatus: vi.fn(), onFilterMenuOpenChange: vi.fn(), - onClose + onClose, + ...overrides }) } @@ -62,4 +92,51 @@ describe('WorkspaceKanbanDrawerHeader', () => { expect(onClose).toHaveBeenCalledOnce() }) + + it('renders the search field as a sibling of the sheet title, not inside it', () => { + const header = renderHeader(vi.fn(), { + query: 'orca', + isFiltering: true, + matchCount: 2, + totalCount: 15 + }) + + const title = findByType(header, SheetTitle) + expect(title).not.toBeNull() + expect(findByType(title, WorkspaceKanbanSearchField)).toBeNull() + + const field = findByType(header, WorkspaceKanbanSearchField) + expect(field?.props).toMatchObject({ + query: 'orca', + isFiltering: true, + matchCount: 2, + totalCount: 15 + }) + }) + + it('keeps the filter, settings, and close cluster reachable alongside the field', () => { + const header = renderHeader(vi.fn(), { + query: 'orca', + isFiltering: true, + matchCount: 2, + totalCount: 15 + }) + + expect(findByType(header, SidebarFilter)).not.toBeNull() + expect(findByType(header, WorkspaceKanbanSettingsMenu)).not.toBeNull() + expect(findElement(header, (props) => props['aria-label'] === 'Close')).not.toBeNull() + }) + + it('keeps the selected-count badge and the field clear of the control cluster', () => { + const header = renderHeader(vi.fn(), { selectedCount: 3, query: 'orca' }) + + // The title (with its badge) never shrinks the field into the absolute cluster, + // which the header reserves space for with pr-32. + expect(findByType(header, SheetTitle)?.props.className).toContain('shrink-0') + expect(findByType(header, SheetHeader)?.props.className).toContain('pr-32') + expect( + findElement(header, (props) => Boolean(props.className?.includes('rounded-full'))) + ).not.toBeNull() + expect(findByType(header, WorkspaceKanbanSearchField)).not.toBeNull() + }) }) diff --git a/src/renderer/src/components/sidebar/WorkspaceKanbanDrawerHeader.tsx b/src/renderer/src/components/sidebar/WorkspaceKanbanDrawerHeader.tsx index 723f373ea..051a46057 100644 --- a/src/renderer/src/components/sidebar/WorkspaceKanbanDrawerHeader.tsx +++ b/src/renderer/src/components/sidebar/WorkspaceKanbanDrawerHeader.tsx @@ -4,11 +4,19 @@ import { Button } from '@/components/ui/button' import { SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet' import type { WorkspaceStatusDefinition } from '../../../../shared/types' import SidebarFilter from './SidebarFilter' +import WorkspaceKanbanSearchField from './WorkspaceKanbanSearchField' import WorkspaceKanbanSettingsMenu from './WorkspaceKanbanSettingsMenu' import { translate } from '@/i18n/i18n' type WorkspaceKanbanDrawerHeaderProps = { selectedCount: number + query: string + isFiltering: boolean + isTooLarge: boolean + matchCount: number + totalCount: number + onQueryChange: (query: string) => void + onClearQuery: () => void workspaceStatuses: readonly WorkspaceStatusDefinition[] syncTaskStatusFromWorkspaceBoard: boolean onSyncTaskStatusFromWorkspaceBoardChange: (enabled: boolean) => void @@ -24,6 +32,13 @@ type WorkspaceKanbanDrawerHeaderProps = { export default function WorkspaceKanbanDrawerHeader({ selectedCount, + query, + isFiltering, + isTooLarge, + matchCount, + totalCount, + onQueryChange, + onClearQuery, workspaceStatuses, syncTaskStatusFromWorkspaceBoard, onSyncTaskStatusFromWorkspaceBoardChange, @@ -39,23 +54,37 @@ export default function WorkspaceKanbanDrawerHeader({ return ( <> - - - {translate( - 'auto.components.sidebar.WorkspaceKanbanDrawerHeader.c6a77ab0f4', - 'Workspace board' - )} - - {selectedCount > 1 ? ( - - {selectedCount}{' '} + {/* Why: SheetTitle is the sheet's aria-labelledby target and renders an +

, so the field must be its sibling, not a descendant. */} +
+ + {translate( - 'auto.components.sidebar.WorkspaceKanbanDrawerHeader.81870af08f', - 'selected' + 'auto.components.sidebar.WorkspaceKanbanDrawerHeader.c6a77ab0f4', + 'Workspace board' )} - ) : null} - + {selectedCount > 1 ? ( + + {selectedCount}{' '} + {translate( + 'auto.components.sidebar.WorkspaceKanbanDrawerHeader.81870af08f', + 'selected' + )} + + ) : null} + + +
{translate( 'auto.components.sidebar.WorkspaceKanbanDrawerHeader.e1a34450fc', diff --git a/src/renderer/src/components/sidebar/WorkspaceKanbanLaneGrid.tsx b/src/renderer/src/components/sidebar/WorkspaceKanbanLaneGrid.tsx index 889b3cd3b..0b258d4dc 100644 --- a/src/renderer/src/components/sidebar/WorkspaceKanbanLaneGrid.tsx +++ b/src/renderer/src/components/sidebar/WorkspaceKanbanLaneGrid.tsx @@ -5,11 +5,14 @@ import type { WorkspaceStatusDefinition, Worktree } from '../../../../shared/types' +import type { WorkspaceKanbanLaneView } from './workspace-kanban-search' import WorkspaceKanbanStatusLane from './WorkspaceKanbanStatusLane' type WorkspaceKanbanLaneGridProps = { statuses: readonly WorkspaceStatusDefinition[] - worktreesByStatus: ReadonlyMap + laneViews: ReadonlyMap + laneFullWorktreeIds: ReadonlyMap + hasQuery: boolean repoMap: Map activeWorktreeId: string | null columnWidth: number @@ -35,7 +38,9 @@ type WorkspaceKanbanLaneGridProps = { export default function WorkspaceKanbanLaneGrid({ statuses, - worktreesByStatus, + laneViews, + laneFullWorktreeIds, + hasQuery, repoMap, activeWorktreeId, columnWidth, @@ -67,7 +72,10 @@ export default function WorkspaceKanbanLaneGrid({ { + root.render( + + ) + }) +} + +function input(): HTMLInputElement { + const element = container.querySelector('input') + if (!element) { + throw new Error('field not rendered') + } + return element +} + +function clearButton(): HTMLButtonElement | null { + return container.querySelector('button[aria-label="Clear search"]') +} + +function liveRegion(): HTMLElement { + const element = container.querySelector('[aria-live="polite"]') + if (!element) { + throw new Error('live region not rendered') + } + return element +} + +beforeEach(() => { + vi.useFakeTimers() + container = document.createElement('div') + document.body.appendChild(container) + root = createRoot(container) +}) + +afterEach(() => { + act(() => { + root.unmount() + }) + container.remove() + vi.useRealTimers() + vi.clearAllMocks() +}) + +describe('WorkspaceKanbanSearchField', () => { + it('reports every keystroke without debouncing', () => { + renderField({ query: '' }) + + act(() => { + // Why: React's value tracker shadows the `value` property, so a plain + // assignment would look like a no-op and never fire onChange. + Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input(), 'or') + input().dispatchEvent(new Event('input', { bubbles: true })) + }) + + expect(onQueryChange).toHaveBeenCalledWith('or') + }) + + it('only offers the clear affordance for a non-empty query', () => { + renderField({ query: '' }) + expect(clearButton()).toBeNull() + + renderField({ query: 'orca', matchCount: 3, totalCount: 12 }) + act(() => { + clearButton()?.click() + }) + + expect(onClear).toHaveBeenCalledOnce() + }) + + it('hides the visual match count from assistive tech but keeps the clear button named', () => { + renderField({ query: 'orca', matchCount: 3, totalCount: 12 }) + + const count = container.querySelector('span[aria-hidden="true"]') + expect(count?.textContent).toBe('3 / 12') + expect(clearButton()?.getAttribute('aria-hidden')).toBeNull() + expect(clearButton()?.getAttribute('aria-label')).toBe('Clear search') + }) + + it('withholds counts for text that never narrows the board', () => { + renderField({ query: ' ', isFiltering: false, matchCount: 12, totalCount: 12 }) + + expect(container.querySelector('span[aria-hidden="true"]')).toBeNull() + expect(clearButton()).not.toBeNull() + + act(() => { + vi.advanceTimersByTime(400) + }) + expect(liveRegion().textContent).toBe('') + }) + + it('announces match counts only after the query settles', () => { + renderField({ query: 'orca', matchCount: 3, totalCount: 12 }) + expect(liveRegion().textContent).toBe('') + + act(() => { + vi.advanceTimersByTime(400) + }) + expect(liveRegion().textContent).toBe('3 of 12 workspaces match') + + renderField({ query: 'zzz', matchCount: 0, totalCount: 12 }) + act(() => { + vi.advanceTimersByTime(400) + }) + expect(liveRegion().textContent).toBe('No workspaces match') + + renderField({ query: '' }) + expect(liveRegion().textContent).toBe('') + }) + + it('clears a non-empty query on Escape and closes the board on an empty one', () => { + // Why: useWorkspaceBoardPanel's Escape listener is capture-phase on + // document, so it runs before this handler and stopPropagation cannot + // reach it. The panel defers to board text fields instead, which makes + // this field solely responsible for both Escape outcomes. + renderField({ query: 'orca', matchCount: 3, totalCount: 12 }) + + act(() => { + input().dispatchEvent( + new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }) + ) + }) + expect(onClear).toHaveBeenCalledOnce() + expect(onClose).not.toHaveBeenCalled() + + renderField({ query: '' }) + act(() => { + input().dispatchEvent( + new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }) + ) + }) + expect(onClear).toHaveBeenCalledOnce() + expect(onClose).toHaveBeenCalledOnce() + }) + + it('says so when a query was discarded for length instead of silently not filtering', () => { + // Why: an over-bound query and a query that matched everything look + // identical — full field, untouched board — without this. + renderField({ query: 'x'.repeat(3000), isFiltering: false, isTooLarge: true }) + + expect(container.textContent).toContain('Too long') + expect(input().getAttribute('aria-invalid')).toBe('true') + expect(liveRegion().textContent).toContain('too long') + + renderField({ query: 'orca', matchCount: 3, totalCount: 12 }) + expect(container.textContent).not.toContain('Too long') + expect(input().getAttribute('aria-invalid')).toBeNull() + }) + + it('leaves Escape to the IME while a composition is in progress', () => { + renderField({ query: '検索', matchCount: 1, totalCount: 12 }) + + act(() => { + input().dispatchEvent( + new KeyboardEvent('keydown', { + key: 'Escape', + isComposing: true, + bubbles: true, + cancelable: true + }) + ) + }) + + expect(onClear).not.toHaveBeenCalled() + expect(onClose).not.toHaveBeenCalled() + }) + + it('keeps focus in the field after the clear button unmounts itself', () => { + renderField({ query: 'orca', matchCount: 3, totalCount: 12 }) + act(() => { + input().focus() + clearButton()?.click() + }) + + expect(onClear).toHaveBeenCalledOnce() + expect(document.activeElement).toBe(input()) + }) + + it('reserves overlay width in font-relative units, capped so text stays visible', () => { + // '298 / 1024' is 10 characters; a fixed reserve would let it overlap. + expect(overlayReserve('298 / 1024')).toContain('10ch') + expect(overlayReserve('3 / 9')).toContain('5ch') + + // Capped, so a wide counter in a narrow drawer cannot squeeze the typed + // text to nothing — overlapping is the better failure at that size. + expect(overlayReserve('298 / 1024')).toContain('55%') + + // No overlay means only the clear button needs clearing. + expect(overlayReserve(null)).toBe('32px') + }) +}) diff --git a/src/renderer/src/components/sidebar/WorkspaceKanbanSearchField.tsx b/src/renderer/src/components/sidebar/WorkspaceKanbanSearchField.tsx new file mode 100644 index 000000000..d55b9d084 --- /dev/null +++ b/src/renderer/src/components/sidebar/WorkspaceKanbanSearchField.tsx @@ -0,0 +1,175 @@ +import React, { useEffect, useRef, useState } from 'react' +import { Search, X } from 'lucide-react' +import { Button } from '@/components/ui/button' +import { Input } from '@/components/ui/input' +import { translate } from '@/i18n/i18n' + +const ANNOUNCE_DEBOUNCE_MS = 400 +// Why: the counter overlays the input, so its width has to be reserved rather +// than guessed — a fixed reserve overlaps typed text once counts reach 3 digits. +// `ch` keeps that reserve font-relative across platforms: it measures the input's +// own 12px font while the counter renders at 10px tabular-nums, so digits always +// over-reserve and '/' and ' ' are narrower still. +const CLEAR_BUTTON_RESERVE_PX = 32 +const OVERLAY_GAP_PX = 4 +// Why: a wide counter in a narrow drawer could otherwise reserve the whole +// field and squeeze the typed text to nothing. Overlapping the counter is the +// better failure at that size. +const MAX_OVERLAY_RESERVE = '55%' + +type WorkspaceKanbanSearchFieldProps = { + query: string + /** False for text that never narrows the board (whitespace-only, over-bound). */ + isFiltering: boolean + /** True when the text was discarded for length, which needs saying out loud. */ + isTooLarge: boolean + matchCount: number + totalCount: number + onQueryChange: (query: string) => void + onClear: () => void + /** Escape in an empty field has nothing local to cancel, so it dismisses the board. */ + onClose: () => void +} + +/** Exported for test: happy-dom drops `min()`, so this cannot be read back off a style. */ +export function overlayReserve(overlayText: string | null): string { + if (!overlayText) { + return `${CLEAR_BUTTON_RESERVE_PX}px` + } + return `min(calc(${CLEAR_BUTTON_RESERVE_PX + OVERLAY_GAP_PX}px + ${overlayText.length}ch), ${MAX_OVERLAY_RESERVE})` +} + +function formatAnnouncement(matchCount: number, totalCount: number): string { + return matchCount === 0 + ? translate( + 'auto.components.sidebar.WorkspaceKanbanSearchField.bdb753c78d', + 'No workspaces match' + ) + : translate( + 'auto.components.sidebar.WorkspaceKanbanSearchField.4d96c209d6', + '{{value0}} of {{value1}} workspaces match', + { value0: matchCount, value1: totalCount } + ) +} + +export default function WorkspaceKanbanSearchField({ + query, + isFiltering, + isTooLarge, + matchCount, + totalCount, + onQueryChange, + onClear, + onClose +}: WorkspaceKanbanSearchFieldProps): React.JSX.Element { + const hasText = query !== '' + const counterText = isFiltering ? `${matchCount} / ${totalCount}` : null + const inputRef = useRef(null) + const [announcement, setAnnouncement] = useState('') + + const tooLargeMessage = isTooLarge + ? translate( + 'auto.components.sidebar.WorkspaceKanbanSearchField.7f1c2e94a5', + 'Search text is too long — the board is unfiltered' + ) + : null + const tooLargeLabel = isTooLarge + ? translate('auto.components.sidebar.WorkspaceKanbanSearchField.9a4d0f6b21', 'Too long') + : null + const badgeText = tooLargeLabel ?? counterText + + // Why: the filter itself is undebounced, but a polite live region that changes + // on every keystroke produces continuous speech and makes the field unusable. + useEffect(() => { + if (tooLargeMessage) { + setAnnouncement(tooLargeMessage) + return + } + if (!isFiltering) { + setAnnouncement('') + return + } + const timer = window.setTimeout( + () => setAnnouncement(formatAnnouncement(matchCount, totalCount)), + ANNOUNCE_DEBOUNCE_MS + ) + return () => window.clearTimeout(timer) + }, [isFiltering, matchCount, totalCount, tooLargeMessage]) + + return ( +
+ + onQueryChange(event.target.value)} + onKeyDown={(event) => { + // Why: useWorkspaceBoardPanel defers Escape to board text fields, so + // this field is the only handler — it must cover both outcomes. + // Mid-composition Escape belongs to the IME, which cancels the + // in-progress reading rather than the query behind it. + if (event.key !== 'Escape' || event.nativeEvent.isComposing) { + return + } + event.preventDefault() + if (hasText) { + onClear() + return + } + onClose() + }} + /> + {hasText ? ( +
+ {/* Why: a discarded query looks exactly like one that matched + everything, so the field has to say which it was. */} + {tooLargeLabel ? ( + + ) : counterText ? ( + + ) : null} + +
+ ) : null} +
+ {announcement} +
+
+ ) +} diff --git a/src/renderer/src/components/sidebar/WorkspaceKanbanStatusLane.test.tsx b/src/renderer/src/components/sidebar/WorkspaceKanbanStatusLane.test.tsx new file mode 100644 index 000000000..523e59c69 --- /dev/null +++ b/src/renderer/src/components/sidebar/WorkspaceKanbanStatusLane.test.tsx @@ -0,0 +1,147 @@ +// @vitest-environment happy-dom + +import React, { act } from 'react' +import { createRoot, type Root } from 'react-dom/client' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import type { Repo, Worktree } from '../../../../shared/types' +import { serializeWorkspaceLaneFullIds } from './workspace-kanban-filtered-drop-index' +import WorkspaceKanbanStatusLane from './WorkspaceKanbanStatusLane' + +;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true + +vi.mock('./WorkspaceKanbanCard', () => ({ + default: ({ worktree }: { worktree: Worktree }) => ( +
+ ) +})) + +vi.mock('@/components/ui/tooltip', () => ({ + Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}, + TooltipTrigger: ({ children }: { children: React.ReactNode }) => <>{children}, + TooltipContent: () => null +})) + +const status = { id: 'todo', label: 'Todo' } +const repoMap = new Map() + +function worktree(id: string): Worktree { + return { id, repoId: 'repo-a', displayName: id } as Worktree +} + +let container: HTMLDivElement +let root: Root + +function renderLane(props: { + items: Worktree[] + totalCount: number + hasQuery: boolean + fullWorktreeIds?: string[] +}): void { + act(() => { + root.render( + false)} + onContextMenuSelect={vi.fn(() => [])} + onCreateWorktree={vi.fn()} + onColumnResizeStart={vi.fn()} + onColumnResizeKeyDown={vi.fn()} + /> + ) + }) +} + +function lane(): HTMLElement { + const element = container.querySelector('[data-workspace-status-drop-target]') + if (!element) { + throw new Error('lane not rendered') + } + return element +} + +beforeEach(() => { + container = document.createElement('div') + document.body.appendChild(container) + root = createRoot(container) +}) + +afterEach(() => { + act(() => { + root.unmount() + }) + container.remove() +}) + +describe('WorkspaceKanbanStatusLane', () => { + it('shows a plain count without a query and a matches/total count with one', () => { + renderLane({ items: [worktree('a'), worktree('b')], totalCount: 2, hasQuery: false }) + expect(container.textContent).toContain('2') + expect(container.textContent).not.toContain('2 / 2') + + renderLane({ items: [worktree('a')], totalCount: 5, hasQuery: true }) + expect(container.textContent).toContain('1 / 5') + }) + + it('keeps a fully filtered lane as a labeled drop target', () => { + renderLane({ items: [], totalCount: 5, hasQuery: true }) + + expect(container.textContent).toContain('No matches') + expect(lane().hasAttribute('data-workspace-status-drop-target')).toBe(true) + }) + + it('shows the empty placeholder when there is no query', () => { + renderLane({ items: [], totalCount: 0, hasQuery: false }) + + expect(container.textContent).toContain('Empty') + expect(container.textContent).not.toContain('No matches') + }) + + it('leaves an already-empty lane as Empty under a query rather than "No matches"', () => { + renderLane({ items: [], totalCount: 0, hasQuery: true, fullWorktreeIds: [] }) + + expect(container.textContent).toContain('Empty') + expect(container.textContent).not.toContain('No matches') + expect(container.textContent).not.toContain('0 / 0') + }) + + it('publishes the full lane membership even when the rendered set is a subset', () => { + renderLane({ + items: [worktree('b')], + totalCount: 3, + hasQuery: true, + fullWorktreeIds: ['a', 'b', 'c'] + }) + + expect(lane().dataset.workspaceLaneFullIds).toBe(serializeWorkspaceLaneFullIds(['a', 'b', 'c'])) + expect(container.querySelectorAll('[data-workspace-board-card-id]')).toHaveLength(1) + }) + + it('stays off the full-id channel when nothing is filtered', () => { + // Why: without a query the rendered card scan already is the full lane, and + // the attribute would carry every board id for no reader. + renderLane({ + items: [worktree('a'), worktree('b')], + totalCount: 2, + hasQuery: false, + fullWorktreeIds: ['a', 'b'] + }) + + expect(lane().dataset.workspaceLaneFullIds).toBeUndefined() + }) +}) diff --git a/src/renderer/src/components/sidebar/WorkspaceKanbanStatusLane.tsx b/src/renderer/src/components/sidebar/WorkspaceKanbanStatusLane.tsx index c4016cbbb..40e9f1e83 100644 --- a/src/renderer/src/components/sidebar/WorkspaceKanbanStatusLane.tsx +++ b/src/renderer/src/components/sidebar/WorkspaceKanbanStatusLane.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useMemo } from 'react' import { Plus } from 'lucide-react' import type { Repo, @@ -14,12 +14,17 @@ import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' import WorkspaceKanbanCard from './WorkspaceKanbanCard' +import { serializeWorkspaceLaneFullIds } from './workspace-kanban-filtered-drop-index' import { getWorkspaceStatusVisualMeta } from './workspace-status' import { translate } from '@/i18n/i18n' type WorkspaceKanbanStatusLaneProps = { status: WorkspaceStatusDefinition items: readonly Worktree[] + /** Lane membership before search filtering; defaults to the rendered items. */ + totalCount?: number + hasQuery?: boolean + fullWorktreeIds?: readonly string[] repoMap: Map activeWorktreeId: string | null columnWidth: number @@ -47,6 +52,9 @@ type WorkspaceKanbanStatusLaneProps = { export default function WorkspaceKanbanStatusLane({ status, items, + totalCount, + hasQuery = false, + fullWorktreeIds, repoMap, activeWorktreeId, columnWidth, @@ -68,6 +76,21 @@ export default function WorkspaceKanbanStatusLane({ onColumnResizeKeyDown }: WorkspaceKanbanStatusLaneProps): React.JSX.Element { const meta = getWorkspaceStatusVisualMeta(status) + // Why: a lane that is empty on its own merits is still "Empty" under a query — + // only a lane whose cards were filtered away has anything to say about matches. + const laneTotalCount = totalCount ?? items.length + const isFiltered = hasQuery && laneTotalCount > 0 + // Why: this joins every id in the lane, so it must not rerun on unrelated + // board re-renders — at a few hundred cards it is ~25KB of string per pass. + const laneFullIdsAttribute = useMemo(() => { + if (!hasQuery) { + return undefined + } + return ( + serializeWorkspaceLaneFullIds(fullWorktreeIds ?? items.map((worktree) => worktree.id)) ?? + undefined + ) + }, [fullWorktreeIds, hasQuery, items]) const createTooltip = canCreateWorktree ? `New workspace in ${status.label}` : 'Add a project to create workspaces' @@ -89,6 +112,11 @@ export default function WorkspaceKanbanStatusLane({
- {items.length} + {isFiltered ? `${items.length} / ${laneTotalCount}` : items.length}
@@ -180,7 +208,12 @@ export default function WorkspaceKanbanStatusLane({

) : (
- {translate('auto.components.sidebar.WorkspaceKanbanStatusLane.8ad104642b', 'Empty')} + {isFiltered + ? translate( + 'auto.components.sidebar.WorkspaceKanbanStatusLane.2df01a03ff', + 'No matches' + ) + : translate('auto.components.sidebar.WorkspaceKanbanStatusLane.8ad104642b', 'Empty')}
)} diff --git a/src/renderer/src/components/sidebar/WorktreeList.tsx b/src/renderer/src/components/sidebar/WorktreeList.tsx index 2abe607a1..3d315cb61 100644 --- a/src/renderer/src/components/sidebar/WorktreeList.tsx +++ b/src/renderer/src/components/sidebar/WorktreeList.tsx @@ -170,6 +170,7 @@ import { getWorkspaceKanbanSidebarDropTarget, hasWorkspaceKanbanSidebarDropBoard, isWorkspaceKanbanSidebarDropPointInBoard, + resolveWorkspaceKanbanSidebarFullLaneDropIndex, updateWorkspaceKanbanSidebarDropTargetVisual } from './workspace-kanban-sidebar-drop' import { @@ -3220,7 +3221,12 @@ const VirtualizedWorktreeViewport = React.memo(function VirtualizedWorktreeViewp onDropWorktreesOnWorkspaceBoard({ worktreeIds: drag.reorderDraggedIds, status: boardDropTarget.status, - dropIndex: boardDropTarget.dropIndex, + // Why: the target counts rendered cards, but the groups are the full + // lane. Board search can make those two differ. + dropIndex: resolveWorkspaceKanbanSidebarFullLaneDropIndex( + boardDropTarget.status, + boardDropTarget.dropIndex + ), groups: getWorkspaceKanbanSidebarDropGroups() }) } else { diff --git a/src/renderer/src/components/sidebar/use-workspace-kanban-search.ts b/src/renderer/src/components/sidebar/use-workspace-kanban-search.ts new file mode 100644 index 000000000..df5f3e045 --- /dev/null +++ b/src/renderer/src/components/sidebar/use-workspace-kanban-search.ts @@ -0,0 +1,85 @@ +import { useCallback, useDeferredValue, useMemo, useState } from 'react' +import { isWorktreePaletteQueryTooLarge } from '@/lib/worktree-palette-query-bounds' +import type { Repo, Worktree } from '../../../../shared/types' +import { matchWorkspaceBoardWorktrees } from './workspace-kanban-search' + +function areWorktreeIdSetsEqual(a: ReadonlySet, b: ReadonlySet): boolean { + if (a.size !== b.size) { + return false + } + for (const id of a) { + if (!b.has(id)) { + return false + } + } + return true +} + +export function useWorkspaceKanbanSearch(args: { + open: boolean + worktrees: Worktree[] + repoMap: Map +}): { + query: string + setQuery: (query: string) => void + clearQuery: () => void + matchingWorktreeIds: ReadonlySet | null + hasQuery: boolean + /** True when the query was discarded for exceeding the palette byte bound. */ + isQueryTooLarge: boolean +} { + const [query, setQuery] = useState('') + // Why: board identities churn on agent-status ticks, so an unchanged match set + // must keep its identity or every memoized card re-renders on every tick. + // Store via setState-during-render (not a ref write) so discarded renders do + // not leak a match set that never committed. + const [stableMatched, setStableMatched] = useState | null>(null) + + // Why: a stale query silently hiding cards on reopen is a trap. Reset during + // render like useWorkspaceKanbanSelection, so no frame paints the old filter. + if (!args.open && query !== '') { + setQuery('') + } + + // Why: the input stays fully controlled and undebounced, but a query change + // mounts or unmounts every hidden card — clearing one costs about what opening + // the board costs. Deferring only the filter keeps the caret responsive and + // lets React interrupt the board re-render. + const deferredQuery = useDeferredValue(query) + + const matched = useMemo( + () => + matchWorkspaceBoardWorktrees({ + worktrees: args.worktrees, + query: deferredQuery, + repoMap: args.repoMap + }), + [args.repoMap, args.worktrees, deferredQuery] + ) + + const matchingWorktreeIds = + stableMatched && matched && areWorktreeIdSetsEqual(stableMatched, matched) + ? stableMatched + : matched + if (matchingWorktreeIds !== stableMatched) { + setStableMatched(matchingWorktreeIds) + } + + const clearQuery = useCallback(() => setQuery(''), []) + + return { + query, + setQuery, + clearQuery, + matchingWorktreeIds, + // Why: an over-bound query is non-empty but non-filtering, and the lane + // counts must not switch to "n / m" for it. + hasQuery: matchingWorktreeIds !== null, + // Why: whitespace-only text is also non-filtering, but it is self-evidently + // so. A discarded 2KB paste looks identical to a query that matched + // everything, so only that case earns an explanation. Read the deferred + // query, not the live one — this describes the board, so it has to change + // on the same frame the board does. + isQueryTooLarge: isWorktreePaletteQueryTooLarge(deferredQuery) + } +} diff --git a/src/renderer/src/components/sidebar/use-workspace-kanban-selection.test.tsx b/src/renderer/src/components/sidebar/use-workspace-kanban-selection.test.tsx new file mode 100644 index 000000000..7d20d7c75 --- /dev/null +++ b/src/renderer/src/components/sidebar/use-workspace-kanban-selection.test.tsx @@ -0,0 +1,169 @@ +// @vitest-environment happy-dom + +import React, { act } from 'react' +import { createRoot, type Root } from 'react-dom/client' +import { afterEach, beforeEach, describe, expect, it } from 'vitest' +import type { Worktree } from '../../../../shared/types' +import { useWorkspaceKanbanSelection } from './use-workspace-kanban-selection' + +;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true + +type Selection = ReturnType + +function worktree(id: string): Worktree { + return { id, repoId: 'repo-a', displayName: id } as Worktree +} + +const alpha = worktree('alpha') +const beta = worktree('beta') +const gamma = worktree('gamma') +const delta = worktree('delta') +const fullBoard = [alpha, beta, gamma, delta] + +let container: HTMLDivElement +let root: Root +let selection: Selection + +function Probe({ + board, + rendered +}: { + board: readonly Worktree[] + rendered: readonly Worktree[] +}): null { + selection = useWorkspaceKanbanSelection(true, board, rendered) + return null +} + +function renderSelection( + rendered: readonly Worktree[] = fullBoard, + board: readonly Worktree[] = fullBoard +): void { + act(() => { + root.render() + }) +} + +function click(worktreeId: string, shiftKey = false): void { + act(() => { + selection.updateSelectionForGesture( + { metaKey: false, ctrlKey: false, shiftKey } as React.MouseEvent, + worktreeId + ) + }) +} + +function toggleClick(worktreeId: string): void { + act(() => { + selection.updateSelectionForGesture( + { + metaKey: navigator.userAgent.includes('Mac'), + ctrlKey: !navigator.userAgent.includes('Mac'), + shiftKey: false + } as React.MouseEvent, + worktreeId + ) + }) +} + +function selectedIds(): string[] { + return [...selection.selectedWorktreeIds].sort() +} + +beforeEach(() => { + container = document.createElement('div') + document.body.appendChild(container) + root = createRoot(container) +}) + +afterEach(() => { + act(() => { + root.unmount() + }) + container.remove() +}) + +describe('useWorkspaceKanbanSelection', () => { + it('ranges across the whole board when nothing is filtered', () => { + renderSelection() + + click(alpha.id) + click(gamma.id, true) + + expect(selectedIds()).toEqual(['alpha', 'beta', 'gamma']) + }) + + it('never ranges through cards a search has hidden', () => { + renderSelection([alpha, gamma]) + + click(alpha.id) + click(gamma.id, true) + + expect(selectedIds()).toEqual(['alpha', 'gamma']) + }) + + it('keeps a hidden card selected so clearing the search restores the selection', () => { + renderSelection() + click(alpha.id) + click(beta.id, true) + expect(selectedIds()).toEqual(['alpha', 'beta']) + + renderSelection([alpha]) + expect(selectedIds()).toEqual(['alpha', 'beta']) + + renderSelection() + expect(selectedIds()).toEqual(['alpha', 'beta']) + }) + + it('extends the range from a visible card when a search hides the anchor', () => { + // Anchor lands on delta, then a query hides only delta. + renderSelection() + click(alpha.id) + toggleClick(beta.id) + toggleClick(delta.id) + expect(selectedIds()).toEqual(['alpha', 'beta', 'delta']) + + renderSelection([alpha, beta, gamma]) + click(gamma.id, true) + + // Without a rendered anchor this collapsed to just gamma, dropping the + // still-visible alpha and beta along with it. + expect(selectedIds()).toEqual(['alpha', 'beta', 'gamma']) + }) + + it('replaces a hidden selection on every replace-shaped gesture alike', () => { + // Why: a range, a plain click and a non-additive marquee all mean "replace". + // If a range alone carried hidden cards through, the user would be left with + // a selection they cannot see, count, or narrow. + renderSelection() + click(delta.id) + toggleClick(alpha.id) + expect(selectedIds()).toEqual(['alpha', 'delta']) + + renderSelection([alpha, beta, gamma]) + click(gamma.id, true) + + expect(selectedIds()).toEqual(['alpha', 'beta', 'gamma']) + }) + + it('lets a plain click clear a selection the search is hiding', () => { + renderSelection() + click(alpha.id) + toggleClick(delta.id) + + renderSelection([alpha, beta, gamma]) + click(beta.id) + + expect(selectedIds()).toEqual(['beta']) + }) + + it('still prunes ids that leave the board entirely', () => { + renderSelection() + click(alpha.id) + click(gamma.id, true) + + renderSelection([alpha, beta], [alpha, beta]) + + expect(selectedIds()).toEqual(['alpha', 'beta']) + }) +}) diff --git a/src/renderer/src/components/sidebar/use-workspace-kanban-selection.ts b/src/renderer/src/components/sidebar/use-workspace-kanban-selection.ts index a73fad197..54efeccde 100644 --- a/src/renderer/src/components/sidebar/use-workspace-kanban-selection.ts +++ b/src/renderer/src/components/sidebar/use-workspace-kanban-selection.ts @@ -8,11 +8,35 @@ import { updateWorktreeSelection } from './worktree-multi-selection' -export function useWorkspaceKanbanSelection(open: boolean, boardWorktrees: readonly Worktree[]) { +/** Returns the first still-rendered selected id, or `null` if the anchor is fine. */ +function resolveRenderedAnchorId( + renderedWorktreeIds: readonly string[], + selectedWorktreeIds: ReadonlySet, + anchorId: string +): string | null { + if (renderedWorktreeIds.includes(anchorId)) { + return null + } + return renderedWorktreeIds.find((id) => selectedWorktreeIds.has(id)) ?? null +} + +// Why: board search hides cards without dropping them from the board, so range +// and area gestures index the rendered subset while pruning still spans the +// whole board — a card hidden by a query keeps its selection until a gesture +// replaces it, and every action path narrows to the rendered cards anyway. +export function useWorkspaceKanbanSelection( + open: boolean, + boardWorktrees: readonly Worktree[], + renderedWorktrees: readonly Worktree[] = boardWorktrees +) { const boardWorktreeIds = useMemo( () => boardWorktrees.map((worktree) => worktree.id), [boardWorktrees] ) + const renderedWorktreeIds = useMemo( + () => renderedWorktrees.map((worktree) => worktree.id), + [renderedWorktrees] + ) const [selectedWorktreeIds, setSelectedWorktreeIds] = useState>(new Set()) const [selectionAnchorId, setSelectionAnchorId] = useState(null) const selectedWorktrees = useMemo( @@ -42,18 +66,30 @@ export function useWorkspaceKanbanSelection(open: boolean, boardWorktrees: reado const updateSelectionForGesture = useCallback( (event: React.MouseEvent, worktreeId: string): boolean => { const intent = getWorktreeSelectionIntent(event, navigator.userAgent.includes('Mac')) + // Why: a search can hide the anchor while leaving the rest of the + // selection on screen. updateWorktreeSelection reads an anchor missing + // from visibleIds as "no anchor" and collapses the range to the click, + // so re-anchor onto the first still-rendered selected card instead. + const anchorId = + intent === 'range' && selectionAnchorId !== null + ? (resolveRenderedAnchorId(renderedWorktreeIds, selectedWorktreeIds, selectionAnchorId) ?? + selectionAnchorId) + : selectionAnchorId const result = updateWorktreeSelection({ - visibleIds: boardWorktreeIds, + visibleIds: renderedWorktreeIds, previousSelectedIds: selectedWorktreeIds, - previousAnchorId: selectionAnchorId, + previousAnchorId: anchorId, targetId: worktreeId, intent }) + // Why: a range replaces the selection, exactly like a plain click and a + // non-additive marquee. Carrying hidden cards through it would leave the + // user with a selection they cannot see, count, or narrow. setSelectedWorktreeIds(result.selectedIds) setSelectionAnchorId(result.anchorId) return intent !== 'replace' }, - [boardWorktreeIds, selectedWorktreeIds, selectionAnchorId] + [renderedWorktreeIds, selectedWorktreeIds, selectionAnchorId] ) const selectForContextMenu = useCallback( @@ -76,7 +112,7 @@ export function useWorkspaceKanbanSelection(open: boolean, boardWorktrees: reado baseAnchorId: string | null = selectionAnchorId ): void => { const result = updateWorktreeAreaSelection({ - visibleIds: boardWorktreeIds, + visibleIds: renderedWorktreeIds, previousSelectedIds: baseSelectedIds, previousAnchorId: baseAnchorId, areaIds, @@ -89,7 +125,7 @@ export function useWorkspaceKanbanSelection(open: boolean, boardWorktrees: reado previous === result.anchorId ? previous : result.anchorId ) }, - [boardWorktreeIds, selectedWorktreeIds, selectionAnchorId] + [renderedWorktreeIds, selectedWorktreeIds, selectionAnchorId] ) const clearSelection = useCallback(() => { diff --git a/src/renderer/src/components/sidebar/useWorkspaceBoardPanel.test.tsx b/src/renderer/src/components/sidebar/useWorkspaceBoardPanel.test.tsx index 000180007..575ec9ab0 100644 --- a/src/renderer/src/components/sidebar/useWorkspaceBoardPanel.test.tsx +++ b/src/renderer/src/components/sidebar/useWorkspaceBoardPanel.test.tsx @@ -52,12 +52,23 @@ async function updatePanel(update: (state: WorkspaceBoardPanelState) => void): P }) } -async function pressEscape(): Promise { +async function pressEscape(from: EventTarget = document): Promise { await act(async () => { - document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })) + from.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })) }) } +function appendInput(inside: 'board' | 'app'): HTMLInputElement { + const host = document.createElement('div') + if (inside === 'board') { + host.setAttribute('data-workspace-board-sheet', '') + } + const field = document.createElement('input') + host.appendChild(field) + document.body.appendChild(host) + return field +} + describe('useWorkspaceBoardPanel', () => { beforeEach(() => { latestState = null @@ -190,6 +201,30 @@ describe('useWorkspaceBoardPanel', () => { expect(panelState().workspaceBoardOpen).toBe(true) }) + it('defers Escape to a text field inside the board', async () => { + // Why: this listener is capture-phase on document, so it runs before React's + // handlers and a board field cannot stopPropagation its way out. The field + // owns Escape and calls closeWorkspaceBoard itself when it has nothing to + // cancel — without this guard, clearing a search query dismissed the board. + await renderHookProbe() + const field = appendInput('board') + + await updatePanel((state) => state.openWorkspaceBoard()) + await pressEscape(field) + + expect(panelState().workspaceBoardOpen).toBe(true) + }) + + it('still closes the board on Escape from a text field outside it', async () => { + await renderHookProbe() + const field = appendInput('app') + + await updatePanel((state) => state.openWorkspaceBoard()) + await pressEscape(field) + + expect(panelState().workspaceBoardOpen).toBe(false) + }) + it('keeps the board open on Escape while a nested dialog is open', async () => { await renderHookProbe() const dialog = document.createElement('div') diff --git a/src/renderer/src/components/sidebar/useWorkspaceBoardPanel.ts b/src/renderer/src/components/sidebar/useWorkspaceBoardPanel.ts index 8d99d225e..b77ddb234 100644 --- a/src/renderer/src/components/sidebar/useWorkspaceBoardPanel.ts +++ b/src/renderer/src/components/sidebar/useWorkspaceBoardPanel.ts @@ -1,6 +1,21 @@ import { useCallback, useEffect, useRef, useState } from 'react' +import { isEditableTarget } from '@/lib/editable-target' import { useAppStore } from '@/store' +const WORKSPACE_BOARD_SHEET_SELECTOR = '[data-workspace-board-sheet]' + +// Why: the board's Escape listener is capture-phase on document, so it runs +// before React's handlers and a text field inside the board cannot stop it. +// Board fields own Escape and close the board themselves when they have +// nothing left to cancel. +function isWorkspaceBoardEditableTarget(target: EventTarget | null): boolean { + return ( + isEditableTarget(target) && + target instanceof HTMLElement && + target.closest(WORKSPACE_BOARD_SHEET_SELECTOR) !== null + ) +} + const WORKSPACE_BOARD_ESCAPE_BLOCKING_OVERLAY_SELECTOR = [ '[data-slot="dropdown-menu-content"][data-state="open"]', '[data-slot="context-menu-content"][data-state="open"]', @@ -124,6 +139,9 @@ export function useWorkspaceBoardPanel(): WorkspaceBoardPanelState { if (workspaceBoardMenuOpen) { return } + if (isWorkspaceBoardEditableTarget(event.target)) { + return + } // Why: Escape should dismiss interactive nested overlays before this // companion panel, but non-interactive tooltips should not trap it. if (document.querySelector(WORKSPACE_BOARD_ESCAPE_BLOCKING_OVERLAY_SELECTOR)) { diff --git a/src/renderer/src/components/sidebar/workspace-kanban-filtered-drop-index.test.ts b/src/renderer/src/components/sidebar/workspace-kanban-filtered-drop-index.test.ts new file mode 100644 index 000000000..63987713b --- /dev/null +++ b/src/renderer/src/components/sidebar/workspace-kanban-filtered-drop-index.test.ts @@ -0,0 +1,148 @@ +import { describe, expect, it } from 'vitest' +import { + parseWorkspaceLaneFullIds, + resolveFullLaneDropIndex, + serializeWorkspaceLaneFullIds +} from './workspace-kanban-filtered-drop-index' + +const FULL = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] + +describe('resolveFullLaneDropIndex', () => { + it('is the identity when nothing is filtered', () => { + for (let index = 0; index <= FULL.length; index++) { + expect( + resolveFullLaneDropIndex({ + fullLaneIds: FULL, + renderedIds: FULL, + filteredDropIndex: index + }) + ).toBe(index) + } + }) + + it('maps the first filtered slot onto the first match position', () => { + expect( + resolveFullLaneDropIndex({ + fullLaneIds: FULL, + renderedIds: ['h'], + filteredDropIndex: 0 + }) + ).toBe(7) + }) + + it('maps the end of a filtered lane one past the last match', () => { + expect( + resolveFullLaneDropIndex({ + fullLaneIds: FULL, + renderedIds: ['b', 'e'], + filteredDropIndex: 2 + }) + ).toBe(5) + }) + + it('maps a slot between two matches onto the following match', () => { + expect( + resolveFullLaneDropIndex({ + fullLaneIds: FULL, + renderedIds: ['b', 'e', 'g'], + filteredDropIndex: 1 + }) + ).toBe(4) + }) + + it('appends into a lane whose cards are all filtered away', () => { + // Why: an empty rendered lane reports drop index 0 for every pointer + // position, so honouring it would always prepend. The document-drop path + // appends for the same gesture, and these must not disagree. + expect( + resolveFullLaneDropIndex({ fullLaneIds: FULL, renderedIds: [], filteredDropIndex: 0 }) + ).toBe(FULL.length) + expect( + resolveFullLaneDropIndex({ fullLaneIds: FULL, renderedIds: [], filteredDropIndex: 3 }) + ).toBe(FULL.length) + expect( + resolveFullLaneDropIndex({ fullLaneIds: [], renderedIds: [], filteredDropIndex: 0 }) + ).toBe(0) + }) + + it('falls back toward the end of the lane the branch was aiming at', () => { + // A head drop resolves to the head, not the tail — the opposite fallback + // would land a card at the bottom of a lane the user dropped it on top of. + expect( + resolveFullLaneDropIndex({ + fullLaneIds: FULL, + renderedIds: ['stale', 'e'], + filteredDropIndex: 0 + }) + ).toBe(0) + expect( + resolveFullLaneDropIndex({ + fullLaneIds: FULL, + renderedIds: ['b', 'stale'], + filteredDropIndex: 2 + }) + ).toBe(FULL.length) + expect( + resolveFullLaneDropIndex({ + fullLaneIds: FULL, + renderedIds: ['b', 'stale', 'g'], + filteredDropIndex: 1 + }) + ).toBe(FULL.length) + }) + + it('still translates when a stale lane has the same length but different members', () => { + // Why: a length-only guard would take the identity branch here and skip + // translation, landing the card at an index that means nothing in FULL. + expect( + resolveFullLaneDropIndex({ + fullLaneIds: ['a', 'b', 'c'], + renderedIds: ['a', 'x', 'c'], + filteredDropIndex: 1 + }) + ).toBe(3) + }) + + it('clamps out-of-range filtered indices to the first and last branches', () => { + expect( + resolveFullLaneDropIndex({ + fullLaneIds: FULL, + renderedIds: ['b', 'e'], + filteredDropIndex: -3 + }) + ).toBe(1) + expect( + resolveFullLaneDropIndex({ + fullLaneIds: FULL, + renderedIds: ['b', 'e'], + filteredDropIndex: 99 + }) + ).toBe(5) + }) +}) + +describe('workspace lane full-id channel', () => { + it('round-trips lane membership through the delimiter', () => { + const ids = ['repo-a::/Users/dev/projects/orca/main', 'repo-b::C:\\src\\atlas, v2'] + const serialized = serializeWorkspaceLaneFullIds(ids) + + expect(serialized).not.toBeNull() + expect(parseWorkspaceLaneFullIds(serialized ?? undefined)).toEqual(ids) + }) + + it('distinguishes an unpublished lane from an empty one', () => { + expect(parseWorkspaceLaneFullIds(undefined)).toBeNull() + expect(parseWorkspaceLaneFullIds('')).toEqual([]) + expect(serializeWorkspaceLaneFullIds([])).toBe('') + }) + + it('survives ids holding every character a path can legally contain', () => { + // Why: a POSIX path may hold any byte but NUL and '/', so a newline, comma + // or colon delimiter would split one id into phantom lane members. Dropping + // the channel is not an escape hatch either — under a query the reader + // would fall back to the DOM and see only the matched cards. + const ids = ['repo-a::/Users/dev/we\nird, one: two', 'repo-b::C:\\src\\atlas'] + + expect(parseWorkspaceLaneFullIds(serializeWorkspaceLaneFullIds(ids) ?? undefined)).toEqual(ids) + }) +}) diff --git a/src/renderer/src/components/sidebar/workspace-kanban-filtered-drop-index.ts b/src/renderer/src/components/sidebar/workspace-kanban-filtered-drop-index.ts new file mode 100644 index 000000000..e1123d496 --- /dev/null +++ b/src/renderer/src/components/sidebar/workspace-kanban-filtered-drop-index.ts @@ -0,0 +1,87 @@ +// Why: worktree ids embed repo paths, so commas, colons and newlines are all +// unusable as a separator in the `data-workspace-lane-full-ids` channel — a +// POSIX path may contain any byte but NUL and '/', and a Windows path carries +// a drive colon. NUL is the one character no path can hold, so it cannot split +// an id into phantom lane members. Verified to round-trip through setAttribute +// and dataset in Chromium — but HTML *parsing* rewrites NUL to U+FFFD, so this +// channel must stay setAttribute-only and never pass through innerHTML. +export const WORKSPACE_LANE_FULL_IDS_DELIMITER = '\0' + +/** + * Returns `null` when the lane cannot be represented on this channel. Defence + * only: no real worktree id can contain the NUL delimiter. Dropping the channel + * is the wrong fallback under an active query — the reader would then scan the + * DOM and see only the matched cards — so this must stay unreachable. + */ +export function serializeWorkspaceLaneFullIds(worktreeIds: readonly string[]): string | null { + if (worktreeIds.some((worktreeId) => worktreeId.includes(WORKSPACE_LANE_FULL_IDS_DELIMITER))) { + return null + } + return worktreeIds.join(WORKSPACE_LANE_FULL_IDS_DELIMITER) +} + +/** Returns `null` when the lane never published the attribute. */ +export function parseWorkspaceLaneFullIds(value: string | undefined): string[] | null { + if (value === undefined) { + return null + } + return value === '' ? [] : value.split(WORKSPACE_LANE_FULL_IDS_DELIMITER) +} + +/** + * Translates a drop index derived from the *rendered* cards of a lane onto the + * lane's full membership. Board search hides non-matching cards, but manual-order + * math runs against the full lane, so the two sides must be reconciled. + * + * Both id lists still contain the dragged ids — `getCardDropTarget` counts the + * dragged card and `buildManualOrderUpdatesForGroupDrop` computes + * `removedBeforeDrop` against the pre-removal group. Keep it that way. + */ +export function resolveFullLaneDropIndex(args: { + fullLaneIds: readonly string[] + renderedIds: readonly string[] + filteredDropIndex: number +}): number { + const { fullLaneIds, renderedIds, filteredDropIndex } = args + // Why: equal lengths alone would take this branch for a stale DOM lane that + // holds the same card count but different membership, skipping translation. + if (isSameLane(fullLaneIds, renderedIds)) { + return filteredDropIndex + } + // Why: a lane filtered down to nothing reports drop index 0 for every pointer + // position, so honouring it would silently prepend. Append instead, matching + // dropWorktreesAtEndOfStatus for the same gesture on the document-drop path. + if (renderedIds.length === 0) { + return fullLaneIds.length + } + + if (filteredDropIndex <= 0) { + // Why: the head branch means "above the first match", so an unresolvable id + // falls back to the lane head. Using the tail would invert the gesture. + return indexInFullLane(fullLaneIds, renderedIds[0]!, 0) + } + if (filteredDropIndex >= renderedIds.length) { + const lastIndex = indexInFullLane(fullLaneIds, renderedIds.at(-1)!, fullLaneIds.length - 1) + return Math.min(fullLaneIds.length, lastIndex + 1) + } + return indexInFullLane(fullLaneIds, renderedIds[filteredDropIndex]!, fullLaneIds.length) +} + +function isSameLane(fullLaneIds: readonly string[], renderedIds: readonly string[]): boolean { + return ( + renderedIds.length === fullLaneIds.length && + renderedIds.every((worktreeId, index) => worktreeId === fullLaneIds[index]) + ) +} + +// Why: a rendered id missing from the full lane is a stale-DOM race, so the +// caller supplies the end of the lane its branch was aiming at — a raw -1 would +// clamp to 0 downstream and teleport a tail drop to the top. +function indexInFullLane( + fullLaneIds: readonly string[], + worktreeId: string, + fallbackIndex: number +): number { + const index = fullLaneIds.indexOf(worktreeId) + return index === -1 ? fallbackIndex : index +} diff --git a/src/renderer/src/components/sidebar/workspace-kanban-search.test.ts b/src/renderer/src/components/sidebar/workspace-kanban-search.test.ts new file mode 100644 index 000000000..d5b42c45c --- /dev/null +++ b/src/renderer/src/components/sidebar/workspace-kanban-search.test.ts @@ -0,0 +1,148 @@ +import { describe, expect, it } from 'vitest' +import { WORKTREE_PALETTE_QUERY_MAX_BYTES } from '@/lib/worktree-palette-query-bounds' +import type { Repo, Worktree } from '../../../../shared/types' +import { + buildWorkspaceKanbanLaneViews, + matchWorkspaceBoardWorktrees +} from './workspace-kanban-search' + +function worktree(overrides: Partial & { id: string }): Worktree { + return { + repoId: 'repo-a', + displayName: 'Workspace', + path: `/${overrides.id}`, + branch: 'main', + baseBranch: 'main', + isPinned: false, + sortOrder: 1, + ...overrides + } as Worktree +} + +const repoMap = new Map([ + ['repo-a', { id: 'repo-a', displayName: 'orca' } as Repo], + ['repo-b', { id: 'repo-b', displayName: 'atlas' } as Repo] +]) + +function match(worktrees: Worktree[], query: string): ReadonlySet | null { + return matchWorkspaceBoardWorktrees({ worktrees, query, repoMap }) +} + +describe('matchWorkspaceBoardWorktrees', () => { + it('treats blank and whitespace-only queries as no filtering', () => { + const worktrees = [worktree({ id: 'a' })] + expect(match(worktrees, '')).toBeNull() + expect(match(worktrees, ' ')).toBeNull() + }) + + it('matches display name, branch, and repo display name', () => { + const worktrees = [ + worktree({ id: 'name', displayName: 'Search field' }), + worktree({ id: 'branch', displayName: 'Other', branch: 'refs/heads/feat/search-lane' }), + worktree({ id: 'repo', displayName: 'Other', repoId: 'repo-b' }), + worktree({ id: 'miss', displayName: 'Other' }) + ] + + expect(match(worktrees, 'search')).toEqual(new Set(['name', 'branch'])) + expect(match(worktrees, 'atlas')).toEqual(new Set(['repo'])) + }) + + it('matches the workspace comment', () => { + const worktrees = [ + worktree({ id: 'commented', displayName: 'Other', comment: 'blocked on review' }), + worktree({ id: 'miss', displayName: 'Other' }) + ] + + expect(match(worktrees, 'blocked')).toEqual(new Set(['commented'])) + }) + + it('excludes worktrees that only match on PR, issue, or port', () => { + const worktrees = [ + worktree({ id: 'pr', displayName: 'Other', linkedPR: 4242 }), + worktree({ id: 'issue', displayName: 'Other', linkedIssue: 4242 }) + ] + + expect(match(worktrees, '4242')).toEqual(new Set()) + }) + + it('matches composite repo/branch queries', () => { + const worktrees = [ + worktree({ id: 'hit', displayName: 'Other', branch: 'main' }), + worktree({ id: 'wrong-repo', displayName: 'Other', repoId: 'repo-b', branch: 'main' }) + ] + + expect(match(worktrees, 'orca/main')).toEqual(new Set(['hit'])) + }) + + it('is case-insensitive', () => { + const worktrees = [worktree({ id: 'a', displayName: 'Search Field' })] + + expect(match(worktrees, 'SEARCH')).toEqual(new Set(['a'])) + }) + + it('treats regex metacharacters as literal text', () => { + // Why: matching is indexOf, never RegExp. This pins that, so swapping in a + // regex later fails here instead of silently changing what users can search. + const worktrees = [ + worktree({ id: 'literal', displayName: 'feat.*fix' }), + worktree({ id: 'would-match-as-regex', displayName: 'featANYfix' }) + ] + + expect(match(worktrees, 'feat.*fix')).toEqual(new Set(['literal'])) + expect(match(worktrees, '(')).toEqual(new Set()) + }) + + it('matches non-ASCII display names and comments', () => { + const worktrees = [ + worktree({ id: 'cjk', displayName: '検索フィールド' }), + worktree({ id: 'accent', displayName: 'Other', comment: 'Añadir búsqueda' }), + worktree({ id: 'miss', displayName: 'Other' }) + ] + + expect(match(worktrees, 'フィールド')).toEqual(new Set(['cjk'])) + expect(match(worktrees, 'BÚSQUEDA')).toEqual(new Set(['accent'])) + }) + + it('treats an over-bound query as no filtering rather than zero matches', () => { + const worktrees = [worktree({ id: 'a', displayName: 'Search field' })] + + expect(match(worktrees, 'x'.repeat(WORKTREE_PALETTE_QUERY_MAX_BYTES + 1))).toBeNull() + }) +}) + +describe('buildWorkspaceKanbanLaneViews', () => { + const todo = [worktree({ id: 'todo-a', displayName: 'Alpha' }), worktree({ id: 'todo-b' })] + const doing = [worktree({ id: 'doing-a', displayName: 'Alpha' })] + const worktreesByStatus = new Map([ + ['todo', todo], + ['doing', doing] + ]) + + it('reuses the input arrays when no query is active', () => { + const views = buildWorkspaceKanbanLaneViews({ worktreesByStatus, matchingWorktreeIds: null }) + + expect(views.get('todo')?.items).toBe(todo) + expect(views.get('doing')?.items).toBe(doing) + expect(views.get('todo')?.totalCount).toBe(2) + }) + + it('preserves lane order and per-lane sort order', () => { + const views = buildWorkspaceKanbanLaneViews({ + worktreesByStatus, + matchingWorktreeIds: new Set(['todo-b', 'todo-a', 'doing-a']) + }) + + expect(Array.from(views.keys())).toEqual(['todo', 'doing']) + expect(views.get('todo')?.items.map((item) => item.id)).toEqual(['todo-a', 'todo-b']) + }) + + it('keeps a fully filtered lane with an empty item list and its real total', () => { + const views = buildWorkspaceKanbanLaneViews({ + worktreesByStatus, + matchingWorktreeIds: new Set(['doing-a']) + }) + + expect(views.get('todo')).toEqual({ items: [], totalCount: 2 }) + expect(views.get('doing')?.items.map((item) => item.id)).toEqual(['doing-a']) + }) +}) diff --git a/src/renderer/src/components/sidebar/workspace-kanban-search.ts b/src/renderer/src/components/sidebar/workspace-kanban-search.ts new file mode 100644 index 000000000..a7f8b0840 --- /dev/null +++ b/src/renderer/src/components/sidebar/workspace-kanban-search.ts @@ -0,0 +1,62 @@ +import { isWorktreePaletteQueryTooLarge } from '@/lib/worktree-palette-query-bounds' +import { searchWorktrees, type PaletteMatchedField } from '@/lib/worktree-palette-search' +import type { Repo, WorkspaceStatus, Worktree } from '../../../../shared/types' + +export type WorkspaceKanbanLaneView = { + items: readonly Worktree[] + totalCount: number +} + +// Why: the board is a drag surface for named workspaces, so a card may only be +// hidden by fields the user can read on it. PR/issue/port matches are palette-only. +const BOARD_MATCHED_FIELDS: ReadonlySet = new Set([ + 'displayName', + 'branch', + 'repo', + 'comment' +]) + +/** + * Returns `null` when no filtering is active — distinct from an empty set, which + * means a real query matched nothing. + */ +export function matchWorkspaceBoardWorktrees(args: { + worktrees: Worktree[] + query: string + repoMap: Map +}): ReadonlySet | null { + if (!args.query.trim()) { + return null + } + // Why: searchWorktrees returns [] for an over-bound query, which downstream + // reads as "matched nothing" and blanks the whole board on a paste accident. + if (isWorktreePaletteQueryTooLarge(args.query)) { + return null + } + + const matched = new Set() + for (const result of searchWorktrees(args.worktrees, args.query, args.repoMap, null, null)) { + if (result.matchedField && BOARD_MATCHED_FIELDS.has(result.matchedField)) { + matched.add(result.worktreeId) + } + } + return matched +} + +export function buildWorkspaceKanbanLaneViews(args: { + worktreesByStatus: ReadonlyMap + matchingWorktreeIds: ReadonlySet | null +}): Map { + const matchingWorktreeIds = args.matchingWorktreeIds + const views = new Map() + for (const [status, items] of args.worktreesByStatus) { + views.set(status, { + // Why: the no-query path must not reallocate a lane array per keystroke. + items: matchingWorktreeIds + ? items.filter((worktree) => matchingWorktreeIds.has(worktree.id)) + : items, + totalCount: items.length + }) + } + return views +} diff --git a/src/renderer/src/components/sidebar/workspace-kanban-sidebar-drop.test.ts b/src/renderer/src/components/sidebar/workspace-kanban-sidebar-drop.test.ts index e9ae00c76..3feefdd62 100644 --- a/src/renderer/src/components/sidebar/workspace-kanban-sidebar-drop.test.ts +++ b/src/renderer/src/components/sidebar/workspace-kanban-sidebar-drop.test.ts @@ -1,11 +1,13 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import type { WorkspaceStatusDefinition, Worktree } from '../../../../shared/types' +import { serializeWorkspaceLaneFullIds } from './workspace-kanban-filtered-drop-index' import { buildWorkspaceKanbanSidebarDropUpdates, clearWorkspaceKanbanSidebarDropTargetVisual, getWorkspaceKanbanSidebarDropGroups, getWorkspaceKanbanSidebarDropTarget, isWorkspaceKanbanSidebarDropPointInBoard, + resolveWorkspaceKanbanSidebarFullLaneDropIndex, updateWorkspaceKanbanSidebarDropTargetVisual } from './workspace-kanban-sidebar-drop' @@ -247,6 +249,48 @@ describe('workspace kanban sidebar drop DOM bridge', () => { ]) }) + it('prefers the published full lane membership over the rendered card scan', () => { + const { lane } = appendBoard() + lane.dataset.workspaceLaneFullIds = + serializeWorkspaceLaneFullIds(['doing-x', 'doing-a', 'doing-y', 'doing-b']) ?? '' + setElementFromPoint(lane) + + expect(getWorkspaceKanbanSidebarDropGroups()).toEqual([ + { key: 'doing', worktreeIds: ['doing-x', 'doing-a', 'doing-y', 'doing-b'] } + ]) + }) + + it('keeps the tracked drop target in the rendered index space of the indicator', () => { + const { lane } = appendBoard() + lane.dataset.workspaceLaneFullIds = + serializeWorkspaceLaneFullIds(['doing-x', 'doing-a', 'doing-y', 'doing-b']) ?? '' + setElementFromPoint(lane) + + expect(getWorkspaceKanbanSidebarDropTarget(24, 60)).toMatchObject({ + status: 'doing', + dropIndex: 1 + }) + }) + + it('translates a rendered drop index onto the full lane at the commit boundary', () => { + const { lane } = appendBoard() + lane.dataset.workspaceLaneFullIds = + serializeWorkspaceLaneFullIds(['doing-x', 'doing-a', 'doing-y', 'doing-b']) ?? '' + setElementFromPoint(lane) + + // Rendered index 1 means "before doing-b", which is index 3 in the full lane. + expect(resolveWorkspaceKanbanSidebarFullLaneDropIndex('doing', 1)).toBe(3) + // Why: a tracked target can be committed after the pointer left the lane, + // so the translation must not depend on the current pointer position. + expect(resolveWorkspaceKanbanSidebarFullLaneDropIndex('doing', 2)).toBe(4) + }) + + it('passes the drop index through for a lane it cannot find', () => { + appendBoard() + + expect(resolveWorkspaceKanbanSidebarFullLaneDropIndex('todo', 2)).toBe(2) + }) + it('marks and clears the external board hover target', () => { const { lane } = appendBoard() setElementFromPoint(lane) diff --git a/src/renderer/src/components/sidebar/workspace-kanban-sidebar-drop.ts b/src/renderer/src/components/sidebar/workspace-kanban-sidebar-drop.ts index befa87d9e..c48d5312a 100644 --- a/src/renderer/src/components/sidebar/workspace-kanban-sidebar-drop.ts +++ b/src/renderer/src/components/sidebar/workspace-kanban-sidebar-drop.ts @@ -4,6 +4,10 @@ import type { Worktree, WorktreeMeta } from '../../../../shared/types' +import { + parseWorkspaceLaneFullIds, + resolveFullLaneDropIndex +} from './workspace-kanban-filtered-drop-index' import { getWorkspaceStatus } from './workspace-status' import { buildManualOrderUpdatesForGroupDrop, @@ -44,6 +48,30 @@ export function isWorkspaceKanbanSidebarDropPointInBoard(x: number, y: number): return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom } +function getLaneCardIds(lane: HTMLElement): HTMLElement[] { + return Array.from(lane.querySelectorAll(CARD_SELECTOR)) +} + +// Mirrors getCardDropTarget's card scan so both sides share one index space. +// The offsetParent read forces layout, so callers pass the card list they +// already collected rather than re-querying. +function toRenderedCardIds(cards: readonly HTMLElement[]): string[] { + return cards + .filter((card) => card.offsetParent !== null) + .flatMap((card) => card.dataset.workspaceBoardCardId ?? []) +} + +// Why: board search hides non-matching cards, so the rendered card scan is a +// filtered lane. Lanes publish their full membership for exactly this reader. +// The fallback is the unfiltered card list — a lane member the browser is not +// laying out is still a member for manual-order purposes. +function toLaneFullWorktreeIds(lane: HTMLElement, cards: readonly HTMLElement[]): string[] { + return ( + parseWorkspaceLaneFullIds(lane.dataset.workspaceLaneFullIds) ?? + cards.flatMap((card) => card.dataset.workspaceBoardCardId ?? []) + ) +} + function getStatusDropTargetElement( board: HTMLElement, status: WorkspaceStatus @@ -80,14 +108,7 @@ export function getWorkspaceKanbanSidebarDropGroups(): WorktreeDragGroup[] { if (!status) { return [] } - return [ - { - key: status, - worktreeIds: Array.from(lane.querySelectorAll(CARD_SELECTOR)).flatMap( - (card) => card.dataset.workspaceBoardCardId ?? [] - ) - } - ] + return [{ key: status, worktreeIds: toLaneFullWorktreeIds(lane, getLaneCardIds(lane)) }] }) } @@ -102,6 +123,30 @@ export function getWorkspaceKanbanSidebarDropTarget( return getCardDropTarget(board, x, y) } +/** + * Translates a tracked drop index — which counts *rendered* cards, matching the + * drop indicator — onto the full lane that `getWorkspaceKanbanSidebarDropGroups` + * reports. Call this once, at the commit boundary: a tracked target can be + * committed after the pointer has left the lane, so translating earlier would + * miss that path. + */ +export function resolveWorkspaceKanbanSidebarFullLaneDropIndex( + status: WorkspaceStatus, + renderedDropIndex: number +): number { + const board = getWorkspaceKanbanBoardElement() + const lane = board ? getStatusDropTargetElement(board, status) : null + if (!lane) { + return renderedDropIndex + } + const cards = getLaneCardIds(lane) + return resolveFullLaneDropIndex({ + fullLaneIds: toLaneFullWorktreeIds(lane, cards), + renderedIds: toRenderedCardIds(cards), + filteredDropIndex: renderedDropIndex + }) +} + export function updateWorkspaceKanbanSidebarDropTargetVisual(args: { x: number y: number diff --git a/src/renderer/src/i18n/locales/en.json b/src/renderer/src/i18n/locales/en.json index d1647b358..0578736c6 100644 --- a/src/renderer/src/i18n/locales/en.json +++ b/src/renderer/src/i18n/locales/en.json @@ -4415,7 +4415,8 @@ }, "WorkspaceKanbanStatusLane": { "8ad104642b": "Empty", - "3611d1ae7f": "Resize workspace board columns" + "3611d1ae7f": "Resize workspace board columns", + "2df01a03ff": "No matches" }, "WorkspaceStatusAppearancePopover": { "514be2f569": "Set {{value0}} color to {{value1}}", @@ -5028,6 +5029,14 @@ "WorktreeDeveloperMenu": { "developer": "Developer", "parkTerminal": "Park terminal" + }, + "WorkspaceKanbanSearchField": { + "bdb753c78d": "No workspaces match", + "4d96c209d6": "{{value0}} of {{value1}} workspaces match", + "c0cd6bdf6c": "Search workspaces", + "3b7ea51793": "Clear search", + "7f1c2e94a5": "Search text is too long — the board is unfiltered", + "9a4d0f6b21": "Too long" } }, "shared": { diff --git a/src/renderer/src/i18n/locales/es.json b/src/renderer/src/i18n/locales/es.json index 2edcded71..8964cfdbd 100644 --- a/src/renderer/src/i18n/locales/es.json +++ b/src/renderer/src/i18n/locales/es.json @@ -4365,7 +4365,8 @@ }, "WorkspaceKanbanStatusLane": { "8ad104642b": "Vacío", - "3611d1ae7f": "Cambiar tamaño de columnas del tablero de espacios de trabajo" + "3611d1ae7f": "Cambiar tamaño de columnas del tablero de espacios de trabajo", + "2df01a03ff": "No hay coincidencias" }, "WorkspaceStatusAppearancePopover": { "514be2f569": "Establecer color de {{value0}} en {{value1}}", @@ -5001,6 +5002,14 @@ "WorktreeDeveloperMenu": { "developer": "Developer", "parkTerminal": "Park terminal" + }, + "WorkspaceKanbanSearchField": { + "bdb753c78d": "Ningún espacio de trabajo coincide", + "4d96c209d6": "{{value0}} de {{value1}} espacios de trabajo coinciden", + "c0cd6bdf6c": "Buscar espacios de trabajo", + "3b7ea51793": "Borrar búsqueda", + "7f1c2e94a5": "El texto de búsqueda es demasiado largo: el tablero no está filtrado", + "9a4d0f6b21": "Demasiado largo" } }, "shared": { diff --git a/src/renderer/src/i18n/locales/ja.json b/src/renderer/src/i18n/locales/ja.json index fffa62c2f..5166d87cf 100644 --- a/src/renderer/src/i18n/locales/ja.json +++ b/src/renderer/src/i18n/locales/ja.json @@ -4346,7 +4346,8 @@ }, "WorkspaceKanbanStatusLane": { "8ad104642b": "空の", - "3611d1ae7f": "ワークスペースボードの列のサイズを変更する" + "3611d1ae7f": "ワークスペースボードの列のサイズを変更する", + "2df01a03ff": "一致なし" }, "WorkspaceStatusAppearancePopover": { "514be2f569": "{{value0}} の色を {{value1}} に設定します", @@ -5001,6 +5002,14 @@ "WorktreeDeveloperMenu": { "developer": "Developer", "parkTerminal": "Park terminal" + }, + "WorkspaceKanbanSearchField": { + "bdb753c78d": "一致するワークスペースはありません", + "4d96c209d6": "{{value1}} 件中 {{value0}} 件のワークスペースが一致します", + "c0cd6bdf6c": "ワークスペースの検索", + "3b7ea51793": "検索をクリア", + "7f1c2e94a5": "検索テキストが長すぎます — ボードは絞り込まれていません", + "9a4d0f6b21": "長すぎます" } }, "shared": { diff --git a/src/renderer/src/i18n/locales/ko.json b/src/renderer/src/i18n/locales/ko.json index d96497fcd..48b7912a1 100644 --- a/src/renderer/src/i18n/locales/ko.json +++ b/src/renderer/src/i18n/locales/ko.json @@ -4346,7 +4346,8 @@ }, "WorkspaceKanbanStatusLane": { "8ad104642b": "비어 있음", - "3611d1ae7f": "워크스페이스 보드 열 크기 조정" + "3611d1ae7f": "워크스페이스 보드 열 크기 조정", + "2df01a03ff": "일치하는 항목 없음" }, "WorkspaceStatusAppearancePopover": { "514be2f569": "{{value0}} 색상을 {{value1}}로 설정", @@ -5001,6 +5002,14 @@ "WorktreeDeveloperMenu": { "developer": "Developer", "parkTerminal": "Park terminal" + }, + "WorkspaceKanbanSearchField": { + "bdb753c78d": "일치하는 워크스페이스가 없습니다", + "4d96c209d6": "워크스페이스 {{value1}}개 중 {{value0}}개 일치", + "c0cd6bdf6c": "워크스페이스 검색", + "3b7ea51793": "검색 지우기", + "7f1c2e94a5": "검색어가 너무 깁니다 — 보드가 필터링되지 않았습니다", + "9a4d0f6b21": "너무 김" } }, "shared": { diff --git a/src/renderer/src/i18n/locales/zh.json b/src/renderer/src/i18n/locales/zh.json index d24db028e..dfed0f7b6 100644 --- a/src/renderer/src/i18n/locales/zh.json +++ b/src/renderer/src/i18n/locales/zh.json @@ -4346,7 +4346,8 @@ }, "WorkspaceKanbanStatusLane": { "8ad104642b": "空的", - "3611d1ae7f": "调整工作区板列的大小" + "3611d1ae7f": "调整工作区板列的大小", + "2df01a03ff": "没有匹配项" }, "WorkspaceStatusAppearancePopover": { "514be2f569": "将 {{value0}} 颜色设置为 {{value1}}", @@ -5001,6 +5002,14 @@ "WorktreeDeveloperMenu": { "developer": "Developer", "parkTerminal": "Park terminal" + }, + "WorkspaceKanbanSearchField": { + "bdb753c78d": "没有匹配的工作区", + "4d96c209d6": "{{value1}} 个工作区中有 {{value0}} 个匹配", + "c0cd6bdf6c": "搜索工作区", + "3b7ea51793": "清除搜索", + "7f1c2e94a5": "搜索文本过长 — 看板未被筛选", + "9a4d0f6b21": "过长" } }, "shared": {