feat: Add patches functionality

apps/dokploy/__test__/deploy/application.command.test.ts

@@ -28,6 +28,9 @@ vi.mock("@dokploy/server/db", () => {
 				applications: {
 					findFirst: vi.fn(),
 				},
+				patch: {
+					findMany: vi.fn().mockResolvedValue([]),
+				},
 			},
 		},
 	};

apps/dokploy/__test__/deploy/application.real.test.ts

@@ -29,6 +29,9 @@ vi.mock("@dokploy/server/db", () => {
 				applications: {
 					findFirst: vi.fn(),
 				},
+				patch: {
+					findMany: vi.fn().mockResolvedValue([]),
+				},
 			},
 		},
 	};

apps/dokploy/components/dashboard/application/patches/create-file-dialog.tsx

@@ -0,0 +1,107 @@
+import { FilePlus } from "lucide-react";
+import { useState } from "react";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+interface Props {
+	folderPath: string;
+	onCreate: (filename: string, content: string) => void;
+	onOpenChange: (open: boolean) => void;
+	alwaysVisible?: boolean;
+}
+
+export const CreateFileDialog = ({
+	folderPath,
+	onCreate,
+	onOpenChange,
+	alwaysVisible = false,
+}: Props) => {
+	const [filename, setFilename] = useState("");
+	const [content, setContent] = useState("");
+
+	const handleCreate = () => {
+		if (!filename.trim()) return;
+		onCreate(filename.trim(), content);
+		setFilename("");
+		setContent("");
+		onOpenChange(false);
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button
+					variant="ghost"
+					size="icon"
+					type="button"
+					className={`h-6 w-6 ${alwaysVisible ? "" : "opacity-0 group-hover:opacity-100"}`}
+					title="Create file"
+				>
+					<FilePlus className="h-3 w-3" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-2xl">
+				<form
+					onSubmit={(e) => {
+						e.preventDefault();
+						handleCreate();
+					}}
+				>
+					<DialogHeader>
+						<DialogTitle>Create file</DialogTitle>
+						<DialogDescription>
+							{folderPath ? `New file in ${folderPath}/` : "New file in root"}
+						</DialogDescription>
+					</DialogHeader>
+					<div className="space-y-4 py-4">
+						<div className="space-y-2">
+							<Label htmlFor="filename">Filename</Label>
+							<Input
+								id="filename"
+								placeholder="e.g. .env.example"
+								value={filename}
+								onChange={(e) => setFilename(e.target.value)}
+							/>
+						</div>
+						<div className="space-y-2">
+							<Label>Content</Label>
+							<div className="h-[200px] rounded-md border">
+								<CodeEditor
+									value={content}
+									onChange={(v) => setContent(v ?? "")}
+									className="h-full"
+									wrapperClassName="h-[200px]"
+									lineWrapping
+								/>
+							</div>
+						</div>
+					</div>
+					<DialogFooter>
+						<DialogClose asChild>
+							<Button variant="outline" type="button">
+								Cancel
+							</Button>
+						</DialogClose>
+						<DialogClose asChild>
+							<Button type="submit" disabled={!filename.trim()}>
+								Create
+							</Button>
+						</DialogClose>
+					</DialogFooter>
+				</form>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/application/patches/edit-patch-dialog.tsx

@@ -0,0 +1,102 @@
+import { Loader2, Pencil } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { api } from "@/utils/api";
+
+interface Props {
+	patchId: string;
+	entityId: string;
+	type: "application" | "compose";
+	onSuccess?: () => void;
+}
+
+export const EditPatchDialog = ({
+	patchId,
+	entityId,
+	type,
+	onSuccess,
+}: Props) => {
+	const { data: patch, isLoading: isPatchLoading } = api.patch.one.useQuery(
+		{ patchId },
+		{ enabled: !!patchId },
+	);
+	const [content, setContent] = useState("");
+
+	useEffect(() => {
+		if (patch) {
+			setContent(patch.content);
+		}
+	}, [patch]);
+
+	const utils = api.useUtils();
+	const updatePatch = api.patch.update.useMutation();
+
+	const handleSave = () => {
+		updatePatch
+			.mutateAsync({ patchId, content })
+			.then(() => {
+				toast.success("Patch saved");
+				utils.patch.byEntityId.invalidate({ id: entityId, type });
+				onSuccess?.();
+			})
+			.catch((err) => {
+				toast.error(err.message);
+			});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="ghost" size="icon" title="Edit patch">
+					<Pencil className="h-4 w-4" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-4xl max-h-[85vh] flex flex-col p-0">
+				<DialogHeader className="px-6 pt-6 pb-4">
+					<DialogTitle>Edit Patch</DialogTitle>
+					<DialogDescription>
+						{patch ? `Editing: ${patch.filePath}` : "Loading patch..."}
+					</DialogDescription>
+				</DialogHeader>
+				{isPatchLoading ? (
+					<div className="flex flex-1 items-center justify-center px-6 py-12">
+						<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+					</div>
+				) : (
+					<div className="flex-1 min-h-0 px-6 overflow-hidden flex flex-col">
+						<CodeEditor
+							value={content}
+							onChange={(value) => setContent(value ?? "")}
+							className="h-[400px] w-full"
+							wrapperClassName="h-[400px]"
+							lineWrapping
+						/>
+					</div>
+				)}
+				<DialogFooter className="px-6 ">
+					<DialogClose asChild>
+						<Button variant="outline">Cancel</Button>
+					</DialogClose>
+					<Button onClick={handleSave} isLoading={updatePatch.isLoading}>
+						{updatePatch.isPending && (
+							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+						)}
+						Save
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/application/patches/index.ts

@@ -0,0 +1,2 @@
+export * from "./show-patches";
+export * from "./patch-editor";