From 0ca8ee17bed49a94bf215321cd6fba1a605c8ac4 Mon Sep 17 00:00:00 2001
From: JiPai <github@jipai.moe>
Date: Fri, 8 Nov 2024 01:32:46 +0800
Subject: [PATCH 01/11] feat(i18n): add i18n support

---
 .../settings/profile/profile-form.tsx         |  6 +-
 apps/dokploy/next-i18next.config.js           |  9 ++
 apps/dokploy/package.json                     |  3 +
 apps/dokploy/pages/_app.tsx                   |  4 +-
 .../pages/dashboard/settings/profile.tsx      |  4 +
 apps/dokploy/public/locales/en/common.json    |  9 ++
 .../public/locales/zh-Hans/common.json        |  9 ++
 apps/dokploy/utils/i18n.ts                    |  6 ++
 pnpm-lock.yaml                                | 97 +++++++++++++++++++
 9 files changed, 145 insertions(+), 2 deletions(-)
 create mode 100644 apps/dokploy/next-i18next.config.js
 create mode 100644 apps/dokploy/public/locales/en/common.json
 create mode 100644 apps/dokploy/public/locales/zh-Hans/common.json
 create mode 100644 apps/dokploy/utils/i18n.ts

diff --git a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
index 3c8d51bb9..799227001 100644
--- a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
@@ -18,6 +18,7 @@ import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -51,6 +52,7 @@ const randomImages = [
 export const ProfileForm = () => {
 	const { data, refetch } = api.auth.get.useQuery();
 	const { mutateAsync, isLoading } = api.auth.update.useMutation();
+	const { t } = useTranslation("common");
 
 	const form = useForm<Profile>({
 		defaultValues: {
@@ -91,7 +93,9 @@ export const ProfileForm = () => {
 		<Card className="bg-transparent">
 			<CardHeader className="flex flex-row gap-2 flex-wrap justify-between items-center">
 				<div>
-					<CardTitle className="text-xl">Account</CardTitle>
+					<CardTitle className="text-xl">
+						{t("dashboard.settings.profile.title")}
+					</CardTitle>
 					<CardDescription>
 						Change the details of your profile here.
 					</CardDescription>
diff --git a/apps/dokploy/next-i18next.config.js b/apps/dokploy/next-i18next.config.js
new file mode 100644
index 000000000..7e365819d
--- /dev/null
+++ b/apps/dokploy/next-i18next.config.js
@@ -0,0 +1,9 @@
+/** @type {import('next-i18next').UserConfig} */
+module.exports = {
+	i18n: {
+		defaultLocale: "en",
+		locales: ["en", "zh-Hans"],
+		localeDetection: false,
+	},
+	fallbackLng: "en",
+};
diff --git a/apps/dokploy/package.json b/apps/dokploy/package.json
index e62bb1dd8..9a281b796 100644
--- a/apps/dokploy/package.json
+++ b/apps/dokploy/package.json
@@ -84,6 +84,7 @@
 		"dotenv": "16.4.5",
 		"drizzle-orm": "^0.30.8",
 		"drizzle-zod": "0.5.1",
+		"i18next": "^23.16.4",
 		"input-otp": "^1.2.4",
 		"js-yaml": "4.1.0",
 		"lodash": "4.17.21",
@@ -91,6 +92,7 @@
 		"lucide-react": "^0.312.0",
 		"nanoid": "3",
 		"next": "^15.0.1",
+		"next-i18next": "^15.3.1",
 		"next-themes": "^0.2.1",
 		"node-pty": "1.0.0",
 		"node-schedule": "2.1.1",
@@ -100,6 +102,7 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-hook-form": "^7.49.3",
+		"react-i18next": "^15.1.0",
 		"recharts": "^2.12.7",
 		"slugify": "^1.6.6",
 		"sonner": "^1.4.0",
diff --git a/apps/dokploy/pages/_app.tsx b/apps/dokploy/pages/_app.tsx
index 41b4d50bf..c8e00aca5 100644
--- a/apps/dokploy/pages/_app.tsx
+++ b/apps/dokploy/pages/_app.tsx
@@ -3,6 +3,7 @@ import "@/styles/globals.css";
 import { Toaster } from "@/components/ui/sonner";
 import { api } from "@/utils/api";
 import type { NextPage } from "next";
+import { appWithTranslation } from "next-i18next";
 import { ThemeProvider } from "next-themes";
 import type { AppProps } from "next/app";
 import { Inter } from "next/font/google";
@@ -27,6 +28,7 @@ const MyApp = ({
 	pageProps: { ...pageProps },
 }: AppPropsWithLayout) => {
 	const getLayout = Component.getLayout ?? ((page) => page);
+
 	return (
 		<>
 			<style jsx global>{`
@@ -59,4 +61,4 @@ const MyApp = ({
 	);
 };
 
-export default api.withTRPC(MyApp);
+export default api.withTRPC(appWithTranslation(MyApp));
diff --git a/apps/dokploy/pages/dashboard/settings/profile.tsx b/apps/dokploy/pages/dashboard/settings/profile.tsx
index afaf59a6a..4dd68768f 100644
--- a/apps/dokploy/pages/dashboard/settings/profile.tsx
+++ b/apps/dokploy/pages/dashboard/settings/profile.tsx
@@ -4,9 +4,11 @@ import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { SettingsLayout } from "@/components/layouts/settings-layout";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
+import { getLocale } from "@/utils/i18n";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React, { type ReactElement } from "react";
 import superjson from "superjson";
 
@@ -41,6 +43,7 @@ export async function getServerSideProps(
 	ctx: GetServerSidePropsContext<{ serviceId: string }>,
 ) {
 	const { req, res } = ctx;
+	const locale = getLocale(req.cookies);
 	const { user, session } = await validateRequest(req, res);
 
 	const helpers = createServerSideHelpers({
@@ -75,6 +78,7 @@ export async function getServerSideProps(
 	return {
 		props: {
 			trpcState: helpers.dehydrate(),
+			...(await serverSideTranslations(locale, ["common"])),
 		},
 	};
 }
diff --git a/apps/dokploy/public/locales/en/common.json b/apps/dokploy/public/locales/en/common.json
new file mode 100644
index 000000000..4759dc898
--- /dev/null
+++ b/apps/dokploy/public/locales/en/common.json
@@ -0,0 +1,9 @@
+{
+	"dashboard": {
+		"settings": {
+			"profile": {
+				"title": "Account"
+			}
+		}
+	}
+}
diff --git a/apps/dokploy/public/locales/zh-Hans/common.json b/apps/dokploy/public/locales/zh-Hans/common.json
new file mode 100644
index 000000000..c18b04ecb
--- /dev/null
+++ b/apps/dokploy/public/locales/zh-Hans/common.json
@@ -0,0 +1,9 @@
+{
+	"dashboard": {
+		"settings": {
+			"profile": {
+				"title": "账户偏好"
+			}
+		}
+	}
+}
diff --git a/apps/dokploy/utils/i18n.ts b/apps/dokploy/utils/i18n.ts
new file mode 100644
index 000000000..0c165c4ef
--- /dev/null
+++ b/apps/dokploy/utils/i18n.ts
@@ -0,0 +1,6 @@
+import type { NextApiRequestCookies } from "next/dist/server/api-utils";
+
+export function getLocale(cookies: NextApiRequestCookies) {
+	const locale = cookies.DOKPLOY_LOCALE ?? "en";
+	return locale;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1048c92a9..b50b18002 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -247,6 +247,9 @@ importers:
       drizzle-zod:
         specifier: 0.5.1
         version: 0.5.1(drizzle-orm@0.30.10(@types/react@18.3.5)(postgres@3.4.4)(react@18.2.0))(zod@3.23.8)
+      i18next:
+        specifier: ^23.16.4
+        version: 23.16.4
       input-otp:
         specifier: ^1.2.4
         version: 1.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -268,6 +271,9 @@ importers:
       next:
         specifier: ^15.0.1
         version: 15.0.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      next-i18next:
+        specifier: ^15.3.1
+        version: 15.3.1(i18next@23.16.4)(next@15.0.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-i18next@15.1.0(i18next@23.16.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
       next-themes:
         specifier: ^0.2.1
         version: 0.2.1(next@15.0.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -295,6 +301,9 @@ importers:
       react-hook-form:
         specifier: ^7.49.3
         version: 7.52.1(react@18.2.0)
+      react-i18next:
+        specifier: ^15.1.0
+        version: 15.1.0(i18next@23.16.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       recharts:
         specifier: ^2.12.7
         version: 2.12.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -3206,6 +3215,9 @@ packages:
   '@types/hast@2.3.10':
     resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
 
+  '@types/hoist-non-react-statics@3.3.5':
+    resolution: {integrity: sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==}
+
   '@types/http-cache-semantics@4.0.4':
     resolution: {integrity: sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==}
 
@@ -3893,6 +3905,9 @@ packages:
   core-js-pure@3.38.1:
     resolution: {integrity: sha512-BY8Etc1FZqdw1glX0XNOq2FDwfrg/VGqoZOZCdaL+UmdaqDwQwYXkMJT4t6In+zfEfOJDcM9T0KdbBeJg8KKCQ==}
 
+  core-js@3.39.0:
+    resolution: {integrity: sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==}
+
   cosmiconfig-typescript-loader@5.0.0:
     resolution: {integrity: sha512-+8cK7jRAReYkMwMiG+bxhcNKiHJDM6bR9FD/nGBXOWdMLuYawjF5cGrtLilJ+LGd3ZjCXnJjR5DkfWPoIVlqJA==}
     engines: {node: '>=v16'}
@@ -4662,10 +4677,16 @@ packages:
   highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
 
+  hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+
   hono@4.5.8:
     resolution: {integrity: sha512-pqpSlcdqGkpTTRpLYU1PnCz52gVr0zVR9H5GzMyJWuKQLLEBQxh96q45QizJ2PPX8NATtz2mu31/PKW/Jt+90Q==}
     engines: {node: '>=16.0.0'}
 
+  html-parse-stringify@3.0.1:
+    resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
+
   html-to-text@9.0.5:
     resolution: {integrity: sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==}
     engines: {node: '>=14'}
@@ -4701,6 +4722,12 @@ packages:
     resolution: {integrity: sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==}
     engines: {node: '>=10.18'}
 
+  i18next-fs-backend@2.3.2:
+    resolution: {integrity: sha512-LIwUlkqDZnUI8lnUxBnEj8K/FrHQTT/Sc+1rvDm9E8YvvY5YxzoEAASNx+W5M9DfD5s77lI5vSAFWeTp26B/3Q==}
+
+  i18next@23.16.4:
+    resolution: {integrity: sha512-9NIYBVy9cs4wIqzurf7nLXPyf3R78xYbxExVqHLK9od3038rjpyOEzW+XB130kZ1N4PZ9inTtJ471CRJ4Ituyg==}
+
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -5247,6 +5274,15 @@ packages:
     resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==}
     engines: {node: '>= 10'}
 
+  next-i18next@15.3.1:
+    resolution: {integrity: sha512-+pa2pZJb7B6k5PKW3TLVMmAodqkNaOBWVYlpWX56mgcEJz0UMW+MKSdKM9Z72CHp6Bp48g7OWwDnLqxXNp/84w==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      i18next: '>= 23.7.13'
+      next: '>= 12.0.0'
+      react: '>= 17.0.2'
+      react-i18next: '>= 13.5.0'
+
   next-themes@0.2.1:
     resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
     peerDependencies:
@@ -5726,6 +5762,19 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
+  react-i18next@15.1.0:
+    resolution: {integrity: sha512-zj3nJynMnZsy2gPZiOTC7XctCY5eQGqT3tcKMmfJWC9FMvgd+960w/adq61j8iPzpwmsXejqID9qC3Mqu1Xu2Q==}
+    peerDependencies:
+      i18next: '>= 23.2.3'
+      react: '>= 16.8.0'
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+
   react-immutable-proptypes@2.2.0:
     resolution: {integrity: sha512-Vf4gBsePlwdGvSZoLSBfd4HAP93HDauMY4fDjXhreg/vg6F3Fj/MXDNyTbltPC/xZKmZc+cjLu3598DdYK6sgQ==}
     peerDependencies:
@@ -6570,6 +6619,10 @@ packages:
       jsdom:
         optional: true
 
+  void-elements@3.1.0:
+    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
+    engines: {node: '>=0.10.0'}
+
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
@@ -9282,6 +9335,11 @@ snapshots:
     dependencies:
       '@types/unist': 2.0.10
 
+  '@types/hoist-non-react-statics@3.3.5':
+    dependencies:
+      '@types/react': 18.3.5
+      hoist-non-react-statics: 3.3.2
+
   '@types/http-cache-semantics@4.0.4': {}
 
   '@types/http-errors@2.0.4': {}
@@ -10056,6 +10114,8 @@ snapshots:
 
   core-js-pure@3.38.1: {}
 
+  core-js@3.39.0: {}
+
   cosmiconfig-typescript-loader@5.0.0(@types/node@18.19.42)(cosmiconfig@9.0.0(typescript@5.5.3))(typescript@5.5.3):
     dependencies:
       '@types/node': 18.19.42
@@ -10820,8 +10880,16 @@ snapshots:
 
   highlight.js@10.7.3: {}
 
+  hoist-non-react-statics@3.3.2:
+    dependencies:
+      react-is: 16.13.1
+
   hono@4.5.8: {}
 
+  html-parse-stringify@3.0.1:
+    dependencies:
+      void-elements: 3.1.0
+
   html-to-text@9.0.5:
     dependencies:
       '@selderee/plugin-htmlparser2': 0.11.0
@@ -10865,6 +10933,12 @@ snapshots:
 
   hyperdyperid@1.2.0: {}
 
+  i18next-fs-backend@2.3.2: {}
+
+  i18next@23.16.4:
+    dependencies:
+      '@babel/runtime': 7.25.0
+
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -11365,6 +11439,18 @@ snapshots:
 
   neotraverse@0.6.18: {}
 
+  next-i18next@15.3.1(i18next@23.16.4)(next@15.0.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-i18next@15.1.0(i18next@23.16.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0):
+    dependencies:
+      '@babel/runtime': 7.25.0
+      '@types/hoist-non-react-statics': 3.3.5
+      core-js: 3.39.0
+      hoist-non-react-statics: 3.3.2
+      i18next: 23.16.4
+      i18next-fs-backend: 2.3.2
+      next: 15.0.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
+      react-i18next: 15.1.0(i18next@23.16.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+
   next-themes@0.2.1(next@15.0.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       next: 15.0.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -11854,6 +11940,15 @@ snapshots:
     dependencies:
       react: 18.2.0
 
+  react-i18next@15.1.0(i18next@23.16.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      '@babel/runtime': 7.25.0
+      html-parse-stringify: 3.0.1
+      i18next: 23.16.4
+      react: 18.2.0
+    optionalDependencies:
+      react-dom: 18.2.0(react@18.2.0)
+
   react-immutable-proptypes@2.2.0(immutable@3.8.2):
     dependencies:
       immutable: 3.8.2
@@ -12791,6 +12886,8 @@ snapshots:
       - supports-color
       - terser
 
+  void-elements@3.1.0: {}
+
   w3c-keyname@2.2.8: {}
 
   watchpack@2.4.1:

From 7f0a92f22425cdc29cf4c686c1e2811e888412dd Mon Sep 17 00:00:00 2001
From: JiPai <github@jipai.moe>
Date: Fri, 8 Nov 2024 02:16:15 +0800
Subject: [PATCH 02/11] feat(i18n): add language select into appearance tab

---
 .../dashboard/settings/appearance-form.tsx    | 62 ++++++++++++++++++-
 .../settings/profile/profile-form.tsx         |  4 +-
 apps/dokploy/package.json                     |  2 +
 .../pages/dashboard/settings/appearance.tsx   |  4 ++
 .../pages/dashboard/settings/profile.tsx      |  2 +-
 apps/dokploy/public/locales/en/common.json    | 10 +--
 apps/dokploy/public/locales/en/settings.json  | 11 ++++
 .../public/locales/zh-Hans/common.json        | 10 +--
 .../public/locales/zh-Hans/settings.json      | 11 ++++
 apps/dokploy/utils/hooks/use-locale.ts        | 21 +++++++
 pnpm-lock.yaml                                | 11 ++++
 11 files changed, 124 insertions(+), 24 deletions(-)
 create mode 100644 apps/dokploy/public/locales/en/settings.json
 create mode 100644 apps/dokploy/public/locales/zh-Hans/settings.json
 create mode 100644 apps/dokploy/utils/hooks/use-locale.ts

diff --git a/apps/dokploy/components/dashboard/settings/appearance-form.tsx b/apps/dokploy/components/dashboard/settings/appearance-form.tsx
index 52142fcd6..a64a66b00 100644
--- a/apps/dokploy/components/dashboard/settings/appearance-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/appearance-form.tsx
@@ -20,6 +20,15 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import useLocale from "@/utils/hooks/use-locale";
+import { useTranslation } from "next-i18next";
 import { useTheme } from "next-themes";
 import { useEffect } from "react";
 import { toast } from "sonner";
@@ -28,6 +37,9 @@ const appearanceFormSchema = z.object({
 	theme: z.enum(["light", "dark", "system"], {
 		required_error: "Please select a theme.",
 	}),
+	language: z.enum(["en", "zh-Hans"], {
+		required_error: "Please select a language.",
+	}),
 });
 
 type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;
@@ -35,10 +47,14 @@ type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;
 // This can come from your database or API.
 const defaultValues: Partial<AppearanceFormValues> = {
 	theme: "system",
+	language: "en",
 };
 
 export function AppearanceForm() {
 	const { setTheme, theme } = useTheme();
+	const { locale, setLocale } = useLocale();
+	const { t } = useTranslation("settings");
+
 	const form = useForm<AppearanceFormValues>({
 		resolver: zodResolver(appearanceFormSchema),
 		defaultValues,
@@ -47,19 +63,23 @@ export function AppearanceForm() {
 	useEffect(() => {
 		form.reset({
 			theme: (theme ?? "system") as AppearanceFormValues["theme"],
+			language: locale ?? "en",
 		});
-	}, [form, theme]);
+	}, [form, theme, locale]);
 	function onSubmit(data: AppearanceFormValues) {
 		setTheme(data.theme);
+		setLocale(data.language);
 		toast.success("Preferences Updated");
 	}
 
 	return (
 		<Card className="bg-transparent">
 			<CardHeader>
-				<CardTitle className="text-xl">Appearance</CardTitle>
+				<CardTitle className="text-xl">
+					{t("settings.appearance.title")}
+				</CardTitle>
 				<CardDescription>
-					Customize the theme of your dashboard.
+					{t("settings.appearance.description")}
 				</CardDescription>
 			</CardHeader>
 			<CardContent className="space-y-2">
@@ -131,6 +151,42 @@ export function AppearanceForm() {
 							}}
 						/>
 
+						<FormField
+							control={form.control}
+							name="language"
+							defaultValue={form.control._defaultValues.language}
+							render={({ field }) => {
+								return (
+									<FormItem className="space-y-1">
+										<FormLabel>Language</FormLabel>
+										<FormDescription>
+											Select a language for your dashboard
+										</FormDescription>
+										<FormMessage />
+										<Select
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+											value={field.value}
+										>
+											<SelectTrigger>
+												<SelectValue placeholder="No preset selected" />
+											</SelectTrigger>
+											<SelectContent>
+												{[
+													{ label: "English", value: "en" },
+													{ label: "简体中文", value: "zh-Hans" },
+												].map((preset) => (
+													<SelectItem key={preset.label} value={preset.value}>
+														{preset.label}
+													</SelectItem>
+												))}
+											</SelectContent>
+										</Select>
+									</FormItem>
+								);
+							}}
+						/>
+
 						<Button type="submit">Save</Button>
 					</form>
 				</Form>
diff --git a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
index 799227001..910e8bcd9 100644
--- a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
@@ -52,7 +52,7 @@ const randomImages = [
 export const ProfileForm = () => {
 	const { data, refetch } = api.auth.get.useQuery();
 	const { mutateAsync, isLoading } = api.auth.update.useMutation();
-	const { t } = useTranslation("common");
+	const { t } = useTranslation("settings");
 
 	const form = useForm<Profile>({
 		defaultValues: {
@@ -94,7 +94,7 @@ export const ProfileForm = () => {
 			<CardHeader className="flex flex-row gap-2 flex-wrap justify-between items-center">
 				<div>
 					<CardTitle className="text-xl">
-						{t("dashboard.settings.profile.title")}
+						{t("settings.profile.title")}
 					</CardTitle>
 					<CardDescription>
 						Change the details of your profile here.
diff --git a/apps/dokploy/package.json b/apps/dokploy/package.json
index 9a281b796..df8e7c254 100644
--- a/apps/dokploy/package.json
+++ b/apps/dokploy/package.json
@@ -86,6 +86,7 @@
 		"drizzle-zod": "0.5.1",
 		"i18next": "^23.16.4",
 		"input-otp": "^1.2.4",
+		"js-cookie": "^3.0.5",
 		"js-yaml": "4.1.0",
 		"lodash": "4.17.21",
 		"lucia": "^3.0.1",
@@ -122,6 +123,7 @@
 	"devDependencies": {
 		"@types/adm-zip": "^0.5.5",
 		"@types/bcrypt": "5.0.2",
+		"@types/js-cookie": "^3.0.6",
 		"@types/js-yaml": "4.0.9",
 		"@types/lodash": "4.17.4",
 		"@types/node": "^18.17.0",
diff --git a/apps/dokploy/pages/dashboard/settings/appearance.tsx b/apps/dokploy/pages/dashboard/settings/appearance.tsx
index af317b0a6..f074f2898 100644
--- a/apps/dokploy/pages/dashboard/settings/appearance.tsx
+++ b/apps/dokploy/pages/dashboard/settings/appearance.tsx
@@ -2,9 +2,11 @@ import { AppearanceForm } from "@/components/dashboard/settings/appearance-form"
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { SettingsLayout } from "@/components/layouts/settings-layout";
 import { appRouter } from "@/server/api/root";
+import { getLocale } from "@/utils/i18n";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React, { type ReactElement } from "react";
 import superjson from "superjson";
 
@@ -30,6 +32,7 @@ export async function getServerSideProps(
 ) {
 	const { req, res } = ctx;
 	const { user, session } = await validateRequest(req, res);
+	const locale = getLocale(req.cookies);
 
 	const helpers = createServerSideHelpers({
 		router: appRouter,
@@ -63,6 +66,7 @@ export async function getServerSideProps(
 	return {
 		props: {
 			trpcState: helpers.dehydrate(),
+			...(await serverSideTranslations(locale, ["settings"])),
 		},
 	};
 }
diff --git a/apps/dokploy/pages/dashboard/settings/profile.tsx b/apps/dokploy/pages/dashboard/settings/profile.tsx
index 4dd68768f..9303354f1 100644
--- a/apps/dokploy/pages/dashboard/settings/profile.tsx
+++ b/apps/dokploy/pages/dashboard/settings/profile.tsx
@@ -78,7 +78,7 @@ export async function getServerSideProps(
 	return {
 		props: {
 			trpcState: helpers.dehydrate(),
-			...(await serverSideTranslations(locale, ["common"])),
+			...(await serverSideTranslations(locale, ["settings"])),
 		},
 	};
 }
diff --git a/apps/dokploy/public/locales/en/common.json b/apps/dokploy/public/locales/en/common.json
index 4759dc898..0967ef424 100644
--- a/apps/dokploy/public/locales/en/common.json
+++ b/apps/dokploy/public/locales/en/common.json
@@ -1,9 +1 @@
-{
-	"dashboard": {
-		"settings": {
-			"profile": {
-				"title": "Account"
-			}
-		}
-	}
-}
+{}
diff --git a/apps/dokploy/public/locales/en/settings.json b/apps/dokploy/public/locales/en/settings.json
new file mode 100644
index 000000000..1b3fcdc86
--- /dev/null
+++ b/apps/dokploy/public/locales/en/settings.json
@@ -0,0 +1,11 @@
+{
+	"settings": {
+		"profile": {
+			"title": "Account"
+		},
+		"appearance": {
+			"title": "Appearance",
+			"description": "Customize the theme of your dashboard."
+		}
+	}
+}
diff --git a/apps/dokploy/public/locales/zh-Hans/common.json b/apps/dokploy/public/locales/zh-Hans/common.json
index c18b04ecb..0967ef424 100644
--- a/apps/dokploy/public/locales/zh-Hans/common.json
+++ b/apps/dokploy/public/locales/zh-Hans/common.json
@@ -1,9 +1 @@
-{
-	"dashboard": {
-		"settings": {
-			"profile": {
-				"title": "账户偏好"
-			}
-		}
-	}
-}
+{}
diff --git a/apps/dokploy/public/locales/zh-Hans/settings.json b/apps/dokploy/public/locales/zh-Hans/settings.json
new file mode 100644
index 000000000..636e43c40
--- /dev/null
+++ b/apps/dokploy/public/locales/zh-Hans/settings.json
@@ -0,0 +1,11 @@
+{
+	"settings": {
+		"profile": {
+			"title": "账户偏好"
+		},
+		"appearance": {
+			"title": "外观",
+			"description": "自定义仪表板主题。"
+		}
+	}
+}
diff --git a/apps/dokploy/utils/hooks/use-locale.ts b/apps/dokploy/utils/hooks/use-locale.ts
new file mode 100644
index 000000000..a07478b78
--- /dev/null
+++ b/apps/dokploy/utils/hooks/use-locale.ts
@@ -0,0 +1,21 @@
+import Cookies from "js-cookie";
+
+const SUPPORTED_LOCALES = ["en", "zh-Hans"] as const;
+type Locale = (typeof SUPPORTED_LOCALES)[number];
+type PossibleLocale = (typeof SUPPORTED_LOCALES)[number] | undefined | null;
+
+export default function useLocale() {
+	const currentLocale = Cookies.get("DOKPLOY_LOCALE") as PossibleLocale;
+
+	console.log(currentLocale);
+
+	const setLocale = (locale: Locale) => {
+		Cookies.set("DOKPLOY_LOCALE", locale);
+		window.location.reload();
+	};
+
+	return {
+		locale: currentLocale,
+		setLocale,
+	};
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b50b18002..9dd089aa9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -253,6 +253,9 @@ importers:
       input-otp:
         specifier: ^1.2.4
         version: 1.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      js-cookie:
+        specifier: ^3.0.5
+        version: 3.0.5
       js-yaml:
         specifier: 4.1.0
         version: 4.1.0
@@ -356,6 +359,9 @@ importers:
       '@types/bcrypt':
         specifier: 5.0.2
         version: 5.0.2
+      '@types/js-cookie':
+        specifier: ^3.0.6
+        version: 3.0.6
       '@types/js-yaml':
         specifier: 4.0.9
         version: 4.0.9
@@ -3224,6 +3230,9 @@ packages:
   '@types/http-errors@2.0.4':
     resolution: {integrity: sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==}
 
+  '@types/js-cookie@3.0.6':
+    resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
+
   '@types/js-yaml@4.0.9':
     resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==}
 
@@ -9344,6 +9353,8 @@ snapshots:
 
   '@types/http-errors@2.0.4': {}
 
+  '@types/js-cookie@3.0.6': {}
+
   '@types/js-yaml@4.0.9': {}
 
   '@types/json-schema@7.0.15': {}

From 046f0a5c203dcce8155832aa08e19e03a98de4c1 Mon Sep 17 00:00:00 2001
From: JiPai <github@jipai.moe>
Date: Fri, 8 Nov 2024 12:40:31 +0800
Subject: [PATCH 03/11] feat(i18n): replace translation in Appearance

---
 .../dashboard/settings/appearance-form.tsx    | 18 ++++++++---------
 .../settings/profile/profile-form.tsx         | 19 +++++++++---------
 apps/dokploy/public/locales/en/settings.json  | 20 +++++++++++++++++--
 .../public/locales/zh-Hans/settings.json      | 20 +++++++++++++++++--
 apps/dokploy/utils/hooks/use-locale.ts        |  6 ++----
 5 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/appearance-form.tsx b/apps/dokploy/components/dashboard/settings/appearance-form.tsx
index a64a66b00..a10b0d051 100644
--- a/apps/dokploy/components/dashboard/settings/appearance-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/appearance-form.tsx
@@ -63,7 +63,7 @@ export function AppearanceForm() {
 	useEffect(() => {
 		form.reset({
 			theme: (theme ?? "system") as AppearanceFormValues["theme"],
-			language: locale ?? "en",
+			language: locale,
 		});
 	}, [form, theme, locale]);
 	function onSubmit(data: AppearanceFormValues) {
@@ -92,9 +92,9 @@ export function AppearanceForm() {
 							render={({ field }) => {
 								return (
 									<FormItem className="space-y-1 ">
-										<FormLabel>Theme</FormLabel>
+										<FormLabel>{t("settings.appearance.theme")}</FormLabel>
 										<FormDescription>
-											Select a theme for your dashboard
+											{t("settings.appearance.themeDescription")}
 										</FormDescription>
 										<FormMessage />
 										<RadioGroup
@@ -112,7 +112,7 @@ export function AppearanceForm() {
 														<img src="/images/theme-light.svg" alt="light" />
 													</div>
 													<span className="block w-full p-2 text-center font-normal">
-														Light
+														{t("settings.appearance.themes.light")}
 													</span>
 												</FormLabel>
 											</FormItem>
@@ -125,7 +125,7 @@ export function AppearanceForm() {
 														<img src="/images/theme-dark.svg" alt="dark" />
 													</div>
 													<span className="block w-full p-2 text-center font-normal">
-														Dark
+														{t("settings.appearance.themes.dark")}
 													</span>
 												</FormLabel>
 											</FormItem>
@@ -141,7 +141,7 @@ export function AppearanceForm() {
 														<img src="/images/theme-system.svg" alt="system" />
 													</div>
 													<span className="block w-full p-2 text-center font-normal">
-														System
+														{t("settings.appearance.themes.system")}
 													</span>
 												</FormLabel>
 											</FormItem>
@@ -158,9 +158,9 @@ export function AppearanceForm() {
 							render={({ field }) => {
 								return (
 									<FormItem className="space-y-1">
-										<FormLabel>Language</FormLabel>
+										<FormLabel>{t("settings.appearance.language")}</FormLabel>
 										<FormDescription>
-											Select a language for your dashboard
+											{t("settings.appearance.languageDescription")}
 										</FormDescription>
 										<FormMessage />
 										<Select
@@ -187,7 +187,7 @@ export function AppearanceForm() {
 							}}
 						/>
 
-						<Button type="submit">Save</Button>
+						<Button type="submit">{t("settings.common.save")}</Button>
 					</form>
 				</Form>
 			</CardContent>
diff --git a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
index 910e8bcd9..e90eb5e56 100644
--- a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
@@ -96,9 +96,7 @@ export const ProfileForm = () => {
 					<CardTitle className="text-xl">
 						{t("settings.profile.title")}
 					</CardTitle>
-					<CardDescription>
-						Change the details of your profile here.
-					</CardDescription>
+					<CardDescription>{t("settings.profile.description")}</CardDescription>
 				</div>
 				{!data?.is2FAEnabled ? <Enable2FA /> : <Disable2FA />}
 			</CardHeader>
@@ -111,9 +109,12 @@ export const ProfileForm = () => {
 								name="email"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Email</FormLabel>
+										<FormLabel>{t("settings.profile.email")}</FormLabel>
 										<FormControl>
-											<Input placeholder="Email" {...field} />
+											<Input
+												placeholder={t("settings.profile.email")}
+												{...field}
+											/>
 										</FormControl>
 										<FormMessage />
 									</FormItem>
@@ -124,11 +125,11 @@ export const ProfileForm = () => {
 								name="password"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Password</FormLabel>
+										<FormLabel>{t("settings.profile.password")}</FormLabel>
 										<FormControl>
 											<Input
 												type="password"
-												placeholder="Password"
+												placeholder={t("settings.profile.password")}
 												{...field}
 												value={field.value || ""}
 											/>
@@ -143,7 +144,7 @@ export const ProfileForm = () => {
 								name="image"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Avatar</FormLabel>
+										<FormLabel>{t("settings.profile.avatar")}</FormLabel>
 										<FormControl>
 											<RadioGroup
 												onValueChange={(e) => {
@@ -181,7 +182,7 @@ export const ProfileForm = () => {
 						</div>
 						<div>
 							<Button type="submit" isLoading={isLoading}>
-								Save
+								{t("settings.common.save")}
 							</Button>
 						</div>
 					</form>
diff --git a/apps/dokploy/public/locales/en/settings.json b/apps/dokploy/public/locales/en/settings.json
index 1b3fcdc86..c4f6f362f 100644
--- a/apps/dokploy/public/locales/en/settings.json
+++ b/apps/dokploy/public/locales/en/settings.json
@@ -1,11 +1,27 @@
 {
 	"settings": {
+		"common": {
+			"save": "Save"
+		},
 		"profile": {
-			"title": "Account"
+			"title": "Account",
+			"description": "Change the details of your profile here.",
+			"email": "Email",
+			"password": "Password",
+			"avatar": "Avatar"
 		},
 		"appearance": {
 			"title": "Appearance",
-			"description": "Customize the theme of your dashboard."
+			"description": "Customize the theme of your dashboard.",
+			"theme": "Theme",
+			"themeDescription": "Select a theme for your dashboard",
+			"themes": {
+				"light": "Light",
+				"dark": "Dark",
+				"system": "System"
+			},
+			"language": "Language",
+			"languageDescription": "Select a language for your dashboard"
 		}
 	}
 }
diff --git a/apps/dokploy/public/locales/zh-Hans/settings.json b/apps/dokploy/public/locales/zh-Hans/settings.json
index 636e43c40..d426bab64 100644
--- a/apps/dokploy/public/locales/zh-Hans/settings.json
+++ b/apps/dokploy/public/locales/zh-Hans/settings.json
@@ -1,11 +1,27 @@
 {
 	"settings": {
+		"common": {
+			"save": "保存"
+		},
 		"profile": {
-			"title": "账户偏好"
+			"title": "账户偏好",
+			"description": "更改您的个人资料详情。",
+			"email": "电子邮件",
+			"password": "密码",
+			"avatar": "头像"
 		},
 		"appearance": {
 			"title": "外观",
-			"description": "自定义仪表板主题。"
+			"description": "自定义仪表板主题。",
+			"theme": "主题",
+			"themeDescription": "选择仪表板主题",
+			"themes": {
+				"light": "亮",
+				"dark": "暗",
+				"system": "系统"
+			},
+			"language": "语言",
+			"languageDescription": "选择仪表板语言"
 		}
 	}
 }
diff --git a/apps/dokploy/utils/hooks/use-locale.ts b/apps/dokploy/utils/hooks/use-locale.ts
index a07478b78..f00e0df84 100644
--- a/apps/dokploy/utils/hooks/use-locale.ts
+++ b/apps/dokploy/utils/hooks/use-locale.ts
@@ -1,13 +1,11 @@
 import Cookies from "js-cookie";
 
 const SUPPORTED_LOCALES = ["en", "zh-Hans"] as const;
+
 type Locale = (typeof SUPPORTED_LOCALES)[number];
-type PossibleLocale = (typeof SUPPORTED_LOCALES)[number] | undefined | null;
 
 export default function useLocale() {
-	const currentLocale = Cookies.get("DOKPLOY_LOCALE") as PossibleLocale;
-
-	console.log(currentLocale);
+	const currentLocale = (Cookies.get("DOKPLOY_LOCALE") ?? "en") as Locale;
 
 	const setLocale = (locale: Locale) => {
 		Cookies.set("DOKPLOY_LOCALE", locale);

From c09ff253605579144aecca5e5cf71e0172fbe24d Mon Sep 17 00:00:00 2001
From: JiPai <github@jipai.moe>
Date: Sat, 9 Nov 2024 18:16:06 +0800
Subject: [PATCH 04/11] feat(i18n): add translation for server tab

---
 CONTRIBUTING.md                               |  2 +-
 .../servers/actions/show-dokploy-actions.tsx  | 12 ++++--
 .../servers/actions/show-storage-actions.tsx  | 30 ++++++++++----
 .../servers/actions/show-traefik-actions.tsx  | 14 ++++---
 .../dashboard/settings/web-domain.tsx         | 38 +++++++++++++----
 .../dashboard/settings/web-server.tsx         | 10 ++++-
 .../pages/dashboard/settings/server.tsx       |  4 ++
 apps/dokploy/public/locales/en/settings.json  | 41 +++++++++++++++++++
 .../public/locales/zh-Hans/settings.json      | 41 +++++++++++++++++++
 9 files changed, 163 insertions(+), 29 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 05256d571..07ad60225 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -235,7 +235,7 @@ export function generate(schema: Schema): Template {
 
 5. Add the logo or image of the template to `public/templates/plausible.svg`
 
-### Recomendations
+### Recommendations
 
 - Use the same name of the folder as the id of the template.
 - The logo should be in the public folder.
diff --git a/apps/dokploy/components/dashboard/settings/servers/actions/show-dokploy-actions.tsx b/apps/dokploy/components/dashboard/settings/servers/actions/show-dokploy-actions.tsx
index 49f6772b5..3e4790739 100644
--- a/apps/dokploy/components/dashboard/settings/servers/actions/show-dokploy-actions.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/actions/show-dokploy-actions.tsx
@@ -11,10 +11,12 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { api } from "@/utils/api";
+import { useTranslation } from "next-i18next";
 import { toast } from "sonner";
 import { ShowModalLogs } from "../../web-server/show-modal-logs";
 
 export const ShowDokployActions = () => {
+	const { t } = useTranslation("settings");
 	const { mutateAsync: reloadServer, isLoading } =
 		api.settings.reloadServer.useMutation();
 
@@ -22,11 +24,13 @@ export const ShowDokployActions = () => {
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild disabled={isLoading}>
 				<Button isLoading={isLoading} variant="outline">
-					Server
+					{t("settings.server.webServer.server.label")}
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent className="w-56" align="start">
-				<DropdownMenuLabel>Actions</DropdownMenuLabel>
+				<DropdownMenuLabel>
+					{t("settings.server.webServer.actions")}
+				</DropdownMenuLabel>
 				<DropdownMenuSeparator />
 				<DropdownMenuGroup>
 					<DropdownMenuItem
@@ -40,10 +44,10 @@ export const ShowDokployActions = () => {
 								});
 						}}
 					>
-						<span>Reload</span>
+						<span>{t("settings.server.webServer.reload")}</span>
 					</DropdownMenuItem>
 					<ShowModalLogs appName="dokploy">
-						<span>Watch logs</span>
+						<span>{t("settings.server.webServer.watchLogs")}</span>
 					</ShowModalLogs>
 				</DropdownMenuGroup>
 			</DropdownMenuContent>
diff --git a/apps/dokploy/components/dashboard/settings/servers/actions/show-storage-actions.tsx b/apps/dokploy/components/dashboard/settings/servers/actions/show-storage-actions.tsx
index b3f9c3345..7163332d0 100644
--- a/apps/dokploy/components/dashboard/settings/servers/actions/show-storage-actions.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/actions/show-storage-actions.tsx
@@ -11,12 +11,14 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { api } from "@/utils/api";
+import { useTranslation } from "next-i18next";
 import { toast } from "sonner";
 
 interface Props {
 	serverId?: string;
 }
 export const ShowStorageActions = ({ serverId }: Props) => {
+	const { t } = useTranslation("settings");
 	const { mutateAsync: cleanAll, isLoading: cleanAllIsLoading } =
 		api.settings.cleanAll.useMutation();
 
@@ -64,11 +66,13 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 					}
 					variant="outline"
 				>
-					Space
+					{t("settings.server.webServer.storage.label")}
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent className="w-64" align="start">
-				<DropdownMenuLabel>Actions</DropdownMenuLabel>
+				<DropdownMenuLabel>
+					{t("settings.server.webServer.actions")}
+				</DropdownMenuLabel>
 				<DropdownMenuSeparator />
 				<DropdownMenuGroup>
 					<DropdownMenuItem
@@ -85,7 +89,9 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 								});
 						}}
 					>
-						<span>Clean unused images</span>
+						<span>
+							{t("settings.server.webServer.storage.cleanUnusedImages")}
+						</span>
 					</DropdownMenuItem>
 					<DropdownMenuItem
 						className="w-full cursor-pointer"
@@ -101,7 +107,9 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 								});
 						}}
 					>
-						<span>Clean unused volumes</span>
+						<span>
+							{t("settings.server.webServer.storage.cleanUnusedVolumes")}
+						</span>
 					</DropdownMenuItem>
 
 					<DropdownMenuItem
@@ -118,7 +126,9 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 								});
 						}}
 					>
-						<span>Clean stopped containers</span>
+						<span>
+							{t("settings.server.webServer.storage.cleanStoppedContainers")}
+						</span>
 					</DropdownMenuItem>
 
 					<DropdownMenuItem
@@ -135,7 +145,9 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 								});
 						}}
 					>
-						<span>Clean Docker Builder & System</span>
+						<span>
+							{t("settings.server.webServer.storage.cleanDockerBuilder")}
+						</span>
 					</DropdownMenuItem>
 					{!serverId && (
 						<DropdownMenuItem
@@ -150,7 +162,9 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 									});
 							}}
 						>
-							<span>Clean Monitoring </span>
+							<span>
+								{t("settings.server.webServer.storage.cleanMonitoring")}
+							</span>
 						</DropdownMenuItem>
 					)}
 
@@ -168,7 +182,7 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 								});
 						}}
 					>
-						<span>Clean all</span>
+						<span>{t("settings.server.webServer.storage.cleanAll")}</span>
 					</DropdownMenuItem>
 				</DropdownMenuGroup>
 			</DropdownMenuContent>
diff --git a/apps/dokploy/components/dashboard/settings/servers/actions/show-traefik-actions.tsx b/apps/dokploy/components/dashboard/settings/servers/actions/show-traefik-actions.tsx
index a0ea3f5e8..5488712c7 100644
--- a/apps/dokploy/components/dashboard/settings/servers/actions/show-traefik-actions.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/actions/show-traefik-actions.tsx
@@ -23,6 +23,7 @@ import { api } from "@/utils/api";
 import { toast } from "sonner";
 
 import { cn } from "@/lib/utils";
+import { useTranslation } from "next-i18next";
 import { EditTraefikEnv } from "../../web-server/edit-traefik-env";
 import { ShowModalLogs } from "../../web-server/show-modal-logs";
 
@@ -30,6 +31,7 @@ interface Props {
 	serverId?: string;
 }
 export const ShowTraefikActions = ({ serverId }: Props) => {
+	const { t } = useTranslation("settings");
 	const { mutateAsync: reloadTraefik, isLoading: reloadTraefikIsLoading } =
 		api.settings.reloadTraefik.useMutation();
 
@@ -51,11 +53,13 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 					isLoading={reloadTraefikIsLoading || toggleDashboardIsLoading}
 					variant="outline"
 				>
-					Traefik
+					{t("settings.server.webServer.traefik.label")}
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent className="w-56" align="start">
-				<DropdownMenuLabel>Actions</DropdownMenuLabel>
+				<DropdownMenuLabel>
+					{t("settings.server.webServer.actions")}
+				</DropdownMenuLabel>
 				<DropdownMenuSeparator />
 				<DropdownMenuGroup>
 					<DropdownMenuItem
@@ -71,17 +75,17 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 								});
 						}}
 					>
-						<span>Reload</span>
+						<span>{t("settings.server.webServer.reload")}</span>
 					</DropdownMenuItem>
 					<ShowModalLogs appName="dokploy-traefik" serverId={serverId}>
-						<span>Watch logs</span>
+						<span>{t("settings.server.webServer.watchLogs")}</span>
 					</ShowModalLogs>
 					<EditTraefikEnv serverId={serverId}>
 						<DropdownMenuItem
 							onSelect={(e) => e.preventDefault()}
 							className="w-full cursor-pointer space-x-3"
 						>
-							<span>Modify Env</span>
+							<span>{t("settings.server.webServer.traefik.modifyEnv")}</span>
 						</DropdownMenuItem>
 					</EditTraefikEnv>
 
diff --git a/apps/dokploy/components/dashboard/settings/web-domain.tsx b/apps/dokploy/components/dashboard/settings/web-domain.tsx
index 354f11589..00f54904d 100644
--- a/apps/dokploy/components/dashboard/settings/web-domain.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-domain.tsx
@@ -24,6 +24,7 @@ import {
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -49,6 +50,7 @@ const addServerDomain = z
 type AddServerDomain = z.infer<typeof addServerDomain>;
 
 export const WebDomain = () => {
+	const { t } = useTranslation("settings");
 	const { data: user, refetch } = api.admin.one.useQuery();
 	const { mutateAsync, isLoading } =
 		api.settings.assignDomainServer.useMutation();
@@ -89,9 +91,11 @@ export const WebDomain = () => {
 		<div className="w-full">
 			<Card className="bg-transparent">
 				<CardHeader>
-					<CardTitle className="text-xl">Server Domain</CardTitle>
+					<CardTitle className="text-xl">
+						{t("settings.server.domain.title")}
+					</CardTitle>
 					<CardDescription>
-						Add a domain to your server application.
+						{t("settings.server.domain.description")}
 					</CardDescription>
 				</CardHeader>
 				<CardContent className="flex w-full flex-col gap-4">
@@ -106,7 +110,9 @@ export const WebDomain = () => {
 								render={({ field }) => {
 									return (
 										<FormItem>
-											<FormLabel>Domain</FormLabel>
+											<FormLabel>
+												{t("settings.server.domain.form.domain")}
+											</FormLabel>
 											<FormControl>
 												<Input
 													className="w-full"
@@ -126,7 +132,9 @@ export const WebDomain = () => {
 								render={({ field }) => {
 									return (
 										<FormItem>
-											<FormLabel>Letsencrypt Email</FormLabel>
+											<FormLabel>
+												{t("settings.server.domain.form.letsEncryptEmail")}
+											</FormLabel>
 											<FormControl>
 												<Input
 													className="w-full"
@@ -145,20 +153,32 @@ export const WebDomain = () => {
 								render={({ field }) => {
 									return (
 										<FormItem className="md:col-span-2">
-											<FormLabel>Certificate</FormLabel>
+											<FormLabel>
+												{t("settings.server.domain.form.certificate.label")}
+											</FormLabel>
 											<Select
 												onValueChange={field.onChange}
 												value={field.value}
 											>
 												<FormControl>
 													<SelectTrigger>
-														<SelectValue placeholder="Select a certificate" />
+														<SelectValue
+															placeholder={t(
+																"settings.server.domain.form.certificate.placeholder",
+															)}
+														/>
 													</SelectTrigger>
 												</FormControl>
 												<SelectContent>
-													<SelectItem value={"none"}>None</SelectItem>
+													<SelectItem value={"none"}>
+														{t(
+															"settings.server.domain.form.certificateOptions.none",
+														)}
+													</SelectItem>
 													<SelectItem value={"letsencrypt"}>
-														Letsencrypt (Default)
+														{t(
+															"settings.server.domain.form.certificateOptions.letsencrypt",
+														)}
 													</SelectItem>
 												</SelectContent>
 											</Select>
@@ -169,7 +189,7 @@ export const WebDomain = () => {
 							/>
 							<div>
 								<Button isLoading={isLoading} type="submit">
-									Save
+									{t("settings.common.save")}
 								</Button>
 							</div>
 						</form>
diff --git a/apps/dokploy/components/dashboard/settings/web-server.tsx b/apps/dokploy/components/dashboard/settings/web-server.tsx
index 188b3db8a..2ac88d9ae 100644
--- a/apps/dokploy/components/dashboard/settings/web-server.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server.tsx
@@ -7,6 +7,7 @@ import {
 } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
+import { useTranslation } from "next-i18next";
 import React from "react";
 import { ShowDokployActions } from "./servers/actions/show-dokploy-actions";
 import { ShowStorageActions } from "./servers/actions/show-storage-actions";
@@ -18,6 +19,7 @@ interface Props {
 	className?: string;
 }
 export const WebServer = ({ className }: Props) => {
+	const { t } = useTranslation("settings");
 	const { data } = api.admin.one.useQuery();
 
 	const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
@@ -25,8 +27,12 @@ export const WebServer = ({ className }: Props) => {
 	return (
 		<Card className={cn("rounded-lg w-full bg-transparent p-0", className)}>
 			<CardHeader>
-				<CardTitle className="text-xl">Web server settings</CardTitle>
-				<CardDescription>Reload or clean the web server.</CardDescription>
+				<CardTitle className="text-xl">
+					{t("settings.server.webServer.title")}
+				</CardTitle>
+				<CardDescription>
+					{t("settings.server.webServer.description")}
+				</CardDescription>
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4 ">
 				<div className="grid md:grid-cols-2 gap-4">
diff --git a/apps/dokploy/pages/dashboard/settings/server.tsx b/apps/dokploy/pages/dashboard/settings/server.tsx
index 4763114e1..c714acd83 100644
--- a/apps/dokploy/pages/dashboard/settings/server.tsx
+++ b/apps/dokploy/pages/dashboard/settings/server.tsx
@@ -3,9 +3,11 @@ import { WebServer } from "@/components/dashboard/settings/web-server";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { SettingsLayout } from "@/components/layouts/settings-layout";
 import { appRouter } from "@/server/api/root";
+import { getLocale } from "@/utils/i18n";
 import { IS_CLOUD, validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React, { type ReactElement } from "react";
 import superjson from "superjson";
 
@@ -31,6 +33,7 @@ export async function getServerSideProps(
 	ctx: GetServerSidePropsContext<{ serviceId: string }>,
 ) {
 	const { req, res } = ctx;
+	const locale = await getLocale(req.cookies);
 	if (IS_CLOUD) {
 		return {
 			redirect: {
@@ -73,6 +76,7 @@ export async function getServerSideProps(
 	return {
 		props: {
 			trpcState: helpers.dehydrate(),
+			...(await serverSideTranslations(locale, ["settings"])),
 		},
 	};
 }
diff --git a/apps/dokploy/public/locales/en/settings.json b/apps/dokploy/public/locales/en/settings.json
index c4f6f362f..10557f43a 100644
--- a/apps/dokploy/public/locales/en/settings.json
+++ b/apps/dokploy/public/locales/en/settings.json
@@ -3,6 +3,47 @@
 		"common": {
 			"save": "Save"
 		},
+		"server": {
+			"domain": {
+				"title": "Server Domain",
+				"description": "Add a domain to your server application.",
+				"form": {
+					"domain": "Domain",
+					"letsEncryptEmail": "Let's Encrypt Email",
+					"certificate": {
+						"label": "Certificate",
+						"placeholder": "Select a certificate"
+					},
+					"certificateOptions": {
+						"none": "None",
+						"letsencrypt": "Let's Encrypt (Default)"
+					}
+				}
+			},
+			"webServer": {
+				"title": "Web Server",
+				"description": "Reload or clean the web server.",
+				"actions": "Actions",
+				"reload": "Reload",
+				"watchLogs": "Watch logs",
+				"server": {
+					"label": "Server"
+				},
+				"traefik": {
+					"label": "Traefik",
+					"modifyEnv": "Modify Env"
+				},
+				"storage": {
+					"label": "Space",
+					"cleanUnusedImages": "Clean unused images",
+					"cleanUnusedVolumes": "Clean unused volumes",
+					"cleanStoppedContainers": "Clean stopped containers",
+					"cleanDockerBuilder": "Clean Docker Builder & System",
+					"cleanMonitoring": "Clean Monitoring",
+					"cleanAll": "Clean all"
+				}
+			}
+		},
 		"profile": {
 			"title": "Account",
 			"description": "Change the details of your profile here.",
diff --git a/apps/dokploy/public/locales/zh-Hans/settings.json b/apps/dokploy/public/locales/zh-Hans/settings.json
index d426bab64..79267f78d 100644
--- a/apps/dokploy/public/locales/zh-Hans/settings.json
+++ b/apps/dokploy/public/locales/zh-Hans/settings.json
@@ -3,6 +3,47 @@
 		"common": {
 			"save": "保存"
 		},
+		"server": {
+			"domain": {
+				"title": "服务器域名",
+				"description": "添加一个域名到您的服务器。",
+				"form": {
+					"domain": "域名",
+					"letsEncryptEmail": "Let's Encrypt 邮箱",
+					"certificate": {
+						"label": "证书",
+						"placeholder": "选择一个证书"
+					},
+					"certificateOptions": {
+						"none": "无",
+						"letsencrypt": "Let's Encrypt (默认)"
+					}
+				}
+			},
+			"webServer": {
+				"title": "Web 服务器",
+				"description": "管理 Web 服务器。",
+				"actions": "操作",
+				"reload": "重新加载",
+				"watchLogs": "查看日志",
+				"server": {
+					"label": "服务器"
+				},
+				"traefik": {
+					"label": "Traefik",
+					"modifyEnv": "修改环境变量"
+				},
+				"storage": {
+					"label": "磁盘空间",
+					"cleanUnusedImages": "清理未使用的镜像",
+					"cleanUnusedVolumes": "清理未使用的卷",
+					"cleanStoppedContainers": "清理停止的容器",
+					"cleanDockerBuilder": "清理 Docker Builder 和系统缓存",
+					"cleanMonitoring": "Clean Monitoring",
+					"cleanAll": "清理所有"
+				}
+			}
+		},
 		"profile": {
 			"title": "账户偏好",
 			"description": "更改您的个人资料详情。",

From b6fd410af26d647067b5b5016e10c7806a560bdd Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Tue, 12 Nov 2024 09:01:49 -0600
Subject: [PATCH 05/11] chore: add tag feature

---
 .circleci/config.yml | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 07991599a..194f5eb7f 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -18,8 +18,10 @@ jobs:
             docker login -u $DOCKERHUB_USERNAME -p $DOCKERHUB_TOKEN
             if [ "${CIRCLE_BRANCH}" == "main" ]; then
               TAG="latest"
-            else
+            elif [ "${CIRCLE_BRANCH}" == "canary" ]; then
               TAG="canary"
+            else
+              TAG="feature"
             fi
             docker build --platform linux/amd64 -t dokploy/dokploy:${TAG}-amd64 .
             docker push dokploy/dokploy:${TAG}-amd64
@@ -41,8 +43,10 @@ jobs:
             docker login -u $DOCKERHUB_USERNAME -p $DOCKERHUB_TOKEN
             if [ "${CIRCLE_BRANCH}" == "main" ]; then
               TAG="latest"
-            else
+            elif [ "${CIRCLE_BRANCH}" == "canary" ]; then
               TAG="canary"
+            else
+              TAG="feature"
             fi
             docker build --platform linux/arm64 -t dokploy/dokploy:${TAG}-arm64 .
             docker push dokploy/dokploy:${TAG}-arm64
@@ -72,12 +76,18 @@ jobs:
                 dokploy/dokploy:${TAG}-amd64 \
                 dokploy/dokploy:${TAG}-arm64
               docker manifest push dokploy/dokploy:${VERSION}
-            else
+            elif [ "${CIRCLE_BRANCH}" == "canary" ]; then
               TAG="canary"
               docker manifest create dokploy/dokploy:${TAG} \
                 dokploy/dokploy:${TAG}-amd64 \
                 dokploy/dokploy:${TAG}-arm64
               docker manifest push dokploy/dokploy:${TAG}
+            else
+              TAG="feature"
+              docker manifest create dokploy/dokploy:${TAG} \
+                dokploy/dokploy:${TAG}-amd64 \
+                dokploy/dokploy:${TAG}-arm64
+              docker manifest push dokploy/dokploy:${TAG}
             fi
 
 workflows:
@@ -89,12 +99,14 @@ workflows:
               only:
                 - main
                 - canary
+                - PaiJi:feat/i18n-support
       - build-arm64:
           filters:
             branches:
               only:
                 - main
                 - canary
+                - PaiJi:feat/i18n-support
       - combine-manifests:
           requires:
             - build-amd64
@@ -104,3 +116,4 @@ workflows:
               only:
                 - main
                 - canary
+                - PaiJi:feat/i18n-support

From 5cf12e51d11e11645ca23c8236ae591cd8763869 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Tue, 12 Nov 2024 09:02:44 -0600
Subject: [PATCH 06/11] chore: remove name

---
 .circleci/config.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 194f5eb7f..15be6968b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -99,14 +99,14 @@ workflows:
               only:
                 - main
                 - canary
-                - PaiJi:feat/i18n-support
+                - feat/i18n-support
       - build-arm64:
           filters:
             branches:
               only:
                 - main
                 - canary
-                - PaiJi:feat/i18n-support
+                - feat/i18n-support
       - combine-manifests:
           requires:
             - build-amd64
@@ -116,4 +116,4 @@ workflows:
               only:
                 - main
                 - canary
-                - PaiJi:feat/i18n-support
+                - feat/i18n-support

From b0f5e7dad38419c284a2c715969b6e0846b18b0f Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Tue, 12 Nov 2024 09:29:43 -0600
Subject: [PATCH 07/11] Update CONTRIBUTING.md

---
 CONTRIBUTING.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 07ad60225..1d38b97c4 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -18,6 +18,7 @@ Before you create a Pull Request, please make sure your commit message follows t
 
 ### Commit Message Format
 
+
 ```
 <type>[optional scope]: <description>
 

From a7165bef20708570b0becb59622909cfee9c6d47 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Tue, 12 Nov 2024 09:38:35 -0600
Subject: [PATCH 08/11] chore: set pull 665

---
 .circleci/config.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 15be6968b..f47a561a5 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -99,14 +99,14 @@ workflows:
               only:
                 - main
                 - canary
-                - feat/i18n-support
+                - pull/665
       - build-arm64:
           filters:
             branches:
               only:
                 - main
                 - canary
-                - feat/i18n-support
+                - pull/665
       - combine-manifests:
           requires:
             - build-amd64
@@ -116,4 +116,4 @@ workflows:
               only:
                 - main
                 - canary
-                - feat/i18n-support
+                - pull/665

From 96584e5b32a8eb4bec3a5653a12bb50a4f479262 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Tue, 12 Nov 2024 09:39:35 -0600
Subject: [PATCH 09/11] Update CONTRIBUTING.md

---
 CONTRIBUTING.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 1d38b97c4..c9d1049c4 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -14,6 +14,7 @@ We have a few guidelines to follow when contributing to this project:
 
 ## Commit Convention
 
+
 Before you create a Pull Request, please make sure your commit message follows the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
 
 ### Commit Message Format

From b376ead7b524bbfdf69d24c5d8d5050804a893d7 Mon Sep 17 00:00:00 2001
From: JiPai <github@jipai.moe>
Date: Wed, 13 Nov 2024 13:54:11 +0800
Subject: [PATCH 10/11] feat(i18n): use flat translation key

---
 apps/dokploy/next-i18next.config.js           |   1 +
 apps/dokploy/public/locales/en/settings.json  | 107 +++++++-----------
 .../public/locales/zh-Hans/settings.json      | 104 +++++++----------
 3 files changed, 80 insertions(+), 132 deletions(-)

diff --git a/apps/dokploy/next-i18next.config.js b/apps/dokploy/next-i18next.config.js
index 7e365819d..5c20bbea8 100644
--- a/apps/dokploy/next-i18next.config.js
+++ b/apps/dokploy/next-i18next.config.js
@@ -6,4 +6,5 @@ module.exports = {
 		localeDetection: false,
 	},
 	fallbackLng: "en",
+	keySeparator: false,
 };
diff --git a/apps/dokploy/public/locales/en/settings.json b/apps/dokploy/public/locales/en/settings.json
index 10557f43a..594323f4a 100644
--- a/apps/dokploy/public/locales/en/settings.json
+++ b/apps/dokploy/public/locales/en/settings.json
@@ -1,68 +1,43 @@
 {
-	"settings": {
-		"common": {
-			"save": "Save"
-		},
-		"server": {
-			"domain": {
-				"title": "Server Domain",
-				"description": "Add a domain to your server application.",
-				"form": {
-					"domain": "Domain",
-					"letsEncryptEmail": "Let's Encrypt Email",
-					"certificate": {
-						"label": "Certificate",
-						"placeholder": "Select a certificate"
-					},
-					"certificateOptions": {
-						"none": "None",
-						"letsencrypt": "Let's Encrypt (Default)"
-					}
-				}
-			},
-			"webServer": {
-				"title": "Web Server",
-				"description": "Reload or clean the web server.",
-				"actions": "Actions",
-				"reload": "Reload",
-				"watchLogs": "Watch logs",
-				"server": {
-					"label": "Server"
-				},
-				"traefik": {
-					"label": "Traefik",
-					"modifyEnv": "Modify Env"
-				},
-				"storage": {
-					"label": "Space",
-					"cleanUnusedImages": "Clean unused images",
-					"cleanUnusedVolumes": "Clean unused volumes",
-					"cleanStoppedContainers": "Clean stopped containers",
-					"cleanDockerBuilder": "Clean Docker Builder & System",
-					"cleanMonitoring": "Clean Monitoring",
-					"cleanAll": "Clean all"
-				}
-			}
-		},
-		"profile": {
-			"title": "Account",
-			"description": "Change the details of your profile here.",
-			"email": "Email",
-			"password": "Password",
-			"avatar": "Avatar"
-		},
-		"appearance": {
-			"title": "Appearance",
-			"description": "Customize the theme of your dashboard.",
-			"theme": "Theme",
-			"themeDescription": "Select a theme for your dashboard",
-			"themes": {
-				"light": "Light",
-				"dark": "Dark",
-				"system": "System"
-			},
-			"language": "Language",
-			"languageDescription": "Select a language for your dashboard"
-		}
-	}
+	"settings.common.save": "Save",
+	"settings.server.domain.title": "Server Domain",
+	"settings.server.domain.description": "Add a domain to your server application.",
+	"settings.server.domain.form.domain": "Domain",
+	"settings.server.domain.form.letsEncryptEmail": "Let's Encrypt Email",
+	"settings.server.domain.form.certificate.label": "Certificate",
+	"settings.server.domain.form.certificate.placeholder": "Select a certificate",
+	"settings.server.domain.form.certificateOptions.none": "None",
+	"settings.server.domain.form.certificateOptions.letsencrypt": "Let's Encrypt (Default)",
+
+	"settings.server.webServer.title": "Web Server",
+	"settings.server.webServer.description": "Reload or clean the web server.",
+	"settings.server.webServer.actions": "Actions",
+	"settings.server.webServer.reload": "Reload",
+	"settings.server.webServer.watchLogs": "Watch logs",
+	"settings.server.webServer.server.label": "Server",
+	"settings.server.webServer.traefik.label": "Traefik",
+	"settings.server.webServer.traefik.modifyEnv": "Modify Env",
+	"settings.server.webServer.storage.label": "Space",
+	"settings.server.webServer.storage.cleanUnusedImages": "Clean unused images",
+	"settings.server.webServer.storage.cleanUnusedVolumes": "Clean unused volumes",
+	"settings.server.webServer.storage.cleanStoppedContainers": "Clean stopped containers",
+	"settings.server.webServer.storage.cleanDockerBuilder": "Clean Docker Builder & System",
+	"settings.server.webServer.storage.cleanMonitoring": "Clean Monitoring",
+	"settings.server.webServer.storage.cleanAll": "Clean all",
+
+	"settings.profile.title": "Account",
+	"settings.profile.description": "Change the details of your profile here.",
+	"settings.profile.email": "Email",
+	"settings.profile.password": "Password",
+	"settings.profile.avatar": "Avatar",
+
+	"settings.appearance.title": "Appearance",
+	"settings.appearance.description": "Customize the theme of your dashboard.",
+	"settings.appearance.theme": "Theme",
+	"settings.appearance.themeDescription": "Select a theme for your dashboard",
+	"settings.appearance.themes.light": "Light",
+	"settings.appearance.themes.dark": "Dark",
+	"settings.appearance.themes.system": "System",
+	"settings.appearance.language": "Language",
+	"settings.appearance.languageDescription": "Select a language for your dashboard"
 }
diff --git a/apps/dokploy/public/locales/zh-Hans/settings.json b/apps/dokploy/public/locales/zh-Hans/settings.json
index 79267f78d..1b703b30b 100644
--- a/apps/dokploy/public/locales/zh-Hans/settings.json
+++ b/apps/dokploy/public/locales/zh-Hans/settings.json
@@ -1,68 +1,40 @@
 {
-	"settings": {
-		"common": {
-			"save": "保存"
-		},
-		"server": {
-			"domain": {
-				"title": "服务器域名",
-				"description": "添加一个域名到您的服务器。",
-				"form": {
-					"domain": "域名",
-					"letsEncryptEmail": "Let's Encrypt 邮箱",
-					"certificate": {
-						"label": "证书",
-						"placeholder": "选择一个证书"
-					},
-					"certificateOptions": {
-						"none": "无",
-						"letsencrypt": "Let's Encrypt (默认)"
-					}
-				}
-			},
-			"webServer": {
-				"title": "Web 服务器",
-				"description": "管理 Web 服务器。",
-				"actions": "操作",
-				"reload": "重新加载",
-				"watchLogs": "查看日志",
-				"server": {
-					"label": "服务器"
-				},
-				"traefik": {
-					"label": "Traefik",
-					"modifyEnv": "修改环境变量"
-				},
-				"storage": {
-					"label": "磁盘空间",
-					"cleanUnusedImages": "清理未使用的镜像",
-					"cleanUnusedVolumes": "清理未使用的卷",
-					"cleanStoppedContainers": "清理停止的容器",
-					"cleanDockerBuilder": "清理 Docker Builder 和系统缓存",
-					"cleanMonitoring": "Clean Monitoring",
-					"cleanAll": "清理所有"
-				}
-			}
-		},
-		"profile": {
-			"title": "账户偏好",
-			"description": "更改您的个人资料详情。",
-			"email": "电子邮件",
-			"password": "密码",
-			"avatar": "头像"
-		},
-		"appearance": {
-			"title": "外观",
-			"description": "自定义仪表板主题。",
-			"theme": "主题",
-			"themeDescription": "选择仪表板主题",
-			"themes": {
-				"light": "亮",
-				"dark": "暗",
-				"system": "系统"
-			},
-			"language": "语言",
-			"languageDescription": "选择仪表板语言"
-		}
-	}
+	"settings.common.save": "保存",
+	"settings.server.domain.title": "服务器域名",
+	"settings.server.domain.description": "添加一个域名到您的服务器。",
+	"settings.server.domain.form.domain": "域名",
+	"settings.server.domain.form.letsEncryptEmail": "Let's Encrypt 邮箱",
+	"settings.server.domain.form.certificate.label": "证书",
+	"settings.server.domain.form.certificate.placeholder": "选择一个证书",
+	"settings.server.domain.form.certificateOptions.none": "无",
+	"settings.server.domain.form.certificateOptions.letsencrypt": "Let's Encrypt (默认)",
+	"settings.server.webServer.title": "Web 服务器",
+	"settings.server.webServer.description": "管理 Web 服务器。",
+	"settings.server.webServer.actions": "操作",
+	"settings.server.webServer.reload": "重新加载",
+	"settings.server.webServer.watchLogs": "查看日志",
+	"settings.server.webServer.server.label": "服务器",
+	"settings.server.webServer.traefik.label": "Traefik",
+	"settings.server.webServer.traefik.modifyEnv": "修改环境变量",
+	"settings.server.webServer.storage.label": "磁盘空间",
+	"settings.server.webServer.storage.cleanUnusedImages": "清理未使用的镜像",
+	"settings.server.webServer.storage.cleanUnusedVolumes": "清理未使用的卷",
+	"settings.server.webServer.storage.cleanStoppedContainers": "清理停止的容器",
+	"settings.server.webServer.storage.cleanDockerBuilder": "清理 Docker Builder 和系统缓存",
+	"settings.server.webServer.storage.cleanMonitoring": "Clean Monitoring",
+	"settings.server.webServer.storage.cleanAll": "清理所有",
+	"settings.profile.title": "账户偏好",
+	"settings.profile.description": "更改您的个人资料详情。",
+	"settings.profile.email": "电子邮件",
+	"settings.profile.password": "密码",
+	"settings.profile.avatar": "头像",
+	"settings.appearance.title": "外观",
+	"settings.appearance.description": "自定义仪表板主题。",
+	"settings.appearance.theme": "主题",
+	"settings.appearance.themeDescription": "选择仪表板主题",
+	"settings.appearance.themes.light": "亮",
+	"settings.appearance.themes.dark": "暗",
+	"settings.appearance.themes.system": "系统",
+	"settings.appearance.language": "语言",
+	"settings.appearance.languageDescription": "选择仪表板语言"
 }

From fb0308fd608960d946e23f5f0da0c59ec8c309cb Mon Sep 17 00:00:00 2001
From: JiPai <github@jipai.moe>
Date: Wed, 13 Nov 2024 13:54:36 +0800
Subject: [PATCH 11/11] chore(config): add defaultI18nConfig to avoid state
 issue

---
 apps/dokploy/pages/_app.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/apps/dokploy/pages/_app.tsx b/apps/dokploy/pages/_app.tsx
index c8e00aca5..b5fcb1319 100644
--- a/apps/dokploy/pages/_app.tsx
+++ b/apps/dokploy/pages/_app.tsx
@@ -61,4 +61,21 @@ const MyApp = ({
 	);
 };
 
-export default api.withTRPC(appWithTranslation(MyApp));
+export default api.withTRPC(
+	appWithTranslation(
+		MyApp,
+		// keep this in sync with next-i18next.config.js
+		// if you want to know why don't just import the config file, this because next-i18next.config.js must be a CJS, but the rest of the code is ESM.
+		// Add the config here is due to the issue: https://github.com/i18next/next-i18next/issues/2259
+		// if one day every page is translated, we can safely remove this config.
+		{
+			i18n: {
+				defaultLocale: "en",
+				locales: ["en", "zh-Hans"],
+				localeDetection: false,
+			},
+			fallbackLng: "en",
+			keySeparator: false,
+		},
+	),
+);