refactor(web): improve ActivityCalendar maintainability and add Calendar page

- Extract shared utilities and constants to eliminate code duplication
- Create dedicated Calendar page with year view and month grid
- Add date filter navigation with bidirectional URL sync
- Fix useTodayDate memoization bug causing stale date references
- Standardize naming conventions (get vs generate functions)
- Add comprehensive type exports and proper store encapsulation
- Implement size variants for compact calendar display

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: boojack

web/src/components/ActivityCalendar/ActivityCalendar.tsx

@@ -6,6 +6,7 @@ import { instanceStore } from "@/store";
 import type { ActivityCalendarProps } from "@/types/statistics";
 import { useTranslate } from "@/utils/i18n";
 import { CalendarCell } from "./CalendarCell";
+import { getTooltipText, useTodayDate, useWeekdayLabels } from "./shared";
 import { useCalendarMatrix } from "./useCalendarMatrix";
 
 export const ActivityCalendar = memo(
@@ -14,14 +15,10 @@ export const ActivityCalendar = memo(
     const { month, selectedDate, data, onClick } = props;
     const weekStartDayOffset = instanceStore.state.generalSetting.weekStartDayOffset;
 
-    const today = useMemo(() => dayjs().format("YYYY-MM-DD"), []);
+    const today = useTodayDate();
+    const weekDaysRaw = useWeekdayLabels();
     const selectedDateFormatted = useMemo(() => dayjs(selectedDate).format("YYYY-MM-DD"), [selectedDate]);
 
-    const weekDaysRaw = useMemo(
-      () => [t("days.sun"), t("days.mon"), t("days.tue"), t("days.wed"), t("days.thu"), t("days.fri"), t("days.sat")],
-      [t],
-    );
-
     const { weeks, weekDays, maxCount } = useCalendarMatrix({
       month,
       data,
@@ -33,26 +30,19 @@ export const ActivityCalendar = memo(
 
     return (
       <TooltipProvider>
-        <div className="w-full flex flex-col gap-1">
-          <div className="grid grid-cols-7 gap-1 text-xs text-muted-foreground">
+        <div className="w-full flex flex-col gap-0.5">
+          <div className="grid grid-cols-7 gap-0.5 text-xs text-muted-foreground">
             {weekDays.map((label, index) => (
-              <div key={index} className="flex h-5 items-center justify-center text-muted-foreground/80">
+              <div key={index} className="flex h-4 items-center justify-center text-muted-foreground/80">
                 {label}
               </div>
             ))}
           </div>
 
-          <div className="grid grid-cols-7 gap-1">
+          <div className="grid grid-cols-7 gap-0.5">
             {weeks.map((week, weekIndex) =>
               week.days.map((day, dayIndex) => {
-                const tooltipText =
-                  day.count === 0
-                    ? day.date
-                    : t("memo.count-memos-in-date", {
-                        count: day.count,
-                        memos: day.count === 1 ? t("common.memo") : t("common.memos"),
-                        date: day.date,
-                      }).toLowerCase();
+                const tooltipText = getTooltipText(day.count, day.date, t);
 
                 return (
                   <CalendarCell

web/src/components/ActivityCalendar/CalendarCell.tsx

@@ -1,27 +1,36 @@
 import { memo } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import type { CalendarDayCell } from "./types";
+import { DEFAULT_CELL_SIZE, SMALL_CELL_SIZE } from "./constants";
+import type { CalendarDayCell, CalendarSize } from "./types";
 import { getCellIntensityClass } from "./utils";
 
-interface CalendarCellProps {
+export interface CalendarCellProps {
   day: CalendarDayCell;
   maxCount: number;
   tooltipText: string;
   onClick?: (date: string) => void;
+  size?: CalendarSize;
 }
 
 export const CalendarCell = memo((props: CalendarCellProps) => {
-  const { day, maxCount, tooltipText, onClick } = props;
+  const { day, maxCount, tooltipText, onClick, size = "default" } = props;
 
   const handleClick = () => {
     if (day.count > 0 && onClick) {
       onClick(day.date);
     }
   };
 
-  const baseClasses =
-    "w-full h-7 rounded-md border text-xs flex items-center justify-center text-center transition-transform duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background select-none";
+  const sizeConfig = size === "small" ? SMALL_CELL_SIZE : DEFAULT_CELL_SIZE;
+  const smallExtraClasses = size === "small" ? `${SMALL_CELL_SIZE.dimensions} min-h-0` : "";
+
+  const baseClasses = cn(
+    "aspect-square w-full border flex items-center justify-center text-center transition-transform duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background select-none",
+    sizeConfig.font,
+    sizeConfig.borderRadius,
+    smallExtraClasses,
+  );
   const isInteractive = Boolean(onClick && day.count > 0);
   const ariaLabel = day.isSelected ? `${tooltipText} (selected)` : tooltipText;
 
@@ -38,8 +47,8 @@ export const CalendarCell = memo((props: CalendarCellProps) => {
   const buttonClasses = cn(
     baseClasses,
     "border-transparent text-muted-foreground",
-    day.isToday && "border-border",
-    day.isSelected && "border-border font-medium",
+    (day.isToday || day.isSelected) && "border-border",
+    day.isSelected && "font-medium",
     day.isWeekend && "text-muted-foreground/80",
     intensityClass,
     isInteractive ? "cursor-pointer hover:scale-105" : "cursor-default",
@@ -59,7 +68,9 @@ export const CalendarCell = memo((props: CalendarCellProps) => {
     </button>
   );
 
-  if (!tooltipText) {
+  const shouldShowTooltip = tooltipText && day.count > 0;
+
+  if (!shouldShowTooltip) {
     return button;
   }
 

web/src/components/ActivityCalendar/CompactMonthCalendar.tsx

@@ -0,0 +1,56 @@
+import { observer } from "mobx-react-lite";
+import { memo } from "react";
+import { cn } from "@/lib/utils";
+import { instanceStore } from "@/store";
+import { useTranslate } from "@/utils/i18n";
+import { CalendarCell } from "./CalendarCell";
+import { DEFAULT_CELL_SIZE, SMALL_CELL_SIZE } from "./constants";
+import { getTooltipText, useTodayDate, useWeekdayLabels } from "./shared";
+import type { CompactMonthCalendarProps } from "./types";
+import { useCalendarMatrix } from "./useCalendarMatrix";
+
+export const CompactMonthCalendar = memo(
+  observer((props: CompactMonthCalendarProps) => {
+    const { month, data, maxCount, size = "default", onClick } = props;
+    const t = useTranslate();
+
+    const weekStartDayOffset = instanceStore.state.generalSetting.weekStartDayOffset;
+
+    const today = useTodayDate();
+    const weekDays = useWeekdayLabels();
+
+    const { weeks } = useCalendarMatrix({
+      month,
+      data,
+      weekDays,
+      weekStartDayOffset,
+      today,
+      selectedDate: "",
+    });
+
+    const sizeConfig = size === "small" ? SMALL_CELL_SIZE : DEFAULT_CELL_SIZE;
+
+    return (
+      <div className={cn("grid grid-cols-7", sizeConfig.gap)}>
+        {weeks.map((week, weekIndex) =>
+          week.days.map((day, dayIndex) => {
+            const tooltipText = getTooltipText(day.count, day.date, t);
+
+            return (
+              <CalendarCell
+                key={`${weekIndex}-${dayIndex}-${day.date}`}
+                day={day}
+                maxCount={maxCount}
+                tooltipText={tooltipText}
+                onClick={onClick}
+                size={size}
+              />
+            );
+          }),
+        )}
+      </div>
+    );
+  }),
+);
+
+CompactMonthCalendar.displayName = "CompactMonthCalendar";

web/src/components/ActivityCalendar/constants.ts

@@ -0,0 +1,24 @@
+export const DAYS_IN_WEEK = 7;
+export const MONTHS_IN_YEAR = 12;
+export const WEEKEND_DAYS = [0, 6] as const;
+export const MIN_COUNT = 1;
+
+export const INTENSITY_THRESHOLDS = {
+  HIGH: 0.75,
+  MEDIUM: 0.5,
+  LOW: 0.25,
+  MINIMAL: 0,
+} as const;
+
+export const SMALL_CELL_SIZE = {
+  font: "text-[10px]",
+  dimensions: "max-w-6 max-h-6",
+  borderRadius: "rounded-sm",
+  gap: "gap-px",
+} as const;
+
+export const DEFAULT_CELL_SIZE = {
+  font: "text-xs",
+  borderRadius: "rounded",
+  gap: "gap-0.5",
+} as const;

web/src/components/ActivityCalendar/index.ts

@@ -1 +1,21 @@
 export { ActivityCalendar as default } from "./ActivityCalendar";
+export { CalendarCell, type CalendarCellProps } from "./CalendarCell";
+export { CompactMonthCalendar } from "./CompactMonthCalendar";
+export * from "./constants";
+export { getTooltipText, type TranslateFunction, useTodayDate, useWeekdayLabels } from "./shared";
+export type {
+  CalendarDayCell,
+  CalendarDayRow,
+  CalendarMatrixResult,
+  CalendarSize,
+  CompactMonthCalendarProps,
+} from "./types";
+export { type UseCalendarMatrixParams, useCalendarMatrix } from "./useCalendarMatrix";
+export {
+  calculateYearMaxCount,
+  filterDataByYear,
+  generateMonthsForYear,
+  getCellIntensityClass,
+  getMonthLabel,
+  hasActivityData,
+} from "./utils";

web/src/components/ActivityCalendar/shared.ts

@@ -0,0 +1,26 @@
+import dayjs from "dayjs";
+import { useMemo } from "react";
+import { useTranslate } from "@/utils/i18n";
+
+export type TranslateFunction = ReturnType<typeof useTranslate>;
+
+export const useWeekdayLabels = () => {
+  const t = useTranslate();
+  return useMemo(() => [t("days.sun"), t("days.mon"), t("days.tue"), t("days.wed"), t("days.thu"), t("days.fri"), t("days.sat")], [t]);
+};
+
+export const useTodayDate = () => {
+  return dayjs().format("YYYY-MM-DD");
+};
+
+export const getTooltipText = (count: number, date: string, t: TranslateFunction): string => {
+  if (count === 0) {
+    return date;
+  }
+
+  return t("memo.count-memos-in-date", {
+    count,
+    memos: count === 1 ? t("common.memo") : t("common.memos"),
+    date,
+  }).toLowerCase();
+};

web/src/components/ActivityCalendar/types.ts

@@ -1,3 +1,5 @@
+export type CalendarSize = "default" | "small";
+
 export interface CalendarDayCell {
   date: string;
   label: number;
@@ -17,3 +19,11 @@ export interface CalendarMatrixResult {
   weekDays: string[];
   maxCount: number;
 }
+
+export interface CompactMonthCalendarProps {
+  month: string;
+  data: Record<string, number>;
+  maxCount: number;
+  size?: CalendarSize;
+  onClick?: (date: string) => void;
+}

web/src/components/ActivityCalendar/useCalendarMatrix.ts

@@ -1,8 +1,9 @@
 import dayjs from "dayjs";
 import { useMemo } from "react";
+import { DAYS_IN_WEEK, MIN_COUNT, WEEKEND_DAYS } from "./constants";
 import type { CalendarDayCell, CalendarMatrixResult } from "./types";
 
-interface UseCalendarMatrixParams {
+export interface UseCalendarMatrixParams {
   month: string;
   data: Record<string, number>;
   weekDays: string[];
@@ -11,6 +12,39 @@ interface UseCalendarMatrixParams {
   selectedDate: string;
 }
 
+const createCalendarDayCell = (
+  current: dayjs.Dayjs,
+  monthKey: string,
+  data: Record<string, number>,
+  today: string,
+  selectedDate: string,
+): CalendarDayCell => {
+  const isoDate = current.format("YYYY-MM-DD");
+  const isCurrentMonth = current.format("YYYY-MM") === monthKey;
+  const count = data[isoDate] ?? 0;
+
+  return {
+    date: isoDate,
+    label: current.date(),
+    count,
+    isCurrentMonth,
+    isToday: isoDate === today,
+    isSelected: isoDate === selectedDate,
+    isWeekend: WEEKEND_DAYS.includes(current.day()),
+  };
+};
+
+const calculateCalendarBoundaries = (monthStart: dayjs.Dayjs, weekStartDayOffset: number) => {
+  const monthEnd = monthStart.endOf("month");
+  const startOffset = (monthStart.day() - weekStartDayOffset + DAYS_IN_WEEK) % DAYS_IN_WEEK;
+  const endOffset = (weekStartDayOffset + (DAYS_IN_WEEK - 1) - monthEnd.day() + DAYS_IN_WEEK) % DAYS_IN_WEEK;
+  const calendarStart = monthStart.subtract(startOffset, "day");
+  const calendarEnd = monthEnd.add(endOffset, "day");
+  const dayCount = calendarEnd.diff(calendarStart, "day") + 1;
+
+  return { calendarStart, dayCount };
+};
+
 export const useCalendarMatrix = ({
   month,
   data,
@@ -21,51 +55,32 @@ export const useCalendarMatrix = ({
 }: UseCalendarMatrixParams): CalendarMatrixResult => {
   return useMemo(() => {
     const monthStart = dayjs(month).startOf("month");
-    const monthEnd = monthStart.endOf("month");
     const monthKey = monthStart.format("YYYY-MM");
 
-    const orderedWeekDays = weekDays.slice(weekStartDayOffset).concat(weekDays.slice(0, weekStartDayOffset));
-
-    const startOffset = (monthStart.day() - weekStartDayOffset + 7) % 7;
-    const endOffset = (weekStartDayOffset + 6 - monthEnd.day() + 7) % 7;
+    const rotatedWeekDays = weekDays.slice(weekStartDayOffset).concat(weekDays.slice(0, weekStartDayOffset));
 
-    const calendarStart = monthStart.subtract(startOffset, "day");
-    const calendarEnd = monthEnd.add(endOffset, "day");
-    const dayCount = calendarEnd.diff(calendarStart, "day") + 1;
+    const { calendarStart, dayCount } = calculateCalendarBoundaries(monthStart, weekStartDayOffset);
 
     const weeks: CalendarMatrixResult["weeks"] = [];
     let maxCount = 0;
 
     for (let index = 0; index < dayCount; index += 1) {
       const current = calendarStart.add(index, "day");
-      const isoDate = current.format("YYYY-MM-DD");
-      const weekIndex = Math.floor(index / 7);
+      const weekIndex = Math.floor(index / DAYS_IN_WEEK);
 
       if (!weeks[weekIndex]) {
         weeks[weekIndex] = { days: [] };
       }
 
-      const isCurrentMonth = current.format("YYYY-MM") === monthKey;
-      const count = data[isoDate] ?? 0;
-
-      const dayCell: CalendarDayCell = {
-        date: isoDate,
-        label: current.date(),
-        count,
-        isCurrentMonth,
-        isToday: isoDate === today,
-        isSelected: isoDate === selectedDate,
-        isWeekend: [0, 6].includes(current.day()),
-      };
-
+      const dayCell = createCalendarDayCell(current, monthKey, data, today, selectedDate);
       weeks[weekIndex].days.push(dayCell);
-      maxCount = Math.max(maxCount, count);
+      maxCount = Math.max(maxCount, dayCell.count);
     }
 
     return {
       weeks,
-      weekDays: orderedWeekDays,
-      maxCount: Math.max(maxCount, 1),
+      weekDays: rotatedWeekDays,
+      maxCount: Math.max(maxCount, MIN_COUNT),
     };
   }, [month, data, weekDays, weekStartDayOffset, today, selectedDate]);
 };