Improve scan overlay UX

- Show overlay immediately when rescan is clicked (before API response)
- Add click-outside-to-close on overlay background
- Add click on rescan-status indicator to reopen overlay
- Add cursor pointer to rescan-status for clickability feedback
- All 1024 tests passing

src/server/web/static/js/app.js

@@ -417,6 +417,11 @@ class AniWorldApp {
             this.rescanSeries();
         });
 
+        // Click on rescan status indicator to reopen scan overlay
+        document.getElementById('rescan-status').addEventListener('click', () => {
+            this.reopenScanOverlay();
+        });
+
         // Configuration modal
         document.getElementById('config-btn').addEventListener('click', () => {
             this.showConfigModal();
@@ -1016,33 +1021,39 @@ class AniWorldApp {
 
     async rescanSeries() {
         try {
-            this.showToast('Scanning directory...', 'info');
+            // Show the overlay immediately before making the API call
+            this.showScanProgressOverlay({
+                directory: 'Starting scan...',
+                total_items: 0
+            });
+            this.updateProcessStatus('rescan', true);
             
             const response = await this.makeAuthenticatedRequest('/api/anime/rescan', {
                 method: 'POST'
             });
 
-            if (!response) return;
+            if (!response) {
+                this.removeScanProgressOverlay();
+                this.updateProcessStatus('rescan', false);
+                return;
+            }
             const data = await response.json();
             
             // Debug logging
             console.log('Rescan response:', data);
             console.log('Success value:', data.success, 'Type:', typeof data.success);
 
-            if (data.success === true) {
-                const seriesCount = data.series_count || 0;
-                this.showToast(
-                    `Rescan complete! Found ${seriesCount} series with missing episodes.`,
-                    'success'
-                );
-                
-                // Reload the series list to show the updated data
-                await this.loadSeries();
-            } else {
+            // Note: The scan progress will be updated via WebSocket events
+            // The overlay will be closed when scan_completed is received
+            if (data.success !== true) {
+                this.removeScanProgressOverlay();
+                this.updateProcessStatus('rescan', false);
                 this.showToast(`Rescan error: ${data.message}`, 'error');
             }
         } catch (error) {
             console.error('Rescan error:', error);
+            this.removeScanProgressOverlay();
+            this.updateProcessStatus('rescan', false);
             this.showToast('Failed to start rescan', 'error');
         }
     }
@@ -1090,6 +1101,9 @@ class AniWorldApp {
 
         // Store total items for progress calculation
         this.scanTotalItems = data?.total_items || 0;
+        
+        // Store last scan data for reopening
+        this._lastScanData = data;
 
         // Create overlay element
         const overlay = document.createElement('div');
@@ -1136,6 +1150,14 @@ class AniWorldApp {
 
         document.body.appendChild(overlay);
 
+        // Add click-outside-to-close handler
+        overlay.addEventListener('click', (e) => {
+            // Only close if clicking the overlay background, not the container
+            if (e.target === overlay) {
+                this.removeScanProgressOverlay();
+            }
+        });
+
         // Trigger animation by adding visible class after a brief delay
         requestAnimationFrame(() => {
             overlay.classList.add('visible');
@@ -1281,6 +1303,49 @@ class AniWorldApp {
         }
     }
 
+    /**
+     * Reopen the scan progress overlay if a scan is in progress
+     * Called when user clicks on the rescan status indicator
+     */
+    async reopenScanOverlay() {
+        // Check if overlay already exists
+        const existingOverlay = document.getElementById('scan-progress-overlay');
+        if (existingOverlay) {
+            // Overlay is already open, do nothing
+            return;
+        }
+        
+        // Check if scan is running via API
+        try {
+            const response = await this.makeAuthenticatedRequest('/api/anime/scan/status');
+            if (!response || !response.ok) {
+                console.log('Could not fetch scan status');
+                return;
+            }
+            
+            const data = await response.json();
+            console.log('Scan status for reopen:', data);
+            
+            if (data.is_scanning) {
+                // A scan is in progress, show the overlay
+                this.showScanProgressOverlay({
+                    directory: data.directory,
+                    total_items: data.total_items
+                });
+                
+                // Update with current progress
+                this.updateScanProgressOverlay({
+                    directories_scanned: data.directories_scanned,
+                    files_found: data.directories_scanned,
+                    current_directory: data.current_directory,
+                    total_items: data.total_items
+                });
+            }
+        } catch (error) {
+            console.error('Error checking scan status for reopen:', error);
+        }
+    }
+
     /**
      * Check if a scan is currently in progress (useful after page reload)
      * and show the progress overlay if so