feat: added toasts instead of alerts (#1740)

Author: techcontributor

components/setup/profile-step.tsx

@@ -12,6 +12,7 @@ import {
 } from "@tabler/icons-react"
 import { FC, useCallback, useState } from "react"
 import { LimitDisplay } from "../ui/limit-display"
+import { toast } from "sonner"
 
 interface ProfileStepProps {
   username: string
@@ -63,7 +64,7 @@ export const ProfileStep: FC<ProfileStepProps> = ({
       const usernameRegex = /^[a-zA-Z0-9_]+$/
       if (!usernameRegex.test(username)) {
         onUsernameAvailableChange(false)
-        alert(
+        toast.error(
           "Username must be letters, numbers, or underscores only - no other characters or spacing allowed."
         )
         return

components/utility/change-password.tsx

@@ -12,6 +12,7 @@ import {
   DialogTitle
 } from "../ui/dialog"
 import { Input } from "../ui/input"
+import { toast } from "sonner"
 
 interface ChangePasswordProps {}
 
@@ -22,11 +23,11 @@ export const ChangePassword: FC<ChangePasswordProps> = () => {
   const [confirmPassword, setConfirmPassword] = useState("")
 
   const handleResetPassword = async () => {
-    if (!newPassword) return alert("Please enter your new password.")
+    if (!newPassword) return toast.info("Please enter your new password.")
 
     await supabase.auth.updateUser({ password: newPassword })
 
-    alert("Password changed successfully.")
+    toast.success("Password changed successfully.")
 
     return router.push("/login")
   }

components/utility/profile-settings.tsx

@@ -258,7 +258,7 @@ export const ProfileSettings: FC<ProfileSettingsProps> = ({}) => {
       const usernameRegex = /^[a-zA-Z0-9_]+$/
       if (!usernameRegex.test(username)) {
         setUsernameAvailable(false)
-        alert(
+        toast.error(
           "Username must be letters, numbers, or underscores only - no other characters or spacing allowed."
         )
         return

components/workspace/assign-workspaces.tsx

@@ -9,6 +9,7 @@ import {
   DropdownMenuTrigger
 } from "../ui/dropdown-menu"
 import { Input } from "../ui/input"
+import { toast } from "sonner"
 
 interface AssignWorkspaces {
   selectedWorkspaces: Tables<"workspaces">[]
@@ -135,7 +136,7 @@ const WorkspaceItem: FC<WorkspaceItemProps> = ({
 }) => {
   const handleSelect = () => {
     if (selected && selectedWorkspaces.length === 1) {
-      alert("You must select at least one workspace")
+      toast.info("You must select at least one workspace")
       return
     }