feat: show a toast message when folder selection dialog is open

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -3679,20 +3679,86 @@ function RemoteFunctions(config = {}) {
     var _hoverLockTimer = null;
 
     const DOWNLOAD_EVENTS = {
+        DIALOG_OPENED: 'dialogOpened',
+        DIALOG_CLOSED: 'dialogClosed',
         STARTED: 'downloadStarted',
         COMPLETED: 'downloadCompleted',
         CANCELLED: 'downloadCancelled',
         ERROR: 'downloadError'
     };
 
     let _activeDownloads = new Map();
+    let _dialogOverlay = null;
+
+    function _showDialogOverlay() {
+        // don't create multiple overlays
+        if (_dialogOverlay) {
+            return;
+        }
+
+        // create overlay container
+        const overlay = window.document.createElement('div');
+        overlay.className = 'phoenix-dialog-overlay';
+        overlay.setAttribute('data-phcode-internal-c15r5a9', 'true');
+        overlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; ' +
+            'background: rgba(0, 0, 0, 0.5); z-index: 10000; pointer-events: auto;';
+
+        // create toast card (matching existing overlay style: #666 background, #ededed text)
+        const toast = window.document.createElement('div');
+        toast.className = 'phoenix-dialog-toast';
+        toast.setAttribute('data-phcode-internal-c15r5a9', 'true');
+        toast.style.cssText = 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ' +
+            'background: #666; color: #ededed; padding: 24px 32px; border-radius: 6px; ' +
+            'box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-size: 16px; text-align: center;';
+
+        // create icon
+        const icon = window.document.createElement('span');
+        icon.className = 'phoenix-dialog-icon';
+        icon.setAttribute('data-phcode-internal-c15r5a9', 'true');
+        icon.style.cssText = 'margin-right: 10px; font-size: 18px;';
+        icon.textContent = 'ⓘ';
+
+        // create message
+        const message = window.document.createElement('span');
+        message.className = 'phoenix-dialog-message';
+        message.setAttribute('data-phcode-internal-c15r5a9', 'true');
+        message.textContent = 'Select image download location in the editor to continue';
+
+        // assemble the structure
+        toast.appendChild(icon);
+        toast.appendChild(message);
+        overlay.appendChild(toast);
+
+        // append to body
+        window.document.body.appendChild(overlay);
+        _dialogOverlay = overlay;
+    }
+
+    function _hideDialogOverlay() {
+        if (_dialogOverlay && _dialogOverlay.parentNode) {
+            _dialogOverlay.parentNode.removeChild(_dialogOverlay);
+            _dialogOverlay = null;
+        }
+    }
 
     function handleDownloadEvent(eventType, data) {
         const downloadId = data && data.downloadId;
         if (!downloadId) {
             return;
         }
 
+        // handle dialog events (these don't require download to exist)
+        if (eventType === DOWNLOAD_EVENTS.DIALOG_OPENED) {
+            _showDialogOverlay();
+            return;
+        }
+
+        if (eventType === DOWNLOAD_EVENTS.DIALOG_CLOSED) {
+            _hideDialogOverlay();
+            return;
+        }
+
+        // handle download events (these require download to exist)
         const download = _activeDownloads.get(downloadId);
         if (!download) {
             return;

src/LiveDevelopment/LivePreviewEdit.js

@@ -47,6 +47,8 @@ define(function (require, exports, module) {
     const IMAGE_DOWNLOAD_PERSIST_FOLDER_KEY = "imageGallery.persistFolder";
 
     const DOWNLOAD_EVENTS = {
+        DIALOG_OPENED: 'dialogOpened',
+        DIALOG_CLOSED: 'dialogClosed',
         STARTED: 'downloadStarted',
         COMPLETED: 'downloadCompleted',
         CANCELLED: 'downloadCancelled',
@@ -1156,6 +1158,11 @@ define(function (require, exports, module) {
         const $suggestions = $dlg.find("#folder-suggestions");
         const $rememberCheckbox = $dlg.find("#remember-folder-checkbox");
 
+        // notify live preview that dialog is now open
+        if (message && message.downloadId) {
+            _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.DIALOG_OPENED, { downloadId: message.downloadId });
+        }
+
         let folderList = [];
         let rootFolders = [];
         let stringMatcher = null;
@@ -1226,6 +1233,12 @@ define(function (require, exports, module) {
                     _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.CANCELLED, { downloadId: message.downloadId });
                 }
             }
+
+            // notify live preview that dialog is now closed
+            if (message && message.downloadId) {
+                _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.DIALOG_CLOSED, { downloadId: message.downloadId });
+            }
+
             dialog.close();
         });
     }