fix: replace browser alerts with Sonner toasts

apps/web/package.json

@@ -41,6 +41,7 @@
     "react-qr-code": "^2.0.18",
     "react-tweet": "^3.2.1",
     "sanitize-html": "^2.11.0",
+    "sonner": "^2.0.7",
     "superjson": "^2.2.5",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",

apps/web/src/app/layout.tsx

@@ -10,6 +10,7 @@ import { authConfig } from "@/lib/auth/config";
 import { SessionWrapper } from "./SessionWrapper";
 import { TRPCProvider } from "@/providers/trpc-provider";
 import { GeistSans } from "geist/font/sans";
+import { Toaster } from "sonner";
 
 // DM Mono - Used for code, terminal, and monospace text
 const dmMono = localFont({
@@ -124,6 +125,7 @@ export default async function RootLayout({
               <PostHogAuthTracker />
               <TRPCProvider>{children}</TRPCProvider>
             </SessionWrapper>
+            <Toaster theme="system" richColors />
           </ThemeProvider>
         </PostHogProvider>
         <Analytics />

apps/web/src/components/payment/PaymentFlow.tsx

@@ -8,6 +8,7 @@ import PrimaryButton from "@/components/ui/custom-button";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useAnalytics } from "@/hooks/useAnalytics";
+import { toast } from "sonner";
 
 interface PaymentFlowProps {
   planId: string; // Required: Plan ID from database
@@ -119,7 +120,7 @@ const PaymentFlow: React.FC<PaymentFlowProps> = ({
           "verification_failed",
           error instanceof Error ? error.message : "Unknown error"
         );
-        alert("Payment verification failed. Please contact support.");
+        toast.error("Payment verification failed. Please contact support.");
         setIsProcessing(false);
       }
     },
@@ -131,7 +132,7 @@ const PaymentFlow: React.FC<PaymentFlowProps> = ({
         "payment_failed",
         error instanceof Error ? error.message : String(error)
       );
-      alert("Payment failed. Please try again.");
+      toast.error("Payment failed. Please try again.");
       setIsProcessing(false);
     },
     onDismiss: () => {
@@ -146,7 +147,7 @@ const PaymentFlow: React.FC<PaymentFlowProps> = ({
 
     try {
       if (!planId || planId.trim().length === 0) {
-        alert("Payment is currently unavailable. Please contact support.");
+        toast.error("Payment is currently unavailable. Please contact support.");
         return;
       }
 

apps/web/src/components/ui/FiltersContainer.tsx

@@ -17,10 +17,11 @@ import { useRenderProjects } from "@/store/useRenderProjectsStore";
 import { useProjectsData } from "@/store/useProjectsDataStore";
 import { useLoading } from "@/store/useLoadingStore";
 import { useProjectsNotFoundStore } from "@/store/useProjectsFoundStore";
+import { toast } from "sonner";
 
 export default function FiltersContainer() {
   const handleClickWipFilters = () => {
-    window.alert("🏗️ Coming very soon! :)");
+    toast.info("🏗️ Coming very soon!");
   };
 
   const { toggleShowFilters } = useFilterStore();