feat: discord decoration switch

apps/dokploy/components/dashboard/settings/notifications/add-notification.tsx

@@ -64,6 +64,7 @@ export const notificationSchema = z.discriminatedUnion("type", [
 		.object({
 			type: z.literal("discord"),
 			webhookUrl: z.string().min(1, { message: "Webhook URL is required" }),
+			decoration: z.boolean().default(true),
 		})
 		.merge(notificationBaseSchema),
 	z
@@ -195,6 +196,7 @@ export const AddNotification = () => {
 				dokployRestart: dokployRestart,
 				databaseBackup: databaseBackup,
 				webhookUrl: data.webhookUrl,
+				decoration: data.decoration,
 				name: data.name,
 				dockerCleanup: dockerCleanup,
 			});
@@ -397,23 +399,47 @@ export const AddNotification = () => {
 								)}
 
 								{type === "discord" && (
-									<FormField
-										control={form.control}
-										name="webhookUrl"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Webhook URL</FormLabel>
-												<FormControl>
-													<Input
-														placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
-														{...field}
-													/>
-												</FormControl>
+									<>
+										<FormField
+											control={form.control}
+											name="webhookUrl"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Webhook URL</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+															{...field}
+														/>
+													</FormControl>
 
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+
+										<FormField
+											control={form.control}
+											name="decoration"
+											defaultValue={true}
+											render={({ field }) => (
+												<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+													<div className="space-y-0.5">
+														<FormLabel>Decoration</FormLabel>
+														<FormDescription>
+															Decorate the notification with emojis.
+														</FormDescription>
+													</div>
+													<FormControl>
+														<Switch
+															checked={field.value}
+															onCheckedChange={field.onChange}
+														/>
+													</FormControl>
+												</FormItem>
+											)}
+										/>
+									</>
 								)}
 
 								{type === "email" && (

apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx

@@ -24,12 +24,12 @@ export const DeleteNotification = ({ notificationId }: Props) => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button 
-					variant="ghost" 
-					size="icon" 
+				<Button
+					variant="ghost"
+					size="icon"
 					className="h-9 w-9 group hover:bg-red-500/10"
 					isLoading={isLoading}
-					>
+				>
 					<Trash2 className="size-4 text-muted-foreground group-hover:text-red-500" />
 				</Button>
 			</AlertDialogTrigger>

apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx

@@ -40,58 +40,60 @@ export const ShowNotifications = () => {
 						</div>
 					) : (
 						<div className="flex flex-col gap-4">
-						<div className="grid lg:grid-cols-1 xl:grid-cols-2 gap-4">
-						  {data?.map((notification, index) => (
-							<div
-							  key={notification.notificationId}
-							  className="flex items-center justify-between rounded-xl p-4 transition-colors dark:bg-zinc-900/50 hover:bg-zinc-900 border border-zinc-800/50"
-							>
-							  <div className="flex items-center gap-4">
-								{notification.notificationType === "slack" && (
-								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
-									<SlackIcon className="h-6 w-6 text-indigo-400" />
-								  </div>
-								)}
-								{notification.notificationType === "telegram" && (
-								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10">
-									<TelegramIcon className="h-6 w-6 text-indigo-400" />
-								  </div>
-								)}
-								{notification.notificationType === "discord" && (
-								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
-									<DiscordIcon className="h-6 w-6 text-indigo-400" />
-								  </div>
-								)}
-								{notification.notificationType === "email" && (
-								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-500/10">
-									<Mail className="h-6 w-6 text-indigo-400" />
-								  </div>
-								)}
-								<div className="flex flex-col">
-								  <span className="text-sm font-medium text-zinc-300">
-									{notification.name}
-								  </span>
-								  <span className="text-xs font-medium text-muted-foreground">
-								  	{notification.notificationType?.[0]?.toUpperCase() + notification.notificationType?.slice(1)} notification
-								  </span>
-								</div>
-							  </div>
-							  <div className="flex items-center gap-2">
-								<UpdateNotification
-								  notificationId={notification.notificationId}
-								/>
-								<DeleteNotification
-								  notificationId={notification.notificationId}
-								/>
-							  </div>
+							<div className="grid lg:grid-cols-1 xl:grid-cols-2 gap-4">
+								{data?.map((notification, index) => (
+									<div
+										key={notification.notificationId}
+										className="flex items-center justify-between rounded-xl p-4 transition-colors dark:bg-zinc-900/50 hover:bg-zinc-900 border border-zinc-800/50"
+									>
+										<div className="flex items-center gap-4">
+											{notification.notificationType === "slack" && (
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
+													<SlackIcon className="h-6 w-6 text-indigo-400" />
+												</div>
+											)}
+											{notification.notificationType === "telegram" && (
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10">
+													<TelegramIcon className="h-6 w-6 text-indigo-400" />
+												</div>
+											)}
+											{notification.notificationType === "discord" && (
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
+													<DiscordIcon className="h-6 w-6 text-indigo-400" />
+												</div>
+											)}
+											{notification.notificationType === "email" && (
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-500/10">
+													<Mail className="h-6 w-6 text-indigo-400" />
+												</div>
+											)}
+											<div className="flex flex-col">
+												<span className="text-sm font-medium text-zinc-300">
+													{notification.name}
+												</span>
+												<span className="text-xs font-medium text-muted-foreground">
+													{notification.notificationType?.[0]?.toUpperCase() +
+														notification.notificationType?.slice(1)}{" "}
+													notification
+												</span>
+											</div>
+										</div>
+										<div className="flex items-center gap-2">
+											<UpdateNotification
+												notificationId={notification.notificationId}
+											/>
+											<DeleteNotification
+												notificationId={notification.notificationId}
+											/>
+										</div>
+									</div>
+								))}
+							</div>
+
+							<div className="flex flex-col gap-4 justify-end w-full items-end">
+								<AddNotification />
 							</div>
-						  ))}
 						</div>
-		  
-						<div className="flex flex-col gap-4 justify-end w-full items-end">
-						  <AddNotification />
-						</div>
-					  </div>
 					)}
 				</CardContent>
 			</Card>

apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx

@@ -28,7 +28,7 @@ import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Mail, Pen } from "lucide-react";
 import { useEffect, useState } from "react";
-import { FieldErrors, useFieldArray, useForm } from "react-hook-form";
+import { useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import {
 	type NotificationSchema,
@@ -113,6 +113,7 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 					databaseBackup: data.databaseBackup,
 					type: data.notificationType,
 					webhookUrl: data.discord?.webhookUrl,
+					decoration: data.discord?.decoration || undefined,
 					name: data.name,
 					dockerCleanup: data.dockerCleanup,
 				});
@@ -218,9 +219,7 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger className="" asChild>
-				<Button variant="ghost"
-                        size="icon"
-                        className="h-9 w-9">
+				<Button variant="ghost" size="icon" className="h-9 w-9">
 					<Pen className="size-4 text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
@@ -358,23 +357,47 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 								)}
 
 								{type === "discord" && (
-									<FormField
-										control={form.control}
-										name="webhookUrl"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Webhook URL</FormLabel>
-												<FormControl>
-													<Input
-														placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
-														{...field}
-													/>
-												</FormControl>
+									<>
+										<FormField
+											control={form.control}
+											name="webhookUrl"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Webhook URL</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+															{...field}
+														/>
+													</FormControl>
 
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+
+										<FormField
+											control={form.control}
+											name="decoration"
+											defaultValue={true}
+											render={({ field }) => (
+												<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+													<div className="space-y-0.5">
+														<FormLabel>Decoration</FormLabel>
+														<FormDescription>
+															Decorate the notification with emojis.
+														</FormDescription>
+													</div>
+													<FormControl>
+														<Switch
+															checked={field.value}
+															onCheckedChange={field.onChange}
+														/>
+													</FormControl>
+												</FormItem>
+											)}
+										/>
+									</>
 								)}
 								{type === "email" && (
 									<>