design: overhaul Edit Procedure page layout and color system
- Move procedure name into inline-editable toolbar input; replace static h1 - Toolbar now uses bg-sidebar for proper depth hierarchy vs bg-card config zone - Config zone (Details/Intake/Schedule accordions) gets explicit bg-card + border-b creating clear visual separation from the step canvas below - Step canvas switches to bg-page background for distinct work surface - Replace all hover:bg-accent (orange) with hover:bg-elevated or hover:bg-white/[0.08] throughout toolbar, accordion headers, step cards, and editor buttons - Fix step number badges: bg-accent (orange) → bg-white/[0.10] in StepList + StepEditor - Fix procedure_end step background: bg-accent/50 → bg-elevated/40 - CollapsibleEditorSection: hover:bg-accent/50 → hover:bg-white/[0.05] - Input fields in StepEditor: bg-card → bg-elevated for depth inside card surfaces - Move Content Type selector out of "More Options" into main step editor body - Rename "More Options" → "Advanced Options" for clarity - Replace Shield icon with ListOrdered for Steps section heading (semantic fix) - Bottom Add Step button: better contrast with border-white/20 + hover:bg-elevated/30 - Remove Name field from Details accordion (now lives in toolbar) - Update Details accordion summary: shows tags, visibility, description preview - Dirty indicator: "Unsaved changes" text → compact amber dot with tooltip Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
@@ -241,9 +241,9 @@ export function ProceduralEditorPage() {
|
||||
|
||||
// Summary strings for collapsed sections
|
||||
const detailsSummary = [
|
||||
name ? `"${name}"` : '"Untitled"',
|
||||
tags.length > 0 ? `${tags.length} tag${tags.length !== 1 ? 's' : ''}` : 'No tags',
|
||||
isPublic ? 'Public' : 'Private',
|
||||
description ? `${description.slice(0, 40)}${description.length > 40 ? '\u2026' : ''}` : 'No description',
|
||||
].join(' \u00b7 ')
|
||||
|
||||
const scheduleSummary = getScheduleSummary(schedule, scheduleTargetList)
|
||||
@@ -265,37 +265,42 @@ export function ProceduralEditorPage() {
|
||||
{/* Main content column */}
|
||||
<div className="flex min-w-0 flex-1 flex-col overflow-hidden">
|
||||
{/* Toolbar — sticky */}
|
||||
<div className="flex shrink-0 items-center justify-between border-b border-border bg-card px-4 py-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => navigate('/trees')}
|
||||
className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
{isMaintenance
|
||||
? <Wrench className="h-5 w-5 text-amber-400" />
|
||||
: <ListOrdered className="h-5 w-5 text-muted-foreground" />}
|
||||
<h1 className="text-lg font-bold text-foreground">
|
||||
{isEditMode ? `Edit ${flowLabel}` : `New ${flowLabel}`}
|
||||
{name && <span className="ml-2 font-normal text-muted-foreground">— {name}</span>}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-3 border-b border-border bg-sidebar px-4 py-2.5">
|
||||
<button
|
||||
onClick={() => navigate('/trees')}
|
||||
className="shrink-0 rounded p-1.5 text-muted-foreground transition-colors hover:bg-white/[0.08] hover:text-foreground"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||
{isMaintenance
|
||||
? <Wrench className="h-4 w-4 shrink-0 text-amber-400" />
|
||||
: <ListOrdered className="h-4 w-4 shrink-0 text-muted-foreground" />}
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder={`Untitled ${flowLabel}`}
|
||||
className="min-w-0 flex-1 bg-transparent text-sm font-semibold text-heading placeholder:text-muted-foreground focus:outline-none"
|
||||
/>
|
||||
{isDirty && (
|
||||
<span
|
||||
title="Unsaved changes"
|
||||
className="h-1.5 w-1.5 shrink-0 rounded-full bg-amber-400"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{isDirty && (
|
||||
<span className="text-xs text-muted-foreground">Unsaved changes</span>
|
||||
)}
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<button
|
||||
onClick={() => editorAI.isOpen ? editorAI.closePanel() : editorAI.openPanel()}
|
||||
title="Toggle AI Assist panel"
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
|
||||
'flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm font-medium transition-colors',
|
||||
editorAI.isOpen
|
||||
? 'bg-accent-dim text-primary border-primary/30'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-foreground'
|
||||
? 'border-primary/30 bg-accent-dim text-primary'
|
||||
: 'text-muted-foreground hover:bg-white/[0.08] hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<Sparkles className="h-4 w-4" />
|
||||
@@ -318,8 +323,8 @@ export function ProceduralEditorPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Collapsible sections */}
|
||||
<div className="shrink-0">
|
||||
{/* Config zone */}
|
||||
<div className="shrink-0 border-b border-border bg-card">
|
||||
<CollapsibleEditorSection
|
||||
title="Details"
|
||||
icon={<Settings className="h-4 w-4" />}
|
||||
@@ -328,17 +333,6 @@ export function ProceduralEditorPage() {
|
||||
onToggle={() => toggleSection('details')}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-muted-foreground">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g. Domain Controller Build"
|
||||
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-muted-foreground">Description</label>
|
||||
<textarea
|
||||
@@ -397,25 +391,27 @@ export function ProceduralEditorPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Step List */}
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
|
||||
{validationErrors.length > 0 && (
|
||||
<div className="px-4 py-3">
|
||||
<ValidationSummary
|
||||
errors={validationErrors.map((e): ValidationError => ({
|
||||
nodeId: e.stepId,
|
||||
field: e.field,
|
||||
message: e.message,
|
||||
severity: e.severity,
|
||||
}))}
|
||||
onSelectNode={handleSelectStep}
|
||||
onFixWithAI={handleFixWithAI}
|
||||
isFixing={isFixing}
|
||||
itemLabel="step"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<StepList onStepContextMenu={editorAI.openContextMenu} />
|
||||
{/* Step canvas */}
|
||||
<div className="min-h-0 flex-1 overflow-y-auto bg-page">
|
||||
<div className="px-5 py-5">
|
||||
{validationErrors.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<ValidationSummary
|
||||
errors={validationErrors.map((e): ValidationError => ({
|
||||
nodeId: e.stepId,
|
||||
field: e.field,
|
||||
message: e.message,
|
||||
severity: e.severity,
|
||||
}))}
|
||||
onSelectNode={handleSelectStep}
|
||||
onFixWithAI={handleFixWithAI}
|
||||
isFixing={isFixing}
|
||||
itemLabel="step"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<StepList onStepContextMenu={editorAI.openContextMenu} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editorAI.contextMenu && (
|
||||
|
||||
Reference in New Issue
Block a user