Improve system language handling in settings

front/apps/mobile/app/_layout.tsx

@@ -68,15 +68,18 @@ const clientStorage = {
 
 export const clientPersister = createSyncStoragePersister({ storage: clientStorage });
 
+const sysLang = getLocales()[0].languageCode ?? "en";
 i18next.use(initReactI18next).init({
 	interpolation: {
 		escapeValue: false,
 	},
 	returnEmptyString: false,
 	fallbackLng: "en",
-	lng: storage.getString("language") ?? getLocales()[0].languageCode ?? "en",
+	lng: storage.getString("language") ?? sysLang,
 	resources,
 });
+// @ts-expect-error Manually added value
+i18next.systemLanguage = sysLang;
 
 const NavigationThemeProvider = ({ children }: { children: ReactNode }) => {
 	const theme = useTheme();

front/apps/web/src/i18n.tsx

@@ -18,12 +18,12 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { readCookie } from "@kyoo/models/src/account-internal";
 import i18next, { type InitOptions } from "i18next";
 import type { AppContext, AppInitialProps, AppProps } from "next/app";
 import { type ComponentType, useState } from "react";
 import { I18nextProvider } from "react-i18next";
 import resources from "../../../translations";
-import { readCookie } from "@kyoo/models/src/account-internal";
 
 export const withTranslations = (
 	AppToTranslate: ComponentType<AppProps> & {
@@ -47,6 +47,7 @@ export const withTranslations = (
 				...commonOptions,
 				lng: props.pageProps.__lang,
 			});
+			i18next.systemLanguage = props.pageProps.__sysLang;
 			return i18next;
 		});
 
@@ -58,16 +59,15 @@ export const withTranslations = (
 	};
 	AppWithTranslations.getInitialProps = async (ctx: AppContext) => {
 		const props: AppInitialProps = await AppToTranslate.getInitialProps(ctx);
-		const lng =
-			readCookie(ctx.ctx.req?.headers.cookie, "language") ||
-			ctx.router.locale ||
-			ctx.router.defaultLocale ||
-			"en";
+		const sysLng = ctx.router.locale || ctx.router.defaultLocale || "en";
+		const lng = readCookie(ctx.ctx.req?.headers.cookie, "language") || sysLng;
 		await i18n.init({
 			...commonOptions,
 			lng,
 		});
+		i18n.systemLanguage = sysLng;
 		props.pageProps.__lang = lng;
+		props.pageProps.__sysLang = sysLng;
 		return props;
 	};
 

front/apps/web/tsconfig.json

@@ -19,6 +19,6 @@
 			"~/*": ["src/*"]
 		}
 	},
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "../../packages/ui/src/i18n-d.d.ts"],
 	"exclude": ["node_modules"]
 }

front/packages/ui/src/i18n-d.d.ts

@@ -26,4 +26,8 @@ declare module "i18next" {
 		returnNull: false;
 		resources: { translation: typeof en };
 	}
+
+	interface i18n {
+		systemLanguage: string;
+	}
 }

front/packages/ui/src/settings/general.tsx

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { setUserTheme, storeData, useUserTheme } from "@kyoo/models";
+import { deleteData, setUserTheme, storeData, useUserTheme } from "@kyoo/models";
 import { Link, Select } from "@kyoo/primitives";
 import { useTranslation } from "react-i18next";
 import { Preference, SettingsContainer } from "./base";
@@ -37,8 +37,9 @@ export const GeneralSettings = () => {
 
 	const changeLanguage = (lang: string) => {
 		if (lang === "system") {
-			i18n.changeLanguage(i18n.options.lng as string);
-			return
+			i18n.changeLanguage(i18n.systemLanguage);
+			deleteData("language");
+			return;
 		}
 		storeData("language", lang);
 		i18n.changeLanguage(lang);
@@ -66,7 +67,7 @@ export const GeneralSettings = () => {
 			>
 				<Select
 					label={t("settings.general.language.label")}
-					value={i18n.resolvedLanguage!}
+					value={i18n.resolvedLanguage! === i18n.systemLanguage ? "system" : i18n.resolvedLanguage!}
 					onValueChange={(value) => changeLanguage(value)}
 					values={["system", ...Object.keys(i18n.options.resources!)]}
 					getLabel={(key) =>