Add HTMX periodic updates for dashboard content

Implement periodic dashboard updates using HTMX to refresh queue
status and recent episodes. This improves user experience by
automatically updating content without full page reloads. Added a
new endpoint `/dashboard-updates` to fetch and render updated
dashboard components efficiently.

1 files changed, 32 insertions, 8 deletions

diff --git a/Biz/PodcastItLater/Web.py b/Biz/PodcastItLater/Web.py
index c1698f4..a4c3c16 100644
--- a/Biz/PodcastItLater/Web.py
+++ b/Biz/PodcastItLater/Web.py
@@ -290,9 +290,6 @@ class QueueStatus(Component[AnyChildren, QueueStatusAttrs]):
             return html.div(
                 html.h3("Queue Status"),
                 html.p("No items in queue"),
-                hx_get="/status",
-                hx_trigger="every 30s",
-                hx_swap="outerHTML",
             )
 
         queue_items = []
@@ -389,9 +386,6 @@ class QueueStatus(Component[AnyChildren, QueueStatusAttrs]):
         return html.div(
             html.h3("Queue Status"),
             *queue_items,
-            hx_get="/status",
-            hx_trigger="every 1s, queue-updated from:body",
-            hx_swap="outerHTML",
         )
 
 
@@ -543,8 +537,16 @@ class HomePage(Component[AnyChildren, HomePageAttrs]):
                             # Only show submit form and content if logged in
                             html.div(
                                 SubmitForm(),
-                                QueueStatus(items=queue_items),
-                                EpisodeList(episodes=episodes),
+                                html.div(
+                                    QueueStatus(items=queue_items),
+                                    EpisodeList(episodes=episodes),
+                                    id="dashboard-content",
+                                    hx_get="/dashboard-updates",
+                                    hx_trigger=(
+                                        "every 3s, queue-updated from:body"
+                                    ),
+                                    hx_swap="innerHTML",
+                                ),
                                 classes=["container"],
                             )
                             if user
@@ -883,6 +885,28 @@ def queue_status(request: Request) -> QueueStatus:
     return QueueStatus(items=queue_items)
 
 
+@app.get("/dashboard-updates")
+def dashboard_updates(request: Request) -> html.div:
+    """Return both queue status and recent episodes for dashboard updates."""
+    # Check if user is logged in
+    user_id = request.session.get("user_id")
+    if not user_id:
+        return html.div(
+            QueueStatus(items=[]),
+            EpisodeList(episodes=[]),
+        )
+
+    # Get user-specific queue items and episodes
+    queue_items = Core.Database.get_user_queue_status(user_id)
+    episodes = Core.Database.get_user_recent_episodes(user_id, 10)
+
+    return html.div(
+        QueueStatus(items=queue_items),
+        EpisodeList(episodes=episodes),
+        id="dashboard-content",
+    )
+
+
 # Register admin routes
 app.get("/admin")(Admin.admin_queue_status)
 app.post("/queue/{job_id}/retry")(Admin.retry_queue_item)