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/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):