From 85550c318e512c447f4c67d7e2d9e5e1c7d28430 Mon Sep 17 00:00:00 2001
From: Greg Shuflin <greg@everydayimshuflin.com>
Date: Sun, 16 Feb 2025 01:08:35 -0800
Subject: [PATCH] Fix modal

---
 src/import.rs                   |  2 +-
 static/css/components/modal.css | 19 ++++++++++---------
 static/js/app.js                | 27 ++++++++++++++++++---------
 templates/index.html.tera       |  6 +++---
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/import.rs b/src/import.rs
index df069be..df4dc94 100644
--- a/src/import.rs
+++ b/src/import.rs
@@ -100,7 +100,7 @@ pub async fn import_opml(
     }
 
     let bytes = file_data.value;
-    
+
     // Find the start of the actual XML content by looking for double newline
     let content_start = bytes
         .windows(4)
diff --git a/static/css/components/modal.css b/static/css/components/modal.css
index 45f9929..4fc8447 100644
--- a/static/css/components/modal.css
+++ b/static/css/components/modal.css
@@ -34,19 +34,20 @@
     color: var(--primary-red);
 }
 
-.modal-header.error h2 {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.modal-header.error i {
-    font-size: 1.2em;
+.modal-header:not(.error) {
+    color: #28a745;  /* Success green color */
 }
 
 .modal-header h2 {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
     margin: 0;
-    color: #333;
+    color: inherit;
+}
+
+.modal-header i {
+    font-size: 1.2em;
 }
 
 .modal-body {
diff --git a/static/js/app.js b/static/js/app.js
index 953f20f..fd1eb74 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -35,30 +35,39 @@ document.addEventListener('DOMContentLoaded', function() {
     // Error modal functionality
     const errorModal = document.getElementById('errorModal');
     const errorModalMessage = document.getElementById('errorModalMessage');
+    const errorModalTitle = document.getElementById('errorModalTitle');
     const errorModalClose = document.getElementById('errorModalClose');
 
-    function showError(message) {
+    function showStatusModal(message, isError = true) {
         errorModalMessage.textContent = message;
+        const modalHeader = errorModal.querySelector('.modal-header');
+        if (isError) {
+            modalHeader.classList.add('error');
+            errorModalTitle.innerHTML = '<i class="fas fa-exclamation-circle"></i> Error';
+        } else {
+            modalHeader.classList.remove('error');
+            errorModalTitle.innerHTML = '<i class="fas fa-check-circle"></i> Success';
+        }
         errorModal.classList.add('show');
     }
 
-    function hideError() {
+    function hideStatusModal() {
         errorModal.classList.remove('show');
     }
 
-    errorModalClose.addEventListener('click', hideError);
+    errorModalClose.addEventListener('click', hideStatusModal);
 
     // Close error modal when clicking outside
     errorModal.addEventListener('click', (e) => {
         if (e.target === errorModal) {
-            hideError();
+            hideStatusModal();
         }
     });
 
     // Close error modal when pressing escape
     document.addEventListener('keydown', (e) => {
         if (e.key === 'Escape' && errorModal.classList.contains('show')) {
-            hideError();
+            hideStatusModal();
         }
     });
 
@@ -78,19 +87,19 @@ document.addEventListener('DOMContentLoaded', function() {
                 if (response.ok) {
                     const result = await response.json();
                     if (result.success) {
-                        showError(result.message);
+                        showStatusModal(result.message, false);
                         // TODO: Poll job status endpoint when implemented
                         // For now, just refresh the feed list after a delay
                         setTimeout(handleFeeds, 5000);
                     } else {
-                        showError('OPML import failed: ' + result.message);
+                        showStatusModal('OPML import failed: ' + result.message, true);
                     }
                 } else {
-                    showError('Failed to import OPML file. Please try again.');
+                    showStatusModal('Failed to import OPML file. Please try again.', true);
                 }
             } catch (error) {
                 console.error('OPML import failed:', error);
-                showError('Failed to import OPML file. Please try again.');
+                showStatusModal('Failed to import OPML file. Please try again.', true);
             }
         }
         // Clear the input so the same file can be selected again
diff --git a/templates/index.html.tera b/templates/index.html.tera
index b347450..17e91c8 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -35,11 +35,11 @@
         </article>
     </dialog>
 
-    <!-- Error Modal -->
+    <!-- Status Modal -->
     <dialog class="modal" id="errorModal">
         <article class="modal-content">
-            <header class="modal-header error">
-                <h2><i class="fas fa-exclamation-circle"></i> Error</h2>
+            <header class="modal-header">
+                <h2 id="errorModalTitle"></h2>
             </header>
             <section class="modal-body">
                 <p id="errorModalMessage"></p>