From 9fe24cd115a8d4a2e6237de1c8f6d5bef851ede4 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 10 Jan 2024 22:17:09 +0100
Subject: [PATCH] Add a language preference

---
 front/packages/ui/src/settings/index.tsx | 26 ++++++++++++++++++++++--
 front/translations/en.json               |  5 +++++
 front/translations/fr.json               | 16 +++++++++++++++
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/front/packages/ui/src/settings/index.tsx b/front/packages/ui/src/settings/index.tsx
index 3f47c1e3..5fba6888 100644
--- a/front/packages/ui/src/settings/index.tsx
+++ b/front/packages/ui/src/settings/index.tsx
@@ -55,6 +55,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { PasswordInput } from "../login/password-input";
 
 import Theme from "@material-symbols/svg-400/outlined/dark_mode.svg";
+import Language from "@material-symbols/svg-400/outlined/language.svg";
 import Username from "@material-symbols/svg-400/outlined/badge.svg";
 import Mail from "@material-symbols/svg-400/outlined/mail.svg";
 import Password from "@material-symbols/svg-400/outlined/password.svg";
@@ -386,7 +387,8 @@ const AccountSettings = ({ setPopup }: { setPopup: (e?: ReactElement) => void })
 };
 
 export const SettingsPage: QueryPage = () => {
-	const { t } = useTranslation();
+	const { t, i18n } = useTranslation();
+	const languages = new Intl.DisplayNames([i18n.language ?? "en"], { type: "language" });
 	const [popup, setPopup] = useState<ReactElement | undefined>(undefined);
 
 	const theme = useUserTheme("auto");
@@ -407,10 +409,30 @@ export const SettingsPage: QueryPage = () => {
 							getLabel={(key) => t(`settings.general.theme.${key}`)}
 						/>
 					</Preference>
+					<Preference
+						icon={Language}
+						label={t("settings.general.language.label")}
+						description={t("settings.general.language.description")}
+					>
+						<Select
+							label={t("settings.general.language.label")}
+							value={i18n.resolvedLanguage!}
+							onValueChange={(value) =>
+								i18n.changeLanguage(value !== "system" ? value : (i18n.options.lng as string))
+							}
+							values={["system", ...Object.keys(i18n.options.resources!)]}
+							getLabel={(key) =>
+								key === "system" ? t("settings.general.language.system") : languages.of(key) ?? key
+							}
+						/>
+					</Preference>
 				</SettingsContainer>
 				<AccountSettings setPopup={setPopup} />
 				<SettingsContainer title={t("settings.about.label")}>
-					<Link href="https://github.com/zoriya/kyoo/releases/latest/download/kyoo.apk" target="_blank">
+					<Link
+						href="https://github.com/zoriya/kyoo/releases/latest/download/kyoo.apk"
+						target="_blank"
+					>
 						<Preference
 							icon={Android}
 							label={t("settings.about.android-app.label")}
diff --git a/front/translations/en.json b/front/translations/en.json
index 986e4876..1d12df8b 100644
--- a/front/translations/en.json
+++ b/front/translations/en.json
@@ -84,6 +84,11 @@
 				"auto": "System",
 				"light": "Light",
 				"dark": "Dark"
+			},
+			"language": {
+				"label": "Language",
+				"description": "Set the language of your application",
+				"system": "System"
 			}
 		},
 		"account": {
diff --git a/front/translations/fr.json b/front/translations/fr.json
index 9aa41a77..f30d488b 100644
--- a/front/translations/fr.json
+++ b/front/translations/fr.json
@@ -84,6 +84,11 @@
 				"auto": "Système",
 				"light": "Clair",
 				"dark": "Sombre"
+			},
+			"language": {
+				"label": "Langue",
+				"description": "Définissez la langue de votre application",
+				"system": "Système"
 			}
 		},
 		"account": {
@@ -104,6 +109,17 @@
 				"oldPassword": "Ancien mot de passe",
 				"newPassword": "Nouveau mot de passe"
 			}
+		},
+		"about": {
+			"label": "À propos",
+			"android-app": {
+				"label": "Application Android",
+				"description": "Téléchargez l'application Android"
+			},
+			"git": {
+				"label": "Github",
+				"description": "Ouvrez la page github où vous pouvez lire le code de kyoo"
+			}
 		}
 	},
 	"player": {