fix: node button styles

This commit is contained in:
2026-03-12 12:28:56 +01:00
parent 57207fa082
commit 5f6f16ab90

View File

@@ -28,7 +28,7 @@ import { NodeHeaderTitle } from '@/components/graph/NodeHeaderTitle'
import { NodeMenubar } from '@/components/graph/NodeMenubar' import { NodeMenubar } from '@/components/graph/NodeMenubar'
import { NodeStatusIndicator } from '@/components/graph/NodeStatusIndicator' import { NodeStatusIndicator } from '@/components/graph/NodeStatusIndicator'
import { MenubarCheckboxItem, MenubarItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger } from '@/components/ui/menubar' import { MenubarCheckboxItem, MenubarItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger } from '@/components/ui/menubar'
import { Sparkles, ZoomIn, ZoomOut, RotateCcw, RotateCw, Copy, Play, ChevronDown } from 'lucide-react' import { Sparkles, ZoomIn, ZoomOut, RotateCcw, RotateCw, Copy, Play, ChevronDown, Loader2 } from 'lucide-react'
import { InputHandle } from '@/components/graph/NodeHandles' import { InputHandle } from '@/components/graph/NodeHandles'
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch' import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
@@ -41,6 +41,7 @@ import {
DropdownMenuLabel, DropdownMenuLabel,
DropdownMenuTrigger, DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu' } from '@/components/ui/dropdown-menu'
import { cn } from '@/lib/utils'
import { useTheme } from '@/lib/themeContext' import { useTheme } from '@/lib/themeContext'
import { toast } from 'sonner' import { toast } from 'sonner'
@@ -488,13 +489,22 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
type="button" type="button"
size="sm" size="sm"
variant="outline" variant="outline"
className="h-7 gap-1.5 rounded-r-none border-r-0 px-2.5 text-xs" disabled={loading}
className={cn(
'h-7 gap-1.5 rounded-r-none border-r-0 px-2.5 text-xs',
effectiveUpdateMode === 'manual' && hasPendingInputs && 'border-l-2 border-l-amber-500 bg-amber-500/10 hover:bg-amber-500/15 dark:bg-amber-500/15 dark:hover:bg-amber-500/20'
)}
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
updateData({ runTrigger: (data?.runTrigger ?? 0) + 1 }) updateData({ runTrigger: (data?.runTrigger ?? 0) + 1 })
}} }}
title={effectiveUpdateMode === 'manual' && hasPendingInputs ? 'Inputs changed — click to render' : undefined}
> >
<Play className="size-3.5" /> {loading ? (
<Loader2 className="size-3.5 animate-spin shrink-0" aria-hidden />
) : (
<Play className="size-3.5 shrink-0" />
)}
Run Run
</Button> </Button>
<DropdownMenu> <DropdownMenu>
@@ -503,7 +513,10 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
type="button" type="button"
size="sm" size="sm"
variant="outline" variant="outline"
className="h-7 min-w-[4.5rem] gap-1 rounded-l-none pl-2 pr-1.5 text-xs font-normal" className={cn(
'h-7 min-w-[4.5rem] gap-1 rounded-l-none pl-2 pr-1.5 text-xs font-normal',
effectiveUpdateMode === 'manual' && hasPendingInputs && 'bg-amber-500/10 hover:bg-amber-500/15 dark:bg-amber-500/15 dark:hover:bg-amber-500/20'
)}
aria-label="Update mode" aria-label="Update mode"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >