Merge pull request #995 from 190km/refactor-i18n

feat: i18n displays real lang name

apps/dokploy/components/dashboard/settings/appearance-form.tsx

@@ -34,13 +34,17 @@ import { useTheme } from "next-themes";
 import { useEffect } from "react";
 import { toast } from "sonner";
 
+
+const languageCodes = Object.values(Languages).map(lang => lang.code) as [string, ...string[]]; 
+
 const appearanceFormSchema = z.object({
 	theme: z.enum(["light", "dark", "system"], {
 		required_error: "Please select a theme.",
 	}),
-	language: z.nativeEnum(Languages, {
+
+	language: z.enum(languageCodes, {
 		required_error: "Please select a language.",
-	}),
+	})
 });
 
 type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;
@@ -48,7 +52,7 @@ type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;
 // This can come from your database or API.
 const defaultValues: Partial<AppearanceFormValues> = {
 	theme: "system",
-	language: Languages.English,
+	language: Languages.english.code,
 };
 
 export function AppearanceForm() {
@@ -173,15 +177,11 @@ export function AppearanceForm() {
 												<SelectValue placeholder="No preset selected" />
 											</SelectTrigger>
 											<SelectContent>
-												{Object.keys(Languages).map((preset) => {
-													const value =
-														Languages[preset as keyof typeof Languages];
-													return (
-														<SelectItem key={value} value={value}>
-															{preset}
+											{Object.values(Languages).map((language) => (
+												<SelectItem key={language.code} value={language.code}>
+													{language.name}
 												</SelectItem>
-													);
-												})}
+											))}
 											</SelectContent>
 										</Select>
 									</FormItem>

apps/dokploy/lib/languages.ts

@@ -1,20 +1,20 @@
-export enum Languages {
-	English = "en",
-	Polish = "pl",
-	Russian = "ru",
-	French = "fr",
-	German = "de",
-	ChineseTraditional = "zh-Hant",
-	ChineseSimplified = "zh-Hans",
-	Turkish = "tr",
-	Kazakh = "kz",
-	Persian = "fa",
-	Korean = "ko",
-	Portuguese = "pt-br",
-	Italian = "it",
-	Japanese = "ja",
-	Spanish = "es",
-	Norwegian = "no",
-}
+export const Languages = {
+	english: { code: "en", name: "English" },
+	polish: { code: "pl", name: "Polski" },
+	russian: { code: "ru", name: "Русский" },
+	french: { code: "fr", name: "Français" },
+	german: { code: "de", name: "Deutsch" },
+	chineseTraditional: { code: "zh-Hant", name: "繁體中文" },
+	chineseSimplified: { code: "zh-Hans", name: "简体中文" },
+	turkish: { code: "tr", name: "Türkçe" },
+	kazakh: { code: "kz", name: "Қазақ" },
+	persian: { code: "fa", name: "فارسی" },
+	korean: { code: "ko", name: "한국어" },
+	portuguese: { code: "pt-br", name: "Português" },
+	italian: { code: "it", name: "Italiano" },
+	japanese: { code: "ja", name: "日本語" },
+	spanish: { code: "es", name: "Español" },
+};
 
 export type Language = keyof typeof Languages;
+export type LanguageCode = (typeof Languages)[keyof typeof Languages]["code"];

apps/dokploy/pages/_app.tsx

@@ -68,7 +68,7 @@ export default api.withTRPC(
 	appWithTranslation(MyApp, {
 		i18n: {
 			defaultLocale: "en",
-			locales: Object.values(Languages),
+			locales: Object.values(Languages).map(language => language.code),
 			localeDetection: false,
 		},
 		fallbackLng: "en",

apps/dokploy/utils/hooks/use-locale.ts

@@ -1,10 +1,11 @@
-import type { Languages } from "@/lib/languages";
+import { LanguageCode } from "@/lib/languages";
 import Cookies from "js-cookie";
 
 export default function useLocale() {
-	const currentLocale = (Cookies.get("DOKPLOY_LOCALE") ?? "en") as Languages;
 	
-	const setLocale = (locale: Languages) => {
+	const currentLocale = (Cookies.get("DOKPLOY_LOCALE") ?? "en") as LanguageCode;
+
+	const setLocale = (locale: LanguageCode) => {
 		Cookies.set("DOKPLOY_LOCALE", locale, { expires: 365 });
 		window.location.reload();
 	};

apps/dokploy/utils/i18n.ts

@@ -17,7 +17,7 @@ export const serverSideTranslations = (
 		keySeparator: false,
 		i18n: {
 			defaultLocale: "en",
-			locales: Object.values(Languages),
+			locales: Object.values(Languages).map(language => language.code),
 			localeDetection: false,
 		},
 	});