toast and UI adjustments

Author: maparent

apps/website/app/(home)/auth/group/page.tsx

@@ -2,11 +2,13 @@ import { ListGroups } from "~/components/auth/ListGroups";
 import { Suspense } from "react";
 
 const Page = () => (
-  <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
-    <Suspense fallback={<>Loading</>}>
-      <ListGroups />
-    </Suspense>
-  </div>
+  <main>
+    <div className="mx-auto max-w-6xl space-y-12 px-6 py-12">
+      <Suspense fallback={<>Loading</>}>
+        <ListGroups />
+      </Suspense>
+    </div>
+  </main>
 );
 
 export default Page;

apps/website/app/components/auth/ListGroups.tsx

@@ -4,6 +4,7 @@ import { createClient } from "~/utils/supabase/client";
 import { getSessionUserData } from "~/utils/supabase/dbUtils";
 import { useState, useEffect } from "react";
 import { Tables } from "@repo/database/dbTypes";
+import useInternalError from "~/utils/internalError";
 
 type GroupData = Tables<"my_groups">;
 
@@ -12,14 +13,16 @@ export const ListGroups = () => {
   const [adminData, setAdminData] = useState<Record<string, boolean>>({});
   const [userName, setUserName] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const internalError = useInternalError();
 
   useEffect(() => {
     const getGroups = async () => {
       try {
         const client = createClient();
         const userData = await getSessionUserData(client);
         if (!userData) {
-          setError("Not logged in");
+          const userMessage = "Not logged in.\nPlease log in from application.";
+          setError(userMessage);
           return;
         }
         const { name, type, id } = userData;
@@ -37,7 +40,12 @@ export const ListGroups = () => {
           .select("group_id,admin")
           .eq("member_id", id);
         if (membershipReq.error) {
-          setError(membershipReq.error.message);
+          const userMessage = "Could not access DiscourseGraphs";
+          setError(userMessage);
+          internalError({
+            error: membershipReq.error,
+            userMessage,
+          });
           return;
         }
         setAdminData(
@@ -50,17 +58,22 @@ export const ListGroups = () => {
           ),
         );
       } catch (error) {
-        setError(
-          error instanceof Error ? error.message : "Unknown error occurred",
-        );
+        const userMessage = "Unknown error occurred";
+        setError(userMessage);
+        internalError({
+          error,
+          userMessage,
+        });
       }
     };
     void getGroups();
-  }, []);
+  }, [internalError]);
 
   return (
     <div>
-      <div>{userName ? <p>Logged in as {userName}</p> : ""}</div>
+      <div className="text-right text-sm">
+        {userName ? <p>Logged in as {userName}</p> : ""}
+      </div>
       <div>
         {error ? (
           "Error: " + error
@@ -71,7 +84,7 @@ export const ListGroups = () => {
         ) : (
           <>
             <p>Your groups:</p>
-            <ul>
+            <ul className="list-inside list-disc space-y-2">
               {groupData.map((d) => (
                 <li key={d.id}>
                   {adminData[d.id || ""] ? (

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 };