From fed75c77df12299fab940bb1090b22905c8d7a6c Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Thu, 11 Jun 2026 18:34:45 -0400
Subject: [PATCH] feat(App): enhance Toaster component with rich colors, close
 button, and custom toast options

---
 src/app/App.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 97203ef..5446a8c 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -234,7 +234,16 @@ function AppPage({ title, onBack }: { title: string; onBack: () => void }) {
   return (
     <WsProvider>
     <div className="size-full flex flex-col bg-neutral-50">
-      <Toaster position="bottom-center" offset="calc(4rem + env(safe-area-inset-bottom))" />
+      <Toaster
+        position="bottom-center"
+        offset="calc(4rem + env(safe-area-inset-bottom))"
+        richColors
+        closeButton
+        duration={5000}
+        toastOptions={{
+          style: { fontSize: '0.9rem', fontWeight: 500, padding: '14px 16px' },
+        }}
+      />
       <header className="bg-[#4d4d4d] px-0 py-0 flex-shrink-0" style={{ paddingTop: 'env(safe-area-inset-top)' }}>
         <div className="flex items-stretch justify-between min-h-[56px]">
           <button onClick={() => setCurrentPage('status')} className="flex items-center h-full">