Merge pull request #3611 from Statsly-org/feat/application-icon-upload

Feat/application icon upload

apps/dokploy/__test__/drop/drop.test.ts

@@ -120,6 +120,7 @@ const baseApp: ApplicationNested = {
 	environmentId: "",
 	enabled: null,
 	env: null,
+	icon: null,
 	healthCheckSwarm: null,
 	labelsSwarm: null,
 	memoryLimit: null,

apps/dokploy/__test__/traefik/traefik.test.ts

@@ -95,6 +95,7 @@ const baseApp: ApplicationNested = {
 	dropBuildPath: null,
 	enabled: null,
 	env: null,
+	icon: null,
 	healthCheckSwarm: null,
 	labelsSwarm: null,
 	memoryLimit: null,

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

@@ -0,0 +1,277 @@
+import DOMPurify from "dompurify";
+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";
+import { api } from "@/utils/api";
+
+interface ShowIconSettingsProps {
+	applicationId: string;
+	icon?: string | null;
+}
+
+const svgToDataUrl = (icon: BundledIcon): string => {
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#${icon.hex}"><path d="${icon.path}"/></svg>`;
+	return `data:image/svg+xml;base64,${btoa(svg)}`;
+};
+
+export const ShowIconSettings = ({
+	applicationId,
+	icon,
+}: ShowIconSettingsProps) => {
+	const [open, setOpen] = useState(false);
+	const [iconSearchQuery, setIconSearchQuery] = useState("");
+	const [iconsToShow, setIconsToShow] = useState(24);
+
+	const filteredIcons = useMemo(() => {
+		if (!iconSearchQuery) return bundledIcons;
+		const q = iconSearchQuery.toLowerCase();
+		return bundledIcons.filter(
+			(i) =>
+				i.title.toLowerCase().includes(q) || i.slug.toLowerCase().includes(q),
+		);
+	}, [iconSearchQuery]);
+
+	const displayedIcons = filteredIcons.slice(0, iconsToShow);
+	const hasMoreIcons = filteredIcons.length > iconsToShow;
+
+	const utils = api.useUtils();
+	const { mutateAsync: updateApplication } =
+		api.application.update.useMutation();
+
+	useEffect(() => {
+		if (open) {
+			setIconSearchQuery("");
+			setIconsToShow(24);
+		}
+	}, [open]);
+
+	const handleIconSelect = async (selectedIcon: BundledIcon) => {
+		try {
+			const dataUrl = svgToDataUrl(selectedIcon);
+			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 },
+			ADD_TAGS: ["use"],
+		});
+		if (!clean) return null;
+		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 (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<button
+					type="button"
+					className="relative group flex items-center justify-center"
+				>
+					{icon ? (
+						// biome-ignore lint/performance/noImgElement: icon is data URL or base64
+						<img
+							src={icon}
+							alt="Application icon"
+							className="h-8 w-8 object-contain"
+						/>
+					) : (
+						<GlobeIcon className="h-6 w-6 text-muted-foreground" />
+					)}
+					<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="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-[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={handleFileUpload}
+							classNameWrapper="border-2 border-dashed border-border hover:border-primary bg-muted/30 hover:bg-muted/50 transition-all rounded-lg"
+						/>
+						<div className="mt-2 text-center text-xs text-muted-foreground">
+							Supported formats: JPG, JPEG, PNG, SVG (max 2MB)
+						</div>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/drizzle/0162_happy_alex_wilder.sql

@@ -0,0 +1 @@
+ALTER TABLE "application" ADD COLUMN "icon" text;

apps/dokploy/drizzle/meta/_journal.json

@@ -1135,6 +1135,13 @@
       "when": 1775317611429,
       "tag": "0161_solid_newton_destine",
       "breakpoints": true
+    },
+    {
+      "idx": 162,
+      "version": "7",
+      "when": 1775348977418,
+      "tag": "0162_happy_alex_wilder",
+      "breakpoints": true
     }
   ]
 }

apps/dokploy/package.json

@@ -110,6 +110,7 @@
 		"copy-to-clipboard": "^3.3.3",
 		"date-fns": "3.6.0",
 		"dockerode": "4.0.2",
+		"dompurify": "^3.3.3",
 		"dotenv": "16.4.5",
 		"drizzle-orm": "0.45.1",
 		"drizzle-zod": "0.8.3",
@@ -163,6 +164,7 @@
 	"devDependencies": {
 		"@types/adm-zip": "^0.5.7",
 		"@types/bcrypt": "5.0.2",
+		"@types/dompurify": "^3.2.0",
 		"@types/js-cookie": "^3.0.6",
 		"@types/lodash": "4.17.4",
 		"@types/micromatch": "4.0.9",
@@ -182,6 +184,7 @@
 		"esbuild": "0.20.2",
 		"lint-staged": "^15.5.2",
 		"memfs": "^4.17.2",
+		"simple-icons": "^16.14.0",
 		"tailwindcss": "^3.4.17",
 		"tsx": "^4.16.2",
 		"typescript": "^5.8.3",

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

@@ -119,6 +119,7 @@ export type Services = {
 	createdAt: string;
 	status?: "idle" | "running" | "done" | "error";
 	lastDeployDate?: Date | null;
+	icon?: string | null;
 };
 
 type Environment = Awaited<ReturnType<typeof findEnvironmentById>>;
@@ -157,6 +158,7 @@ export const extractServicesFromEnvironment = (
 				serverId: item.serverId,
 				serverName: item?.server?.name || null,
 				lastDeployDate,
+				icon: item.icon || null,
 			};
 		}) || [];
 
@@ -1536,9 +1538,17 @@ const EnvironmentPage = (
 																			{service.type === "mysql" && (
 																				<MysqlIcon className="h-7 w-7" />
 																			)}
-																			{service.type === "application" && (
-																				<GlobeIcon className="h-6 w-6" />
-																			)}
+																			{service.type === "application" &&
+																				(service.icon ? (
+																					// biome-ignore lint/performance/noImgElement: application icon is data URL
+																					<img
+																						src={service.icon}
+																						alt={service.name}
+																						className="size-7 object-contain"
+																					/>
+																				) : (
+																					<GlobeIcon className="h-6 w-6" />
+																				))}
 																			{service.type === "compose" && (
 																				<CircuitBoard className="h-6 w-6" />
 																			)}

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,6 +25,7 @@ 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";
@@ -66,7 +67,8 @@ type TabState =
 	| "domains"
 	| "monitoring"
 	| "preview-deployments"
-	| "volume-backups";
+	| "volume-backups"
+	| "icon";
 
 const Service = (
 	props: InferGetServerSidePropsType<typeof getServerSideProps>,
@@ -120,13 +122,15 @@ const Service = (
 					<div className="rounded-xl bg-background shadow-md ">
 						<CardHeader className="flex flex-row justify-between items-center">
 							<div className="flex flex-col">
-								<CardTitle className="text-xl flex flex-row gap-2">
-									<div className="relative flex flex-row gap-4">
-										<div className="absolute -right-1 -top-2">
+								<CardTitle className="text-xl flex flex-row gap-2 items-center">
+									<div className="relative flex flex-row gap-4 items-center">
+										<ShowIconSettings
+											applicationId={applicationId}
+											icon={data?.icon}
+										/>
+										<div className="absolute -right-1 -top-2 z-10">
 											<StatusTooltip status={data?.applicationStatus} />
 										</div>
-
-										<GlobeIcon className="h-6 w-6 text-muted-foreground" />
 									</div>
 									{data?.name}
 								</CardTitle>

biome.json

@@ -1,5 +1,10 @@
 {
 	"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
 	"files": {
 		"ignoreUnknown": true,
 		"includes": [
@@ -10,7 +15,8 @@
 			"!**/drizzle/**",
 			"!node_modules/**",
 			"!packages/server/package.json"
-		]
+		],
+		"maxSize": 2097152
 	},
 	"assist": { "actions": { "source": { "organizeImports": "on" } } },
 	"linter": {

packages/server/src/db/schema/application.ts

@@ -115,6 +115,7 @@ export const applications = pgTable("application", {
 	subtitle: text("subtitle"),
 	command: text("command"),
 	args: text("args").array(),
+	icon: text("icon"),
 	refreshToken: text("refreshToken").$defaultFn(() => nanoid()),
 	sourceType: sourceType("sourceType").notNull().default("github"),
 	cleanCache: boolean("cleanCache").default(false),
@@ -372,6 +373,11 @@ const createSchema = createInsertSchema(applications, {
 	endpointSpecSwarm: EndpointSpecSwarmSchema.nullable(),
 	ulimitsSwarm: UlimitsSwarmSchema.nullable(),
 	enableSubmodules: z.boolean().optional(),
+	icon: z
+		.string()
+		.max(2 * 1024 * 1024, "Icon must be less than 2MB")
+		.nullable()
+		.optional(),
 });
 
 export const apiCreateApplication = createSchema.pick({

packages/server/src/services/environment.ts

@@ -59,6 +59,7 @@ export const findEnvironmentById = async (environmentId: string) => {
 					applicationStatus: true,
 					description: true,
 					serverId: true,
+					icon: true,
 				},
 			},
 			mariadb: {

pnpm-lock.yaml

@@ -305,6 +305,9 @@ importers:
       dockerode:
         specifier: 4.0.2
         version: 4.0.2
+      dompurify:
+        specifier: ^3.3.3
+        version: 3.3.3
       dotenv:
         specifier: 16.4.5
         version: 16.4.5
@@ -459,6 +462,9 @@ importers:
       '@types/bcrypt':
         specifier: 5.0.2
         version: 5.0.2
+      '@types/dompurify':
+        specifier: ^3.2.0
+        version: 3.2.0
       '@types/js-cookie':
         specifier: ^3.0.6
         version: 3.0.6
@@ -516,6 +522,9 @@ importers:
       memfs:
         specifier: ^4.17.2
         version: 4.56.10(tslib@2.8.1)
+      simple-icons:
+        specifier: ^16.14.0
+        version: 16.14.0
       tailwindcss:
         specifier: ^3.4.17
         version: 3.4.19(tsx@4.16.2)(yaml@2.8.1)
@@ -3968,6 +3977,10 @@ packages:
   '@types/dockerode@3.3.23':
     resolution: {integrity: sha512-Lz5J+NFgZS4cEVhquwjIGH4oQwlVn2h7LXD3boitujBnzOE5o7s9H8hchEjoDK2SlRsJTogdKnQeiJgPPKLIEw==}
 
+  '@types/dompurify@3.2.0':
+    resolution: {integrity: sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==}
+    deprecated: This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.
+
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
@@ -5059,6 +5072,9 @@ packages:
   dompurify@3.2.6:
     resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==}
 
+  dompurify@3.3.3:
+    resolution: {integrity: sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==}
+
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
@@ -7501,6 +7517,10 @@ packages:
   simple-get@4.0.1:
     resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
 
+  simple-icons@16.14.0:
+    resolution: {integrity: sha512-2Nvs3jJpCfMWQerD4zdv91g/MpnWn81a7uhyAC0reuhrjmS2MtSmwIKwewOJR6Xe97ZmfltDntCDqKJIBawQOw==}
+    engines: {node: '>=0.12.18'}
+
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -12022,6 +12042,10 @@ snapshots:
       '@types/docker-modem': 3.0.6
       '@types/node': 24.10.13
 
+  '@types/dompurify@3.2.0':
+    dependencies:
+      dompurify: 3.3.3
+
   '@types/estree-jsx@1.0.5':
     dependencies:
       '@types/estree': 1.0.8
@@ -13118,6 +13142,10 @@ snapshots:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
+  dompurify@3.3.3:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@3.2.2:
     dependencies:
       dom-serializer: 2.0.0
@@ -15673,6 +15701,8 @@ snapshots:
       once: 1.4.0
       simple-concat: 1.0.1
 
+  simple-icons@16.14.0: {}
+
   sisteransi@1.0.5: {}
 
   slash@3.0.0: {}