From 7bb04cffadf3b8e351ca1723755990e1b9dd95d1 Mon Sep 17 00:00:00 2001
From: nyne <me@nyne.dev>
Date: Tue, 24 Jun 2025 12:54:47 +0800
Subject: [PATCH] Add image support to activities and user pages for comments

---
 frontend/src/network/models.ts         |  1 +
 frontend/src/pages/activities_page.tsx | 10 ++++++++++
 frontend/src/pages/user_page.tsx       | 10 ++++++++++
 3 files changed, 21 insertions(+)

diff --git a/frontend/src/network/models.ts b/frontend/src/network/models.ts
index c7d6d38..43b71b4 100644
--- a/frontend/src/network/models.ts
+++ b/frontend/src/network/models.ts
@@ -119,6 +119,7 @@ export interface CommentWithResource {
   content: string;
   created_at: string;
   user: User;
+  images: Image[];
   resource: Resource;
 }
 
diff --git a/frontend/src/pages/activities_page.tsx b/frontend/src/pages/activities_page.tsx
index 80cce38..d529b81 100644
--- a/frontend/src/pages/activities_page.tsx
+++ b/frontend/src/pages/activities_page.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { MdArrowRight } from "react-icons/md";
 import { useNavigate } from "react-router";
 import Loading from "../components/loading.tsx";
+import {SquareImage} from "../components/image.tsx";
 
 export default function ActivitiesPage() {
   const [activities, setActivities] = useState<Activity[]>([]);
@@ -97,6 +98,15 @@ function ActivityCard({ activity }: { activity: Activity }) {
         <div className={"text-sm mx-1 whitespace-pre-wrap"}>
           {activity.comment?.content}
         </div>
+        <div
+          className={
+            "grid grid-cols-3 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 gap-2 px-1 py-2"
+          }
+        >
+          {(activity.comment?.images ?? []).map((image) => (
+            <SquareImage key={image.id} image={image} />
+          ))}
+        </div>
         <div className={"flex items-center mt-1"}>
           <MdArrowRight />
           <span className={"text-sm text-base-content/80"}>
diff --git a/frontend/src/pages/user_page.tsx b/frontend/src/pages/user_page.tsx
index 3881098..5651101 100644
--- a/frontend/src/pages/user_page.tsx
+++ b/frontend/src/pages/user_page.tsx
@@ -7,6 +7,7 @@ import ResourcesView from "../components/resources_view";
 import Loading from "../components/loading";
 import Pagination from "../components/pagination";
 import { MdOutlineArrowRight } from "react-icons/md";
+import {SquareImage} from "../components/image.tsx";
 
 export default function UserPage() {
   const [user, setUser] = useState<User | null>(null);
@@ -207,6 +208,15 @@ function CommentTile({ comment }: { comment: CommentWithResource }) {
       <div className={"p-2 whitespace-pre-wrap text-sm"}>
         {limitArticleLength(comment.content, 200)}
       </div>
+      <div
+        className={
+          "grid grid-cols-3 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 gap-2 p-2"
+        }
+      >
+        {comment.images.map((image) => (
+          <SquareImage key={image.id} image={image} />
+        ))}
+      </div>
       <a
         className="text-sm text-base-content/80 p-1 hover:text-primary cursor-pointer transition-all"
         onClick={() => {