feat: add toast

app/routes/create-form.tsx

@@ -8,6 +8,7 @@ import { FormInput } from "@/components/shared/form-input"
 import { FormButton } from "@/components/shared/form-button"
 import { QuestionEditor } from "@/components/forms/question-editor"
 import { useAuth } from "@/app/context/auth-context"
+import { useToast } from "@/app/context/toast-context"
 import { createForm } from "@/lib/api"
 import type { CreateQuestion } from "@/lib/types"
 
@@ -15,6 +16,7 @@ const TYPES_WITH_OPTIONS = ["multiple_choice", "checkbox", "dropdown"]
 
 export default function CreateFormPage() {
   const { user, loading: authLoading } = useAuth()
+  const { success, error: showError } = useToast()
   const navigate = useNavigate()
 
   const [title, setTitle] = useState("")
@@ -65,9 +67,12 @@ export default function CreateFormPage() {
         description: description.trim(),
         questions,
       })
+      success("Form created successfully!")
       navigate(`/form/${result.id}`)
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to create form.")
+      const msg = err instanceof Error ? err.message : "Failed to create form."
+      showError(msg)
+      setError(msg)
     } finally {
       setSubmitting(false)
     }

app/routes/edit-form.tsx

@@ -7,6 +7,7 @@ import { FormInput } from "@/components/shared/form-input"
 import { FormButton } from "@/components/shared/form-button"
 import { QuestionEditor } from "@/components/forms/question-editor"
 import { useAuth } from "@/app/context/auth-context"
+import { useToast } from "@/app/context/toast-context"
 import { getFormById, updateForm } from "@/lib/api"
 import type { CreateQuestion } from "@/lib/types"
 
@@ -15,6 +16,7 @@ const TYPES_WITH_OPTIONS = ["multiple_choice", "checkbox", "dropdown"]
 export default function EditFormPage() {
   const { id } = useParams()
   const { user, loading: authLoading } = useAuth()
+  const { success, error: showError } = useToast()
   const navigate = useNavigate()
 
   const [title, setTitle] = useState("")
@@ -101,9 +103,12 @@ export default function EditFormPage() {
         description: description.trim(),
         questions,
       })
+      success("Form updated successfully!")
       navigate(`/form/${id}`)
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to update form.")
+      const msg = err instanceof Error ? err.message : "Failed to update form."
+      showError(msg)
+      setError(msg)
     } finally {
       setSubmitting(false)
     }

app/routes/form.tsx

@@ -17,12 +17,14 @@ import { FormButton } from "@/components/shared/form-button"
 import { QuestionPreview } from "@/components/forms/question-preview"
 import { getFormById, deleteForm } from "@/lib/api"
 import { useAuth } from "@/app/context/auth-context"
+import { useToast } from "@/app/context/toast-context"
 import type { FormDetail } from "@/lib/types"
 
 export default function FormPreviewPage() {
   const { id } = useParams()
   const navigate = useNavigate()
   const { user } = useAuth()
+  const { success, error: showError } = useToast()
   const [form, setForm] = useState<FormDetail | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -57,9 +59,10 @@ export default function FormPreviewPage() {
     setDeleting(true)
     try {
       await deleteForm(id)
+      success("Form deleted successfully.")
       navigate("/forms")
     } catch {
-      setError("Failed to delete form.")
+      showError("Failed to delete form.")
       setShowDeleteConfirm(false)
     } finally {
       setDeleting(false)

app/routes/login.tsx

@@ -3,12 +3,14 @@ import { Link, useNavigate } from "react-router"
 import { FormInput } from "@/components/shared/form-input"
 import { FormButton } from "@/components/shared/form-button"
 import { useAuth } from "@/app/context/auth-context"
+import { useToast } from "@/app/context/toast-context"
 import { setTokens } from "@/lib/auth"
 import { login } from "@/lib/api"
 
 export default function LoginPage() {
   const navigate = useNavigate()
   const { user, loading: authLoading, refreshUser } = useAuth()
+  const { success, error: showError } = useToast()
 
   useEffect(() => {
     if (!authLoading && user) {
@@ -46,9 +48,12 @@ export default function LoginPage() {
       const data = await login(form.email, form.password)
       setTokens(data.access_token, data.refresh_token, rememberMe)
       refreshUser()
+      success("Welcome back!")
       navigate("/forms")
     } catch (err) {
-      setErrors({ general: err instanceof Error ? err.message : "Something went wrong. Please try again." })
+      const msg = err instanceof Error ? err.message : "Something went wrong. Please try again."
+      showError(msg)
+      setErrors({ general: msg })
     } finally {
       setLoading(false)
     }

app/routes/register.tsx

@@ -3,11 +3,13 @@ import { Link, useNavigate } from "react-router"
 import { FormInput } from "@/components/shared/form-input"
 import { FormButton } from "@/components/shared/form-button"
 import { useAuth } from "@/app/context/auth-context"
+import { useToast } from "@/app/context/toast-context"
 import { register } from "@/lib/api"
 
 export default function RegisterPage() {
     const navigate = useNavigate()
     const { user, loading: authLoading } = useAuth()
+    const { success, error: showError } = useToast()
 
     useEffect(() => {
         if (!authLoading && user) {
@@ -50,9 +52,12 @@ export default function RegisterPage() {
 
         try {
             await register(form.email, form.password)
+            success("Account created successfully! Please sign in.")
             navigate("/login")
         } catch (err) {
-            setErrors({ email: err instanceof Error ? err.message : "Something went wrong. Please try again." })
+            const msg = err instanceof Error ? err.message : "Something went wrong. Please try again."
+            showError(msg)
+            setErrors({ email: msg })
         }
     }
 

app/routes/submit-form.tsx

@@ -12,6 +12,7 @@ import {
 import { Navbar } from "@/components/shared/navbar"
 import { Footer } from "@/components/shared/footer"
 import { FormButton } from "@/components/shared/form-button"
+import { useToast } from "@/app/context/toast-context"
 import { getFormById, submitFormResponse } from "@/lib/api"
 import type { FormDetail, Question } from "@/lib/types"
 
@@ -24,6 +25,7 @@ export default function SubmitFormPage() {
   const [submitting, setSubmitting] = useState(false)
   const [submitted, setSubmitted] = useState(false)
   const [validationErrors, setValidationErrors] = useState<Record<string, string>>({})
+  const { success, error: showError } = useToast()
 
   useEffect(() => {
     if (!id) return
@@ -98,9 +100,12 @@ export default function SubmitFormPage() {
             answer: answers[q.id].trim(),
           })),
       })
+      success("Response submitted successfully!")
       setSubmitted(true)
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to submit response")
+      const msg = err instanceof Error ? err.message : "Failed to submit response"
+      showError(msg)
+      setError(msg)
     } finally {
       setSubmitting(false)
     }