toaster for notifications

frontend/realtime/package-lock.json

@@ -23,6 +23,7 @@
         "react-drag-drop-files": "^2.3.10",
         "react-easy-crop": "^5.1.0",
         "react-router-dom": "^6.26.1",
+        "sonner": "^2.0.1",
         "tailwind-merge": "^2.5.2",
         "uuid": "^10.0.0",
         "yarn": "^1.22.22"
@@ -8289,6 +8290,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.1.tgz",
+      "integrity": "sha512-FRBphaehZ5tLdLcQ8g2WOIRE+Y7BCfWi5Zyd8bCvBjiW8TxxAyoWZIxS661Yz6TGPqFQ4VLzOF89WEYhfynSFQ==",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

frontend/realtime/package.json

@@ -26,6 +26,7 @@
     "react-drag-drop-files": "^2.3.10",
     "react-easy-crop": "^5.1.0",
     "react-router-dom": "^6.26.1",
+    "sonner": "^2.0.1",
     "tailwind-merge": "^2.5.2",
     "uuid": "^10.0.0",
     "yarn": "^1.22.22"

frontend/realtime/src/app/index.tsx

@@ -5,6 +5,7 @@ import { RouterProvider } from "react-router-dom";
 import { router } from "./router";
 import { posthog } from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
+import { Toaster } from "~/components/ui/Toast";
 
 import "./global.css";
 import { useRenderCounter } from "~/hooks/useRenderCounter";
@@ -31,11 +32,17 @@ const App = () => {
       <StrictMode>
         <PostHogProvider client={posthog}>
           <RouterProvider router={router} />
+          <Toaster />
         </PostHogProvider>
       </StrictMode>
     );
   }
-  return <RouterProvider router={router} />;
+  return (
+    <>
+      <RouterProvider router={router} />
+      <Toaster />
+    </>
+  );
 };
 
 createRoot(document.getElementById("root")!).render(<App />);

frontend/realtime/src/components/ui/Toast.tsx

@@ -0,0 +1,12 @@
+import { Toaster as SonnerToaster } from "sonner";
+
+export const Toaster = () => {
+  return (
+    <SonnerToaster
+      position="top-right"
+      theme="dark"
+      offset={{ top: 75, right: 16 }}
+      richColors
+    />
+  );
+};

frontend/realtime/yarn.lock

@@ -3635,7 +3635,7 @@ react-colorful@^5.6.1:
   resolved "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz"
   integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
 
-"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18, react-dom@^18.0.0, react-dom@^18.3.1, "react-dom@>= 16.8.0", react-dom@>=16.4.0, react-dom@>=16.8, react-dom@>=16.8.0:
+"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18, react-dom@^18.0.0, "react-dom@^18.0.0 || ^19.0.0 || ^19.0.0-rc", react-dom@^18.3.1, "react-dom@>= 16.8.0", react-dom@>=16.4.0, react-dom@>=16.8, react-dom@>=16.8.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -3684,7 +3684,7 @@ react-router@6.26.1:
   dependencies:
     "@remix-run/router" "1.19.1"
 
-"react@^16.14.0 || 17.x || 18.x", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", react@^18, react@^18.0.0, react@^18.3.1, "react@>= 16.8.0", react@>=16.3, react@>=16.4.0, react@>=16.8, react@>=16.8.0:
+"react@^16.14.0 || 17.x || 18.x", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", react@^18, react@^18.0.0, "react@^18.0.0 || ^19.0.0 || ^19.0.0-rc", react@^18.3.1, "react@>= 16.8.0", react@>=16.3, react@>=16.4.0, react@>=16.8, react@>=16.8.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -3956,6 +3956,11 @@ socks@^2.8.3:
     ip-address "^9.0.5"
     smart-buffer "^4.2.0"
 
+sonner@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/sonner/-/sonner-2.0.1.tgz"
+  integrity sha512-FRBphaehZ5tLdLcQ8g2WOIRE+Y7BCfWi5Zyd8bCvBjiW8TxxAyoWZIxS661Yz6TGPqFQ4VLzOF89WEYhfynSFQ==
+
 source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz"