Repository: usememos/memos
File: web/src/components/ActivityCalendar.tsx (TypeScript)

Code before:
import { Tooltip } from "@mui/joy";
import dayjs from "dayjs";
import { useWorkspaceSettingStore } from "@/store/v1";
import { WorkspaceGeneralSetting } from "@/types/proto/api/v1/workspace_setting_service";
import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
import { cn } from "@/utils";
import { useTranslate } from "@/utils/i18n";

interface Props {
  month: string; // Format: 2021-1
  selectedDate: string;
  data: Record<string, number>;
  onClick?: (date: string) => void;
}

const getCellAdditionalStyles = (count: number, maxCount: number) => {
  if (count === 0) {
    return "";
  }
  const ratio = count / maxCount;
  if (count >= 3 && ratio > 0.4) {
    if (ratio > 0.7) {
      return "bg-primary-darker/80 text-gray-100 dark:opacity-80";
    } else {
      return "bg-primary/80 text-gray-100 dark:opacity-80";
    }
  } else {
    return "bg-primary/70 text-gray-100 dark:opacity-70";
  }
};

const ActivityCalendar = (props: Props) => {
  const t = useTranslate();
  const { month: monthStr, data, onClick } = props;
  const workspaceSettingStore = useWorkspaceSettingStore();
  const weekStartDayOffset = (
    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL).generalSetting || WorkspaceGeneralSetting.fromPartial({})
  ).weekStartDayOffset;

  const year = dayjs(monthStr).toDate().getFullYear();
  const month = dayjs(monthStr).toDate().getMonth();
  const dayInMonth = new Date(year, month + 1, 0).getDate();
  const firstDay = (((new Date(year, month, 1).getDay() - weekStartDayOffset) % 7) + 7) % 7;
  const lastDay = new Date(year, month, dayInMonth).getDay() - weekStartDayOffset;
  const prevMonthDays = new Date(year, month, 0).getDate();


Review comment (suggestion):
This change will cause dates with more than `3` memos but at a `ration < 0.4` to render as dates with less than `3` memos i.e using `bg-primary/70` rather than `bg-primary/80`

Can we stay with the initial code design of dates with `>= 3` memos using `bg-primary/80`
I'd suggest either going down the middle and using `ration > 0.5` rather than `0.4` and `0.7`
or up the opacity to 90 for `ratios > 0.7`

Code after:
import { Tooltip } from "@mui/joy";
import dayjs from "dayjs";
import { useWorkspaceSettingStore } from "@/store/v1";
import { WorkspaceGeneralSetting } from "@/types/proto/api/v1/workspace_setting_service";
import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
import { cn } from "@/utils";
import { useTranslate } from "@/utils/i18n";

interface Props {
  month: string; // Format: 2021-1
  selectedDate: string;
  data: Record<string, number>;
  onClick?: (date: string) => void;
}

const getCellAdditionalStyles = (count: number, maxCount: number) => {
  if (count === 0) {
    return "";
  }
  const ratio = count / maxCount;
  if (ratio > 0.75) {
    return "bg-primary-darker/90 text-gray-100 dark:bg-primary-lighter/80";
  } else if (ratio > 0.5) {
    return "bg-primary-darker/70 text-gray-100 dark:bg-primary-lighter/60";
  } else if (ratio > 0.25) {
    return "bg-primary/70 text-gray-100 dark:bg-primary-lighter/40";
  } else {
    return "bg-primary/50 text-gray-100 dark:bg-primary-lighter/20";
  }
};

const ActivityCalendar = (props: Props) => {
  const t = useTranslate();
  const { month: monthStr, data, onClick } = props;
  const workspaceSettingStore = useWorkspaceSettingStore();
  const weekStartDayOffset = (
    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL).generalSetting || WorkspaceGeneralSetting.fromPartial({})
  ).weekStartDayOffset;

  const year = dayjs(monthStr).toDate().getFullYear();
  const month = dayjs(monthStr).toDate().getMonth();
  const dayInMonth = new Date(year, month + 1, 0).getDate();
  const firstDay = (((new Date(year, month, 1).getDay() - weekStartDayOffset) % 7) + 7) % 7;
  const lastDay = new Date(year, month, dayInMonth).getDay() - weekStartDayOffset;
  const prevMonthDays = new Date(year, month, 0).getDate();