feat: add nickname field to web server settings

.vscode/settings.json

@@ -4,5 +4,8 @@
 	"editor.codeActionsOnSave": {
 		"source.fixAll.biome": "explicit",
 		"source.organizeImports.biome": "explicit"
+	},
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
 	}
 }

apps/dokploy/__test__/traefik/server/update-server-config.test.ts

@@ -24,6 +24,7 @@ const baseSettings: WebServerSettings = {
 	serverIp: null,
 	letsEncryptEmail: null,
 	sshPrivateKey: null,
+	nickname: null,
 	enableDockerCleanup: false,
 	logCleanupCron: null,
 	metricsConfig: {

apps/dokploy/components/dashboard/settings/web-domain.tsx

@@ -39,6 +39,10 @@ const addServerDomain = z
 		letsEncryptEmail: z.string(),
 		https: z.boolean().optional(),
 		certificateType: z.enum(["letsencrypt", "none", "custom"]),
+		nickname: z
+			.string()
+			.max(50, "Nickname must be 50 characters or less")
+			.optional(),
 	})
 	.superRefine((data, ctx) => {
 		if (data.https && !data.certificateType) {
@@ -75,6 +79,7 @@ export const WebDomain = () => {
 			certificateType: "none",
 			letsEncryptEmail: "",
 			https: false,
+			nickname: "",
 		},
 		resolver: zodResolver(addServerDomain),
 	});
@@ -89,6 +94,7 @@ export const WebDomain = () => {
 				certificateType: data?.certificateType || "none",
 				letsEncryptEmail: data?.letsEncryptEmail || "",
 				https: data?.https || false,
+				nickname: data?.nickname || "",
 			});
 		}
 	}, [form, form.reset, data]);
@@ -99,6 +105,7 @@ export const WebDomain = () => {
 			letsEncryptEmail: data.letsEncryptEmail,
 			certificateType: data.certificateType,
 			https: data.https,
+			nickname: data.nickname,
 		})
 			.then(async () => {
 				await refetch();
@@ -141,8 +148,30 @@ export const WebDomain = () => {
 						<Form {...form}>
 							<form
 								onSubmit={form.handleSubmit(onSubmit)}
-								className="grid w-full gap-4 md:grid-cols-2"
+								className="grid w-full gap-4 md:grid-cols-3"
 							>
+								<FormField
+									control={form.control}
+									name="nickname"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Nickname</FormLabel>
+												<FormControl>
+													<Input
+														className="w-full"
+														placeholder={"My Server"}
+														{...field}
+													/>
+												</FormControl>
+												<FormDescription className="text-xs">
+													Displayed in the browser tab title.
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
 								<FormField
 									control={form.control}
 									name="domain"
@@ -186,7 +215,7 @@ export const WebDomain = () => {
 									control={form.control}
 									name="https"
 									render={({ field }) => (
-										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm w-full col-span-2">
+										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm w-full col-span-3">
 											<div className="space-y-0.5">
 												<FormLabel>HTTPS</FormLabel>
 												<FormDescription>
@@ -209,7 +238,7 @@ export const WebDomain = () => {
 										name="certificateType"
 										render={({ field }) => {
 											return (
-												<FormItem className="md:col-span-2">
+												<FormItem className="md:col-span-3">
 													<FormLabel>Certificate Provider</FormLabel>
 													<Select
 														onValueChange={field.onChange}
@@ -234,7 +263,7 @@ export const WebDomain = () => {
 									/>
 								)}
 
-								<div className="flex w-full justify-end col-span-2">
+								<div className="flex w-full justify-end col-span-3">
 									<Button isLoading={isPending} type="submit">
 										Save
 									</Button>

apps/dokploy/drizzle/0148_furry_nightcrawler.sql

@@ -0,0 +1 @@
+ALTER TABLE "webServerSettings" ADD COLUMN "nickname" text;