feat: allow closing the toast notification with a dont show again button

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -3847,9 +3847,12 @@ function RemoteFunctions(config = {}) {
         }
 
         // if element is not editable and user clicks on it, then we show a toast notification saying
-        // that this element is not editable
+        // that this element is not editable (unless user dismissed it permanently)
         if (!element.hasAttribute("data-brackets-id")) {
-            showToast("Element not editable - generated by script");
+            const hideToast = localStorage.getItem('phoenix-hide-dynamic-toast');
+            if (!hideToast) {
+                showToast("Element not editable - generated by script.");
+            }
         }
 
         // make sure that the element is actually visible to the user
@@ -4579,22 +4582,42 @@ function RemoteFunctions(config = {}) {
                 bottom: 30px !important;
                 left: 50% !important;
                 transform: translateX(-50%) translateY(0) !important;
-                background-color: #333333f2 !important;
+                background-color: rgba(51, 51, 51, 0.95) !important;
                 color: white !important;
-                padding: 10px 12px !important;
+                padding: 10px 14px !important;
                 border-radius: 6px !important;
                 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
                 font-family: Arial, sans-serif !important;
                 font-size: 13px !important;
                 line-height: 1.4 !important;
                 z-index: 2147483647 !important;
-                pointer-events: none !important;
                 text-align: center !important;
                 max-width: 90% !important;
                 box-sizing: border-box !important;
                 animation: slideUp 0.3s ease-out !important;
             }
 
+            .toast-message {
+                margin-bottom: 6px !important;
+            }
+
+            .toast-button {
+                background: none !important;
+                border: none !important;
+                color: #A0A0A0 !important;
+                cursor: pointer !important;
+                font-size: 12px !important;
+                font-family: Arial, sans-serif !important;
+                text-decoration: none !important;
+                pointer-events: auto !important;
+                transition: opacity 0.2s !important;
+            }
+
+            .toast-button:hover {
+                opacity: 0.8 !important;
+                text-decoration: underline !important;
+            }
+
             @keyframes slideUp {
                 from {
                     opacity: 0;
@@ -4607,16 +4630,37 @@ function RemoteFunctions(config = {}) {
             }
         `;
 
-        shadow.innerHTML = `<style>${styles}</style><div class="toast-container">${message}</div>`;
+        const content = `
+            <div class="toast-container">
+                <div class="toast-message">${message}</div>
+                <button class="toast-button">Don't show again</button>
+            </div>
+        `;
+
+        shadow.innerHTML = `<style>${styles}</style>${content}`;
         window.document.body.appendChild(toast);
 
-        // Auto-dismiss after 3 seconds
+        // add click handler to "Don't show again" button
+        const button = shadow.querySelector('.toast-button');
+        button.addEventListener('click', () => {
+            // save to localStorage to never show again and close toast rn
+            localStorage.setItem('phoenix-hide-dynamic-toast', 'true');
+            if (toast && toast.parentNode) {
+                toast.remove();
+            }
+            if (_toastTimeout) {
+                clearTimeout(_toastTimeout);
+                _toastTimeout = null;
+            }
+        });
+
+        // Auto-dismiss after 6 seconds
         _toastTimeout = setTimeout(() => {
             if (toast && toast.parentNode) {
                 toast.remove();
             }
             _toastTimeout = null;
-        }, 3000);
+        }, 6000);
     }
 
     /**