feat: notifications

frontend/src/app.tsx

@@ -19,6 +19,7 @@ import CreateCollectionPage from "./pages/create_collection_page.tsx";
 import CollectionPage from "./pages/collection_page.tsx";
 import { i18nData } from "./i18n.ts";
 import { i18nContext } from "./utils/i18n.ts";
+import NotificationPage from "./pages/notification_page.tsx";
 
 export default function App() {
   return (
@@ -49,6 +50,7 @@ export default function App() {
               element={<CreateCollectionPage />}
             />
             <Route path={"/collection/:id"} element={<CollectionPage />} />
+            <Route path={"/notifications"} element={<NotificationPage />} />
           </Route>
         </Routes>
       </BrowserRouter>

frontend/src/components/navigator.tsx

@@ -2,11 +2,10 @@ 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 } from "react-icons/md";
+import { MdArrowUpward, MdOutlinePerson, MdSearch, MdNotifications } from "react-icons/md";
 import { useTranslation } from "../utils/i18n";
 import UploadingSideBar from "./uploading_side_bar.tsx";
 import { ThemeSwitcher } from "./theme_switcher.tsx";
-import { IoLogoGithub } from "react-icons/io";
 import { useAppContext } from "./AppContext.tsx";
 import { AnimatePresence, motion } from "framer-motion";
 
@@ -234,16 +233,7 @@ export default function Navigator() {
               <SearchBar />
               <UploadingSideBar />
               <ThemeSwitcher />
-              <a
-                className={"hidden sm:inline"}
-                href="https://github.com/wgh136/nysoure"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <button className={"btn btn-circle btn-ghost"}>
-                  <IoLogoGithub size={24} />
-                </button>
-              </a>
+              {app.isLoggedIn() && <NotificationButton />}
               {app.isLoggedIn() ? (
                 <UserButton />
               ) : (
@@ -554,3 +544,43 @@ function FloatingToTopButton() {
     </button>
   );
 }
+
+function NotificationButton() {
+  const [count, setCount] = useState(0);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchCount = async () => {
+      if (!app.isLoggedIn()) {
+        return;
+      }
+      const res = await network.getUserNotificationsCount();
+      if (res.success && res.data !== undefined) {
+        setCount(res.data);
+      }
+    };
+
+    fetchCount();
+    const interval = setInterval(fetchCount, 60000); // 每分钟请求一次
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="indicator">
+      {count > 0 && (
+        <span className="indicator-item badge badge-secondary badge-sm">
+          {count > 99 ? "99+" : count}
+        </span>
+      )}
+      <button
+        className="btn btn-ghost btn-circle"
+        onClick={() => {
+          navigate("/notifications");
+        }}
+      >
+        <MdNotifications size={24} />
+      </button>
+    </div>
+  );
+}

frontend/src/i18n.ts

@@ -262,6 +262,7 @@ export const i18nData = {
       "Tag": "标签",
       "Optional": "可选",
       "Download": "下载",
+      "Notifications": "通知",
     },
   },
   "zh-TW": {
@@ -527,6 +528,7 @@ export const i18nData = {
       "Tag": "標籤",
       "Optional": "可選",
       "Download": "下載",
+      "Notifications": "通知",
     },
   },
 };

frontend/src/network/network.ts

@@ -730,6 +730,26 @@ class Network {
     );
   }
 
+  async getUserNotifications(page: number = 1): Promise<PageResponse<Activity>> {
+    return this._callApi(() =>
+      axios.get(`${this.apiBaseUrl}/notification`, {
+        params: { page },
+      }),
+    );
+  }
+
+  async resetUserNotificationsCount(): Promise<Response<void>> {
+    return this._callApi(() =>
+      axios.post(`${this.apiBaseUrl}/notification/reset`),
+    );
+  }
+
+  async getUserNotificationsCount(): Promise<Response<number>> {
+    return this._callApi(() =>
+      axios.get(`${this.apiBaseUrl}/notification/count`),
+    );
+  }
+
   async createCollection(
     title: string,
     article: string,

frontend/src/pages/notification_page.tsx

@@ -0,0 +1,209 @@
+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 "../utils/i18n";
+import { useNavigate } from "react-router";
+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";
+import { ErrorAlert } from "../components/alert.tsx";
+import { app } from "../app.ts";
+
+export default function NotificationPage() {
+  const [activities, setActivities] = useState<Activity[]>([]);
+  const pageRef = useRef(0);
+  const maxPageRef = useRef(1);
+  const isLoadingRef = useRef(false);
+  const { t } = useTranslation();
+
+  const fetchNextPage = useCallback(async () => {
+    if (isLoadingRef.current || pageRef.current >= maxPageRef.current) return;
+    isLoadingRef.current = true;
+    const response = await network.getUserNotifications(pageRef.current + 1);
+    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(() => {
+    network.resetUserNotificationsCount();
+  }, []);
+
+  useEffect(() => {
+    document.title = t("Notifications");
+  }, [])
+
+  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]);
+
+  if (!app.user) {
+    return (
+      <ErrorAlert
+        className={"m-4"}
+        message={t("You are not logged in. Please log in to access this page.")}
+      />
+    );
+  }
+
+  return (
+    <div className={"pb-2"}>
+      {activities.map((activity) => (
+        <ActivityCard key={activity.id} activity={activity} />
+      ))}
+      {pageRef.current < maxPageRef.current && <Loading />}
+    </div>
+  );
+}
+
+function fileSizeToString(size: number) {
+  if (size < 1024) {
+    return size + "B";
+  } else if (size < 1024 * 1024) {
+    return (size / 1024).toFixed(2) + "KB";
+  } else if (size < 1024 * 1024 * 1024) {
+    return (size / 1024 / 1024).toFixed(2) + "MB";
+  } else {
+    return (size / 1024 / 1024 / 1024).toFixed(2) + "GB";
+  }
+}
+
+function ActivityCard({ activity }: { activity: Activity }) {
+  const { t } = useTranslation();
+
+  const messages = [
+    "Unknown activity",
+    t("Published a resource"),
+    t("Updated a resource"),
+    t("Posted a comment"),
+    t("Added a new file"),
+  ];
+
+  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 break-all"}>
+          {activity.resource?.title}
+        </div>
+        {activity.resource?.image && (
+          <div>
+            <img
+              className={"object-contain max-h-52 mt-2 rounded-lg"}
+              src={network.getResampledImageUrl(activity.resource.image.id)}
+              alt={activity.resource.title}
+            />
+          </div>
+        )}
+      </div>
+    );
+  } else if (activity.type === ActivityType.NewComment) {
+    content = (
+      <div className="comment_tile">
+        <CommentContent content={activity.comment!.content} />
+      </div>
+    );
+  } else if (activity.type === ActivityType.NewFile) {
+    content = (
+      <div>
+        <h4 className={"font-bold py-2 break-all"}>
+          {activity.file!.filename}
+        </h4>
+        <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"} />
+            {activity.file!.is_redirect
+              ? t("Redirect")
+              : fileSizeToString(activity.file!.size)}
+          </Badge>
+          <Badge className={"badge-soft badge-accent text-xs mr-2"}>
+            <MdOutlinePhotoAlbum size={16} className={"inline-block"} />
+            {(() => {
+              let title = activity.resource!.title;
+              if (title.length > 20) {
+                title = title.slice(0, 20) + "...";
+              }
+              return title;
+            })()}
+          </Badge>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={
+        "card shadow m-4 p-4 hover:shadow-md transition-shadow cursor-pointer bg-base-100-tr82"
+      }
+      onClick={() => {
+        if (
+          activity.type === ActivityType.ResourcePublished ||
+          activity.type === ActivityType.ResourceUpdated
+        ) {
+          navigate(`/resources/${activity.resource?.id}`);
+        } else if (activity.type === ActivityType.NewComment) {
+          navigate(`/comments/${activity.comment?.id}`);
+        } else if (activity.type === ActivityType.NewFile) {
+          navigate(`/resources/${activity.resource?.id}#files`);
+        }
+      }}
+    >
+      <div className={"flex items-center"}>
+        <div className={"avatar w-9 h-9 rounded-full"}>
+          <img
+            className={"rounded-full"}
+            alt={"avatar"}
+            src={network.getUserAvatar(activity.user!)}
+          />
+        </div>
+        <span className={"mx-2 font-bold text-sm"}>
+          {activity.user?.username}
+        </span>
+        <span
+          className={"ml-2 badge-sm sm:badge-md badge badge-primary badge-soft"}
+        >
+          {messages[activity.type]}
+        </span>
+      </div>
+      {content}
+    </div>
+  );
+}