Refactor UI components and add dark mode to admin pages

- Create shared UI module (Biz/PodcastItLater/UI.py) with:
  - create_bootstrap_styles() - create_auto_dark_mode_style() -
  create_htmx_script() - create_bootstrap_js()
- Update Admin.py to use shared UI module and add dark mode support -
Update Web.py to use shared UI module - Admin Queue and User Management
pages now support automatic dark mode

1 files changed, 17 insertions, 22 deletions

diff --git a/Biz/PodcastItLater/Admin.py b/Biz/PodcastItLater/Admin.py
index 7dd0c50..4920b39 100644
--- a/Biz/PodcastItLater/Admin.py
+++ b/Biz/PodcastItLater/Admin.py
@@ -12,6 +12,7 @@ Admin pages and functionality for managing users and queue items.
 # : dep pytest-asyncio
 # : dep pytest-mock
 import Biz.PodcastItLater.Core as Core
+import Biz.PodcastItLater.UI as UI
 import ludic.catalog.layouts as layouts
 import ludic.html as html
 
@@ -290,16 +291,6 @@ def create_table_header(columns: list[str]) -> html.thead:
     )
 
 
-def create_bootstrap_styles() -> html.style:
-    """Load Bootstrap CSS for admin pages."""
-    return html.style(
-        "@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2"
-        "/dist/css/bootstrap.min.css');"
-        "@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons"
-        "@1.11.3/font/bootstrap-icons.min.css');",
-    )
-
-
 class AdminUsers(Component[AnyChildren, AdminUsersAttrs]):
     """Admin view for managing users."""
 
@@ -314,15 +305,17 @@ class AdminUsers(Component[AnyChildren, AdminUsersAttrs]):
                     name="viewport",
                     content="width=device-width, initial-scale=1",
                 ),
-                html.title("PodcastItLater - User Management"),
-                html.script(
-                    src="https://unpkg.com/htmx.org@1.9.10",
-                    integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC",
-                    crossorigin="anonymous",
+                html.meta(
+                    name="color-scheme",
+                    content="light dark",
                 ),
+                html.title("PodcastItLater - User Management"),
+                UI.create_htmx_script(),
             ),
             html.body(
-                create_bootstrap_styles(),
+                UI.create_bootstrap_styles(),
+                # Auto dark mode CSS (must come after Bootstrap)
+                UI.create_auto_dark_mode_style(),
                 html.div(
                     html.h1(
                         "PodcastItLater - User Management",
@@ -390,15 +383,17 @@ class AdminView(Component[AnyChildren, AdminViewAttrs]):
                     name="viewport",
                     content="width=device-width, initial-scale=1",
                 ),
-                html.title("PodcastItLater - Admin Queue Status"),
-                html.script(
-                    src="https://unpkg.com/htmx.org@1.9.10",
-                    integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC",
-                    crossorigin="anonymous",
+                html.meta(
+                    name="color-scheme",
+                    content="light dark",
                 ),
+                html.title("PodcastItLater - Admin Queue Status"),
+                UI.create_htmx_script(),
             ),
             html.body(
-                create_bootstrap_styles(),
+                UI.create_bootstrap_styles(),
+                # Auto dark mode CSS (must come after Bootstrap)
+                UI.create_auto_dark_mode_style(),
                 html.div(
                     AdminView._render_content(
                         queue_items,