Improve output display and add disabled button styles

Refactored OutputManager to better handle output display logic and ensure the current output is stored for copy/download actions. Added comprehensive CSS styles for disabled buttons, including support for dark theme, to enhance UI feedback and accessibility.

src/scripts/components/OutputManager.js

@@ -16,7 +16,7 @@ export class OutputManager {
   constructor(serviceConfigGenerator) {
     this.serviceConfigGenerator = serviceConfigGenerator;
     this.templateCache = null;
-    this.currentOutput = ""; // Store the current generated output
+    this.currentOutput = "";
 
     this.elements = {
       copyButton: document.getElementById("copyButton"),
@@ -34,6 +34,10 @@ export class OutputManager {
     this.setupEventListeners();
     this.loadTemplate();
     this.setupServiceChangeListener();
+
+    // Initialize with empty output to show "No configuration generated" message
+    this.updateOutput("");
+    this.setButtonsState(false);
   }
 
   /**
@@ -80,7 +84,6 @@ export class OutputManager {
    */
   async handleServicesChanged(services) {
     if (services.length === 0) {
-      this.currentOutput = "";
       this.updateOutput("");
       this.setButtonsState(false);
     } else {
@@ -88,7 +91,6 @@ export class OutputManager {
 
       try {
         const output = await this.generateOutput(services);
-        this.currentOutput = output;
         this.updateOutput(output);
         this.setButtonsState(true);
       } catch (error) {
@@ -141,12 +143,18 @@ export class OutputManager {
         .appendChild(outputDisplay);
     }
 
+    // Store the output for copy/download functionality without displaying it
+    this.currentOutput = output;
+
     if (output.trim()) {
-      // Hide the output display when there's generated content
-      outputDisplay.style.display = "none";
+      outputDisplay.innerHTML = `
+        <div class="no-output">
+          <i class="fas fa-check-circle"></i>
+          <h3>META.js Generated Successfully</h3>
+          <p>Use the buttons above to copy or download your META.js</p>
+        </div>
+      `;
     } else {
-      // Show the no-output message when there's no content
-      outputDisplay.style.display = "block";
       outputDisplay.innerHTML = `
         <div class="no-output">
           <i class="fas fa-code"></i>

src/styles/main.css

@@ -518,6 +518,60 @@ body::before {
   color: white !important;
 }
 
+/* Disabled button styles */
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+  background: rgba(156, 163, 175, 0.3) !important;
+  color: rgba(156, 163, 175, 0.7) !important;
+  border: 1px solid rgba(156, 163, 175, 0.2) !important;
+  box-shadow: none !important;
+  pointer-events: none;
+}
+
+.btn:disabled::before {
+  display: none;
+}
+
+.btn:disabled:hover {
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* Specific disabled styles for primary buttons */
+.btn-primary:disabled {
+  background: rgba(156, 163, 175, 0.3) !important;
+  color: rgba(156, 163, 175, 0.7) !important;
+  border-color: rgba(156, 163, 175, 0.2) !important;
+}
+
+/* Specific disabled styles for secondary buttons */
+.btn-secondary:disabled {
+  background: rgba(156, 163, 175, 0.15) !important;
+  color: rgba(156, 163, 175, 0.6) !important;
+  border-color: rgba(156, 163, 175, 0.2) !important;
+}
+
+/* Dark theme disabled button styles */
+[data-theme="dark"] .btn:disabled {
+  background: rgba(75, 85, 99, 0.3) !important;
+  color: rgba(107, 114, 128, 0.7) !important;
+  border-color: rgba(75, 85, 99, 0.3) !important;
+}
+
+[data-theme="dark"] .btn-primary:disabled {
+  background: rgba(75, 85, 99, 0.3) !important;
+  color: rgba(107, 114, 128, 0.7) !important;
+  border-color: rgba(75, 85, 99, 0.3) !important;
+}
+
+[data-theme="dark"] .btn-secondary:disabled {
+  background: rgba(75, 85, 99, 0.2) !important;
+  color: rgba(107, 114, 128, 0.6) !important;
+  border-color: rgba(75, 85, 99, 0.3) !important;
+}
+
 /* Footer */
 .footer {
   margin-top: 2rem;