Improve comment UI.

frontend/src/components/comment_tile.tsx

@@ -53,7 +53,7 @@ export function CommentTile({
             navigate(userLink);
           }}
         >
-          <span className="w-8 h-8 rounded-full">
+          <span className="w-8 h-8 rounded-full overflow-clip">
             <img src={network.getUserAvatar(comment.user)} alt={"avatar"} />
           </span>
           <span className={"w-2"}></span>
@@ -70,7 +70,7 @@ export function CommentTile({
       </div>
       <div className={"flex items-center"}>
         {comment.content_truncated && (
-          <Badge className="badge-soft">{t("Click to view more")}</Badge>
+          <Badge className="badge-ghost">{t("Click to view more")}</Badge>
         )}
         <span className={"grow"}></span>
         {comment.reply_count > 0 && (

frontend/src/i18n.ts

@@ -230,6 +230,7 @@ export const i18nData = {
       "Reply": "Reply",
       "Commented on": "Commented on",
       "Write down your comment": "Write down your comment",
+      "Click to view more": "Click to view more",
     },
   },
   "zh-CN": {
@@ -452,6 +453,7 @@ export const i18nData = {
       "Reply": "回复",
       "Commented on": "评论于",
       "Write down your comment": "写下您的评论",
+      "Click to view more": "点击查看更多",
     },
   },
   "zh-TW": {
@@ -674,6 +676,7 @@ export const i18nData = {
       "Reply": "回覆",
       "Commented on": "評論於",
       "Write down your comment": "寫下您的評論",
+      "Click to view more": "點擊查看更多",
     },
   },
 };

frontend/src/markdown.css

@@ -115,6 +115,18 @@ article {
       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, system-ui;
   }
 
+  code {
+    width: 100%;
+    display: block;
+    overflow-x: auto;
+    background-color: var(--color-base-200);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, system-ui;
+    font-size: 12px;
+  }
+
   iframe {
     width: 100%;
     height: 100%;
@@ -138,21 +150,21 @@ article {
     font-size: 18px;
     font-weight: bold;
     padding: 6px 0;
-    margin: 12px 0 6px;
+    margin: 6px 0 6px;
   }
 
   h3 {
     font-size: 15px;
     font-weight: bold;
     padding: 4px 0;
-    margin: 8px 0 4px;
+    margin: 4px 0 4px;
   }
 
   h4 {
     font-size: 13px;
     font-weight: bold;
     padding: 3px 0;
-    margin: 8px 0 4px;
+    margin: 4px 0 4px;
   }
 
   h5 {
@@ -243,6 +255,18 @@ article {
       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, system-ui;
     font-size: 12px;
   }
+
+  code {
+    width: 100%;
+    display: block;
+    overflow-x: auto;
+    background-color: var(--color-base-200);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, system-ui;
+    font-size: 12px;
+  }
 }
 
 a.no-underline {

frontend/src/pages/user_page.tsx

@@ -8,6 +8,7 @@ import Loading from "../components/loading";
 import Pagination from "../components/pagination";
 import { MdOutlineArrowRight } from "react-icons/md";
 import { ImageGrid } from "../components/image.tsx";
+import { CommentTile } from "../components/comment_tile.tsx";
 
 export default function UserPage() {
   const [user, setUser] = useState<User | null>(null);
@@ -174,50 +175,8 @@ function CommentsList({
   return (
     <>
       {comments.map((comment) => {
-        return <CommentTile comment={comment} key={comment.id} />;
+        return <CommentTile elevation="high" comment={comment} key={comment.id} />;
       })}
     </>
   );
-}
+}
-
-function limitArticleLength(content: string, maxLength: number): string {
-  if (content.length <= maxLength) {
-    return content;
-  }
-  return content.slice(0, maxLength) + "...";
-}
-
-function CommentTile({ comment }: { comment: CommentWithResource }) {
-  const navigate = useNavigate();
-
-  return (
-    <div className={"card card-border border-base-300 p-2 my-3"}>
-      <div className={"flex flex-row items-center my-1 mx-1"}>
-        <div className="avatar">
-          <div className="w-8 rounded-full">
-            <img src={network.getUserAvatar(comment.user)} alt={"avatar"} />
-          </div>
-        </div>
-        <div className={"w-2"}></div>
-        <div className={"text-sm font-bold"}>{comment.user.username}</div>
-        <div className={"grow"}></div>
-        <div className={"text-sm text-gray-500"}>
-          {new Date(comment.created_at).toLocaleString()}
-        </div>
-      </div>
-      <div className={"p-2 whitespace-pre-wrap text-sm"}>
-        {limitArticleLength(comment.content, 200)}
-      </div>
-      <ImageGrid images={comment.images} />
-      <a
-        className="text-sm text-base-content/80 p-1 hover:text-primary cursor-pointer transition-all"
-        onClick={() => {
-          navigate("/resources/" + comment.resource.id);
-        }}
-      >
-        <MdOutlineArrowRight className="inline-block mr-1 mb-0.5" size={18} />
-        {comment.resource.title}
-      </a>
-    </div>
-  );
-}