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";
@@ -30,7 +34,9 @@ export function CommentTile({
       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")
+        (!elevation || elevation == "normal"
+          ? " shadow-xs hover:shadow"
+          : " shadow hover:shadow-md")
       }
       onClick={(e) => {
         e.preventDefault();
@@ -44,19 +50,14 @@ 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>
@@ -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) => {
+      <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={() => {
+            <button
+              className="btn btn-ghost"
+              onClick={() => {
                 const dialog = document.getElementById(
                   `edit_comment_dialog_${comment.id}`,
                 ) as HTMLDialogElement;
                 dialog.close();
-            }}>{t("Close")}</button>
+              }}
+            >
+              {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) => {
+      <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={() => {
+            <button
+              className="btn btn-ghost"
+              onClick={() => {
                 const dialog = document.getElementById(id) as HTMLDialogElement;
                 dialog.close();
-            }}>{t("Close")}</button>
+              }}
+            >
+              {t("Close")}
+            </button>
             <button className="btn btn-error" onClick={handleDelete}>
               {isLoading ? (
                 <span className={"loading loading-spinner loading-sm"}></span>

frontend/src/markdown.css

@@ -227,7 +227,7 @@ article {
     margin: 6px 6px 6px 0;
   }
 
-  p>img {
+  p > img {
     display: inline-block;
   }
 

frontend/src/pages/comment_page.tsx

@@ -165,7 +165,8 @@ function CommentReply({ comment }: { comment: CommentWithRef }) {
     setListKey((prev) => prev + 1);
   }, []);
 
-  return <>
+  return (
+    <>
       <h2 className="text-xl font-bold my-2">{t("Replies")}</h2>
       <CommentInput replyTo={comment.id} reload={reload} />
       <CommentsList
@@ -183,6 +184,7 @@ function CommentReply({ comment }: { comment: CommentWithRef }) {
         </div>
       ) : null}
     </>
+  );
 }
 
 function CommentsList({
@@ -224,7 +226,12 @@ 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}
+          />
         );
       })}
     </>