fixes flash messages

scipaperloader/static/js/common.js

@@ -3,36 +3,65 @@
  */
 
 /**
- * Display a flash message to the user
+ * Display a flash message to the user as an overlay
  * @param {string} message - The message to display
  * @param {string} type - The type of message (success, error, warning, info)
+ * @param {number} duration - Duration in milliseconds (default: 5000)
  */
-function showFlashMessage(message, type) {
+function showFlashMessage(message, type = "success", duration = 5000) {
-  const flashContainer = document.createElement("div");
+  const flashMsg = document.createElement("div");
-  flashContainer.className = `alert alert-${
+  const normalizedType = type === "error" ? "danger" : type;
-    type === "error" ? "danger" : type
+  flashMsg.className = `flash-overlay flash-${normalizedType}`;
-  } alert-dismissible fade show`;
+  
-  flashContainer.innerHTML = `
+  // Get the appropriate icon based on type
-        ${message}
+  const getIcon = (messageType) => {
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    switch (messageType) {
+      case "success":
+        return '<svg class="flash-icon" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>';
+      case "danger":
+        return '<svg class="flash-icon" role="img" aria-label="Error:"><use xlink:href="#x-circle-fill"/></svg>';
+      case "warning":
+        return '<svg class="flash-icon" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>';
+      case "info":
+        return '<svg class="flash-icon" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>';
+      default:
+        return '<svg class="flash-icon" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>';
+    }
+  };
+
+  flashMsg.innerHTML = `
+    <div class="flash-content">
+      ${getIcon(normalizedType)}
+      <div class="flash-message">${message}</div>
+      <button type="button" class="flash-close" onclick="this.parentElement.parentElement.remove()">×</button>
+    </div>
   `;
 
-  // Use the existing client flash container at the top of the page
+  // Handle stacking of multiple messages
-  const clientFlashContainer = document.getElementById("clientFlashContainer");
+  const existingMessages = document.querySelectorAll('.flash-overlay');
-  if (clientFlashContainer) {
+  existingMessages.forEach((msg, index) => {
-    clientFlashContainer.appendChild(flashContainer);
+    msg.style.setProperty('--flash-index', index + 1);
-  } else {
+  });
-    // Fallback to body if container not found
-    document.body.appendChild(flashContainer);
-  }
 
-  // Auto dismiss after 5 seconds
+  // Add to page
+  document.body.appendChild(flashMsg);
+
+  // Auto dismiss
   setTimeout(() => {
-    flashContainer.classList.remove("show");
+    flashMsg.classList.add("fade-out");
     setTimeout(() => {
-      flashContainer.remove();
+      if (flashMsg.parentNode) {
-    }, 150); // Remove after fade out animation
+        flashMsg.remove();
-  }, 5000);
+        // Reposition remaining messages
+        const remainingMessages = document.querySelectorAll('.flash-overlay');
+        remainingMessages.forEach((msg, index) => {
+          msg.style.setProperty('--flash-index', index);
+        });
+      }
+    }, 300);
+  }, duration);
+
+  return flashMsg;
 }
 
 /**

scipaperloader/templates/base.html.jinja

@@ -17,6 +17,8 @@
   <main class="container my-5">{% block content %}{% endblock content %}</main>
   {% include "footer.html.jinja" %}
 
+  <!-- Include common utilities globally -->
+  <script src="{{ url_for('static', filename='js/common.js') }}"></script>
   {% block scripts %}{% endblock scripts %}
 </body>
 

scipaperloader/templates/config/schedule.html.jinja

@@ -49,7 +49,6 @@
 </script>
 
 <!-- Load config handler for modular functionality -->
-<script src="{{ url_for('static', filename='js/common.js') }}"></script>
 <script src="{{ url_for('static', filename='js/config-handler.js') }}"></script>
 
 <div x-data="configHandler.createScheduleManager()" class="tab-pane active">

scipaperloader/templates/index.html.jinja

@@ -1,9 +1,15 @@
 {% extends "base.html.jinja" %}
 
+<!-- Include flash messages template -->
+{% include "partials/flash_messages.html.jinja" %}
+
 {% block title %}Home - SciPaperLoader{% endblock title %}
 
 {% block content %}
 
+<!-- Include flash messages template -->
+{% include "partials/flash_messages.html.jinja" %}
+
 <div class="container text-center">
   <h1 class="display-4">Welcome to SciPaperLoader</h1>
   <p class="lead">Your paper scraping tool is ready.</p>
@@ -66,4 +72,13 @@
     </div>
   </div>
 </div>
+
+<script>
+  function testMultipleMessages() {
+    showFlashMessage('First message - Success!', 'success');
+    setTimeout(() => showFlashMessage('Second message - Warning!', 'warning'), 500);
+    setTimeout(() => showFlashMessage('Third message - Info!', 'info'), 1000);
+    setTimeout(() => showFlashMessage('Fourth message - Error!', 'error'), 1500);
+  }
+</script>
 {% endblock content %}

scipaperloader/templates/logger.html.jinja

@@ -5,6 +5,9 @@
 {% block content %}
 <h1>Activity Logs</h1>
 
+<!-- Include flash messages template -->
+{% include "partials/flash_messages.html.jinja" %}
+
 <form method="get" class="mb-3">
   <div class="row g-2">
     <div class="col-md-3">

scipaperloader/templates/papers.html.jinja

@@ -4,6 +4,9 @@
 
 {% block content %}
 
+<!-- Include flash messages template -->
+{% include "partials/flash_messages.html.jinja" %}
+
 {# --- Sort direction logic for each column --- #}
 {% set title_sort = 'asc' if sort_by != 'title' or sort_dir == 'desc' else 'desc' %}
 {% set journal_sort = 'asc' if sort_by != 'journal' or sort_dir == 'desc' else 'desc' %}

scipaperloader/templates/partials/flash_messages.html.jinja

@@ -1,93 +1,145 @@
-<!-- Server-side flash messages from Flask -->
+<!-- SVG Icons for Flash Messages -->
-{% with messages = get_flashed_messages(with_categories=true) %}
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
-{% if messages %}
+    <symbol id="check-circle-fill" viewBox="0 0 16 16">
-<div class="server-flash-messages">
+        <path
-    {% for category, message in messages %}
+            d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
-    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+    </symbol>
-        {{ message }}
+    <symbol id="info-fill" viewBox="0 0 16 16">
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <path
-    </div>
+            d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
-    {% endfor %}
+    </symbol>
-</div>
+    <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
-{% endif %}
+        <path
-{% endwith %}
+            d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
-
+    </symbol>
-<!-- JavaScript flash message container for client-side messages -->
+    <symbol id="x-circle-fill" viewBox="0 0 16 16">
-<div id="clientFlashContainer"></div>
+        <path
+            d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
+    </symbol>
+</svg>
 
+<!-- CSS styles for flash overlay messages -->
 <style>
-    .client-flash-message {
+    .flash-overlay {
         position: fixed;
-        top: 30%;
+        top: 20px;
-        left: 50%;
+        right: 20px;
-        transform: translate(-50%, -50%);
+        z-index: 9999;
-        z-index: 1000;
+        max-width: 420px;
-        width: 300px;
-        text-align: center;
-        font-weight: bold;
-        padding: 12px;
-        margin-bottom: 20px;
-        border-radius: 6px;
         opacity: 1;
-        transition: opacity 5s ease-in-out;
+        transition: all 0.3s ease-in-out;
+        transform: translateX(0);
+        margin-bottom: 10px;
     }
 
-    .client-flash-message.success {
+    .flash-content {
-        background-color: #d4edda;
+        padding: 16px 20px;
-        border-color: #c3e6cb;
+        border-radius: 8px;
-        color: #155724;
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+        display: flex;
+        align-items: flex-start;
+        font-weight: 500;
+        border-left: 4px solid;
+        position: relative;
     }
 
-    .client-flash-message.error {
+    .flash-icon {
+        width: 20px;
+        height: 20px;
+        margin-right: 12px;
+        margin-top: 1px;
+        flex-shrink: 0;
+    }
+
+    .flash-message {
+        flex: 1;
+        line-height: 1.4;
+    }
+
+    .flash-close {
+        background: none;
+        border: none;
+        font-size: 20px;
+        cursor: pointer;
+        padding: 0;
+        margin-left: 12px;
+        opacity: 0.6;
+        line-height: 1;
+        font-weight: bold;
+        flex-shrink: 0;
+        margin-top: -2px;
+    }
+
+    .flash-close:hover {
+        opacity: 1;
+    }
+
+    .flash-success .flash-content {
+        background-color: #d1e7dd;
+        border-left-color: #198754;
+        color: #0f5132;
+    }
+
+    .flash-danger .flash-content {
         background-color: #f8d7da;
-        border-color: #f5c6cb;
+        border-left-color: #dc3545;
         color: #721c24;
     }
 
-    .client-flash-message.info {
+    .flash-warning .flash-content {
-        background-color: #d1ecf1;
-        border-color: #bee5eb;
-        color: #0c5460;
-    }
-
-    .client-flash-message.warning {
         background-color: #fff3cd;
-        border-color: #ffeeba;
+        border-left-color: #ffc107;
-        color: #856404;
+        color: #664d03;
     }
 
-    .client-flash-message.fade {
+    .flash-info .flash-content {
+        background-color: #cff4fc;
+        border-left-color: #0dcaf0;
+        color: #055160;
+    }
+
+    .flash-overlay.fade-out {
         opacity: 0;
+        transform: translateX(100%);
+    }
+
+    /* Stack multiple flash messages with smooth transitions */
+    .flash-overlay {
+        /* Dynamic positioning will be set by JavaScript */
+    }
+
+    /* Ensure proper z-index stacking */
+    .flash-overlay:nth-child(1) {
+        z-index: 9999;
+    }
+
+    .flash-overlay:nth-child(2) {
+        z-index: 9998;
+    }
+
+    .flash-overlay:nth-child(3) {
+        z-index: 9997;
+    }
+
+    .flash-overlay:nth-child(4) {
+        z-index: 9996;
+    }
+
+    .flash-overlay:nth-child(5) {
+        z-index: 9995;
     }
 </style>
 
+<!-- Server-side flash messages from Flask -->
+{% with messages = get_flashed_messages(with_categories=true) %}
+{% if messages %}
 <script>
-    // Global flash message function that can be used from anywhere
+    // Convert server-side flash messages to overlay messages
-    function showFlashMessage(message, type = 'success', duration = 5000) {
-        const flashMsg = document.createElement('div');
-        flashMsg.className = `client-flash-message ${type}`;
-        flashMsg.textContent = message;
-
-        const container = document.getElementById('clientFlashContainer');
-        container.appendChild(flashMsg);
-
-        // Apply fade effect after some time
-        setTimeout(() => flashMsg.classList.add('fade'), duration - 3000);
-
-        // Remove element after duration
-        setTimeout(() => flashMsg.remove(), duration);
-
-        return flashMsg;
-    }
-
-    // Initialize toast messages if Bootstrap is used
     document.addEventListener('DOMContentLoaded', function () {
-        // Initialize any Bootstrap toasts if they exist
+        {% for category, message in messages %}
-        if (typeof bootstrap !== 'undefined' && bootstrap.Toast) {
+        showFlashMessage({{ message| tojson }}, {{ (category if category != 'error' else 'danger')| tojson }});
-            const toastElList = [].slice.call(document.querySelectorAll('.toast'));
+    {% endfor %}
-            toastElList.map(function (toastEl) {
-                return new bootstrap.Toast(toastEl);
-            });
-        }
   });
 </script>
+{% endif %}
+{% endwith %}

scipaperloader/templates/scraper.html.jinja

@@ -317,7 +317,6 @@
     src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
 
 <!-- Modular JavaScript files -->
-<script src="{{ url_for('static', filename='js/common.js') }}"></script>
 <script src="{{ url_for('static', filename='js/chart.js') }}"></script>
 <script src="{{ url_for('static', filename='js/scraper-control.js') }}"></script>
 <script src="{{ url_for('static', filename='js/paper-processor.js') }}"></script>

scipaperloader/templates/upload.html.jinja

@@ -5,34 +5,10 @@
 {% block content %}
 <h1>Welcome to SciPaperLoader</h1>
 
-<div id="results-container"></div>
+<!-- Include flash messages template -->
+{% include "partials/flash_messages.html.jinja" %}
 
-{% if success %}
+<div id="results-container"></div>
-<div class="alert alert-success mt-3">{{ success }}</div>
-{% endif %} {% if error_message %}
-<div class="alert alert-warning mt-3">
-  <h4>{{ error_message }}</h4>
-  <table class="table table-sm table-bordered">
-    <thead>
-      <tr>
-        <th>Row</th>
-        <th>DOI</th>
-        <th>Error</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for error in error_samples %}
-      <tr>
-        <td>{{ error.row }}</td>
-        <td>{{ error.doi }}</td>
-        <td>{{ error.error }}</td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-  <a href="{{ url_for('upload.download_error_log') }}" class="btn btn-outline-secondary">Download Full Error Log</a>
-</div>
-{% endif %}
 
 <div class="alert alert-info">
   <p>
@@ -113,17 +89,21 @@
     const uploadFormHandler = new FormHandler('upload-form', {
       statusUrlTemplate: config.statusUrlTemplate,
       onSuccess: showResults,
-      onError: (error) => alert(`Error: ${error}`)
+      onError: (error) => showFlashMessage(`Upload failed: ${error}`, 'error')
     });
   });
 
   const showResults = (result) => {
+    // Show main success message as overlay
     const message = `Upload completed! Added: ${result.added}, Updated: ${result.updated}, Skipped: ${result.skipped}, Errors: ${result.error_count}`;
+    showFlashMessage(message, 'success');
 
-    let resultHTML = `<div class="alert alert-success">${message}</div>`;
+    // Build detailed results HTML for the results container
+    let resultHTML = '';
 
     // Add skipped records information
     if (result.skipped > 0) {
+      showFlashMessage(`${result.skipped} records were skipped`, 'info');
       resultHTML += `
         <div class="alert alert-info">
           <h4>${result.skipped} records were skipped</h4>
@@ -154,6 +134,7 @@
 
     // Existing error display code
     if (result.error_count > 0) {
+      showFlashMessage(`${result.error_count} errors occurred during upload`, 'warning');
       resultHTML += `
         <div class="alert alert-warning">
           <h4>Some errors occurred (${result.error_count} total)</h4>
@@ -187,6 +168,7 @@
         </div>`;
     }
 
+    // Display detailed results in container
     document.getElementById("results-container").innerHTML = resultHTML;
   };
 </script>