feat: enhance ShowIconSettings component with dialog and file upload functionality

- Updated the ShowIconSettings component to include a dialog for icon selection and upload.
- Added functionality to handle file uploads, including validation for file types and sizes.
- Implemented icon removal feature within the dialog.
- Refactored icon selection logic to improve user experience and maintainability.
- Adjusted the application page to integrate the updated ShowIconSettings component.

apps/dokploy/components/dashboard/application/icon/show-icon-settings.tsx

@@ -1,8 +1,15 @@
 import DOMPurify from "dompurify";
-import { Search, X } from "lucide-react";
+import { GlobeIcon, Pencil, Search, X } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
 import { Dropzone } from "@/components/ui/dropzone";
 import { Input } from "@/components/ui/input";
 import { type BundledIcon, bundledIcons } from "@/lib/bundled-icons";
@@ -10,6 +17,7 @@ import { api } from "@/utils/api";
 
 interface ShowIconSettingsProps {
 	applicationId: string;
+	icon?: string | null;
 }
 
 const svgToDataUrl = (icon: BundledIcon): string => {
@@ -17,8 +25,11 @@ const svgToDataUrl = (icon: BundledIcon): string => {
 	return `data:image/svg+xml;base64,${btoa(svg)}`;
 };
 
-export const ShowIconSettings = ({ applicationId }: ShowIconSettingsProps) => {
+export const ShowIconSettings = ({
-	const [uploadedIcon, setUploadedIcon] = useState<string | null>(null);
+	applicationId,
+	icon,
+}: ShowIconSettingsProps) => {
+	const [open, setOpen] = useState(false);
 	const [iconSearchQuery, setIconSearchQuery] = useState("");
 	const [iconsToShow, setIconsToShow] = useState(24);
 
@@ -26,50 +37,53 @@ export const ShowIconSettings = ({ applicationId }: ShowIconSettingsProps) => {
 		if (!iconSearchQuery) return bundledIcons;
 		const q = iconSearchQuery.toLowerCase();
 		return bundledIcons.filter(
-			(icon) =>
+			(i) =>
-				icon.title.toLowerCase().includes(q) ||
+				i.title.toLowerCase().includes(q) || i.slug.toLowerCase().includes(q),
-				icon.slug.toLowerCase().includes(q),
 		);
 	}, [iconSearchQuery]);
 
 	const displayedIcons = filteredIcons.slice(0, iconsToShow);
 	const hasMoreIcons = filteredIcons.length > iconsToShow;
 
-	const { data } = api.application.one.useQuery(
-		{ applicationId },
-		{ refetchInterval: 5000 },
-	);
 	const utils = api.useUtils();
 	const { mutateAsync: updateApplication } =
 		api.application.update.useMutation();
 
 	useEffect(() => {
-		if (data?.icon) {
+		if (open) {
-			setUploadedIcon(data.icon);
+			setIconSearchQuery("");
-		} else {
+			setIconsToShow(24);
-			setUploadedIcon(null);
 		}
-	}, [data?.icon]);
+	}, [open]);
 
-	useEffect(() => {
+	const handleIconSelect = async (selectedIcon: BundledIcon) => {
-		setIconsToShow(24);
-	}, [iconSearchQuery]);
-
-	const handleIconSelect = async (icon: BundledIcon) => {
 		try {
-			const dataUrl = svgToDataUrl(icon);
+			const dataUrl = svgToDataUrl(selectedIcon);
-			setUploadedIcon(dataUrl);
 			await updateApplication({
 				applicationId,
 				icon: dataUrl,
 			});
 			toast.success("Icon saved successfully");
 			await utils.application.one.invalidate({ applicationId });
+			setOpen(false);
 		} catch (_error) {
 			toast.error("Error saving icon");
 		}
 	};
 
+	const handleRemoveIcon = async () => {
+		try {
+			await updateApplication({
+				applicationId,
+				icon: null,
+			});
+			toast.success("Icon removed");
+			await utils.application.one.invalidate({ applicationId });
+		} catch (_error) {
+			toast.error("Error removing icon");
+		}
+	};
+
 	const sanitizeSvg = (svgContent: string): string | null => {
 		const clean = DOMPurify.sanitize(svgContent, {
 			USE_PROFILES: { svg: true, svgFilters: true },
@@ -79,190 +93,185 @@ export const ShowIconSettings = ({ applicationId }: ShowIconSettingsProps) => {
 		return `data:image/svg+xml;base64,${btoa(clean)}`;
 	};
 
+	const handleFileUpload = async (files: FileList | null) => {
+		if (!files || files.length === 0) return;
+		const file = files[0];
+		if (!file) return;
+
+		const allowedTypes = [
+			"image/jpeg",
+			"image/jpg",
+			"image/png",
+			"image/svg+xml",
+		];
+		const fileExtension = file.name.split(".").pop()?.toLowerCase();
+		const allowedExtensions = ["jpg", "jpeg", "png", "svg"];
+
+		if (
+			!allowedTypes.includes(file.type) &&
+			!allowedExtensions.includes(fileExtension || "")
+		) {
+			toast.error("Only JPG, JPEG, PNG, and SVG files are allowed");
+			return;
+		}
+
+		if (file.size > 2 * 1024 * 1024) {
+			toast.error("Image size must be less than 2MB");
+			return;
+		}
+
+		const isSvg = file.type === "image/svg+xml" || fileExtension === "svg";
+
+		if (isSvg) {
+			const text = await file.text();
+			const sanitizedDataUrl = sanitizeSvg(text);
+			if (!sanitizedDataUrl) {
+				toast.error("Invalid SVG file");
+				return;
+			}
+			try {
+				await updateApplication({
+					applicationId,
+					icon: sanitizedDataUrl,
+				});
+				toast.success("Icon saved!");
+				await utils.application.one.invalidate({ applicationId });
+				setOpen(false);
+			} catch (_error) {
+				toast.error("Error saving icon");
+			}
+			return;
+		}
+
+		const reader = new FileReader();
+		reader.onload = async (event) => {
+			const result = event.target?.result as string;
+			try {
+				await updateApplication({
+					applicationId,
+					icon: result,
+				});
+				toast.success("Icon saved!");
+				await utils.application.one.invalidate({ applicationId });
+				setOpen(false);
+			} catch (_error) {
+				toast.error("Error saving icon");
+			}
+		};
+		reader.readAsDataURL(file);
+	};
+
 	return (
-		<div className="flex flex-col gap-4 pt-2.5">
+		<Dialog open={open} onOpenChange={setOpen}>
-			{uploadedIcon && (
+			<DialogTrigger asChild>
-				<div className="flex items-center gap-4 p-4 rounded-lg bg-background border">
+				<button
-					{/* biome-ignore lint/performance/noImgElement: icon is data URL */}
+					type="button"
-					<img
+					className="relative group flex items-center justify-center"
-						src={uploadedIcon}
+				>
-						alt="Uploaded icon"
+					{icon ? (
-						className="size-20 object-contain rounded-lg border border-border bg-muted/50 p-2"
+						// biome-ignore lint/performance/noImgElement: icon is data URL or base64
-					/>
+						<img
-					<div className="flex-1">
+							src={icon}
-						<p className="text-sm font-medium">Icon uploaded</p>
+							alt="Application icon"
-						<p className="text-xs text-muted-foreground mt-1">
+							className="h-8 w-8 object-contain"
-							This icon will appear in service cards
+						/>
-						</p>
-					</div>
-					<Button
-						variant="ghost"
-						size="icon"
-						onClick={async () => {
-							try {
-								await updateApplication({
-									applicationId,
-									icon: null,
-								});
-								setUploadedIcon(null);
-								toast.success("Icon removed");
-								await utils.application.one.invalidate({
-									applicationId,
-								});
-							} catch (_error) {
-								toast.error("Error removing icon");
-							}
-						}}
-					>
-						<X className="size-4" />
-					</Button>
-				</div>
-			)}
-
-			<div className="space-y-4">
-				<div className="relative">
-					<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-					<Input
-						placeholder="Search icons (e.g. react, vue, docker)..."
-						value={iconSearchQuery}
-						onChange={(e) => setIconSearchQuery(e.target.value)}
-						className="pl-9"
-					/>
-				</div>
-
-				<div className="max-h-[400px] overflow-y-auto border rounded-lg p-4">
-					{displayedIcons.length === 0 ? (
-						<div className="text-center py-8 text-sm text-muted-foreground">
-							No icons found
-						</div>
 					) : (
-						<>
+						<GlobeIcon className="h-6 w-6 text-muted-foreground" />
-							<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-3">
-								{displayedIcons.map((icon) => (
-									<button
-										type="button"
-										key={icon.slug}
-										onClick={() => handleIconSelect(icon)}
-										className="flex flex-col items-center gap-2 p-3 rounded-lg border hover:border-primary hover:bg-muted transition-colors group"
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 24 24"
-											className="size-8 group-hover:scale-110 transition-transform"
-											fill={`#${icon.hex}`}
-										>
-											<path d={icon.path} />
-										</svg>
-										<span className="text-xs text-muted-foreground capitalize truncate w-full text-center">
-											{icon.title}
-										</span>
-									</button>
-								))}
-							</div>
-							{hasMoreIcons && (
-								<div className="flex justify-center mt-4">
-									<Button
-										variant="outline"
-										onClick={() => setIconsToShow((prev) => prev + 24)}
-									>
-										Load More ({filteredIcons.length - iconsToShow} remaining)
-									</Button>
-								</div>
-							)}
-						</>
 					)}
-				</div>
+					<div className="absolute inset-0 flex items-center justify-center bg-black/50 rounded opacity-0 group-hover:opacity-100 transition-opacity">
+						<Pencil className="h-3 w-3 text-white" />
+					</div>
+				</button>
+			</DialogTrigger>
+			<DialogContent className="max-w-2xl">
+				<DialogHeader>
+					<DialogTitle className="flex items-center justify-between">
+						Change Icon
+						{icon && (
+							<Button
+								variant="ghost"
+								size="sm"
+								onClick={handleRemoveIcon}
+								className="text-muted-foreground"
+							>
+								<X className="size-4 mr-1" />
+								Remove icon
+							</Button>
+						)}
+					</DialogTitle>
+				</DialogHeader>
 
-				<div className="relative pt-4 border-t">
+				<div className="space-y-4">
-					<p className="text-sm text-muted-foreground text-center mb-4">
+					<div className="relative">
-						or upload a custom icon
+						<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-					</p>
+						<Input
-					<div className="[&>div>div]:!h-32 [&>div>div]:!py-4 [&>div>div]:!px-6 [&>div>div>div]:!flex [&>div>div>div]:!flex-col [&>div>div>div]:!items-center [&>div>div>div]:!gap-2 [&>div>div>div>span]:!text-sm [&>div>div>div>span>svg]:!size-8">
+							placeholder="Search icons (e.g. react, vue, docker)..."
+							value={iconSearchQuery}
+							onChange={(e) => setIconSearchQuery(e.target.value)}
+							className="pl-9"
+						/>
+					</div>
+
+					<div className="max-h-[300px] overflow-y-auto border rounded-lg p-4">
+						{displayedIcons.length === 0 ? (
+							<div className="text-center py-8 text-sm text-muted-foreground">
+								No icons found
+							</div>
+						) : (
+							<>
+								<div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
+									{displayedIcons.map((i) => (
+										<button
+											type="button"
+											key={i.slug}
+											onClick={() => handleIconSelect(i)}
+											className="flex flex-col items-center gap-1.5 p-2 rounded-lg border hover:border-primary hover:bg-muted transition-colors group"
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 24 24"
+												className="size-7 group-hover:scale-110 transition-transform"
+												fill={`#${i.hex}`}
+											>
+												<path d={i.path} />
+											</svg>
+											<span className="text-[10px] text-muted-foreground capitalize truncate w-full text-center">
+												{i.title}
+											</span>
+										</button>
+									))}
+								</div>
+								{hasMoreIcons && (
+									<div className="flex justify-center mt-3">
+										<Button
+											variant="outline"
+											size="sm"
+											onClick={() => setIconsToShow((prev) => prev + 24)}
+										>
+											Load More ({filteredIcons.length - iconsToShow} remaining)
+										</Button>
+									</div>
+								)}
+							</>
+						)}
+					</div>
+
+					<div className="relative pt-3 border-t">
+						<p className="text-sm text-muted-foreground text-center mb-3">
+							or upload a custom icon
+						</p>
 						<Dropzone
 							dropMessage="Drag & drop an icon or click to upload"
 							accept=".jpg,.jpeg,.png,.svg,image/jpeg,image/png,image/svg+xml"
-							onChange={async (files) => {
+							onChange={handleFileUpload}
-								if (!files || files.length === 0) return;
-								const file = files[0];
-								if (!file) return;
-
-								const allowedTypes = [
-									"image/jpeg",
-									"image/jpg",
-									"image/png",
-									"image/svg+xml",
-								];
-								const fileExtension = file.name.split(".").pop()?.toLowerCase();
-								const allowedExtensions = ["jpg", "jpeg", "png", "svg"];
-
-								if (
-									!allowedTypes.includes(file.type) &&
-									!allowedExtensions.includes(fileExtension || "")
-								) {
-									toast.error("Only JPG, JPEG, PNG, and SVG files are allowed");
-									return;
-								}
-
-								if (file.size > 2 * 1024 * 1024) {
-									toast.error("Image size must be less than 2MB");
-									return;
-								}
-
-								const isSvg =
-									file.type === "image/svg+xml" || fileExtension === "svg";
-
-								if (isSvg) {
-									const text = await file.text();
-									const sanitizedDataUrl = sanitizeSvg(text);
-									if (!sanitizedDataUrl) {
-										toast.error("Invalid SVG file");
-										return;
-									}
-									setUploadedIcon(sanitizedDataUrl);
-									try {
-										await updateApplication({
-											applicationId,
-											icon: sanitizedDataUrl,
-										});
-										toast.success("Icon saved!");
-										await utils.application.one.invalidate({
-											applicationId,
-										});
-									} catch (_error) {
-										toast.error("Error saving icon");
-										setUploadedIcon(null);
-									}
-									return;
-								}
-
-								const reader = new FileReader();
-								reader.onload = async (event) => {
-									const result = event.target?.result as string;
-									setUploadedIcon(result);
-									try {
-										await updateApplication({
-											applicationId,
-											icon: result,
-										});
-										toast.success("Icon saved!");
-										await utils.application.one.invalidate({
-											applicationId,
-										});
-									} catch (_error) {
-										toast.error("Error saving icon");
-										setUploadedIcon(null);
-									}
-								};
-								reader.readAsDataURL(file);
-							}}
 							classNameWrapper="border-2 border-dashed border-border hover:border-primary bg-muted/30 hover:bg-muted/50 transition-all rounded-lg"
 						/>
-					</div>
+						<div className="mt-2 text-center text-xs text-muted-foreground">
-					<div className="mt-3 text-center text-xs text-muted-foreground">
+							Supported formats: JPG, JPEG, PNG, SVG (max 2MB)
-						Supported formats: JPG, JPEG, PNG, SVG (max 2MB)
+						</div>
 					</div>
 				</div>
-			</div>
+			</DialogContent>
-		</div>
+		</Dialog>
 	);
 };

apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx

@@ -1,7 +1,7 @@
 import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import copy from "copy-to-clipboard";
-import { GlobeIcon, HelpCircle, ServerOff } from "lucide-react";
+import { HelpCircle, ServerOff } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -25,12 +25,12 @@ import { ShowDeployments } from "@/components/dashboard/application/deployments/
 import { ShowDomains } from "@/components/dashboard/application/domains/show-domains";
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show";
 import { ShowGeneralApplication } from "@/components/dashboard/application/general/show";
+import { ShowIconSettings } from "@/components/dashboard/application/icon/show-icon-settings";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
 import { ShowPatches } from "@/components/dashboard/application/patches/show-patches";
 import { ShowPreviewDeployments } from "@/components/dashboard/application/preview-deployments/show-preview-deployments";
 import { ShowSchedules } from "@/components/dashboard/application/schedules/show-schedules";
 import { UpdateApplication } from "@/components/dashboard/application/update-application";
-import { ShowIconSettings } from "@/components/dashboard/application/icon/show-icon-settings";
 import { ShowVolumeBackups } from "@/components/dashboard/application/volume-backups/show-volume-backups";
 import { DeleteService } from "@/components/dashboard/compose/delete-service";
 import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
@@ -39,7 +39,6 @@ import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -125,20 +124,13 @@ const Service = (
 							<div className="flex flex-col">
 								<CardTitle className="text-xl flex flex-row gap-2 items-center">
 									<div className="relative flex flex-row gap-4 items-center">
-										<div className="absolute -right-1 -top-2">
+										<ShowIconSettings
+											applicationId={applicationId}
+											icon={data?.icon}
+										/>
+										<div className="absolute -right-1 -top-2 z-10">
 											<StatusTooltip status={data?.applicationStatus} />
 										</div>
-
-										{data?.icon ? (
-											// biome-ignore lint/performance/noImgElement: icon is data URL or base64; Next/Image not suited for dynamic inline icons
-											<img
-												src={data.icon}
-												alt={data.name}
-												className="h-8 w-8 object-contain"
-											/>
-										) : (
-											<GlobeIcon className="h-6 w-6 text-muted-foreground" />
-										)}
 									</div>
 									{data?.name}
 								</CardTitle>
@@ -281,7 +273,6 @@ const Service = (
 											{permissions?.service.create && (
 												<TabsTrigger value="advanced">Advanced</TabsTrigger>
 											)}
-											<TabsTrigger value="icon">Icon</TabsTrigger>
 										</TabsList>
 									</div>
 
@@ -431,9 +422,6 @@ const Service = (
 											</div>
 										</TabsContent>
 									)}
-									<TabsContent value="icon">
-										<ShowIconSettings applicationId={applicationId} />
-									</TabsContent>
 								</Tabs>
 							)}
 						</CardContent>