feat(patch-dialog): add EditPatchDialog component for editing patches

- Introduced the EditPatchDialog component to facilitate patch editing within the dashboard.
- Integrated the dialog into the ShowPatches component, allowing users to edit patches directly from the list view.
- Enhanced user experience with loading indicators and success/error notifications during patch updates.
- Updated the UI to ensure consistent styling and behavior across patch management features.

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/show-patches.tsx

@@ -19,6 +19,7 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 import { api } from "@/utils/api";
+import { EditPatchDialog } from "./edit-patch-dialog";
 import { PatchEditor } from "./patch-editor";
 
 interface Props {
@@ -82,7 +83,7 @@ export const ShowPatches = ({ id, type }: Props) => {
 
 	return (
 		<Card className="bg-background">
-			<CardHeader className="flex flex-row items-center justify-between">
+				<CardHeader className="flex flex-row items-center justify-between">
 				<div>
 					<CardTitle>Patches</CardTitle>
 					<CardDescription>
@@ -129,7 +130,7 @@ export const ShowPatches = ({ id, type }: Props) => {
 							<TableRow>
 								<TableHead>File Path</TableHead>
 								<TableHead className="w-[100px]">Enabled</TableHead>
-								<TableHead className="w-[80px]">Actions</TableHead>
+								<TableHead className="w-[100px]">Actions</TableHead>
 							</TableRow>
 						</TableHeader>
 						<TableBody>
@@ -167,25 +168,33 @@ export const ShowPatches = ({ id, type }: Props) => {
 										/>
 									</TableCell>
 									<TableCell>
-										<Button
-											variant="ghost"
-											size="icon"
-											onClick={() => {
-												mutateAsync({ patchId: patch.patchId })
-													.then(() => {
-														toast.success("Patch deleted");
-														utils.patch.byEntityId.invalidate({
-															id,
-															type,
+										<div className="flex items-center gap-1">
+											<EditPatchDialog
+												patchId={patch.patchId}
+												entityId={id}
+												type={type}
+											/>
+											<Button
+												variant="ghost"
+												size="icon"
+												onClick={() => {
+													mutateAsync({ patchId: patch.patchId })
+														.then(() => {
+															toast.success("Patch deleted");
+															utils.patch.byEntityId.invalidate({
+																id,
+																type,
+															});
+														})
+														.catch((err) => {
+															toast.error(err.message);
 														});
-													})
-													.catch((err) => {
-														toast.error(err.message);
-													});
-											}}
-										>
-											<Trash2 className="h-4 w-4 text-destructive" />
-										</Button>
+												}}
+												title="Delete patch"
+											>
+												<Trash2 className="h-4 w-4 text-destructive" />
+											</Button>
+										</div>
 									</TableCell>
 								</TableRow>
 							))}

apps/dokploy/server/api/routers/patch.ts

@@ -29,11 +29,9 @@ import {
 } from "@/server/db/schema";
 
 export const patchRouter = createTRPCRouter({
-	// CRUD Operations
 	create: protectedProcedure
 		.input(apiCreatePatch)
 		.mutation(async ({ input, ctx }) => {
-			// Verify access
 			if (input.applicationId) {
 				const app = await findApplicationById(input.applicationId);
 				if (