From 04545b95d9841e2872a0ba93abcb30573c5b79c2 Mon Sep 17 00:00:00 2001
From: chengyongru <chengyongru.ai@gmail.com>
Date: Tue, 16 Jun 2026 11:41:05 +0800
Subject: [PATCH] fix(webui): refine automation styling and delete confirmation

---
 webui/src/components/DeleteConfirm.tsx        |  6 ++--
 .../src/components/settings/SettingsView.tsx  | 30 +++++++++----------
 webui/src/i18n/locales/en/common.json         |  2 +-
 webui/src/i18n/locales/es/common.json         |  2 +-
 webui/src/i18n/locales/fr/common.json         |  2 +-
 webui/src/i18n/locales/id/common.json         |  2 +-
 webui/src/i18n/locales/ja/common.json         |  2 +-
 webui/src/i18n/locales/ko/common.json         |  2 +-
 webui/src/i18n/locales/vi/common.json         |  2 +-
 webui/src/i18n/locales/zh-CN/common.json      |  2 +-
 webui/src/i18n/locales/zh-TW/common.json      |  2 +-
 webui/src/tests/app-layout.test.tsx           |  2 +-
 12 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/webui/src/components/DeleteConfirm.tsx b/webui/src/components/DeleteConfirm.tsx
index d0a5ff77..5b578b05 100644
--- a/webui/src/components/DeleteConfirm.tsx
+++ b/webui/src/components/DeleteConfirm.tsx
@@ -80,16 +80,16 @@ export function DeleteConfirm({
             </div>
           ) : null}
         </AlertDialogHeader>
-        <AlertDialogFooter className="mt-7 grid grid-cols-1 gap-3 space-x-0 sm:grid-cols-2">
+        <AlertDialogFooter className="mt-7 !grid grid-cols-1 gap-3 space-x-0 sm:grid-cols-2 sm:space-x-0">
           <AlertDialogCancel
             onClick={onCancel}
-            className="mt-0 h-11 rounded-full border-0 bg-muted/70 px-5 text-[15px] font-semibold text-foreground shadow-none hover:bg-muted"
+            className="mt-0 h-11 w-full min-w-0 rounded-full border-0 bg-muted/70 px-5 text-[15px] font-semibold text-foreground shadow-none hover:bg-muted"
           >
             {t("deleteConfirm.cancel")}
           </AlertDialogCancel>
           <AlertDialogAction
             onClick={onConfirm}
-            className="h-11 rounded-full bg-destructive px-5 text-[15px] font-semibold text-destructive-foreground shadow-[0_10px_25px_rgba(239,68,68,0.28)] hover:bg-destructive/90"
+            className="h-11 w-full min-w-0 !whitespace-normal rounded-full bg-destructive px-5 text-center text-[15px] font-semibold text-destructive-foreground shadow-[0_10px_25px_rgba(239,68,68,0.28)] hover:bg-destructive/90"
           >
             {hasAutomations
               ? t("deleteConfirm.confirmWithAutomations")
diff --git a/webui/src/components/settings/SettingsView.tsx b/webui/src/components/settings/SettingsView.tsx
index 2bf98b5a..7a42d8fd 100644
--- a/webui/src/components/settings/SettingsView.tsx
+++ b/webui/src/components/settings/SettingsView.tsx
@@ -3489,11 +3489,11 @@ function AutomationsSettings({
   }, [filtered, selectedJobId]);
 
   return (
-    <div className="flex min-h-0 flex-col gap-3 xl:flex-1 xl:overflow-hidden">
-      <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="flex min-h-0 flex-col gap-2 xl:flex-1 xl:overflow-hidden">
+      <section className="shrink-0 rounded-[22px] border border-border/45 bg-card/72 p-3 shadow-[0_14px_42px_rgba(15,23,42,0.045)] backdrop-blur-xl dark:border-white/10 dark:bg-card/45 sm:p-4">
         <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="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">
+            <div className="grid w-full min-w-[36rem] grid-cols-5 gap-1 rounded-[15px] bg-muted/42 p-1 shadow-[inset_0_0_0_1px_rgba(15,23,42,0.035)] dark:bg-background/30">
               {summaryOptions.map((option) => (
                 <button
                   key={option.value}
@@ -3502,7 +3502,7 @@ function AutomationsSettings({
                   className={cn(
                     "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-white text-orange-950 shadow-[0_8px_20px_rgba(120,72,25,0.1)] dark:bg-background/80 dark:text-orange-100",
+                      "bg-background text-foreground shadow-[0_8px_20px_rgba(15,23,42,0.07)] dark:bg-background/80",
                   )}
                 >
                   <span>{option.label}</span>
@@ -3524,14 +3524,14 @@ function AutomationsSettings({
                   "settings.automations.search",
                   "Search task, message, linked chat, or schedule",
                 )}
-                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"
+                className="h-9 w-full rounded-[13px] border-border/45 bg-background/85 pl-9 text-[13px] shadow-[0_8px_22px_rgba(15,23,42,0.04)] dark:border-white/10 dark:bg-background/40"
               />
             </div>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <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-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"
+                  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-[0_8px_22px_rgba(15,23,42,0.04)] transition-colors hover:bg-muted/70 hover:text-foreground dark:border-white/10 dark:bg-background/40 sm:w-auto"
                 >
                   <ArrowUpDown className="h-3.5 w-3.5" aria-hidden />
                   <span>{sortLabel[sort]}</span>
@@ -3564,8 +3564,8 @@ function AutomationsSettings({
           {tx("settings.automations.loading", "Loading automations...")}
         </div>
       ) : filtered.length && selectedJob ? (
-        <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 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">
+        <section className="grid min-h-0 overflow-hidden rounded-[22px] border border-border/45 bg-card/72 shadow-[0_18px_55px_rgba(15,23,42,0.055)] backdrop-blur-xl dark:border-white/10 dark:bg-card/45 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 border-b border-border/35 bg-background/36 dark:border-white/10 dark:bg-background/18 xl:border-b-0 xl:border-r">
             <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">
                 {tx("settings.automations.queue", "Queue")}
@@ -3647,7 +3647,7 @@ function AutomationListItem({
         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",
           selected
-            ? "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"
+            ? "bg-background text-foreground shadow-[0_10px_28px_rgba(15,23,42,0.055)] ring-1 ring-border/45 dark:bg-background/45 dark:ring-white/10"
             : "text-muted-foreground hover:bg-white/48 hover:text-foreground dark:hover:bg-background/24",
         )}
       >
@@ -3729,8 +3729,8 @@ function AutomationDetailPanel({
   }, [job.id]);
 
   return (
-    <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-orange-200/24 px-4 py-3.5 dark:border-orange-300/10 sm:px-5">
+    <article className="flex min-h-0 min-w-0 flex-col overflow-hidden bg-background/42 dark:bg-background/18">
+      <div className="shrink-0 border-b border-border/35 px-4 py-3.5 dark:border-white/10 sm:px-5">
         <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
           <div className="min-w-0">
             <div className="flex min-w-0 flex-wrap items-center gap-2">
@@ -3758,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="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-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">
+          <section className="rounded-[20px] border border-border/35 bg-background/62 px-4 py-3.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.58)] dark:border-white/10 dark:bg-background/24">
             <div className="text-[11px] font-medium leading-none text-muted-foreground/75">
               {tx("settings.automations.fields.message", "Message")}
             </div>
@@ -3812,7 +3812,7 @@ function AutomationDetailPanel({
           ) : null}
         </div>
 
-        <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">
+        <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 dark:border-white/10 dark:bg-background/16 lg:border-l lg:border-t-0">
           <div className="grid gap-3">
             <AutomationDetail
               label={tx("settings.automations.labels.schedule", "Schedule")}
@@ -3883,7 +3883,7 @@ function AutomationActionGroup({
   }
 
   return (
-    <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">
+    <div className="flex shrink-0 items-center gap-1 rounded-full border border-border/35 bg-background/70 p-1 shadow-[0_10px_26px_rgba(15,23,42,0.055)] dark:border-white/10 dark:bg-background/35">
       <AppsActionButton
         ariaLabel={tx("settings.automations.edit", "Edit")}
         disabled={Boolean(actionKey)}
@@ -3966,7 +3966,7 @@ function AutomationDetail({
   children: ReactNode;
 }) {
   return (
-    <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="min-w-0 rounded-[17px] bg-background/52 px-3 py-3 shadow-[inset_0_0_0_1px_rgba(15,23,42,0.035)] dark:bg-background/22">
       <div className="text-[11px] font-medium leading-none text-muted-foreground/75">
         {label}
       </div>
diff --git a/webui/src/i18n/locales/en/common.json b/webui/src/i18n/locales/en/common.json
index f70110a0..c2628f6d 100644
--- a/webui/src/i18n/locales/en/common.json
+++ b/webui/src/i18n/locales/en/common.json
@@ -705,7 +705,7 @@
     "confirm": "Delete",
     "automationsDescription": "This chat has scheduled automations. Deleting it will also delete them.",
     "moreAutomations": "+ {{count}} more",
-    "confirmWithAutomations": "Delete chat and automations",
+    "confirmWithAutomations": "Delete",
     "schedule": {
       "at": "{{time}}",
       "every": "Every {{duration}}",
diff --git a/webui/src/i18n/locales/es/common.json b/webui/src/i18n/locales/es/common.json
index c0b93027..7f8fd4c5 100644
--- a/webui/src/i18n/locales/es/common.json
+++ b/webui/src/i18n/locales/es/common.json
@@ -705,7 +705,7 @@
     "confirm": "Eliminar",
     "automationsDescription": "Este chat tiene automatizaciones programadas. Al eliminarlo también se eliminarán.",
     "moreAutomations": "+ {{count}} más",
-    "confirmWithAutomations": "Eliminar chat y automatizaciones",
+    "confirmWithAutomations": "Eliminar",
     "schedule": {
       "at": "{{time}}",
       "every": "Cada {{duration}}",
diff --git a/webui/src/i18n/locales/fr/common.json b/webui/src/i18n/locales/fr/common.json
index e8922499..8f46c49d 100644
--- a/webui/src/i18n/locales/fr/common.json
+++ b/webui/src/i18n/locales/fr/common.json
@@ -705,7 +705,7 @@
     "confirm": "Supprimer",
     "automationsDescription": "Cette discussion contient des automatisations planifiées. La supprimer les supprimera aussi.",
     "moreAutomations": "+ {{count}} autres",
-    "confirmWithAutomations": "Supprimer la discussion et les automatisations",
+    "confirmWithAutomations": "Supprimer",
     "schedule": {
       "at": "{{time}}",
       "every": "Tous les {{duration}}",
diff --git a/webui/src/i18n/locales/id/common.json b/webui/src/i18n/locales/id/common.json
index aebc5171..6a6af3e8 100644
--- a/webui/src/i18n/locales/id/common.json
+++ b/webui/src/i18n/locales/id/common.json
@@ -705,7 +705,7 @@
     "confirm": "Hapus",
     "automationsDescription": "Obrolan ini memiliki automasi terjadwal. Menghapusnya juga akan menghapus automasi tersebut.",
     "moreAutomations": "+ {{count}} lagi",
-    "confirmWithAutomations": "Hapus obrolan dan automasi",
+    "confirmWithAutomations": "Hapus",
     "schedule": {
       "at": "{{time}}",
       "every": "Setiap {{duration}}",
diff --git a/webui/src/i18n/locales/ja/common.json b/webui/src/i18n/locales/ja/common.json
index cd0628e8..d1c7dc63 100644
--- a/webui/src/i18n/locales/ja/common.json
+++ b/webui/src/i18n/locales/ja/common.json
@@ -705,7 +705,7 @@
     "confirm": "削除",
     "automationsDescription": "このチャットにはスケジュール済みの自動タスクがあります。削除するとそれらも削除されます。",
     "moreAutomations": "他 {{count}} 件",
-    "confirmWithAutomations": "チャットと自動タスクを削除",
+    "confirmWithAutomations": "削除",
     "schedule": {
       "at": "{{time}}",
       "every": "{{duration}} ごと",
diff --git a/webui/src/i18n/locales/ko/common.json b/webui/src/i18n/locales/ko/common.json
index d91bc188..e6313b7f 100644
--- a/webui/src/i18n/locales/ko/common.json
+++ b/webui/src/i18n/locales/ko/common.json
@@ -705,7 +705,7 @@
     "confirm": "삭제",
     "automationsDescription": "이 채팅에는 예약된 자동화가 있습니다. 채팅을 삭제하면 자동화도 함께 삭제됩니다.",
     "moreAutomations": "+ {{count}}개 더",
-    "confirmWithAutomations": "채팅과 자동화 삭제",
+    "confirmWithAutomations": "삭제",
     "schedule": {
       "at": "{{time}}",
       "every": "{{duration}}마다",
diff --git a/webui/src/i18n/locales/vi/common.json b/webui/src/i18n/locales/vi/common.json
index 8edee166..9e8f95e9 100644
--- a/webui/src/i18n/locales/vi/common.json
+++ b/webui/src/i18n/locales/vi/common.json
@@ -705,7 +705,7 @@
     "confirm": "Xóa",
     "automationsDescription": "Cuộc trò chuyện này có các tự động hóa đã lên lịch. Xóa cuộc trò chuyện cũng sẽ xóa chúng.",
     "moreAutomations": "+ {{count}} mục nữa",
-    "confirmWithAutomations": "Xóa trò chuyện và tự động hóa",
+    "confirmWithAutomations": "Xóa",
     "schedule": {
       "at": "{{time}}",
       "every": "Mỗi {{duration}}",
diff --git a/webui/src/i18n/locales/zh-CN/common.json b/webui/src/i18n/locales/zh-CN/common.json
index cce6f4ac..4ff4badb 100644
--- a/webui/src/i18n/locales/zh-CN/common.json
+++ b/webui/src/i18n/locales/zh-CN/common.json
@@ -705,7 +705,7 @@
     "confirm": "删除",
     "automationsDescription": "这个对话有关联的自动任务。删除对话也会删除这些自动任务。",
     "moreAutomations": "另有 {{count}} 个",
-    "confirmWithAutomations": "删除对话和自动任务",
+    "confirmWithAutomations": "删除",
     "schedule": {
       "at": "{{time}}",
       "every": "每 {{duration}}",
diff --git a/webui/src/i18n/locales/zh-TW/common.json b/webui/src/i18n/locales/zh-TW/common.json
index 9aaf6f86..fbbb0223 100644
--- a/webui/src/i18n/locales/zh-TW/common.json
+++ b/webui/src/i18n/locales/zh-TW/common.json
@@ -705,7 +705,7 @@
     "confirm": "刪除",
     "automationsDescription": "這個對話有關聯的自動任務。刪除對話也會刪除這些自動任務。",
     "moreAutomations": "另有 {{count}} 個",
-    "confirmWithAutomations": "刪除對話和自動任務",
+    "confirmWithAutomations": "刪除",
     "schedule": {
       "at": "{{time}}",
       "every": "每 {{duration}}",
diff --git a/webui/src/tests/app-layout.test.tsx b/webui/src/tests/app-layout.test.tsx
index c4c93c92..687660ed 100644
--- a/webui/src/tests/app-layout.test.tsx
+++ b/webui/src/tests/app-layout.test.tsx
@@ -845,7 +845,7 @@ describe("App layout", () => {
       screen.queryByText("This chat has scheduled automations. Deleting it will also delete them."),
     ).not.toBeInTheDocument();
 
-    fireEvent.click(screen.getByRole("button", { name: "删除对话和自动任务" }));
+    fireEvent.click(screen.getByRole("button", { name: "删除" }));
 
     await waitFor(() =>
       expect(deleteChatSpy).toHaveBeenCalledWith("websocket:chat-a", {