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

style(webui): add subtle automation filter tones

Browse Source
This commit is contained in:
Xubin Ren
2026-06-17 01:49:24 +08:00
parent c6ea5aecff
commit 9ce40969ce
1 changed files with 43 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/settings/SettingsView.tsx
+43 -1
View File
@@ -3496,10 +3496,16 @@ function AutomationsSettings({
"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-[0_8px_20px_rgba(15,23,42,0.07)] dark:bg-background/80",
automationFilterToneClass(option.value, option.count, filter === option.value),
)}
>
<span>{option.label}</span>
<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">
<span
className={cn(
"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",
automationFilterCountClass(option.value, option.count),
)}
>
{option.count}
</span>
</button>
@@ -4562,6 +4568,42 @@ function automationMatchesFilter(job: SessionAutomationJob, filter: AutomationFi
return true;
}
const AUTOMATION_FILTER_TONES: Partial<
Record<AutomationFilter, { text: string; selectedText: string; count: string }>
> = {
active: {
text: "text-emerald-600 dark:text-emerald-400",
selectedText: "text-emerald-700 dark:text-emerald-300",
count: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
},
paused: {
text: "text-amber-600 dark:text-amber-400",
selectedText: "text-amber-700 dark:text-amber-300",
count: "bg-amber-500/10 text-amber-700 dark:text-amber-300",
},
failed: {
text: "text-rose-600 dark:text-rose-400",
selectedText: "text-rose-700 dark:text-rose-300",
count: "bg-rose-500/10 text-rose-700 dark:text-rose-300",
},
system: {
text: "text-sky-600 dark:text-sky-400",
selectedText: "text-sky-700 dark:text-sky-300",
count: "bg-sky-500/10 text-sky-700 dark:text-sky-300",
},
};
function automationFilterToneClass(value: AutomationFilter, count: number, selected: boolean): string {
const tone = AUTOMATION_FILTER_TONES[value];
if (count <= 0 || !tone) return "";
return selected ? tone.selectedText : tone.text;
}
function automationFilterCountClass(value: AutomationFilter, count: number): string {
const tone = AUTOMATION_FILTER_TONES[value];
return count > 0 && tone ? tone.count : "";
}
function automationStatus(
job: SessionAutomationJob,
tx: (key: string, fallback: string, values?: Record<string, unknown>) => string,