fix some ui stuff

scipaperloader/templates/about.html.jinja

@@ -1,4 +1,8 @@
-{% extends "base.html.jinja" %} {% block content %}
+{% extends "base.html.jinja" %}
+
+{% block title %}About{% endblock title %}
+
+{% block content %}
 <h1 class="mb-4">📘 About This App</h1>
 
 <p class="lead">

scipaperloader/templates/index.html.jinja

@@ -1,4 +1,7 @@
 {% extends "base.html.jinja" %}
+
+{% block title %}Home - SciPaperLoader{% endblock title %}
+
 {% block content %}
 
 <div class="container text-center">

scipaperloader/templates/logger.html.jinja

@@ -1,4 +1,7 @@
 {% extends "base.html.jinja" %}
+
+{% block title %}Logs{% endblock title %}
+
 {% block content %}
 <h1>Activity Logs</h1>
 

scipaperloader/templates/nav.html.jinja

@@ -8,7 +8,7 @@
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <li class="nav-item">
-          <a class="nav-link" href="{{ url_for('scraper.index') }}">Scraper</a>
+          <a class="nav-link" href="{{ url_for('scraper.index') }}">Control Panel</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="{{ url_for('upload.upload') }}">Import CSV</a>

scipaperloader/templates/papers.html.jinja

@@ -1,5 +1,7 @@
 {% extends "base.html.jinja" %}
+
 {% block title %}Papers{% endblock title %}
+
 {% block content %}
 
 {# --- Sort direction logic for each column --- #}

scipaperloader/templates/scraper.html.jinja

@@ -1,6 +1,6 @@
 {% extends "base.html.jinja" %}
 
-{% block title %}Paper Scraper Control Panel{% endblock title %}
+{% block title %}Control Panel{% endblock title %}
 
 {% block styles %}
 {{ super() }}
@@ -34,14 +34,6 @@
         height: 400px;
     }
 
-    .notification {
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        max-width: 350px;
-        z-index: 1050;
-    }
-
     .search-results-container {
         max-height: 300px;
         overflow-y: auto;
@@ -636,23 +628,47 @@
     }
 
     function updateVolume() {
-        const volume = document.getElementById('volumeInput').value;
+        const volumeInput = document.getElementById('volumeInput');
+        const volume = volumeInput.value;
+        const submitButton = document.querySelector('#volumeForm button[type="submit"]');
 
-        fetch('/scraper/update_config', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ volume: volume })
+        // Basic validation
+        if (!volume || volume < 1 || volume > {{ max_volume }} ) { // <-- Corrected line
+        showFlashMessage('Please enter a valid volume between 1 and {{ max_volume }}', 'warning');
+        volumeInput.focus();
+        return;
+    }
+
+    // Disable button and show loading state
+    submitButton.disabled = true;
+    const originalText = submitButton.innerHTML;
+    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Updating...';
+
+    fetch('/scraper/update_config', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ volume: volume })
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                // Use the backend message for success
+                showFlashMessage(data.message || 'Volume updated successfully', 'success');
+            } else {
+                showFlashMessage(data.message || 'Failed to update volume', 'error');
+            }
         })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    showFlashMessage('Volume updated successfully', 'success');
-                } else {
-                    showFlashMessage(data.message, 'error');
-                }
-            });
+        .catch(error => {
+            console.error('Error updating volume:', error);
+            showFlashMessage('Network error while updating volume. Please try again.', 'error');
+        })
+        .finally(() => {
+            // Re-enable button and restore original text
+            submitButton.disabled = false;
+            submitButton.innerHTML = originalText;
+        });
     }
 
     function toggleNotifications() {
@@ -903,13 +919,20 @@
     // Flash message function
     function showFlashMessage(message, type) {
         const flashContainer = document.createElement('div');
-        flashContainer.className = `alert alert-${type === 'error' ? 'danger' : type} alert-dismissible fade show notification`;
+        flashContainer.className = `alert alert-${type === 'error' ? 'danger' : type} alert-dismissible fade show`;
         flashContainer.innerHTML = `
             ${message}
             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         `;
 
-        document.body.appendChild(flashContainer);
+        // Use the existing client flash container at the top of the page
+        const clientFlashContainer = document.getElementById('clientFlashContainer');
+        if (clientFlashContainer) {
+            clientFlashContainer.appendChild(flashContainer);
+        } else {
+            // Fallback to body if container not found
+            document.body.appendChild(flashContainer);
+        }
 
         // Auto dismiss after 5 seconds
         setTimeout(() => {

scipaperloader/templates/upload.html.jinja

@@ -1,4 +1,8 @@
-{% extends "base.html.jinja" %} {% block content %}
+{% extends "base.html.jinja" %}
+
+{% block title %}Import CSV{% endblock title %}
+
+{% block content %}
 <h1>Welcome to SciPaperLoader</h1>
 
 <div id="results-container"></div>