From b6e6705de8ddc96e1f1bc6c3d535551f42d53ebe Mon Sep 17 00:00:00 2001
From: HarikrishnanD <harikrishnan@mulecraft.in>
Date: Tue, 14 Oct 2025 13:09:34 +0530
Subject: [PATCH] feat(ui): move environment variables icon outside dropdown  -
 Relocate the environment variables icon from the dropdown menu to a visible
 position outside. - Update the UI to ensure the icon is accessible and
 intuitive for users -#2755

---
 .../dashboard/project/advanced-environment-selector.tsx    | 4 ++--
 .../project/[projectId]/environment/[environmentId].tsx    | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/dokploy/components/dashboard/project/advanced-environment-selector.tsx b/apps/dokploy/components/dashboard/project/advanced-environment-selector.tsx
index 033231fc8..172e8bbaf 100644
--- a/apps/dokploy/components/dashboard/project/advanced-environment-selector.tsx
+++ b/apps/dokploy/components/dashboard/project/advanced-environment-selector.tsx
@@ -248,7 +248,7 @@ export const AdvancedEnvironmentSelector = ({
 								</DropdownMenuItem>
 
 								{/* Action buttons for non-production environments */}
-								<EnvironmentVariables environmentId={environment.environmentId}>
+								{/* <EnvironmentVariables environmentId={environment.environmentId}>
 									<Button
 										variant="ghost"
 										size="sm"
@@ -259,7 +259,7 @@ export const AdvancedEnvironmentSelector = ({
 									>
 										<Terminal className="h-3 w-3" />
 									</Button>
-								</EnvironmentVariables>
+								</EnvironmentVariables> */}
 								{environment.name !== "production" && (
 									<div className="flex items-center gap-1 px-2">
 										<Button
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
index 100b6f2e3..870eaa85f 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
@@ -15,7 +15,7 @@ import {
 	Search,
 	ServerIcon,
 	Trash2,
-	X,
+	X,Terminal,SquareTerminal
 } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
@@ -34,6 +34,7 @@ import { AddTemplate } from "@/components/dashboard/project/add-template";
 import { AdvancedEnvironmentSelector } from "@/components/dashboard/project/advanced-environment-selector";
 import { DuplicateProject } from "@/components/dashboard/project/duplicate-project";
 import { ProjectEnvironment } from "@/components/dashboard/projects/project-environment";
+
 import {
 	MariadbIcon,
 	MongodbIcon,
@@ -96,6 +97,7 @@ import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { FocusShortcutInput } from "@/components/shared/focus-shortcut-input";
+import { EnvironmentVariables } from "@/components/dashboard/project/environment-variables";
 
 export type Services = {
 	appName: string;
@@ -776,6 +778,9 @@ const EnvironmentPage = (
 										projectId={projectId}
 										currentEnvironmentId={environmentId}
 									/>
+									<EnvironmentVariables environmentId={environmentId}>
+        <SquareTerminal className="h-5 w-5 text-muted-foreground" />
+    </EnvironmentVariables>
 								</CardTitle>
 								<CardDescription>
 									{currentEnvironment.description || "No description provided"}