refactor: remove unused code

apps/dokploy/components/dashboard/compose/general/generic/show.tsx

@@ -30,10 +30,10 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 							Select the source of your code
 						</p>
 					</div>
-					{/* <div className="hidden space-y-1 text-sm font-normal md:block">
+					<div className="hidden space-y-1 text-sm font-normal md:flex flex-row items-center gap-2">
+						<ShowConvertedCompose composeId={composeId} />
 						<GitBranch className="size-6 text-muted-foreground" />
-					</div> */}
-					<ShowConvertedCompose composeId={composeId} />
+					</div>
 				</CardTitle>
 			</CardHeader>
 			<CardContent>

apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx

@@ -10,7 +10,7 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
-import { Puzzle } from "lucide-react";
+import { Puzzle, RefreshCw } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 
@@ -39,37 +39,47 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 			<DialogTrigger asChild>
 				<Button className="max-lg:w-full" variant="outline">
 					<Puzzle className="h-4 w-4" />
-					View Converted Compose
+					Preview Compose
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-6xl max-h-[50rem] overflow-y-auto">
 				<DialogHeader>
 					<DialogTitle>Converted Compose</DialogTitle>
 					<DialogDescription>
-						See how the docker compose file will look like after adding the
-						domains
+						Preview your docker-compose file with added domains. Note: At least
+						one domain must be specified for this conversion to take effect.
 					</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-				<Button
-					isLoading={isLoading}
-					onClick={() => {
-						mutateAsync({ composeId })
-							.then(() => {
-								refetch();
-								toast.success("Fetched source type");
-							})
-							.catch((err) => {
-								toast.error("Error to fetch source type", {
-									description: err.message,
+
+				<div className="flex flex-row gap-2 justify-end">
+					<Button
+						variant="secondary"
+						isLoading={isLoading}
+						onClick={() => {
+							mutateAsync({ composeId })
+								.then(() => {
+									refetch();
+									toast.success("Fetched source type");
+								})
+								.catch((err) => {
+									toast.error("Error to fetch source type", {
+										description: err.message,
+									});
 								});
-							});
-					}}
-				>
-					Fetch
-				</Button>
+						}}
+					>
+						Refresh <RefreshCw className="ml-2 h-4 w-4" />
+					</Button>
+				</div>
+
 				<pre>
-					<CodeEditor value={compose} language="yaml" readOnly height="50rem" />
+					<CodeEditor
+						value={compose || ""}
+						language="yaml"
+						readOnly
+						height="50rem"
+					/>
 				</pre>
 			</DialogContent>
 		</Dialog>