Error modal

static/css/components/modal.css

@@ -26,7 +26,22 @@
 }
 
 .modal-header {
-    margin-bottom: 1.5rem;
+    padding: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.modal-header.error {
+    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 h2 {

static/js/app.js

@@ -32,6 +32,36 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
+    // Error modal functionality
+    const errorModal = document.getElementById('errorModal');
+    const errorModalMessage = document.getElementById('errorModalMessage');
+    const errorModalClose = document.getElementById('errorModalClose');
+
+    function showError(message) {
+        errorModalMessage.textContent = message;
+        errorModal.classList.add('show');
+    }
+
+    function hideError() {
+        errorModal.classList.remove('show');
+    }
+
+    errorModalClose.addEventListener('click', hideError);
+
+    // Close error modal when clicking outside
+    errorModal.addEventListener('click', (e) => {
+        if (e.target === errorModal) {
+            hideError();
+        }
+    });
+
+    // Close error modal when pressing escape
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && errorModal.classList.contains('show')) {
+            hideError();
+        }
+    });
+
     // OPML import handlers
     opmlFileInput.addEventListener('change', async (e) => {
         if (e.target.files.length > 0) {
@@ -48,20 +78,20 @@ document.addEventListener('DOMContentLoaded', function() {
                 if (response.ok) {
                     const result = await response.json();
                     if (result.success) {
-                        alert('OPML import successful: ' + result.message);
+                        showError('OPML import successful: ' + result.message);
                         // Refresh the feed list if feeds were imported
                         if (result.feeds_imported) {
                             handleFeeds();
                         }
                     } else {
-                        alert('OPML import failed: ' + result.message);
+                        showError('OPML import failed: ' + result.message);
                     }
                 } else {
-                    alert('Failed to import OPML file. Please try again.');
+                    showError('Failed to import OPML file. Please try again.');
                 }
             } catch (error) {
                 console.error('OPML import failed:', error);
-                alert('Failed to import OPML file. Please try again.');
+                showError('Failed to import OPML file. Please try again.');
             }
         }
         // Clear the input so the same file can be selected again

templates/index.html.tera

@@ -35,6 +35,21 @@
         </article>
     </dialog>
 
+    <!-- Error 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>
+            <section class="modal-body">
+                <p id="errorModalMessage"></p>
+            </section>
+            <footer class="modal-footer">
+                <button type="button" class="btn-primary" id="errorModalClose">OK</button>
+            </footer>
+        </article>
+    </dialog>
+
     <aside class="sidebar" id="sidebar">
         <div class="sidebar-header">
             <h2>Feeds</h2>