chore: update heatmap click handler

web/src/components/MemoContent/Tag.tsx

@@ -3,7 +3,9 @@ interface Props {
 }
 
 const Tag: React.FC<Props> = ({ content }: Props) => {
-  return <span className="inline-block w-auto text-blue-600 dark:text-blue-400">#{content}</span>;
+  return (
+    <span className="tag-container cursor-pointer inline-block w-auto text-blue-600 dark:text-blue-400 hover:opacity-80">#{content}</span>
+  );
 };
 
 export default Tag;

web/src/components/MemoFilter.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
-import { getDateString } from "@/helpers/datetime";
 import { useFilterStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "./Icon";
@@ -10,8 +9,8 @@ const MemoFilter = () => {
   const location = useLocation();
   const filterStore = useFilterStore();
   const filter = filterStore.state;
-  const { tag: tagQuery, duration, text: textQuery, visibility } = filter;
-  const showFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || textQuery || visibility);
+  const { tag: tagQuery, text: textQuery, visibility } = filter;
+  const showFilter = Boolean(tagQuery || textQuery || visibility);
 
   useEffect(() => {
     filterStore.clearFilter();
@@ -48,22 +47,6 @@ const MemoFilter = () => {
         <Icon.Eye className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {visibility}
         <Icon.X className="w-4 h-auto ml-1 opacity-40" />
       </div>
-      {duration && duration.from < duration.to ? (
-        <div
-          className="max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through"
-          onClick={() => {
-            filterStore.setFromAndToFilter();
-          }}
-        >
-          <Icon.Calendar className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" />
-          {t("common.filter-period", {
-            from: getDateString(duration.from),
-            to: getDateString(duration.to),
-            interpolation: { escapeValue: false },
-          })}
-          <Icon.X className="w-4 h-auto ml-1 opacity-40" />
-        </div>
-      ) : null}
       <div
         className={
           "max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through " +

web/src/components/MemoView.tsx

@@ -202,7 +202,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
   const handleMemoContentClick = async (e: React.MouseEvent) => {
     const targetEl = e.target as HTMLElement;
 
-    if (targetEl.className === "tag-span") {
+    if (targetEl.classList.contains("tag-container")) {
       const tagName = targetEl.innerText.slice(1);
       const currTagQuery = filterStore.getState().tag;
       if (currTagQuery === tagName) {

web/src/components/UsageHeatMap.tsx

@@ -4,10 +4,10 @@ import { DAILY_TIMESTAMP } from "@/helpers/consts";
 import { getDateStampByDate, getDateString, getTimeStampByDate } from "@/helpers/datetime";
 import * as utils from "@/helpers/utils";
 import useCurrentUser from "@/hooks/useCurrentUser";
+import useNavigateTo from "@/hooks/useNavigateTo";
 import { useGlobalStore } from "@/store/module";
 import { useUserV1Store, extractUsernameFromName, useMemoV1Store } from "@/store/v1";
 import { useTranslate, Translations } from "@/utils/i18n";
-import { useFilterStore } from "../store/module";
 import "@/less/usage-heat-map.less";
 
 const tableConfig = {
@@ -33,7 +33,7 @@ interface DailyUsageStat {
 
 const UsageHeatMap = () => {
   const t = useTranslate();
-  const filterStore = useFilterStore();
+  const navigateTo = useNavigateTo();
   const userV1Store = useUserV1Store();
   const user = useCurrentUser();
   const memoStore = useMemoV1Store();
@@ -48,7 +48,6 @@ const UsageHeatMap = () => {
   const [memoAmount, setMemoAmount] = useState(0);
   const [createdDays, setCreatedDays] = useState(0);
   const [allStat, setAllStat] = useState<DailyUsageStat[]>(getInitialUsageStat(usedDaysAmount, beginDayTimestamp));
-  const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null);
   const containerElRef = useRef<HTMLDivElement>(null);
   const memos = Array.from(memoStore.getState().memoById.values());
 
@@ -108,13 +107,7 @@ const UsageHeatMap = () => {
   }, []);
 
   const handleUsageStatItemClick = useCallback((item: DailyUsageStat) => {
-    if (filterStore.getState().duration?.from === item.timestamp) {
-      filterStore.setFromAndToFilter();
-      setCurrentStat(null);
-    } else if (item.count > 0) {
-      filterStore.setFromAndToFilter(item.timestamp, item.timestamp + DAILY_TIMESTAMP);
-      setCurrentStat(item);
-    }
+    navigateTo(`/timeline?timestamp=${item.timestamp}`);
   }, []);
 
   // This interpolation is not being used because of the current styling,
@@ -146,11 +139,7 @@ const UsageHeatMap = () => {
                 onMouseLeave={handleUsageStatItemMouseLeave}
                 onClick={() => handleUsageStatItemClick(v)}
               >
-                <span
-                  className={`stat-container ${colorLevel} ${currentStat === v ? "current" : ""} ${
-                    todayTimeStamp === v.timestamp ? "today" : ""
-                  }`}
-                ></span>
+                <span className={`stat-container ${colorLevel} ${todayTimeStamp === v.timestamp ? "today" : ""}`}></span>
               </div>
             );
           })}