Improve about page.

frontend/src/pages/about_page.tsx

@@ -4,7 +4,7 @@ import { ReactElement, ReactNode } from "react";
 
 export default function AboutPage() {
   return (
-    <article className={"p-4"}>
+    <article className={"p-4 bg-base-100-tr82 rounded-2xl mt-4 shadow mx-2"}>
       <Markdown
         components={{
           a: ({ node, ...props }) => {
@@ -31,7 +31,7 @@ export default function AboutPage() {
                       target={"_blank"}
                       href={href}
                     >
-                      <figure className={"max-h-72 max-w-96"}>{img}</figure>
+                      <figure className={"max-h-60 max-w-80"}>{img}</figure>
                       <div className={"card-body text-base-content text-lg"}>
                         {second}
                       </div>

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"}>
+        <div className={"text-sm my-1 comment_tile"}>
-          {activity.file!.description}
+          <Markdown>
-        </p>
+            {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"} />

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"}>
+          <div className={"text-sm my-1 comment_tile"}>
-            {file.description}
+            <Markdown>{file.description.replaceAll("\n", "  \n")}</Markdown>
-          </p>
+          </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}

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"}>
+              <div className={"text-sm comment_tile"}>
-                {file!.description}
+                <Markdown>{file.description.replaceAll("\n", "  \n")}</Markdown>
-              </p>
+              </div>
               <p className={"pt-1"}>
                 <Badge className={"badge-soft badge-secondary text-xs mr-2"}>
                   <MdOutlineArchive size={16} className={"inline-block"} />