feat: implement t-1f9Td4U

2 files changed, 143 insertions, 141 deletions

diff --git a/Biz/PodcastItLater/Test.py b/Biz/PodcastItLater/Test.py
index b2a1d24..44c915d 100644
--- a/Biz/PodcastItLater/Test.py
+++ b/Biz/PodcastItLater/Test.py
@@ -19,6 +19,7 @@
 # : out podcastitlater-e2e-test
 # : run ffmpeg
 import Biz.PodcastItLater.Core as Core
+import Biz.PodcastItLater.UI as UI
 import Biz.PodcastItLater.Web as Web
 import Biz.PodcastItLater.Worker as Worker
 import Omni.App as App
@@ -208,12 +209,60 @@ class TestEndToEnd(BaseWebTest):
         self.assertIn("Other User's Article", response.text)
 
 
+class TestUI(Test.TestCase):
+    """Test UI components."""
+
+    def test_render_navbar(self) -> None:
+        """Test navbar rendering."""
+        user = {"email": "test@example.com", "id": 1}
+        layout = UI.PageLayout(
+            user=user,
+            current_page="home",
+            error=None,
+            page_title="Test",
+            meta_tags=[],
+        )
+        navbar = layout._render_navbar(user, "home")
+        html_output = navbar.to_html()
+
+        # Check basic structure
+        self.assertIn("navbar", html_output)
+        self.assertIn("Home", html_output)
+        self.assertIn("Public Feed", html_output)
+        self.assertIn("Pricing", html_output)
+        self.assertIn("Manage Account", html_output)
+
+        # Check active state
+        self.assertIn("active", html_output)
+
+        # Check non-admin user doesn't see admin menu
+        self.assertNotIn("Admin", html_output)
+
+    def test_render_navbar_admin(self) -> None:
+        """Test navbar rendering for admin."""
+        user = {"email": "ben@bensima.com", "id": 1}  # Admin email
+        layout = UI.PageLayout(
+            user=user,
+            current_page="admin",
+            error=None,
+            page_title="Test",
+            meta_tags=[],
+        )
+        navbar = layout._render_navbar(user, "admin")
+        html_output = navbar.to_html()
+
+        # Check admin menu present
+        self.assertIn("Admin", html_output)
+        self.assertIn("Queue Status", html_output)
+
+
 def test() -> None:
     """Run all end-to-end tests."""
     Test.run(
         App.Area.Test,
         [
             TestEndToEnd,
+            TestUI,
         ],
     )
 
diff --git a/Biz/PodcastItLater/UI.py b/Biz/PodcastItLater/UI.py
index 27f5fff..95abd22 100644
--- a/Biz/PodcastItLater/UI.py
+++ b/Biz/PodcastItLater/UI.py
@@ -90,7 +90,7 @@ def create_auto_dark_mode_style() -> html.style:
 
             /* Navbar dark mode */
             .navbar.bg-body-tertiary {
-            background-color: #2b3035 !important;
+                background-color: #2b3035 !important;
             }
 
             .navbar .navbar-text {
@@ -151,6 +151,77 @@ class PageLayout(Component[AnyChildren, PageLayoutAttrs]):
     """Reusable page layout with header and navbar."""
 
     @staticmethod
+    def _render_nav_item(
+        label: str,
+        href: str,
+        icon: str,
+        is_active: bool,
+    ) -> html.li:
+        return html.li(
+            html.a(
+                html.i(classes=["bi", f"bi-{icon}", "me-1"]),
+                label,
+                href=href,
+                classes=[
+                    "nav-link",
+                    "active" if is_active else "",
+                ],
+            ),
+            classes=["nav-item"],
+        )
+
+    @staticmethod
+    def _render_admin_dropdown(
+        is_active_func: typing.Callable[[str], bool],
+    ) -> html.li:
+        is_active = is_active_func("admin") or is_active_func("admin-users")
+        return html.li(
+            html.a(  # type: ignore[call-arg]
+                html.i(classes=["bi", "bi-gear-fill", "me-1"]),
+                "Admin",
+                href="#",
+                id="adminDropdown",
+                role="button",
+                data_bs_toggle="dropdown",
+                aria_expanded="false",
+                classes=[
+                    "nav-link",
+                    "dropdown-toggle",
+                    "active" if is_active else "",
+                ],
+            ),
+            html.ul(  # type: ignore[call-arg]
+                html.li(
+                    html.a(
+                        html.i(classes=["bi", "bi-list-task", "me-2"]),
+                        "Queue Status",
+                        href="/admin",
+                        classes=["dropdown-item"],
+                    ),
+                ),
+                html.li(
+                    html.a(
+                        html.i(classes=["bi", "bi-people-fill", "me-2"]),
+                        "Manage Users",
+                        href="/admin/users",
+                        classes=["dropdown-item"],
+                    ),
+                ),
+                html.li(
+                    html.a(
+                        html.i(classes=["bi", "bi-graph-up", "me-2"]),
+                        "Metrics",
+                        href="/admin/metrics",
+                        classes=["dropdown-item"],
+                    ),
+                ),
+                classes=["dropdown-menu"],
+                aria_labelledby="adminDropdown",
+            ),
+            classes=["nav-item", "dropdown"],
+        )
+
+    @staticmethod
     def _render_navbar(
         user: dict[str, typing.Any] | None,
         current_page: str,
@@ -174,150 +245,31 @@ class PageLayout(Component[AnyChildren, PageLayoutAttrs]):
                 ),
                 html.div(
                     html.ul(
-                        html.li(
-                            html.a(
-                                html.i(
-                                    classes=[
-                                        "bi",
-                                        "bi-house-fill",
-                                        "me-1",
-                                    ],
-                                ),
-                                "Home",
-                                href="/",
-                                classes=[
-                                    "nav-link",
-                                    "active" if is_active("home") else "",
-                                ],
-                            ),
-                            classes=["nav-item"],
+                        PageLayout._render_nav_item(
+                            "Home",
+                            "/",
+                            "house-fill",
+                            is_active("home"),
                         ),
-                        html.li(
-                            html.a(
-                                html.i(
-                                    classes=[
-                                        "bi",
-                                        "bi-globe",
-                                        "me-1",
-                                    ],
-                                ),
-                                "Public Feed",
-                                href="/public",
-                                classes=[
-                                    "nav-link",
-                                    "active" if is_active("public") else "",
-                                ],
-                            ),
-                            classes=["nav-item"],
+                        PageLayout._render_nav_item(
+                            "Public Feed",
+                            "/public",
+                            "globe",
+                            is_active("public"),
                         ),
-                        html.li(
-                            html.a(
-                                html.i(
-                                    classes=[
-                                        "bi",
-                                        "bi-stars",
-                                        "me-1",
-                                    ],
-                                ),
-                                "Pricing",
-                                href="/pricing",
-                                classes=[
-                                    "nav-link",
-                                    "active" if is_active("pricing") else "",
-                                ],
-                            ),
-                            classes=["nav-item"],
+                        PageLayout._render_nav_item(
+                            "Pricing",
+                            "/pricing",
+                            "stars",
+                            is_active("pricing"),
                         ),
-                        html.li(
-                            html.a(
-                                html.i(
-                                    classes=[
-                                        "bi",
-                                        "bi-person-circle",
-                                        "me-1",
-                                    ],
-                                ),
-                                "Manage Account",
-                                href="/account",
-                                classes=[
-                                    "nav-link",
-                                    "active" if is_active("account") else "",
-                                ],
-                            ),
-                            classes=["nav-item"],
+                        PageLayout._render_nav_item(
+                            "Manage Account",
+                            "/account",
+                            "person-circle",
+                            is_active("account"),
                         ),
-                        html.li(
-                            html.a(  # type: ignore[call-arg]
-                                html.i(
-                                    classes=[
-                                        "bi",
-                                        "bi-gear-fill",
-                                        "me-1",
-                                    ],
-                                ),
-                                "Admin",
-                                href="#",
-                                id="adminDropdown",
-                                role="button",
-                                data_bs_toggle="dropdown",
-                                aria_expanded="false",
-                                classes=[
-                                    "nav-link",
-                                    "dropdown-toggle",
-                                    "active"
-                                    if is_active("admin")
-                                    or is_active("admin-users")
-                                    else "",
-                                ],
-                            ),
-                            html.ul(  # type: ignore[call-arg]
-                                html.li(
-                                    html.a(
-                                        html.i(
-                                            classes=[
-                                                "bi",
-                                                "bi-list-task",
-                                                "me-2",
-                                            ],
-                                        ),
-                                        "Queue Status",
-                                        href="/admin",
-                                        classes=["dropdown-item"],
-                                    ),
-                                ),
-                                html.li(
-                                    html.a(
-                                        html.i(
-                                            classes=[
-                                                "bi",
-                                                "bi-people-fill",
-                                                "me-2",
-                                            ],
-                                        ),
-                                        "Manage Users",
-                                        href="/admin/users",
-                                        classes=["dropdown-item"],
-                                    ),
-                                ),
-                                html.li(
-                                    html.a(
-                                        html.i(
-                                            classes=[
-                                                "bi",
-                                                "bi-graph-up",
-                                                "me-2",
-                                            ],
-                                        ),
-                                        "Metrics",
-                                        href="/admin/metrics",
-                                        classes=["dropdown-item"],
-                                    ),
-                                ),
-                                classes=["dropdown-menu"],
-                                aria_labelledby="adminDropdown",
-                            ),
-                            classes=["nav-item", "dropdown"],
-                        )
+                        PageLayout._render_admin_dropdown(is_active)
                         if user and is_admin(user)
                         else html.span(),
                         classes=["navbar-nav"],
@@ -336,6 +288,7 @@ class PageLayout(Component[AnyChildren, PageLayoutAttrs]):
             ],
         )
 
+
     @override
     def render(self) -> html.html:
         user = self.attrs.get("user")