diff --git a/packages/dashboard/app/components/Board.tsx b/packages/dashboard/app/components/Board.tsx index 20df923307..9a2211a94c 100644 --- a/packages/dashboard/app/components/Board.tsx +++ b/packages/dashboard/app/components/Board.tsx @@ -4,7 +4,7 @@ import { sortTasksForDisplayColumn } from "./taskSorting"; import { Column } from "./Column"; import "./Lane.css"; import type { ToastType } from "../hooks/useToast"; -import { useState, useMemo, useEffect, useCallback, useRef } from "react"; +import { useState, useMemo, useEffect, useCallback, useRef, type KeyboardEvent, type MouseEvent } from "react"; import { Pencil, Plus } from "lucide-react"; import { fetchWorkflowSteps, fetchBoardWorkflows, promoteTask, type ModelInfo, type BoardWorkflowDefinition, type BoardWorkflowsPayload } from "../api"; import { useBlockerFanout } from "../hooks/useBlockerFanout"; @@ -117,6 +117,23 @@ export function Board({ tasks, projectId, maxConcurrent, onMoveTask, onPauseTask } }, [workflowToolbarCollapsed, projectId]); + const toggleWorkflowToolbarCollapsed = useCallback(() => { + setWorkflowToolbarCollapsed((collapsed) => !collapsed); + }, []); + + const handleWorkflowToolbarKeyDown = useCallback((event: KeyboardEvent) => { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + toggleWorkflowToolbarCollapsed(); + } + }, [toggleWorkflowToolbarCollapsed]); + + const handleExpandedWorkflowToolbarClick = useCallback((event: MouseEvent) => { + if (event.target === event.currentTarget) { + toggleWorkflowToolbarCollapsed(); + } + }, [toggleWorkflowToolbarCollapsed]); + useEffect(() => { recordResumeEvent({ view: "Board", @@ -473,17 +490,29 @@ export function Board({ tasks, projectId, maxConcurrent, onMoveTask, onPauseTask return (
{(workflowOptions.length > 1 || onCreateWorkflow || onOpenWorkflowEditor) && ( -
-