From 6aa38c22e72ee36776bf1cbb288922cdfb78bf84 Mon Sep 17 00:00:00 2001
From: Yuhan Zhang <yzhang2127@gmail.com>
Date: Thu, 29 Jan 2026 20:48:15 +0900
Subject: [PATCH] fix: prevent calendar cell redirect and add date deselection

---
 .../StatisticsView/StatisticsView.tsx         | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/src/components/StatisticsView/StatisticsView.tsx b/web/src/components/StatisticsView/StatisticsView.tsx
index 62e135186..c8e0fdfba 100644
--- a/web/src/components/StatisticsView/StatisticsView.tsx
+++ b/web/src/components/StatisticsView/StatisticsView.tsx
@@ -4,6 +4,7 @@ import { MonthCalendar } from "@/components/ActivityCalendar";
 import { useDateFilterNavigation } from "@/hooks";
 import type { StatisticsData } from "@/types/statistics";
 import { MonthNavigator } from "./MonthNavigator";
+import { type MemoFilter, useMemoFilterContext } from "@/contexts/MemoFilterContext";
 
 interface Props {
   statisticsData: StatisticsData;
@@ -12,20 +13,36 @@ interface Props {
 const StatisticsView = (props: Props) => {
   const { statisticsData } = props;
   const { activityStats } = statisticsData;
-  const navigateToDateFilter = useDateFilterNavigation();
   const [visibleMonthString, setVisibleMonthString] = useState(dayjs().format("YYYY-MM"));
+  const { getFiltersByFactor, addFilter, removeFilter } = useMemoFilterContext();
 
   const maxCount = useMemo(() => {
     const counts = Object.values(activityStats);
     return Math.max(...counts, 1);
   }, [activityStats]);
 
+  const handleClick = (date: string) =>{
+    const displayTimeFilters = getFiltersByFactor("displayTime");
+    const isActive = displayTimeFilters.some((f: MemoFilter) => f.value === date);
+
+    if (isActive) {
+      removeFilter((f: MemoFilter) => f.factor === "displayTime" && f.value === date);
+    } else {
+      // Remove all existing tag filters first, then add the new one
+      removeFilter((f: MemoFilter) => f.factor === "displayTime");
+      addFilter({
+        factor: "displayTime",
+        value: date,
+      });
+    }
+  } 
+
   return (
     <div className="group w-full mt-2 flex flex-col text-muted-foreground animate-fade-in">
       <MonthNavigator visibleMonth={visibleMonthString} onMonthChange={setVisibleMonthString} activityStats={activityStats} />
 
       <div className="w-full animate-scale-in">
-        <MonthCalendar month={visibleMonthString} data={activityStats} maxCount={maxCount} onClick={navigateToDateFilter} />
+        <MonthCalendar month={visibleMonthString} data={activityStats} maxCount={maxCount} onClick={handleClick} />
       </div>
     </div>
   );