format code

frontend/src/components/comment_input.tsx

@@ -25,7 +25,7 @@ export function CommentInput({
   // Auto-resize textarea based on content
   const adjustTextareaHeight = () => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = "auto";
       let height = textareaRef.current.scrollHeight;
       if (height < 128) {
         height = 128;
@@ -37,7 +37,7 @@ export function CommentInput({
   // Reset textarea height to default
   const resetTextareaHeight = () => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = '128px';
+      textareaRef.current.style.height = "128px";
     }
   };
 
@@ -175,9 +175,7 @@ export function CommentInput({
         </button>
         <Badge className="badge-ghost">
           <MdOutlineInfo size={18} />
-          <span>
-            {t("Use markdown format")}
-          </span>
+          <span>{t("Use markdown format")}</span>
         </Badge>
         <span className={"grow"} />
         <button

frontend/src/components/comment_tile.tsx

@@ -1,7 +1,11 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
-import { MdOutlineComment, MdOutlineDelete, MdOutlineEdit, MdOutlineReply } from "react-icons/md";
+import {
+  MdOutlineComment,
+  MdOutlineDelete,
+  MdOutlineEdit,
+} from "react-icons/md";
 import { TextArea } from "./input";
 import { Comment } from "../network/models";
 import { network } from "../network/network";
@@ -29,8 +33,10 @@ export function CommentTile({
     <a
       href={link}
       className={
-        "block card bg-base-100 p-2 my-3 transition-shadow cursor-pointer" + 
-        (!elevation || elevation == "normal" ? " shadow-xs hover:shadow" : " shadow hover:shadow-md")
+        "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();
@@ -44,21 +50,16 @@ export function CommentTile({
           onClick={(e) => {
             e.stopPropagation();
             e.preventDefault();
-            navigate(userLink)
-          }
-          }
+            navigate(userLink);
+          }}
         >
           <span className="w-8 h-8 rounded-full">
             <img src={network.getUserAvatar(comment.user)} alt={"avatar"} />
           </span>
           <span className={"w-2"}></span>
-          <span
-            className={"text-sm font-bold"}
-          >
-            {comment.user.username}
-          </span>
+          <span className={"text-sm font-bold"}>{comment.user.username}</span>
         </a>
-        
+
         <div className={"grow"}></div>
         <Badge className={"badge-ghost badge-sm"}>
           {new Date(comment.created_at).toLocaleDateString()}
@@ -144,10 +145,14 @@ function EditCommentDialog({
         <MdOutlineEdit size={16} className={"inline-block"} />
         {t("Edit")}
       </button>
-      <dialog id={`edit_comment_dialog_${comment.id}`} className="modal" onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}>
+      <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
@@ -156,12 +161,17 @@ function EditCommentDialog({
             onChange={(e) => setContent(e.target.value)}
           />
           <div className="modal-action">
-            <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-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>
@@ -221,10 +231,14 @@ function DeleteCommentDialog({
         <MdOutlineDelete size={16} className={"inline-block"} />
         {t("Delete")}
       </button>
-      <dialog id={id} className="modal" onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}>
+      <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">
@@ -233,10 +247,15 @@ function DeleteCommentDialog({
             )}
           </p>
           <div className="modal-action">
-            <button className="btn btn-ghost" onClick={() => {
-              const dialog = document.getElementById(id) as HTMLDialogElement;
-              dialog.close();
-            }}>{t("Close")}</button>
+            <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>

frontend/src/i18n.ts

@@ -670,7 +670,7 @@ export const i18nData = {
       "Commented on a resource": "評論了資源",
 
       "Comment": "評論",
-      "Replies": "回覆",  
+      "Replies": "回覆",
       "Reply": "回覆",
       "Commented on": "評論於",
       "Write down your comment": "寫下您的評論",

frontend/src/markdown.css

@@ -227,7 +227,7 @@ article {
     margin: 6px 6px 6px 0;
   }
 
-  p>img {
+  p > img {
     display: inline-block;
   }
 
@@ -251,4 +251,4 @@ a.no-underline {
   &:hover {
     text-decoration: none;
   }
-}
+}

frontend/src/pages/comment_page.tsx

@@ -165,24 +165,26 @@ function CommentReply({ comment }: { comment: CommentWithRef }) {
     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}
-  </>
+  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({
@@ -224,9 +226,14 @@ function CommentsList({
     <>
       {comments.map((comment) => {
         return (
-          <CommentTile elevation="high" comment={comment} key={comment.id} onUpdated={reload} />
+          <CommentTile
+            elevation="high"
+            comment={comment}
+            key={comment.id}
+            onUpdated={reload}
+          />
         );
       })}
     </>
   );
-}
+}