Grayscale/nanobot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(webui): soften automation manager styling

Browse Source
This commit is contained in:
chengyongru
2026-06-16 11:07:48 +08:00
parent 04387bf9e3
commit 201d442a85
1 changed files with 51 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/settings/SettingsView.tsx
+51 -26
View File
@@ -3490,22 +3490,23 @@ function AutomationsSettings({
return ( return (
<div className="flex min-h-0 flex-col gap-3 xl:flex-1 xl:overflow-hidden"> <div className="flex min-h-0 flex-col gap-3 xl:flex-1 xl:overflow-hidden">
<section className="shrink-0 rounded-[24px] border border-border/45 bg-card/80 p-3 shadow-[0_22px_70px_rgba(15,23,42,0.055)] backdrop-blur-xl sm:p-4"> <section className="shrink-0 rounded-[22px] border border-orange-200/35 bg-gradient-to-b from-orange-50/45 to-background/82 p-3 shadow-[0_18px_54px_rgba(120,72,25,0.08)] backdrop-blur-xl dark:border-orange-300/10 dark:from-orange-300/8 dark:to-card/72 sm:p-4">
<div className="mx-auto flex w-full max-w-[56rem] flex-col gap-3"> <div className="mx-auto flex w-full max-w-[56rem] flex-col gap-3">
<div className="-mx-1 overflow-x-auto px-1 pb-0.5"> <div className="-mx-1 overflow-x-auto px-1 pb-0.5">
<div className="grid w-full min-w-[36rem] grid-cols-5 gap-1 rounded-[16px] bg-muted/50 p-1"> <div className="grid w-full min-w-[36rem] grid-cols-5 gap-1 rounded-[15px] bg-background/58 p-1 shadow-[inset_0_0_0_1px_rgba(120,72,25,0.045)] dark:bg-background/30">
{summaryOptions.map((option) => ( {summaryOptions.map((option) => (
<button <button
key={option.value} key={option.value}
type="button" type="button"
onClick={() => onFilterChange(option.value)} onClick={() => onFilterChange(option.value)}
className={cn( className={cn(
"inline-flex h-8 min-w-0 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[12px] px-3 text-[12px] font-medium text-muted-foreground transition-colors", "inline-flex h-8 min-w-0 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[11px] px-3 text-[12px] font-medium text-muted-foreground transition-colors",
filter === option.value && "bg-background text-foreground shadow-sm", filter === option.value &&
"bg-white text-orange-950 shadow-[0_8px_20px_rgba(120,72,25,0.1)] dark:bg-background/80 dark:text-orange-100",
)} )}
> >
<span>{option.label}</span> <span>{option.label}</span>
<span className="min-w-5 shrink-0 rounded-full bg-background/75 px-1.5 py-0.5 text-center text-[11px] tabular-nums text-muted-foreground"> <span className="min-w-5 shrink-0 rounded-full bg-orange-100/70 px-1.5 py-0.5 text-center text-[11px] tabular-nums text-orange-800/70 dark:bg-orange-300/12 dark:text-orange-200/75">
{option.count} {option.count}
</span> </span>
</button> </button>
@@ -3523,14 +3524,14 @@ function AutomationsSettings({
"settings.automations.search", "settings.automations.search",
"Search task, message, linked chat, or schedule", "Search task, message, linked chat, or schedule",
)} )}
className="h-9 w-full rounded-[13px] border-border/45 bg-background/85 pl-9 text-[13px] shadow-sm" className="h-9 w-full rounded-[13px] border-orange-200/35 bg-background/82 pl-9 text-[13px] shadow-[0_8px_22px_rgba(120,72,25,0.055)] focus-visible:ring-orange-300/55 dark:border-orange-300/10 dark:bg-background/40"
/> />
</div> </div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<button <button
type="button" type="button"
className="inline-flex h-9 min-w-[8.5rem] items-center justify-center gap-1.5 whitespace-nowrap rounded-[13px] border border-border/45 bg-background/85 px-3 text-[12px] font-medium text-muted-foreground shadow-sm transition-colors hover:bg-muted/70 hover:text-foreground sm:w-auto" className="inline-flex h-9 min-w-[8.5rem] items-center justify-center gap-1.5 whitespace-nowrap rounded-[13px] border border-orange-200/35 bg-background/82 px-3 text-[12px] font-medium text-muted-foreground shadow-[0_8px_22px_rgba(120,72,25,0.055)] transition-colors hover:bg-orange-50/80 hover:text-foreground dark:border-orange-300/10 dark:bg-background/40 dark:hover:bg-orange-300/10 sm:w-auto"
> >
<ArrowUpDown className="h-3.5 w-3.5" aria-hidden /> <ArrowUpDown className="h-3.5 w-3.5" aria-hidden />
<span>{sortLabel[sort]}</span> <span>{sortLabel[sort]}</span>
@@ -3563,18 +3564,18 @@ function AutomationsSettings({
{tx("settings.automations.loading", "Loading automations...")} {tx("settings.automations.loading", "Loading automations...")}
</div> </div>
) : filtered.length && selectedJob ? ( ) : filtered.length && selectedJob ? (
<section className="grid min-h-0 gap-3 xl:flex-1 xl:grid-cols-[minmax(16rem,18rem)_minmax(0,1fr)] xl:items-stretch xl:overflow-hidden"> <section className="grid min-h-0 overflow-hidden rounded-[26px] border border-orange-200/30 bg-gradient-to-br from-background/92 via-orange-50/24 to-background/88 shadow-[0_26px_80px_rgba(120,72,25,0.1)] backdrop-blur-xl dark:border-orange-300/10 dark:from-card/78 dark:via-orange-300/6 dark:to-card/68 xl:flex-1 xl:grid-cols-[minmax(16rem,18rem)_minmax(0,1fr)] xl:items-stretch">
<aside className="flex min-h-0 flex-col overflow-hidden rounded-[24px] border border-border/45 bg-card/80 shadow-[0_22px_70px_rgba(15,23,42,0.055)] backdrop-blur-xl"> <aside className="flex min-h-0 flex-col overflow-hidden border-b border-orange-200/24 bg-background/42 dark:border-orange-300/10 dark:bg-background/18 xl:border-b-0 xl:border-r">
<div className="flex shrink-0 items-center justify-between gap-3 border-b border-border/35 px-4 py-3"> <div className="flex shrink-0 items-center justify-between gap-3 px-4 py-3">
<h2 className="text-[13px] font-semibold tracking-[-0.01em] text-foreground/85"> <h2 className="text-[13px] font-semibold tracking-[-0.01em] text-foreground/85">
{tx("settings.automations.queue", "Queue")} {tx("settings.automations.queue", "Queue")}
</h2> </h2>
<span className="rounded-full bg-muted/70 px-2 py-0.5 text-[11px] text-muted-foreground tabular-nums"> <span className="rounded-full bg-orange-100/60 px-2 py-0.5 text-[11px] text-orange-800/70 tabular-nums dark:bg-orange-300/10 dark:text-orange-200/75">
{filtered.length} {filtered.length}
</span> </span>
</div> </div>
<div <div
className="max-h-[22rem] space-y-1 overflow-y-auto overscroll-contain p-2 xl:max-h-none xl:min-h-0 xl:flex-1" className="max-h-[22rem] space-y-1 overflow-y-auto overscroll-contain px-2 pb-2 xl:max-h-none xl:min-h-0 xl:flex-1"
role="list" role="list"
aria-label={tx("settings.automations.queue", "Queue")} aria-label={tx("settings.automations.queue", "Queue")}
> >
@@ -3646,8 +3647,8 @@ function AutomationListItem({
className={cn( className={cn(
"group grid w-full grid-cols-[minmax(0,1fr)_auto] gap-3 rounded-[18px] px-3 py-3.5 text-left transition-colors", "group grid w-full grid-cols-[minmax(0,1fr)_auto] gap-3 rounded-[18px] px-3 py-3.5 text-left transition-colors",
selected selected
? "bg-background text-foreground shadow-sm ring-1 ring-border/45" ? "bg-white/82 text-foreground shadow-[0_10px_28px_rgba(120,72,25,0.08)] ring-1 ring-orange-200/45 dark:bg-background/45 dark:ring-orange-300/12"
: "text-muted-foreground hover:bg-background/55 hover:text-foreground", : "text-muted-foreground hover:bg-white/48 hover:text-foreground dark:hover:bg-background/24",
)} )}
> >
<span className="min-w-0"> <span className="min-w-0">
@@ -3672,7 +3673,7 @@ function AutomationListItem({
</span> </span>
</span> </span>
<span className="flex shrink-0 flex-col items-end gap-2 pt-0.5"> <span className="flex shrink-0 flex-col items-end gap-2 pt-0.5">
<span className="rounded-full bg-muted/70 px-2 py-0.5 text-[11px] font-medium text-muted-foreground"> <span className="rounded-full bg-white/65 px-2 py-0.5 text-[11px] font-medium text-muted-foreground shadow-[inset_0_0_0_1px_rgba(120,72,25,0.055)] dark:bg-background/35">
{status.label} {status.label}
</span> </span>
{job.delete_after_run ? ( {job.delete_after_run ? (
@@ -3728,17 +3729,17 @@ function AutomationDetailPanel({
}, [job.id]); }, [job.id]);
return ( return (
<article className="flex min-h-0 min-w-0 flex-col overflow-hidden rounded-[24px] border border-border/45 bg-card/90 shadow-[0_24px_80px_rgba(15,23,42,0.065)] backdrop-blur-xl"> <article className="flex min-h-0 min-w-0 flex-col overflow-hidden bg-background/44 dark:bg-background/18">
<div className="shrink-0 border-b border-border/35 px-4 py-3.5 sm:px-5"> <div className="shrink-0 border-b border-orange-200/24 px-4 py-3.5 dark:border-orange-300/10 sm:px-5">
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"> <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
<div className="min-w-0"> <div className="min-w-0">
<div className="flex min-w-0 flex-wrap items-center gap-2"> <div className="flex min-w-0 flex-wrap items-center gap-2">
<h3 className="min-w-0 truncate text-[18px] font-medium leading-7 text-foreground"> <h3 className="min-w-0 truncate text-[18px] font-medium leading-7 text-foreground">
{job.name || job.id} {job.name || job.id}
</h3> </h3>
<StatusPill tone={status.tone}>{status.label}</StatusPill> <AutomationStatusBadge tone={status.tone}>{status.label}</AutomationStatusBadge>
{job.delete_after_run ? ( {job.delete_after_run ? (
<StatusPill>{tx("settings.automations.oneShot", "One-time")}</StatusPill> <AutomationStatusBadge>{tx("settings.automations.oneShot", "One-time")}</AutomationStatusBadge>
) : null} ) : null}
</div> </div>
<p className="mt-1 truncate text-[12.5px] leading-5 text-muted-foreground"> <p className="mt-1 truncate text-[12.5px] leading-5 text-muted-foreground">
@@ -3757,7 +3758,7 @@ function AutomationDetailPanel({
<div className="grid min-h-0 min-w-0 flex-1 overflow-hidden lg:grid-cols-[minmax(0,1fr)_14.5rem]"> <div className="grid min-h-0 min-w-0 flex-1 overflow-hidden lg:grid-cols-[minmax(0,1fr)_14.5rem]">
<div className="min-h-0 min-w-0 space-y-3 overflow-y-auto overscroll-contain p-4 sm:p-5"> <div className="min-h-0 min-w-0 space-y-3 overflow-y-auto overscroll-contain p-4 sm:p-5">
<section className="rounded-[20px] border border-border/35 bg-background/60 px-4 py-3.5"> <section className="rounded-[20px] border border-orange-200/24 bg-white/56 px-4 py-3.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.65)] dark:border-orange-300/10 dark:bg-background/24">
<div className="text-[11px] font-medium leading-none text-muted-foreground/75"> <div className="text-[11px] font-medium leading-none text-muted-foreground/75">
{tx("settings.automations.fields.message", "Message")} {tx("settings.automations.fields.message", "Message")}
</div> </div>
@@ -3811,7 +3812,7 @@ function AutomationDetailPanel({
) : null} ) : null}
</div> </div>
<aside className="min-h-0 overflow-y-auto overscroll-contain border-t border-border/35 bg-muted/20 p-4 text-[12px] text-muted-foreground lg:border-l lg:border-t-0"> <aside className="min-h-0 overflow-y-auto overscroll-contain border-t border-orange-200/24 bg-orange-50/24 p-4 text-[12px] text-muted-foreground dark:border-orange-300/10 dark:bg-orange-300/5 lg:border-l lg:border-t-0">
<div className="grid gap-3"> <div className="grid gap-3">
<AutomationDetail <AutomationDetail
label={tx("settings.automations.labels.schedule", "Schedule")} label={tx("settings.automations.labels.schedule", "Schedule")}
@@ -3882,7 +3883,7 @@ function AutomationActionGroup({
} }
return ( return (
<div className="flex shrink-0 items-center gap-1 rounded-full border border-border/35 bg-background/70 p-1 shadow-sm"> <div className="flex shrink-0 items-center gap-1 rounded-full border border-orange-200/30 bg-white/62 p-1 shadow-[0_10px_26px_rgba(120,72,25,0.08)] dark:border-orange-300/10 dark:bg-background/35">
<AppsActionButton <AppsActionButton
ariaLabel={tx("settings.automations.edit", "Edit")} ariaLabel={tx("settings.automations.edit", "Edit")}
disabled={Boolean(actionKey)} disabled={Boolean(actionKey)}
@@ -3925,6 +3926,30 @@ function AutomationActionGroup({
); );
} }
function AutomationStatusBadge({
tone = "neutral",
children,
}: {
tone?: "neutral" | "success" | "warning";
children: ReactNode;
}) {
return (
<span
className={cn(
"inline-flex h-6 items-center rounded-full px-2.5 text-[11.5px] font-medium shadow-[inset_0_0_0_1px_rgba(120,72,25,0.055)]",
tone === "success" &&
"bg-orange-100/72 text-orange-800 dark:bg-orange-300/12 dark:text-orange-200",
tone === "warning" &&
"bg-amber-100/80 text-amber-800 dark:bg-amber-300/14 dark:text-amber-200",
tone === "neutral" &&
"bg-white/64 text-muted-foreground dark:bg-background/35 dark:text-muted-foreground",
)}
>
{children}
</span>
);
}
function automationMessageNeedsExpansion(message: string): boolean { function automationMessageNeedsExpansion(message: string): boolean {
return message.length > 360 || message.split(/\r?\n/).length > 6; return message.length > 360 || message.split(/\r?\n/).length > 6;
} }
@@ -3941,7 +3966,7 @@ function AutomationDetail({
children: ReactNode; children: ReactNode;
}) { }) {
return ( return (
<div className="min-w-0 rounded-[18px] bg-muted/32 px-3 py-3"> <div className="min-w-0 rounded-[17px] bg-white/46 px-3 py-3 shadow-[inset_0_0_0_1px_rgba(120,72,25,0.04)] dark:bg-background/22">
<div className="text-[11px] font-medium leading-none text-muted-foreground/75"> <div className="text-[11px] font-medium leading-none text-muted-foreground/75">
{label} {label}
</div> </div>
@@ -4685,9 +4710,9 @@ function formatAutomationNextTitle(
function automationStatusDotClass(job: SessionAutomationJob): string { function automationStatusDotClass(job: SessionAutomationJob): string {
const status = automationStatusKey(job); const status = automationStatusKey(job);
if (status === "active" || status === "running") return "bg-emerald-500"; if (status === "active" || status === "running") return "bg-orange-500 shadow-[0_0_0_3px_rgba(249,115,22,0.12)]";
if (status === "failed") return "bg-amber-500"; if (status === "failed") return "bg-amber-500 shadow-[0_0_0_3px_rgba(245,158,11,0.13)]";
if (status === "system") return "bg-blue-500"; if (status === "system") return "bg-muted-foreground/45";
return "bg-muted-foreground/45"; return "bg-muted-foreground/45";
} }