From 5d69d896278eaaacb3232cd74e9beb01f4c65b79 Mon Sep 17 00:00:00 2001
From: Athurg Gooth <athurg@gooth.org>
Date: Tue, 31 Oct 2023 12:06:14 +0800
Subject: [PATCH] feat: week from monday in heatmap for zh-Hans and ko (#2457)

* week from monday in heatmap for zh-Hans and ko

* optimize code
---
 web/src/components/UsageHeatMap.tsx | 20 +++++++++++---------
 web/src/utils/i18n.ts               |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/web/src/components/UsageHeatMap.tsx b/web/src/components/UsageHeatMap.tsx
index dba8ed97..7e6b9691 100644
--- a/web/src/components/UsageHeatMap.tsx
+++ b/web/src/components/UsageHeatMap.tsx
@@ -4,8 +4,9 @@ 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 { useGlobalStore } from "@/store/module";
 import { useUserV1Store } from "@/store/v1";
-import { useTranslate } from "@/utils/i18n";
+import { useTranslate, Translations } from "@/utils/i18n";
 import { useFilterStore, useMemoStore } from "../store/module";
 import "@/less/usage-heat-map.less";
 
@@ -37,7 +38,10 @@ const UsageHeatMap = () => {
   const user = useCurrentUser();
   const memoStore = useMemoStore();
   const todayTimeStamp = getDateStampByDate(Date.now());
-  const todayDay = new Date(todayTimeStamp).getDay() + 1;
+  const weekDay = new Date(todayTimeStamp).getDay();
+  const weekFromMonday = ["zh-Hans", "ko"].includes(useGlobalStore().state.locale);
+  const dayTips = weekFromMonday ? ["mon", "", "wed", "", "fri", "", "sun"] : ["sun", "", "tue", "", "thu", "", "sat"];
+  const todayDay = weekFromMonday ? (weekDay == 0 ? 7 : weekDay) : weekDay + 1;
   const nullCell = new Array(7 - todayDay).fill(0);
   const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay;
   const beginDayTimestamp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP;
@@ -157,13 +161,11 @@ const UsageHeatMap = () => {
           ))}
         </div>
         <div className="day-tip-text-container">
-          <span className="tip-text">{t("days.sun")}</span>
-          <span className="tip-text"></span>
-          <span className="tip-text">{t("days.tue")}</span>
-          <span className="tip-text"></span>
-          <span className="tip-text">{t("days.thu")}</span>
-          <span className="tip-text"></span>
-          <span className="tip-text">{t("days.sat")}</span>
+          {dayTips.map((v, i) => (
+            <span className="tip-text" key={i}>
+              {v && t(("days." + v) as Translations)}
+            </span>
+          ))}
         </div>
       </div>
       <p className="w-full pl-4 text-xs -mt-2 mb-3 text-gray-400 dark:text-zinc-400">
diff --git a/web/src/utils/i18n.ts b/web/src/utils/i18n.ts
index 88f6bcab..9395f782 100644
--- a/web/src/utils/i18n.ts
+++ b/web/src/utils/i18n.ts
@@ -38,7 +38,7 @@ export const findNearestLanguageMatch = (codename: string): Locale => {
 };
 
 // Represents the keys of nested translation objects.
-type Translations = NestedKeyOf<typeof locales>;
+export type Translations = NestedKeyOf<typeof locales>;
 
 // Represents a typed translation function.
 type TypedT = (key: Translations, params?: Record<string, any>) => string;