Add usage banner for free tier users on home page

Free tier users now see 'Free: X articles left [Upgrade Now]' banner.
Paid users see plan name with icon as before.  Banner replaces the
old plan display in user info card.

1 files changed, 32 insertions, 8 deletions

diff --git a/Biz/PodcastItLater/Web.py b/Biz/PodcastItLater/Web.py
index 95f891c..6c4d250 100644
--- a/Biz/PodcastItLater/Web.py
+++ b/Biz/PodcastItLater/Web.py
@@ -944,6 +944,37 @@ class HomePageAttrs(Attrs):
 class HomePage(Component[AnyChildren, HomePageAttrs]):
     """Main page combining all components."""
 
+    @staticmethod
+    def _render_plan_banner(user: dict[str, typing.Any]) -> html.div:
+        """Render plan banner with quota for free users."""
+        tier = user.get("plan_tier", "free")
+
+        if tier == "free":
+            # Get usage and show quota
+            period_start, period_end = Billing.get_period_boundaries(user)
+            usage = Billing.get_usage(user["id"], period_start, period_end)
+            articles_used = usage["articles"]
+            articles_limit = 10
+            articles_left = max(0, articles_limit - articles_used)
+
+            return html.div(
+                html.strong("Free: "),
+                f"{articles_left} articles left ",
+                html.a(
+                    "[Upgrade Now]",
+                    href="/billing",
+                    classes=["text-decoration-none"],
+                ),
+                classes=["mb-3", "text-warning"],
+            )
+        # Paid plan - just show plan name
+        return html.div(
+            html.i(classes=["bi", "bi-star", "me-2"]),
+            html.strong("Plan: "),
+            Billing.get_tier_info(tier)["name"],
+            classes=["mb-3", "text-muted", "small"],
+        )
+
     @override
     def render(self) -> html.html:
         queue_items = self.attrs["queue_items"]
@@ -1022,14 +1053,7 @@ class HomePage(Component[AnyChildren, HomePageAttrs]):
                                     user["email"],
                                     classes=["mb-2"],
                                 ),
-                                html.div(
-                                    html.i(classes=["bi", "bi-star", "me-2"]),
-                                    html.strong("Plan: "),
-                                    Billing.get_tier_info(
-                                        user.get("plan_tier", "free"),
-                                    )["name"],
-                                    classes=["mb-3", "text-muted", "small"],
-                                ),
+                                self._render_plan_banner(user),
                                 html.div(
                                     html.a(
                                         html.i(