From c846966535ef2531eab581a8c4e77f6bebdd1b5b Mon Sep 17 00:00:00 2001 From: Ben Sima Date: Wed, 12 Nov 2025 15:26:43 -0500 Subject: 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 --- Biz/PodcastItLater/Admin.py | 39 +++++++++++++++++---------------------- 1 file changed, 17 insertions(+), 22 deletions(-) (limited to 'Biz/PodcastItLater/Admin.py') 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, -- cgit v1.2.3