feat: improve i18n support as a whole

api/user_setting.go

@@ -32,7 +32,25 @@ func (key UserSettingKey) String() string {
 }
 
 var (
-	UserSettingLocaleValue         = []string{"en", "zh", "vi", "fr", "nl", "sv", "de", "es", "uk", "ru", "it", "hant", "tr", "ko", "sl"}
+	UserSettingLocaleValue = []string{
+		"de",
+		"en",
+		"es",
+		"fr",
+		"it",
+		"ko",
+		"nl",
+		"pl",
+		"pt-BR",
+		"ru",
+		"sl",
+		"sv",
+		"tr",
+		"uk",
+		"vi",
+		"zh-Hans",
+		"zh-Hant",
+	}
 	UserSettingAppearanceValue     = []string{"system", "light", "dark"}
 	UserSettingMemoVisibilityValue = []Visibility{Private, Protected, Public}
 )

web/package.json

@@ -14,7 +14,6 @@
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^0.27.2",
     "copy-to-clipboard": "^3.3.2",
-    "dayjs": "^1.11.3",
     "highlight.js": "^11.6.0",
     "i18next": "^21.9.2",
     "i18next-browser-languagedetector": "^7.0.1",

web/src/App.tsx

@@ -1,4 +1,3 @@
-import dayjs from "dayjs";
 import { useColorScheme } from "@mui/joy";
 import { useEffect, Suspense } from "react";
 import { Toaster } from "react-hot-toast";
@@ -59,7 +58,6 @@ const App = () => {
   useEffect(() => {
     document.documentElement.setAttribute("lang", locale);
     i18n.changeLanguage(locale);
-    dayjs.locale(locale);
     storage.set({
       locale: locale,
     });

web/src/components/AboutSiteDialog.tsx

@@ -27,10 +27,11 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
         </button>
       </div>
       <div className="flex flex-col justify-start items-start max-w-full w-96">
-        <p className="text-sm">{customizedProfile.description || "No description"}</p>
+        <p className="text-xs">{t("about.memos-description")}</p>
+        <p className="text-sm mt-2 ">{customizedProfile.description || t("about.no-server-description")}</p>
         <div className="mt-4 w-full flex flex-row text-sm justify-start items-center">
           <div className="flex flex-row justify-start items-center mr-2">
-            Powered by
+            {t("about.powered-by")}
             <a href="https://usememos.com" target="_blank" className="flex flex-row justify-start items-center mx-1 hover:underline">
               <img className="w-6 h-auto rounded-full mr-1" src="/logo.webp" alt="" />
               memos
@@ -40,7 +41,7 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
           <GitHubBadge />
         </div>
         <div className="border-t w-full mt-3 pt-2 text-sm flex flex-row justify-start items-center space-x-2">
-          <span className="text-gray-500">Other projects:</span>
+          <span className="text-gray-500">{t("about.other-projects")}:</span>
           <a
             href="https://github.com/boojack/sticky-notes"
             target="_blank"

web/src/components/ArchivedMemo.tsx

@@ -1,7 +1,7 @@
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useMemoStore } from "@/store/module";
-import * as utils from "@/helpers/utils";
+import { getDateTimeString } from "@/helpers/datetime";
 import useToggle from "@/hooks/useToggle";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
@@ -54,7 +54,7 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
     <div className={`memo-wrapper archived ${"memos-" + memo.id}`} onMouseLeave={handleMouseLeaveMemoWrapper}>
       <div className="memo-top-wrapper">
         <span className="time-text">
-          {t("memo.archived-at")} {utils.getDateTimeString(memo.updatedTs)}
+          {t("memo.archived-at")} {getDateTimeString(memo.updatedTs)}
         </span>
         <div className="btns-container">
           <span className="btn-text" onClick={handleRestoreMemoClick}>

web/src/components/BetaBadge.tsx

@@ -1,15 +1,18 @@
+import { useTranslation } from "react-i18next";
+
 interface Props {
   className?: string;
 }
 
 const BetaBadge: React.FC<Props> = (props: Props) => {
   const { className } = props;
+  const { t } = useTranslation();
 
   return (
     <span
       className={`mx-1 px-1 leading-5 text-xs border dark:border-zinc-600 rounded-full text-gray-500 dark:text-gray-400 ${className ?? ""}`}
     >
-      Beta
+      {t("common.beta")}
     </span>
   );
 };

web/src/components/ChangeMemberPasswordDialog.tsx

@@ -74,7 +74,7 @@ const ChangeMemberPasswordDialog: React.FC<Props> = (props: Props) => {
         <input
           type="password"
           className="input-text"
-          placeholder={t("auth.repeat-new-password")}
+          placeholder={t("auth.new-password")}
           value={newPassword}
           onChange={handleNewPasswordChanged}
         />

web/src/components/ChangeMemoCreatedTsDialog.tsx

@@ -1,4 +1,4 @@
-import dayjs from "dayjs";
+import { getNormalizedTimeString, getUnixTime } from "@/helpers/datetime";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
@@ -15,12 +15,12 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
   const { destroy, memoId } = props;
   const memoStore = useMemoStore();
   const [createdAt, setCreatedAt] = useState("");
-  const maxDatetimeValue = dayjs().format("YYYY-MM-DDTHH:mm");
+  const maxDatetimeValue = getNormalizedTimeString();
 
   useEffect(() => {
     memoStore.getMemoById(memoId).then((memo) => {
       if (memo) {
-        const datetime = dayjs(memo.createdTs).format("YYYY-MM-DDTHH:mm");
+        const datetime = getNormalizedTimeString(memo.createdTs);
         setCreatedAt(datetime);
       } else {
         toast.error(t("message.memo-not-found"));
@@ -39,8 +39,8 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
   };
 
   const handleSaveBtnClick = async () => {
-    const nowTs = dayjs().unix();
-    const createdTs = dayjs(createdAt).unix();
+    const nowTs = getUnixTime();
+    const createdTs = getUnixTime(createdAt);
 
     if (createdTs > nowTs) {
       toast.error(t("message.invalid-created-datetime"));
@@ -69,9 +69,10 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
         </button>
       </div>
       <div className="flex flex-col justify-start items-start !w-72 max-w-full">
-        <p className="w-full bg-yellow-100 border border-yellow-400 rounded p-2 text-xs leading-4">
-          THIS IS NOT A NORMAL BEHAVIOR. PLEASE MAKE SURE YOU REALLY NEED IT.
-        </p>
+        <div className="w-full bg-yellow-100 border border-yellow-400 rounded p-2 text-black">
+          <p className="uppercase">{t("message.change-memo-created-time-warning-1")}</p>
+          <p>{t("message.change-memo-created-time-warning-2")}</p>
+        </div>
         <input
           className="input-text mt-2"
           type="datetime-local"

web/src/components/ChangePasswordDialog.tsx

@@ -71,7 +71,7 @@ const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
           type="password"
           autoComplete="new-password"
           className="input-text"
-          placeholder={t("auth.repeat-new-password")}
+          placeholder={t("auth.new-password")}
           value={newPassword}
           onChange={handleNewPasswordChanged}
         />