From e2ec1f981d938de95783f6395751260e49e2e4d3 Mon Sep 17 00:00:00 2001 From: ciregenz Date: Thu, 6 Aug 2026 11:31:50 -0700 Subject: [PATCH] [eric] canvas: the translucent arrow-nav chevrons are gone, arrow keys still navigate --- .../Dashboard/canvas/DashboardCanvas.tsx | 2 - .../Dashboard/canvas/DashboardOverlays.tsx | 18 +-- .../Dashboard/controls/DirectionHints.tsx | 106 ------------------ 3 files changed, 1 insertion(+), 125 deletions(-) delete mode 100644 frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx index 2f5c396e..e98a1642 100644 --- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx +++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx @@ -506,8 +506,6 @@ const DashboardCanvas: React.FC = ({ workflowCards={workflowCards} workflowsHub={workflowsHub} focusedCardId={focusedCardId} - shakeDirection={shakeDirection} - neighborDirections={neighborDirections} toolbarOpen={toolbarOpen} searchPaletteOpen={searchPaletteOpen} newAgentBounce={newAgentBounce} diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx index e566dff3..b8ae2ae0 100644 --- a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx +++ b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx @@ -4,7 +4,6 @@ import DashboardToolbar from '../DashboardToolbar'; import CanvasControls from '../controls/CanvasControls'; import HelpPill from '../desktop/HelpPill'; import CardSearchPalette from '../controls/CardSearchPalette'; -import DirectionHints from '../controls/DirectionHints'; import WorkflowRunningToast from '@/app/pages/Workflows/WorkflowRunningToast'; import WorkflowNoticeToast from '@/app/pages/Workflows/WorkflowNoticeToast'; import MissedRunsToast from '@/app/pages/Workflows/MissedRunsToast'; @@ -22,8 +21,6 @@ import type { import type { useCanvasControls } from '../hooks/interaction/useCanvasControls'; type Canvas = ReturnType; -type Direction = 'left' | 'right' | 'up' | 'down'; -type NeighborDirections = { left: boolean; right: boolean; up: boolean; down: boolean }; interface DashboardOverlaysProps { anyFullscreen: boolean; @@ -36,8 +33,6 @@ interface DashboardOverlaysProps { workflowCards: Record; workflowsHub: WorkflowsHubPosition | null; focusedCardId: string | null; - shakeDirection: Direction | null; - neighborDirections: NeighborDirections; toolbarOpen: boolean; searchPaletteOpen: boolean; newAgentBounce: boolean; @@ -70,8 +65,6 @@ const DashboardOverlays: React.FC = ({ workflowCards, workflowsHub, focusedCardId, - shakeDirection, - neighborDirections, toolbarOpen, searchPaletteOpen, newAgentBounce, @@ -123,16 +116,7 @@ const DashboardOverlays: React.FC = ({ )} - {/* Arrow navigation hints when zoomed in on a card */} - {focusedCardId && canvas.zoom >= 0.4 && ( - - )} + {/* Arrow-key nav still works; its translucent chevron hints are gone by Eric's call (2026-08-06). */} {/* Floating zoom controls + minimap */} {!anyFullscreen && ( diff --git a/frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx b/frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx deleted file mode 100644 index c514038f..00000000 --- a/frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React from 'react'; -import Box from '@mui/material/Box'; -import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; -import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; -import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; -import { useClaudeTokens } from '@/shared/styles/ThemeContext'; - -interface Props { - hasLeft: boolean; - hasRight: boolean; - hasUp: boolean; - hasDown: boolean; - shakeDirection: 'left' | 'right' | 'up' | 'down' | null; -} - -const shakeKeyframes: Record = { - left: ` - @keyframes shake-left { 0%,100% { transform: translateY(-50%) translateX(0); } 25% { transform: translateY(-50%) translateX(-6px); } 75% { transform: translateY(-50%) translateX(4px); } } - `, - right: ` - @keyframes shake-right { 0%,100% { transform: translateY(-50%) translateX(0); } 25% { transform: translateY(-50%) translateX(6px); } 75% { transform: translateY(-50%) translateX(-4px); } } - `, - up: ` - @keyframes shake-up { 0%,100% { transform: translateX(-50%) translateY(0); } 25% { transform: translateX(-50%) translateY(-6px); } 75% { transform: translateX(-50%) translateY(4px); } } - `, - down: ` - @keyframes shake-down { 0%,100% { transform: translateX(-50%) translateY(0); } 25% { transform: translateX(-50%) translateY(6px); } 75% { transform: translateX(-50%) translateY(-4px); } } - `, -}; - -const DirectionHints: React.FC = ({ hasLeft, hasRight, hasUp, hasDown, shakeDirection }) => { - const c = useClaudeTokens(); - - const hintSx = { - position: 'absolute' as const, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: 28, - height: 28, - borderRadius: '50%', - bgcolor: c.bg.surface, - border: `1px solid ${c.border.medium}`, - boxShadow: c.shadow.sm, - color: c.text.muted, - opacity: 0.5, - transition: 'opacity 0.2s', - pointerEvents: 'none' as const, - }; - - const shakingSx = (dir: string) => ({ - ...hintSx, - opacity: 1, - color: c.accent.primary, - animation: `shake-${dir} 0.3s ease 2`, - }); - - const showLeft = hasLeft || shakeDirection === 'left'; - const showRight = hasRight || shakeDirection === 'right'; - const showUp = hasUp || shakeDirection === 'up'; - const showDown = hasDown || shakeDirection === 'down'; - - return ( - <> - {shakeDirection && ( - - )} - - {showLeft && ( - - - - )} - {showRight && ( - - - - )} - {showUp && ( - - - - )} - {showDown && ( - - - - )} - - ); -}; - -export default DirectionHints;