Refactor toast

src/pages/_app.tsx

@@ -1,12 +1,10 @@
 import { CloudProvider } from "@/cloud/useCloud";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
-import { Toaster } from "react-hot-toast";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <CloudProvider>
-      <Toaster />
       <Component {...pageProps} />
     </CloudProvider>
   );}

src/pages/index.tsx

@@ -14,6 +14,7 @@ import { PlaygroundToast, ToastType } from "@/components/toast/PlaygroundToast";
 import { ConfigProvider, useConfig } from "@/hooks/useConfig";
 import { ConnectionMode, ConnectionProvider, useConnection } from "@/hooks/useConnection";
 import { useMemo } from "react";
+import { ToastProvider, useToast } from "@/components/toast/ToasterProvider";
 
 const themeColors = [
   "cyan",
@@ -30,23 +31,22 @@ const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
   return (
-    <ConfigProvider>
-      <ConnectionProvider>
-        <HomeInner />
-      </ConnectionProvider>
-    </ConfigProvider>
+    <ToastProvider>
+      <ConfigProvider>
+        <ConnectionProvider>
+          <HomeInner />
+        </ConnectionProvider>
+      </ConfigProvider>
+    </ToastProvider>
   );
 }
 
 export function HomeInner() {
-  const [toastMessage, setToastMessage] = useState<{
-    message: string;
-    type: ToastType;
-  } | null>(null);
   const { shouldConnect, wsUrl, token, mode, connect, disconnect } =
     useConnection();
   
   const {config} = useConfig();
+  const { toastMessage, setToastMessage } = useToast();
 
   const handleConnect = useCallback(
     async (c: boolean, mode: ConnectionMode) => {
@@ -93,13 +93,7 @@ export function HomeInner() {
               animate={{ opacity: 1, translateY: 0 }}
               exit={{ opacity: 0, translateY: -50 }}
             >
-              <PlaygroundToast
-                message={toastMessage.message}
-                type={toastMessage.type}
-                onDismiss={() => {
-                  setToastMessage(null);
-                }}
-              />
+              <PlaygroundToast />
             </motion.div>
           )}
         </AnimatePresence>