From 50d1171f19fda748fdd374704089c697b3a96339 Mon Sep 17 00:00:00 2001
From: Greg Shuflin <greg@everydayimshuflin.com>
Date: Sun, 2 Feb 2025 01:23:21 -0800
Subject: [PATCH] Add feed

---
 static/js/app.js          |  51 +++++++++++++
 templates/index.html.tera | 154 ++++++++++++++++++++++++++++++++++----
 2 files changed, 189 insertions(+), 16 deletions(-)
 create mode 100644 static/js/app.js

diff --git a/static/js/app.js b/static/js/app.js
new file mode 100644
index 0000000..7fff34c
--- /dev/null
+++ b/static/js/app.js
@@ -0,0 +1,51 @@
+// Logout functionality
+document.getElementById('logoutButton').addEventListener('click', async () => {
+    try {
+        const response = await fetch('/logout', {
+            method: 'POST',
+        });
+
+        if (response.ok) {
+            window.location.href = '/login';
+        }
+    } catch (error) {
+        console.error('Logout failed:', error);
+    }
+});
+
+// Modal functionality
+const modal = document.getElementById('addFeedModal');
+const addFeedButton = document.getElementById('addFeedButton');
+const cancelButton = document.getElementById('cancelAddFeed');
+const confirmButton = document.getElementById('confirmAddFeed');
+const addFeedForm = document.getElementById('addFeedForm');
+
+function showModal() {
+    modal.classList.add('show');
+}
+
+function hideModal() {
+    modal.classList.remove('show');
+    addFeedForm.reset();
+}
+
+addFeedButton.addEventListener('click', showModal);
+cancelButton.addEventListener('click', hideModal);
+
+// Close modal when clicking outside
+modal.addEventListener('click', (e) => {
+    if (e.target === modal) {
+        hideModal();
+    }
+});
+
+confirmButton.addEventListener('click', async () => {
+    const feedUrl = document.getElementById('feedUrl').value;
+    if (!feedUrl) {
+        return;
+    }
+
+    // TODO: Add API endpoint integration here
+    console.log('Feed URL to add:', feedUrl);
+    hideModal();
+}); 
\ No newline at end of file
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 30253cc..d23264d 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -11,7 +11,7 @@
             color: white;
             padding: 0.5rem 1rem;
             display: flex;
-            justify-content: flex-end;
+            justify-content: space-between;
             align-items: center;
             position: fixed;
             top: 0;
@@ -20,6 +20,12 @@
             z-index: 1000;
         }
 
+        .top-bar-buttons {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+        }
+
         .logout-button {
             background-color: #dc3545;
             color: white;
@@ -34,6 +40,110 @@
             background-color: #c82333;
         }
 
+        .add-feed-button {
+            background-color: #28a745;
+            color: white;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.9rem;
+        }
+
+        .add-feed-button:hover {
+            background-color: #218838;
+        }
+
+        /* Modal styles */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 2000;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal.show {
+            display: flex;
+        }
+
+        .modal-content {
+            background-color: white;
+            padding: 2rem;
+            border-radius: 8px;
+            width: 100%;
+            max-width: 500px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .modal-header {
+            margin-bottom: 1.5rem;
+        }
+
+        .modal-header h2 {
+            margin: 0;
+            color: #333;
+        }
+
+        .modal-body {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group {
+            margin-bottom: 1rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: #333;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 0.5rem;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 1rem;
+        }
+
+        .modal-footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: 1rem;
+        }
+
+        .modal-footer button {
+            padding: 0.5rem 1rem;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.9rem;
+        }
+
+        .btn-primary {
+            background-color: #007bff;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background-color: #0056b3;
+        }
+
+        .btn-secondary {
+            background-color: #6c757d;
+            color: white;
+        }
+
+        .btn-secondary:hover {
+            background-color: #545b62;
+        }
+
         /* Adjust main content to account for top bar */
         .with-sidebar {
             padding-top: 3rem;
@@ -46,8 +156,34 @@
 </head>
 <body class="with-sidebar">
     <div class="top-bar">
+        <div class="top-bar-buttons">
+            <button class="add-feed-button" id="addFeedButton">Add Feed</button>
+        </div>
         <button class="logout-button" id="logoutButton">Logout</button>
     </div>
+
+    <!-- Add Feed Modal -->
+    <div class="modal" id="addFeedModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Add RSS Feed</h2>
+            </div>
+            <div class="modal-body">
+                <form id="addFeedForm">
+                    <div class="form-group">
+                        <label for="feedUrl">Feed URL</label>
+                        <input type="url" id="feedUrl" name="feedUrl" required 
+                               placeholder="https://example.com/feed.xml">
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" id="cancelAddFeed">Cancel</button>
+                <button type="button" class="btn-primary" id="confirmAddFeed">OK</button>
+            </div>
+        </div>
+    </div>
+
     <div class="sidebar">
         <h2>Navigation</h2>
         <ul>
@@ -61,20 +197,6 @@
         <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     </div>
 
-    <script>
-        document.getElementById('logoutButton').addEventListener('click', async () => {
-            try {
-                const response = await fetch('/logout', {
-                    method: 'POST',
-                });
-
-                if (response.ok) {
-                    window.location.href = '/login';
-                }
-            } catch (error) {
-                console.error('Logout failed:', error);
-            }
-        });
-    </script>
+    <script src="/static/js/app.js"></script>
 </body>
 </html>