From a416ff5562f9c161fd43c8a9487fa4a2d6009c70 Mon Sep 17 00:00:00 2001
From: nyne <me@nyne.dev>
Date: Sun, 27 Jul 2025 17:16:40 +0800
Subject: [PATCH] Support markdown in file description.

---
 frontend/src/pages/activities_page.tsx       |  9 ++++++---
 frontend/src/pages/resource_details_page.tsx | 20 +++++++++++---------
 frontend/src/pages/user_page.tsx             |  7 ++++---
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/activities_page.tsx b/frontend/src/pages/activities_page.tsx
index 56de945..ea329ff 100644
--- a/frontend/src/pages/activities_page.tsx
+++ b/frontend/src/pages/activities_page.tsx
@@ -8,6 +8,7 @@ import Loading from "../components/loading.tsx";
 import { CommentContent } from "../components/comment_tile.tsx";
 import { MdOutlineArchive, MdOutlinePhotoAlbum } from "react-icons/md";
 import Badge from "../components/badge.tsx";
+import Markdown from "react-markdown";
 
 export default function ActivitiesPage() {
   const [activities, setActivities] = useState<Activity[]>([]);
@@ -116,9 +117,11 @@ function ActivityCard({ activity }: { activity: Activity }) {
     content = (
       <div>
         <h4 className={"font-bold py-2"}>{activity.file!.filename}</h4>
-        <p className={"text-sm whitespace-pre-wrap"}>
-          {activity.file!.description}
-        </p>
+        <div className={"text-sm my-1 comment_tile"}>
+          <Markdown>
+            {activity.file!.description.replaceAll("\n", "  \n")}
+          </Markdown>
+        </div>
         <p className={"pt-1"}>
           <Badge className={"badge-soft badge-secondary text-xs mr-2"}>
             <MdOutlineArchive size={16} className={"inline-block"} />
diff --git a/frontend/src/pages/resource_details_page.tsx b/frontend/src/pages/resource_details_page.tsx
index 8175168..dfbaea5 100644
--- a/frontend/src/pages/resource_details_page.tsx
+++ b/frontend/src/pages/resource_details_page.tsx
@@ -692,9 +692,9 @@ function FileTile({ file }: { file: RFile }) {
       <div className={"p-4 flex flex-row items-center"}>
         <div className={"grow"}>
           <h4 className={"font-bold break-all"}>{file.filename}</h4>
-          <p className={"text-sm my-1 whitespace-pre-wrap break-all"}>
-            {file.description}
-          </p>
+          <div className={"text-sm my-1 comment_tile"}>
+            <Markdown>{file.description.replaceAll("\n", "  \n")}</Markdown>
+          </div>
           <p className={"items-center mt-1"}>
             <a
               href={userLink}
@@ -814,7 +814,7 @@ function Files({
         return <FileTile file={file} key={file.id}></FileTile>;
       })}
       <div className={"h-2"}></div>
-      {(app.canUpload() || app.allowNormalUserUpload) && (
+      {(app.canUpload() || (app.allowNormalUserUpload && app.isLoggedIn())) && (
         <div className={"flex flex-row-reverse"}>
           <CreateFileDialog resourceId={resource.id}></CreateFileDialog>
         </div>
@@ -1067,7 +1067,7 @@ function CreateFileDialog({ resourceId }: { resourceId: number }) {
               />
               <textarea
                 className="textarea w-full my-2"
-                placeholder={t("Description")}
+                placeholder={t("Description" + " (Markdown)")}
                 onChange={(e) => {
                   setDescription(e.target.value);
                 }}
@@ -1123,7 +1123,7 @@ function CreateFileDialog({ resourceId }: { resourceId: number }) {
 
               <textarea
                 className="textarea w-full my-2"
-                placeholder={t("Description")}
+                placeholder={t("Description" + " (Markdown)")}
                 onChange={(e) => {
                   setDescription(e.target.value);
                 }}
@@ -1195,7 +1195,7 @@ function CreateFileDialog({ resourceId }: { resourceId: number }) {
 
               <textarea
                 className="textarea w-full my-2"
-                placeholder={t("Description")}
+                placeholder={t("Description" + " (Markdown)")}
                 onChange={(e) => {
                   setDescription(e.target.value);
                 }}
@@ -1446,7 +1446,7 @@ function DeleteFileDialog({
 
 function KunFiles({ resource }: { resource: ResourceDetails }) {
   let vnid = "";
-  for (const link of (resource.links ?? [])) {
+  for (const link of resource.links ?? []) {
     if (link.label.toLowerCase() === "vndb") {
       vnid = link.url.split("/").pop() || "";
       break;
@@ -1536,7 +1536,9 @@ function KunFile({
       <div className={"p-4 flex flex-row items-center"}>
         <div className={"grow"}>
           <h4 className={"font-bold break-all"}>{file.name}</h4>
-          <p className={"text-sm my-1 whitespace-pre-wrap break-all"}>{file.note}</p>
+          <div className={"text-sm my-1 comment_tile"}>
+            <Markdown>{file.note.replaceAll("\n", "  \n")}</Markdown>
+          </div>
           <p className={"items-center mt-1"}>
             <a
               href={"https://www.moyu.moe/user/" + file.user.id}
diff --git a/frontend/src/pages/user_page.tsx b/frontend/src/pages/user_page.tsx
index c394481..4341a7c 100644
--- a/frontend/src/pages/user_page.tsx
+++ b/frontend/src/pages/user_page.tsx
@@ -15,6 +15,7 @@ import {
 } from "react-icons/md";
 import { useTranslation } from "react-i18next";
 import { app } from "../app.ts";
+import Markdown from "react-markdown";
 
 export default function UserPage() {
   const [user, setUser] = useState<User | null>(null);
@@ -336,9 +337,9 @@ function FilesList({
               }
             >
               <h4 className={"font-bold pb-2"}>{file!.filename}</h4>
-              <p className={"text-sm whitespace-pre-wrap"}>
-                {file!.description}
-              </p>
+              <div className={"text-sm comment_tile"}>
+                <Markdown>{file.description.replaceAll("\n", "  \n")}</Markdown>
+              </div>
               <p className={"pt-1"}>
                 <Badge className={"badge-soft badge-secondary text-xs mr-2"}>
                   <MdOutlineArchive size={16} className={"inline-block"} />