Support comment reply.

frontend/src/app.ts

@@ -33,6 +33,9 @@ class App {
     this.appName = (window as MyWindow).serverName || this.appName;
     this.cloudflareTurnstileSiteKey =
       (window as MyWindow).cloudflareTurnstileSiteKey || null;
+    if (this.cloudflareTurnstileSiteKey === "{{CFTurnstileSiteKey}}") {
+      this.cloudflareTurnstileSiteKey = null; // Placeholder value, set to null if not configured
+    }
     this.siteInfo = (window as MyWindow).siteInfo || "";
   }
 

frontend/src/components/comment_input.tsx

@@ -27,8 +27,8 @@ export function CommentInput({
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto';
       let height = textareaRef.current.scrollHeight;
-      if (height < 144) {
+      if (height < 128) {
-        height = 144; // Minimum height of 144px (h-36)
+        height = 128;
       }
       textareaRef.current.style.height = `${height}px`;
     }
@@ -37,7 +37,7 @@ export function CommentInput({
   // Reset textarea height to default
   const resetTextareaHeight = () => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = '144px'; // h-36 = 144px
+      textareaRef.current.style.height = '128px';
     }
   };
 
@@ -158,13 +158,13 @@ export function CommentInput({
       <textarea
         ref={textareaRef}
         placeholder={t("Write down your comment")}
-        className={"w-full resize-none grow h-36"}
+        className={"w-full resize-none grow h-32"}
         value={commentContent}
         onChange={(e) => setCommentContent(e.target.value)}
       />
       <div className={"flex items-center"}>
         <button
-          className={"btn btn-ghost btn-sm btn-circle"}
+          className={"btn btn-sm btn-circle mr-2"}
           onClick={handleAddImage}
         >
           {isUploadingimage ? (
@@ -176,7 +176,7 @@ export function CommentInput({
         <Badge className="badge-ghost">
           <MdOutlineInfo size={18} />
           <span>
-            {t("Use markdown format.")}
+            {t("Use markdown format")}
           </span>
         </Badge>
         <span className={"grow"} />

frontend/src/components/comment_tile.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
-import { MdOutlineDelete, MdOutlineEdit, MdOutlineReply } from "react-icons/md";
+import { MdOutlineComment, MdOutlineDelete, MdOutlineEdit, MdOutlineReply } from "react-icons/md";
 import { TextArea } from "./input";
 import { Comment } from "../network/models";
 import { network } from "../network/network";
@@ -13,20 +13,24 @@ import Markdown from "react-markdown";
 export function CommentTile({
   comment,
   onUpdated,
+  elevation,
 }: {
   comment: Comment;
   onUpdated?: () => void;
+  elevation?: "normal" | "high";
 }) {
   const navigate = useNavigate();
   const { t } = useTranslation();
   const link = `/comments/${comment.id}`;
+  const userLink = `/user/${encodeURIComponent(comment.user.username)}`;
 
   // @ts-ignore
   return (
     <a
       href={link}
       className={
-        "block card bg-base-100 p-2 my-3 shadow-xs hover:shadow transition-shadow cursor-pointer"
+        "block card bg-base-100 p-2 my-3 transition-shadow cursor-pointer" + 
+        (!elevation || elevation == "normal" ? " shadow-xs hover:shadow" : " shadow hover:shadow-md")
       }
       onClick={(e) => {
         e.preventDefault();
@@ -34,45 +38,46 @@ export function CommentTile({
       }}
     >
       <div className={"flex flex-row items-center my-1 mx-1"}>
-        <div
+        <a
-          className="avatar cursor-pointer"
+          href={userLink}
-          onClick={() =>
+          className="flex flex-row items-center avatar cursor-pointer"
-            navigate(`/user/${encodeURIComponent(comment.user.username)}`)
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            navigate(userLink)
+          }
           }
         >
-          <div className="w-8 rounded-full">
+          <span className="w-8 h-8 rounded-full">
             <img src={network.getUserAvatar(comment.user)} alt={"avatar"} />
-          </div>
+          </span>
-        </div>
+          <span className={"w-2"}></span>
-        <div className={"w-2"}></div>
+          <span
-        <div
+            className={"text-sm font-bold"}
-          className={"text-sm font-bold cursor-pointer"}
-          onClick={() => {
-            navigate(`/user/${encodeURIComponent(comment.user.username)}`);
-          }}
           >
             {comment.user.username}
-        </div>
+          </span>
+        </a>
+        
         <div className={"grow"}></div>
-        {comment.reply_count > 0 && (
+        <Badge className={"badge-ghost badge-sm"}>
-          <Badge className={"badge-soft badge-info badge-sm mr-2"}>
+          {new Date(comment.created_at).toLocaleDateString()}
-            <MdOutlineReply size={16} className={"inline-block"} />
-            <span className={"w-1"} />
-            {comment.reply_count}
-          </Badge>
-        )}
-        <Badge className={"badge-soft badge-primary badge-sm"}>
-          {new Date(comment.created_at).toLocaleString()}
         </Badge>
       </div>
       <div className={"p-2 comment_tile"}>
         <CommentContent content={comment.content} />
       </div>
-      <div className={"flex"}>
+      <div className={"flex items-center"}>
         {comment.content_truncated && (
           <Badge className="badge-soft">{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}
+          </Badge>
+        )}
         {app.user?.id === comment.user.id && (
           <>
             <EditCommentDialog comment={comment} onUpdated={onUpdated} />
@@ -127,7 +132,9 @@ function EditCommentDialog({
     <>
       <button
         className={"btn btn-sm btn-ghost ml-1"}
-        onClick={() => {
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
           const dialog = document.getElementById(
             `edit_comment_dialog_${comment.id}`,
           ) as HTMLDialogElement;
@@ -137,7 +144,10 @@ function EditCommentDialog({
         <MdOutlineEdit size={16} className={"inline-block"} />
         {t("Edit")}
       </button>
-      <dialog id={`edit_comment_dialog_${comment.id}`} className="modal">
+      <dialog id={`edit_comment_dialog_${comment.id}`} className="modal" onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}>
         <div className="modal-box" id={"dialog_box"}>
           <h3 className="font-bold text-lg">{t("Edit Comment")}</h3>
           <TextArea
@@ -146,9 +156,12 @@ function EditCommentDialog({
             onChange={(e) => setContent(e.target.value)}
           />
           <div className="modal-action">
-            <form method="dialog">
+            <button className="btn btn-ghost" onClick={() => {
-              <button className="btn btn-ghost">{t("Close")}</button>
+              const dialog = document.getElementById(
-            </form>
+                `edit_comment_dialog_${comment.id}`,
+              ) as HTMLDialogElement;
+              dialog.close();
+            }}>{t("Close")}</button>
             <button className="btn btn-primary" onClick={handleUpdate}>
               {isLoading ? (
                 <span className={"loading loading-spinner loading-sm"}></span>
@@ -198,7 +211,9 @@ function DeleteCommentDialog({
     <>
       <button
         className={"btn btn-error btn-sm btn-ghost ml-1"}
-        onClick={() => {
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
           const dialog = document.getElementById(id) as HTMLDialogElement;
           dialog.showModal();
         }}
@@ -206,7 +221,10 @@ function DeleteCommentDialog({
         <MdOutlineDelete size={16} className={"inline-block"} />
         {t("Delete")}
       </button>
-      <dialog id={id} className="modal">
+      <dialog id={id} className="modal" onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}>
         <div className="modal-box">
           <h3 className="font-bold text-lg">{t("Delete Comment")}</h3>
           <p className="py-4">
@@ -215,9 +233,10 @@ function DeleteCommentDialog({
             )}
           </p>
           <div className="modal-action">
-            <form method="dialog">
+            <button className="btn btn-ghost" onClick={() => {
-              <button className="btn btn-ghost">{t("Close")}</button>
+              const dialog = document.getElementById(id) as HTMLDialogElement;
-            </form>
+              dialog.close();
+            }}>{t("Close")}</button>
             <button className="btn btn-error" onClick={handleDelete}>
               {isLoading ? (
                 <span className={"loading loading-spinner loading-sm"}></span>

frontend/src/i18n.ts

@@ -182,7 +182,6 @@ export const i18nData = {
       "Edit": "Edit",
       "Edit Tag": "Edit Tag",
       "Set the description of the tag.": "Set the description of the tag.",
-      "Use markdown format.": "Use markdown format.",
       "Tag: ": "Tag: ",
       "Select a Order": "Select a Order",
       "Time Ascending": "Time Ascending",
@@ -225,6 +224,12 @@ export const i18nData = {
       "Published a resource": "Published a resource",
       "Updated a resource": "Updated a resource",
       "Commented on a resource": "Commented on a resource",
+
+      "Comment": "Comment",
+      "Replies": "Replies",
+      "Reply": "Reply",
+      "Commented on": "Commented on",
+      "Write down your comment": "Write down your comment",
     },
   },
   "zh-CN": {
@@ -254,7 +259,7 @@ export const i18nData = {
       "Add Alternative Title": "新增标题",
       "Tags": "标签",
       "Description": "介绍",
-      "Use Markdown format": "使用Markdown格式",
+      "Use markdown format": "使用Markdown格式",
       "Images": "图片",
       "Images will not be displayed automatically, you need to reference them in the description":
         "图片不会被自动显示, 你需要在介绍中引用它们",
@@ -399,7 +404,6 @@ export const i18nData = {
       "Edit": "编辑",
       "Edit Tag": "编辑标签",
       "Set the description of the tag.": "设置标签的描述。",
-      "Use markdown format.": "使用Markdown格式。",
       "Tag: ": "标签: ",
       "Select a Order": "选择排序方式",
       "Time Ascending": "时间升序",
@@ -442,6 +446,12 @@ export const i18nData = {
       "Published a resource": "发布了一个资源",
       "Updated a resource": "更新了一个资源",
       "Commented on a resource": "评论了一个资源",
+
+      "Comment": "评论",
+      "Replies": "回复",
+      "Reply": "回复",
+      "Commented on": "评论于",
+      "Write down your comment": "写下您的评论",
     },
   },
   "zh-TW": {
@@ -471,7 +481,7 @@ export const i18nData = {
       "Add Alternative Title": "新增標題",
       "Tags": "標籤",
       "Description": "介紹",
-      "Use Markdown format": "使用Markdown格式",
+      "Use markdown format": "使用Markdown格式",
       "Images": "圖片",
       "Images will not be displayed automatically, you need to reference them in the description":
         "圖片不會自動顯示，需在介紹中引用",
@@ -616,7 +626,6 @@ export const i18nData = {
       "Edit": "編輯",
       "Edit Tag": "編輯標籤",
       "Set the description of the tag.": "設置標籤的描述。",
-      "Use markdown format.": "使用Markdown格式。",
       "Tag: ": "標籤: ",
       "Select a Order": "選擇排序方式",
       "Time Ascending": "時間升序",
@@ -659,6 +668,12 @@ export const i18nData = {
       "Published a resource": "發布了資源",
       "Updated a resource": "更新了資源",
       "Commented on a resource": "評論了資源",
+
+      "Comment": "評論",
+      "Replies": "回覆",  
+      "Reply": "回覆",
+      "Commented on": "評論於",
+      "Write down your comment": "寫下您的評論",
     },
   },
 };

frontend/src/markdown.css

@@ -8,7 +8,7 @@ article {
     font-size: 24px;
     font-weight: bold;
     padding: 12px 0;
-    margin: 24px 0 12px;
+    margin: 8px 0 12px;
   }
 
   h2 {
@@ -131,7 +131,7 @@ article {
     font-size: 20px;
     font-weight: bold;
     padding: 8px 0;
-    margin: 16px 0 8px;
+    margin: 4px 0 8px;
   }
 
   h2 {

frontend/src/network/network.ts

@@ -630,6 +630,17 @@ class Network {
     );
   }
 
+  async listCommentReplies(
+    commentID: number,
+    page: number = 1,
+  ): Promise<PageResponse<Comment>> {
+    return this._callApi(() =>
+      axios.get(`${this.apiBaseUrl}/comments/reply/${commentID}`, {
+        params: { page },
+      }),
+    );
+  }
+
   async getComment(commentID: number): Promise<Response<CommentWithRef>> {
     return this._callApi(() =>
       axios.get(`${this.apiBaseUrl}/comments/${commentID}`),

frontend/src/pages/comment_page.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { network } from "../network/network";
 import showToast from "../components/toast";
 import { useNavigate, useParams } from "react-router";
@@ -7,6 +7,10 @@ import { CommentWithRef, Resource } from "../network/models";
 import Loading from "../components/loading";
 import Markdown from "react-markdown";
 import Badge from "../components/badge";
+import { CommentInput } from "../components/comment_input";
+import { CommentTile } from "../components/comment_tile";
+import { Comment } from "../network/models";
+import Pagination from "../components/pagination";
 
 export default function CommentPage() {
   const params = useParams();
@@ -16,6 +20,7 @@ export default function CommentPage() {
   const navigate = useNavigate();
 
   useEffect(() => {
+    setComment(null);
     const id = parseInt(commentId || "0");
     if (isNaN(id) || id <= 0) {
       showToast({
@@ -34,7 +39,7 @@ export default function CommentPage() {
         });
       }
     });
-  }, []);
+  }, [commentId]);
 
   useEffect(() => {
     document.title = t("Comment Details");
@@ -46,7 +51,8 @@ export default function CommentPage() {
 
   return (
     <div className="p-4">
-      <h1 className="text-2xl font-bold my-2">{t("Comment")}</h1>
+      {comment.resource && <ResourceCard resource={comment.resource} />}
+      <div className="flex items-center mt-4">
         <button
           onClick={() => {
             navigate(`/user/${encodeURIComponent(comment.user.username)}`);
@@ -63,11 +69,18 @@ export default function CommentPage() {
             <div className="text-sm">{comment.user.username}</div>
           </div>
         </button>
-      {comment.resource && <ResourceCard resource={comment.resource} />}
+        <span className="text-xs text-base-content/80 ml-2">
-      <div className="flex"></div>
+          {t("Commented on")}
+          {new Date(comment.created_at).toLocaleDateString()}
+        </span>
+      </div>
       <article>
         <CommentContent content={comment.content} />
       </article>
+      <div className="h-4" />
+      <div className="border-t border-base-300" />
+      <div className="h-4" />
+      <CommentReply comment={comment} />
     </div>
   );
 }
@@ -99,7 +112,7 @@ function ResourceCard({ resource }: { resource: Resource }) {
   return (
     <a
       href="link"
-      className="flex flex-row w-full card bg-base-200 shadow overflow-clip my-2"
+      className="flex flex-row w-full card bg-base-200 shadow-xs hover:shadow overflow-clip my-2"
       onClick={(e) => {
         e.preventDefault();
         navigate(link);
@@ -115,7 +128,7 @@ function ResourceCard({ resource }: { resource: Resource }) {
       <div className="flex flex-col p-4 flex-1">
         <h2 className="card-title w-full break-all">{resource.title}</h2>
         <div className="h-2"></div>
-        <p>
+        <p className="mb-2">
           {tags.map((tag) => {
             return (
               <Badge key={tag.id} className={"m-0.5"}>
@@ -138,3 +151,82 @@ function ResourceCard({ resource }: { resource: Resource }) {
     </a>
   );
 }
+
+function CommentReply({ comment }: { comment: CommentWithRef }) {
+  const { t } = useTranslation();
+
+  const [page, setPage] = useState(1);
+  const [maxPage, setMaxPage] = useState(0);
+  const [listKey, setListKey] = useState(0);
+
+  const reload = useCallback(() => {
+    setPage(1);
+    setMaxPage(0);
+    setListKey((prev) => prev + 1);
+  }, []);
+
+  return <>
+    <h2 className="text-xl font-bold my-2">{t("Replies")}</h2>
+    <CommentInput replyTo={comment.id} reload={reload} />
+    <CommentsList
+      commentId={comment.id}
+      page={page}
+      maxPageCallback={(maxPage: number) => {
+        setMaxPage(maxPage);
+      }}
+      key={listKey}
+      reload={reload}
+    />
+    {maxPage ? (
+      <div className={"w-full flex justify-center"}>
+        <Pagination page={page} setPage={setPage} totalPages={maxPage} />
+      </div>
+    ) : null}
+  </>
+}
+
+function CommentsList({
+  commentId,
+  page,
+  maxPageCallback,
+  reload,
+}: {
+  commentId: number;
+  page: number;
+  maxPageCallback: (maxPage: number) => void;
+  reload: () => void;
+}) {
+  const [comments, setComments] = useState<Comment[] | null>(null);
+
+  useEffect(() => {
+    network.listCommentReplies(commentId, page).then((res) => {
+      if (res.success) {
+        setComments(res.data!);
+        maxPageCallback(res.totalPages || 1);
+      } else {
+        showToast({
+          message: res.message,
+          type: "error",
+        });
+      }
+    });
+  }, [maxPageCallback, page, commentId]);
+
+  if (comments == null) {
+    return (
+      <div className={"w-full"}>
+        <Loading />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {comments.map((comment) => {
+        return (
+          <CommentTile elevation="high" comment={comment} key={comment.id} onUpdated={reload} />
+        );
+      })}
+    </>
+  );
+}

frontend/src/pages/edit_resource_page.tsx

@@ -295,7 +295,7 @@ export default function EditResourcePage() {
         />
         <div className={"flex items-center py-1 "}>
           <MdOutlineInfo className={"inline mr-1"} />
-          <span className={"text-sm"}>{t("Use Markdown format")}</span>
+          <span className={"text-sm"}>{t("Use markdown format")}</span>
         </div>
         <div className={"h-4"}></div>
         <p className={"my-1"}>{t("Images")}</p>

frontend/src/pages/publish_page.tsx

@@ -306,7 +306,7 @@ export default function PublishPage() {
         />
         <div className={"flex items-center py-1 "}>
           <MdOutlineInfo className={"inline mr-1"} />
-          <span className={"text-sm"}>{t("Use Markdown format")}</span>
+          <span className={"text-sm"}>{t("Use markdown format")}</span>
         </div>
         <div className={"h-4"}></div>
         <p className={"my-1"}>{t("Images")}</p>

server/service/comment.go

@@ -74,6 +74,8 @@ func CreateComment(req CommentRequest, userID uint, refID uint, ip string, cType
 		return nil, model.NewRequestError("Comment content exceeds maximum length of 1024 characters")
 	}
 
+	switch cType {
+	case model.CommentTypeResource:
 		resourceExists, err := dao.ExistsResource(refID)
 		if err != nil {
 			log.Error("Error checking resource existence:", err)
@@ -82,6 +84,14 @@ func CreateComment(req CommentRequest, userID uint, refID uint, ip string, cType
 		if !resourceExists {
 			return nil, model.NewNotFoundError("Resource not found")
 		}
+	case model.CommentTypeReply:
+		_, err := dao.GetCommentByID(refID)
+		if err != nil {
+			log.Error("Error getting reply comment:", err)
+			return nil, model.NewNotFoundError("Reply comment not found")
+		}
+	}
+
 	userExists, err := dao.ExistsUserByID(userID)
 	if err != nil {
 		log.Error("Error checking user existence:", err)
@@ -166,15 +176,6 @@ func ListResourceComments(resourceID uint, page int) ([]model.CommentView, int,
 }
 
 func ListCommentReplies(commentID uint, page int) ([]model.CommentView, int, error) {
-	comment, err := dao.GetCommentByID(commentID)
-	if err != nil {
-		log.Error("Error getting comment:", err)
-		return nil, 0, model.NewNotFoundError("Comment not found")
-	}
-	if comment.Type != model.CommentTypeReply {
-		return nil, 0, model.NewRequestError("This comment is not a reply")
-	}
-
 	replies, totalPages, err := dao.GetCommentReplies(commentID, page, pageSize)
 	if err != nil {
 		log.Error("Error getting replies:", err)

server/utils/storage.go

@@ -1,6 +1,7 @@
 package utils
 
 import (
+	"errors"
 	"os"
 	"runtime"
 )
@@ -19,7 +20,16 @@ func GetStoragePath() string {
 	}
 	if _, err := os.Stat(path); os.IsNotExist(err) {
 		if err := os.MkdirAll(path, os.ModePerm); err != nil {
-			panic("failed to create storage directory")
+			if errors.Is(err, os.ErrPermission) {
+				// Fallback to home directory if permission is denied
+				userDir, _ := os.UserHomeDir()
+				path = userDir + "/.nysoure"
+				if _, err := os.Stat(path); os.IsNotExist(err) {
+					if err := os.MkdirAll(path, os.ModePerm); err != nil {
+						panic("Failed to create storage directory: " + err.Error())
+					}
+				}
+			}
 		}
 	}
 	return path