feat: add French i18n item (#547)

feat: add French i18n

api/user_setting.go

@@ -30,7 +30,7 @@ func (key UserSettingKey) String() string {
 }
 
 var (
-	UserSettingLocaleValue                 = []string{"en", "zh", "vi"}
+	UserSettingLocaleValue                 = []string{"en", "zh", "vi", "fr"}
 	UserSettingMemoVisibilityValue         = []Visibility{Privite, Protected, Public}
 	UserSettingEditorFontStyleValue        = []string{"normal", "mono"}
 	UserSettingMemoDisplayTsOptionKeyValue = []string{"created_ts", "updated_ts"}

web/src/components/Settings/PreferencesSection.tsx

@@ -25,6 +25,10 @@ const localeSelectorItems = [
     text: "Tiếng Việt",
     value: "vi",
   },
+  {
+    text: "French",
+    value: "fr",
+  },
 ];
 
 const PreferencesSection = () => {

web/src/i18n.ts

@@ -3,6 +3,7 @@ import { initReactI18next } from "react-i18next";
 import enLocale from "./locales/en.json";
 import zhLocale from "./locales/zh.json";
 import viLocale from "./locales/vi.json";
+import frLocale from "./locales/fr.json";
 
 i18n.use(initReactI18next).init({
   resources: {
@@ -15,6 +16,9 @@ i18n.use(initReactI18next).init({
     vi: {
       translation: viLocale,
     },
+    fr: {
+      translation: frLocale,
+    },
   },
   lng: "en",
   fallbackLng: "en",

web/src/locales/fr.json

@@ -5,7 +5,7 @@
     "password": "Mot de passe",
     "new-password": "Nouveau mot de passe",
     "repeat-new-password": "Répétez le nouveau mot de passe",
-    "username": "Nom d\'utilisateur",
+    "username": "Nom d'utilisateur",
     "nickname": "Surnom",
     "save": "Enregistrer",
     "close": "Fermer",
@@ -28,9 +28,9 @@
     "admin": "Admin",
     "explore": "Explorez",
     "sign-in": "Se connecter",
-    "sign-up": "S\'inscrire",
+    "sign-up": "S'inscrire",
     "sign-out": "Se déconnecter",
-    "back-to-home": "Retour à l\'accueil",
+    "back-to-home": "Retour à l'accueil",
     "type": "Type",
     "shortcuts": "Raccourcis",
     "title": "Titre",
@@ -45,9 +45,9 @@
   },
   "slogan": "Un hub de mémos open source et auto-hébergé pour la gestion des connaissances et la collaboration.",
   "auth": {
-    "signup-as-host": "S\'inscrire en tant qu\'hôte",
-    "host-tip": "Vous vous inscrivez en tant qu\'hébergeur du site.",
-    "not-host-tip": "Si vous n\'avez pas de compte, veuillez contacter l\'hôte du site."
+    "signup-as-host": "S'inscrire en tant qu'hôte",
+    "host-tip": "Vous vous inscrivez en tant qu'hébergeur du site.",
+    "not-host-tip": "Si vous n'avez pas de compte, veuillez contacter l'hôte du site."
   },
   "sidebar": {
     "daily-review": "Bilan quotidien",
@@ -56,7 +56,7 @@
     "archived": "Archivé"
   },
   "daily-review": {
-    "oops-nothing": "Oups, il n\'y a rien."
+    "oops-nothing": "Oups, il n'y a rien."
   },
   "resources": {
     "description": "Visualisez vos ressources statiques dans des mémos, par exemple des images.",
@@ -80,7 +80,7 @@
   },
   "editor": {
     "editing": "Édition...",
-    "cancel-edit": "Annuler l\'édition",
+    "cancel-edit": "Annuler l'édition",
     "save": "Sauvegarder",
     "placeholder": "Une idée...",
     "only-image-supported": "Seul le fichier image est pris en charge.",
@@ -114,12 +114,12 @@
       "contains": "Contient",
       "not-contains": "Ne contient pas",
       "is": "Est",
-      "is-not": "N\'est pas",
+      "is-not": "N'est pas",
       "before": "Avant",
       "after": "Après"
     },
     "value": {
-      "not-tagged": "Pas d\'étiquette",
+      "not-tagged": "Pas d'étiquette",
       "linked": "A des liens"
     },
     "text-placeholder": "Commence par ^ pour utiliser regex"
@@ -143,8 +143,8 @@
     "preference-section": {
       "default-memo-visibility": "Visibilité du mémo par défaut",
       "enable-folding-memo": "Activer le mémo pliable",
-      "editor-font-style": "Style de police de l\'éditeur",
-      "mobile-editor-style": "Style de l\'éditeur mobile",
+      "editor-font-style": "Style de police de l'éditeur",
+      "mobile-editor-style": "Style de l'éditeur mobile",
       "default-memo-sort-option": "Affichage par heure de création/mise à jour",
       "created_ts": "Heure de création",
       "updated_ts": "Heure de mise à jour"
@@ -154,7 +154,7 @@
     },
     "system-section": {
       "database-file-size": "Taille de la base de données",
-      "allow-user-signup": "Autoriser l\'inscription des utilisateurs",
+      "allow-user-signup": "Autoriser l'inscription des utilisateurs",
       "additional-style": "Style supplémentaire",
       "additional-script": "Script supplémentaire",
       "additional-style-placeholder": "Codes CSS supplémentaires",
@@ -170,16 +170,16 @@
     "no-memos": "pas de mémos 🌃",
     "memos-ready": "tous les mémos sont prêts 🎉",
     "restored-successfully": "Restauré avec succès",
-    "memo-updated-datetime": "La date et l\'heure de création du mémo ont été modifiées.",
+    "memo-updated-datetime": "La date et l'heure de création du mémo ont été modifiées.",
     "invalid-created-datetime": "Date/heure de création non valide.",
-    "change-memo-created-time": "Modifier l\'heure de création du mémo",
+    "change-memo-created-time": "Modifier l'heure de création du mémo",
     "memo-not-found": "Mémo introuvable",
     "fill-all": "Veuillez remplir tous les champs.",
     "new-password-not-match": "Les mots de passe ne correspondent pas",
-    "image-load-failed": "Le chargement de l\'image a échoué",
+    "image-load-failed": "Le chargement de l'image a échoué",
     "fill-form": "Veuillez remplir ce formulaire",
     "login-failed": "Connexion échouée",
-    "signup-failed": "L\'inscription a échoué",
+    "signup-failed": "L'inscription a échoué",
     "user-not-found": "Utilisateur introuvable",
     "password-changed": "Mot de passe modifié",
     "private-only": "Ce mémo est uniquement privé.",
@@ -188,7 +188,7 @@
     "change-resource-filename": "Changer le nom du fichier de ressources",
     "resource-filename-updated": "Le nom de fichier de la ressource a changé.",
     "invalid-resource-filename": "Nom de fichier invalide.",
-    "click-to-save-the-image": "Cliquez pour enregistrer l\'image",
-    "generating-the-screenshot": "Génération de la capture d\'écran..."
+    "click-to-save-the-image": "Cliquez pour enregistrer l'image",
+    "generating-the-screenshot": "Génération de la capture d'écran..."
   }
 }

web/src/pages/Auth.tsx

+import { Option, Select } from "@mui/joy";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -159,18 +160,18 @@ const Auth = () => {
           {!systemStatus?.host && <p className="tip-text">{t("auth.host-tip")}</p>}
         </div>
         <div className="footer-container">
-          <div className="language-container">
-            <span className={`locale-item ${i18n.language === "en" ? "active" : ""}`} onClick={() => handleLocaleItemClick("en")}>
-              English
-            </span>
-            <span className="split-line">/</span>
-            <span className={`locale-item ${i18n.language === "zh" ? "active" : ""}`} onClick={() => handleLocaleItemClick("zh")}>
-              中文
-            </span>
-            <span className="split-line">/</span>
-            <span className={`locale-item ${i18n.language === "vi" ? "active" : ""}`} onClick={() => handleLocaleItemClick("vi")}>
-              Tiếng Việt
-            </span>
+          <div className="w-full flex flex-row justify-center items-center">
+            <Select
+              className="w-40 text-sm"
+              startDecorator={<Icon.Globe className="w-4 h-auto" />}
+              value={i18n.language}
+              onChange={(e, value) => handleLocaleItemClick(value as Locale)}
+            >
+              <Option value="en">English</Option>
+              <Option value="zh">中文</Option>
+              <Option value="vi">Tiếng Việt</Option>
+              <Option value="fr">French</Option>
+            </Select>
           </div>
         </div>
       </div>

web/src/types/i18n.d.ts

-type Locale = "en" | "zh" | "vi";
+type Locale = "en" | "zh" | "vi" | "fr";