chore: updated wording for consistency and created unique overlay classes for uploads and removals

internal/handlers/web/document_remove.go

@@ -194,7 +194,7 @@ func JobSelectionHandler(w http.ResponseWriter, r *http.Request) {
 			<div class="job-item">
 				<a href="#job-%s" hx-get="/documents/remove/job/%s" hx-target="#job-%s-attachments"
 					hx-swap="outerHTML" hx-trigger="click">
-					Job #%s
+					Job ID: %s
 				</a>
 				<div id="job-%s-attachments"></div>
 			</div>
@@ -1546,7 +1546,7 @@ func BulkRemoveDocumentsHandler(w http.ResponseWriter, r *http.Request) {
 		}
 
 		resultHTML.WriteString(fmt.Sprintf("<div class=\"job-result %s\">", jobClass))
-		resultHTML.WriteString(fmt.Sprintf("<span class=\"job-id\">Job #%s</span>", jobResult.JobID))
+		resultHTML.WriteString(fmt.Sprintf("<span class=\"job-id\">Job ID: %s</span>", jobResult.JobID))
 
 		if jobResult.ErrorMsg != "" {
 			resultHTML.WriteString(fmt.Sprintf("<div class=\"error-message\">%s</div>", jobResult.ErrorMsg))

internal/handlers/web/documents.go

@@ -493,7 +493,7 @@ func UploadDocumentsHandler(w http.ResponseWriter, r *http.Request) {
 		}
 
 		resultHTML.WriteString(fmt.Sprintf("<div class=\"job-result %s\">", jobClass))
-		resultHTML.WriteString(fmt.Sprintf("<span class=\"job-id\">Job #%s</span>", jobID))
+		resultHTML.WriteString(fmt.Sprintf("<span class=\"job-id\">Job ID: %s</span>", jobID))
 
 		// File results
 		if len(jobResults) > 0 {

static/css/upload.css

@@ -370,7 +370,8 @@
     width: 100%;
 }
 
-.upload-overlay {
+.upload-overlay,
+.removal-overlay {
     position: absolute;
     top: 0;
     left: 0;
@@ -384,7 +385,8 @@
     border-radius: inherit;
 }
 
-.upload-overlay.htmx-request {
+.upload-overlay.htmx-request,
+.removal-overlay.htmx-request {
     display: flex;
 }
 
@@ -397,17 +399,20 @@
     max-width: 80%;
 }
 
-.upload-overlay h3 {
+.upload-overlay h3,
+.removal-overlay h3 {
     margin-bottom: 0.5rem;
     color: #333;
 }
 
-.upload-overlay p {
+.upload-overlay p,
+.removal-overlay p {
     margin-top: 0.5rem;
     color: #555;
 }
 
-.upload-overlay .overlay-spinner {
+.upload-overlay .overlay-spinner,
+.removal-overlay .overlay-spinner {
     width: 50px;
     height: 50px;
     border: 5px solid #f3f3f3;
@@ -419,15 +424,19 @@
 
 /* Dark theme support */
 @media (prefers-color-scheme: dark) {
-    .upload-overlay {
+
+    .upload-overlay,
+    .removal-overlay {
         background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(20, 20, 20, 0.95));
     }
 
-    .upload-overlay h3 {
+    .upload-overlay h3,
+    .removal-overlay h3 {
         color: #fff;
     }
 
-    .upload-overlay p {
+    .upload-overlay p,
+    .removal-overlay p {
         color: #ccc;
     }
 }

templates/partials/document_remove.html

@@ -3,7 +3,7 @@
 
 <div class="upload-container">
     <!-- Loading Overlay -->
-    <div class="upload-overlay htmx-indicator">
+    <div class="removal-overlay htmx-indicator">
         <div class="upload-overlay-content">
             <div class="overlay-spinner"></div>
             <h3>Removing Documents</h3>
@@ -32,7 +32,7 @@
 
         <div id="bulk-removal-tab" style="display: none;">
             <form id="bulk-remove-form" hx-post="/documents/remove/bulk" hx-target="#removal-results"
-                hx-indicator=".upload-overlay">
+                hx-indicator=".removal-overlay">
                 <div class="form-group">
                     <label>Document Types to Remove:</label>
                     <div class="checkbox-group">
@@ -160,13 +160,13 @@
         document.querySelectorAll('form').forEach(form => {
             form.addEventListener('htmx:beforeRequest', function (evt) {
                 if (evt.detail.pathInfo.requestPath.includes('/documents/remove')) {
-                    document.querySelector('.upload-overlay').style.display = 'flex';
+                    document.querySelector('.removal-overlay').style.display = 'flex';
                 }
             });
 
             form.addEventListener('htmx:afterRequest', function (evt) {
                 if (evt.detail.pathInfo.requestPath.includes('/documents/remove')) {
-                    document.querySelector('.upload-overlay').style.display = 'none';
+                    document.querySelector('.removal-overlay').style.display = 'none';
 
                     // If it's a removal action and successful, show step 3 and restart section
                     if (evt.detail.successful &&
@@ -179,7 +179,7 @@
             });
 
             form.addEventListener('htmx:error', function (evt) {
-                document.querySelector('.upload-overlay').style.display = 'none';
+                document.querySelector('.removal-overlay').style.display = 'none';
             });
         });
     });

templates/partials/document_remove_csv.html

@@ -7,7 +7,7 @@
         hx-target="#job-ids-removal-container" hx-encoding="multipart/form-data" hx-include="#csv-file-removal"
         hx-indicator="#csv-loading-indicator-removal"
         hx-on::after-request="if(event.detail.successful) { document.getElementById('step2-removal').style.display = 'block'; }">
-        Process CSV
+        Upload CSV
     </button>
 
     <div id="csv-loading-indicator-removal" class="htmx-indicator" style="display: none;">

templates/partials/document_remove_form.html

@@ -1,7 +1,7 @@
 {{define "document_remove_form"}}
 <div id="document-selection-container">
     <form id="job-selection-form" hx-post="/documents/remove/job-selection" hx-target="#job-results"
-        hx-indicator=".upload-overlay" hx-include="#job-ids-removal-container">
+        hx-indicator=".removal-overlay" hx-include="#job-ids-removal-container">
         <!-- The hidden input with jobIDs will be inserted into job-ids-removal-container by the CSV process -->
 
         <button type="submit" id="load-jobs-btn" class="btn-primary">