UI features

calc-frontend/package.json

@@ -22,6 +22,7 @@
     "clsx": "^2.1.1",
     "jsdom": "^26.0.0",
     "lucide-react": "^0.483.0",
+    "next-themes": "^0.4.6",
     "npm": "^11.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -31,6 +32,7 @@
     "react-router": "^7.1.5",
     "react-select": "^5.10.1",
     "rehype-raw": "^7.0.0",
+    "sonner": "^2.0.3",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.0.4",
     "tw-animate-css": "^1.2.5"

calc-frontend/src/App/App.tsx

@@ -7,6 +7,8 @@ import './widgets.css'
 import RoutesList from "./RoutesList";
 import { AuthProvider } from "./AuthContext";
 
+import { Toaster } from "@/components/ui/sonner";
+
 function App() {
 
   // go to the RootLayout component to edit the visual layout
@@ -18,6 +20,7 @@ function App() {
 
   return (
     <AuthProvider>
+      <Toaster position="bottom-left" richColors />
       <RouterProvider router={router} />
     </AuthProvider>
   )

calc-frontend/src/__tests__/App.test.tsx

@@ -4,14 +4,21 @@ import { createMemoryRouter, createRoutesFromElements, RouterProvider } from 're
 
 import { AuthProvider } from '../App/AuthContext'
 import RoutesList from '../App/RoutesList'
+import { Toaster } from '@/components/ui/sonner'
 
 test('full app rendering', () => {
 
   const router = createMemoryRouter(createRoutesFromElements(RoutesList), {
     initialEntries:['/error'],
   })
 
-  render(<AuthProvider><RouterProvider router = {router} /></AuthProvider>, {})
+  render(
+    <AuthProvider>
+      <Toaster />
+      <RouterProvider router={router} />
+    </AuthProvider>,
+    {}
+  );
 
   // check if heading is visible
   const heading = screen.getByRole('link', {name: 'Calc Visualizer'})

calc-frontend/src/components/Custom/DerivCustomGraph.tsx

@@ -2,6 +2,7 @@
 
 import { useLayoutEffect , useEffect, useState} from "react";
 import axios from "axios";
+import { Blocks } from "react-loader-spinner";
 
 function DerivCustomGraph({func, lowerBound, upperBound, handleSave, onAIResponseComplete}) {
 
@@ -91,8 +92,10 @@ function DerivCustomGraph({func, lowerBound, upperBound, handleSave, onAIRespons
   if(!ready){
     return(       
       <div className="pad-sm loading" style={{fontSize:'1.25rem'}}>
-        Loading...<br/>
-        Complex functions may take longer
+        <Blocks height="80" width="80" color="#4fa94d" ariaLabel="loading" 
+               wrapperStyle={{marginLeft:'auto', marginRight:'auto'}}
+               wrapperClass="blocks-wrapper loading" visible={true}
+             />
       </div> 
     )
   }

calc-frontend/src/components/Custom/IntCustomGraph.tsx

@@ -2,6 +2,7 @@
 
 import { useLayoutEffect , useEffect, useState} from "react";
 import axios from "axios";
+import { Blocks } from "react-loader-spinner";
 
 function IntCustomGraph({func, lowerBound, upperBound, handleSave, onAIResponseComplete}) {
 
@@ -90,8 +91,10 @@ function IntCustomGraph({func, lowerBound, upperBound, handleSave, onAIResponseC
   if(!ready){
     return(       
       <div className="pad-sm loading" style={{fontSize:'1.25rem'}}>
-        Loading...<br/>
-        Complex functions may take longer
+        <Blocks height="80" width="80" color="#4fa94d" ariaLabel="loading" 
+               wrapperStyle={{marginLeft:'auto', marginRight:'auto'}}
+               wrapperClass="blocks-wrapper loading" visible={true}
+             />
       </div> 
     )
   }

calc-frontend/src/components/ui/FunctionCard.tsx

@@ -1,52 +1,71 @@
 import axios from "axios";
 import { useNavigate } from "react-router";
+import { toast } from "sonner";
 
 interface FunctionCardProps {
-    topic: string;
-    equation: string;
-    lowerBound: number;
-    upperBound: number;
-    id: string;
-    onDelete: (id: string) => void;
+  topic: string;
+  equation: string;
+  lowerBound: number;
+  upperBound: number;
+  id: string;
+  onDelete: (id: string) => void;
 }
 
-function FunctionCard({topic, equation, lowerBound, upperBound, id, onDelete}: FunctionCardProps) {
+function FunctionCard({
+  topic,
+  equation,
+  lowerBound,
+  upperBound,
+  id,
+  onDelete,
+}: FunctionCardProps) {
+  const navigate = useNavigate();
 
-    const navigate = useNavigate()
+  const handleView = async () => {
+    navigate(`/${topic}s/custom`, {
+      state: { func: equation, bounds: [lowerBound, upperBound] },
+    });
+  };
 
-    const handleView = async () => {
-
-      navigate(`/${topic}s/custom`, {state: {func: equation, bounds: [lowerBound, upperBound]}} )
-    }
-
-    const handleDelete = async () => {
+  const handleDelete = async () => {
+    const serverUrl =
+      import.meta.env.VITE_SERVER_URL || "http://localhost:3000";
 
-      const serverUrl = import.meta.env.VITE_SERVER_URL || 'http://localhost:3000'
-
-        try {
-            await axios.delete(`${serverUrl}/func/delete/${id}`);
-            onDelete(id);
-        } catch (error) {
-            console.error(`Delete function error: ${error}`)
-        }
+    try {
+      await axios.delete(`${serverUrl}/func/delete/${id}`);
+      onDelete(id);
+    } catch (error) {
+      toast.error("Something went wrong deleting the function");
+      console.error(`Delete function error: ${error}`);
     }
+  };
 
-    return (
+  return (
     <div className="bg-[#f6f6f7] p-4 pt-2 rounded-2xl shadow-md text-center w-[240px]">
-        <p className="text-xl mb-2">{equation}</p>
-        <img src={""} alt={topic + " graph"}className="w-full aspect-2/1 bg-green-300 rounded-md mb-4" />
-        <div className="flex justify-between">
-            <button onClick={handleView} className="bg-blue-500 text-[#f6f6f7] px-4 py-2 
-              rounded-md cursor-pointer hover:bg-blue-700 tracking-wide font-semibold">
-                View
-                </button>
-            <button onClick={handleDelete} className="bg-red-500 text-[#f6f6f7] px-4 py-2 
-              rounded-md cursor-pointer hover:bg-red-700 tracking-wide font-semibold">
-                Delete
-            </button>
-        </div>
+      <p className="text-xl mb-2">{equation}</p>
+      <img
+        src={""}
+        alt={topic + " graph"}
+        className="w-full aspect-2/1 bg-green-300 rounded-md mb-4"
+      />
+      <div className="flex justify-between">
+        <button
+          onClick={handleView}
+          className="bg-blue-500 text-[#f6f6f7] px-4 py-2 
+              rounded-md cursor-pointer hover:bg-blue-700 tracking-wide font-semibold"
+        >
+          View
+        </button>
+        <button
+          onClick={handleDelete}
+          className="bg-red-500 text-[#f6f6f7] px-4 py-2 
+              rounded-md cursor-pointer hover:bg-red-700 tracking-wide font-semibold"
+        >
+          Delete
+        </button>
+      </div>
     </div>
-    )
+  );
 }
 
-export default FunctionCard;
+export default FunctionCard;

calc-frontend/src/components/ui/SignOutButton.tsx

@@ -1,3 +1,4 @@
+import { toast } from "sonner";
 import { authClient } from "../../lib/auth-client"
 
 function SignOutButton()
@@ -7,7 +8,8 @@ function SignOutButton()
             await authClient.signOut();
 
         } catch (error) {
-            console.error("Error signing out: ", error);
+            toast.error("Something went wrong signing out");
+            console.error("Error signing out:", error);
         }   
     }
 

calc-frontend/src/components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

calc-frontend/src/pages/CustomDerivative.tsx

@@ -7,6 +7,7 @@ import { Session } from "../lib/auth-client.ts";
 import axios from "axios";
 import SaveFunctionButton from "../components/ui/SaveFunctionButton.tsx";
 import AskAIButtonDerivative from "@/components/ui/AskAIButtonDerivative.tsx";
+import { toast } from "sonner";
 
 function CustomDeriv() {
 
@@ -80,8 +81,10 @@ function CustomDeriv() {
           Authorization: `Bearer ${session.session.token}`
         }
       })
+      toast.success("Function Saved Successfully!");
     } 
     catch (error) {
+      toast.error("Function Failed to Save");
       console.error("save function error: ",error);
     }
     finally{

calc-frontend/src/pages/CustomIntegral.tsx

@@ -8,6 +8,8 @@ import axios from "axios";
 import SaveFunctionButton from "../components/ui/SaveFunctionButton.tsx";
 import AskAIButton from "../components/ui/AskAIButtonIntegral.tsx";
 
+import { toast } from "sonner";
+
 function CustomInt() {
 
   const location = useLocation()
@@ -80,9 +82,11 @@ function CustomInt() {
             Authorization: `Bearer ${session.session.token}`
           }
         })
-
+
+        toast.success("Function Saved Successfully!");
       } 
       catch (error) {
+        toast.error("Function Failed to Save");
         console.error("save function error: ",error);
       }
       finally{