Convert user banner to horizontal navbar and make Upgrade btn-success

- Change Upgrade Now button from btn-warning to btn-success -
Convert user info card to Bootstrap navbar with horizontal layout -
Free tier: quota text and Upgrade Now button inline with navbar-text
styling - Paid tier: plan name displayed inline as navbar-text -
Email, plan info, and action buttons all in single horizontal bar -
Uses bg-body-tertiary for automatic light/dark mode compatibility

1 files changed, 79 insertions, 65 deletions

diff --git a/Biz/PodcastItLater/Web.py b/Biz/PodcastItLater/Web.py
index 8881c3a..dc5f86c 100644
--- a/Biz/PodcastItLater/Web.py
+++ b/Biz/PodcastItLater/Web.py
@@ -926,7 +926,9 @@ class HomePage(Component[AnyChildren, HomePageAttrs]):
     """Main page combining all components."""
 
     @staticmethod
-    def _render_plan_banner(user: dict[str, typing.Any]) -> html.div:
+    def _render_plan_banner(
+        user: dict[str, typing.Any],
+    ) -> html.div | html.span:
         """Render plan banner with quota for free users."""
         tier = user.get("plan_tier", "free")
 
@@ -939,10 +941,10 @@ class HomePage(Component[AnyChildren, HomePageAttrs]):
             articles_left = max(0, articles_limit - articles_used)
 
             return html.div(
-                html.div(
+                html.span(
                     html.strong("Free: "),
                     f"{articles_left} articles left",
-                    classes=["mb-2"],
+                    classes=["navbar-text", "me-3"],
                 ),
                 html.a(
                     html.i(
@@ -956,18 +958,18 @@ class HomePage(Component[AnyChildren, HomePageAttrs]):
                     href="/billing",
                     classes=[
                         "btn",
-                        "btn-warning",
+                        "btn-success",
                         "btn-sm",
                     ],
                 ),
-                classes=["mb-3"],
+                classes=["d-flex", "align-items-center"],
             )
         # Paid plan - just show plan name
-        return html.div(
+        return html.span(
             html.i(classes=["bi", "bi-star", "me-2"]),
             html.strong("Plan: "),
             Billing.get_tier_info(tier)["name"],
-            classes=["mb-3", "text-muted", "small"],
+            classes=["navbar-text"],
         )
 
     @override
@@ -1039,80 +1041,92 @@ class HomePage(Component[AnyChildren, HomePageAttrs]):
                     )
                     if self.attrs.get("error")
                     else html.div(),
-                    # User info card or login form
-                    html.div(
+                    # User info navbar
+                    html.nav(
                         html.div(
                             html.div(
-                                html.div(
+                                html.span(
                                     html.strong("Logged in as: "),
                                     user["email"],
-                                    classes=["mb-2"],
+                                    classes=["navbar-text", "me-3"],
                                 ),
                                 self._render_plan_banner(user),
-                                html.div(
-                                    html.a(
-                                        html.i(
-                                            classes=[
-                                                "bi",
-                                                "bi-credit-card",
-                                                "me-1",
-                                            ],
-                                        ),
-                                        "Billing",
-                                        href="/billing",
+                                classes=[
+                                    "d-flex",
+                                    "align-items-center",
+                                    "me-auto",
+                                ],
+                            ),
+                            html.div(
+                                html.a(
+                                    html.i(
                                         classes=[
-                                            "btn",
-                                            "btn-outline-secondary",
-                                            "btn-sm",
-                                            "me-2",
-                                            "mb-2",
+                                            "bi",
+                                            "bi-credit-card",
+                                            "me-1",
                                         ],
-                                    )
-                                    if user.get("plan_tier", "free") != "free"
-                                    else html.span(),
-                                    html.a(
-                                        html.i(
-                                            classes=[
-                                                "bi",
-                                                "bi-gear-fill",
-                                                "me-1",
-                                            ],
-                                        ),
-                                        "Admin Queue",
-                                        href="/admin",
+                                    ),
+                                    "Billing",
+                                    href="/billing",
+                                    classes=[
+                                        "btn",
+                                        "btn-outline-secondary",
+                                        "btn-sm",
+                                        "me-2",
+                                    ],
+                                )
+                                if user.get("plan_tier", "free") != "free"
+                                else html.span(),
+                                html.a(
+                                    html.i(
                                         classes=[
-                                            "btn",
-                                            "btn-outline-primary",
-                                            "btn-sm",
-                                            "me-2",
-                                            "mb-2",
+                                            "bi",
+                                            "bi-gear-fill",
+                                            "me-1",
                                         ],
-                                    )
-                                    if Core.is_admin(user)
-                                    else html.span(),
-                                    html.a(
-                                        html.i(
-                                            classes=[
-                                                "bi",
-                                                "bi-box-arrow-right",
-                                                "me-1",
-                                            ],
-                                        ),
-                                        "Logout",
-                                        href="/logout",
+                                    ),
+                                    "Admin Queue",
+                                    href="/admin",
+                                    classes=[
+                                        "btn",
+                                        "btn-outline-primary",
+                                        "btn-sm",
+                                        "me-2",
+                                    ],
+                                )
+                                if Core.is_admin(user)
+                                else html.span(),
+                                html.a(
+                                    html.i(
                                         classes=[
-                                            "btn",
-                                            "btn-outline-danger",
-                                            "btn-sm",
-                                            "mb-2",
+                                            "bi",
+                                            "bi-box-arrow-right",
+                                            "me-1",
                                         ],
                                     ),
-                                    classes=["d-flex", "flex-wrap"],
+                                    "Logout",
+                                    href="/logout",
+                                    classes=[
+                                        "btn",
+                                        "btn-outline-danger",
+                                        "btn-sm",
+                                    ],
                                 ),
-                                classes=["card-body"],
+                                classes=["d-flex", "align-items-center"],
                             ),
-                            classes=["card", "mb-4"],
+                            classes=[
+                                "container-fluid",
+                                "d-flex",
+                                "flex-wrap",
+                                "align-items-center",
+                            ],
                         ),
+                        classes=[
+                            "navbar",
+                            "navbar-expand",
+                            "bg-body-tertiary",
+                            "mb-4",
+                        ],
                     )
                     if user
                     else LoginForm(error=self.attrs.get("error")),