Fix comments UX regressions and HTMX/Turnstile behavior

- standardize comment and reply UI layout
- target replies with stable OOB container IDs
- remove stale empty-state on approved HTMX comments
- initialize Turnstile widgets after HTMX swaps
- add regression tests for empty-state, OOB targets, and reply form rerender

Refs #48

apps/blog/tests/test_views.py

@@ -1,3 +1,5 @@
+import re
+
 import pytest
 from taggit.models import Tag
 
@@ -138,6 +140,54 @@ def test_article_page_renders_approved_comments_and_reply_form(client, home_page
     assert "Top level" in html
     assert "Reply" in html
     assert f'name="parent_id" value="{comment.id}"' in html
+    match = re.search(r'id="comments-empty-state"[^>]*class="([^"]+)"', html)
+    assert match is not None
+    assert "hidden" in match.group(1).split()
+
+
+@pytest.mark.django_db
+def test_article_page_shows_empty_state_when_no_approved_comments(client, home_page):
+    index = ArticleIndexPage(title="Articles", slug="articles")
+    home_page.add_child(instance=index)
+    author = AuthorFactory()
+    article = ArticlePage(
+        title="Main",
+        slug="main",
+        author=author,
+        summary="summary",
+        body=[("rich_text", "<p>body</p>")],
+    )
+    index.add_child(instance=article)
+    article.save_revision().publish()
+
+    resp = client.get("/articles/main/")
+    html = resp.content.decode()
+
+    assert resp.status_code == 200
+    assert 'id="comments-empty-state"' in html
+    assert "No comments yet. Be the first to comment." in html
+
+
+@pytest.mark.django_db
+def test_article_page_loads_comment_client_script(client, home_page):
+    index = ArticleIndexPage(title="Articles", slug="articles")
+    home_page.add_child(instance=index)
+    author = AuthorFactory()
+    article = ArticlePage(
+        title="Main",
+        slug="main",
+        author=author,
+        summary="summary",
+        body=[("rich_text", "<p>body</p>")],
+    )
+    index.add_child(instance=article)
+    article.save_revision().publish()
+
+    resp = client.get("/articles/main/")
+    html = resp.content.decode()
+
+    assert resp.status_code == 200
+    assert 'src="/static/js/comments.js"' in html
 
 
 @pytest.mark.django_db

apps/comments/tests/test_v2.py

@@ -91,6 +91,7 @@ def test_htmx_post_returns_form_plus_oob_comment_when_approved(client, _article)
     # OOB swap appends the comment to #comments-list
     assert "hx-swap-oob" in content
     assert "Hello world" in content
+    assert 'id="comments-empty-state" hx-swap-oob="delete"' in content
     comment = Comment.objects.get()
     assert comment.is_approved is True
 
@@ -132,8 +133,8 @@ def test_htmx_reply_returns_oob_reply_when_approved(client, _article, approved_c
         )
     content = resp.content.decode()
     assert resp.status_code == 200
-    # OOB targets the sibling .replies-container of the parent comment article
-    assert f'hx-swap-oob="beforeend:#comment-{approved_comment.id} ~ .replies-container"' in content
+    # OOB targets a stable, explicit replies container for the parent comment.
+    assert f'hx-swap-oob="beforeend:#replies-for-{approved_comment.id}"' in content
     # Verify content is rendered (not empty due to context mismatch)
     assert "Replier" in content
     assert "Nice reply" in content
@@ -165,6 +166,30 @@ def test_htmx_error_with_tampered_parent_id_falls_back_to_main_form(client, _art
     assert b"comment-form-container" in resp.content
 
 
+@pytest.mark.django_db
+def test_htmx_invalid_reply_rerenders_reply_form_with_values(client, _article, approved_comment):
+    """Invalid reply keeps user input and returns the reply form container."""
+    cache.clear()
+    resp = client.post(
+        "/comments/post/",
+        {
+            "article_id": _article.id,
+            "parent_id": approved_comment.id,
+            "author_name": "Reply User",
+            "author_email": "reply@example.com",
+            "body": "   ",
+            "honeypot": "",
+        },
+        HTTP_HX_REQUEST="true",
+    )
+    assert resp.status_code == 200
+    content = resp.content.decode()
+    assert f'id="reply-form-container-{approved_comment.id}"' in content
+    assert "Comment form errors" in content
+    assert 'value="Reply User"' in content
+    assert "reply@example.com" in content
+
+
 # ── Turnstile Integration ────────────────────────────────────────────────────
 
 

apps/comments/views.py

@@ -133,6 +133,7 @@ class CommentCreateView(View):
                     "comment": parent, "page": article,
                     "turnstile_site_key": _turnstile_site_key(),
                     "reply_form_errors": form.errors,
+                    "reply_form": form,
                 }
                 return _add_vary_header(render(request, "comments/_reply_form.html", ctx))
         ctx = {
@@ -144,7 +145,7 @@ class CommentCreateView(View):
     def _render_htmx_success(self, request, article, comment):
         """Return fresh form + OOB-appended comment (if approved)."""
         tsk = _turnstile_site_key()
-        oob_html = ""
+        oob_parts = []
         if comment.is_approved:
             ctx = _comment_template_context(comment, article, request)
             if comment.parent_id:
@@ -152,17 +153,14 @@ class CommentCreateView(View):
                 reply_ctx = ctx.copy()
                 reply_ctx["reply"] = reply_ctx.pop("comment")
                 comment_html = render_to_string("comments/_reply.html", reply_ctx, request)
-                # .replies-container is now a sibling of #comment-{id}
-                oob_html = (
-                    f'<div hx-swap-oob="beforeend:#comment-{comment.parent_id} '
-                    f'~ .replies-container">{comment_html}</div>'
+                oob_parts.append(
+                    f'<div hx-swap-oob="beforeend:#replies-for-{comment.parent_id}">{comment_html}</div>'
                 )
             else:
                 comment_html = render_to_string("comments/_comment.html", ctx, request)
-                oob_html = (
-                    f'<div hx-swap-oob="beforeend:#comments-list">'
-                    f"{comment_html}</div>"
-                )
+                oob_parts.append(f'<div hx-swap-oob="beforeend:#comments-list">{comment_html}</div>')
+                # Ensure stale empty-state copy is removed when the first approved comment appears.
+                oob_parts.append('<div id="comments-empty-state" hx-swap-oob="delete"></div>')
 
         if comment.parent_id:
             parent = Comment.objects.filter(pk=comment.parent_id, article=article).first()
@@ -180,7 +178,7 @@ class CommentCreateView(View):
                 "page": article, "turnstile_site_key": tsk, "success_message": msg,
             }, request)
 
-        resp = HttpResponse(form_html + oob_html)
+        resp = HttpResponse(form_html + "".join(oob_parts))
         return _add_vary_header(resp)
 
     def post(self, request):