Add village hall page summary with infinite scroll

New /<slug>/ route shows upcoming confirmed events across all calendars
for a container. Features list/tile view toggle, date-grouped cards,
ticket +/- cart widgets, and infinite scroll pagination.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app.py

@@ -8,7 +8,7 @@ from jinja2 import FileSystemLoader, ChoiceLoader
 
 from shared.infrastructure.factory import create_base_app
 
-from bp import register_calendars, register_markets, register_payments
+from bp import register_calendars, register_markets, register_payments, register_page
 
 
 async def events_context() -> dict:
@@ -55,6 +55,12 @@ def create_app() -> "Quart":
         app.jinja_loader,
     ])
 
+    # Page summary: /<slug>/ — upcoming events across all calendars
+    app.register_blueprint(
+        register_page(),
+        url_prefix="/<slug>",
+    )
+
     # Calendars nested under post slug: /<slug>/calendars/...
     app.register_blueprint(
         register_calendars(),

bp/__init__.py

@@ -1,3 +1,4 @@
 from .calendars.routes import register as register_calendars
 from .markets.routes import register as register_markets
 from .payments.routes import register as register_payments
+from .page.routes import register as register_page

bp/page/routes.py

@@ -0,0 +1,81 @@
+"""
+Page summary blueprint — shows upcoming events across all calendars
+for a container (e.g. the village hall).
+
+Routes:
+  GET /<slug>/          — full page with first page of entries
+  GET /<slug>/entries   — HTMX fragment for infinite scroll
+"""
+from __future__ import annotations
+
+from quart import Blueprint, g, request, render_template, make_response
+
+from shared.browser.app.utils.htmx import is_htmx_request
+from shared.infrastructure.cart_identity import current_cart_identity
+from shared.services.registry import services
+
+
+def register() -> Blueprint:
+    bp = Blueprint("page_summary", __name__)
+
+    async def _load_entries(post_id, page, per_page=20):
+        """Load upcoming entries + pending ticket counts for current user."""
+        entries, has_more = await services.calendar.upcoming_entries_for_container(
+            g.s, "page", post_id, page=page, per_page=per_page,
+        )
+
+        # Pending ticket counts keyed by entry_id
+        ident = current_cart_identity()
+        pending_tickets = {}
+        if entries:
+            tickets = await services.calendar.pending_tickets(
+                g.s, user_id=ident["user_id"], session_id=ident["session_id"],
+            )
+            for t in tickets:
+                if t.entry_id is not None:
+                    pending_tickets[t.entry_id] = pending_tickets.get(t.entry_id, 0) + 1
+
+        return entries, has_more, pending_tickets
+
+    @bp.get("/")
+    async def index():
+        post = g.post_data["post"]
+        view = request.args.get("view", "list")
+        page = int(request.args.get("page", 1))
+
+        entries, has_more, pending_tickets = await _load_entries(post["id"], page)
+
+        ctx = dict(
+            entries=entries,
+            has_more=has_more,
+            pending_tickets=pending_tickets,
+            page=page,
+            view=view,
+        )
+
+        if is_htmx_request():
+            html = await render_template("_types/page_summary/_main_panel.html", **ctx)
+        else:
+            html = await render_template("_types/page_summary/index.html", **ctx)
+
+        return await make_response(html, 200)
+
+    @bp.get("/entries")
+    async def entries_fragment():
+        post = g.post_data["post"]
+        view = request.args.get("view", "list")
+        page = int(request.args.get("page", 1))
+
+        entries, has_more, pending_tickets = await _load_entries(post["id"], page)
+
+        html = await render_template(
+            "_types/page_summary/_cards.html",
+            entries=entries,
+            has_more=has_more,
+            pending_tickets=pending_tickets,
+            page=page,
+            view=view,
+        )
+        return await make_response(html, 200)
+
+    return bp

templates/_types/page_summary/_card.html

@@ -0,0 +1,93 @@
+{# List card for page summary — one entry #}
+<article class="rounded-xl bg-white shadow-sm border border-stone-200 p-4">
+  <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-3">
+    {# Left: event info #}
+    <div class="flex-1 min-w-0">
+      {% set day_href = events_url('/' ~ post.slug ~ '/calendars/' ~ entry.calendar_slug ~ '/' ~ entry.start_at.strftime('%Y/%m/%d') ~ '/') %}
+      <a href="{{ day_href }}" class="hover:text-emerald-700">
+        <h2 class="text-lg font-semibold text-stone-900">{{ entry.name }}</h2>
+      </a>
+
+      {% if entry.calendar_name %}
+        <span class="inline-block mt-1 px-2 py-0.5 rounded-full text-xs font-medium bg-sky-100 text-sky-700">
+          {{ entry.calendar_name }}
+        </span>
+      {% endif %}
+
+      <div class="mt-1 text-sm text-stone-500">
+        {{ entry.start_at.strftime('%H:%M') }}{% if entry.end_at %} &ndash; {{ entry.end_at.strftime('%H:%M') }}{% endif %}
+      </div>
+
+      {% if entry.cost %}
+        <div class="mt-1 text-sm font-medium text-green-600">
+          &pound;{{ '%.2f'|format(entry.cost) }}
+        </div>
+      {% endif %}
+    </div>
+
+    {# Right: ticket widget #}
+    {% if entry.ticket_price is not none %}
+      <div class="shrink-0">
+        {% set qty = pending_tickets.get(entry.id, 0) %}
+        {% set ticket_url = cart_url('/ticket-quantity/') %}
+        <div class="flex items-center gap-2 text-sm">
+          <span class="text-green-600 font-medium">&pound;{{ '%.2f'|format(entry.ticket_price) }}</span>
+
+          {% if qty == 0 %}
+            <form
+              action="{{ ticket_url }}"
+              method="post"
+              hx-post="{{ ticket_url }}"
+              hx-swap="none"
+            >
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+              <input type="hidden" name="entry_id" value="{{ entry.id }}">
+              <input type="hidden" name="count" value="1">
+              <button
+                type="submit"
+                class="relative inline-flex items-center justify-center text-stone-500 hover:bg-emerald-50 rounded p-1"
+              >
+                <i class="fa fa-cart-plus text-2xl" aria-hidden="true"></i>
+              </button>
+            </form>
+          {% else %}
+            <form
+              action="{{ ticket_url }}"
+              method="post"
+              hx-post="{{ ticket_url }}"
+              hx-swap="none"
+            >
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+              <input type="hidden" name="entry_id" value="{{ entry.id }}">
+              <input type="hidden" name="count" value="{{ qty - 1 }}">
+              <button type="submit"
+                class="inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl">-</button>
+            </form>
+
+            <a class="relative inline-flex items-center justify-center text-emerald-700" href="{{ cart_url('/') }}">
+              <span class="relative inline-flex items-center justify-center">
+                <i class="fa-solid fa-shopping-cart text-xl" aria-hidden="true"></i>
+                <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none">
+                  <span class="flex items-center justify-center bg-black text-white rounded-full w-4 h-4 text-xs font-bold">{{ qty }}</span>
+                </span>
+              </span>
+            </a>
+
+            <form
+              action="{{ ticket_url }}"
+              method="post"
+              hx-post="{{ ticket_url }}"
+              hx-swap="none"
+            >
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+              <input type="hidden" name="entry_id" value="{{ entry.id }}">
+              <input type="hidden" name="count" value="{{ qty + 1 }}">
+              <button type="submit"
+                class="inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl">+</button>
+            </form>
+          {% endif %}
+        </div>
+      </div>
+    {% endif %}
+  </div>
+</article>

templates/_types/page_summary/_card_tile.html

@@ -0,0 +1,84 @@
+{# Tile card for page summary — compact event tile #}
+<article class="rounded-xl bg-white shadow-sm border border-stone-200 overflow-hidden">
+  {% set day_href = events_url('/' ~ post.slug ~ '/calendars/' ~ entry.calendar_slug ~ '/' ~ entry.start_at.strftime('%Y/%m/%d') ~ '/') %}
+  <a href="{{ day_href }}" class="block hover:bg-stone-50 transition">
+    <div class="p-3">
+      <h2 class="text-base font-semibold text-stone-900 line-clamp-2">{{ entry.name }}</h2>
+
+      {% if entry.calendar_name %}
+        <span class="inline-block mt-1 px-2 py-0.5 rounded-full text-xs font-medium bg-sky-100 text-sky-700">
+          {{ entry.calendar_name }}
+        </span>
+      {% endif %}
+
+      <div class="mt-1 text-xs text-stone-500">
+        {{ entry.start_at.strftime('%a %-d %b') }}
+        &middot;
+        {{ entry.start_at.strftime('%H:%M') }}{% if entry.end_at %} &ndash; {{ entry.end_at.strftime('%H:%M') }}{% endif %}
+      </div>
+
+      {% if entry.cost %}
+        <div class="mt-1 text-sm font-medium text-green-600">
+          &pound;{{ '%.2f'|format(entry.cost) }}
+        </div>
+      {% endif %}
+    </div>
+  </a>
+
+  {# Ticket widget below card #}
+  {% if entry.ticket_price is not none %}
+    <div class="border-t border-stone-100 px-3 py-2 flex items-center justify-between">
+      <span class="text-xs text-green-600 font-medium">&pound;{{ '%.2f'|format(entry.ticket_price) }}/ticket</span>
+
+      {% set qty = pending_tickets.get(entry.id, 0) %}
+      {% set ticket_url = cart_url('/ticket-quantity/') %}
+
+      {% if qty == 0 %}
+        <form
+          action="{{ ticket_url }}"
+          method="post"
+          hx-post="{{ ticket_url }}"
+          hx-swap="none"
+        >
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+          <input type="hidden" name="entry_id" value="{{ entry.id }}">
+          <input type="hidden" name="count" value="1">
+          <button type="submit"
+            class="relative inline-flex items-center justify-center text-stone-500 hover:bg-emerald-50 rounded p-1">
+            <i class="fa fa-cart-plus text-xl" aria-hidden="true"></i>
+          </button>
+        </form>
+      {% else %}
+        <div class="flex items-center gap-1">
+          <form
+            action="{{ ticket_url }}"
+            method="post"
+            hx-post="{{ ticket_url }}"
+            hx-swap="none"
+          >
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+            <input type="hidden" name="entry_id" value="{{ entry.id }}">
+            <input type="hidden" name="count" value="{{ qty - 1 }}">
+            <button type="submit"
+              class="inline-flex items-center justify-center w-6 h-6 text-xs font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50">-</button>
+          </form>
+
+          <span class="inline-flex items-center justify-center px-1.5 py-0.5 rounded-full bg-stone-100 text-xs font-medium">{{ qty }}</span>
+
+          <form
+            action="{{ ticket_url }}"
+            method="post"
+            hx-post="{{ ticket_url }}"
+            hx-swap="none"
+          >
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+            <input type="hidden" name="entry_id" value="{{ entry.id }}">
+            <input type="hidden" name="count" value="{{ qty + 1 }}">
+            <button type="submit"
+              class="inline-flex items-center justify-center w-6 h-6 text-xs font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50">+</button>
+          </form>
+        </div>
+      {% endif %}
+    </div>
+  {% endif %}
+</article>

templates/_types/page_summary/_cards.html

@@ -0,0 +1,31 @@
+{% for entry in entries %}
+  {% if view == 'tile' %}
+    {% include "_types/page_summary/_card_tile.html" %}
+  {% else %}
+    {# Date header when date changes (list view only) #}
+    {% set entry_date = entry.start_at.strftime('%A %-d %B %Y') %}
+    {% if loop.first or entry_date != entries[loop.index0 - 1].start_at.strftime('%A %-d %B %Y') %}
+      <div class="pt-2 pb-1">
+        <h3 class="text-sm font-semibold text-stone-500 uppercase tracking-wide">
+          {{ entry_date }}
+        </h3>
+      </div>
+    {% endif %}
+    {% include "_types/page_summary/_card.html" %}
+  {% endif %}
+{% endfor %}
+{% if has_more %}
+  {# Infinite scroll sentinel #}
+  {% set entries_url = url_for('page_summary.entries_fragment', page=page + 1, view=view if view != 'list' else '')|host %}
+  <div
+    id="sentinel-{{ page }}"
+    class="h-4 opacity-0 pointer-events-none"
+    hx-get="{{ entries_url }}"
+    hx-trigger="intersect once delay:250ms"
+    hx-swap="outerHTML"
+    role="status"
+    aria-hidden="true"
+  >
+    <div class="text-center text-xs text-stone-400">loading...</div>
+  </div>
+{% endif %}

templates/_types/page_summary/_main_panel.html

@@ -0,0 +1,54 @@
+{# View toggle bar - desktop only #}
+<div class="hidden md:flex justify-end px-3 pt-3 gap-1">
+  {% set list_href = (current_local_href ~ {'view': None}|qs)|host %}
+  {% set tile_href = (current_local_href ~ {'view': 'tile'}|qs)|host %}
+  <a
+    href="{{ list_href }}"
+    hx-get="{{ list_href }}"
+    hx-target="#main-panel"
+    hx-select="{{hx_select_search}}"
+    hx-swap="outerHTML"
+    hx-push-url="true"
+    class="p-1.5 rounded {{ 'bg-stone-200 text-stone-800' if view != 'tile' else 'text-stone-400 hover:text-stone-600' }}"
+    title="List view"
+    _="on click js localStorage.removeItem('events_view') end"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+    </svg>
+  </a>
+  <a
+    href="{{ tile_href }}"
+    hx-get="{{ tile_href }}"
+    hx-target="#main-panel"
+    hx-select="{{hx_select_search}}"
+    hx-swap="outerHTML"
+    hx-push-url="true"
+    class="p-1.5 rounded {{ 'bg-stone-200 text-stone-800' if view == 'tile' else 'text-stone-400 hover:text-stone-600' }}"
+    title="Tile view"
+    _="on click js localStorage.setItem('events_view','tile') end"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
+    </svg>
+  </a>
+</div>
+
+{# Cards container - list or grid based on view #}
+{% if entries %}
+  {% if view == 'tile' %}
+    <div class="max-w-full px-3 py-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+      {% include "_types/page_summary/_cards.html" %}
+    </div>
+  {% else %}
+    <div class="max-w-full px-3 py-3 space-y-3">
+      {% include "_types/page_summary/_cards.html" %}
+    </div>
+  {% endif %}
+{% else %}
+  <div class="px-3 py-12 text-center text-stone-400">
+    <i class="fa fa-calendar-xmark text-4xl mb-3" aria-hidden="true"></i>
+    <p class="text-lg">No upcoming events</p>
+  </div>
+{% endif %}
+<div class="pb-8"></div>

templates/_types/page_summary/index.html

@@ -0,0 +1,15 @@
+{% extends '_types/root/_index.html' %}
+
+{% block meta %}{% endblock %}
+
+{% block root_header_child %}
+  {% from '_types/root/_n/macros.html' import index_row with context %}
+  {% call index_row('post-header-child', '_types/post/header/_header.html') %}
+    {% block post_header_child %}
+    {% endblock %}
+  {% endcall %}
+{% endblock %}
+
+{% block content %}
+  {% include '_types/page_summary/_main_panel.html' %}
+{% endblock %}