From d7213d19bdaf9cbfadfaacf8684287b1b4769587 Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bsima.me>
Date: Fri, 5 Sep 2025 13:48:28 -0400
Subject: 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.
---
 Biz/PodcastItLater/Web.py | 40 ++++++++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 8 deletions(-)

(limited to 'Biz/PodcastItLater')

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)
-- 
cgit v1.2.3