Support comment reply.

2025-09-27 12:17:24 +00:00 · 2025-07-04 15:24:23 +08:00
parent 1f22367cc4
commit 54ab93ea7b
11 changed files with 243 additions and 92 deletions
--- a/frontend/src/app.ts
+++ b/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 || "";
  }

--- a/frontend/src/components/comment_input.tsx
+++ b/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) {
-        height = 144; // Minimum height of 144px (h-36)
+      if (height < 128) {
+        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"} />
--- a/frontend/src/components/comment_tile.tsx
+++ b/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
-          className="avatar cursor-pointer"
-          onClick={() =>
-            navigate(`/user/${encodeURIComponent(comment.user.username)}`)
+        <a
+          href={userLink}
+          className="flex flex-row items-center avatar cursor-pointer"
+          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>
-        </div>
-        <div className={"w-2"}></div>
-        <div
-          className={"text-sm font-bold cursor-pointer"}
-          onClick={() => {
-            navigate(`/user/${encodeURIComponent(comment.user.username)}`);
-          }}
-        >
-          {comment.user.username}
-        </div>
+          </span>
+          <span className={"w-2"}></span>
+          <span
+            className={"text-sm font-bold"}
+          >
+            {comment.user.username}
+          </span>
+        </a>
+        
        <div className={"grow"}></div>
-        {comment.reply_count > 0 && (
-          <Badge className={"badge-soft badge-info badge-sm mr-2"}>
-            <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 className={"badge-ghost badge-sm"}>
+          {new Date(comment.created_at).toLocaleDateString()}
        </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">{t("Close")}</button>
-            </form>
+            <button className="btn btn-ghost" onClick={() => {
+              const dialog = document.getElementById(
+                `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">{t("Close")}</button>
-            </form>
+            <button className="btn btn-ghost" onClick={() => {
+              const dialog = document.getElementById(id) as HTMLDialogElement;
+              dialog.close();
+            }}>{t("Close")}</button>
            <button className="btn btn-error" onClick={handleDelete}>
              {isLoading ? (
                <span className={"loading loading-spinner loading-sm"}></span>
--- a/frontend/src/i18n.ts
+++ b/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": "寫下您的評論",
    },
  },
 };
--- a/frontend/src/markdown.css
+++ b/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 {
--- a/frontend/src/network/network.ts
+++ b/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}`),
--- a/frontend/src/pages/comment_page.tsx
+++ b/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,28 +51,36 @@ export default function CommentPage() {

  return (
    <div className="p-4">
-      <h1 className="text-2xl font-bold my-2">{t("Comment")}</h1>
-      <button
-        onClick={() => {
-          navigate(`/user/${encodeURIComponent(comment.user.username)}`);
-        }}
-        className="border-b-2 py-1 cursor-pointer border-transparent hover:border-primary transition-colors duration-200 ease-in-out"
-      >
-        <div className="flex items-center">
-          <div className="avatar">
-            <div className="w-6 rounded-full">
-              <img src={network.getUserAvatar(comment.user)} alt={"avatar"} />
-            </div>
-          </div>
-          <div className="w-2"></div>
-          <div className="text-sm">{comment.user.username}</div>
-        </div>
-      </button>
      {comment.resource && <ResourceCard resource={comment.resource} />}
-      <div className="flex"></div>
+      <div className="flex items-center mt-4">
+        <button
+          onClick={() => {
+            navigate(`/user/${encodeURIComponent(comment.user.username)}`);
+          }}
+          className="border-b-2 py-1 cursor-pointer border-transparent hover:border-primary transition-colors duration-200 ease-in-out"
+        >
+          <div className="flex items-center">
+            <div className="avatar">
+              <div className="w-6 rounded-full">
+                <img src={network.getUserAvatar(comment.user)} alt={"avatar"} />
+              </div>
+            </div>
+            <div className="w-2"></div>
+            <div className="text-sm">{comment.user.username}</div>
+          </div>
+        </button>
+        <span className="text-xs text-base-content/80 ml-2">
+          {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} />
+        );
+      })}
+    </>
+  );
+}
--- a/frontend/src/pages/edit_resource_page.tsx
+++ b/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>
--- a/frontend/src/pages/publish_page.tsx
+++ b/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>