88ce59aecc
1. Reply HTMX target: server sends HX-Retarget/HX-Reswap headers to insert replies inside parent comment's .replies-container div 2. Empty thread swap target: always render #comments-list container even when no approved comments exist 3. Reaction hydration: add _annotate_reaction_counts() helper that hydrates reaction_counts and user_reacted on comments in get_context(), comment_poll(), and single-comment responses 4. HTMX error swap: return 200 instead of 422 for form errors since HTMX 2 doesn't swap 4xx responses by default 5. Vary header: use patch_vary_headers() instead of direct assignment to avoid overwriting existing Vary directives Also fixes _get_session_key() to handle missing session attribute (e.g. from RequestFactory in performance tests). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
27 lines
1.6 KiB
HTML
27 lines
1.6 KiB
HTML
<article id="comment-{{ comment.id }}" class="bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-solid-dark dark:hover:shadow-solid-light transition-all duration-300">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-10 h-10 bg-gradient-to-tr from-brand-cyan to-brand-pink shrink-0 shadow-neon-cyan"></div>
|
|
<div>
|
|
<div class="font-display font-bold text-sm hover:text-brand-cyan transition-colors">{{ comment.author_name }}</div>
|
|
<div class="font-mono text-xs text-zinc-500">{{ comment.created_at|date:"M j, Y" }}</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-zinc-700 dark:text-zinc-300 text-sm leading-relaxed">{{ comment.body }}</p>
|
|
{% include "comments/_reactions.html" with comment=comment counts=comment.reaction_counts user_reacted=comment.user_reacted %}
|
|
<div class="replies-container">
|
|
{% for reply in comment.replies.all %}
|
|
<article id="comment-{{ reply.id }}" class="mt-6 ml-8 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 border-l-2 border-l-brand-cyan p-4">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<div class="w-7 h-7 bg-gradient-to-tr from-brand-pink to-brand-cyan shrink-0"></div>
|
|
<div>
|
|
<div class="font-display font-bold text-sm">{{ reply.author_name }}</div>
|
|
<div class="font-mono text-xs text-zinc-500">{{ reply.created_at|date:"M j, Y" }}</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-zinc-700 dark:text-zinc-300 text-sm leading-relaxed">{{ reply.body }}</p>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
{% include "comments/_reply_form.html" with page=page comment=comment %}
|
|
</article>
|