Add toast to website

Author: maparent

apps/website/app/providers.tsx

@@ -2,6 +2,7 @@
 
 import posthog from "posthog-js";
 import { PostHogProvider as PHProvider } from "posthog-js/react";
+import { Toaster } from "@repo/ui/components/ui/sonner";
 import { useEffect } from "react";
 import PostHogPageView from "./PostHogPageView";
 
@@ -12,7 +13,11 @@ if (
   throw new Error("PostHog environment variables are not set");
 }
 
-export function PostHogProvider({ children }: { children: React.ReactNode }) {
+export const PostHogProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
   useEffect(() => {
     posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
       api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST!,
@@ -24,6 +29,7 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
     <PHProvider client={posthog}>
       <PostHogPageView />
       {children}
+      <Toaster />
     </PHProvider>
   );
-}
+};

apps/website/app/utils/internalError.ts

@@ -3,6 +3,7 @@
 import { useCallback } from "react";
 import type { Properties } from "posthog-js";
 import { usePostHog } from "posthog-js/react";
+import { toast } from "sonner";
 
 const NON_WORD = /\W+/g;
 export const useInternalError = () => {
@@ -11,11 +12,13 @@ export const useInternalError = () => {
     ({
       error,
       type,
+      userMessage,
       context,
       forceSendInDev = false,
     }: {
       error: unknown;
       type?: string;
+      userMessage?: string;
       context?: Properties;
       forceSendInDev?: boolean;
     }): void => {
@@ -41,6 +44,9 @@ export const useInternalError = () => {
         }
         posthog.captureException(error, { ...context, type: slugType });
       }
+      if (userMessage) {
+        toast(userMessage, { duration: 5000 });
+      }
     },
     [posthog],
   );

apps/website/package.json

@@ -30,6 +30,7 @@
     "react": "catalog:",
     "react-dom": "catalog:",
     "resend": "^4.0.1",
+    "sonner": "^2.0.7",
     "zod": "^3.24.1"
   },
   "devDependencies": {

packages/ui/package.json

@@ -39,9 +39,11 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.468.0",
+    "next-themes": "^0.4.6",
     "react": "^19",
     "react-dom": "^19",
     "shadcn": "2.10.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",

packages/ui/src/components/ui/sonner.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import {
+  CircleCheck,
+  Info,
+  LoaderCircle,
+  OctagonX,
+  TriangleAlert,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheck className="h-4 w-4" />,
+        info: <Info className="h-4 w-4" />,
+        warning: <TriangleAlert className="h-4 w-4" />,
+        error: <OctagonX className="h-4 w-4" />,
+        loading: <LoaderCircle className="h-4 w-4 animate-spin" />,
+      }}
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };