Update comments UI

frontend/src/components/comment_tile.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from "../utils/i18n";
 import { useNavigate } from "react-router";
-import { MdOutlineComment } from "react-icons/md";
 import { Comment } from "../network/models";
 import { network } from "../network/network";
 import Badge from "./badge";
@@ -55,29 +54,66 @@ export function CommentTile({
           {new Date(comment.created_at).toLocaleDateString()}
         </Badge>
       </div>
-      <div className={"p-2 comment_tile"}>
+      <div className={"px-2 pt-2 comment_tile"}>
         <CommentContent content={comment.content} />
       </div>
-      <div className={"flex items-center"}>
-        {comment.content_truncated && (
-          <Badge className="badge-ghost">{t("Click to view more")}</Badge>
-        )}
-        <span className={"grow"}></span>
-        {comment.reply_count > 0 && (
-          <Badge className={"badge-soft badge-primary mr-2"}>
-            <MdOutlineComment size={16} className={"inline-block"} />
-            {comment.reply_count}
+      {comment.content_truncated ? (
+        <div className={"pl-2 pb-2"}>
+          <Badge className={"badge-soft badge-info badge-sm"}>
+            {t("Click to view more")}
           </Badge>
-        )}
-      </div>
+        </div>
+      ) : (
+        <div className={"h-2"} />
+      )}
+      <CommentReplies comment={comment} />
     </a>
   );
 }
 
+function CommentReplies({ comment }: { comment: Comment }) {
+  const { t } = useTranslation();
+
+  if (!comment.replies) {
+    return null;
+  }
+
+  return (
+    <div className={"bg-base-200 mx-2 p-2 rounded-lg"}>
+      {comment.replies.map((e) => {
+        return (
+          <p className={"text-xs mb-1"}>
+            <span className={"font-bold"}>{e.user.username}: </span>
+            {CommentToPlainText(e.content)}
+          </p>
+        );
+      })}
+      {comment.reply_count > comment.replies.length ? (
+        <p className={"text-xs text-primary mt-1"}>
+          {t("View {count} more replies").replace(
+            "{count}",
+            (comment.reply_count - comment.replies.length).toString(),
+          )}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function CommentToPlainText(content: string) {
+  // Remove Markdown syntax to convert to plain text
+  return content
+    .replace(/!\[.*?]\(.*?\)/g, "") // Remove images
+    .replace(/\[([^\]]+)]\((.*?)\)/g, "$1") // Convert links to just the text
+    .replace(/[#>*_`~-]/g, "") // Remove other Markdown characters
+    .replace(/\n+/g, " ") // Replace newlines with spaces
+    .trim();
+}
+
 export function CommentContent({ content }: { content: string }) {
   const lines = content.split("\n");
   for (let i = 0; i < lines.length; i++) {
-    let line = lines[i];
+    const line = lines[i];
     if (!line.endsWith("  ")) {
       // Ensure that each line ends with two spaces for Markdown to recognize it as a line break
       lines[i] = line + "  ";

frontend/src/i18n.ts

@@ -254,6 +254,7 @@ export const i18nData = {
       "You do not have permission to upload files, please contact the administrator.":
         "您没有上传文件的权限，请联系管理员。",
       "Private": "私有",
+      "View {count} more replies": "查看另外 {count} 条回复",
     },
   },
   "zh-TW": {
@@ -511,6 +512,7 @@ export const i18nData = {
       "You do not have permission to upload files, please contact the administrator.":
         "您沒有上傳檔案的權限，請聯繫管理員。",
       "Private": "私有",
+      "View {count} more replies": "查看另外 {count} 條回覆",
     },
   },
 };

frontend/src/network/models.ts

@@ -126,6 +126,7 @@ export interface Comment {
   images: Image[];
   content_truncated: boolean;
   reply_count: number;
+  replies: Comment[];
 }
 
 export interface CommentWithResource {

frontend/src/utils/i18n.ts

@@ -1,7 +1,7 @@
 import { createContext, useContext, useMemo } from "react";
 
 function t(data: any, language: string) {
-  return (key: string) => {
+  return (key: string): string => {
     return data[language]?.["translation"]?.[key] || key;
   };
 }

server/model/comment.go

@@ -25,13 +25,14 @@ const (
 )
 
 type CommentView struct {
-	ID               uint        `json:"id"`
-	Content          string      `json:"content"`
-	CreatedAt        time.Time   `json:"created_at"`
-	User             UserView    `json:"user"`
-	Images           []ImageView `json:"images"`
-	ReplyCount       uint        `json:"reply_count"`
-	ContentTruncated bool        `json:"content_truncated"`
+	ID               uint          `json:"id"`
+	Content          string        `json:"content"`
+	CreatedAt        time.Time     `json:"created_at"`
+	User             UserView      `json:"user"`
+	Images           []ImageView   `json:"images"`
+	ReplyCount       uint          `json:"reply_count"`
+	ContentTruncated bool          `json:"content_truncated"`
+	Replies          []CommentView `json:"replies,omitempty"`
 }
 
 func (c *Comment) ToView() *CommentView {

server/service/comment.go

@@ -122,9 +122,18 @@ func ListResourceComments(resourceID uint, page int) ([]model.CommentView, int,
 	res := make([]model.CommentView, 0, len(comments))
 	for _, c := range comments {
 		v := *c.ToView()
-		var truncated bool
-		v.Content, truncated = restrictCommentLength(v.Content)
-		v.ContentTruncated = truncated
+		v.Content, v.ContentTruncated = restrictCommentLength(v.Content)
+		replies, _, err := dao.GetCommentReplies(c.ID, 1, 3)
+		if err != nil {
+			log.Error("Error getting replies for comment:", err)
+			return nil, 0, model.NewInternalServerError("Error getting replies for comment")
+		}
+		v.Replies = make([]model.CommentView, 0, len(replies))
+		for _, r := range replies {
+			rv := *r.ToView()
+			rv.Content, rv.ContentTruncated = restrictCommentLength(rv.Content)
+			v.Replies = append(v.Replies, rv)
+		}
 		res = append(res, v)
 	}
 	return res, totalPages, nil