feat: rebuild timeline page

web/src/components/ActivityCalendar.tsx

+import { Tooltip } from "@mui/joy";
+import classNames from "classnames";
+
+interface Props {
+  // Format: 2021-1
+  month: string;
+  data: Record<string, number>;
+}
+
+const getBgColor = (count: number, maxCount: number) => {
+  if (count === 0) {
+    return "bg-gray-100 dark:bg-gray-700";
+  }
+
+  const ratio = count / maxCount;
+  if (ratio > 0.7) {
+    return "bg-blue-600";
+  } else if (ratio > 0.5) {
+    return "bg-blue-400";
+  } else if (ratio > 0.3) {
+    return "bg-blue-300";
+  } else {
+    return "bg-blue-200";
+  }
+};
+
+const ActivityCalendar = (props: Props) => {
+  const { month: monthStr, data } = props;
+  const [year, month] = monthStr.split("-");
+  const dayInMonth = new Date(Number(year), Number(month), 0).getDate();
+  const firstDay = new Date(Number(year), Number(month) - 1, 1).getDay();
+  const lastDay = new Date(Number(year), Number(month) - 1, dayInMonth).getDay();
+  const maxCount = Math.max(...Object.values(data));
+  const days = [];
+
+  for (let i = 0; i < firstDay; i++) {
+    days.push(0);
+  }
+  for (let i = 1; i <= dayInMonth; i++) {
+    days.push(i);
+  }
+  for (let i = 0; i < 6 - lastDay; i++) {
+    days.push(0);
+  }
+
+  return (
+    <div className="w-28 h-20 p-0.5 shrink-0 grid grid-cols-7 grid-flow-row gap-1">
+      {days.map((day, index) => {
+        const date = `${year}-${month}-${day}`;
+        const count = data[date] || 0;
+        return day ? (
+          <Tooltip className="shrink-0" key={`${date}-${index}`} title={`${count} memos in ${date}`} placement="top">
+            <div className={classNames("w-3 h-3 rounded flex justify-center items-center", getBgColor(count, maxCount))}></div>
+          </Tooltip>
+        ) : (
+          <div
+            key={`${date}-${index}`}
+            className={classNames("shrink-0 opacity-30 w-3 h-3 rounded flex justify-center items-center", getBgColor(count, maxCount))}
+          ></div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ActivityCalendar;

web/src/components/MemoView.tsx

 import { Divider, Tooltip } from "@mui/joy";
+import classNames from "classnames";
 import copy from "copy-to-clipboard";
 import { memo, useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
@@ -30,13 +31,13 @@ import "@/less/memo.less";
 interface Props {
   memo: Memo;
   showCreator?: boolean;
-  showParent?: boolean;
   showVisibility?: boolean;
   showPinnedStyle?: boolean;
+  className?: string;
 }
 
 const MemoView: React.FC<Props> = (props: Props) => {
-  const { memo } = props;
+  const { memo, className } = props;
   const t = useTranslate();
   const navigateTo = useNavigateTo();
   const { i18n } = useTranslation();
@@ -165,7 +166,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
 
   return (
     <div
-      className={`group memo-wrapper ${"memos-" + memo.id} ${memo.pinned && props.showPinnedStyle ? "pinned" : ""}`}
+      className={classNames("group memo-wrapper", "memos-" + memo.id, memo.pinned && props.showPinnedStyle ? "pinned" : "", className)}
       ref={memoContainerRef}
     >
       <div className="memo-top-wrapper mb-1">

web/src/components/TimelineMemo.tsx

-import MemoContent from "@/components/MemoContent";
-import MemoResourceListView from "@/components/MemoResourceListView";
-import { getTimeString } from "@/helpers/datetime";
-import { MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
-import { Memo } from "@/types/proto/api/v2/memo_service";
-import MemoRelationListView from "./MemoRelationListView";
-
-interface Props {
-  memo: Memo;
-}
-
-const TimelineMemo = (props: Props) => {
-  const { memo } = props;
-  const relations = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
-
-  return (
-    <div className="relative w-full flex flex-col justify-start items-start">
-      <div className="w-full flex flex-row justify-start items-center mt-0.5 mb-1 text-sm font-mono text-gray-500 dark:text-gray-400">
-        <span className="opacity-80">{getTimeString(memo.displayTime)}</span>
-      </div>
-      <MemoContent memoId={memo.id} nodes={memo.nodes} />
-      <MemoResourceListView resourceList={memo.resources} />
-      <MemoRelationListView memo={memo} relationList={relations} />
-    </div>
-  );
-};
-
-export default TimelineMemo;

web/src/pages/Explore.tsx

@@ -56,7 +56,7 @@ const Explore = () => {
       <div className="relative w-full h-auto flex flex-col justify-start items-start px-4 sm:px-6">
         <MemoFilter />
         {sortedMemos.map((memo) => (
-          <MemoView key={memo.id} memo={memo} showCreator showParent />
+          <MemoView key={memo.id} memo={memo} showCreator />
         ))}
 
         {isRequesting ? (

web/src/pages/Home.tsx

@@ -73,7 +73,7 @@ const Home = () => {
           <div className="flex flex-col justify-start items-start w-full max-w-full pb-28">
             <MemoFilter />
             {sortedMemos.map((memo) => (
-              <MemoView key={`${memo.id}-${memo.updateTime}`} memo={memo} showVisibility showPinnedStyle showParent />
+              <MemoView key={`${memo.id}-${memo.updateTime}`} memo={memo} showVisibility showPinnedStyle />
             ))}
             {isRequesting ? (
               <div className="flex flex-col justify-start items-center w-full my-4">

web/src/pages/Inboxes.tsx

@@ -25,8 +25,9 @@ const Inboxes = () => {
       <div className="w-full px-4 sm:px-6">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
           <div className="relative w-full flex flex-row justify-between items-center">
-            <p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">
-              <Icon.Bell className="w-5 h-auto mr-1" /> {t("common.inbox")}
+            <p className="py-1 flex flex-row justify-start items-center select-none opacity-80">
+              <Icon.Bell className="w-6 h-auto mr-1 opacity-80" />
+              <span className="text-lg">{t("common.inbox")}</span>
             </p>
           </div>
           <div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4">

web/src/pages/Resources.tsx

@@ -71,8 +71,9 @@ const Resources = () => {
       <div className="w-full px-4 sm:px-6">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
           <div className="relative w-full flex flex-row justify-between items-center">
-            <p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">
-              <Icon.Paperclip className="w-5 h-auto mr-1" /> {t("common.resources")}
+            <p className="py-1 flex flex-row justify-start items-center select-none opacity-80">
+              <Icon.Paperclip className="w-6 h-auto mr-1 opacity-80" />
+              <span className="text-lg">{t("common.resources")}</span>
             </p>
             <div>
               <Input

web/src/pages/UserProfile.tsx

@@ -92,7 +92,7 @@ const UserProfile = () => {
                 </div>
               </div>
               {sortedMemos.map((memo) => (
-                <MemoView key={memo.id} memo={memo} showVisibility showPinnedStyle showParent />
+                <MemoView key={memo.id} memo={memo} showVisibility showPinnedStyle />
               ))}
               {isRequesting ? (
                 <div className="flex flex-col justify-start items-center w-full my-4">