From e06a4b1cf8d48c5959d98aaacb8fcd4391bed1c9 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Fri, 12 Jun 2026 11:21:11 +0330
Subject: [PATCH] fix(blog): flatten nested comment replies

---
 src/components/BlogPostInteractions.tsx | 123 ++++++++++++++++--------
 1 file changed, 81 insertions(+), 42 deletions(-)

diff --git a/src/components/BlogPostInteractions.tsx b/src/components/BlogPostInteractions.tsx
index 6315c58..0fe4be0 100644
--- a/src/components/BlogPostInteractions.tsx
+++ b/src/components/BlogPostInteractions.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
   Check,
   Edit3,
@@ -38,6 +38,11 @@ type Props = {
   initialComments: number;
 };
 
+type FlattenedReply = {
+  comment: Types.CommentSchema;
+  replyTo: Types.CommentSchema;
+};
+
 function displayName(author: Types.CommentSchema["author"]) {
   return [author.first_name, author.last_name].filter(Boolean).join(" ") || author.username;
 }
@@ -57,6 +62,20 @@ function allDescendants(comment: Types.CommentSchema): Types.CommentSchema[] {
   return (comment.replies || []).flatMap((reply) => [reply, ...allDescendants(reply)]);
 }
 
+function flattenReplies(comment: Types.CommentSchema): FlattenedReply[] {
+  const replies: FlattenedReply[] = [];
+
+  const walk = (items: Types.CommentSchema[] | undefined, parent: Types.CommentSchema) => {
+    (items || []).forEach((reply) => {
+      replies.push({ comment: reply, replyTo: parent });
+      walk(reply.replies, reply);
+    });
+  };
+
+  walk(comment.replies, comment);
+  return replies;
+}
+
 function findComment(comments: Types.CommentSchema[], id: number | null): Types.CommentSchema | undefined {
   if (!id) return undefined;
   for (const comment of comments) {
@@ -79,12 +98,13 @@ export default function BlogPostInteractions({
   const [replyTo, setReplyTo] = useState<number | null>(null);
   const [editingId, setEditingId] = useState<number | null>(null);
   const [editContent, setEditContent] = useState("");
-  const [expandedReplies, setExpandedReplies] = useState<Set<number>>(new Set());
   const [deleteTarget, setDeleteTarget] = useState<Types.CommentSchema | null>(null);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const [savingEdit, setSavingEdit] = useState(false);
   const [moderatingId, setModeratingId] = useState<number | null>(null);
+  const [highlightedCommentId, setHighlightedCommentId] = useState<number | null>(null);
+  const highlightTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const canModerate = Boolean(user?.is_staff || user?.is_superuser || user?.can_review_blog_posts);
 
@@ -115,6 +135,28 @@ export default function BlogPostInteractions({
     };
   }, [slug]);
 
+  useEffect(() => () => {
+    if (highlightTimeoutRef.current) {
+      clearTimeout(highlightTimeoutRef.current);
+    }
+  }, []);
+
+  const scrollToComment = (commentId: number) => {
+    const element = document.getElementById(`blog-comment-${commentId}`);
+    if (!element) return;
+
+    if (highlightTimeoutRef.current) {
+      clearTimeout(highlightTimeoutRef.current);
+    }
+
+    element.scrollIntoView({ behavior: "smooth", block: "center" });
+    setHighlightedCommentId(commentId);
+    highlightTimeoutRef.current = setTimeout(() => {
+      setHighlightedCommentId(null);
+      highlightTimeoutRef.current = null;
+    }, 1800);
+  };
+
   const submitComment = async () => {
     const trimmed = content.trim();
     if (!trimmed) return;
@@ -220,32 +262,32 @@ export default function BlogPostInteractions({
     }
   };
 
-  const toggleExpandedReplies = (commentId: number) => {
-    setExpandedReplies((current) => {
-      const next = new Set(current);
-      if (next.has(commentId)) {
-        next.delete(commentId);
-      } else {
-        next.add(commentId);
-      }
-      return next;
-    });
-  };
-
-  const renderComment = (comment: Types.CommentSchema, nested = false, compact = false, parentHidden = false) => {
+  const renderComment = (
+    comment: Types.CommentSchema,
+    options: {
+      parentHidden?: boolean;
+      replyToComment?: Types.CommentSchema;
+      topLevelParent?: Types.CommentSchema;
+    } = {},
+  ) => {
     const isOwnComment = Boolean(user?.id === comment.author.id);
     const isEditing = editingId === comment.id;
+    const { parentHidden = false, replyToComment, topLevelParent } = options;
     const hidden = parentHidden || Boolean(comment.is_hidden);
-    const deeperReplies = nested ? allDescendants(comment) : [];
-    const showDeeperReplies = expandedReplies.has(comment.id);
+    const isReply = Boolean(replyToComment);
+    const flattenedReplies = isReply ? [] : flattenReplies(comment);
+    const showReplyContext = Boolean(
+      replyToComment && topLevelParent && replyToComment.id !== topLevelParent.id,
+    );
 
     return (
       <div
+        id={`blog-comment-${comment.id}`}
         key={comment.id}
         className={cn(
-          "relative",
-          nested && "mr-6 border-r border-primary/20 pr-4",
-          compact && "rounded-2xl bg-muted/25 p-3",
+          "relative scroll-mt-28 rounded-3xl border p-4 shadow-sm transition-colors duration-300 border-border/70 bg-muted/20",
+          hidden && "border-amber-400/40 bg-amber-50/50 dark:bg-amber-950/20",
+          highlightedCommentId === comment.id && "border-primary bg-primary/10 shadow-lg shadow-primary/20 ring-2 ring-primary/30",
         )}
       >
         <div className={cn("flex items-start gap-3 text-right", hidden && "opacity-75")}>
@@ -258,6 +300,15 @@ export default function BlogPostInteractions({
               <time className="text-xs text-muted-foreground" dateTime={comment.created_at}>
                 {formatJalaliDate(comment.created_at)}
               </time>
+              {showReplyContext && replyToComment ? (
+                <button
+                  type="button"
+                  className="rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary transition hover:bg-primary/20 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                  onClick={() => scrollToComment(replyToComment.id)}
+                >
+                  در پاسخ به {displayName(replyToComment.author)}
+                </button>
+              ) : null}
               {hidden ? (
                 <span className="rounded-full bg-amber-500/10 px-2 py-0.5 text-xs text-amber-600 dark:text-amber-300">
                   مخفی شده
@@ -289,7 +340,7 @@ export default function BlogPostInteractions({
             </div>
             {!isEditing ? (
               <div className="mt-2 flex flex-wrap items-center justify-start gap-2 text-xs text-muted-foreground">
-                {isAuthenticated && !hidden && !compact ? (
+                {isAuthenticated && !hidden ? (
                   <Button
                     variant="ghost"
                     size="sm"
@@ -351,27 +402,15 @@ export default function BlogPostInteractions({
             ) : null}
           </div>
         </div>
-        {!compact && !nested && comment.replies?.length ? (
-          <div className="mt-4 space-y-4">
-                {comment.replies.map((reply) => renderComment(reply, true, false, hidden))}
-          </div>
-        ) : null}
-        {!compact && nested && deeperReplies.length ? (
-          <div className="mt-3 mr-6">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="rounded-full text-xs"
-              onClick={() => toggleExpandedReplies(comment.id)}
-            >
-              {showDeeperReplies ? "بستن پاسخ‌های بیشتر" : `نمایش ${toPersianDigits(deeperReplies.length)} پاسخ بیشتر`}
-            </Button>
-            {showDeeperReplies ? (
-              <div className="mt-3 space-y-3">
-                {deeperReplies.map((reply) => renderComment(reply, false, true, hidden))}
-              </div>
-            ) : null}
+        {flattenedReplies.length ? (
+          <div className="mt-4 space-y-3 border-r border-primary/15 pr-4">
+            {flattenedReplies.map(({ comment: reply, replyTo }) => (
+              renderComment(reply, {
+                parentHidden: hidden,
+                replyToComment: replyTo,
+                topLevelParent: comment,
+              })
+            ))}
           </div>
         ) : null}
       </div>