spam list + socket events

.env

@@ -1,6 +1,6 @@
 VITE_TOKEN_NAME = 'dmail_token'
 VITE_REFRESH_TOKEN_NAME = 'dmail_refresh_token'
 VITE_DANAK_BASE_URL ='https://api.danakcorp.com'
-# VITE_BASE_URL = 'http://192.168.1.113:4000'
+# VITE_BASE_URL = 'http://192.168.1.118:4000'
 VITE_BASE_URL = 'https://dmail-api.danakcorp.com'
 VITE_SERVICE_ID = 'e51afdc3-ea0b-49cf-8f49-2a6f131b024e'

package.json

@@ -42,6 +42,7 @@
     "react-quill-new": "^3.4.6",
     "react-router-dom": "^7.5.2",
     "react-spinners": "^0.17.0",
+    "socket.io-client": "^4.8.1",
     "swiper": "^11.2.6",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.4",

pnpm-lock.yaml

@@ -101,6 +101,9 @@ importers:
       react-spinners:
         specifier: ^0.17.0
         version: 0.17.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      socket.io-client:
+        specifier: ^4.8.1
+        version: 4.8.1
       swiper:
         specifier: ^11.2.6
         version: 11.2.8
@@ -887,6 +890,9 @@ packages:
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
+  '@socket.io/component-emitter@3.1.2':
+    resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
+
   '@standard-schema/utils@0.3.0':
     resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
 
@@ -1424,6 +1430,15 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
+  debug@4.3.7:
+    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   debug@4.4.1:
     resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
     engines: {node: '>=6.0'}
@@ -1484,6 +1499,13 @@ packages:
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
+  engine.io-client@6.6.3:
+    resolution: {integrity: sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==}
+
+  engine.io-parser@5.2.3:
+    resolution: {integrity: sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==}
+    engines: {node: '>=10.0.0'}
+
   enhanced-resolve@5.18.1:
     resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
     engines: {node: '>=10.13.0'}
@@ -2745,6 +2767,14 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
+  socket.io-client@4.8.1:
+    resolution: {integrity: sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==}
+    engines: {node: '>=10.0.0'}
+
+  socket.io-parser@4.2.4:
+    resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==}
+    engines: {node: '>=10.0.0'}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -3094,6 +3124,22 @@ packages:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
 
+  ws@8.17.1:
+    resolution: {integrity: sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  xmlhttprequest-ssl@2.1.2:
+    resolution: {integrity: sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==}
+    engines: {node: '>=0.4.0'}
+
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -3874,6 +3920,8 @@ snapshots:
 
   '@shikijs/vscode-textmate@10.0.2': {}
 
+  '@socket.io/component-emitter@3.1.2': {}
+
   '@standard-schema/utils@0.3.0': {}
 
   '@stoplight/better-ajv-errors@1.0.3(ajv@8.17.1)':
@@ -4521,6 +4569,10 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
+  debug@4.3.7:
+    dependencies:
+      ms: 2.1.3
+
   debug@4.4.1:
     dependencies:
       ms: 2.1.3
@@ -4576,6 +4628,20 @@ snapshots:
 
   emoji-regex@8.0.0: {}
 
+  engine.io-client@6.6.3:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.3.7
+      engine.io-parser: 5.2.3
+      ws: 8.17.1
+      xmlhttprequest-ssl: 2.1.2
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  engine.io-parser@5.2.3: {}
+
   enhanced-resolve@5.18.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -5937,6 +6003,24 @@ snapshots:
 
   slash@3.0.0: {}
 
+  socket.io-client@4.8.1:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.3.7
+      engine.io-client: 6.6.3
+      socket.io-parser: 4.2.4
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  socket.io-parser@4.2.4:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.3.7
+    transitivePeerDependencies:
+      - supports-color
+
   source-map-js@1.2.1: {}
 
   stats-gl@2.4.2(@types/three@0.177.0)(three@0.177.0):
@@ -6295,6 +6379,10 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  ws@8.17.1: {}
+
+  xmlhttprequest-ssl@2.1.2: {}
+
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}

src/App.tsx

@@ -16,6 +16,7 @@ import { getRefreshToken, getToken, removeRefreshToken, removeToken, setRefreshT
 import { refreshToken } from './pages/auth/service/AuthService';
 import { Paths } from './utils/Paths';
 import Login from './pages/auth/Login';
+import { EmailWebSocketProvider } from './contexts/EmailWebSocketContext';
 
 declare global {
   interface Window {
@@ -107,11 +108,14 @@ const queryClient = new QueryClient({
 const App: FC = () => {
 
   const [isLogin, setIsLogin] = useState<'checking' | 'isLogin' | 'isNotLogin'>('checking')
+  const [userToken, setUserToken] = useState<string>('')
+
   useEffect(() => {
     const checkLogin = async () => {
       const token = await getToken();
       if (token) {
         setIsLogin('isLogin')
+        setUserToken(token)
       } else {
         setIsLogin('isNotLogin')
         if (window.location.href.split('auth').length === 1) {
@@ -126,10 +130,13 @@ const App: FC = () => {
     <BrowserRouter>
       <I18nextProvider i18n={i18next}>
         <QueryClientProvider client={queryClient}>
-
+          {isLogin === 'isLogin' && userToken ? (
-          {
+            <EmailWebSocketProvider token={userToken}>
-            isLogin === 'isLogin' ? <Main /> : isLogin === 'isNotLogin' ? <Login /> : null
+              <Main />
-          }
+            </EmailWebSocketProvider>
+          ) : isLogin === 'isNotLogin' ? (
+            <Login />
+          ) : null}
           <NewMessage />
           <ToastContainer />
         </QueryClientProvider>

src/components/EmailNotifications.tsx

@@ -0,0 +1,159 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { useEmailWebSocket } from '@/hooks/useEmailWebSocket';
+import { useEmailEvents, EmailPayload, UnreadCountPayload } from '@/hooks/useEmailEvents';
+import { useNotificationSound } from '@/hooks/useNotificationSound';
+import { Notification as NotificationIcon, VolumeHigh } from 'iconsax-react';
+
+interface EmailNotificationsProps {
+    userToken: string;
+    onEmailClick?: (email: EmailPayload) => void;
+}
+
+export const EmailNotifications: React.FC<EmailNotificationsProps> = ({
+    userToken,
+    onEmailClick
+}) => {
+    const [notifications, setNotifications] = useState<EmailPayload[]>([]);
+    const [unreadCount, setUnreadCount] = useState(0);
+    const [isVisible, setIsVisible] = useState(false);
+
+    const { socket, isConnected } = useEmailWebSocket({
+        token: userToken,
+        onConnect: () => console.log('نوتیفیکیشن‌های ایمیل متصل شد'),
+        onError: (error) => console.error('خطای WebSocket:', error),
+    });
+
+    // Sound settings state
+    const [soundEnabled, setSoundEnabled] = useState(true);
+    const [soundVolume, setSoundVolume] = useState(0.7);
+
+    // Load sound settings from localStorage
+    useEffect(() => {
+        const savedEnabled = localStorage.getItem('notificationSoundEnabled');
+        const savedVolume = localStorage.getItem('notificationSoundVolume');
+
+        if (savedEnabled !== null) {
+            setSoundEnabled(savedEnabled === 'true');
+        }
+        if (savedVolume !== null) {
+            setSoundVolume(parseFloat(savedVolume));
+        }
+    }, []);
+
+    // Notification sound hook
+    const { playSound } = useNotificationSound({
+        enabled: soundEnabled,
+        volume: soundVolume,
+    });
+
+    const handleNewEmail = useCallback((email: EmailPayload) => {
+        console.log('📧 ایمیل جدید دریافت شد:', email);
+
+        // Add to notifications list
+        setNotifications(prev => [email, ...prev.slice(0, 9)]); // Keep only 10 latest
+
+        // Show browser notification if permission granted
+        if (Notification.permission === 'granted') {
+            new Notification(`📧 ایمیل جدید: ${email.subject}`, {
+                body: `از: ${email.from.name || email.from.address}\n${email.preview}`,
+                tag: `email-${email.messageId}`, // Prevent duplicates
+            });
+        }
+
+        // Play notification sound
+        playSound();
+    }, [playSound]);
+
+    const handleUnreadCountUpdate = useCallback((data: UnreadCountPayload) => {
+        setUnreadCount(data.count);
+    }, []);
+
+    const handleEmailRead = useCallback((data: { messageId: number }) => {
+        // Remove from notifications if it was there
+        setNotifications(prev =>
+            prev.filter(notification => notification.messageId !== data.messageId)
+        );
+    }, []);
+
+    useEmailEvents(socket, {
+        onNewEmail: handleNewEmail,
+        onUnreadCountUpdated: handleUnreadCountUpdate,
+        onEmailRead: handleEmailRead,
+    });
+
+    // Request notification permission on mount
+    React.useEffect(() => {
+        if (Notification.permission === 'default') {
+            Notification.requestPermission();
+        }
+    }, []);
+
+    return (
+        <div className="relative">
+            {/* Connection Status */}
+            <div className={`absolute -top-2 -right-2 w-3 h-3 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'
+                }`}></div>
+
+            {/* Test Sound Button */}
+            <button
+                onClick={() => {
+                    console.log("کلیک روی دکمه تست صدا");
+                    playSound();
+                }}
+                className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+                title="تست صدا"
+            >
+                <VolumeHigh size={20} color="black" />
+            </button>
+
+            {/* Notification Bell */}
+            <div
+                className="relative cursor-pointer p-2 rounded-full hover:bg-gray-100 transition-colors"
+                onClick={() => setIsVisible(!isVisible)}
+            >
+                <NotificationIcon size={24} color="black" />
+                {unreadCount > 0 && (
+                    <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full min-w-[18px] h-[18px] flex items-center justify-center font-bold">
+                        {unreadCount > 99 ? '99+' : unreadCount}
+                    </span>
+                )}
+            </div>
+
+            {/* Notifications Dropdown */}
+            {isVisible && (
+                <div className="absolute top-full left-0 w-80 max-h-96 bg-white border border-gray-200 rounded-lg shadow-lg z-50 overflow-hidden">
+                    <div className="p-3 bg-gray-50 border-b border-gray-200 flex justify-between items-center">
+                        <h3 className="font-semibold">📧 نوتیفیکیشن‌های ایمیل</h3>
+                        <span className="text-sm text-gray-600">{unreadCount} خوانده نشده</span>
+                    </div>
+
+                    <div className="max-h-72 overflow-y-auto">
+                        {notifications.length === 0 ? (
+                            <div className="p-4 text-center text-gray-500">ایمیل جدیدی وجود ندارد</div>
+                        ) : (
+                            notifications.map((email) => (
+                                <div
+                                    key={email.messageId}
+                                    className="p-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 transition-colors"
+                                    onClick={() => onEmailClick?.(email)}
+                                >
+                                    <div className="flex items-center justify-between mb-1">
+                                        <strong className="text-sm truncate">
+                                            {email.from.name || email.from.address}
+                                        </strong>
+                                        {email.hasAttachments && <span>📎</span>}
+                                    </div>
+                                    <div className="font-medium text-sm mb-1 truncate">{email.subject}</div>
+                                    <div className="text-xs text-gray-600 mb-1 line-clamp-2">{email.preview}</div>
+                                    <div className="text-xs text-gray-400">
+                                        {new Date(email.timestamp).toLocaleString('fa-IR')}
+                                    </div>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}; 

src/components/SoundSettings.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import { VolumeHigh, VolumeLow, VolumeSlash } from 'iconsax-react';
+import { useNotificationSound } from '@/hooks/useNotificationSound';
+
+interface SoundSettingsProps {
+    className?: string;
+}
+
+export const SoundSettings: React.FC<SoundSettingsProps> = ({ className = '' }) => {
+    const [isEnabled, setIsEnabled] = useState(true);
+    const [volume, setVolume] = useState(0.7);
+
+    const { playSound } = useNotificationSound({
+        enabled: isEnabled,
+        volume: volume,
+    });
+
+    // Load settings from localStorage on mount
+    useEffect(() => {
+        const savedEnabled = localStorage.getItem('notificationSoundEnabled');
+        const savedVolume = localStorage.getItem('notificationSoundVolume');
+
+        if (savedEnabled !== null) {
+            setIsEnabled(savedEnabled === 'true');
+        }
+        if (savedVolume !== null) {
+            setVolume(parseFloat(savedVolume));
+        }
+    }, []);
+
+    // Save settings to localStorage when changed
+    useEffect(() => {
+        localStorage.setItem('notificationSoundEnabled', isEnabled.toString());
+        localStorage.setItem('notificationSoundVolume', volume.toString());
+    }, [isEnabled, volume]);
+
+    const handleVolumeChange = (newVolume: number) => {
+        setVolume(newVolume);
+        if (isEnabled) {
+            // Test sound with new volume
+            setTimeout(() => playSound(), 100);
+        }
+    };
+
+    const toggleSound = () => {
+        const newEnabled = !isEnabled;
+        setIsEnabled(newEnabled);
+        if (newEnabled) {
+            // Test sound when enabling
+            setTimeout(() => playSound(), 100);
+        }
+    };
+
+    const getVolumeIcon = () => {
+        if (!isEnabled) return <VolumeSlash size={18} color="gray" />;
+        if (volume < 0.3) return <VolumeLow size={18} color="black" />;
+        return <VolumeHigh size={18} color="black" />;
+    };
+
+    return (
+        <div className={`flex items-center gap-3 ${className}`}>
+            {/* Sound Toggle */}
+            <button
+                onClick={toggleSound}
+                className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
+                title={isEnabled ? 'غیرفعال کردن صدا' : 'فعال کردن صدا'}
+            >
+                {getVolumeIcon()}
+            </button>
+
+            {/* Volume Slider */}
+            {isEnabled && (
+                <div className="flex items-center gap-2">
+                    <input
+                        type="range"
+                        min="0"
+                        max="1"
+                        step="0.1"
+                        value={volume}
+                        onChange={(e) => handleVolumeChange(parseFloat(e.target.value))}
+                        className="w-20 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
+                        title={`حجم صدا: ${Math.round(volume * 100)}%`}
+                    />
+                    <span className="text-xs text-gray-500 min-w-[30px]">
+                        {Math.round(volume * 100)}%
+                    </span>
+                </div>
+            )}
+        </div>
+    );
+}; 

src/config/func.ts

@@ -81,6 +81,30 @@ export const formatDate = (dateString: string) => {
   }).format(date);
 };
 
+export const detectTextDirection = (text: string): "ltr" | "rtl" => {
+  // حذف تگ‌های HTML برای تحلیل فقط متن
+  const plainText = text.replace(/<[^>]*>/g, " ").trim();
+
+  // اگر متن خالی است، از RTL استفاده کن
+  if (!plainText) return "rtl";
+
+  // الگوی کاراکترهای انگلیسی و اعداد
+  const englishPattern = /[a-zA-Z0-9\s.,!?;:'"()\-@#$%^&*+=<>{}[\]\\|`~_]/g;
+  const englishMatches = plainText.match(englishPattern) || [];
+
+  // الگوی کاراکترهای فارسی و عربی (برای آینده ممکن است نیاز باشد)
+  // const persianArabicPattern = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/g;
+
+  // محاسبه درصد کاراکترهای انگلیسی
+  const totalChars = plainText.replace(/\s/g, "").length;
+  const englishChars = englishMatches.join("").replace(/\s/g, "").length;
+  const englishPercentage =
+    totalChars > 0 ? (englishChars / totalChars) * 100 : 0;
+
+  // اگر بیش از 70% متن انگلیسی است، LTR استفاده کن
+  return englishPercentage > 70 ? "ltr" : "rtl";
+};
+
 export const sanitizeEmailHTML = (html: string): string => {
   try {
     // Remove style tags and their content
@@ -95,15 +119,30 @@ export const sanitizeEmailHTML = (html: string): string => {
     // Remove potentially harmful attributes
     sanitized = sanitized.replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, "");
 
-    // فقط font-family و font-size رو از inline styles حذف کن، بقیه رو حفظ کن
+    // تشخیص جهت متن اصلی
+    const detectedDirection = detectTextDirection(sanitized);
+
+    // فقط font-family، font-size و font-weight رو از inline styles حذف کن
+    // text-align و direction رو فقط اگر با جهت تشخیص داده شده مطابقت نداشته باشد حذف کن
     sanitized = sanitized.replace(
       /style\s*=\s*["']([^"']*?)["']/gi,
       (_, styles) => {
-        // فقط font-family و font-size رو حذف کن
+        let cleanedStyles = styles
-        const cleanedStyles = styles
           .replace(/font-family\s*:\s*[^;]*;?/gi, "")
           .replace(/font-size\s*:\s*[^;]*;?/gi, "")
-          .replace(/font-weight\s*:\s*[^;]*;?/gi, "")
+          .replace(/font-weight\s*:\s*[^;]*;?/gi, "");
+
+        // اگر جهت تشخیص داده شده LTR است، direction و text-align را حفظ کن
+        if (detectedDirection === "ltr") {
+          // direction و text-align را حفظ کن
+        } else {
+          // اگر RTL است، این استایل‌ها را حذف کن تا استایل سایت اعمال شود
+          cleanedStyles = cleanedStyles
+            .replace(/text-align\s*:\s*[^;]*;?/gi, "")
+            .replace(/direction\s*:\s*[^;]*;?/gi, "");
+        }
+
+        cleanedStyles = cleanedStyles
           .replace(/;\s*;/g, ";") // حذف سمیکالن‌های اضافی
           .replace(/^\s*;\s*|\s*;\s*$/g, ""); // حذف سمیکالن‌های ابتدا و انتها
 

src/contexts/EmailWebSocketContext.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { useEmailWebSocket } from '@/hooks/useEmailWebSocket';
+import { Socket } from 'socket.io-client';
+
+interface EmailWebSocketContextValue {
+    socket: Socket | null;
+    isConnected: boolean;
+}
+
+const EmailWebSocketContext = createContext<EmailWebSocketContextValue | null>(null);
+
+interface EmailWebSocketProviderProps {
+    children: ReactNode;
+    token: string;
+    serverUrl?: string;
+}
+
+export const EmailWebSocketProvider: React.FC<EmailWebSocketProviderProps> = ({
+    children,
+    token,
+    serverUrl,
+}) => {
+    const { socket, isConnected } = useEmailWebSocket({ token, serverUrl });
+
+    return (
+        <EmailWebSocketContext.Provider value={{ socket, isConnected }}>
+            {children}
+        </EmailWebSocketContext.Provider>
+    );
+};
+
+export const useEmailWebSocketContext = () => {
+    const context = useContext(EmailWebSocketContext);
+    if (!context) {
+        throw new Error('useEmailWebSocketContext must be used within EmailWebSocketProvider');
+    }
+    return context;
+}; 

src/hooks/useEmailEvents.ts

@@ -0,0 +1,92 @@
+import { useEffect } from "react";
+import { Socket } from "socket.io-client";
+
+export interface EmailPayload {
+  messageId: number;
+  userId: string;
+  from: {
+    name?: string;
+    address: string;
+  };
+  to: Array<{
+    name?: string;
+    address: string;
+  }>;
+  subject: string;
+  preview?: string;
+  hasAttachments: boolean;
+  timestamp: string;
+  mailboxId: string;
+  mailboxName: string;
+  isRead: boolean;
+  isFlagged: boolean;
+  size: number;
+}
+
+export interface EmailStatusPayload {
+  messageId: number;
+  userId: string;
+  mailboxId: string;
+  timestamp: string;
+}
+
+export interface UnreadCountPayload {
+  userId: string;
+  totalUnread: number;
+  mailboxCounts: Record<string, number>;
+  timestamp: string;
+  count: number;
+}
+
+interface EmailEventHandlers {
+  onNewEmail?: (email: EmailPayload) => void;
+  onEmailRead?: (data: EmailStatusPayload) => void;
+  onEmailDeleted?: (data: EmailStatusPayload) => void;
+  onEmailSent?: (data: EmailStatusPayload) => void;
+  onUnreadCountUpdated?: (data: UnreadCountPayload) => void;
+  onMailboxUpdated?: (data: EmailStatusPayload) => void;
+}
+
+export const useEmailEvents = (
+  socket: Socket | null,
+  handlers: EmailEventHandlers
+) => {
+  useEffect(() => {
+    if (!socket) return;
+
+    // Register event handlers
+    if (handlers.onNewEmail) {
+      socket.on("new_email", handlers.onNewEmail);
+    }
+
+    if (handlers.onEmailRead) {
+      socket.on("email_read", handlers.onEmailRead);
+    }
+
+    if (handlers.onEmailDeleted) {
+      socket.on("email_deleted", handlers.onEmailDeleted);
+    }
+
+    if (handlers.onEmailSent) {
+      socket.on("email_sent", handlers.onEmailSent);
+    }
+
+    if (handlers.onUnreadCountUpdated) {
+      socket.on("unread_count_updated", handlers.onUnreadCountUpdated);
+    }
+
+    if (handlers.onMailboxUpdated) {
+      socket.on("mailbox_updated", handlers.onMailboxUpdated);
+    }
+
+    // Cleanup on unmount
+    return () => {
+      socket.off("new_email");
+      socket.off("email_read");
+      socket.off("email_deleted");
+      socket.off("email_sent");
+      socket.off("unread_count_updated");
+      socket.off("mailbox_updated");
+    };
+  }, [socket, handlers]);
+};

src/hooks/useEmailWebSocket.ts

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import io, { Socket } from "socket.io-client";
+
+interface UseEmailWebSocketOptions {
+  token: string;
+  serverUrl?: string;
+  onConnect?: () => void;
+  onDisconnect?: () => void;
+  onError?: (error: string) => void;
+}
+
+export const useEmailWebSocket = ({
+  token,
+  serverUrl = `ws://${import.meta.env.VITE_BASE_URL}/email`,
+  onConnect,
+  onDisconnect,
+  onError,
+}: UseEmailWebSocketOptions) => {
+  const [socket, setSocket] = useState<Socket | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+
+  useEffect(() => {
+    if (!token) return;
+
+    const newSocket = io(serverUrl, {
+      auth: { token },
+      transports: ["websocket", "polling"],
+    });
+
+    // Connection events
+    newSocket.on("connect", () => {
+      console.log("✅ اتصال به WebSocket ایمیل برقرار شد");
+      setIsConnected(true);
+      onConnect?.();
+    });
+
+    newSocket.on("disconnect", () => {
+      console.log("❌ اتصال به WebSocket ایمیل قطع شد");
+      setIsConnected(false);
+      onDisconnect?.();
+    });
+
+    newSocket.on("connection_established", (data) => {
+      console.log("🎉 اتصال WebSocket ایمیل تأیید شد:", data);
+    });
+
+    newSocket.on("connection_error", (error) => {
+      console.error("💥 خطای اتصال WebSocket ایمیل:", error);
+      onError?.(error.error);
+    });
+
+    // Health monitoring
+    newSocket.on("ping", () => {
+      newSocket.emit("pong", { timestamp: new Date().toISOString() });
+    });
+
+    setSocket(newSocket);
+
+    return () => {
+      newSocket.close();
+      setSocket(null);
+    };
+  }, [token, serverUrl]);
+
+  return { socket, isConnected };
+};

src/hooks/useNotificationSound.ts

@@ -0,0 +1,72 @@
+import { useCallback, useState } from "react";
+
+interface UseNotificationSoundOptions {
+  enabled?: boolean;
+  volume?: number;
+  soundUrl?: string;
+}
+
+export const useNotificationSound = ({
+  enabled = true,
+  volume = 0.5,
+  soundUrl = "/notification.mp3",
+}: UseNotificationSoundOptions = {}) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const playSound = useCallback(async () => {
+    if (!enabled || isPlaying) {
+      console.log("صدا غیرفعال است یا در حال پخش");
+      return;
+    }
+
+    try {
+      setIsPlaying(true);
+      console.log("شروع پخش صدا...", { soundUrl, volume, enabled });
+
+      const audio = new Audio();
+      audio.preload = "auto";
+      audio.src = soundUrl;
+      audio.volume = Math.max(0, Math.min(1, volume));
+
+      // Add event listeners
+      audio.addEventListener("ended", () => {
+        console.log("پخش صدا تمام شد");
+        setIsPlaying(false);
+      });
+
+      audio.addEventListener("error", (e) => {
+        console.error("خطا در پخش صدا:", e);
+        setIsPlaying(false);
+      });
+
+      // Wait for audio to be ready
+      if (audio.readyState >= 2) {
+        await audio.play();
+        console.log("🔊 صدای نوتیفیکیشن پخش شد");
+      } else {
+        audio.addEventListener("canplay", async () => {
+          try {
+            await audio.play();
+            console.log("🔊 صدای نوتیفیکیشن پخش شد");
+          } catch (playError) {
+            console.error("خطا در پخش بعد از آماده شدن:", playError);
+            setIsPlaying(false);
+          }
+        });
+      }
+    } catch (error) {
+      console.error("خطا در ایجاد audio element:", error);
+      setIsPlaying(false);
+    }
+  }, [enabled, isPlaying, soundUrl, volume]);
+
+  const stopSound = useCallback(() => {
+    setIsPlaying(false);
+  }, []);
+
+  return {
+    playSound,
+    stopSound,
+    isPlaying,
+  };
+};

src/index.css

@@ -48,6 +48,37 @@ body,
 }
 * {
   outline: none;
+
+  /* Custom slider styles for volume control */
+  .slider {
+    -webkit-appearance: none;
+    appearance: none;
+    background: #e5e7eb;
+    border-radius: 5px;
+    height: 6px;
+    outline: none;
+  }
+
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #374151;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  .slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #374151;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
 }
 
 input::placeholder,

src/pages/received/Detail.tsx

@@ -9,17 +9,18 @@ import AnswerIcon from '@/assets/images/answer.svg'
 import Header from './Components/Header'
 import ReactQuill from 'react-quill-new';
 import Select from '@/components/Select'
-import { useGetInbox, useGetMessageDetail, useSendEmail } from './hooks/useEmailData'
+import { useGetMessageDetail, useSendEmail } from './hooks/useEmailData'
 import { useAuthStore } from '../auth/store/AuthStore'
 import { SendEmailDto } from './types/Types'
 import { toast } from '@/components/Toast'
-import { formatDate, sanitizeEmailHTML } from '@/config/func'
+import { formatDate, sanitizeEmailHTML, detectTextDirection } from '@/config/func'
 import SkeletonDetail from './Components/SkeletonDetail'
+import { useEmailActions } from '@/hooks/useEmailActions'
 
 const DetailEmail: FC = () => {
 
     const { t } = useTranslation()
-    const { refetch } = useGetInbox({ page: 1 })
+    const emailActions = useEmailActions()
     const { id } = useParams<{ id: string }>()
     const { email: userEmail } = useAuthStore()
     const [showAnswer, setShowAnswer] = useState<boolean>(false)
@@ -27,7 +28,7 @@ const DetailEmail: FC = () => {
     const [priority, setPriority] = useState<string>('')
 
     // API hooks
-    const { data: messageDetail, isLoading, error, isSuccess } = useGetMessageDetail(id || '', !!id)
+    const { data: messageDetail, isLoading, error } = useGetMessageDetail(id || '', !!id)
     const sendEmailMutation = useSendEmail()
     // const saveDraftMutation = useSaveDraft()
 
@@ -108,11 +109,13 @@ const DetailEmail: FC = () => {
         toast('قابلیت ارسال به دیگران به زودی اضافه خواهد شد', 'info')
     }
 
+    // Mark message as seen when it's loaded and not already seen
     useEffect(() => {
-        if (isSuccess) {
+        if (messageDetail && !messageDetail.seen && id) {
-            refetch()
+            console.log('Marking message as seen:', id, 'Current seen status:', messageDetail.seen)
+            emailActions.markAsSeen(Number(id))
         }
-    }, [isSuccess])
+    }, [messageDetail, emailActions, id])
 
     if (isLoading) {
         return (
@@ -166,10 +169,15 @@ const DetailEmail: FC = () => {
                 {messageDetail.html && messageDetail.html.length > 0 ? (
                     <div
                         className='email-content-container border border-gray-200 rounded-lg p-4 overflow-hidden'
+                        style={{
+                            direction: detectTextDirection(messageDetail.html.join(''))
+                        }}
                         dangerouslySetInnerHTML={{ __html: sanitizeEmailHTML(messageDetail.html.join('')) }}
                     />
                 ) : (
-                    <p>{messageDetail.text || 'محتوای پیام'}</p>
+                    <p style={{
+                        direction: detectTextDirection(messageDetail.text || '')
+                    }}>{messageDetail.text || 'محتوای پیام'}</p>
                 )}
             </div>
 

src/pages/received/List.tsx

@@ -1,19 +1,22 @@
 import Filters, { FilterValues } from '../../components/Filters';
-import { FC, useState } from 'react'
+import { FC, useState, useEffect, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Table from '../../components/Table';
 import { ColumnType } from '../../components/types/TableTypes';
 import { InfoCircle, More, Refresh2, Trash, Edit, Archive, ArchiveTick, Star1 } from 'iconsax-react';
 import { RowActionItem } from '../../components/RowActionsDropdown';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { useGetInbox } from './hooks/useEmailData';
 import { InboxMessage } from './types/Types';
 import { formatDate } from '@/config/func';
 import MarkAsRead from '@/assets/images/mark_as_read.svg'
 import { useEmailActions } from '@/hooks/useEmailActions';
+import { useEmailWebSocketContext } from '@/contexts/EmailWebSocketContext';
+import { useEmailEvents } from '@/hooks/useEmailEvents';
 
 const List: FC = () => {
     const navigate = useNavigate();
+    const location = useLocation();
     const { t } = useTranslation();
     const [currentPage, setCurrentPage] = useState(1);
     const [filters, setFilters] = useState<FilterValues>({});
@@ -21,10 +24,38 @@ const List: FC = () => {
 
     const { data: inboxData, isLoading, refetch, isFetching } = useGetInbox({
         page: currentPage,
-        limit: 10,
+        limit: 25,
         ...filters
     });
 
+    // WebSocket integration
+    const { socket } = useEmailWebSocketContext();
+
+    const handleNewEmailEvent = useCallback(() => {
+        // Refresh inbox when new email arrives
+        refetch();
+    }, [refetch]);
+
+    const handleEmailActionEvent = useCallback(() => {
+        // Refresh inbox when email actions occur
+        refetch();
+    }, [refetch]);
+
+    useEmailEvents(socket, {
+        onNewEmail: handleNewEmailEvent,
+        onEmailRead: handleEmailActionEvent,
+        onEmailDeleted: handleEmailActionEvent,
+        // onMailboxUpdated: handleEmailActionEvent,
+    });
+
+    // Force refresh when component mounts or location changes
+    useEffect(() => {
+        // Refetch when coming back to inbox from other pages
+        if (location.pathname === '/') {
+            refetch();
+        }
+    }, [location.pathname, refetch]);
+
     const [selectedMessages, setSelectedMessages] = useState<InboxMessage[]>([]);
 
     const columns: ColumnType<InboxMessage>[] = [
@@ -32,7 +63,14 @@ const List: FC = () => {
             key: 'subject',
             title: 'عنوان پیام',
             render: (item) => (
-                <span className="truncate">{item.subject || 'بدون موضوع'}</span>
+                <div className="truncate max-w-[250px]">{item.subject || 'بدون موضوع'}</div>
+            )
+        },
+        {
+            key: 'intro',
+            title: 'پیش نمایش',
+            render: (item) => (
+                <div className="truncate max-w-[250px]">{item.intro || 'بدون موضوع'}</div>
             )
         },
         {

src/pages/received/hooks/useEmailData.tsx

@@ -26,7 +26,8 @@ export const useGetInbox = (query: MessageListQueryDto) => {
     return useQuery({
         queryKey: ['inbox', query],
         queryFn: () => api.getInbox(query),
-        staleTime: 1000 * 60 * 5, // 5 minutes
+        staleTime: 0, // Always fetch fresh data
+        refetchOnWindowFocus: true,
     });
 };
 
@@ -35,7 +36,7 @@ export const useGetMessageDetail = (messageId: string, enabled: boolean = true)
         queryKey: ['message', messageId],
         queryFn: () => api.getMessageDetail(messageId),
         enabled: !!messageId && enabled,
-        staleTime: 1000 * 60 * 10, // 10 minutes
+        staleTime: 0, // Always fetch fresh data for message details
     });
 };
 

src/pages/sent/List.tsx

@@ -38,6 +38,13 @@ const List: FC = () => {
                 </div>
             )
         },
+        {
+            key: 'intro',
+            title: 'پیش نمایش',
+            render: (item) => (
+                <div className="truncate max-w-[250px]">{item.intro || 'بدون موضوع'}</div>
+            )
+        },
         {
             key: 'to',
             title: 'گیرنده',
@@ -55,7 +62,7 @@ const List: FC = () => {
             title: 'تاریخ ارسال',
             align: 'center',
             render: (item) => (
-                <span className="text-xs md:text-sm">
+                <span className="">
                     {formatDate(item.date)}
                 </span>
             )

src/pages/spam/List.tsx

@@ -37,7 +37,6 @@ const List: FC = () => {
             title: 'فرستنده',
             render: (item) => (
                 <div className="flex items-center">
-                    {!item.seen && <div className="w-1.5 h-1.5 md:w-2 md:h-2 rounded-full bg-blue-500 ml-2" />}
                     <span className="truncate">{item.from.name || item.from.address}</span>
                 </div>
             )
@@ -109,7 +108,7 @@ const List: FC = () => {
         setCurrentPage(page);
     };
 
-    const messages = spamData?.data?.results || [];
+    const messages = spamData?.data?.junkMails || [];
     const pager = spamData?.data?.pager;
 
     return (

src/pages/spam/types/SpamTypes.ts

@@ -47,7 +47,7 @@ export interface MessageListQueryDto {
 export interface SpamResponse {
   success: boolean;
   data: {
-    results: SpamMessage[];
+    junkMails: SpamMessage[];
     pager: {
       page: number;
       totalPages: number;

src/router/AppRouter.tsx

@@ -15,6 +15,7 @@ import Login from '@/pages/auth/Login'
 const AppRouter: FC = () => {
     return (
         <Routes>
+            <Route path={'/'} element={<ReceivedList />} />
             <Route path={Paths.received} element={<ReceivedList />} />
             <Route path={Paths.sent} element={<SentList />} />
             <Route path={Paths.draft} element={<DraftList />} />

src/shared/Header.tsx

@@ -2,9 +2,9 @@ import { FC, useEffect, useState } from 'react'
 import Input from '../components/Input'
 import { Element3, HambergerMenu, Wallet } from 'iconsax-react'
 import { useTranslation } from 'react-i18next'
-import { Link, useLocation } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { Paths } from '@/utils/Paths'
-// import Notifications from '../pages/notification/Notification'
+import { EmailNotifications } from '@/components/EmailNotifications'
 import { useSharedStore } from './store/sharedStore'
 // import { useGetProfile } from '../pages/profile/hooks/useProfileData'
 // import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
@@ -14,12 +14,16 @@ import { useSharedStore } from './store/sharedStore'
 const Header: FC = () => {
 
     const location = useLocation();
+    const navigate = useNavigate();
     const [popoverKey, setPopoverKey] = useState(0);
     const { t } = useTranslation('global')
     const { setOpenSidebar, openSidebar } = useSharedStore()
     // const { data } = useGetProfile()
     // const getWalletBalance = useGetWalletBalance()
 
+    // فرض می‌کنیم که token از localStorage گرفته می‌شود
+    const userToken = localStorage.getItem('jwt-token') || '';
+
     console.log(popoverKey);
     useEffect(() => {
 
@@ -57,7 +61,12 @@ const Header: FC = () => {
                         </div>
                     </div>
                 </Link>
-                {/* <Notifications /> */}
+                {userToken && (
+                    <EmailNotifications
+                        userToken={userToken}
+                        onEmailClick={(email) => navigate(`/mail/${email.messageId}`)}
+                    />
+                )}
                 {/* {
                     data && (
                         <Popover className="relative" key={popoverKey}>