Skip to content

Commit 3969d2d

Browse files
SiumauricioSiumauricio
authored
Merge pull request #3611 from Statsly-org/feat/application-icon-upload
Feat/application icon upload
2 parents 85c409e + b6ec2d5 commit 3969d2d

14 files changed

Lines changed: 9231 additions & 11 deletions

File tree

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ const baseApp: ApplicationNested = {
120120
environmentId: "",
121121
enabled: null,
122122
env: null,
123+
icon: null,
123124
healthCheckSwarm: null,
124125
labelsSwarm: null,
125126
memoryLimit: null,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ const baseApp: ApplicationNested = {
9595
dropBuildPath: null,
9696
enabled: null,
9797
env: null,
98+
icon: null,
9899
healthCheckSwarm: null,
99100
labelsSwarm: null,
100101
memoryLimit: null,

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

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
import DOMPurify from "dompurify";
2+
import { GlobeIcon, Pencil, Search, X } from "lucide-react";
3+
import { useEffect, useMemo, useState } from "react";
4+
import { toast } from "sonner";
5+
import { Button } from "@/components/ui/button";
6+
import {
7+
Dialog,
8+
DialogContent,
9+
DialogHeader,
10+
DialogTitle,
11+
DialogTrigger,
12+
} from "@/components/ui/dialog";
13+
import { Dropzone } from "@/components/ui/dropzone";
14+
import { Input } from "@/components/ui/input";
15+
import { type BundledIcon, bundledIcons } from "@/lib/bundled-icons";
16+
import { api } from "@/utils/api";
17+
18+
interface ShowIconSettingsProps {
19+
applicationId: string;
20+
icon?: string | null;
21+
}
22+
23+
const svgToDataUrl = (icon: BundledIcon): string => {
24+
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#${icon.hex}"><path d="${icon.path}"/></svg>`;
25+
return `data:image/svg+xml;base64,${btoa(svg)}`;
26+
};
27+
28+
export const ShowIconSettings = ({
29+
applicationId,
30+
icon,
31+
}: ShowIconSettingsProps) => {
32+
const [open, setOpen] = useState(false);
33+
const [iconSearchQuery, setIconSearchQuery] = useState("");
34+
const [iconsToShow, setIconsToShow] = useState(24);
35+
36+
const filteredIcons = useMemo(() => {
37+
if (!iconSearchQuery) return bundledIcons;
38+
const q = iconSearchQuery.toLowerCase();
39+
return bundledIcons.filter(
40+
(i) =>
41+
i.title.toLowerCase().includes(q) || i.slug.toLowerCase().includes(q),
42+
);
43+
}, [iconSearchQuery]);
44+
45+
const displayedIcons = filteredIcons.slice(0, iconsToShow);
46+
const hasMoreIcons = filteredIcons.length > iconsToShow;
47+
48+
const utils = api.useUtils();
49+
const { mutateAsync: updateApplication } =
50+
api.application.update.useMutation();
51+
52+
useEffect(() => {
53+
if (open) {
54+
setIconSearchQuery("");
55+
setIconsToShow(24);
56+
}
57+
}, [open]);
58+
59+
const handleIconSelect = async (selectedIcon: BundledIcon) => {
60+
try {
61+
const dataUrl = svgToDataUrl(selectedIcon);
62+
await updateApplication({
63+
applicationId,
64+
icon: dataUrl,
65+
});
66+
toast.success("Icon saved successfully");
67+
await utils.application.one.invalidate({ applicationId });
68+
setOpen(false);
69+
} catch (_error) {
70+
toast.error("Error saving icon");
71+
}
72+
};
73+
74+
const handleRemoveIcon = async () => {
75+
try {
76+
await updateApplication({
77+
applicationId,
78+
icon: null,
79+
});
80+
toast.success("Icon removed");
81+
await utils.application.one.invalidate({ applicationId });
82+
} catch (_error) {
83+
toast.error("Error removing icon");
84+
}
85+
};
86+
87+
const sanitizeSvg = (svgContent: string): string | null => {
88+
const clean = DOMPurify.sanitize(svgContent, {
89+
USE_PROFILES: { svg: true, svgFilters: true },
90+
ADD_TAGS: ["use"],
91+
});
92+
if (!clean) return null;
93+
return `data:image/svg+xml;base64,${btoa(clean)}`;
94+
};
95+
96+
const handleFileUpload = async (files: FileList | null) => {
97+
if (!files || files.length === 0) return;
98+
const file = files[0];
99+
if (!file) return;
100+
101+
const allowedTypes = [
102+
"image/jpeg",
103+
"image/jpg",
104+
"image/png",
105+
"image/svg+xml",
106+
];
107+
const fileExtension = file.name.split(".").pop()?.toLowerCase();
108+
const allowedExtensions = ["jpg", "jpeg", "png", "svg"];
109+
110+
if (
111+
!allowedTypes.includes(file.type) &&
112+
!allowedExtensions.includes(fileExtension || "")
113+
) {
114+
toast.error("Only JPG, JPEG, PNG, and SVG files are allowed");
115+
return;
116+
}
117+
118+
if (file.size > 2 * 1024 * 1024) {
119+
toast.error("Image size must be less than 2MB");
120+
return;
121+
}
122+
123+
const isSvg = file.type === "image/svg+xml" || fileExtension === "svg";
124+
125+
if (isSvg) {
126+
const text = await file.text();
127+
const sanitizedDataUrl = sanitizeSvg(text);
128+
if (!sanitizedDataUrl) {
129+
toast.error("Invalid SVG file");
130+
return;
131+
}
132+
try {
133+
await updateApplication({
134+
applicationId,
135+
icon: sanitizedDataUrl,
136+
});
137+
toast.success("Icon saved!");
138+
await utils.application.one.invalidate({ applicationId });
139+
setOpen(false);
140+
} catch (_error) {
141+
toast.error("Error saving icon");
142+
}
143+
return;
144+
}
145+
146+
const reader = new FileReader();
147+
reader.onload = async (event) => {
148+
const result = event.target?.result as string;
149+
try {
150+
await updateApplication({
151+
applicationId,
152+
icon: result,
153+
});
154+
toast.success("Icon saved!");
155+
await utils.application.one.invalidate({ applicationId });
156+
setOpen(false);
157+
} catch (_error) {
158+
toast.error("Error saving icon");
159+
}
160+
};
161+
reader.readAsDataURL(file);
162+
};
163+
164+
return (
165+
<Dialog open={open} onOpenChange={setOpen}>
166+
<DialogTrigger asChild>
167+
<button
168+
type="button"
169+
className="relative group flex items-center justify-center"
170+
>
171+
{icon ? (
172+
// biome-ignore lint/performance/noImgElement: icon is data URL or base64
173+
<img
174+
src={icon}
175+
alt="Application icon"
176+
className="h-8 w-8 object-contain"
177+
/>
178+
) : (
179+
<GlobeIcon className="h-6 w-6 text-muted-foreground" />
180+
)}
181+
<div className="absolute inset-0 flex items-center justify-center bg-black/50 rounded opacity-0 group-hover:opacity-100 transition-opacity">
182+
<Pencil className="h-3 w-3 text-white" />
183+
</div>
184+
</button>
185+
</DialogTrigger>
186+
<DialogContent className="max-w-2xl">
187+
<DialogHeader>
188+
<DialogTitle className="flex items-center justify-between">
189+
Change Icon
190+
{icon && (
191+
<Button
192+
variant="ghost"
193+
size="sm"
194+
onClick={handleRemoveIcon}
195+
className="text-muted-foreground"
196+
>
197+
<X className="size-4 mr-1" />
198+
Remove icon
199+
</Button>
200+
)}
201+
</DialogTitle>
202+
</DialogHeader>
203+
204+
<div className="space-y-4">
205+
<div className="relative">
206+
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
207+
<Input
208+
placeholder="Search icons (e.g. react, vue, docker)..."
209+
value={iconSearchQuery}
210+
onChange={(e) => setIconSearchQuery(e.target.value)}
211+
className="pl-9"
212+
/>
213+
</div>
214+
215+
<div className="max-h-[300px] overflow-y-auto border rounded-lg p-4">
216+
{displayedIcons.length === 0 ? (
217+
<div className="text-center py-8 text-sm text-muted-foreground">
218+
No icons found
219+
</div>
220+
) : (
221+
<>
222+
<div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
223+
{displayedIcons.map((i) => (
224+
<button
225+
type="button"
226+
key={i.slug}
227+
onClick={() => handleIconSelect(i)}
228+
className="flex flex-col items-center gap-1.5 p-2 rounded-lg border hover:border-primary hover:bg-muted transition-colors group"
229+
>
230+
<svg
231+
xmlns="http://www.w3.org/2000/svg"
232+
viewBox="0 0 24 24"
233+
className="size-7 group-hover:scale-110 transition-transform"
234+
fill={`#${i.hex}`}
235+
>
236+
<path d={i.path} />
237+
</svg>
238+
<span className="text-[10px] text-muted-foreground capitalize truncate w-full text-center">
239+
{i.title}
240+
</span>
241+
</button>
242+
))}
243+
</div>
244+
{hasMoreIcons && (
245+
<div className="flex justify-center mt-3">
246+
<Button
247+
variant="outline"
248+
size="sm"
249+
onClick={() => setIconsToShow((prev) => prev + 24)}
250+
>
251+
Load More ({filteredIcons.length - iconsToShow} remaining)
252+
</Button>
253+
</div>
254+
)}
255+
</>
256+
)}
257+
</div>
258+
259+
<div className="relative pt-3 border-t">
260+
<p className="text-sm text-muted-foreground text-center mb-3">
261+
or upload a custom icon
262+
</p>
263+
<Dropzone
264+
dropMessage="Drag & drop an icon or click to upload"
265+
accept=".jpg,.jpeg,.png,.svg,image/jpeg,image/png,image/svg+xml"
266+
onChange={handleFileUpload}
267+
classNameWrapper="border-2 border-dashed border-border hover:border-primary bg-muted/30 hover:bg-muted/50 transition-all rounded-lg"
268+
/>
269+
<div className="mt-2 text-center text-xs text-muted-foreground">
270+
Supported formats: JPG, JPEG, PNG, SVG (max 2MB)
271+
</div>
272+
</div>
273+
</div>
274+
</DialogContent>
275+
</Dialog>
276+
);
277+
};

‎apps/dokploy/drizzle/0162_happy_alex_wilder.sql‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
ALTER TABLE "application" ADD COLUMN "icon" text;

0 commit comments

Comments
 (0)