diff options
Diffstat (limited to 'makima/frontend/src/components/directives/DirectiveDetail.tsx')
| -rw-r--r-- | makima/frontend/src/components/directives/DirectiveDetail.tsx | 51 |
1 files changed, 30 insertions, 21 deletions
diff --git a/makima/frontend/src/components/directives/DirectiveDetail.tsx b/makima/frontend/src/components/directives/DirectiveDetail.tsx index 645b8d2..06d8ba2 100644 --- a/makima/frontend/src/components/directives/DirectiveDetail.tsx +++ b/makima/frontend/src/components/directives/DirectiveDetail.tsx @@ -176,6 +176,7 @@ function JsonSection({ export function DirectiveDetail({ directive, + onBack, onDelete, onStart, onRefresh, @@ -245,27 +246,18 @@ export function DirectiveDetail({ <div className="panel h-full flex flex-col"> {/* Header */} <div className="p-4 border-b border-dashed border-[rgba(117,170,252,0.35)]"> - <div className="flex items-center gap-2 mb-2"> - <span - className={`font-mono text-[10px] uppercase ${ - statusColors[directive.status as DirectiveStatus] || "text-[#888]" - }`} + <div className="flex items-center justify-between mb-3"> + <button + onClick={onBack} + className="font-mono text-xs text-[#75aafc] hover:text-[#9bc3ff] transition-colors" > - {directive.status} - </span> - {isLive && ( - <span className="font-mono text-[9px] text-yellow-400/60 animate-pulse"> - polling - </span> - )} - <span className="font-mono text-[10px] text-[#7788aa]"> - v{directive.version} - </span> - <div className="ml-auto flex gap-2"> + ← Back to list + </button> + <div className="flex items-center gap-2"> {onStart && directive.status === "draft" && ( <button onClick={() => onStart(directive.id)} - className="font-mono text-[10px] text-green-400 hover:text-green-300 transition-colors uppercase" + className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase" > Start </button> @@ -273,16 +265,33 @@ export function DirectiveDetail({ {onDelete && ( <button onClick={() => onDelete(directive.id)} - className="font-mono text-[10px] text-red-400 hover:text-red-300 transition-colors uppercase" + className="px-3 py-1.5 font-mono text-xs text-red-400 border border-red-400/30 hover:border-red-400/50 transition-colors uppercase" > Delete </button> )} </div> </div> - <h2 className="font-mono text-sm text-[#dbe7ff]"> - {directive.title} - </h2> + <div className="flex items-center gap-3 mb-2"> + <h2 className="font-mono text-lg text-[#dbe7ff]"> + {directive.title} + </h2> + <span + className={`font-mono text-xs uppercase ${ + statusColors[directive.status as DirectiveStatus] || "text-[#888]" + }`} + > + {directive.status} + </span> + {isLive && ( + <span className="font-mono text-[9px] text-yellow-400/60 animate-pulse"> + polling + </span> + )} + <span className="font-mono text-[10px] text-[#7788aa]"> + v{directive.version} + </span> + </div> </div> {/* Tabs */} |