feat: add toast notifications for error handling and success messages across various components

.gitignore

@@ -54,3 +54,5 @@ htmlcov/
 .coverage
 coverage/
 
+backend/celerybeat-schedule
+backend/data/dociva.db

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import { lazy, Suspense, useEffect } from 'react';
 import { Routes, Route, useLocation } from 'react-router-dom';
+import { Toaster } from 'sonner';
 import Header from '@/components/layout/Header';
 import Footer from '@/components/layout/Footer';
 import CookieConsent from '@/components/layout/CookieConsent';
@@ -86,6 +87,7 @@ export default function App() {
   useDirection();
   const location = useLocation();
   const refreshUser = useAuthStore((state) => state.refreshUser);
+  const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
 
   useEffect(() => {
     initAnalytics();
@@ -196,6 +198,16 @@ export default function App() {
       <Footer />
       <SiteAssistant />
       <CookieConsent />
+      <Toaster
+        position={isRTL ? 'top-left' : 'top-right'}
+        dir={isRTL ? 'rtl' : 'ltr'}
+        richColors
+        closeButton
+        duration={4000}
+        toastOptions={{
+          className: 'text-sm',
+        }}
+      />
     </div>
   );
 }

frontend/src/components/shared/FileUploader.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback } from 'react';
 import { useDropzone, type Accept, type FileRejection } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { Upload, File, X } from 'lucide-react';
+import { toast } from 'sonner';
 import { formatFileSize } from '@/utils/textTools';
 
 interface FileUploaderProps {
@@ -53,7 +54,9 @@ export default function FileUploader({
     (rejectedFiles: FileRejection[]) => {
       const code = rejectedFiles[0]?.errors[0]?.code;
       if (code === 'file-too-large') {
-        setSizeError(t('errors.fileTooLarge', { size: maxSizeMB }));
+        const msg = t('common.errors.fileTooLarge', { size: maxSizeMB });
+        setSizeError(msg);
+        toast.error(msg);
       }
     },
     [maxSizeMB, t]

frontend/src/hooks/useFileUpload.ts

@@ -1,4 +1,6 @@
 import { useState, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
 import { uploadFile, type TaskResponse } from '@/services/api';
 import { trackEvent } from '@/services/analytics';
 
@@ -33,6 +35,7 @@ export function useFileUpload({
   const [error, setError] = useState<string | null>(null);
   const extraDataRef = useRef(extraData);
   extraDataRef.current = extraData;
+  const { t } = useTranslation();
 
   const selectFile = useCallback(
     (selectedFile: File) => {
@@ -45,7 +48,9 @@ export function useFileUpload({
       // Client-side size check
       const maxBytes = maxSizeMB * 1024 * 1024;
       if (selectedFile.size > maxBytes) {
-        setError(`File too large. Maximum size is ${maxSizeMB}MB.`);
+        const msg = t('common.errors.fileTooLarge', { size: maxSizeMB });
+        setError(msg);
+        toast.error(msg);
         trackEvent('upload_rejected_client', {
           endpoint,
           reason: 'size_limit',
@@ -60,7 +65,9 @@ export function useFileUpload({
       if (acceptedTypes && acceptedTypes.length > 0) {
         const selectedExt = selectedFile.name.split('.').pop()?.toLowerCase();
         if (!selectedExt || !acceptedTypes.includes(selectedExt)) {
-          setError(`Invalid file type. Accepted: ${acceptedTypes.join(', ')}`);
+          const msg = t('common.errors.invalidFileType', { types: acceptedTypes.join(', ') });
+          setError(msg);
+          toast.error(msg);
           trackEvent('upload_rejected_client', {
             endpoint,
             reason: 'invalid_type',
@@ -82,7 +89,9 @@ export function useFileUpload({
 
   const startUpload = useCallback(async (): Promise<string | null> => {
     if (!file) {
-      setError('No file selected.');
+      const msg = t('common.errors.noFileSelected');
+      setError(msg);
+      toast.error(msg);
       return null;
     }
 
@@ -104,8 +113,9 @@ export function useFileUpload({
       trackEvent('upload_accepted', { endpoint });
       return response.task_id;
     } catch (err) {
-      const message = err instanceof Error ? err.message : 'Upload failed.';
+      const message = err instanceof Error ? err.message : t('common.errors.uploadFailed');
       setError(message);
+      toast.error(message);
       setIsUploading(false);
       trackEvent('upload_failed', { endpoint });
       return null;

frontend/src/hooks/useTaskPolling.ts

@@ -1,4 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
+import { toast } from 'sonner';
+import i18n from '@/i18n';
 import { getTaskStatus, type TaskStatus, type TaskResult } from '@/services/api';
 import { trackEvent } from '@/services/analytics';
 
@@ -55,25 +57,31 @@ export function useTaskPolling({
 
           if (taskResult?.status === 'completed') {
             setResult(taskResult);
+            toast.success(i18n.t('result.conversionComplete'), {
+              description: i18n.t('result.downloadReady'),
+            });
             trackEvent('task_completed', { task_id: taskId });
             onComplete?.(taskResult);
           } else {
-            const errMsg = taskResult?.error || 'Processing failed.';
+            const errMsg = taskResult?.error || i18n.t('common.errors.processingFailed');
             setError(errMsg);
+            toast.error(errMsg);
             trackEvent('task_failed', { task_id: taskId, reason: 'result_failed' });
             onError?.(errMsg);
           }
         } else if (taskStatus.state === 'FAILURE') {
           stopPolling();
-          const errMsg = taskStatus.error || 'Task failed.';
+          const errMsg = taskStatus.error || i18n.t('common.errors.processingFailed');
           setError(errMsg);
+          toast.error(errMsg);
           trackEvent('task_failed', { task_id: taskId, reason: 'state_failure' });
           onError?.(errMsg);
         }
       } catch (err) {
         stopPolling();
-        const errMsg = err instanceof Error ? err.message : 'Polling failed.';
+        const errMsg = err instanceof Error ? err.message : i18n.t('common.errors.networkError');
         setError(errMsg);
+        toast.error(errMsg);
         trackEvent('task_failed', { task_id: taskId, reason: 'polling_error' });
         onError?.(errMsg);
       }

frontend/src/pages/AccountPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState, type FormEvent } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
 import {
   AlertTriangle,
   BarChart3,
@@ -222,7 +223,9 @@ export default function AccountPage() {
     setSubmitError(null);
 
     if (mode === 'register' && password !== confirmPassword) {
-      setSubmitError(t('account.passwordMismatch'));
+      const msg = t('account.passwordMismatch');
+      setSubmitError(msg);
+      toast.error(msg);
       return;
     }
 
@@ -236,7 +239,9 @@ export default function AccountPage() {
       setPassword('');
       setConfirmPassword('');
     } catch (error) {
-      setSubmitError(error instanceof Error ? error.message : t('account.loadFailed'));
+      const msg = error instanceof Error ? error.message : t('account.loadFailed');
+      setSubmitError(msg);
+      toast.error(msg);
     }
   };
 
@@ -248,7 +253,9 @@ export default function AccountPage() {
       setUsage(null);
       setApiKeys([]);
     } catch (error) {
-      setSubmitError(error instanceof Error ? error.message : t('account.loadFailed'));
+      const msg = error instanceof Error ? error.message : t('account.loadFailed');
+      setSubmitError(msg);
+      toast.error(msg);
     }
   };
 
@@ -264,7 +271,9 @@ export default function AccountPage() {
       setRevealedKey(key.raw_key ?? null);
       setNewKeyName('');
     } catch (error) {
-      setNewKeyError(error instanceof Error ? error.message : t('account.loadFailed'));
+      const msg = error instanceof Error ? error.message : t('account.loadFailed');
+      setNewKeyError(msg);
+      toast.error(msg);
     } finally {
       setNewKeyCreating(false);
     }

frontend/src/pages/ContactPage.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet-async';
 import { Mail, Send, CheckCircle, AlertCircle, Loader2 } from 'lucide-react';
 import { isAxiosError } from 'axios';
+import { toast } from 'sonner';
 import SEOHead from '@/components/seo/SEOHead';
 import { generateWebPage, getSiteOrigin } from '@/utils/seo';
 import { getApiClient } from '@/services/api';
@@ -40,14 +41,18 @@ export default function ContactPage() {
         message: data.get('message'),
       });
       setSubmitted(true);
+      toast.success(t('pages.contact.successMessage'));
     } catch (err: unknown) {
+      let errMsg = '';
       if (isAxiosError(err) && err.response?.data?.error) {
-        setError(err.response.data.error);
+        errMsg = err.response.data.error;
       } else if (err instanceof Error) {
-        setError(err.message);
+        errMsg = err.message;
       } else {
-        setError(String(err));
+        errMsg = String(err);
       }
+      setError(errMsg);
+      toast.error(errMsg);
     } finally {
       setLoading(false);
     }

frontend/src/pages/ForgotPasswordPage.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet-async';
 import { Mail } from 'lucide-react';
+import { toast } from 'sonner';
 import { getApiClient } from '../services/api';
 
 const api = getApiClient();
@@ -21,8 +22,11 @@ export default function ForgotPasswordPage() {
     try {
       await api.post('/auth/forgot-password', { email });
       setSubmitted(true);
+      toast.success(t('auth.forgotPassword.sent'));
     } catch {
-      setError(t('auth.forgotPassword.error'));
+      const errMsg = t('auth.forgotPassword.error');
+      setError(errMsg);
+      toast.error(errMsg);
     } finally {
       setLoading(false);
     }

frontend/src/pages/ResetPasswordPage.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import { KeyRound } from 'lucide-react';
+import { toast } from 'sonner';
 import { getApiClient } from '../services/api';
 
 const api = getApiClient();
@@ -24,11 +25,15 @@ export default function ResetPasswordPage() {
     setError(null);
 
     if (password.length < 8) {
-      setError(t('auth.resetPassword.tooShort'));
+      const msg = t('auth.resetPassword.tooShort');
+      setError(msg);
+      toast.error(msg);
       return;
     }
     if (password !== confirm) {
-      setError(t('account.passwordMismatch'));
+      const msg = t('account.passwordMismatch');
+      setError(msg);
+      toast.error(msg);
       return;
     }
 
@@ -36,9 +41,12 @@ export default function ResetPasswordPage() {
     try {
       await api.post('/auth/reset-password', { token, password });
       setSuccess(true);
+      toast.success(t('auth.resetPassword.success'));
       setTimeout(() => navigate('/account'), 3000);
     } catch (err) {
-      setError(err instanceof Error ? err.message : t('auth.resetPassword.error'));
+      const errMsg = err instanceof Error ? err.message : t('auth.resetPassword.error');
+      setError(errMsg);
+      toast.error(errMsg);
     } finally {
       setLoading(false);
     }