Replace 21 Jinja render_template() calls with sx render functions

Phase 1: Wire 16 events routes to existing sx render functions
- slot, slots, ticket_types, ticket_type, calendar_entries,
  calendar_entry, calendar_entry/admin

Phase 2: Orders checkout return (2 calls)
- New orders/sx/checkout.sx with return page components
- New render_checkout_return_page() in orders/sx/sx_components.py

Phase 3: Blog menu items (3 calls)
- New blog/sx/menu_items.sx with search result components
- New render_menu_item_form() and render_page_search_results()
  in blog/sx/sx_components.py

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

blog/bp/menu_items/routes.py

@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from quart import Blueprint, render_template, make_response, request, jsonify, g
+from quart import Blueprint, make_response, request, jsonify, g
 
 from shared.browser.app.authz import require_admin
 from .services.menu_items import (
@@ -46,11 +46,8 @@ def register():
     @require_admin
     async def new_menu_item():
         """Show form to create new menu item"""
-        html = await render_template(
-            "_types/menu_items/_form.html",
-            menu_item=None,
-        )
-        return await make_response(html)
+        from sx.sx_components import render_menu_item_form
+        return sx_response(render_menu_item_form())
 
     @bp.post("/")
     @require_admin
@@ -89,11 +86,8 @@ def register():
         if not menu_item:
             return await make_response("Menu item not found", 404)
 
-        html = await render_template(
-            "_types/menu_items/_form.html",
-            menu_item=menu_item,
-        )
-        return await make_response(html)
+        from sx.sx_components import render_menu_item_form
+        return sx_response(render_menu_item_form(menu_item=menu_item))
 
     @bp.put("/<int:item_id>/")
     @require_admin
@@ -153,14 +147,8 @@ def register():
         pages, total = await search_pages(g.s, query, page, per_page)
         has_more = (page * per_page) < total
 
-        html = await render_template(
-            "_types/menu_items/_page_search_results.html",
-            pages=pages,
-            query=query,
-            page=page,
-            has_more=has_more,
-        )
-        return await make_response(html)
+        from sx.sx_components import render_page_search_results
+        return sx_response(render_page_search_results(pages, query, page, has_more))
 
     @bp.post("/reorder/")
     @require_admin

blog/sx/menu_items.sx

@@ -0,0 +1,26 @@
+;; Menu item form and page search components
+
+(defcomp ~page-search-item (&key id title slug feature-image)
+  (div :class "flex items-center gap-3 p-3 hover:bg-stone-50 cursor-pointer border-b last:border-b-0"
+    :data-page-id id :data-page-title title :data-page-slug slug
+    :data-page-image (or feature-image "")
+    (if feature-image
+      (img :src feature-image :alt title :class "w-10 h-10 rounded-full object-cover flex-shrink-0")
+      (div :class "w-10 h-10 rounded-full bg-stone-200 flex-shrink-0"))
+    (div :class "flex-1 min-w-0"
+      (div :class "font-medium truncate" title)
+      (div :class "text-xs text-stone-500 truncate" slug))))
+
+(defcomp ~page-search-results (&key items sentinel)
+  (div :class "border border-stone-200 rounded-md max-h-64 overflow-y-auto"
+    items sentinel))
+
+(defcomp ~page-search-sentinel (&key url query next-page)
+  (div :sx-get url :sx-trigger "intersect once" :sx-swap "outerHTML"
+    :sx-vals (str "{\"q\": \"" query "\", \"page\": " next-page "}")
+    :class "p-3 text-center text-sm text-stone-400"
+    (i :class "fa fa-spinner fa-spin") " Loading more..."))
+
+(defcomp ~page-search-empty (&key query)
+  (div :class "p-3 text-center text-stone-400 border border-stone-200 rounded-md"
+    (str "No pages found matching \"" query "\"")))

blog/sx/sx_components.py

@@ -1706,6 +1706,124 @@ def render_menu_items_list(menu_items) -> str:
     return _menu_items_list_sx(ctx)
 
 
+def render_menu_item_form(menu_item=None) -> str:
+    """Render menu item add/edit form (replaces _types/menu_items/_form.html)."""
+    from quart import url_for as qurl
+    from shared.browser.app.csrf import generate_csrf_token
+
+    csrf = generate_csrf_token()
+    search_url = qurl("menu_items.search_pages_route")
+    is_edit = menu_item is not None
+
+    if is_edit:
+        action_url = qurl("menu_items.update_menu_item_route", item_id=menu_item.id)
+        action_attr = f'sx-put="{action_url}"'
+        post_id = str(menu_item.container_id) if menu_item.container_id else ""
+        label = getattr(menu_item, "label", "") or ""
+        slug = getattr(menu_item, "slug", "") or ""
+        fi = getattr(menu_item, "feature_image", None) or ""
+    else:
+        action_url = qurl("menu_items.create_menu_item_route")
+        action_attr = f'sx-post="{action_url}"'
+        post_id = ""
+        label = ""
+        slug = ""
+        fi = ""
+
+    # Build selected page display
+    if post_id:
+        img_html = (f'<img src="{fi}" alt="{label}" class="w-10 h-10 rounded-full object-cover" />'
+                    if fi else '<div class="w-10 h-10 rounded-full bg-stone-200"></div>')
+        selected = (f'<div id="selected-page-display" class="mb-3 p-3 bg-stone-50 rounded flex items-center gap-3">'
+                    f'{img_html}<div class="flex-1"><div class="font-medium">{label}</div>'
+                    f'<div class="text-xs text-stone-500">{slug}</div></div></div>')
+    else:
+        selected = '<div id="selected-page-display" class="mb-3 hidden"></div>'
+
+    close_js = "document.getElementById('menu-item-form').innerHTML = ''"
+    title = "Edit Menu Item" if is_edit else "Add Menu Item"
+
+    html = f'''<div class="bg-white rounded-lg shadow p-6 mb-6" id="menu-item-form-container">
+  <div class="flex justify-between items-center mb-4">
+    <h2 class="text-xl font-semibold">{title}</h2>
+    <button type="button" onclick="{close_js}" class="text-stone-400 hover:text-stone-600">
+      <i class="fa fa-times"></i></button>
+  </div>
+  <input type="hidden" name="post_id" id="selected-post-id" value="{post_id}" />
+  {selected}
+  <form {action_attr} sx-target="#menu-items-list" sx-swap="innerHTML"
+    sx-include="#selected-post-id"
+    sx-on:afterRequest="if(event.detail.successful) {{ {close_js} }}"
+    class="space-y-4">
+    <input type="hidden" name="csrf_token" value="{csrf}">
+    <div class="flex gap-2 pb-3 border-b">
+      <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+        <i class="fa fa-save"></i> Save</button>
+      <button type="button" onclick="{close_js}"
+        class="px-4 py-2 border border-stone-300 rounded hover:bg-stone-50">Cancel</button>
+    </div>
+  </form>
+  <div class="mt-4">
+    <label class="block text-sm font-medium text-stone-700 mb-2">Select Page</label>
+    <input type="text" placeholder="Search for a page... (or leave blank for all)"
+      sx-get="{search_url}" sx-trigger="keyup changed delay:300ms, focus once"
+      sx-target="#page-search-results" sx-swap="innerHTML"
+      name="q" id="page-search-input"
+      class="w-full px-3 py-2 border border-stone-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
+    <div id="page-search-results" class="mt-2"></div>
+  </div>
+</div>
+<script>
+document.addEventListener('click', function(e) {{
+  var pageOption = e.target.closest('[data-page-id]');
+  if (pageOption) {{
+    var postId = pageOption.dataset.pageId;
+    var postTitle = pageOption.dataset.pageTitle;
+    var postSlug = pageOption.dataset.pageSlug;
+    var postImage = pageOption.dataset.pageImage;
+    document.getElementById('selected-post-id').value = postId;
+    var display = document.getElementById('selected-page-display');
+    display.innerHTML = '<div class="p-3 bg-stone-50 rounded flex items-center gap-3">' +
+      (postImage ? '<img src="' + postImage + '" alt="' + postTitle + '" class="w-10 h-10 rounded-full object-cover" />' : '<div class="w-10 h-10 rounded-full bg-stone-200"></div>') +
+      '<div class="flex-1"><div class="font-medium">' + postTitle + '</div><div class="text-xs text-stone-500">' + postSlug + '</div></div></div>';
+    display.classList.remove('hidden');
+    document.getElementById('page-search-results').innerHTML = '';
+  }}
+}});
+</script>'''
+    return html
+
+
+def render_page_search_results(pages, query, page, has_more) -> str:
+    """Render page search results (replaces _types/menu_items/_page_search_results.html)."""
+    from quart import url_for as qurl
+
+    if not pages and query:
+        return sx_call("page-search-empty", query=query)
+
+    if not pages:
+        return ""
+
+    items = []
+    for post in pages:
+        items.append(sx_call("page-search-item",
+                             id=post.id, title=post.title,
+                             slug=post.slug,
+                             feature_image=post.feature_image or None))
+
+    sentinel = ""
+    if has_more:
+        search_url = qurl("menu_items.search_pages_route")
+        sentinel = sx_call("page-search-sentinel",
+                          url=search_url, query=query,
+                          next_page=page + 1)
+
+    items_sx = "(<> " + " ".join(items) + ")"
+    return sx_call("page-search-results",
+                   items=SxExpr(items_sx),
+                   sentinel=SxExpr(sentinel) if sentinel else None)
+
+
 def render_menu_items_nav_oob(menu_items, ctx: dict | None = None) -> str:
     """Render the OOB nav update for menu items.