vynte-infra/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve layout and accessibility of workflow header and buttons

Browse Source
This commit is contained in:
Dries Augustyns
2026-04-24 12:09:54 +02:00
parent c910d20bb7
commit ab3edd7dc9
1 changed files with 58 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/workflows/[id].tsx
+58 -42
View File
@@ -441,60 +441,61 @@ export default function WorkflowEditorPage() {
<DashboardLayout> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="space-y-4"> <div className="flex items-center gap-3 sm:gap-4">
<div className="flex items-center gap-3 sm:gap-4"> <Link href="/workflows">
<Link href="/workflows"> <Button variant="ghost" size="sm">
<Button variant="ghost" size="sm"> <ArrowLeft className="h-4 w-4" />
<ArrowLeft className="h-4 w-4" /> </Button>
</Button> </Link>
</Link> <div className="flex-1 min-w-0">
<div className="flex-1 min-w-0"> <div className="flex items-center gap-2 sm:gap-3">
<div className="flex items-center gap-2 sm:gap-3"> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{workflow.name}</h1>
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{workflow.name}</h1> <span
<span className={`inline-flex items-center px-2 sm:px-2.5 py-0.5 rounded-full text-xs font-medium flex-shrink-0 ${
className={`inline-flex items-center px-2 sm:px-2.5 py-0.5 rounded-full text-xs font-medium flex-shrink-0 ${ workflow.enabled ? 'bg-green-100 text-green-800' : 'bg-neutral-100 text-neutral-800'
workflow.enabled ? 'bg-green-100 text-green-800' : 'bg-neutral-100 text-neutral-800' }`}
}`} >
> {workflow.enabled ? (
{workflow.enabled ? ( <>
<> <Power className="h-3 w-3 sm:mr-1" />
<Power className="h-3 w-3 sm:mr-1" /> <span className="hidden sm:inline">Active</span>
<span className="hidden sm:inline">Active</span> </>
</> ) : (
) : ( <>
<> <PowerOff className="h-3 w-3 sm:mr-1" />
<PowerOff className="h-3 w-3 sm:mr-1" /> <span className="hidden sm:inline">Disabled</span>
<span className="hidden sm:inline">Disabled</span> </>
</> )}
)} </span>
</span>
</div>
{workflow.description && (
<p className="text-neutral-500 mt-1 text-sm sm:text-base">{workflow.description}</p>
)}
</div> </div>
{workflow.description && (
<p className="text-neutral-500 mt-1 text-sm sm:text-base">{workflow.description}</p>
)}
</div> </div>
<div className="flex flex-wrap items-center gap-2"> <div className="flex items-center gap-1.5 flex-shrink-0">
<Button variant="outline" onClick={() => setShowSettingsDialog(true)} className="flex-1 sm:flex-none"> <Button variant="ghost" size="icon" onClick={() => setShowSettingsDialog(true)} aria-label="Settings">
<Settings className="h-4 w-4" /> <Settings className="h-4 w-4" />
<span className="hidden sm:inline">Settings</span>
</Button> </Button>
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)} className="flex-1 sm:flex-none"> <Button
variant="ghost"
size="icon"
onClick={() => setShowDeleteDialog(true)}
aria-label="Delete workflow"
className="text-neutral-400 hover:text-red-600 hover:bg-red-50"
>
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
<span className="hidden sm:inline">Delete</span>
</Button> </Button>
<Button onClick={handleToggleEnabled} className="flex-1 sm:flex-none"> <div className="h-5 w-px bg-neutral-200 mx-1" />
<Button variant={workflow.enabled ? 'outline' : 'default'} onClick={handleToggleEnabled}>
{workflow.enabled ? ( {workflow.enabled ? (
<> <>
<PowerOff className="h-4 w-4" /> <PowerOff className="h-4 w-4" />
<span className="hidden sm:inline">Disable</span> Disable
<span className="sm:hidden">Off</span>
</> </>
) : ( ) : (
<> <>
<Power className="h-4 w-4" /> <Power className="h-4 w-4" />
<span className="hidden sm:inline">Enable</span> Enable
<span className="sm:hidden">On</span>
</> </>
)} )}
</Button> </Button>
@@ -528,7 +529,7 @@ export default function WorkflowEditorPage() {
</Alert> </Alert>
)} )}
{/* Validation Warning Banner */} {/* Validation Warning Banner / Ready-to-enable Banner */}
{!workflow.enabled && {!workflow.enabled &&
(() => { (() => {
const validation = validateWorkflow(workflow); const validation = validateWorkflow(workflow);
@@ -548,6 +549,21 @@ export default function WorkflowEditorPage() {
</Alert> </Alert>
); );
} }
if (workflow.steps.length > 0) {
return (
<Alert>
<Power className="h-4 w-4" />
<AlertTitle>Workflow is disabled</AlertTitle>
<AlertDescription className="flex items-center justify-between gap-4">
<span>Contacts won&apos;t be processed until this workflow is enabled.</span>
<Button size="sm" onClick={handleToggleEnabled} className="shrink-0">
<Power className="h-3.5 w-3.5" />
Enable
</Button>
</AlertDescription>
</Alert>
);
}
return null; return null;
})()} })()}