Add activities page.

frontend/src/app.tsx

@@ -13,6 +13,7 @@ import EditResourcePage from "./pages/edit_resource_page.tsx";
 import AboutPage from "./pages/about_page.tsx";
 import TagsPage from "./pages/tags_page.tsx";
 import RandomPage from "./pages/random_page.tsx";
+import ActivitiesPage from "./pages/activities_page.tsx";
 
 export default function App() {
   return (
@@ -32,6 +33,7 @@ export default function App() {
           <Route path={"/about"} element={<AboutPage />} />
           <Route path={"/tags"} element={<TagsPage />} />
           <Route path={"/random"} element={<RandomPage />} />
+          <Route path={"/activity"} element={<ActivitiesPage />} />
         </Route>
       </Routes>
     </BrowserRouter>

frontend/src/components/navigator.tsx

@@ -2,12 +2,7 @@ import { app } from "../app.ts";
 import { network } from "../network/network.ts";
 import { useNavigate, useOutlet } from "react-router";
 import { createContext, useContext, useEffect, useState } from "react";
-import {
-  MdArrowUpward,
-  MdOutlinePerson,
-  MdSearch,
-  MdSettings,
-} from "react-icons/md";
+import { MdArrowUpward, MdOutlinePerson, MdSearch } from "react-icons/md";
 import { useTranslation } from "react-i18next";
 import UploadingSideBar from "./uploading_side_bar.tsx";
 import { ThemeSwitcher } from "./theme_switcher.tsx";
@@ -87,20 +82,17 @@ export default function Navigator() {
               >
                 <a>{t("Tags")}</a>
               </li>
-              <li
-                onClick={() => {
-                  const menu = document.getElementById(
-                    "navi_menu",
-                  ) as HTMLElement;
-                  menu.blur();
-                  navigate("/manage");
-                }}
-              >
-                <a>{t("Settings")}</a>
-              </li>
               <li>
-                <a href={"https://github.com/wgh136/nysoure"} target={"_blank"}>
-                  {"Github"}
+                <a
+                  onClick={() => {
+                    const menu = document.getElementById(
+                      "navi_menu",
+                    ) as HTMLElement;
+                    menu.blur();
+                    navigate("/activity");
+                  }}
+                >
+                  {t("Activity")}
                 </a>
               </li>
               <li
@@ -161,6 +153,13 @@ export default function Navigator() {
               >
                 <a>{t("Random")}</a>
               </li>
+              <li
+                onClick={() => {
+                  navigate("/activity");
+                }}
+              >
+                <a>{t("Activity")}</a>
+              </li>
               <li
                 onClick={() => {
                   navigate("/about");
@@ -175,16 +174,6 @@ export default function Navigator() {
             <SearchBar />
             <UploadingSideBar />
             <ThemeSwitcher />
-            {app.isLoggedIn() && (
-              <button
-                className={"btn btn-circle btn-ghost hidden sm:inline-flex"}
-                onClick={() => {
-                  navigate("/manage");
-                }}
-              >
-                <MdSettings size={24} />
-              </button>
-            )}
             <a
               className={"hidden sm:inline"}
               href="https://github.com/wgh136/nysoure"
@@ -284,6 +273,19 @@ function UserButton() {
               {t("Publish")}
             </a>
           </li>
+          <li>
+            <a
+              onClick={() => {
+                navigate(`/manage`);
+                const menu = document.getElementById(
+                  "navi_dropdown_menu",
+                ) as HTMLUListElement;
+                menu.blur();
+              }}
+            >
+              {t("Settings")}
+            </a>
+          </li>
           <li>
             <a
               onClick={() => {

frontend/src/i18n.ts

@@ -47,6 +47,7 @@ export const i18nData = {
       "Server": "Server",
 
       // Management page translations
+      "Settings": "Settings",
       "Manage": "Manage",
       "Storage": "Storage",
       "Users": "Users",
@@ -212,6 +213,12 @@ export const i18nData = {
       "Mint Leaf": "Mint Leaf",
       "Golden Glow": "Golden Glow",
       "Random": "Random",
+
+      // Activity Page
+      "Activity": "Activity",
+      "Published a resource": "Published a resource",
+      "Updated a resource": "Updated a resource",
+      "Commented on a resource": "Commented on a resource",
     },
   },
   "zh-CN": {
@@ -260,6 +267,7 @@ export const i18nData = {
       "Server": "服务器",
 
       // Management page translations
+      "Settings": "设置",
       "Manage": "管理",
       "Storage": "存储",
       "Users": "用户",
@@ -417,6 +425,12 @@ export const i18nData = {
       "Golden Glow": "微光",
 
       "Random": "随机",
+
+      // Activity Page
+      "Activity": "动态",
+      "Published a resource": "发布了一个资源",
+      "Updated a resource": "更新了一个资源",
+      "Commented on a resource": "评论了一个资源",
     },
   },
   "zh-TW": {
@@ -465,6 +479,7 @@ export const i18nData = {
       "Server": "伺服器",
 
       // Management page translations
+      "Settings": "設置",
       "Manage": "管理",
       "Storage": "儲存",
       "Users": "用戶",
@@ -622,6 +637,12 @@ export const i18nData = {
       "Golden Glow": "微光",
 
       "Random": "隨機",
+
+      // Activity Page
+      "Activity": "動態",
+      "Published a resource": "發布了資源",
+      "Updated a resource": "更新了資源",
+      "Commented on a resource": "評論了資源",
     },
   },
 };

frontend/src/network/models.ts

@@ -141,3 +141,20 @@ export enum RSort {
   DownloadsAsc = 4,
   DownloadsDesc = 5,
 }
+
+export enum ActivityType {
+  Unknown = 0,
+  ResourcePublished = 1,
+  ResourceUpdated = 2,
+  ResourceCommented = 3,
+}
+
+export interface Activity {
+  id: number;
+  type: ActivityType;
+  user_id: number;
+  created_at: string;
+  resource?: Resource;
+  user?: User;
+  comment?: CommentWithResource;
+}

frontend/src/network/network.ts

@@ -17,6 +17,7 @@ import {
   ServerConfig,
   RSort,
   TagWithCount,
+  Activity,
 } from "./models.ts";
 
 class Network {
@@ -994,6 +995,18 @@ class Network {
       };
     }
   }
+
+  async getActivities(page: number = 1): Promise<PageResponse<Activity>> {
+    try {
+      const response = await axios.get(`${this.apiBaseUrl}/activity`, {
+        params: { page },
+      });
+      return response.data;
+    } catch (e: any) {
+      console.error(e);
+      return { success: false, message: e.toString() };
+    }
+  }
 }
 
 export const network = new Network();

frontend/src/pages/activities_page.tsx

@@ -0,0 +1,136 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Activity, ActivityType } from "../network/models.ts";
+import { network } from "../network/network.ts";
+import showToast from "../components/toast.ts";
+import { useTranslation } from "react-i18next";
+import { MdArrowRight } from "react-icons/md";
+import { useNavigate } from "react-router";
+import Loading from "../components/loading.tsx";
+
+export default function ActivitiesPage() {
+  const [activities, setActivities] = useState<Activity[]>([]);
+  const pageRef = useRef(0);
+  const maxPageRef = useRef(1);
+  const isLoadingRef = useRef(false);
+
+  const fetchNextPage = useCallback(async () => {
+    if (isLoadingRef.current || pageRef.current >= maxPageRef.current) return;
+    isLoadingRef.current = true;
+    const response = await network.getActivities(pageRef.current);
+    if (response.success) {
+      setActivities((prev) => [...prev, ...response.data!]);
+      pageRef.current += 1;
+      maxPageRef.current = response.totalPages!;
+    } else {
+      showToast({
+        type: "error",
+        message: response.message || "Failed to load activities",
+      });
+    }
+    isLoadingRef.current = false;
+  }, []);
+
+  useEffect(() => {
+    fetchNextPage();
+  }, [fetchNextPage]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (
+        window.innerHeight + window.scrollY >=
+          document.documentElement.scrollHeight - 100 &&
+        !isLoadingRef.current &&
+        pageRef.current < maxPageRef.current
+      ) {
+        fetchNextPage();
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [fetchNextPage]);
+
+  return (
+    <div className={"pb-2"}>
+      {activities.map((activity) => (
+        <ActivityCard key={activity.id} activity={activity} />
+      ))}
+      {pageRef.current < maxPageRef.current && <Loading />}
+    </div>
+  );
+}
+
+function ActivityCard({ activity }: { activity: Activity }) {
+  const { t } = useTranslation();
+
+  const messages = [
+    "Unknown activity",
+    t("Published a resource"),
+    t("Updated a resource"),
+    t("Commented on a resource"),
+  ];
+
+  const navigate = useNavigate();
+
+  let content = <></>;
+
+  if (
+    activity.type === ActivityType.ResourcePublished ||
+    activity.type === ActivityType.ResourceUpdated
+  ) {
+    content = (
+      <div className={"mx-1"}>
+        <div className={"font-bold my-4"}>{activity.resource?.title}</div>
+        {activity.resource?.image && (
+          <div>
+            <img
+              className={"object-contain max-h-52 mt-2 rounded-lg"}
+              src={network.getImageUrl(activity.resource.image.id)}
+              alt={activity.resource.title}
+            />
+          </div>
+        )}
+      </div>
+    );
+  } else if (activity.type === ActivityType.ResourceCommented) {
+    content = (
+      <div className={"mt-2"}>
+        <div className={"text-sm mx-1"}>{activity.comment?.content}</div>
+        <div className={"flex items-center mt-1"}>
+          <MdArrowRight />
+          <span className={"text-sm text-base-content/80"}>
+            {activity.comment?.resource?.title}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={
+        "card shadow m-4 p-4 hover:shadow-md transition-shadow cursor-pointer"
+      }
+      onClick={() => {
+        if (
+          activity.type === ActivityType.ResourcePublished ||
+          activity.type === ActivityType.ResourceUpdated
+        ) {
+          navigate(`/resources/${activity.resource?.id}`);
+        } else if (activity.type === ActivityType.ResourceCommented) {
+          navigate(`/resources/${activity.comment?.resource.id}`);
+        }
+      }}
+    >
+      <div className={"flex items-center"}>
+        <div className={"avatar w-9 h-9"}>
+          <img alt={"avatar"} src={network.getUserAvatar(activity.user!)} />
+        </div>
+        <span className={"mx-2 font-bold"}>{activity.user?.username}</span>
+        <span className={"ml-2 badge badge-primary badge-soft"}>
+          {messages[activity.type]}
+        </span>
+      </div>
+      {content}
+    </div>
+  );
+}

frontend/vite.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
     proxy: {
       "/api": {
         target: "http://localhost:3000",
+        // target: "https://res.nyne.dev",
         changeOrigin: true,
       },
     },