From 594bec6d91c851f0e622565344b992b590a97fdb Mon Sep 17 00:00:00 2001
From: SaelixCode <dev@saelix.com>
Date: Tue, 3 Mar 2026 19:18:32 -0500
Subject: [PATCH] feat: update environment file selection logic and enhance
 editor UI with helpful tips

---
 frontend/src/components/EditorLayout.tsx | 66 ++++++++++++++----------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/EditorLayout.tsx b/frontend/src/components/EditorLayout.tsx
index 84633dba..8d08b62b 100644
--- a/frontend/src/components/EditorLayout.tsx
+++ b/frontend/src/components/EditorLayout.tsx
@@ -1039,7 +1039,7 @@ export default function EditorLayout() {
                         </TabsList>
                       </Tabs>
 
-                      {activeTab === 'env' && envFiles.length > 0 && (
+                      {activeTab === 'env' && envFiles.length > 1 && (
                         <Select value={selectedEnvFile} onValueChange={changeEnvFile} disabled={isEditing || isFileLoading}>
                           <SelectTrigger className="h-9 text-xs bg-muted border-none min-w-[200px]">
                             <SelectValue placeholder="Select environment file" />
@@ -1078,35 +1078,45 @@ export default function EditorLayout() {
                       )}
                     </div>
                   </div>
-                  <div className="flex-1 min-h-0">
-                    {!isFileLoading && (
-                      <Editor
-                        height="100%"
-                        language={activeTab === 'compose' ? 'yaml' : 'plaintext'}
-                        theme={isDarkMode ? 'vs-dark' : 'vs'}
-                        value={activeTab === 'compose' ? safeContent : safeEnvContent}
-                        onChange={(value) => {
-                          if (!isEditing) return; // Prevent changes in view mode
-                          if (activeTab === 'compose') {
-                            setContent(value || '');
-                          } else {
-                            setEnvContent(value || '');
-                          }
-                        }}
-                        options={{
-                          minimap: { enabled: false },
-                          fontSize: 14,
-                          padding: { top: 10 },
-                          scrollBeyondLastLine: false,
-                          readOnly: !isEditing,
-                        }}
-                      />
-                    )}
-                    {isFileLoading && (
-                      <div className="flex items-center justify-center h-full text-muted-foreground">
-                        Loading...
+                  <div className="flex-1 min-h-0 flex flex-col">
+                    {activeTab === 'env' && (
+                      <div className="bg-blue-500/10 border-b border-blue-500/20 px-4 py-2 flex items-center gap-2 text-xs text-blue-400">
+                        <span className="font-semibold">💡 Pro Tip:</span>
+                        <span>
+                          Variables defined here are automatically available for substitution in your compose.yaml (e.g., <code className="bg-background px-1 rounded text-[10px]">${'{}'}VAR</code>). To pass them directly into your container, you must add <code className="bg-background px-1 rounded text-[10px]">env_file: - .env</code> to your service definition.
+                        </span>
                       </div>
                     )}
+                    <div className="flex-1 min-h-0">
+                      {!isFileLoading && (
+                        <Editor
+                          height="100%"
+                          language={activeTab === 'compose' ? 'yaml' : 'plaintext'}
+                          theme={isDarkMode ? 'vs-dark' : 'vs'}
+                          value={activeTab === 'compose' ? safeContent : safeEnvContent}
+                          onChange={(value) => {
+                            if (!isEditing) return; // Prevent changes in view mode
+                            if (activeTab === 'compose') {
+                              setContent(value || '');
+                            } else {
+                              setEnvContent(value || '');
+                            }
+                          }}
+                          options={{
+                            minimap: { enabled: false },
+                            fontSize: 14,
+                            padding: { top: 10 },
+                            scrollBeyondLastLine: false,
+                            readOnly: !isEditing,
+                          }}
+                        />
+                      )}
+                      {isFileLoading && (
+                        <div className="flex items-center justify-center h-full text-muted-foreground">
+                          Loading...
+                        </div>
+                      )}
+                    </div>
                   </div>
                 </Card>
               </div>