feat: replace react-hot-toast with sonner for themed toasts

- Add sonner toast library with custom themed Toaster component
- Update all 15 files to use new toast import from sonner
- Remove position overrides to ensure consistent bottom-right placement
- Remove react-hot-toast dependency
- Fix TypeScript errors in UpdateContext simulation helpers

Author: kasvith

package.json

@@ -75,8 +75,8 @@
     "lucide-react": "^0.469.0",
     "react-day-picker": "^9.4.4",
     "react-hook-form": "^7.54.2",
-    "react-hot-toast": "^2.4.1",
     "react-router-dom": "^7.1.1",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^2.6.0",
     "zod": "^3.24.1"
   },

pnpm-lock.yaml

@@ -14,7 +14,7 @@ import { Input } from '../ui/input'
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
 
 import { forwardRef, useImperativeHandle } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from '@renderer/components/ui/sonner'
 import { unwrapResult } from '@renderer/lib/utils'
 import { DoctorModel } from '@shared/models/DoctorModel'
 import { User, Briefcase, Award, Stethoscope } from 'lucide-react'
@@ -57,9 +57,7 @@ export const AddOrEditDoctor = forwardRef<AddOrEditDoctorRef, AddOrEditDoctorPro
       try {
         const result = await unwrapResult(window.api.invoke('createNewDoctor', data))
 
-        toast.success('Doctor added successfully', {
-          position: 'bottom-center'
-        })
+        toast.success('Doctor added successfully')
 
         if (result) {
           onUpdated?.(new DoctorModel(result))
@@ -76,9 +74,7 @@ export const AddOrEditDoctor = forwardRef<AddOrEditDoctorRef, AddOrEditDoctorPro
 
         const result = await unwrapResult(window.api.invoke('updateDoctorById', doctor.id, data))
 
-        toast.success('Doctor updated successfully', {
-          position: 'bottom-center'
-        })
+        toast.success('Doctor updated successfully')
 
         if (result) {
           onUpdated?.(new DoctorModel(result))

src/renderer/src/components/doctor/AddOrEditDoctor.tsx

@@ -21,7 +21,7 @@ import {
   FormLabel,
   FormMessage
 } from '../ui/form'
-import toast from 'react-hot-toast'
+import { toast } from '@renderer/components/ui/sonner'
 import { RichTextEditor } from '../common/RichTextEditor'
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
 import { cn } from '@renderer/lib/utils'

src/renderer/src/components/patient/NewPatientForm.tsx

@@ -14,7 +14,7 @@ import {
   History,
   FileArchive
 } from 'lucide-react'
-import toast from 'react-hot-toast'
+import { toast } from '@renderer/components/ui/sonner'
 import { Button } from '@renderer/components/ui/button'
 import { Input } from '@renderer/components/ui/input'
 import { Card, CardContent, CardHeader, CardTitle } from '@renderer/components/ui/card'

src/renderer/src/components/settings/BackupSettings.tsx

@@ -18,7 +18,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useSettings } from '@renderer/contexts/SettingsContext'
 import { queries } from '@renderer/lib/queries'
 import { useEffect } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from '@renderer/components/ui/sonner'
 
 const formSchema = z.object({
   hospital: z.string(),

src/renderer/src/components/settings/GeneralSettings.tsx

@@ -3,7 +3,7 @@ import { useForm, Controller } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from '@renderer/components/ui/sonner'
 import {
   Type,
   Layers,

src/renderer/src/components/settings/TemplateForm.tsx

@@ -2,7 +2,7 @@ import { useState, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { Plus, Search, Pencil, Trash2, Globe, User, FileText, Layers } from 'lucide-react'
-import toast from 'react-hot-toast'
+import { toast } from '@renderer/components/ui/sonner'
 import { Button } from '@renderer/components/ui/button'
 import { Input } from '@renderer/components/ui/input'
 import { Card, CardContent, CardHeader, CardTitle } from '@renderer/components/ui/card'

src/renderer/src/components/settings/TemplatesSettings.tsx

@@ -14,7 +14,7 @@ import { RichTextEditor } from '../common/RichTextEditor'
 import { Button } from '../ui/button'
 import { useState } from 'react'
 import { unwrapResult } from '@renderer/lib/utils'
-import toast from 'react-hot-toast'
+import { toast } from '@renderer/components/ui/sonner'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { queries } from '@renderer/lib/queries'
 import { ChevronRight, Save } from 'lucide-react'

src/renderer/src/components/surgery/AddOrEditFollowup.tsx

@@ -16,7 +16,7 @@ import { RichTextEditor } from '../common/RichTextEditor'
 
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react'
 import { DoctorAutoComplete } from '../doctor/DoctorAutoComplete'
-import toast from 'react-hot-toast'
+import { toast } from '@renderer/components/ui/sonner'
 import { SurgeryModel } from '../../../../shared/models/SurgeryModel'
 import { unwrapResult } from '@renderer/lib/utils'
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
@@ -105,9 +105,7 @@ export const AddOrEditSurgery = forwardRef<AddOrEditSurgeryRef, AddOrEditSurgery
         )
         await unwrapResult(window.api.invoke('updateSurgeryDoctorsDoneBy', result.id, doneBy))
 
-        toast.success('Surgery created successfully', {
-          position: 'bottom-center'
-        })
+        toast.success('Surgery created successfully')
 
         if (onUpdated) {
           onUpdated(new SurgeryModel(result))
@@ -140,9 +138,7 @@ export const AddOrEditSurgery = forwardRef<AddOrEditSurgeryRef, AddOrEditSurgery
         )
         await unwrapResult(window.api.invoke('updateSurgeryDoctorsDoneBy', surgery.id, doneBy))
 
-        toast.success('Surgery updated successfully', {
-          position: 'bottom-center'
-        })
+        toast.success('Surgery updated successfully')
 
         if (onUpdated) {
           onUpdated(new SurgeryModel(result))