chore: retire timeline page

web/src/components/ActivityCalendar.tsx

@@ -18,11 +18,11 @@ const getCellAdditionalStyles = (count: number, maxCount: number) => {
 
   const ratio = count / maxCount;
   if (ratio > 0.7) {
-    return "bg-blue-600 text-gray-100 dark:opacity-80";
+    return "bg-teal-600 text-gray-100 dark:opacity-80";
   } else if (ratio > 0.4) {
-    return "bg-blue-400 text-gray-200 dark:opacity-80";
+    return "bg-teal-400 text-gray-100 dark:opacity-80";
   } else {
-    return "bg-blue-300 text-gray-600 dark:opacity-80";
+    return "bg-teal-300 text-gray-100 dark:opacity-80";
   }
 };
 
@@ -48,7 +48,7 @@ const ActivityCalendar = (props: Props) => {
   }
 
   return (
-    <div className={clsx("w-36 h-auto p-0.5 shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
+    <div className={clsx("w-full h-auto shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
       {days.map((day, index) => {
         const date = getNormalizedDateString(
           getDateWithOffset(`${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`),
@@ -61,7 +61,7 @@ const ActivityCalendar = (props: Props) => {
           <Tooltip className="shrink-0" key={`${date}-${index}`} title={tooltipText} placement="top" arrow>
             <div
               className={clsx(
-                "w-4 h-4 text-[9px] rounded-md flex justify-center items-center border",
+                "w-6 h-6 text-xs rounded-xl flex justify-center items-center border",
                 getCellAdditionalStyles(count, maxCount),
                 isToday && "border-gray-600 dark:border-zinc-300",
                 isSelected && "font-bold border-gray-600 dark:border-zinc-300",
@@ -77,7 +77,7 @@ const ActivityCalendar = (props: Props) => {
           <div
             key={`${date}-${index}`}
             className={clsx(
-              "shrink-0 opacity-30 w-4 h-4 rounded-md flex justify-center items-center border border-transparent",
+              "shrink-0 opacity-30 w-6 h-6 rounded-xl flex justify-center items-center border border-transparent",
               getCellAdditionalStyles(count, maxCount),
             )}
           ></div>

web/src/components/Navigation.tsx

@@ -50,16 +50,10 @@ const Navigation = (props: Props) => {
 
   const homeNavLink: NavLinkItem = {
     id: "header-home",
-    path: Routes.HOME,
+    path: Routes.ROOT,
     title: t("common.home"),
     icon: <Icon.Home className="w-6 h-auto opacity-70 shrink-0" />,
   };
-  const timelineNavLink: NavLinkItem = {
-    id: "header-timeline",
-    path: Routes.TIMELINE,
-    title: t("timeline.title"),
-    icon: <Icon.GanttChartSquare className="w-6 h-auto opacity-70 shrink-0" />,
-  };
   const resourcesNavLink: NavLinkItem = {
     id: "header-resources",
     path: Routes.RESOURCES,
@@ -117,7 +111,7 @@ const Navigation = (props: Props) => {
   };
 
   const navLinks: NavLinkItem[] = user
-    ? [homeNavLink, timelineNavLink, resourcesNavLink, exploreNavLink, profileNavLink, inboxNavLink, archivedNavLink, settingNavLink]
+    ? [homeNavLink, resourcesNavLink, exploreNavLink, profileNavLink, inboxNavLink, archivedNavLink, settingNavLink]
     : [exploreNavLink, signInNavLink, aboutNavLink];
 
   return (

web/src/components/UserStatisticsView.tsx

@@ -1,13 +1,16 @@
 import { Divider, Tooltip } from "@mui/joy";
 import clsx from "clsx";
+import dayjs from "dayjs";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { memoServiceClient } from "@/grpcweb";
 import useAsyncEffect from "@/hooks/useAsyncEffect";
 import useCurrentUser from "@/hooks/useCurrentUser";
+import i18n from "@/i18n";
 import { useFilterStore } from "@/store/module";
 import { useMemoStore } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
+import ActivityCalendar from "./ActivityCalendar";
 import Icon from "./Icon";
 
 interface UserMemoStats {
@@ -25,6 +28,8 @@ const UserStatisticsView = () => {
   const [memoAmount, setMemoAmount] = useState(0);
   const [isRequesting, setIsRequesting] = useState(false);
   const [memoStats, setMemoStats] = useState<UserMemoStats>({ link: 0, taskList: 0, code: 0, incompleteTasks: 0 });
+  const [activityStats, setActivityStats] = useState<Record<string, number>>({});
+  const monthString = dayjs(new Date().toDateString()).format("YYYY-MM");
   const days = Math.ceil((Date.now() - currentUser.createTime!.getTime()) / 86400000);
   const filter = filterStore.state;
 
@@ -50,6 +55,21 @@ const UserStatisticsView = () => {
     });
     setMemoStats(memoStats);
     setMemoAmount(properties.length);
+
+    const filters = [`row_status == "NORMAL"`];
+    const { stats } = await memoServiceClient.getUserMemosStats({
+      name: currentUser.name,
+      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      filter: filters.join(" && "),
+    });
+
+    setActivityStats(
+      Object.fromEntries(
+        Object.entries(stats).filter(([date]) => {
+          return dayjs(date).format("YYYY-MM") === monthString;
+        }),
+      ),
+    );
     setIsRequesting(false);
   }, [memoStore.stateId]);
 
@@ -64,7 +84,9 @@ const UserStatisticsView = () => {
   return (
     <div className="group w-full border mt-2 py-2 px-3 rounded-lg space-y-0.5 text-gray-500 dark:text-gray-400 bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
       <div className="w-full mb-1 flex flex-row justify-between items-center">
-        <p className="text-sm font-medium leading-6 dark:text-gray-500">{t("common.statistics")}</p>
+        <p className="text-sm font-medium leading-6 dark:text-gray-400">
+          {new Date().toLocaleDateString(i18n.language, { month: "long", day: "numeric" })}
+        </p>
         <div className="group-hover:block hidden">
           <Tooltip title={"Refresh"} placement="top">
             <Icon.RefreshCcw
@@ -74,6 +96,9 @@ const UserStatisticsView = () => {
           </Tooltip>
         </div>
       </div>
+      <div className="w-full pb-2">
+        <ActivityCalendar month={monthString} selectedDate={new Date().toDateString()} data={activityStats} />
+      </div>
       <div className="w-full grid grid-cols-1 gap-x-4">
         <div className="w-full flex justify-between items-center">
           <div className="w-auto flex justify-start items-center">

web/src/layouts/RootLayout.tsx

@@ -14,31 +14,16 @@ const RootLayout = () => {
   const location = useLocation();
   const { sm } = useResponsiveWidth();
   const currentUser = useCurrentUser();
-  const [lastVisited] = useLocalStorage<string>("lastVisited", "/home");
   const [collapsed, setCollapsed] = useLocalStorage<boolean>("navigation-collapsed", false);
   const [initialized, setInitialized] = useState(false);
 
   useEffect(() => {
     if (!currentUser) {
-      if (
-        ([Routes.ROOT, Routes.HOME, Routes.TIMELINE, Routes.RESOURCES, Routes.INBOX, Routes.ARCHIVED, Routes.SETTING] as string[]).includes(
-          location.pathname,
-        )
-      ) {
+      if (([Routes.ROOT, Routes.RESOURCES, Routes.INBOX, Routes.ARCHIVED, Routes.SETTING] as string[]).includes(location.pathname)) {
         window.location.href = Routes.EXPLORE;
         return;
       }
-    } else {
-      if (location.pathname === Routes.ROOT) {
-        if (lastVisited && ([Routes.HOME, Routes.TIMELINE] as string[]).includes(lastVisited)) {
-          window.location.href = lastVisited;
-        } else {
-          window.location.href = Routes.HOME;
-        }
-        return;
-      }
     }
-
     setInitialized(true);
   }, []);
 

web/src/locales/en.json

@@ -307,8 +307,5 @@
     "delete-confirm": "Are you sure to delete this tag? All related memos will be archived.",
     "delete-tag": "Delete Tag",
     "no-tag-found": "No tag found"
-  },
-  "timeline": {
-    "title": "Timeline"
   }
 }

web/src/pages/Home.tsx

@@ -1,7 +1,6 @@
 import { Button } from "@mui/joy";
 import clsx from "clsx";
 import { useEffect, useState } from "react";
-import useLocalStorage from "react-use/lib/useLocalStorage";
 import Empty from "@/components/Empty";
 import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar";
 import Icon from "@/components/Icon";
@@ -13,7 +12,6 @@ import { getTimeStampByDate } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useFilterWithUrlParams from "@/hooks/useFilterWithUrlParams";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
-import { Routes } from "@/router";
 import { useMemoList, useMemoStore } from "@/store/v1";
 import { RowStatus } from "@/types/proto/api/v1/common";
 import { useTranslate } from "@/utils/i18n";
@@ -24,7 +22,6 @@ const Home = () => {
   const user = useCurrentUser();
   const memoStore = useMemoStore();
   const memoList = useMemoList();
-  const [, setLastVisited] = useLocalStorage<string>("lastVisited", Routes.HOME);
   const [isRequesting, setIsRequesting] = useState(true);
   const [nextPageToken, setNextPageToken] = useState<string>("");
   const filter = useFilterWithUrlParams();
@@ -33,10 +30,6 @@ const Home = () => {
     .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))
     .sort((a, b) => Number(b.pinned) - Number(a.pinned));
 
-  useEffect(() => {
-    setLastVisited(Routes.HOME);
-  }, []);
-
   useEffect(() => {
     memoList.reset();
     fetchMemos("");