polish: reformat AutomationActivityLog JSX; InlineNotice alert role for actionable warns (P1-20, P3-63)

This commit is contained in:
ZacharyZhang-NY committed 2026-04-16 23:12:57 -04:00
1 parent a7ad4e5a8b
commit 6809fa13af
2 files changed
+34 -6

No files matched your search

@@ -12,12 +12,39 @@ import { WorkflowCard } from "./WorkflowList"
import { WorkflowFormModal } from "./WorkflowEditor"
function AutomationActivityLog({ entries }: { entries: AutomationLogEntry[] }) {
if (entries.length === 0) return <div className="py-6 text-center text-[13px] text-muted-foreground">No activity yet</div>
if (entries.length === 0) {
return <div className="py-6 text-center text-[13px] text-muted-foreground">No activity yet</div>
}
return (
<div className="space-y-1">{entries.map((entry, idx) => {
const ti = triggerConfig[entry.trigger as AutomationTrigger]; const ai = actionConfig[entry.action as AutomationAction]; const TIcon = ti?.icon ?? Lightning
return <motion.div key={`${entry.ruleId}-${entry.executedAt}-${idx}`} initial={{ opacity: 0, x: -6 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: idx * 0.03 }} className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-2.5 text-[12px]"><TIcon size={14} className="text-primary" /><div className="min-w-0 flex-1"><div className="flex items-center gap-2"><span className="truncate font-medium text-foreground">{entry.ruleName}</span></div><div className="mt-0.5 flex items-center gap-1.5 text-[10px] text-muted-foreground"><span>{ti?.label ?? entry.trigger}</span><ArrowRight size={8} /><span>{ai?.label ?? entry.action}</span></div></div><span className="shrink-0 text-[10px] text-muted-foreground">{timeAgo(entry.executedAt)}</span></motion.div>
})}</div>
<div className="space-y-1">
{entries.map((entry, idx) => {
const ti = triggerConfig[entry.trigger as AutomationTrigger]
const ai = actionConfig[entry.action as AutomationAction]
const TIcon = ti?.icon ?? Lightning
return (
<motion.div
key={`${entry.ruleId}-${entry.executedAt}-${idx}`}
initial={{ opacity: 0, x: -6 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: idx * 0.03 }}
className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-2.5 text-[12px]"
>
<TIcon size={14} className="text-primary" />
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="truncate font-medium text-foreground">{entry.ruleName}</span>
</div>
<div className="mt-0.5 flex items-center gap-1.5 text-[10px] text-muted-foreground">
<span>{ti?.label ?? entry.trigger}</span>
<ArrowRight size={8} />
<span>{ai?.label ?? entry.action}</span>
</div>
</div>
<span className="shrink-0 text-[10px] text-muted-foreground">{timeAgo(entry.executedAt)}</span>
</motion.div>
)
})}
</div>
)
}
+2 -1
View File
@@ -61,8 +61,9 @@ export function InlineNotice({
: tone === "warn"
? "border-warning bg-warning-muted text-warning"
: "border-destructive bg-destructive-muted text-destructive";
const role = tone === "danger" || (tone === "warn" && action) ? "alert" : "status";
return (
<div className={`rounded-lg border px-4 py-3 text-[13px] ${toneClass}`} role={tone === "danger" ? "alert" : "status"}>
<div className={`rounded-lg border px-4 py-3 text-[13px] ${toneClass}`} role={role}>
{action ? (
<div className="flex items-start justify-between gap-3">
<span>{message}</span>