Delete blog sx_components.py — move all rendering to callers

Move remaining 19 rendering functions from the 2487-line
sx_components.py to their direct callers:

- menu_items/routes.py: menu item form, page search, nav OOB
- post/admin/routes.py: calendar view, associated entries, nav OOB
- sxc/pages/__init__.py: editor panel, post data inspector, preview,
  entries browser, settings form, edit page editor
- bp/blog/routes.py: inline new post page composition

Move load_service_components() call from sx_components module-level
to setup_blog_pages() so .sx files still load at startup.

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

blog/bp/blog/routes.py

@@ -21,7 +21,7 @@ from .services.pages_data import pages_data
 from shared.browser.app.redis_cacher import cache_page, invalidate_tag_cache
 from shared.browser.app.utils.htmx import is_htmx_request
 from shared.browser.app.authz import require_admin
-from shared.sx.helpers import sx_response
+from shared.sx.helpers import sx_response, render_to_sx
 from shared.utils import host_url
 
 def register(url_prefix, title):
@@ -62,6 +62,19 @@ def register(url_prefix, title):
         "unsplash_api_key": os.environ.get("UNSPLASH_ACCESS_KEY", ""),
       }
 
+    async def _render_new_post_page(tctx):
+        """Compose a full page with blog header for new post/page creation."""
+        from shared.sx.helpers import root_header_sx, full_page_sx
+        from shared.sx.parser import SxExpr
+        root_hdr = await root_header_sx(tctx)
+        blog_hdr = await render_to_sx("menu-row-sx",
+            id="blog-row", level=1,
+            link_label_content=SxExpr("(div)"),
+            child_id="blog-header-child")
+        header_rows = "(<> " + root_hdr + " " + blog_hdr + ")"
+        content = tctx.get("editor_html", "")
+        return await full_page_sx(tctx, header_rows=header_rows, content=content)
+
     SORT_MAP = {
       "newest":   "published_at DESC",
       "oldest":   "published_at ASC",
@@ -216,19 +229,19 @@ def register(url_prefix, title):
         lexical_doc = json.loads(lexical_raw)
       except (json.JSONDecodeError, TypeError):
         from shared.sx.page import get_template_context
-        from sx.sx_components import render_new_post_page, render_editor_panel
+        from sxc.pages import render_editor_panel
         tctx = await get_template_context()
         tctx["editor_html"] = await render_editor_panel(save_error="Invalid JSON in editor content.")
-        html = await render_new_post_page(tctx)
+        html = await _render_new_post_page(tctx)
         return await make_response(html, 400)
 
       ok, reason = validate_lexical(lexical_doc)
       if not ok:
         from shared.sx.page import get_template_context
-        from sx.sx_components import render_new_post_page, render_editor_panel
+        from sxc.pages import render_editor_panel
         tctx = await get_template_context()
         tctx["editor_html"] = await render_editor_panel(save_error=reason)
-        html = await render_new_post_page(tctx)
+        html = await _render_new_post_page(tctx)
         return await make_response(html, 400)
 
       # Create directly in db_blog
@@ -272,21 +285,21 @@ def register(url_prefix, title):
         lexical_doc = json.loads(lexical_raw)
       except (json.JSONDecodeError, TypeError):
         from shared.sx.page import get_template_context
-        from sx.sx_components import render_new_post_page, render_editor_panel
+        from sxc.pages import render_editor_panel
         tctx = await get_template_context()
         tctx["editor_html"] = await render_editor_panel(save_error="Invalid JSON in editor content.", is_page=True)
         tctx["is_page"] = True
-        html = await render_new_post_page(tctx)
+        html = await _render_new_post_page(tctx)
         return await make_response(html, 400)
 
       ok, reason = validate_lexical(lexical_doc)
       if not ok:
         from shared.sx.page import get_template_context
-        from sx.sx_components import render_new_post_page, render_editor_panel
+        from sxc.pages import render_editor_panel
         tctx = await get_template_context()
         tctx["editor_html"] = await render_editor_panel(save_error=reason, is_page=True)
         tctx["is_page"] = True
-        html = await render_new_post_page(tctx)
+        html = await _render_new_post_page(tctx)
         return await make_response(html, 400)
 
       # Create directly in db_blog

blog/bp/menu_items/routes.py

@@ -12,7 +12,9 @@ from .services.menu_items import (
     search_pages,
     MenuItemError,
 )
+from markupsafe import escape
 from shared.sx.helpers import sx_response, render_to_sx
+from shared.sx.parser import SxExpr
 from shared.browser.app.csrf import generate_csrf_token
 
 
@@ -34,20 +36,193 @@ async def _render_menu_items_list(menu_items):
                               menu_items=items, new_url=new_url, csrf=csrf)
 
 
+def _render_menu_item_form(menu_item=None) -> str:
+    """Render menu item add/edit form."""
+    csrf = generate_csrf_token()
+    search_url = url_for("menu_items.search_pages_route")
+    is_edit = menu_item is not None
+
+    if is_edit:
+        action_url = url_for("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 = url_for("menu_items.create_menu_item_route")
+        action_attr = f'sx-post="{action_url}"'
+        post_id = ""
+        label = ""
+        slug = ""
+        fi = ""
+
+    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
+
+
+async def _render_page_search_results(pages, query, page, has_more) -> str:
+    """Render page search results."""
+    if not pages and query:
+        return await render_to_sx("page-search-empty", query=query)
+    if not pages:
+        return ""
+
+    items = []
+    for post in pages:
+        items.append(await render_to_sx("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 = url_for("menu_items.search_pages_route")
+        sentinel = await render_to_sx("page-search-sentinel",
+                          url=search_url, query=query,
+                          next_page=page + 1)
+
+    items_sx = "(<> " + " ".join(items) + ")"
+    return await render_to_sx("page-search-results",
+                   items=SxExpr(items_sx),
+                   sentinel=SxExpr(sentinel) if sentinel else None)
+
+
+async def _render_menu_items_nav_oob(menu_items) -> str:
+    """Render OOB nav update for menu items."""
+    from quart import request as qrequest
+
+    if not menu_items:
+        return await render_to_sx("blog-nav-empty", wrapper_id="menu-items-nav-wrapper")
+
+    first_seg = qrequest.path.strip("/").split("/")[0] if qrequest else ""
+
+    select_colours = (
+        "[.hover-capable_&]:hover:bg-yellow-300"
+        " aria-selected:bg-stone-500 aria-selected:text-white"
+        " [.hover-capable_&[aria-selected=true]:hover]:bg-orange-500"
+    )
+    nav_button_cls = (
+        f"justify-center cursor-pointer flex flex-row items-center gap-2"
+        f" rounded bg-stone-200 text-black {select_colours} p-3"
+    )
+
+    container_id = "menu-items-container"
+    arrow_cls = f"scrolling-menu-arrow-{container_id}"
+
+    scroll_hs = (
+        f"on load or scroll"
+        f" if window.innerWidth >= 640 and my.scrollWidth > my.clientWidth"
+        f" remove .hidden from .{arrow_cls} add .flex to .{arrow_cls}"
+        f" else add .hidden to .{arrow_cls} remove .flex from .{arrow_cls} end"
+    )
+
+    item_parts = []
+    for item in menu_items:
+        item_slug = getattr(item, "slug", "") if hasattr(item, "slug") else item.get("slug", "")
+        label = getattr(item, "label", "") if hasattr(item, "label") else item.get("label", "")
+        fi = getattr(item, "feature_image", None) if hasattr(item, "feature_image") else item.get("feature_image")
+
+        href = f"/{item_slug}/"
+        selected = "true" if item_slug == first_seg else "false"
+
+        img_sx = await render_to_sx("img-or-placeholder", src=fi, alt=label,
+            size_cls="w-8 h-8 rounded-full object-cover flex-shrink-0")
+
+        if item_slug != "cart":
+            item_parts.append(await render_to_sx("blog-nav-item-link",
+                href=href, hx_get=f"/{item_slug}/", selected=selected,
+                nav_cls=nav_button_cls, img=SxExpr(img_sx), label=label,
+            ))
+        else:
+            item_parts.append(await render_to_sx("blog-nav-item-plain",
+                href=href, selected=selected, nav_cls=nav_button_cls,
+                img=SxExpr(img_sx), label=label,
+            ))
+
+    items_sx = "(<> " + " ".join(item_parts) + ")" if item_parts else ""
+
+    return await render_to_sx("scroll-nav-wrapper",
+        wrapper_id="menu-items-nav-wrapper", container_id=container_id,
+        arrow_cls=arrow_cls,
+        left_hs=f"on click set #{container_id}.scrollLeft to #{container_id}.scrollLeft - 200",
+        scroll_hs=scroll_hs,
+        right_hs=f"on click set #{container_id}.scrollLeft to #{container_id}.scrollLeft + 200",
+        items=SxExpr(items_sx) if items_sx else None, oob=True,
+    )
+
+
 def register():
     bp = Blueprint("menu_items", __name__, url_prefix='/settings/menu_items')
 
     async def get_menu_items_nav_oob_async(menu_items):
         """Helper to generate OOB update for root nav menu items"""
-        from sx.sx_components import render_menu_items_nav_oob
-        return await render_menu_items_nav_oob(menu_items)
+        return await _render_menu_items_nav_oob(menu_items)
 
     @bp.get("/new/")
     @require_admin
     async def new_menu_item():
         """Show form to create new menu item"""
-        from sx.sx_components import render_menu_item_form
-        return sx_response(render_menu_item_form())
+        return sx_response(_render_menu_item_form())
 
     @bp.post("/")
     @require_admin
@@ -85,8 +260,7 @@ def register():
         if not menu_item:
             return await make_response("Menu item not found", 404)
 
-        from sx.sx_components import render_menu_item_form
-        return sx_response(render_menu_item_form(menu_item=menu_item))
+        return sx_response(_render_menu_item_form(menu_item=menu_item))
 
     @bp.put("/<int:item_id>/")
     @require_admin
@@ -144,8 +318,7 @@ def register():
         pages, total = await search_pages(g.s, query, page, per_page)
         has_more = (page * per_page) < total
 
-        from sx.sx_components import render_page_search_results
-        return sx_response(await render_page_search_results(pages, query, page, has_more))
+        return sx_response(await _render_page_search_results(pages, query, page, has_more))
 
     @bp.post("/reorder/")
     @require_admin

blog/bp/post/admin/routes.py

@@ -10,9 +10,18 @@ from quart import (
     url_for,
 )
 from shared.browser.app.authz import require_admin, require_post_author
+from markupsafe import escape
 from shared.sx.helpers import sx_response, render_to_sx
+from shared.sx.parser import SxExpr, serialize as sx_serialize
 from shared.utils import host_url
 
+
+def _raw_html_sx(html: str) -> str:
+    """Wrap raw HTML in (raw! "...") so it's valid inside sx source."""
+    if not html:
+        return ""
+    return "(raw! " + sx_serialize(html) + ")"
+
 def _post_to_edit_dict(post) -> dict:
     """Convert an ORM Post to a dict matching the shape templates expect.
 
@@ -81,6 +90,232 @@ def _serialize_markets(markets, slug):
     return result
 
 
+def _render_calendar_view(
+    calendar, year, month, month_name, weekday_names, weeks,
+    prev_month, prev_month_year, next_month, next_month_year,
+    prev_year, next_year, month_entries, associated_entry_ids,
+    post_slug: str,
+) -> str:
+    """Build calendar month grid HTML."""
+    from quart import url_for as qurl
+    from shared.browser.app.csrf import generate_csrf_token
+    esc = escape
+
+    csrf = generate_csrf_token()
+    cal_id = calendar.id
+
+    def cal_url(y, m):
+        return esc(host_url(qurl("blog.post.admin.calendar_view", slug=post_slug, calendar_id=cal_id, year=y, month=m)))
+
+    cur_url = cal_url(year, month)
+    toggle_url_fn = lambda eid: esc(host_url(qurl("blog.post.admin.toggle_entry", slug=post_slug, entry_id=eid)))
+
+    nav = (
+        f'<header class="flex items-center justify-center mb-4">'
+        f'<nav class="flex items-center gap-2 text-xl">'
+        f'<a class="px-2 py-1 hover:bg-stone-100 rounded" sx-get="{cal_url(prev_year, month)}" sx-target="#calendar-view-{cal_id}" sx-swap="outerHTML">&laquo;</a>'
+        f'<a class="px-2 py-1 hover:bg-stone-100 rounded" sx-get="{cal_url(prev_month_year, prev_month)}" sx-target="#calendar-view-{cal_id}" sx-swap="outerHTML">&lsaquo;</a>'
+        f'<div class="px-3 font-medium">{esc(month_name)} {year}</div>'
+        f'<a class="px-2 py-1 hover:bg-stone-100 rounded" sx-get="{cal_url(next_month_year, next_month)}" sx-target="#calendar-view-{cal_id}" sx-swap="outerHTML">&rsaquo;</a>'
+        f'<a class="px-2 py-1 hover:bg-stone-100 rounded" sx-get="{cal_url(next_year, month)}" sx-target="#calendar-view-{cal_id}" sx-swap="outerHTML">&raquo;</a>'
+        f'</nav></header>'
+    )
+
+    wd_cells = "".join(f'<div class="py-2">{esc(wd)}</div>' for wd in weekday_names)
+    wd_row = f'<div class="hidden sm:grid grid-cols-7 text-center text-xs font-semibold text-stone-700 bg-stone-50 border-b">{wd_cells}</div>'
+
+    cells: list[str] = []
+    for week in weeks:
+        for day in week:
+            extra_cls = " bg-stone-50 text-stone-400" if not day.in_month else ""
+            day_date = day.date
+
+            entry_btns: list[str] = []
+            for e in month_entries:
+                e_start = getattr(e, "start_at", None)
+                if not e_start or e_start.date() != day_date:
+                    continue
+                e_id = getattr(e, "id", None)
+                e_name = esc(getattr(e, "name", ""))
+                t_url = toggle_url_fn(e_id)
+                hx_hdrs = f'{{"X-CSRFToken": "{csrf}"}}'
+
+                if e_id in associated_entry_ids:
+                    entry_btns.append(
+                        f'<div class="flex items-center gap-1 text-[10px] rounded px-1 py-0.5 bg-green-200 text-green-900">'
+                        f'<span class="truncate flex-1">{e_name}</span>'
+                        f'<button type="button" class="flex-shrink-0 hover:text-red-600"'
+                        f' data-confirm data-confirm-title="Remove entry?"'
+                        f' data-confirm-text="Remove {e_name} from this post?"'
+                        f' data-confirm-icon="warning" data-confirm-confirm-text="Yes, remove it"'
+                        f' data-confirm-cancel-text="Cancel" data-confirm-event="confirmed"'
+                        f' sx-post="{t_url}" sx-trigger="confirmed"'
+                        f' sx-target="#associated-entries-list" sx-swap="outerHTML"'
+                        f""" sx-headers='{hx_hdrs}'"""
+                        f' sx-on:afterSwap="document.body.dispatchEvent(new CustomEvent(\'entryToggled\'))"'
+                        f'><i class="fa fa-times"></i></button></div>'
+                    )
+                else:
+                    entry_btns.append(
+                        f'<button type="button" class="w-full text-left text-[10px] rounded px-1 py-0.5 bg-stone-100 text-stone-700 hover:bg-stone-200"'
+                        f' data-confirm data-confirm-title="Add entry?"'
+                        f' data-confirm-text="Add {e_name} to this post?"'
+                        f' data-confirm-icon="question" data-confirm-confirm-text="Yes, add it"'
+                        f' data-confirm-cancel-text="Cancel" data-confirm-event="confirmed"'
+                        f' sx-post="{t_url}" sx-trigger="confirmed"'
+                        f' sx-target="#associated-entries-list" sx-swap="outerHTML"'
+                        f""" sx-headers='{hx_hdrs}'"""
+                        f' sx-on:afterSwap="document.body.dispatchEvent(new CustomEvent(\'entryToggled\'))"'
+                        f'><span class="truncate block">{e_name}</span></button>'
+                    )
+
+            entries_html = '<div class="space-y-0.5">' + "".join(entry_btns) + '</div>' if entry_btns else ''
+            cells.append(
+                f'<div class="min-h-20 bg-white px-2 py-2 text-xs{extra_cls}">'
+                f'<div class="font-medium mb-1">{day_date.day}</div>{entries_html}</div>'
+            )
+
+    grid = f'<div class="grid grid-cols-1 sm:grid-cols-7 gap-px bg-stone-200">{"".join(cells)}</div>'
+
+    html = (
+        f'<div id="calendar-view-{cal_id}"'
+        f' sx-get="{cur_url}" sx-trigger="entryToggled from:body" sx-swap="outerHTML">'
+        f'{nav}'
+        f'<div class="rounded border bg-white">{wd_row}{grid}</div>'
+        f'</div>'
+    )
+    return _raw_html_sx(html)
+
+
+async def _render_associated_entries(all_calendars, associated_entry_ids, post_slug: str) -> str:
+    """Render the associated entries panel."""
+    from shared.browser.app.csrf import generate_csrf_token
+    from quart import url_for as qurl
+
+    csrf = generate_csrf_token()
+
+    has_entries = False
+    entry_items: list[str] = []
+    for calendar in all_calendars:
+        entries = getattr(calendar, "entries", []) or []
+        cal_name = getattr(calendar, "name", "")
+        cal_post = getattr(calendar, "post", None)
+        cal_fi = getattr(cal_post, "feature_image", None) if cal_post else None
+        cal_title = getattr(cal_post, "title", "") if cal_post else ""
+
+        for entry in entries:
+            e_id = getattr(entry, "id", None)
+            if e_id not in associated_entry_ids:
+                continue
+            if getattr(entry, "deleted_at", None) is not None:
+                continue
+            has_entries = True
+            e_name = getattr(entry, "name", "")
+            e_start = getattr(entry, "start_at", None)
+            e_end = getattr(entry, "end_at", None)
+
+            toggle_url = host_url(qurl("blog.post.admin.toggle_entry", slug=post_slug, entry_id=e_id))
+
+            img_sx = await render_to_sx("blog-entry-image", src=cal_fi, title=cal_title)
+
+            date_str = e_start.strftime("%A, %B %d, %Y at %H:%M") if e_start else ""
+            if e_end:
+                date_str += f" \u2013 {e_end.strftime('%H:%M')}"
+
+            entry_items.append(await render_to_sx("blog-associated-entry",
+                confirm_text=f"This will remove {e_name} from this post",
+                toggle_url=toggle_url,
+                hx_headers=f'{{"X-CSRFToken": "{csrf}"}}',
+                img=SxExpr(img_sx), name=e_name,
+                date_str=f"{cal_name} \u2022 {date_str}",
+            ))
+
+    if has_entries:
+        content_sx = await render_to_sx("blog-associated-entries-content",
+            items=SxExpr("(<> " + " ".join(entry_items) + ")"),
+        )
+    else:
+        content_sx = await render_to_sx("blog-associated-entries-empty")
+
+    return await render_to_sx("blog-associated-entries-panel", content=SxExpr(content_sx))
+
+
+async def _render_nav_entries_oob(associated_entries, calendars, post: dict) -> str:
+    """Render the OOB nav entries swap."""
+    entries_list = []
+    if associated_entries and hasattr(associated_entries, "entries"):
+        entries_list = associated_entries.entries or []
+
+    has_items = bool(entries_list or calendars)
+
+    if not has_items:
+        return await render_to_sx("blog-nav-entries-empty")
+
+    select_colours = (
+        "[.hover-capable_&]:hover:bg-yellow-300"
+        " aria-selected:bg-stone-500 aria-selected:text-white"
+        " [.hover-capable_&[aria-selected=true]:hover]:bg-orange-500"
+    )
+    nav_cls = (
+        f"justify-center cursor-pointer flex flex-row items-center gap-2"
+        f" rounded bg-stone-200 text-black {select_colours} p-2"
+    )
+
+    post_slug = post.get("slug", "")
+
+    scroll_hs = (
+        "on load or scroll"
+        " if window.innerWidth >= 640 and my.scrollWidth > my.clientWidth"
+        " remove .hidden from .entries-nav-arrow add .flex to .entries-nav-arrow"
+        " else add .hidden to .entries-nav-arrow remove .flex from .entries-nav-arrow end"
+    )
+
+    item_parts = []
+
+    for entry in entries_list:
+        e_name = getattr(entry, "name", "")
+        e_start = getattr(entry, "start_at", None)
+        e_end = getattr(entry, "end_at", None)
+        cal_slug = getattr(entry, "calendar_slug", "")
+
+        if e_start:
+            entry_path = (
+                f"/{post_slug}/{cal_slug}/"
+                f"{e_start.year}/{e_start.month}/{e_start.day}"
+                f"/entries/{getattr(entry, 'id', '')}/"
+            )
+            date_str = e_start.strftime("%b %d, %Y at %H:%M")
+            if e_end:
+                date_str += f" \u2013 {e_end.strftime('%H:%M')}"
+        else:
+            entry_path = f"/{post_slug}/{cal_slug}/"
+            date_str = ""
+
+        item_parts.append(await render_to_sx("calendar-entry-nav",
+            href=entry_path, nav_class=nav_cls, name=e_name, date_str=date_str,
+        ))
+
+    for calendar in (calendars or []):
+        cal_name = getattr(calendar, "name", "")
+        cal_slug = getattr(calendar, "slug", "")
+        cal_path = f"/{post_slug}/{cal_slug}/"
+
+        item_parts.append(await render_to_sx("blog-nav-calendar-item",
+            href=cal_path, nav_cls=nav_cls, name=cal_name,
+        ))
+
+    items_sx = "(<> " + " ".join(item_parts) + ")" if item_parts else ""
+
+    return await render_to_sx("scroll-nav-wrapper",
+        wrapper_id="entries-calendars-nav-wrapper", container_id="associated-items-container",
+        arrow_cls="entries-nav-arrow",
+        left_hs="on click set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft - 200",
+        scroll_hs=scroll_hs,
+        right_hs="on click set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft + 200",
+        items=SxExpr(items_sx) if items_sx else None, oob=True,
+    )
+
+
 def register():
   bp = Blueprint("admin", __name__, url_prefix='/admin')
 
@@ -220,8 +455,7 @@ def register():
     post_id = g.post_data["post"]["id"]
     associated_entry_ids = await get_post_entry_ids(post_id)
 
-    from sx.sx_components import render_calendar_view
-    html = render_calendar_view(
+    html = _render_calendar_view(
       calendar_obj, year, month, month_name, weekday_names, weeks,
       prev_month, prev_month_year, next_month, next_month_year,
       prev_year, next_year, month_entries, associated_entry_ids,
@@ -273,11 +507,9 @@ def register():
     ).scalars().all()
 
     # Return the associated entries admin list + OOB update for nav entries
-    from sx.sx_components import render_associated_entries, render_nav_entries_oob
-
     post = g.post_data["post"]
-    admin_list = await render_associated_entries(all_calendars, associated_entry_ids, post["slug"])
-    nav_entries_html = await render_nav_entries_oob(associated_entries, calendars, post)
+    admin_list = await _render_associated_entries(all_calendars, associated_entry_ids, post["slug"])
+    nav_entries_html = await _render_nav_entries_oob(associated_entries, calendars, post)
 
     return sx_response(admin_list + nav_entries_html)