feat: improve i18n support as a whole (#1526)

* feat: improve i18n support as a whole

- Remove dayjs in favor of /helpers/datetime.ts, which uses
Intl.DateTimeFormat and Date. Dayjs is not exactly i18n friendly
and has several locale related opened issues.

- Move/refactor date/time code from /helpers/utils.ts to
/helpers/datetime.ts.

- Fix Daily Review weekday not changing according to selected date.

- Localize Daily review weekday and month.

- Load i18n listed strings from /locales/{locale}.json in a dynamic way.
This makes much easier to add new locales, by just adding a properly
named json file and listing it only in /web/src/i18n.ts and
/api/user_setting.go.

- Fallback languages are now set in /web/src/i18n.ts.

- Full language codes are now preffered, but they fallback to 2-letter
codes when not available.

- The locale dropdown is now populated dynamically from the available
locales. Locale names are populated by the browser via
Intl.DisplayNames(locale).

- /web/src/i18n.ts now exports a type TLocale from availableLocales
array. This is used only by findNearestLanguageMatch(). As I was unable
to use this type in ".d.ts" files, I switched the Locale type from
/web/src/types/i18n.d.ts to string.

- Move pretty much all hardcoded text strings to i18n strings.

- Add pt-BR translation.

- Remove site.ts and move its content to a i18n string.

- Rename zh.json to zh-Hans.json to get the correct language name on
selector dropdown.

- Remove pt_BR.json and replace with pt-BR.json.

- Some minor layout spacing fixes to accommodate larger texts.

- Improve some error messages.

* Delete .yarnrc.yml

* Delete package-lock.json

* fix: 158:28  error  Insert `⏎`  prettier/prettier

web/src/components/Settings/SystemSection.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { Button, Divider, Input, Switch, Textarea } from "@mui/joy";
+import { Button, Divider, Input, Switch, Textarea, Typography } from "@mui/joy";
+import { formatBytes } from "@/helpers/utils";
 import { useGlobalStore } from "@/store/module";
 import * as api from "@/helpers/api";
+import Icon from "../Icon";
 import showUpdateCustomizedProfileDialog from "../UpdateCustomizedProfileDialog";
 import "@/less/settings/system-section.less";
 
@@ -16,15 +18,6 @@ interface State {
   additionalScript: string;
 }
 
-const formatBytes = (bytes: number) => {
-  if (bytes <= 0) return "0 Bytes";
-  const k = 1024,
-    dm = 2,
-    sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
-    i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i];
-};
-
 const SystemSection = () => {
   const { t } = useTranslation();
   const globalStore = useGlobalStore();
@@ -203,7 +196,7 @@ const SystemSection = () => {
         <Switch checked={state.allowSignUp} onChange={(event) => handleAllowSignUpChanged(event.target.checked)} />
       </div>
       <div className="form-label">
-        <span className="normal-text">Ignore version upgrade</span>
+        <span className="normal-text">{t("setting.system-section.ignore-version-upgrade")}</span>
         <Switch checked={state.ignoreUpgrade} onChange={(event) => handleIgnoreUpgradeChanged(event.target.checked)} />
       </div>
       <div className="form-label">
@@ -212,7 +205,17 @@ const SystemSection = () => {
       </div>
       <Divider className="!mt-3 !my-4" />
       <div className="form-label">
-        <span className="normal-text">OpenAI API Key</span>
+        <span className="normal-text">{t("setting.system-section.openai-api-key")}</span>
+        <Typography className="!mb-1" level="body2">
+          <a
+            className="ml-2 text-sm text-blue-600 hover:opacity-80 hover:underline"
+            href="https://platform.openai.com/account/api-keys"
+            target="_blank"
+          >
+            {t("setting.system-section.openai-api-key-description")}
+            <Icon.ExternalLink className="inline -mt-1 ml-1 w-4 h-auto opacity-80" />
+          </a>
+        </Typography>
         <Button onClick={handleSaveOpenAIConfig}>{t("common.save")}</Button>
       </div>
       <Input
@@ -221,12 +224,12 @@ const SystemSection = () => {
           fontFamily: "monospace",
           fontSize: "14px",
         }}
-        placeholder="OpenAI API Key"
+        placeholder={t("setting.system-section.openai-api-key-placeholder")}
         value={openAIConfig.key}
         onChange={(event) => handleOpenAIConfigKeyChanged(event.target.value)}
       />
       <div className="form-label mt-2">
-        <span className="normal-text">OpenAI API Host</span>
+        <span className="normal-text">{t("setting.system-section.openai-api-host")}</span>
       </div>
       <Input
         className="w-full"
@@ -234,7 +237,7 @@ const SystemSection = () => {
           fontFamily: "monospace",
           fontSize: "14px",
         }}
-        placeholder="OpenAI API Host. Default: https://api.openai.com"
+        placeholder={t("setting.system-section.openai-api-host-placeholder")}
         value={openAIConfig.host}
         onChange={(event) => handleOpenAIConfigHostChanged(event.target.value)}
       />