fix day names and abbreviations (#5942)

open-chat-labs · Jun 17, 2024 · 3827efd · 3827efd
1 parent 0af5784
commit 3827efd
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 20 deletions.
diff --git a/frontend/app/src/components/calendar/Calendar.svelte b/frontend/app/src/components/calendar/Calendar.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
     import { locale } from "svelte-i18n";
-    import { getMonthCalendar, getTitleText, isSameDay, weekDays } from "./utils";
+    import { getMonthCalendar, getTitleText, isSameDay } from "./utils";
     import NextIcon from "svelte-material-icons/ChevronRight.svelte";
     import PrevIcon from "svelte-material-icons/ChevronLeft.svelte";
     import HoverIcon from "../HoverIcon.svelte";
     import { iconSize } from "../../stores/iconSize";
     import { createEventDispatcher, onMount } from "svelte";
+    import { translationCodes } from "../../i18n/i18n";
+    import { weekDays } from "./weekdays";
 
     const dispatch = createEventDispatcher();
 
@@ -17,6 +19,7 @@
     let dates: Date[][] = [];
     let month = 0;
 
+    $: translatedLocale = translationCodes[$locale || "en"] || "en";
     $: {
         getDates(showDate);
     }
@@ -25,7 +28,7 @@
 
     function getDates(start: Date) {
         const resp = getMonthCalendar(start);
-        title = getTitleText(resp.year, resp.month, $locale ?? "default");
+        title = getTitleText(resp.year, resp.month, translatedLocale);
         dates = resp.dates;
         month = resp.month;
         const allDates = resp.dates.flatMap((d) => d);
@@ -66,9 +69,9 @@
         </HoverIcon>
     </div>
     <div class="week-days-row">
-        {#each $weekDays as d}
-            <div title={d.toUpperCase()} class="block weekday-name-block">
-                {d.charAt(0).toUpperCase()}
+        {#each $weekDays as [day, d]}
+            <div title={day} class="block weekday-name-block">
+                {d}
             </div>
         {/each}
     </div>

diff --git a/frontend/app/src/components/calendar/utils.ts b/frontend/app/src/components/calendar/utils.ts
@@ -1,17 +1,3 @@
-import { locale } from "svelte-i18n";
-import { derived } from "svelte/store";
-
-export const weekDays = derived(locale, (locale) => {
-    const result: string[] = [];
-    const date = new Date();
-    const formatter = new Intl.DateTimeFormat(locale ?? "en", { weekday: "long" });
-    for (let i = 0; i < 7; i++) {
-        date.setDate(date.getDate() - date.getDay() + i);
-        result.push(formatter.format(date));
-    }
-    return result;
-});
-
 export function getTitleText(year: number, month: number, locale: string): string {
     const date = new Date(year, month, 1);
     const formatter = new Intl.DateTimeFormat(locale, { year: "numeric", month: "long" });

diff --git a/frontend/app/src/components/calendar/weekdays.ts b/frontend/app/src/components/calendar/weekdays.ts
@@ -0,0 +1,122 @@
+import { locale } from "svelte-i18n";
+import { derived } from "svelte/store";
+import { translationCodes } from "../../i18n/i18n";
+
+type WeekDay = [string, string];
+type WeekDayMap = Record<string, WeekDay[]>;
+
+const map: WeekDayMap = {
+    "zh-cn": [
+        ["星期日", "日"],
+        ["星期一", "一"],
+        ["星期二", "二"],
+        ["星期三", "三"],
+        ["星期四", "四"],
+        ["星期五", "五"],
+        ["星期六", "六"],
+    ],
+    de: [
+        ["Sonntag", "So"],
+        ["Montag", "Mo"],
+        ["Dienstag", "Di"],
+        ["Mittwoch", "Mi"],
+        ["Donnerstag", "Do"],
+        ["Freitag", "Fr"],
+        ["Samstag", "Sa"],
+    ],
+    en: [
+        ["Sunday", "Su"],
+        ["Monday", "Mo"],
+        ["Tuesday", "Tu"],
+        ["Wednesday", "We"],
+        ["Thursday", "Th"],
+        ["Friday", "Fr"],
+        ["Saturday", "Sa"],
+    ],
+    es: [
+        ["Domingo", "Do"],
+        ["Lunes", "Lu"],
+        ["Martes", "Ma"],
+        ["Miércoles", "Mi"],
+        ["Jueves", "Ju"],
+        ["Viernes", "Vi"],
+        ["Sábado", "Sa"],
+    ],
+    fr: [
+        ["Dimanche", "Di"],
+        ["Lundi", "Lu"],
+        ["Mardi", "Ma"],
+        ["Mercredi", "Me"],
+        ["Jeudi", "Je"],
+        ["Vendredi", "Ve"],
+        ["Samedi", "Sa"],
+    ],
+    hi: [
+        ["रविवार", "र"],
+        ["सोमवार", "सो"],
+        ["मंगलवार", "मं"],
+        ["बुधवार", "बु"],
+        ["गुरुवार", "गु"],
+        ["शुक्रवार", "शु"],
+        ["शनिवार", "श"],
+    ],
+    it: [
+        ["Domenica", "Do"],
+        ["Lunedì", "Lu"],
+        ["Martedì", "Ma"],
+        ["Mercoledì", "Me"],
+        ["Giovedì", "Gi"],
+        ["Venerdì", "Ve"],
+        ["Sabato", "Sa"],
+    ],
+    iw: [
+        ["יום ראשון", "א"],
+        ["יום שני", "ב"],
+        ["יום שלישי", "ג"],
+        ["יום רביעי", "ד"],
+        ["יום חמישי", "ה"],
+        ["יום שישי", "ו"],
+        ["שבת", "ש"],
+    ],
+    ja: [
+        ["日曜日", "日"],
+        ["月曜日", "月"],
+        ["火曜日", "火"],
+        ["水曜日", "水"],
+        ["木曜日", "木"],
+        ["金曜日", "金"],
+        ["土曜日", "土"],
+    ],
+    ru: [
+        ["Воскресенье", "Вс"],
+        ["Понедельник", "Пн"],
+        ["Вторник", "Вт"],
+        ["Среда", "Ср"],
+        ["Четверг", "Чт"],
+        ["Пятница", "Пт"],
+        ["Суббота", "Сб"],
+    ],
+    uk: [
+        ["Неділя", "Нд"],
+        ["Понеділок", "Пн"],
+        ["Вівторок", "Вт"],
+        ["Середа", "Ср"],
+        ["Четвер", "Чт"],
+        ["П’ятниця", "Пт"],
+        ["Субота", "Сб"],
+    ],
+    vi: [
+        ["Chủ Nhật", "CN"],
+        ["Thứ Hai", "T2"],
+        ["Thứ Ba", "T3"],
+        ["Thứ Tư", "T4"],
+        ["Thứ Năm", "T5"],
+        ["Thứ Sáu", "T6"],
+        ["Thứ Bảy", "T7"],
+    ],
+};
+
+export const weekDays = derived(locale, (locale) => {
+    const translated = translationCodes[locale || "en"] || "en";
+    return map[translated] ?? map["en"];
+});
diff --git a/frontend/app/src/i18n/i18n.ts b/frontend/app/src/i18n/i18n.ts
@@ -1,7 +1,12 @@
 import { register, init, locale, getLocaleFromNavigator, _ } from "svelte-i18n";
 import { get, writable } from "svelte/store";
 import { configKeys } from "../utils/config";
-import { type InterpolationValues, type Level, type MessageFormatter, type ResourceKey } from "openchat-client";
+import {
+    type InterpolationValues,
+    type Level,
+    type MessageFormatter,
+    type ResourceKey,
+} from "openchat-client";
 
 export const translationCodes: Record<string, string> = {
     cn: "zh-cn",