[call-me] - improve toast messages

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "call-me",
-    "version": "1.3.07",
+    "version": "1.3.08",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "call-me",
-            "version": "1.3.07",
+            "version": "1.3.08",
             "license": "AGPLv3",
             "dependencies": {
                 "@ngrok/ngrok": "1.7.0",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "call-me",
-    "version": "1.3.07",
+    "version": "1.3.08",
     "description": "Your Go-To for Instant Video Calls",
     "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
     "license": "AGPLv3",

public/client.js

@@ -642,7 +642,7 @@ function handleUserClickToCall(user) {
         from: userName,
         to: user,
     });
-    popupMsg(t('room.callingUser', { username: user }));
+    toast(t('room.callingUser', { username: user }));
     if (userSidebar.classList.contains('active')) {
         userSidebar.classList.remove('active');
     }
@@ -1761,37 +1761,58 @@ function handleLeave(disconnect = true) {
     }
 }
 
-// Display toast messages
+// Display toast messages using Toastify
 function toast(message, icon = 'info', position = 'top', timer = 3000) {
-    Swal.fire({
-        heightAuto: false,
-        scrollbarPadding: false,
-        position,
-        icon,
-        html: message,
-        timer,
-        timerProgressBar: true,
-        showConfirmButton: false,
-        showClass: { popup: 'animate__animated animate__fadeInDown' },
-        hideClass: { popup: 'animate__animated animate__fadeOutUp' },
-    });
+    const backgroundMap = {
+        success: 'linear-gradient(to right, #10b981, #059669)',
+        warning: 'linear-gradient(to right, #f59e0b, #d97706)',
+        error: 'linear-gradient(to right, #ef4444, #dc2626)',
+        info: 'linear-gradient(to right, #3b82f6, #2563eb)',
+    };
+
+    const iconMap = {
+        success: '<i class="fas fa-check-circle"></i>',
+        warning: '<i class="fas fa-exclamation-triangle"></i>',
+        error: '<i class="fas fa-times-circle"></i>',
+        info: '<i class="fas fa-info-circle"></i>',
+    };
+
+    const gravity = position === 'bottom' ? 'bottom' : 'top';
+    const toastIcon = iconMap[icon] || iconMap.info;
+    const background = backgroundMap[icon] || backgroundMap.info;
+
+    const node = document.createElement('span');
+    node.innerHTML = `${toastIcon}  ${message}`;
+    node.style.display = 'inline-flex';
+    node.style.alignItems = 'center';
+    node.style.gap = '8px';
+
+    Toastify({
+        node,
+        duration: timer,
+        gravity,
+        position: 'center',
+        escapeMarkup: false,
+        className: 'toastify-custom',
+        style: {
+            background,
+            borderRadius: 'var(--border-radius, 12px)',
+            fontFamily: 'inherit',
+            fontSize: '0.9rem',
+            padding: '12px 20px',
+            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
+            maxWidth: '400px',
+        },
+        close: timer > 3000,
+        stopOnFocus: true,
+    }).showToast();
 }
 
 // Handle and display errors
 function handleError(message, error = false, position = 'top', timer = 6000) {
     if (error) console.error(error);
 
-    Swal.fire({
-        heightAuto: false,
-        scrollbarPadding: false,
-        position,
-        icon: 'warning',
-        html: message,
-        timerProgressBar: true,
-        timer,
-        showClass: { popup: 'animate__animated animate__fadeInDown' },
-        hideClass: { popup: 'animate__animated animate__fadeOutUp' },
-    });
+    toast(message, 'warning', position, timer);
 
     sound('notify');
 }

public/index.html

@@ -38,6 +38,9 @@
 
         <!-- ink to Animate CSS file -->
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css/animate.min.css" />
+
+        <!-- Link to Toastify CSS file -->
+        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css" />
     </head>
 
     <body>
@@ -386,6 +389,9 @@
         <!-- Include Emoji Mart for emoji picker -->
         <script defer src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
 
+        <!-- Include Toastify JS file -->
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
+
         <!-- Bootstrap JS -->
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     </body>

public/style.css

@@ -2179,10 +2179,22 @@ input {
     color: var(--danger-color) !important;
 }
 
-/* Toast variant: keep it subtle */
-.swal2-popup.swal2-toast {
+/* Toastify custom styles */
+.toastify-custom {
     backdrop-filter: blur(12px) !important;
     -webkit-backdrop-filter: blur(12px) !important;
+    cursor: default !important;
+    text-align: center;
+}
+
+.toastify-custom .toast-close {
+    color: #fff !important;
+    opacity: 0.8;
+    padding-left: 8px;
+}
+
+.toastify-custom .toast-close:hover {
+    opacity: 1;
 }
 
 .swal2-timer-progress-bar {