From 3a46030f7b8f3d99f5299444f6327b987173db75 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 16 Jan 2026 11:01:34 +0800
Subject: [PATCH] Refactor toast notifications to use neutral background with
 colored icons

- Move toast position from top-center to bottom-right
- Remove richColors and use neutral popover background for all toast types
- Add colored icons: green (success), red (error), amber (warning), blue (info)
- Improve switch agent success message

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/renderer/src/App.tsx                  |  2 +-
 src/renderer/src/components/ui/sonner.tsx | 36 +++++++++++------------
 src/renderer/src/hooks/useApp.ts          |  2 +-
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 11b67c80be..fe64950dae 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -169,7 +169,7 @@ function AppContent(): React.JSX.Element {
       />
 
       {/* Toast notifications */}
-      <Toaster position="top-center" />
+      <Toaster position="bottom-right" />
     </div>
   )
 }
diff --git a/src/renderer/src/components/ui/sonner.tsx b/src/renderer/src/components/ui/sonner.tsx
index 450bdcf7f4..379a4733a5 100644
--- a/src/renderer/src/components/ui/sonner.tsx
+++ b/src/renderer/src/components/ui/sonner.tsx
@@ -10,38 +10,36 @@ import { Toaster as Sonner, type ToasterProps } from 'sonner'
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
 
   return (
     <Sonner
       theme={resolvedTheme as ToasterProps['theme']}
       className="toaster group"
-      richColors
       icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
+        success: <CircleCheckIcon className="size-4 text-green-500" />,
+        info: <InfoIcon className="size-4 text-blue-500" />,
+        warning: <TriangleAlertIcon className="size-4 text-amber-500" />,
+        error: <OctagonXIcon className="size-4 text-red-500" />,
         loading: <Loader2Icon className="size-4 animate-spin" />
       }}
       style={
         {
-          // Normal toast
+          // All toast types use neutral background
           '--normal-bg': 'var(--popover)',
           '--normal-text': 'var(--popover-foreground)',
           '--normal-border': 'var(--border)',
-          // Error toast - red styling
-          '--error-bg': isDark ? 'oklch(0.25 0.08 25)' : 'oklch(0.97 0.02 25)',
-          '--error-text': isDark ? 'oklch(0.9 0.1 25)' : 'oklch(0.45 0.18 25)',
-          '--error-border': isDark ? 'oklch(0.45 0.15 25)' : 'oklch(0.7 0.15 25)',
-          // Success toast - green styling
-          '--success-bg': isDark ? 'oklch(0.25 0.06 145)' : 'oklch(0.97 0.02 145)',
-          '--success-text': isDark ? 'oklch(0.85 0.12 145)' : 'oklch(0.4 0.12 145)',
-          '--success-border': isDark ? 'oklch(0.45 0.1 145)' : 'oklch(0.7 0.1 145)',
-          // Warning toast - amber styling
-          '--warning-bg': isDark ? 'oklch(0.28 0.08 70)' : 'oklch(0.97 0.03 70)',
-          '--warning-text': isDark ? 'oklch(0.9 0.12 70)' : 'oklch(0.45 0.14 70)',
-          '--warning-border': isDark ? 'oklch(0.5 0.12 70)' : 'oklch(0.75 0.12 70)',
+          '--success-bg': 'var(--popover)',
+          '--success-text': 'var(--popover-foreground)',
+          '--success-border': 'var(--border)',
+          '--error-bg': 'var(--popover)',
+          '--error-text': 'var(--popover-foreground)',
+          '--error-border': 'var(--border)',
+          '--warning-bg': 'var(--popover)',
+          '--warning-text': 'var(--popover-foreground)',
+          '--warning-border': 'var(--border)',
+          '--info-bg': 'var(--popover)',
+          '--info-text': 'var(--popover-foreground)',
+          '--info-border': 'var(--border)',
           '--border-radius': 'var(--radius)'
         } as React.CSSProperties
       }
diff --git a/src/renderer/src/hooks/useApp.ts b/src/renderer/src/hooks/useApp.ts
index 805f28b582..d5cb670246 100644
--- a/src/renderer/src/hooks/useApp.ts
+++ b/src/renderer/src/hooks/useApp.ts
@@ -305,7 +305,7 @@ export function useApp(): AppState & AppActions {
         )
         setCurrentSession(updatedSession)
         await loadRunningStatus()
-        toast.success(`Switched to ${newAgentId}`)
+        toast.success(`Successfully switched to ${newAgentId}`)
       } catch (err) {
         toast.error(`Failed to switch agent: ${getErrorMessage(err)}`)
       } finally {