From 2a7faa3f09a4f163445cf05578bf7216443fde3d Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Thu, 25 Sep 2025 11:46:54 +0530
Subject: [PATCH 01/25] refactor: move loading more styles inside the _style
 function for consistency

---
 .../BrowserScripts/RemoteFunctions.js         | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 26a43dbef..034839778 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -2066,6 +2066,20 @@ function RemoteFunctions(config = {}) {
                         font-size: 14px !important;
                     }
 
+                    .phoenix-loading-more {
+                        display: flex !important;
+                        align-items: center !important;
+                        justify-content: center !important;
+                        min-width: 120px !important;
+                        height: 116px !important;
+                        margin-left: 2px !important;
+                        background: rgba(255,255,255,0.03) !important;
+                        border-radius: 8px !important;
+                        color: #e8eaf0 !important;
+                        font-size: 12px !important;
+                        border: 1px dashed rgba(255,255,255,0.1) !important;
+                    }
+
                     .phoenix-ribbon-header {
                         display: flex !important;
                         width: 100% !important;
@@ -2537,19 +2551,6 @@ function RemoteFunctions(config = {}) {
             // when loading more images we need to show the message at the end of the image ribbon
             const loadingIndicator = window.document.createElement('div');
             loadingIndicator.className = 'phoenix-loading-more';
-            loadingIndicator.style.cssText = `
-                display: flex !important;
-                align-items: center !important;
-                justify-content: center !important;
-                min-width: 120px !important;
-                height: 116px !important;
-                margin-left: 2px !important;
-                background: rgba(255,255,255,0.03) !important;
-                border-radius: 8px !important;
-                color: #e8eaf0 !important;
-                font-size: 12px !important;
-                border: 1px dashed rgba(255,255,255,0.1) !important;
-            `;
             loadingIndicator.textContent = 'Loading...';
             rowElement.appendChild(loadingIndicator);
         },

From d11100b9681707fc326a931394ac9df3798e89da Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Thu, 25 Sep 2025 13:37:14 +0530
Subject: [PATCH 02/25] feat: localize all the strings used in image ribbon
 gallery

---
 src/LiveDevelopment/BrowserScripts/RemoteFunctions.js | 10 +++++-----
 src/LiveDevelopment/main.js                           |  7 ++++++-
 src/nls/root/strings.js                               |  5 +++++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 034839778..b5e2bf148 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -2288,7 +2288,7 @@ function RemoteFunctions(config = {}) {
                             <div class="phoenix-ribbon-header-left">
                                 <div class="phoenix-ribbon-search">
                                     <input type="text" placeholder="${config.strings.imageGallerySearchPlaceholder}" />
-                                    <button class="phoenix-ribbon-search-btn">Search</button>
+                                    <button class="phoenix-ribbon-search-btn">${config.strings.imageGallerySearchButton}</button>
                                 </div>
                                 <div class="phoenix-ribbon-select">
                                     <button class="phoenix-select-image-btn" title="${config.strings.imageGallerySelectFromComputer}">
@@ -2381,7 +2381,7 @@ function RemoteFunctions(config = {}) {
                         this._updateSearchInput(searchQuery);
                         this._updateCache(searchQuery, data, append);
                     } else if (!append) {
-                        this._showError('No images found');
+                        this._showError(config.strings.imageGalleryNoImages);
                     }
 
                     if (append) {
@@ -2392,7 +2392,7 @@ function RemoteFunctions(config = {}) {
                 .catch(error => {
                     console.error('Failed to fetch images:', error);
                     if (!append) {
-                        this._showError('Failed to load images');
+                        this._showError(config.strings.imageGalleryLoadError);
                     } else {
                         this._isLoadingMore = false;
                         this._hideLoadingMore();
@@ -2540,7 +2540,7 @@ function RemoteFunctions(config = {}) {
             const rowElement = this._shadow.querySelector('.phoenix-ribbon-row');
             if (!rowElement) { return; }
 
-            rowElement.innerHTML = 'Loading images...';
+            rowElement.innerHTML = config.strings.imageGalleryLoadingInitial;
             rowElement.className = 'phoenix-ribbon-row phoenix-ribbon-loading';
         },
 
@@ -2551,7 +2551,7 @@ function RemoteFunctions(config = {}) {
             // when loading more images we need to show the message at the end of the image ribbon
             const loadingIndicator = window.document.createElement('div');
             loadingIndicator.className = 'phoenix-loading-more';
-            loadingIndicator.textContent = 'Loading...';
+            loadingIndicator.textContent = config.strings.imageGalleryLoadingMore;
             rowElement.appendChild(loadingIndicator);
         },
 
diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js
index 902321ae2..85c1c0713 100644
--- a/src/LiveDevelopment/main.js
+++ b/src/LiveDevelopment/main.js
@@ -84,7 +84,12 @@ define(function main(require, exports, module) {
             imageGalleryUseImage: Strings.LIVE_DEV_IMAGE_GALLERY_USE_IMAGE,
             imageGallerySelectFromComputer: Strings.LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER,
             imageGalleryChooseFolder: Strings.LIVE_DEV_IMAGE_GALLERY_CHOOSE_FOLDER,
-            imageGallerySearchPlaceholder: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER
+            imageGallerySearchPlaceholder: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER,
+            imageGallerySearchButton: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_BUTTON,
+            imageGalleryLoadingInitial: Strings.LIVE_DEV_IMAGE_GALLERY_LOADING_INITIAL,
+            imageGalleryLoadingMore: Strings.LIVE_DEV_IMAGE_GALLERY_LOADING_MORE,
+            imageGalleryNoImages: Strings.LIVE_DEV_IMAGE_GALLERY_NO_IMAGES,
+            imageGalleryLoadError: Strings.LIVE_DEV_IMAGE_GALLERY_LOAD_ERROR
         }
     };
     // Status labels/styles are ordered: error, not connected, progress1, progress2, connected.
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
index ae3131de4..006efbe65 100644
--- a/src/nls/root/strings.js
+++ b/src/nls/root/strings.js
@@ -193,6 +193,11 @@ define({
     "LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER": "Select image from computer",
     "LIVE_DEV_IMAGE_GALLERY_CHOOSE_FOLDER": "Choose download folder",
     "LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER": "Search images...",
+    "LIVE_DEV_IMAGE_GALLERY_SEARCH_BUTTON": "Search",
+    "LIVE_DEV_IMAGE_GALLERY_LOADING_INITIAL": "Loading images...",
+    "LIVE_DEV_IMAGE_GALLERY_LOADING_MORE": "Loading...",
+    "LIVE_DEV_IMAGE_GALLERY_NO_IMAGES": "No images found",
+    "LIVE_DEV_IMAGE_GALLERY_LOAD_ERROR": "Failed to load images",
     "LIVE_DEV_AI_PROMPT_PLACEHOLDER": "Ask Phoenix AI to modify this element...",
     "LIVE_PREVIEW_CUSTOM_SERVER_BANNER": "Getting preview from your custom server {0}",
     "LIVE_PREVIEW_MODE_PREVIEW": "Preview Mode",

From c62ba02f5672038d002401544cced09098986f73 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Thu, 25 Sep 2025 21:48:18 +0530
Subject: [PATCH 03/25] fix: downloaded images are blurry compared to previewed
 images

---
 .../BrowserScripts/RemoteFunctions.js               | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index b5e2bf148..15bb2dae9 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -1934,8 +1934,6 @@ function RemoteFunctions(config = {}) {
         this.allImages = [];
         this.imagesPerPage = 10;
         this.scrollPosition = 0;
-        this.maxWidth = '800px'; // when current image dimension is not defined we use this as unsplash images are very large
-        this.maxHeight = '600px';
 
         this.create();
     }
@@ -2675,8 +2673,8 @@ function RemoteFunctions(config = {}) {
 
                 // show hovered image along with dimensions
                 thumbDiv.addEventListener('mouseenter', () => {
-                    this.element.style.width = this._originalImageStyle.width || this.maxWidth;
-                    this.element.style.height = this._originalImageStyle.height || this.maxHeight;
+                    this.element.style.width = this._originalImageStyle.width;
+                    this.element.style.height = this._originalImageStyle.height;
 
                     this.element.style.objectFit = this._originalImageStyle.objectFit || 'cover';
                     this.element.src = image.url || image.thumb_url;
@@ -2736,12 +2734,7 @@ function RemoteFunctions(config = {}) {
                     const filename = this._generateFilename(image);
                     const extnName = ".jpg";
 
-                    const targetWidth = this._originalImageStyle.width || this.maxWidth;
-                    const targetHeight = this._originalImageStyle.height || this.maxHeight;
-                    const widthNum = parseInt(targetWidth);
-                    const heightNum = parseInt(targetHeight);
-
-                    const downloadUrl = image.url ? `${image.url}?w=${widthNum}&h=${heightNum}&fit=crop` : image.thumb_url;
+                    const downloadUrl = image.url || image.thumb_url;
                     this._useImage(downloadUrl, filename, extnName, false, thumbDiv);
                 });
 

From 8f1c36cffb04f71513d00300b018ab3b14f4e3e3 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Fri, 26 Sep 2025 16:44:58 +0530
Subject: [PATCH 04/25] feat: use local storage instead of cache to reduce API
 calls

---
 .../BrowserScripts/RemoteFunctions.js         | 107 ++++++++++++++----
 1 file changed, 86 insertions(+), 21 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 15bb2dae9..dcc1be939 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -1913,13 +1913,80 @@ function RemoteFunctions(config = {}) {
     };
 
     // image ribbon gallery cache, to store the last query and its results
-    // then next time we can load it from cache itself instead of making a new API call
+    const CACHE_EXPIRY_TIME = 168 * 60 * 60 * 1000; // 7 days, might need to revise this...
+    const CACHE_MAX_IMAGES = 50; // max number of images that we store in the localStorage
     const _imageGalleryCache = {
-        currentQuery: null,
-        allImages: [],
-        totalPages: 1,
-        currentPage: 1,
-        maxImages: 50
+        get currentQuery() {
+            const data = this._getFromStorage();
+            return data ? data.currentQuery : null;
+        },
+        set currentQuery(val) {
+            this._updateStorage({currentQuery: val});
+        },
+
+        get allImages() {
+            const data = this._getFromStorage();
+            return data ? data.allImages : [];
+        },
+        set allImages(val) {
+            this._updateStorage({allImages: val});
+        },
+
+        get totalPages() {
+            const data = this._getFromStorage();
+            return data ? data.totalPages : 1;
+        },
+        set totalPages(val) {
+            this._updateStorage({totalPages: val});
+        },
+
+        get currentPage() {
+            const data = this._getFromStorage();
+            return data ? data.currentPage : 1;
+        },
+        set currentPage(val) {
+            this._updateStorage({currentPage: val});
+        },
+
+
+        _getFromStorage() {
+            try {
+                const data = window.localStorage.getItem('imageGalleryCache');
+                if (!data) { return null; }
+
+                const parsed = JSON.parse(data);
+
+                if (Date.now() > parsed.expires) {
+                    window.localStorage.removeItem('imageGalleryCache');
+                    return null;
+                }
+
+                return parsed;
+            } catch (error) {
+                return null;
+            }
+        },
+
+        _updateStorage(updates) {
+            try {
+                const current = this._getFromStorage() || {};
+                const newData = {
+                    ...current,
+                    ...updates,
+                    expires: Date.now() + CACHE_EXPIRY_TIME
+                };
+                window.localStorage.setItem('imageGalleryCache', JSON.stringify(newData));
+            } catch (error) {
+                if (error.name === 'QuotaExceededError') {
+                    try {
+                        window.localStorage.removeItem('imageGalleryCache');
+                        window.localStorage.setItem('imageGalleryCache', JSON.stringify(updates));
+                    } catch (retryError) {
+                        console.error('Failed to save image cache even after clearing:', retryError);
+                    }
+                }
+            }
+        }
     };
 
     /**
@@ -2346,7 +2413,7 @@ function RemoteFunctions(config = {}) {
         },
 
         _fetchFromAPI: function(searchQuery, page, append) {
-            // when we fetch from API, we clear the cache and then store a fresh copy
+            // when we fetch from API, we clear the previous query from local storage and then store a fresh copy
             if (searchQuery !== _imageGalleryCache.currentQuery) {
                 this._clearCache();
             }
@@ -2405,11 +2472,11 @@ function RemoteFunctions(config = {}) {
             _imageGalleryCache.currentPage = this.currentPage;
 
             if (append) {
-                // Append new results to existing cache
-                const newImages = _imageGalleryCache.allImages.concat(data.results);
+                const currentImages = _imageGalleryCache.allImages;
+                const newImages = currentImages.concat(data.results);
 
-                if (newImages.length > _imageGalleryCache.maxImages) { // max = 50
-                    _imageGalleryCache.allImages = newImages.slice(-_imageGalleryCache.maxImages);
+                if (newImages.length > CACHE_MAX_IMAGES) {
+                    _imageGalleryCache.allImages = newImages.slice(-CACHE_MAX_IMAGES);
                 } else {
                     _imageGalleryCache.allImages = newImages;
                 }
@@ -2420,11 +2487,11 @@ function RemoteFunctions(config = {}) {
         },
 
         _clearCache: function() {
-            // clear current cache when switching to new query
-            _imageGalleryCache.currentQuery = null;
-            _imageGalleryCache.allImages = [];
-            _imageGalleryCache.totalPages = 1;
-            _imageGalleryCache.currentPage = 1;
+            try {
+                window.localStorage.removeItem('imageGalleryCache');
+            } catch (error) {
+                console.error('Failed to clear image cache:', error);
+            }
         },
 
         _updateSearchInput: function(searchQuery) {
@@ -2437,7 +2504,6 @@ function RemoteFunctions(config = {}) {
         },
 
         _loadFromCache: function(searchQuery) {
-            // Check if we can load from cache for this query
             if (searchQuery === _imageGalleryCache.currentQuery && _imageGalleryCache.allImages.length > 0) {
                 this.allImages = _imageGalleryCache.allImages;
                 this.totalPages = _imageGalleryCache.totalPages;
@@ -2446,13 +2512,12 @@ function RemoteFunctions(config = {}) {
                 this._renderImages(this.allImages, false);
                 this._updateNavButtons();
                 this._updateSearchInput(searchQuery);
-                return true; // Successfully loaded from cache
+                return true;
             }
-            return false; // unable to load from cache
+            return false;
         },
 
         _loadPageFromCache: function(searchQuery, page) {
-            // check if this page is in cache
             if (searchQuery === _imageGalleryCache.currentQuery && page <= Math.ceil(_imageGalleryCache.allImages.length / 10)) {
                 const startIdx = (page - 1) * 10;
                 const endIdx = startIdx + 10;
@@ -2465,7 +2530,7 @@ function RemoteFunctions(config = {}) {
                     this._updateNavButtons();
                     this._isLoadingMore = false;
                     this._hideLoadingMore();
-                    return true; // Successfully loaded page from cache
+                    return true;
                 }
             }
             return false;

From 2b5de422a1f0d226a167ba2e82c29f61a7537907 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Fri, 26 Sep 2025 23:48:31 +0530
Subject: [PATCH 05/25] fix: live preview getting scrolled even when the
 element is completely in viewport

---
 .../BrowserScripts/RemoteFunctions.js         | 47 +++++++++++--------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index dcc1be939..177427ff9 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -188,9 +188,7 @@ function RemoteFunctions(config = {}) {
         var html = window.document.documentElement;
         return (
             rect.top >= 0 &&
-            rect.left >= 0 &&
-            rect.bottom <= (window.innerHeight || html.clientHeight) &&
-            rect.right <= (window.innerWidth || html.clientWidth)
+            rect.bottom <= (window.innerHeight || html.clientHeight)
         );
     }
 
@@ -3206,9 +3204,7 @@ function RemoteFunctions(config = {}) {
             window.document.body.appendChild(highlight);
         },
 
-        // shouldAutoScroll is whether to scroll page to element if not in view
-        // true when user clicks on the source code of some element, in that case we want to scroll the live preview
-        add: function (element, doAnimation, shouldAutoScroll) {
+        add: function (element, doAnimation) {
             if (this._elementExists(element) || element === window.document) {
                 return;
             }
@@ -3216,15 +3212,7 @@ function RemoteFunctions(config = {}) {
                 _trigger(element, "highlight", 1);
             }
 
-            if (shouldAutoScroll && (!window.event || window.event instanceof MessageEvent) && !isInViewport(element)) {
-                var top = getDocumentOffsetTop(element);
-                if (top) {
-                    top -= (window.innerHeight / 2);
-                    window.scrollTo(0, top);
-                }
-            }
             this.elements.push(element);
-
             this._makeHighlightDiv(element, doAnimation);
         },
 
@@ -3258,7 +3246,7 @@ function RemoteFunctions(config = {}) {
 
             this.clear();
             for (i = 0; i < highlighted.length; i++) {
-                this.add(highlighted[i], false, false); // 3rd arg is for auto-scroll
+                this.add(highlighted[i], false);
             }
         }
     };
@@ -3276,7 +3264,7 @@ function RemoteFunctions(config = {}) {
         if (_validEvent(event)) {
             const element = event.target;
             if(isElementEditable(element) && element.nodeType === Node.ELEMENT_NODE ) {
-                _localHighlight.add(element, true, false); // false means no-auto scroll
+                _localHighlight.add(element, true);
             }
         }
     }
@@ -3348,7 +3336,7 @@ function RemoteFunctions(config = {}) {
             element._originalBackgroundColor = element.style.backgroundColor;
             element.style.backgroundColor = "rgba(0, 162, 255, 0.2)";
 
-            _hoverHighlight.add(element, false, false); // false means no auto-scroll
+            _hoverHighlight.add(element, false);
 
             // Create info box for the hovered element
             dismissNodeInfoBox();
@@ -3373,6 +3361,21 @@ function RemoteFunctions(config = {}) {
         }
     }
 
+    function scrollElementToViewPort(element) {
+        if (!element) {
+            return;
+        }
+
+        // Check if element is in viewport, if not scroll to it
+        if (!isInViewport(element)) {
+            let top = getDocumentOffsetTop(element);
+            if (top) {
+                top -= (window.innerHeight / 2);
+                window.scrollTo(0, top);
+            }
+        }
+    }
+
     /**
      * this function is responsible to select an element in the live preview
      * @param {Element} element - The DOM element to select
@@ -3381,10 +3384,16 @@ function RemoteFunctions(config = {}) {
         // dismiss all UI boxes and cleanup previous element state when selecting a different element
         dismissUIAndCleanupState();
         dismissImageRibbonGallery();
+
+        // this should always happen before isElementEditable check because this is not a live preview edit feature
+        // this should also be there when users are in highlight mode
+        scrollElementToViewPort(element);
+
         if(!isElementEditable(element)) {
             return false;
         }
 
+
         // make sure that the element is actually visible to the user
         if (isElementVisible(element)) {
             _nodeMoreOptionsBox = new NodeMoreOptionsBox(element);
@@ -3411,7 +3420,7 @@ function RemoteFunctions(config = {}) {
 
         if (_hoverHighlight) {
             _hoverHighlight.clear();
-            _hoverHighlight.add(element, true, false); // false means no auto-scroll
+            _hoverHighlight.add(element, true);
         }
 
         previouslyClickedElement = element;
@@ -3492,7 +3501,7 @@ function RemoteFunctions(config = {}) {
             _clickHighlight.clear();
         }
         if (isElementEditable(element, true) && element.nodeType === Node.ELEMENT_NODE) {
-            _clickHighlight.add(element, true, true); // 3rd arg is for auto-scroll
+            _clickHighlight.add(element, true);
         }
     }
 

From b4cee4371a2d916570423366c123a4bbe97e1f6f Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 27 Sep 2025 13:00:42 +0530
Subject: [PATCH 06/25] fix: info box and more options box points at different
 elements after live preview scroll

---
 .../BrowserScripts/RemoteFunctions.js         | 26 +++++++++++++++++++
 src/LiveDevelopment/LiveDevMultiBrowser.js    |  1 +
 2 files changed, 27 insertions(+)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 177427ff9..d3a891765 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -3259,6 +3259,7 @@ function RemoteFunctions(config = {}) {
     var _aiPromptBox;
     var _imageRibbonGallery;
     var _setup = false;
+    var _hoverLockTimer = null;
 
     function onMouseOver(event) {
         if (_validEvent(event)) {
@@ -3426,6 +3427,18 @@ function RemoteFunctions(config = {}) {
         previouslyClickedElement = element;
     }
 
+    function disableHoverListeners() {
+        window.document.removeEventListener("mouseover", onElementHover);
+        window.document.removeEventListener("mouseout", onElementHoverOut);
+    }
+
+    function enableHoverListeners() {
+        if (config.isProUser && (config.highlight || shouldShowHighlightOnHover())) {
+            window.document.addEventListener("mouseover", onElementHover);
+            window.document.addEventListener("mouseout", onElementHoverOut);
+        }
+    }
+
     /**
      * This function handles the click event on the live preview DOM element
      * this just stops the propagation because otherwise users might not be able to edit buttons or hyperlinks etc
@@ -3438,6 +3451,18 @@ function RemoteFunctions(config = {}) {
             event.preventDefault();
             event.stopPropagation();
             event.stopImmediatePropagation();
+
+            // clear any existing timer before starting new one
+            if (_hoverLockTimer) {
+                clearTimeout(_hoverLockTimer);
+            }
+
+            // disable hover listeners for 2 seconds to prevent info box conflicts
+            disableHoverListeners();
+            _hoverLockTimer = setTimeout(() => {
+                enableHoverListeners();
+                _hoverLockTimer = null;
+            }, 1500);
         }
     }
 
@@ -4245,6 +4270,7 @@ function RemoteFunctions(config = {}) {
         "hasVisibleLivePreviewBoxes" : hasVisibleLivePreviewBoxes,
         "dismissUIAndCleanupState" : dismissUIAndCleanupState,
         "dismissImageRibbonGallery" : dismissImageRibbonGallery,
+        "enableHoverListeners" : enableHoverListeners,
         "registerHandlers" : registerHandlers
     };
 }
diff --git a/src/LiveDevelopment/LiveDevMultiBrowser.js b/src/LiveDevelopment/LiveDevMultiBrowser.js
index f1b3de243..8dc17989e 100644
--- a/src/LiveDevelopment/LiveDevMultiBrowser.js
+++ b/src/LiveDevelopment/LiveDevMultiBrowser.js
@@ -714,6 +714,7 @@ define(function (require, exports, module) {
      */
     function dismissLivePreviewBoxes() {
         if (_protocol) {
+            _protocol.evaluate("_LD.enableHoverListeners()"); // so that if hover lock is there it will get cleared
             _protocol.evaluate("_LD.dismissUIAndCleanupState()");
             _protocol.evaluate("_LD.dismissImageRibbonGallery()");
         }

From cc6a3f03c7bba7ed56eaba30ae3dbb966997536a Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 27 Sep 2025 13:18:53 +0530
Subject: [PATCH 07/25] refactor: remove redundant dismissed tracking

---
 .../BrowserScripts/RemoteFunctions.js         | 35 +++----------------
 1 file changed, 5 insertions(+), 30 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index d3a891765..695e9e829 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -3998,41 +3998,32 @@ function RemoteFunctions(config = {}) {
 
     /**
      * Helper function to dismiss NodeMoreOptionsBox if it exists
-     * @return {boolean} true if box was dismissed, false if it didn't exist
      */
     function dismissNodeMoreOptionsBox() {
         if (_nodeMoreOptionsBox) {
             _nodeMoreOptionsBox.remove();
             _nodeMoreOptionsBox = null;
-            return true;
         }
-        return false;
     }
 
     /**
      * Helper function to dismiss NodeInfoBox if it exists
-     * @return {boolean} true if box was dismissed, false if it didn't exist
      */
     function dismissNodeInfoBox() {
         if (_nodeInfoBox) {
             _nodeInfoBox.remove();
             _nodeInfoBox = null;
-            return true;
         }
-        return false;
     }
 
     /**
      * Helper function to dismiss AIPromptBox if it exists
-     * @return {boolean} true if box was dismissed, false if it didn't exist
      */
     function dismissAIPromptBox() {
         if (_aiPromptBox) {
             _aiPromptBox.remove();
             _aiPromptBox = null;
-            return true;
         }
-        return false;
     }
 
     /**
@@ -4042,26 +4033,20 @@ function RemoteFunctions(config = {}) {
         if (_imageRibbonGallery) {
             _imageRibbonGallery.remove();
             _imageRibbonGallery = null;
-            return true;
         }
-        return false;
     }
 
     /**
      * Helper function to dismiss all UI boxes at once
-     * @return {boolean} true if any boxes were dismissed, false otherwise
      */
     function dismissAllUIBoxes() {
-        let dismissed = false;
-        dismissed = dismissNodeMoreOptionsBox() || dismissed;
-        dismissed = dismissAIPromptBox() || dismissed;
-        dismissed = dismissNodeInfoBox() || dismissed;
-        return dismissed;
+        dismissNodeMoreOptionsBox();
+        dismissAIPromptBox();
+        dismissNodeInfoBox();
     }
 
     /**
      * Helper function to cleanup previously clicked element highlighting and state
-     * @return {boolean} true if cleanup was performed, false if no element to cleanup
      */
     function cleanupPreviousElementState() {
         if (previouslyClickedElement) {
@@ -4078,26 +4063,16 @@ function RemoteFunctions(config = {}) {
             }
 
             previouslyClickedElement = null;
-            return true;
         }
-        return false;
     }
 
     /**
      * This function dismisses all UI elements and cleans up application state
      * Called when user presses Esc key, clicks on HTML/Body tags, or other dismissal events
-     * @return {boolean} true if any cleanup was performed, false otherwise
      */
     function dismissUIAndCleanupState() {
-        let dismissed = false;
-
-        // Dismiss all UI boxes
-        dismissed = dismissAllUIBoxes() || dismissed;
-
-        // Cleanup previously clicked element state and highlighting
-        dismissed = cleanupPreviousElementState() || dismissed;
-
-        return dismissed;
+        dismissAllUIBoxes();
+        cleanupPreviousElementState();
     }
 
 

From ded967bebedd85b41085f2b47c89b38c446d47d8 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 27 Sep 2025 13:56:41 +0530
Subject: [PATCH 08/25] fix: select parent click function throws error when
 element is of svg type

---
 .../BrowserScripts/RemoteFunctions.js         | 38 ++++++++++++-------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 695e9e829..44f721880 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -295,7 +295,14 @@ function RemoteFunctions(config = {}) {
 
         const parentElement = element.parentElement;
         if (isElementEditable(parentElement)) {
-            parentElement.click();
+            // Check if parent element has .click() method (HTML elements)
+            // SVG elements don't have .click() method, so we use _selectElement for them
+            if (typeof parentElement.click === 'function') {
+                parentElement.click();
+            } else {
+                activateHoverLock();
+                _selectElement(parentElement);
+            }
         } else {
             console.error("The TagID might be unavailable or the parent element tag is directly body or html");
         }
@@ -3439,6 +3446,22 @@ function RemoteFunctions(config = {}) {
         }
     }
 
+    /**
+     * this function activates hover lock to prevent hover events
+     * Used when user performs click actions to avoid UI box conflicts
+     */
+    function activateHoverLock() {
+        if (_hoverLockTimer) {
+            clearTimeout(_hoverLockTimer);
+        }
+
+        disableHoverListeners();
+        _hoverLockTimer = setTimeout(() => {
+            enableHoverListeners();
+            _hoverLockTimer = null;
+        }, 1500); // 1.5s
+    }
+
     /**
      * This function handles the click event on the live preview DOM element
      * this just stops the propagation because otherwise users might not be able to edit buttons or hyperlinks etc
@@ -3451,18 +3474,7 @@ function RemoteFunctions(config = {}) {
             event.preventDefault();
             event.stopPropagation();
             event.stopImmediatePropagation();
-
-            // clear any existing timer before starting new one
-            if (_hoverLockTimer) {
-                clearTimeout(_hoverLockTimer);
-            }
-
-            // disable hover listeners for 2 seconds to prevent info box conflicts
-            disableHoverListeners();
-            _hoverLockTimer = setTimeout(() => {
-                enableHoverListeners();
-                _hoverLockTimer = null;
-            }, 1500);
+            activateHoverLock();
         }
     }
 

From 9f58bffbd16d8ba19605f8d677027d3fc0676c33 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 27 Sep 2025 15:07:08 +0530
Subject: [PATCH 09/25] fix: shouldn't show edit text button for svg children
 elements

---
 .../BrowserScripts/RemoteFunctions.js         | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 44f721880..329907c56 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -128,8 +128,8 @@ function RemoteFunctions(config = {}) {
 
         if(element && // element should exist
            element.hasAttribute("data-brackets-id") && // should have the data-brackets-id attribute
-           element.tagName !== "BODY" && // shouldn't be the body tag
-           element.tagName !== "HTML" && // shouldn't be the HTML tag
+           element.tagName.toLowerCase() !== "body" && // shouldn't be the body tag
+           element.tagName.toLowerCase() !== "html" && // shouldn't be the HTML tag
            !_isInsideHeadTag(element)) { // shouldn't be inside the head tag like meta tags and all
             return true;
         }
@@ -142,9 +142,22 @@ function RemoteFunctions(config = {}) {
     function _isInsideHeadTag(element) {
         let parent = element;
         while (parent && parent !== window.document) {
-            if (parent.tagName === "HEAD") {
+            if (parent.tagName.toLowerCase() === "head") {
                 // allow <style> tags inside <head>
-                return element.tagName !== "STYLE";
+                return element.tagName.toLowerCase() !== "style";
+            }
+            parent = parent.parentElement;
+        }
+        return false;
+    }
+
+    // helper function to check if an element is inside an SVG tag
+    // we need this because SVG elements don't support contenteditable
+    function _isInsideSVGTag(element) {
+        let parent = element;
+        while (parent && parent !== window.document) {
+            if (parent.tagName.toLowerCase() === "svg") {
+                return true;
             }
             parent = parent.parentElement;
         }
@@ -1114,7 +1127,7 @@ function RemoteFunctions(config = {}) {
             "textarea"
         ];
 
-        if (voidElements.includes(tagName) || nonEditableElements.includes(tagName)) {
+        if (voidElements.includes(tagName) || nonEditableElements.includes(tagName) || _isInsideSVGTag(element)) {
             return false;
         }
 
@@ -1154,8 +1167,8 @@ function RemoteFunctions(config = {}) {
         _registerDragDrop: function() {
             // disable dragging on all elements and then enable it on the current element
             const allElements = document.querySelectorAll('[data-brackets-id]');
-            allElements.forEach(el => el.setAttribute("draggable", false));
-            this.element.setAttribute("draggable", true);
+            allElements.forEach(el => el.setAttribute("draggable", "false"));
+            this.element.setAttribute("draggable", "true");
 
             this.element.addEventListener("dragstart", (event) => {
                 event.stopPropagation();

From 17b80bd5b2e5086084b39f350f904c4d01f71693 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 27 Sep 2025 17:03:55 +0530
Subject: [PATCH 10/25] refactor: improve UI to make it consistent

---
 .../BrowserScripts/RemoteFunctions.js         | 91 ++++++++++++++-----
 1 file changed, 66 insertions(+), 25 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 329907c56..b5c0ce0e2 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -2050,7 +2050,6 @@ function RemoteFunctions(config = {}) {
                         backdrop-filter: blur(10px) !important;
                         -webkit-backdrop-filter: blur(10px) !important;
                         border: 1px solid rgba(255, 255, 255, 0.2) !important;
-                        border-radius: 12px !important;
                         position: relative !important;
                     }
 
@@ -2060,7 +2059,7 @@ function RemoteFunctions(config = {}) {
                         overflow: hidden !important;
                         scroll-behavior: smooth !important;
                         padding: 6px !important;
-                        top: 34px !important;
+                        top: 30px !important;
                     }
 
                     .phoenix-ribbon-row {
@@ -2103,7 +2102,6 @@ function RemoteFunctions(config = {}) {
                         color: #eaeaf0 !important;
                         background: rgba(21,25,36,0.65) !important;
                         cursor: pointer !important;
-                        backdrop-filter: blur(8px) !important;
                         font-size: 20px !important;
                         font-weight: 600 !important;
                         user-select: none !important;
@@ -2167,7 +2165,7 @@ function RemoteFunctions(config = {}) {
                         display: flex !important;
                         width: 100% !important;
                         position: absolute !important;
-                        top: 5px !important;
+                        top: 6px !important;
                     }
 
                     .phoenix-ribbon-header-left {
@@ -2183,40 +2181,66 @@ function RemoteFunctions(config = {}) {
 
                     .phoenix-ribbon-search {
                         display: flex !important;
-                        align-items: center !important;
-                        background: rgba(0,0,0,0.5) !important;
-                        padding: 5px !important;
-                        border-radius: 5px !important;
-                        margin-left: 8px !important;
+                        align-items: stretch !important;
+                        background: rgba(21,25,36,0.65) !important;
+                        padding: 0 !important;
+                        border-radius: 6px !important;
+                        margin-left: 6px !important;
+                        border: 1px solid rgba(255,255,255,0.14) !important;
+                        transition: all 0.2s ease !important;
+                        overflow: hidden !important;
+                    }
+
+                    .phoenix-ribbon-search:hover {
+                        background: rgba(21,25,36,0.85) !important;
+                        border-color: rgba(255,255,255,0.25) !important;
+                        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
+                    }
+
+                    .phoenix-ribbon-search:focus-within {
+                        background: rgba(21,25,36,0.9) !important;
+                        border-color: rgba(106,169,255,0.4) !important;
                     }
 
                     .phoenix-ribbon-search input {
                         background: transparent !important;
                         border: none !important;
                         outline: none !important;
-                        color: white !important;
-                        width: 200px !important;
+                        color: #eaeaf0 !important;
+                        width: 150px !important;
+                        padding: 2px 6px !important;
+                        border-radius: 4px 0 0 4px !important;
                     }
 
                     .phoenix-ribbon-search input::placeholder {
-                        color: rgba(255, 255, 255, 0.7) !important;
+                        color: rgba(234, 234, 240, 0.6) !important;
                         opacity: 1 !important;
                     }
 
                     .phoenix-ribbon-search input::-webkit-input-placeholder {
-                        color: rgba(255, 255, 255, 0.7) !important;
+                        color: rgba(234, 234, 240, 0.6) !important;
                     }
 
                     .phoenix-ribbon-search input::-moz-placeholder {
-                        color: rgba(255, 255, 255, 0.7) !important;
+                        color: rgba(234, 234, 240, 0.6) !important;
                         opacity: 1 !important;
                     }
 
                     .phoenix-ribbon-search-btn {
-                        background: none !important;
+                        background: transparent !important;
                         border: none !important;
-                        color: #6aa9ff !important;
+                        color: #4285F4 !important;
                         cursor: pointer !important;
+                        padding: 2px 6px !important;
+                        border-radius: 0 4px 4px 0 !important;
+                        font-size: 12px !important;
+                        font-weight: 500 !important;
+                        transition: all 0.2s ease !important;
+                        margin-left: 0 !important;
+                    }
+
+                    .phoenix-ribbon-search-btn:hover {
+                        color: #4285F4 !important;
                     }
 
                     .phoenix-ribbon-select {
@@ -2224,24 +2248,41 @@ function RemoteFunctions(config = {}) {
                     }
 
                     .phoenix-select-image-btn {
-                        background: gray !important;
-                        border: 1px solid rgba(255, 255, 255, 0.2) !important;
-                        color: #fff !important;
-                        padding: 2px 4px !important;
+                        background: rgba(21,25,36,0.65) !important;
+                        border: 1px solid rgba(255,255,255,0.14) !important;
+                        color: #eaeaf0 !important;
+                        padding: 1px 3px !important;
                         border-radius: 6px !important;
                         font-size: 12px !important;
                         cursor: pointer !important;
                         transition: all 0.2s ease !important;
                     }
 
+                    .phoenix-select-image-btn:hover {
+                        background: rgba(21,25,36,0.85) !important;
+                        border-color: rgba(255,255,255,0.25) !important;
+                        transform: scale(1.05) !important;
+                        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
+                    }
+
+
                     .phoenix-ribbon-close {
-                        background: rgba(0,0,0,0.5) !important;
-                        border: none !important;
-                        color: white !important;
+                        background: rgba(21,25,36,0.65) !important;
+                        border: 1px solid rgba(255,255,255,0.14) !important;
+                        color: #eaeaf0 !important;
                         cursor: pointer !important;
-                        padding: 4px 8px !important;
-                        border-radius: 3px !important;
+                        padding: 2px 6px !important;
+                        border-radius: 6px !important;
                         margin-right: 16px !important;
+                        transition: all 0.2s ease !important;
+                        font-size: 16px !important;
+                    }
+
+                    .phoenix-ribbon-close:hover {
+                        background: rgba(21,25,36,0.85) !important;
+                        border-color: rgba(255,255,255,0.25) !important;
+                        transform: scale(1.05) !important;
+                        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
                     }
 
                     .phoenix-ribbon-attribution {

From b7ca081ff6c2d0109320e7fca0ec5c0b984eea8a Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sun, 28 Sep 2025 14:50:04 +0530
Subject: [PATCH 11/25] refactor: use more intuitive icon for select image from
 computer button

---
 src/LiveDevelopment/BrowserScripts/RemoteFunctions.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index b5c0ce0e2..9d3653db8 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -2251,7 +2251,7 @@ function RemoteFunctions(config = {}) {
                         background: rgba(21,25,36,0.65) !important;
                         border: 1px solid rgba(255,255,255,0.14) !important;
                         color: #eaeaf0 !important;
-                        padding: 1px 3px !important;
+                        padding: 4px 6px 2px 6px !important;
                         border-radius: 6px !important;
                         font-size: 12px !important;
                         cursor: pointer !important;
@@ -2416,9 +2416,8 @@ function RemoteFunctions(config = {}) {
                                 </div>
                                 <div class="phoenix-ribbon-select">
                                     <button class="phoenix-select-image-btn" title="${config.strings.imageGallerySelectFromComputer}">
-                                        <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
-                                            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
-                                            <path d="M12,12L10.5,13.5L8.5,11.5L6,14H18L15,11L12,12Z"/>
+                                        <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
+                                            <path d="M22,16V4A2,2 0 0,0 20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16M11,12L13.5,15L17,10.5L20,15H8M2,6V20A2,2 0 0,0 4,22H18V20H4V6H2Z"/>
                                         </svg>
                                     </button>
                                     <input type="file" class="phoenix-file-input" accept="image/*" style="display: none;">

From 9c2c04d8b8666ed322b8b5259f133f631440b151 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sun, 28 Sep 2025 16:25:40 +0530
Subject: [PATCH 12/25] feat: move image gallery inside more options box

---
 .../BrowserScripts/RemoteFunctions.js         | 37 +++++++++++++++----
 src/LiveDevelopment/LiveDevMultiBrowser.js    | 11 ------
 src/LiveDevelopment/LivePreviewEdit.js        |  4 +-
 src/LiveDevelopment/main.js                   |  3 +-
 src/nls/root/strings.js                       |  1 +
 5 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 9d3653db8..b4dff266c 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -252,6 +252,18 @@ function RemoteFunctions(config = {}) {
         _aiPromptBox = new AIPromptBox(element); // create a new one
     }
 
+    /**
+     * This function gets called when the image gallery button is clicked
+     * it shows the image ribbon gallery at the bottom of the live preview
+     * @param {Event} event
+     * @param {DOMElement} element - the HTML DOM element that was clicked (should be an image)
+     */
+    function _handleImageGalleryOptionClick(event, element) {
+        if (!_imageRibbonGallery && shouldShowImageRibbon()) {
+            _imageRibbonGallery = new ImageRibbonGallery(element);
+        }
+    }
+
     /**
      * This function gets called when the delete button is clicked
      * it sends a message to the editor using postMessage to delete the element from the source code
@@ -339,6 +351,8 @@ function RemoteFunctions(config = {}) {
             _handleDeleteOptionClick(e, element);
         } else if (action === "ai") {
             _handleAIOptionClick(e, element);
+        } else if (action === "image-gallery") {
+            _handleImageGalleryOptionClick(e, element);
         }
     }
 
@@ -1257,6 +1271,13 @@ function RemoteFunctions(config = {}) {
                   <path d="M6 7V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h3v2h-2l-1.5 12.5a2 2 0 0
                   1-2 1.5H8.5a2 2 0 0 1-2-1.5L5 9H3V7h3zm2 0h8V5H8v2z"/>
                 </svg>
+              `,
+
+                imageGallery: `
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+                  <path d="M1 3v16h2V5h16V3H1z"/>
+                </svg>
               `
             };
 
@@ -1267,6 +1288,13 @@ function RemoteFunctions(config = {}) {
                     ${ICONS.ai}
                 </span>`;
 
+            // if its an image element, we show the image gallery icon
+            if (this.element && this.element.tagName.toLowerCase() === 'img') {
+                content += `<span data-action="image-gallery" title="${config.strings.imageGallery}">
+                    ${ICONS.imageGallery}
+                </span>`;
+            }
+
             // Only include select parent option if element supports it
             if (showSelectParentOption) {
                 content += `<span data-action="select-parent" title="${config.strings.selectParent}">
@@ -3464,13 +3492,6 @@ function RemoteFunctions(config = {}) {
             _nodeMoreOptionsBox = null;
         }
 
-        // if the selected element is an image, show the image ribbon gallery (make sure its enabled in preferences)
-        if(element && element.tagName.toLowerCase() === 'img' && shouldShowImageRibbon()) {
-            if (!_imageRibbonGallery) {
-                _imageRibbonGallery = new ImageRibbonGallery(element);
-            }
-        }
-
         element._originalOutline = element.style.outline;
         element.style.outline = "1px solid #4285F4";
 
@@ -4108,6 +4129,7 @@ function RemoteFunctions(config = {}) {
         dismissNodeMoreOptionsBox();
         dismissAIPromptBox();
         dismissNodeInfoBox();
+        dismissImageRibbonGallery();
     }
 
     /**
@@ -4309,7 +4331,6 @@ function RemoteFunctions(config = {}) {
         "finishEditing"         : finishEditing,
         "hasVisibleLivePreviewBoxes" : hasVisibleLivePreviewBoxes,
         "dismissUIAndCleanupState" : dismissUIAndCleanupState,
-        "dismissImageRibbonGallery" : dismissImageRibbonGallery,
         "enableHoverListeners" : enableHoverListeners,
         "registerHandlers" : registerHandlers
     };
diff --git a/src/LiveDevelopment/LiveDevMultiBrowser.js b/src/LiveDevelopment/LiveDevMultiBrowser.js
index 8dc17989e..e424e5271 100644
--- a/src/LiveDevelopment/LiveDevMultiBrowser.js
+++ b/src/LiveDevelopment/LiveDevMultiBrowser.js
@@ -716,16 +716,6 @@ define(function (require, exports, module) {
         if (_protocol) {
             _protocol.evaluate("_LD.enableHoverListeners()"); // so that if hover lock is there it will get cleared
             _protocol.evaluate("_LD.dismissUIAndCleanupState()");
-            _protocol.evaluate("_LD.dismissImageRibbonGallery()");
-        }
-    }
-
-    /**
-     * Dismiss image ribbon gallery if it's open
-     */
-    function dismissImageRibbonGallery() {
-        if (_protocol) {
-            _protocol.evaluate("_LD.dismissImageRibbonGallery()");
         }
     }
 
@@ -815,7 +805,6 @@ define(function (require, exports, module) {
     exports.redrawHighlight     = redrawHighlight;
     exports.hasVisibleLivePreviewBoxes = hasVisibleLivePreviewBoxes;
     exports.dismissLivePreviewBoxes = dismissLivePreviewBoxes;
-    exports.dismissImageRibbonGallery = dismissImageRibbonGallery;
     exports.registerHandlers    = registerHandlers;
     exports.updateConfig        = updateConfig;
     exports.init                = init;
diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
index 7b71ef105..0a4184130 100644
--- a/src/LiveDevelopment/LivePreviewEdit.js
+++ b/src/LiveDevelopment/LivePreviewEdit.js
@@ -693,10 +693,10 @@ define(function (require, exports, module) {
             _updateImageSrcAttribute(tagId, filename);
         }
 
-        // dismiss the image ribbon gallery
+        // dismiss all UI boxes including the image ribbon gallery
         const currLiveDoc = LiveDevMultiBrowser.getCurrentLiveDoc();
         if (currLiveDoc && currLiveDoc.protocol && currLiveDoc.protocol.evaluate) {
-            currLiveDoc.protocol.evaluate("_LD.dismissImageRibbonGallery()");
+            currLiveDoc.protocol.evaluate("_LD.dismissUIAndCleanupState()");
         }
     }
 
diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js
index 85c1c0713..40785bded 100644
--- a/src/LiveDevelopment/main.js
+++ b/src/LiveDevelopment/main.js
@@ -80,6 +80,7 @@ define(function main(require, exports, module) {
             duplicate: Strings.LIVE_DEV_MORE_OPTIONS_DUPLICATE,
             delete: Strings.LIVE_DEV_MORE_OPTIONS_DELETE,
             ai: Strings.LIVE_DEV_MORE_OPTIONS_AI,
+            imageGallery: Strings.LIVE_DEV_MORE_OPTIONS_IMAGE_GALLERY,
             aiPromptPlaceholder: Strings.LIVE_DEV_AI_PROMPT_PLACEHOLDER,
             imageGalleryUseImage: Strings.LIVE_DEV_IMAGE_GALLERY_USE_IMAGE,
             imageGallerySelectFromComputer: Strings.LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER,
@@ -382,7 +383,7 @@ define(function main(require, exports, module) {
         config.imageRibbon = prefValue !== false; // default to true if undefined
 
         if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
-            if (!prefValue) { MultiBrowserLiveDev.dismissImageRibbonGallery(); } // to remove any existing image ribbons
+            if (!prefValue) { MultiBrowserLiveDev.dismissLivePreviewBoxes(); } // to remove any existing image ribbons and UI boxes
 
             MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
             MultiBrowserLiveDev.registerHandlers();
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
index 006efbe65..253883cbe 100644
--- a/src/nls/root/strings.js
+++ b/src/nls/root/strings.js
@@ -189,6 +189,7 @@ define({
     "LIVE_DEV_MORE_OPTIONS_DUPLICATE": "Duplicate",
     "LIVE_DEV_MORE_OPTIONS_DELETE": "Delete",
     "LIVE_DEV_MORE_OPTIONS_AI": "Edit with AI",
+    "LIVE_DEV_MORE_OPTIONS_IMAGE_GALLERY": "Image Gallery",
     "LIVE_DEV_IMAGE_GALLERY_USE_IMAGE": "Use this image",
     "LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER": "Select image from computer",
     "LIVE_DEV_IMAGE_GALLERY_CHOOSE_FOLDER": "Choose download folder",

From 0454bd774c78ab111e35d986158f53db2f2644a2 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Fri, 3 Oct 2025 23:02:22 +0530
Subject: [PATCH 13/25] feat: remove show image gallery option from dropdown

---
 .../BrowserScripts/RemoteFunctions.js         | 21 ++------------
 src/LiveDevelopment/main.js                   | 16 ----------
 .../Phoenix-live-preview/main.js              | 29 -------------------
 src/nls/root/strings.js                       |  1 -
 4 files changed, 2 insertions(+), 65 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index b4dff266c..933ddafe5 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -259,7 +259,7 @@ function RemoteFunctions(config = {}) {
      * @param {DOMElement} element - the HTML DOM element that was clicked (should be an image)
      */
     function _handleImageGalleryOptionClick(event, element) {
-        if (!_imageRibbonGallery && shouldShowImageRibbon()) {
+        if (!_imageRibbonGallery) {
             _imageRibbonGallery = new ImageRibbonGallery(element);
         }
     }
@@ -3380,12 +3380,6 @@ function RemoteFunctions(config = {}) {
         return getHighlightMode() !== "click";
     }
 
-    // helper function to check if image ribbon gallery should be shown
-    function shouldShowImageRibbon() {
-        if (_imageRibbonGallery) { return false; }
-        return config.imageRibbon !== false;
-    }
-
     // helper function to clear element background highlighting
     function clearElementBackground(element) {
         if (element._originalBackgroundColor !== undefined) {
@@ -4022,23 +4016,12 @@ function RemoteFunctions(config = {}) {
         const highlightModeChanged = oldHighlightMode !== newHighlightMode;
         const isProStatusChanged = oldConfig.isProUser !== config.isProUser;
         const highlightSettingChanged = oldConfig.highlight !== config.highlight;
-        const imageRibbonJustEnabled = !oldConfig.imageRibbon && config.imageRibbon;
-
-        // Handle significant configuration changes
+        // Handle configuration changes
         if (highlightModeChanged || isProStatusChanged || highlightSettingChanged) {
             _handleConfigurationChange();
         }
 
-        // if user enabled the image ribbon setting and an image is selected, then we show the image ribbon
-        if (imageRibbonJustEnabled && previouslyClickedElement &&
-            previouslyClickedElement.tagName.toLowerCase() === 'img') {
-            if (!_imageRibbonGallery) {
-                _imageRibbonGallery = new ImageRibbonGallery(previouslyClickedElement);
-            }
-        }
-
         _updateEventListeners();
-
         return JSON.stringify(config);
     }
 
diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js
index 40785bded..4a0ac3612 100644
--- a/src/LiveDevelopment/main.js
+++ b/src/LiveDevelopment/main.js
@@ -70,7 +70,6 @@ define(function main(require, exports, module) {
         },
         isProUser: isProUser,
         elemHighlights: "hover", // default value, this will get updated when the extension loads
-        imageRibbon: true, // default value, this will get updated when the extension loads
         // this strings are used in RemoteFunctions.js
         // we need to pass this through config as remoteFunctions runs in browser context and cannot
         // directly reference Strings file
@@ -376,20 +375,6 @@ define(function main(require, exports, module) {
         }
     }
 
-    // this function is responsible to update image picker config
-    // called from live preview extension when preference changes
-    function updateImageRibbonConfig() {
-        const prefValue = PreferencesManager.get("livePreviewImagePicker");
-        config.imageRibbon = prefValue !== false; // default to true if undefined
-
-        if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
-            if (!prefValue) { MultiBrowserLiveDev.dismissLivePreviewBoxes(); } // to remove any existing image ribbons and UI boxes
-
-            MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
-            MultiBrowserLiveDev.registerHandlers();
-        }
-    }
-
     // init commands
     CommandManager.register(Strings.CMD_LIVE_HIGHLIGHT, Commands.FILE_LIVE_HIGHLIGHT, togglePreviewHighlight);
     CommandManager.register(Strings.CMD_RELOAD_LIVE_PREVIEW, Commands.CMD_RELOAD_LIVE_PREVIEW, _handleReloadLivePreviewCommand);
@@ -418,7 +403,6 @@ define(function main(require, exports, module) {
     exports.togglePreviewHighlight = togglePreviewHighlight;
     exports.setLivePreviewEditFeaturesActive = setLivePreviewEditFeaturesActive;
     exports.updateElementHighlightConfig = updateElementHighlightConfig;
-    exports.updateImageRibbonConfig = updateImageRibbonConfig;
     exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds;
     exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
     exports.hideHighlight = MultiBrowserLiveDev.hideHighlight;
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js
index cb2fd9350..4942e1522 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/main.js
+++ b/src/extensionsIntegrated/Phoenix-live-preview/main.js
@@ -113,12 +113,6 @@ define(function (require, exports, module) {
         description: Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_PREFERENCE
     });
 
-    // live preview image picker preference (whether to show image gallery when clicking images)
-    const PREFERENCE_PROJECT_IMAGE_RIBBON = "livePreviewImagePicker";
-    PreferencesManager.definePreference(PREFERENCE_PROJECT_IMAGE_RIBBON, "boolean", true, {
-        description: Strings.LIVE_PREVIEW_EDIT_IMAGE_RIBBON
-    });
-
     const LIVE_PREVIEW_PANEL_ID = "live-preview-panel";
     const LIVE_PREVIEW_IFRAME_ID = "panel-live-preview-frame";
     const LIVE_PREVIEW_IFRAME_HTML = `
@@ -425,7 +419,6 @@ define(function (require, exports, module) {
         if (isEditFeaturesActive) {
             items.push("---");
             items.push(Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON);
-            items.push(Strings.LIVE_PREVIEW_EDIT_IMAGE_RIBBON);
         }
 
         const rawMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
@@ -451,12 +444,6 @@ define(function (require, exports, module) {
                     return `✓ ${Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON}`;
                 }
                 return `${'\u00A0'.repeat(4)}${Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON}`;
-            } else if (item === Strings.LIVE_PREVIEW_EDIT_IMAGE_RIBBON) {
-                const isImageRibbonEnabled = PreferencesManager.get(PREFERENCE_PROJECT_IMAGE_RIBBON) !== false;
-                if(isImageRibbonEnabled) {
-                    return `✓ ${item}`;
-                }
-                return `${'\u00A0'.repeat(4)}${item}`;
             }
             return item;
         });
@@ -505,15 +492,6 @@ define(function (require, exports, module) {
                 const newMode = currentMode !== "click" ? "click" : "hover";
                 PreferencesManager.set(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, newMode);
                 return; // Don't dismiss highlights for this option
-            } else if (item === Strings.LIVE_PREVIEW_EDIT_IMAGE_RIBBON) {
-                // Don't allow image ribbon toggle if edit features are not active
-                if (!isEditFeaturesActive) {
-                    return;
-                }
-                // Toggle image ribbon preference
-                const currentEnabled = PreferencesManager.get(PREFERENCE_PROJECT_IMAGE_RIBBON);
-                PreferencesManager.set(PREFERENCE_PROJECT_IMAGE_RIBBON, !currentEnabled);
-                return; // Don't dismiss highlights for this option
             }
 
             // need to dismiss the previous highlighting and stuff
@@ -1318,15 +1296,8 @@ define(function (require, exports, module) {
             LiveDevelopment.updateElementHighlightConfig();
         });
 
-        // Handle image ribbon preference changes from this extension
-        PreferencesManager.on("change", PREFERENCE_PROJECT_IMAGE_RIBBON, function() {
-            LiveDevelopment.updateImageRibbonConfig();
-        });
-
         // Initialize element highlight config on startup
         LiveDevelopment.updateElementHighlightConfig();
-        // Initialize image ribbon config on startup
-        LiveDevelopment.updateImageRibbonConfig();
 
         LiveDevelopment.openLivePreview();
         LiveDevelopment.on(LiveDevelopment.EVENT_OPEN_PREVIEW_URL, _openLivePreviewURL);
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
index 253883cbe..4412f917c 100644
--- a/src/nls/root/strings.js
+++ b/src/nls/root/strings.js
@@ -205,7 +205,6 @@ define({
     "LIVE_PREVIEW_MODE_HIGHLIGHT": "Highlight Mode",
     "LIVE_PREVIEW_MODE_EDIT": "Edit Mode",
     "LIVE_PREVIEW_EDIT_HIGHLIGHT_ON": "Edit Highlights on Hover",
-    "LIVE_PREVIEW_EDIT_IMAGE_RIBBON": "Show Image Picker on Image click",
     "LIVE_PREVIEW_MODE_PREFERENCE": "{0} shows only the webpage, {1} connects the webpage to your code - click on elements to jump to their code and vice versa, {2} provides highlighting along with advanced element manipulation",
     "LIVE_PREVIEW_CONFIGURE_MODES": "Configure Live Preview Modes",
     "LIVE_PREVIEW_PRO_FEATURE_TITLE": "Pro Feature",

From ecd8235fd08f52ed36722ee3ab93e70004fee2cd Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 4 Oct 2025 00:10:37 +0530
Subject: [PATCH 14/25] refactor: use distinct icon for select image from
 computer button

---
 .../BrowserScripts/RemoteFunctions.js         | 109 ++++++++++--------
 1 file changed, 58 insertions(+), 51 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 933ddafe5..968635a21 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -1167,6 +1167,61 @@ function RemoteFunctions(config = {}) {
         return true;
     }
 
+    // the icons used in the live preview edit mode features
+    const ICONS = {
+        ai: `
+        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
+            <g fill="#fffbfb" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M30.701,41.663l-2.246,5.145c-0.864,1.978 -3.6,1.978 -4.464,0l-2.247,-5.145c-1.999,-4.579 -5.598,-8.224 -10.086,-10.216l-6.183,-2.745c-1.966,-0.873 -1.966,-3.733 0,-4.605l5.99,-2.659c4.604,-2.044 8.267,-5.824 10.232,-10.559l2.276,-5.483c0.844,-2.035 3.656,-2.035 4.5,0l2.276,5.483c1.965,4.735 5.628,8.515 10.232,10.559l5.99,2.659c1.966,0.873 1.966,3.733 0,4.605l-6.183,2.745c-4.489,1.992 -8.088,5.637 -10.087,10.216z"></path><path d="M30.701,41.663l-2.246,5.145c-0.864,1.978 -3.6,1.978 -4.464,0l-2.247,-5.145c-1.999,-4.579 -5.598,-8.224 -10.086,-10.216l-6.183,-2.745c-1.966,-0.873 -1.966,-3.733 0,-4.605l5.99,-2.659c4.604,-2.044 8.267,-5.824 10.232,-10.559l2.276,-5.483c0.844,-2.035 3.656,-2.035 4.5,0l2.276,5.483c1.965,4.735 5.628,8.515 10.232,10.559l5.99,2.659c1.966,0.873 1.966,3.733 0,4.605l-6.183,2.745c-4.489,1.992 -8.088,5.637 -10.087,10.216z"></path><g><path d="M51.578,57.887l-0.632,1.448c-0.462,1.06 -1.93,1.06 -2.393,0l-0.632,-1.448c-1.126,-2.582 -3.155,-4.637 -5.686,-5.762l-1.946,-0.865c-1.052,-0.468 -1.052,-1.998 0,-2.465l1.838,-0.816c2.596,-1.153 4.661,-3.285 5.768,-5.955l0.649,-1.565c0.452,-1.091 1.96,-1.091 2.412,0l0.649,1.565c1.107,2.669 3.172,4.801 5.768,5.955l1.837,0.816c1.053,0.468 1.053,1.998 0,2.465l-1.946,0.865c-2.531,1.125 -4.56,3.18 -5.686,5.762z"></path><path d="M51.578,57.887l-0.632,1.448c-0.462,1.06 -1.93,1.06 -2.393,0l-0.632,-1.448c-1.126,-2.582 -3.155,-4.637 -5.686,-5.762l-1.946,-0.865c-1.052,-0.468 -1.052,-1.998 0,-2.465l1.838,-0.816c2.596,-1.153 4.661,-3.285 5.768,-5.955l0.649,-1.565c0.452,-1.091 1.96,-1.091 2.412,0l0.649,1.565c1.107,2.669 3.172,4.801 5.768,5.955l1.837,0.816c1.053,0.468 1.053,1.998 0,2.465l-1.946,0.865c-2.531,1.125 -4.56,3.18 -5.686,5.762z"></path></g></g></g>
+        </svg>
+        `,
+
+        arrowUp: `
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.59 5.58L20 12l-8-8-8 8z"/>
+        </svg>
+      `,
+
+        edit: `
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+        </svg>
+      `,
+
+        duplicate: `
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M18 3H4C3.44772 3 3 3.44772 3 4V18C3 18.5523 2.55228 19 2 19C1.44772 19 1 18.5523 1 18V4C1 2.34315 2.34315 1 4 1H18C18.5523 1 19 1.44772 19 2C19 2.55228 18.5523 3 18 3Z"/>
+          <path d="M13 11C13 10.4477 13.4477 10 14 10C14.5523 10 15 10.4477 15 11V13H17C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H15V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V15H11C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13H13V11Z"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M20 5C21.6569 5 23 6.34315 23 8V20C23 21.6569 21.6569 23 20 23H8C6.34315 23 5 21.6569 5 20V8C5 6.34315 6.34315 5 8 5H20ZM20 7C20.5523 7 21 7.44772 21 8V20C21 20.5523 20.5523 21 20 21H8C7.44772 21 7 20.5523 7 20V8C7 7.44772 7.44772 7 8 7H20Z"/>
+        </svg>
+      `,
+
+        trash: `
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M6 7V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h3v2h-2l-1.5 12.5a2 2 0 0
+          1-2 1.5H8.5a2 2 0 0 1-2-1.5L5 9H3V7h3zm2 0h8V5H8v2z"/>
+        </svg>
+      `,
+
+        imageGallery: `
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+          <path d="M1 3v16h2V5h16V3H1z"/>
+        </svg>
+      `,
+
+        selectImageFromComputer: `
+        <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
+          <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
+        </svg>
+      `,
+
+        downloadImage: `
+        <svg viewBox="0 0 640 640" fill="currentColor">
+          <path d="M352 96C352 78.3 337.7 64 320 64C302.3 64 288 78.3 288 96L288 306.7L246.6 265.3C234.1 252.8 213.8 252.8 201.3 265.3C188.8 277.8 188.8 298.1 201.3 310.6L297.3 406.6C309.8 419.1 330.1 419.1 342.6 406.6L438.6 310.6C451.1 298.1 451.1 277.8 438.6 265.3C426.1 252.8 405.8 252.8 393.3 265.3L352 306.7L352 96zM160 384C124.7 384 96 412.7 96 448L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 448C544 412.7 515.3 384 480 384L433.1 384L376.5 440.6C345.3 471.8 294.6 471.8 263.4 440.6L206.9 384L160 384zM464 440C477.3 440 488 450.7 488 464C488 477.3 477.3 488 464 488C450.7 488 440 477.3 440 464C440 450.7 450.7 440 464 440z"/>
+        </svg>
+      `
+    };
+
     /**
      * This is for the advanced DOM options that appears when a DOM element is clicked
      * advanced options like: 'select parent', 'duplicate', 'delete'
@@ -1238,49 +1293,6 @@ function RemoteFunctions(config = {}) {
             const showEditTextOption = _shouldShowEditTextOption(this.element);
             const showSelectParentOption = _shouldShowSelectParentOption(this.element);
 
-            // the icons that is displayed in the box
-            const ICONS = {
-                ai: `
-                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
-                    <g fill="#fffbfb" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M30.701,41.663l-2.246,5.145c-0.864,1.978 -3.6,1.978 -4.464,0l-2.247,-5.145c-1.999,-4.579 -5.598,-8.224 -10.086,-10.216l-6.183,-2.745c-1.966,-0.873 -1.966,-3.733 0,-4.605l5.99,-2.659c4.604,-2.044 8.267,-5.824 10.232,-10.559l2.276,-5.483c0.844,-2.035 3.656,-2.035 4.5,0l2.276,5.483c1.965,4.735 5.628,8.515 10.232,10.559l5.99,2.659c1.966,0.873 1.966,3.733 0,4.605l-6.183,2.745c-4.489,1.992 -8.088,5.637 -10.087,10.216z"></path><path d="M30.701,41.663l-2.246,5.145c-0.864,1.978 -3.6,1.978 -4.464,0l-2.247,-5.145c-1.999,-4.579 -5.598,-8.224 -10.086,-10.216l-6.183,-2.745c-1.966,-0.873 -1.966,-3.733 0,-4.605l5.99,-2.659c4.604,-2.044 8.267,-5.824 10.232,-10.559l2.276,-5.483c0.844,-2.035 3.656,-2.035 4.5,0l2.276,5.483c1.965,4.735 5.628,8.515 10.232,10.559l5.99,2.659c1.966,0.873 1.966,3.733 0,4.605l-6.183,2.745c-4.489,1.992 -8.088,5.637 -10.087,10.216z"></path><g><path d="M51.578,57.887l-0.632,1.448c-0.462,1.06 -1.93,1.06 -2.393,0l-0.632,-1.448c-1.126,-2.582 -3.155,-4.637 -5.686,-5.762l-1.946,-0.865c-1.052,-0.468 -1.052,-1.998 0,-2.465l1.838,-0.816c2.596,-1.153 4.661,-3.285 5.768,-5.955l0.649,-1.565c0.452,-1.091 1.96,-1.091 2.412,0l0.649,1.565c1.107,2.669 3.172,4.801 5.768,5.955l1.837,0.816c1.053,0.468 1.053,1.998 0,2.465l-1.946,0.865c-2.531,1.125 -4.56,3.18 -5.686,5.762z"></path><path d="M51.578,57.887l-0.632,1.448c-0.462,1.06 -1.93,1.06 -2.393,0l-0.632,-1.448c-1.126,-2.582 -3.155,-4.637 -5.686,-5.762l-1.946,-0.865c-1.052,-0.468 -1.052,-1.998 0,-2.465l1.838,-0.816c2.596,-1.153 4.661,-3.285 5.768,-5.955l0.649,-1.565c0.452,-1.091 1.96,-1.091 2.412,0l0.649,1.565c1.107,2.669 3.172,4.801 5.768,5.955l1.837,0.816c1.053,0.468 1.053,1.998 0,2.465l-1.946,0.865c-2.531,1.125 -4.56,3.18 -5.686,5.762z"></path></g></g></g>
-                </svg>
-                `,
-
-                arrowUp: `
-                <svg viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.59 5.58L20 12l-8-8-8 8z"/>
-                </svg>
-              `,
-
-                edit: `
-                <svg viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
-                </svg>
-              `,
-
-                duplicate: `
-                <svg viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M18 3H4C3.44772 3 3 3.44772 3 4V18C3 18.5523 2.55228 19 2 19C1.44772 19 1 18.5523 1 18V4C1 2.34315 2.34315 1 4 1H18C18.5523 1 19 1.44772 19 2C19 2.55228 18.5523 3 18 3Z"/>
-                  <path d="M13 11C13 10.4477 13.4477 10 14 10C14.5523 10 15 10.4477 15 11V13H17C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H15V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V15H11C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13H13V11Z"/>
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M20 5C21.6569 5 23 6.34315 23 8V20C23 21.6569 21.6569 23 20 23H8C6.34315 23 5 21.6569 5 20V8C5 6.34315 6.34315 5 8 5H20ZM20 7C20.5523 7 21 7.44772 21 8V20C21 20.5523 20.5523 21 20 21H8C7.44772 21 7 20.5523 7 20V8C7 7.44772 7.44772 7 8 7H20Z"/>
-                </svg>
-              `,
-
-                trash: `
-                <svg viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M6 7V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h3v2h-2l-1.5 12.5a2 2 0 0
-                  1-2 1.5H8.5a2 2 0 0 1-2-1.5L5 9H3V7h3zm2 0h8V5H8v2z"/>
-                </svg>
-              `,
-
-                imageGallery: `
-                <svg viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-                  <path d="M1 3v16h2V5h16V3H1z"/>
-                </svg>
-              `
-            };
-
             let content = `<div class="node-options">`;
 
             // not sure if we need to hide/show the AI icon, right now showing always
@@ -2293,13 +2305,12 @@ function RemoteFunctions(config = {}) {
                         box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
                     }
 
-
                     .phoenix-ribbon-close {
                         background: rgba(21,25,36,0.65) !important;
                         border: 1px solid rgba(255,255,255,0.14) !important;
                         color: #eaeaf0 !important;
                         cursor: pointer !important;
-                        padding: 2px 6px !important;
+                        padding: 2px 7px 1px 7px !important;
                         border-radius: 6px !important;
                         margin-right: 16px !important;
                         transition: all 0.2s ease !important;
@@ -2444,9 +2455,7 @@ function RemoteFunctions(config = {}) {
                                 </div>
                                 <div class="phoenix-ribbon-select">
                                     <button class="phoenix-select-image-btn" title="${config.strings.imageGallerySelectFromComputer}">
-                                        <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
-                                            <path d="M22,16V4A2,2 0 0,0 20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16M11,12L13.5,15L17,10.5L20,15H8M2,6V20A2,2 0 0,0 4,22H18V20H4V6H2Z"/>
-                                        </svg>
+                                        ${ICONS.selectImageFromComputer}
                                     </button>
                                     <input type="file" class="phoenix-file-input" accept="image/*" style="display: none;">
                                 </div>
@@ -2867,9 +2876,7 @@ function RemoteFunctions(config = {}) {
                 const downloadIcon = window.document.createElement('div');
                 downloadIcon.className = 'phoenix-download-icon';
                 downloadIcon.title = config.strings.imageGalleryUseImage;
-                downloadIcon.innerHTML = `<svg viewBox="0 0 640 640" fill="currentColor">
-                  <path d="M352 96C352 78.3 337.7 64 320 64C302.3 64 288 78.3 288 96L288 306.7L246.6 265.3C234.1 252.8 213.8 252.8 201.3 265.3C188.8 277.8 188.8 298.1 201.3 310.6L297.3 406.6C309.8 419.1 330.1 419.1 342.6 406.6L438.6 310.6C451.1 298.1 451.1 277.8 438.6 265.3C426.1 252.8 405.8 252.8 393.3 265.3L352 306.7L352 96zM160 384C124.7 384 96 412.7 96 448L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 448C544 412.7 515.3 384 480 384L433.1 384L376.5 440.6C345.3 471.8 294.6 471.8 263.4 440.6L206.9 384L160 384zM464 440C477.3 440 488 450.7 488 464C488 477.3 477.3 488 464 488C450.7 488 440 477.3 440 464C440 450.7 450.7 440 464 440z"/>
-                </svg>`;
+                downloadIcon.innerHTML = ICONS.downloadImage;
 
                 // when the image is clicked we download the image
                 thumbDiv.addEventListener('click', (e) => {

From e5c34adcb05f0ac9736aa124fd44cdff5492f193 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 4 Oct 2025 13:10:55 +0530
Subject: [PATCH 15/25] feat: ask users to select the folder where they want to
 download the image

---
 src/LiveDevelopment/LivePreviewEdit.js   | 102 +++++++++++++++++------
 src/htmlContent/image-folder-dialog.html |  19 +++++
 2 files changed, 95 insertions(+), 26 deletions(-)
 create mode 100644 src/htmlContent/image-folder-dialog.html

diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
index 0a4184130..e9cf9db51 100644
--- a/src/LiveDevelopment/LivePreviewEdit.js
+++ b/src/LiveDevelopment/LivePreviewEdit.js
@@ -31,7 +31,10 @@ define(function (require, exports, module) {
     const ProjectManager = require("project/ProjectManager");
     const FileSystem = require("filesystem/FileSystem");
     const PathUtils = require("thirdparty/path-utils/path-utils");
+    const Dialogs = require("widgets/Dialogs");
     const ProDialogs = require("services/pro-dialogs");
+    const ImageFolderDialogTemplate = require("text!htmlContent/image-folder-dialog.html");
+
 
     const KernalModeTrust = window.KernalModeTrust;
     if(!KernalModeTrust){
@@ -757,52 +760,99 @@ define(function (require, exports, module) {
     }
 
     /**
-     * This function is called when 'use this image' button is clicked in the image ribbon gallery
-     * or user loads an image file from the computer
-     * this is responsible to download the image in the appropriate place
-     * and also change the src attribute of the element (by calling appropriate helper functions)
-     * @param {Object} message - the message object which stores all the required data for this operation
+     * Downloads image to the specified folder
+     * @private
+     * @param {Object} message - The message containing image download info
+     * @param {string} folderPath - Relative path to the folder
      */
-    function _handleUseThisImage(message) {
+    function _downloadToFolder(message, folderPath) {
+        const projectRoot = ProjectManager.getProjectRoot();
+        if (!projectRoot) {
+            console.error('No project root found');
+            return;
+        }
+
         const filename = message.filename;
         const extnName = message.extnName || "jpg";
 
-        const projectRoot = ProjectManager.getProjectRoot();
-        if (!projectRoot) { return; }
+        // the folder path should always end with /
+        if (!folderPath.endsWith('/')) {
+            folderPath += '/';
+        }
 
-        // phoenix-assets folder, all the images will be stored inside this
-        const phoenixAssetsPath = projectRoot.fullPath + "phoenix-code-assets/";
-        const phoenixAssetsDir = FileSystem.getDirectoryForPath(phoenixAssetsPath);
+        const targetPath = projectRoot.fullPath + folderPath;
+        const targetDir = FileSystem.getDirectoryForPath(targetPath);
 
-        // check if the phoenix-assets dir exists
-        // if present, download the image inside it, if not create the dir and then download the image inside it
-        phoenixAssetsDir.exists((err, exists) => {
+        // the directory name that user wrote, first check if it exists or not
+        // if it doesn't exist we create it and then download the image inside it
+        targetDir.exists((err, exists) => {
             if (err) { return; }
 
             if (!exists) {
-                phoenixAssetsDir.create((err) => {
-                    if (err) {
-                        console.error('Error creating phoenix-code-assets directory:', err);
-                        return;
-                    }
-                    _downloadImageToPhoenixAssets(message, filename, extnName, phoenixAssetsDir);
+                targetDir.create((err) => {
+                    if (err) { return; }
+                    _downloadImageToDirectory(message, filename, extnName, targetDir);
                 });
             } else {
-                _downloadImageToPhoenixAssets(message, filename, extnName, phoenixAssetsDir);
+                _downloadImageToDirectory(message, filename, extnName, targetDir);
             }
         });
     }
 
     /**
-     * Helper function to download image to phoenix-assets folder
+     * This function is called when 'use this image' button is clicked in the image ribbon gallery
+     * or user loads an image file from the computer
+     * this is responsible to download the image in the appropriate place
+     * and also change the src attribute of the element (by calling appropriate helper functions)
+     *
+     * @param {Object} message - the message object which stores all the required data for this operation
+     */
+    function _handleUseThisImage(message) {
+        // show the dialog with a text box to select a folder
+        // dialog html is written in 'image-folder-dialog.html'
+        const dialog = Dialogs.showModalDialogUsingTemplate(ImageFolderDialogTemplate, false);
+        const $dlg = dialog.getElement();
+        const $input = $dlg.find("#folder-path-input");
+
+        // focus the input box
+        setTimeout(function() {
+            $input.focus();
+        }, 100);
+
+        // handle dialog button clicks
+        $dlg.one("buttonClick", function(e, buttonId) {
+            if (buttonId === Dialogs.DIALOG_BTN_OK) {
+                const folderPath = $input.val().trim();
+                dialog.close();
+                // if folder path is specified we download in that folder
+                // else we download in the project root
+                if (folderPath) {
+                    _downloadToFolder(message, folderPath);
+                } else {
+                    _downloadToFolder(message, '');
+                }
+            } else if (buttonId === Dialogs.DIALOG_BTN_CANCEL) {
+                // if cancel is clicked, we abort the download
+                dialog.close();
+            }
+        });
+    }
+
+    /**
+     * Helper function to download image to the specified directory
+     *
+     * @param {Object} message - Message containing image download info
+     * @param {string} filename - Name of the image file
+     * @param {string} extnName - File extension (e.g., "jpg")
+     * @param {Directory} targetDir - Target directory to save the image
      */
-    function _downloadImageToPhoenixAssets(message, filename, extnName, phoenixAssetsDir) {
-        getUniqueFilename(phoenixAssetsDir.fullPath, filename, extnName).then((uniqueFilename) => {
+    function _downloadImageToDirectory(message, filename, extnName, targetDir) {
+        getUniqueFilename(targetDir.fullPath, filename, extnName).then((uniqueFilename) => {
             // check if the image is loaded from computer or from remote
             if (message.isLocalFile && message.imageData) {
-                _handleUseThisImageLocalFiles(message, uniqueFilename, phoenixAssetsDir);
+                _handleUseThisImageLocalFiles(message, uniqueFilename, targetDir);
             } else {
-                _handleUseThisImageRemote(message, uniqueFilename, phoenixAssetsDir);
+                _handleUseThisImageRemote(message, uniqueFilename, targetDir);
             }
         }).catch(error => {
             console.error('Something went wrong when trying to use this image', error);
diff --git a/src/htmlContent/image-folder-dialog.html b/src/htmlContent/image-folder-dialog.html
new file mode 100644
index 000000000..02389489a
--- /dev/null
+++ b/src/htmlContent/image-folder-dialog.html
@@ -0,0 +1,19 @@
+<div class="image-folder-dialog template modal">
+    <div class="modal-header">
+        <h1 class="dialog-title">Select Folder to Save Image</h1>
+    </div>
+    <div class="modal-body">
+        <p>Choose where to download the image:</p>
+        <input type="text"
+               id="folder-path-input"
+               placeholder="Type folder path (e.g., assets/images/)"
+               value=""
+               autocomplete="off"
+               spellcheck="false"
+               style="width: 100%; height: 30px; padding: 5px; box-sizing: border-box;">
+    </div>
+    <div class="modal-footer">
+        <button class="dialog-button btn" data-button-id="cancel">Cancel</button>
+        <button class="dialog-button btn primary" data-button-id="ok">OK</button>
+    </div>
+</div>

From 99c115a01b88d473d65cb86f7f6d125c07d9b871 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sun, 5 Oct 2025 21:39:04 +0530
Subject: [PATCH 16/25] feat: show folder suggestions when typing a folder name
 in the dialog

---
 src/LiveDevelopment/LivePreviewEdit.js     | 147 +++++++++++++++++++--
 src/htmlContent/image-folder-dialog.html   |  10 +-
 src/styles/brackets_patterns_override.less |  87 ++++++++++++
 3 files changed, 231 insertions(+), 13 deletions(-)

diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
index e9cf9db51..76460a4bb 100644
--- a/src/LiveDevelopment/LivePreviewEdit.js
+++ b/src/LiveDevelopment/LivePreviewEdit.js
@@ -31,6 +31,7 @@ define(function (require, exports, module) {
     const ProjectManager = require("project/ProjectManager");
     const FileSystem = require("filesystem/FileSystem");
     const PathUtils = require("thirdparty/path-utils/path-utils");
+    const StringMatch = require("utils/StringMatch");
     const Dialogs = require("widgets/Dialogs");
     const ProDialogs = require("services/pro-dialogs");
     const ImageFolderDialogTemplate = require("text!htmlContent/image-folder-dialog.html");
@@ -799,6 +800,120 @@ define(function (require, exports, module) {
         });
     }
 
+    // these folders are generally very large, and we don't scan them otherwise it might freeze the UI
+    const EXCLUDED_FOLDERS = ['node_modules', 'bower_components', '.git', '.npm', '.yarn'];
+
+    /**
+     * this function scans all the directories recursively
+     * and then add the relative paths of the directories to the folderList array
+     *
+     * @param {Directory} directory - The parent directory to scan
+     * @param {string} relativePath - The relative path from project root
+     * @param {Array<string>} folderList - Array to store all discovered folder paths
+     * @return {Promise} Resolves when scanning is complete
+     */
+    function _scanDirectories(directory, relativePath, folderList) {
+        return new Promise((resolve) => {
+            directory.getContents((err, contents) => {
+                if (err) {
+                    resolve();
+                    return;
+                }
+
+                const directories = contents.filter(entry => entry.isDirectory);
+                const scanPromises = [];
+
+                directories.forEach(dir => {
+                    // if its an excluded folder we ignore it
+                    if (EXCLUDED_FOLDERS.includes(dir.name)) {
+                        return;
+                    }
+
+                    const dirRelativePath = relativePath ? `${relativePath}${dir.name}/` : `${dir.name}/`;
+                    folderList.push(dirRelativePath);
+
+                    // also check subdirectories for this dir
+                    scanPromises.push(_scanDirectories(dir, dirRelativePath, folderList));
+                });
+
+                Promise.all(scanPromises).then(() => resolve());
+            });
+        });
+    }
+
+    /**
+     * Renders folder suggestions as a dropdown in the UI with fuzzy match highlighting
+     *
+     * @param {Array<string|Object>} matches - Array of folder paths (strings) or fuzzy match objects with stringRanges
+     * @param {JQuery} $suggestions - jQuery element for the suggestions container
+     * @param {JQuery} $input - jQuery element for the input field
+     */
+    function _renderFolderSuggestions(matches, $suggestions, $input) {
+        if (matches.length === 0) {
+            $suggestions.empty();
+            return;
+        }
+
+        let html = '<ul class="folder-suggestions-list">';
+        matches.forEach((match) => {
+            let displayHTML = '';
+            let folderPath = '';
+
+            // Check if match is a string or an object
+            if (typeof match === 'string') {
+                // Simple string (from empty query showing folders)
+                displayHTML = match;
+                folderPath = match;
+            } else if (match && match.stringRanges) {
+                // fuzzy match, highlight matched chars
+                match.stringRanges.forEach(range => {
+                    if (range.matched) {
+                        displayHTML += `<span class="folder-match-highlight">${range.text}</span>`;
+                    } else {
+                        displayHTML += range.text;
+                    }
+                });
+                folderPath = match.label || '';
+            }
+
+            html += `<li class="folder-suggestion-item" data-path="${folderPath}">${displayHTML}</li>`;
+        });
+        html += '</ul>';
+
+        $suggestions.html(html);
+
+        // when a suggestion is clicked we add the folder path in the input box
+        $suggestions.find('.folder-suggestion-item').on('click', function() {
+            const folderPath = $(this).data('path');
+            $input.val(folderPath);
+            $suggestions.empty();
+        });
+    }
+
+    /**
+     * This function is responsible to update the folder suggestion everytime a new char is inserted in the input field
+     *
+     * @param {string} query - The search query from the input field
+     * @param {Array<string>} folderList - List of all available folder paths
+     * @param {StringMatch.StringMatcher} stringMatcher - StringMatcher instance for fuzzy matching
+     * @param {JQuery} $suggestions - jQuery element for the suggestions container
+     * @param {JQuery} $input - jQuery element for the input field
+     */
+    function _updateFolderSuggestions(query, folderList, stringMatcher, $suggestions, $input) {
+        if (!query || query.trim() === '') {
+            return;
+        }
+
+        // filter folders using fuzzy matching
+        const matches = folderList
+            .map(folder => stringMatcher.match(folder, query))
+            .filter(result => result !== null && result !== undefined)
+            .sort((a, b) => b.matchGoodness - a.matchGoodness)
+            .slice(0, 5);
+
+        _renderFolderSuggestions(matches, $suggestions, $input);
+    }
+
     /**
      * This function is called when 'use this image' button is clicked in the image ribbon gallery
      * or user loads an image file from the computer
@@ -808,11 +923,28 @@ define(function (require, exports, module) {
      * @param {Object} message - the message object which stores all the required data for this operation
      */
     function _handleUseThisImage(message) {
+        const projectRoot = ProjectManager.getProjectRoot();
+        if (!projectRoot) { return; }
+
         // show the dialog with a text box to select a folder
         // dialog html is written in 'image-folder-dialog.html'
         const dialog = Dialogs.showModalDialogUsingTemplate(ImageFolderDialogTemplate, false);
         const $dlg = dialog.getElement();
         const $input = $dlg.find("#folder-path-input");
+        const $suggestions = $dlg.find("#folder-suggestions");
+
+        let folderList = [];
+        let stringMatcher = null;
+
+        // Scan project directories and setup event handlers
+        _scanDirectories(projectRoot, '', folderList).then(() => {
+            stringMatcher = new StringMatch.StringMatcher({ segmentedSearch: true });
+
+            // input event handler
+            $input.on('input', function() {
+                _updateFolderSuggestions($input.val(), folderList, stringMatcher, $suggestions, $input);
+            });
+        });
 
         // focus the input box
         setTimeout(function() {
@@ -820,21 +952,14 @@ define(function (require, exports, module) {
         }, 100);
 
         // handle dialog button clicks
+        // so the logic is either its an ok button click or cancel button click, so if its ok click
+        // then we download image in that folder and close the dialog, in close btn click we directly close the dialog
         $dlg.one("buttonClick", function(e, buttonId) {
             if (buttonId === Dialogs.DIALOG_BTN_OK) {
                 const folderPath = $input.val().trim();
-                dialog.close();
-                // if folder path is specified we download in that folder
-                // else we download in the project root
-                if (folderPath) {
-                    _downloadToFolder(message, folderPath);
-                } else {
-                    _downloadToFolder(message, '');
-                }
-            } else if (buttonId === Dialogs.DIALOG_BTN_CANCEL) {
-                // if cancel is clicked, we abort the download
-                dialog.close();
+                _downloadToFolder(message, folderPath);
             }
+            dialog.close();
         });
     }
 
diff --git a/src/htmlContent/image-folder-dialog.html b/src/htmlContent/image-folder-dialog.html
index 02389489a..28c550e97 100644
--- a/src/htmlContent/image-folder-dialog.html
+++ b/src/htmlContent/image-folder-dialog.html
@@ -9,8 +9,14 @@ <h1 class="dialog-title">Select Folder to Save Image</h1>
                placeholder="Type folder path (e.g., assets/images/)"
                value=""
                autocomplete="off"
-               spellcheck="false"
-               style="width: 100%; height: 30px; padding: 5px; box-sizing: border-box;">
+               spellcheck="false">
+
+        <!-- the folder suggestions will come here dynamically -->
+        <div id="folder-suggestions"></div>
+
+        <p class="folder-help-text">
+            💡 Tip: Type to filter folders or create a new path
+        </p>
     </div>
     <div class="modal-footer">
         <button class="dialog-button btn" data-button-id="cancel">Cancel</button>
diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
index 8ea94df2d..0b81ca219 100644
--- a/src/styles/brackets_patterns_override.less
+++ b/src/styles/brackets_patterns_override.less
@@ -2518,3 +2518,90 @@ code {
         }
     }
 }
+
+// image folder selection dialog
+.image-folder-dialog {
+    #folder-path-input {
+        width: 100%;
+        height: 30px;
+        padding: 5px;
+        box-sizing: border-box;
+        margin-bottom: 8px;
+    }
+
+    #folder-suggestions {
+        max-height: 180px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        border: 1px solid @bc-btn-border;
+        border-radius: @bc-border-radius;
+        background-color: @bc-panel-bg-alt;
+
+        .dark & {
+            border: 1px solid @dark-bc-btn-border;
+            background-color: @dark-bc-panel-bg-alt;
+        }
+
+        &:empty {
+            display: none;
+        }
+
+        .folder-suggestions-list {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .folder-suggestion-item {
+            padding: 6px 10px;
+            cursor: pointer;
+            font-size: 12px;
+            color: @bc-text;
+            transition: background-color 0.1s;
+            border-left: 3px solid transparent;
+
+            .dark & {
+                color: @dark-bc-text;
+            }
+
+            &:hover {
+                background-color: @bc-panel-bg-hover-alt;
+
+                .dark & {
+                    background-color: @dark-bc-panel-bg-hover-alt;
+                }
+            }
+
+            &.highlight {
+                background-color: @bc-bg-highlight;
+                border-left-color: @bc-primary-btn-bg;
+
+                .dark & {
+                    background-color: @dark-bc-bg-highlight;
+                    border-left-color: @dark-bc-primary-btn-bg;
+                }
+            }
+        }
+
+        .folder-match-highlight {
+            font-weight: @font-weight-semibold;
+            color: @bc-primary-btn-bg;
+
+            .dark & {
+                color: @dark-bc-primary-btn-bg;
+            }
+        }
+    }
+
+    .folder-help-text {
+        margin-top: 8px;
+        margin-bottom: 0;
+        font-size: 11px;
+        color: @bc-text-quiet;
+        user-select: none;
+
+        .dark & {
+            color: @dark-bc-text-quiet;
+        }
+    }
+}

From 0da42a463e03467e2466fa12bd6d92b02a399601 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sun, 5 Oct 2025 22:27:24 +0530
Subject: [PATCH 17/25] feat: add keyboard navigation in the suggestions list

---
 src/LiveDevelopment/LivePreviewEdit.js     | 80 ++++++++++++++++++++--
 src/styles/brackets_patterns_override.less |  2 +-
 2 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
index 76460a4bb..4715523ba 100644
--- a/src/LiveDevelopment/LivePreviewEdit.js
+++ b/src/LiveDevelopment/LivePreviewEdit.js
@@ -855,7 +855,7 @@ define(function (require, exports, module) {
         }
 
         let html = '<ul class="folder-suggestions-list">';
-        matches.forEach((match) => {
+        matches.forEach((match, index) => {
             let displayHTML = '';
             let folderPath = '';
 
@@ -876,7 +876,9 @@ define(function (require, exports, module) {
                 folderPath = match.label || '';
             }
 
-            html += `<li class="folder-suggestion-item" data-path="${folderPath}">${displayHTML}</li>`;
+            // first item should be selected by default
+            const selectedClass = index === 0 ? ' selected' : '';
+            html += `<li class="folder-suggestion-item${selectedClass}" data-path="${folderPath}">${displayHTML}</li>`;
         });
         html += '</ul>';
 
@@ -914,6 +916,70 @@ define(function (require, exports, module) {
         _renderFolderSuggestions(matches, $suggestions, $input);
     }
 
+    /**
+     * register the input box handlers (folder selection dialog)
+     * also registers the 'arrow up/down and enter' key handler for folder selection and move the selected folder,
+     * in the list of suggestions
+     *
+     * @param {JQuery} $input - the input box element
+     * @param {JQuery} $suggestions - the suggestions list element
+     * @param {JQuery} $dlg - the dialog box element
+     */
+    function _registerFolderDialogInputHandlers($input, $suggestions, $dlg) {
+        // keyboard navigation handler for arrow keys
+        $input.on('keydown', function(e) {
+            const $items = $suggestions.find('.folder-suggestion-item');
+            const $selected = $items.filter('.selected');
+
+            if (e.keyCode === 40) { // arrow down key
+                e.preventDefault();
+                if ($items.length === 0) { return; }
+
+                if ($selected.length === 0) {
+                    $items.first().addClass('selected');
+                } else {
+                    const currentIndex = $items.index($selected);
+                    $selected.removeClass('selected');
+                    const nextIndex = (currentIndex + 1) % $items.length;
+                    $items.eq(nextIndex).addClass('selected');
+                }
+            } else if (e.keyCode === 38) { // arrow up key
+                e.preventDefault();
+                if ($items.length === 0) { return; }
+
+                if ($selected.length === 0) {
+                    $items.last().addClass('selected');
+                } else {
+                    const currentIndex = $items.index($selected);
+                    $selected.removeClass('selected');
+                    const nextIndex = (currentIndex - 1 + $items.length) % $items.length;
+                    $items.eq(nextIndex).addClass('selected');
+                }
+            }
+        });
+
+        // for enter key, we're using keyup handler because keydown was interfering with dialog's default behaviour
+        // when enter key is pressed, we check if there are any selected folders in the suggestions
+        // if yes, we type the folder path in the input box,
+        // if no, we click the ok button of the dialog
+        $input.on('keyup', function(e) {
+            if (e.keyCode === 13) { // enter key
+                const $items = $suggestions.find('.folder-suggestion-item');
+                const $selected = $items.filter('.selected');
+
+                // if there's a selected suggestion, use it
+                if ($selected.length > 0) {
+                    const folderPath = $selected.data('path');
+                    $input.val(folderPath);
+                    $suggestions.empty();
+                } else {
+                    // no suggestions, trigger OK button click
+                    $dlg.find('[data-button-id="ok"]').click();
+                }
+            }
+        });
+    }
+
     /**
      * This function is called when 'use this image' button is clicked in the image ribbon gallery
      * or user loads an image file from the computer
@@ -939,13 +1005,13 @@ define(function (require, exports, module) {
         // Scan project directories and setup event handlers
         _scanDirectories(projectRoot, '', folderList).then(() => {
             stringMatcher = new StringMatch.StringMatcher({ segmentedSearch: true });
-
-            // input event handler
-            $input.on('input', function() {
-                _updateFolderSuggestions($input.val(), folderList, stringMatcher, $suggestions, $input);
-            });
         });
 
+        // input event handler
+        $input.on('input', function() {
+            _updateFolderSuggestions($input.val(), folderList, stringMatcher, $suggestions, $input);
+        });
+        _registerFolderDialogInputHandlers($input, $suggestions, $dlg);
         // focus the input box
         setTimeout(function() {
             $input.focus();
diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
index 0b81ca219..b8c4895df 100644
--- a/src/styles/brackets_patterns_override.less
+++ b/src/styles/brackets_patterns_override.less
@@ -2572,7 +2572,7 @@ code {
                 }
             }
 
-            &.highlight {
+            &.selected {
                 background-color: @bc-bg-highlight;
                 border-left-color: @bc-primary-btn-bg;
 

From cb6fdc7703d8573d8e6bdbc4737f66c3b461cfd4 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Mon, 6 Oct 2025 19:27:20 +0530
Subject: [PATCH 18/25] feat: improve match goodness algorithm to show more
 useful hints

---
 src/LiveDevelopment/LivePreviewEdit.js   | 35 ++++++++++++++++++++----
 src/htmlContent/image-folder-dialog.html |  2 +-
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
index 4715523ba..fe5939890 100644
--- a/src/LiveDevelopment/LivePreviewEdit.js
+++ b/src/LiveDevelopment/LivePreviewEdit.js
@@ -908,12 +908,37 @@ define(function (require, exports, module) {
 
         // filter folders using fuzzy matching
         const matches = folderList
-            .map(folder => stringMatcher.match(folder, query))
-            .filter(result => result !== null && result !== undefined)
-            .sort((a, b) => b.matchGoodness - a.matchGoodness)
-            .slice(0, 5);
+            .map(folder => {
+                const result = stringMatcher.match(folder, query);
+                if (result) {
+                    // get the last folder name (e.g., "assets/images/" -> "images")
+                    const folderPath = result.label || folder;
+                    const segments = folderPath.split('/').filter(s => s.length > 0);
+                    const lastSegment = segments[segments.length - 1] || '';
+                    result.folderName = lastSegment.toLowerCase();
+
+                    // we need to boost the score significantly if the last folder segment starts with the query
+                    // This ensures folders like "images/" rank higher than "testing/maps/google/" when typing "image"
+                    // note: here testing/maps/google has all the chars of 'image'
+                    if (lastSegment.toLowerCase().startsWith(query.toLowerCase())) {
+                        // Use a large positive boost (matchGoodness is negative, so we subtract a large negative number)
+                        result.matchGoodness -= 10000;
+                    }
+                    // Also boost (but less) if the last segment contains the query as a substring
+                    else if (lastSegment.toLowerCase().includes(query.toLowerCase())) {
+                        result.matchGoodness -= 1000;
+                    }
+                }
+                return result;
+            })
+            .filter(result => result !== null && result !== undefined);
+
+        // Sort by matchGoodness first (prefix matches will have best scores),
+        // then alphabetically by folder name, then by full path
+        StringMatch.multiFieldSort(matches, { matchGoodness: 0, folderName: 1, label: 2 });
 
-        _renderFolderSuggestions(matches, $suggestions, $input);
+        const topMatches = matches.slice(0, 5);
+        _renderFolderSuggestions(topMatches, $suggestions, $input);
     }
 
     /**
diff --git a/src/htmlContent/image-folder-dialog.html b/src/htmlContent/image-folder-dialog.html
index 28c550e97..47dcdacb3 100644
--- a/src/htmlContent/image-folder-dialog.html
+++ b/src/htmlContent/image-folder-dialog.html
@@ -15,7 +15,7 @@ <h1 class="dialog-title">Select Folder to Save Image</h1>
         <div id="folder-suggestions"></div>
 
         <p class="folder-help-text">
-            💡 Tip: Type to filter folders or create a new path
+            💡 Type folder path or leave empty to download in project root
         </p>
     </div>
     <div class="modal-footer">

From b73f862168abc586f3c39f4a21995e1298ca8ac8 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Mon, 6 Oct 2025 20:18:17 +0530
Subject: [PATCH 19/25] feat: make the folder suggestion list scrollable

---
 src/LiveDevelopment/LivePreviewEdit.js     | 51 ++++++++++++----------
 src/styles/brackets_patterns_override.less |  2 +-
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
index fe5939890..987021524 100644
--- a/src/LiveDevelopment/LivePreviewEdit.js
+++ b/src/LiveDevelopment/LivePreviewEdit.js
@@ -937,7 +937,7 @@ define(function (require, exports, module) {
         // then alphabetically by folder name, then by full path
         StringMatch.multiFieldSort(matches, { matchGoodness: 0, folderName: 1, label: 2 });
 
-        const topMatches = matches.slice(0, 5);
+        const topMatches = matches.slice(0, 15);
         _renderFolderSuggestions(topMatches, $suggestions, $input);
     }
 
@@ -953,33 +953,36 @@ define(function (require, exports, module) {
     function _registerFolderDialogInputHandlers($input, $suggestions, $dlg) {
         // keyboard navigation handler for arrow keys
         $input.on('keydown', function(e) {
+            const isArrowDown = e.keyCode === 40;
+            const isArrowUp = e.keyCode === 38;
+            // we only want to handle the arrow up arrow down keys
+            if (!isArrowDown && !isArrowUp) { return; }
+
+            e.preventDefault();
             const $items = $suggestions.find('.folder-suggestion-item');
-            const $selected = $items.filter('.selected');
+            if ($items.length === 0) { return; }
 
-            if (e.keyCode === 40) { // arrow down key
-                e.preventDefault();
-                if ($items.length === 0) { return; }
+            const $selected = $items.filter('.selected');
 
-                if ($selected.length === 0) {
-                    $items.first().addClass('selected');
-                } else {
-                    const currentIndex = $items.index($selected);
-                    $selected.removeClass('selected');
-                    const nextIndex = (currentIndex + 1) % $items.length;
-                    $items.eq(nextIndex).addClass('selected');
-                }
-            } else if (e.keyCode === 38) { // arrow up key
-                e.preventDefault();
-                if ($items.length === 0) { return; }
+            // determine which item to select next
+            let $nextItem;
+            if ($selected.length === 0) {
+                // no selection - select first or last based on direction
+                $nextItem = isArrowDown ? $items.first() : $items.last();
+            } else {
+                // move selection
+                const currentIndex = $items.index($selected);
+                $selected.removeClass('selected');
+                const nextIndex = isArrowDown
+                    ? (currentIndex + 1) % $items.length
+                    : (currentIndex - 1 + $items.length) % $items.length;
+                $nextItem = $items.eq(nextIndex);
+            }
 
-                if ($selected.length === 0) {
-                    $items.last().addClass('selected');
-                } else {
-                    const currentIndex = $items.index($selected);
-                    $selected.removeClass('selected');
-                    const nextIndex = (currentIndex - 1 + $items.length) % $items.length;
-                    $items.eq(nextIndex).addClass('selected');
-                }
+            // apply selection and scroll the selected item into view (if not in view)
+            $nextItem.addClass('selected');
+            if ($nextItem.length > 0) {
+                $nextItem[0].scrollIntoView({ block: "nearest", behavior: "auto" });
             }
         });
 
diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
index b8c4895df..9ff05a102 100644
--- a/src/styles/brackets_patterns_override.less
+++ b/src/styles/brackets_patterns_override.less
@@ -2530,7 +2530,7 @@ code {
     }
 
     #folder-suggestions {
-        max-height: 180px;
+        max-height: 150px;
         overflow-y: auto;
         overflow-x: hidden;
         border: 1px solid @bc-btn-border;

From 4107776ffda9dd17560ee052dfffe80791d9b786 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Mon, 6 Oct 2025 21:46:55 +0530
Subject: [PATCH 20/25] fix: feels laggy because of transition

---
 src/styles/brackets_patterns_override.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
index 9ff05a102..7b932e324 100644
--- a/src/styles/brackets_patterns_override.less
+++ b/src/styles/brackets_patterns_override.less
@@ -2557,7 +2557,6 @@ code {
             cursor: pointer;
             font-size: 12px;
             color: @bc-text;
-            transition: background-color 0.1s;
             border-left: 3px solid transparent;
 
             .dark & {

From a2cc4ef0698c17d5b980caeffb9eb63bbffaf5f7 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Mon, 6 Oct 2025 22:51:45 +0530
Subject: [PATCH 21/25] feat: save folder location in state manager project
 wise

---
 src/LiveDevelopment/LivePreviewEdit.js     | 18 ++++++++++++++++++
 src/htmlContent/image-folder-dialog.html   |  7 +++++++
 src/styles/brackets_patterns_override.less | 19 +++++++++++++++++++
 3 files changed, 44 insertions(+)

diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
index 987021524..03fe59a2d 100644
--- a/src/LiveDevelopment/LivePreviewEdit.js
+++ b/src/LiveDevelopment/LivePreviewEdit.js
@@ -33,9 +33,12 @@ define(function (require, exports, module) {
     const PathUtils = require("thirdparty/path-utils/path-utils");
     const StringMatch = require("utils/StringMatch");
     const Dialogs = require("widgets/Dialogs");
+    const StateManager = require("preferences/StateManager");
     const ProDialogs = require("services/pro-dialogs");
     const ImageFolderDialogTemplate = require("text!htmlContent/image-folder-dialog.html");
 
+    // state manager key, to save the download location of the image
+    const IMAGE_DOWNLOAD_FOLDER_KEY = "imageGallery.downloadFolder";
 
     const KernalModeTrust = window.KernalModeTrust;
     if(!KernalModeTrust){
@@ -1020,12 +1023,21 @@ define(function (require, exports, module) {
         const projectRoot = ProjectManager.getProjectRoot();
         if (!projectRoot) { return; }
 
+        // check if user has already saved a folder preference for this project
+        const savedFolder = StateManager.get(IMAGE_DOWNLOAD_FOLDER_KEY, StateManager.PROJECT_CONTEXT);
+        // we specifically check for nullish type vals because empty string is possible as it means project root
+        if (savedFolder !== null && savedFolder !== undefined) {
+            _downloadToFolder(message, savedFolder);
+            return;
+        }
+
         // show the dialog with a text box to select a folder
         // dialog html is written in 'image-folder-dialog.html'
         const dialog = Dialogs.showModalDialogUsingTemplate(ImageFolderDialogTemplate, false);
         const $dlg = dialog.getElement();
         const $input = $dlg.find("#folder-path-input");
         const $suggestions = $dlg.find("#folder-suggestions");
+        const $rememberCheckbox = $dlg.find("#remember-folder-checkbox");
 
         let folderList = [];
         let stringMatcher = null;
@@ -1051,6 +1063,12 @@ define(function (require, exports, module) {
         $dlg.one("buttonClick", function(e, buttonId) {
             if (buttonId === Dialogs.DIALOG_BTN_OK) {
                 const folderPath = $input.val().trim();
+
+                // if the checkbox is checked, we save the folder preference for this project
+                if ($rememberCheckbox.is(':checked')) {
+                    StateManager.set(IMAGE_DOWNLOAD_FOLDER_KEY, folderPath, StateManager.PROJECT_CONTEXT);
+                }
+
                 _downloadToFolder(message, folderPath);
             }
             dialog.close();
diff --git a/src/htmlContent/image-folder-dialog.html b/src/htmlContent/image-folder-dialog.html
index 47dcdacb3..15a53db43 100644
--- a/src/htmlContent/image-folder-dialog.html
+++ b/src/htmlContent/image-folder-dialog.html
@@ -17,6 +17,13 @@ <h1 class="dialog-title">Select Folder to Save Image</h1>
         <p class="folder-help-text">
             💡 Type folder path or leave empty to download in project root
         </p>
+
+        <div class="remember-folder-container">
+            <label>
+                <input type="checkbox" id="remember-folder-checkbox" checked>
+                <span>Don't ask again for this project</span>
+            </label>
+        </div>
     </div>
     <div class="modal-footer">
         <button class="dialog-button btn" data-button-id="cancel">Cancel</button>
diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
index 7b932e324..f1115cd7c 100644
--- a/src/styles/brackets_patterns_override.less
+++ b/src/styles/brackets_patterns_override.less
@@ -2603,4 +2603,23 @@ code {
             color: @dark-bc-text-quiet;
         }
     }
+
+    .remember-folder-container {
+        display: flex;
+        justify-content: right;
+    }
+
+    .remember-folder-container label {
+        font-size: 12px;
+        letter-spacing: 0.3px;
+        color: @bc-text-quiet;
+
+        .dark & {
+            color: @dark-bc-text-quiet;
+        }
+    }
+
+    .remember-folder-container input {
+        margin-top: 2px;
+    }
 }

From d98775d8cf324eaa9711bd95480cc1c50e4d1f0b Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Tue, 7 Oct 2025 12:34:56 +0530
Subject: [PATCH 22/25] feat: add download folder button reset mechanism

---
 .../BrowserScripts/RemoteFunctions.js         | 52 ++++++++++++++-
 src/LiveDevelopment/LivePreviewEdit.js        | 66 ++++++++++++++-----
 2 files changed, 100 insertions(+), 18 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 968635a21..7716bf01b 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -1219,6 +1219,12 @@ function RemoteFunctions(config = {}) {
         <svg viewBox="0 0 640 640" fill="currentColor">
           <path d="M352 96C352 78.3 337.7 64 320 64C302.3 64 288 78.3 288 96L288 306.7L246.6 265.3C234.1 252.8 213.8 252.8 201.3 265.3C188.8 277.8 188.8 298.1 201.3 310.6L297.3 406.6C309.8 419.1 330.1 419.1 342.6 406.6L438.6 310.6C451.1 298.1 451.1 277.8 438.6 265.3C426.1 252.8 405.8 252.8 393.3 265.3L352 306.7L352 96zM160 384C124.7 384 96 412.7 96 448L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 448C544 412.7 515.3 384 480 384L433.1 384L376.5 440.6C345.3 471.8 294.6 471.8 263.4 440.6L206.9 384L160 384zM464 440C477.3 440 488 450.7 488 464C488 477.3 477.3 488 464 488C450.7 488 440 477.3 440 464C440 450.7 450.7 440 464 440z"/>
         </svg>
+      `,
+
+        folderSettings: `
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
+        </svg>
       `
     };
 
@@ -2301,10 +2307,35 @@ function RemoteFunctions(config = {}) {
                     .phoenix-select-image-btn:hover {
                         background: rgba(21,25,36,0.85) !important;
                         border-color: rgba(255,255,255,0.25) !important;
-                        transform: scale(1.05) !important;
                         box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
                     }
 
+                    .phoenix-ribbon-folder-settings {
+                        background: rgba(21,25,36,0.65) !important;
+                        border: 1px solid rgba(255,255,255,0.14) !important;
+                        color: #eaeaf0 !important;
+                        cursor: pointer !important;
+                        padding: 2px 6px 1px 6px !important;
+                        border-radius: 6px !important;
+                        margin-right: 8px !important;
+                        transition: all 0.2s ease !important;
+                        font-size: 12px !important;
+                        display: flex !important;
+                        align-items: center !important;
+                        justify-content: center !important;
+                    }
+
+                    .phoenix-ribbon-folder-settings:hover {
+                        background: rgba(21,25,36,0.85) !important;
+                        border-color: rgba(255,255,255,0.25) !important;
+                        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
+                    }
+
+                    .phoenix-ribbon-folder-settings svg {
+                        width: 16px !important;
+                        height: 16px !important;
+                    }
+
                     .phoenix-ribbon-close {
                         background: rgba(21,25,36,0.65) !important;
                         border: 1px solid rgba(255,255,255,0.14) !important;
@@ -2320,7 +2351,6 @@ function RemoteFunctions(config = {}) {
                     .phoenix-ribbon-close:hover {
                         background: rgba(21,25,36,0.85) !important;
                         border-color: rgba(255,255,255,0.25) !important;
-                        transform: scale(1.05) !important;
                         box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
                     }
 
@@ -2461,6 +2491,9 @@ function RemoteFunctions(config = {}) {
                                 </div>
                             </div>
                             <div class="phoenix-ribbon-header-right">
+                                <button class="phoenix-ribbon-folder-settings" title="Select image download folder">
+                                    ${ICONS.folderSettings}
+                                </button>
                                 <button class="phoenix-ribbon-close">×</button>
                             </div>
                         </div>
@@ -2725,6 +2758,7 @@ function RemoteFunctions(config = {}) {
             const searchInput = this._shadow.querySelector('.phoenix-ribbon-search input');
             const searchButton = this._shadow.querySelector('.phoenix-ribbon-search-btn');
             const closeButton = this._shadow.querySelector('.phoenix-ribbon-close');
+            const folderSettingsButton = this._shadow.querySelector('.phoenix-ribbon-folder-settings');
             const navLeft = this._shadow.querySelector('.phoenix-ribbon-nav.left');
             const navRight = this._shadow.querySelector('.phoenix-ribbon-nav.right');
             const selectImageBtn = this._shadow.querySelector('.phoenix-select-image-btn');
@@ -2778,6 +2812,20 @@ function RemoteFunctions(config = {}) {
                 });
             }
 
+            if (folderSettingsButton) {
+                folderSettingsButton.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    // send message to LivePreviewEdit to show folder selection dialog
+                    const tagId = this.element.getAttribute("data-brackets-id");
+                    window._Brackets_MessageBroker.send({
+                        livePreviewEditEnabled: true,
+                        resetImageFolderSelection: true,
+                        element: this.element,
+                        tagId: Number(tagId)
+                    });
+                });
+            }
+
             if (navLeft) {
                 navLeft.addEventListener('click', (e) => {
                     e.stopPropagation();
diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
index 03fe59a2d..d012f84b2 100644
--- a/src/LiveDevelopment/LivePreviewEdit.js
+++ b/src/LiveDevelopment/LivePreviewEdit.js
@@ -1012,25 +1012,14 @@ define(function (require, exports, module) {
     }
 
     /**
-     * This function is called when 'use this image' button is clicked in the image ribbon gallery
-     * or user loads an image file from the computer
-     * this is responsible to download the image in the appropriate place
-     * and also change the src attribute of the element (by calling appropriate helper functions)
-     *
-     * @param {Object} message - the message object which stores all the required data for this operation
+     * this shows the folder selection dialog for choosing where to download images
+     * @param {Object} message - the message object (optional, only needed when downloading image)
+     * @private
      */
-    function _handleUseThisImage(message) {
+    function _showFolderSelectionDialog(message) {
         const projectRoot = ProjectManager.getProjectRoot();
         if (!projectRoot) { return; }
 
-        // check if user has already saved a folder preference for this project
-        const savedFolder = StateManager.get(IMAGE_DOWNLOAD_FOLDER_KEY, StateManager.PROJECT_CONTEXT);
-        // we specifically check for nullish type vals because empty string is possible as it means project root
-        if (savedFolder !== null && savedFolder !== undefined) {
-            _downloadToFolder(message, savedFolder);
-            return;
-        }
-
         // show the dialog with a text box to select a folder
         // dialog html is written in 'image-folder-dialog.html'
         const dialog = Dialogs.showModalDialogUsingTemplate(ImageFolderDialogTemplate, false);
@@ -1069,12 +1058,38 @@ define(function (require, exports, module) {
                     StateManager.set(IMAGE_DOWNLOAD_FOLDER_KEY, folderPath, StateManager.PROJECT_CONTEXT);
                 }
 
-                _downloadToFolder(message, folderPath);
+                // if message is provided, download the image
+                if (message) {
+                    _downloadToFolder(message, folderPath);
+                }
             }
             dialog.close();
         });
     }
 
+    /**
+     * This function is called when 'use this image' button is clicked in the image ribbon gallery
+     * or user loads an image file from the computer
+     * this is responsible to download the image in the appropriate place
+     * and also change the src attribute of the element (by calling appropriate helper functions)
+     *
+     * @param {Object} message - the message object which stores all the required data for this operation
+     */
+    function _handleUseThisImage(message) {
+        const projectRoot = ProjectManager.getProjectRoot();
+        if (!projectRoot) { return; }
+
+        // check if user has already saved a folder preference for this project
+        const savedFolder = StateManager.get(IMAGE_DOWNLOAD_FOLDER_KEY, StateManager.PROJECT_CONTEXT);
+        // we specifically check for nullish type vals because empty string is possible as it means project root
+        if (savedFolder !== null && savedFolder !== undefined) {
+            _downloadToFolder(message, savedFolder);
+        } else {
+            // show the folder selection dialog
+            _showFolderSelectionDialog(message);
+        }
+    }
+
     /**
      * Helper function to download image to the specified directory
      *
@@ -1096,6 +1111,19 @@ define(function (require, exports, module) {
         });
     }
 
+    /**
+     * Handles reset of image folder selection - clears the saved preference and shows the dialog
+     * @private
+     */
+    function _handleResetImageFolderSelection() {
+        // clear the saved folder preference for this project
+        StateManager.set(IMAGE_DOWNLOAD_FOLDER_KEY, null, StateManager.PROJECT_CONTEXT);
+
+        // show the folder selection dialog for the user to choose a new folder
+        // we pass null because we're not downloading an image, just setting the preference
+        _showFolderSelectionDialog(null);
+    }
+
     /**
      * This is the main function that is exported.
      * it will be called by LiveDevProtocol when it receives a message from RemoteFunctions.js
@@ -1120,6 +1148,12 @@ define(function (require, exports, module) {
     * these are the main properties that are passed through the message
      */
     function handleLivePreviewEditOperation(message) {
+        // handle reset image folder selection
+        if (message.resetImageFolderSelection) {
+            _handleResetImageFolderSelection();
+            return;
+        }
+
         // handle move(drag & drop)
         if (message.move && message.sourceId && message.targetId) {
             _moveElementInSource(message.sourceId, message.targetId, message.insertAfter, message.insertInside);

From bda713385a87d68b780a8f0104e66832acbc9524 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Tue, 7 Oct 2025 21:47:41 +0530
Subject: [PATCH 23/25] feat: localize all strings

---
 .../BrowserScripts/RemoteFunctions.js              |  4 ++--
 src/LiveDevelopment/LivePreviewEdit.js             |  7 ++++++-
 src/LiveDevelopment/main.js                        |  2 +-
 src/htmlContent/image-folder-dialog.html           | 14 +++++++-------
 src/nls/root/strings.js                            |  7 ++++++-
 5 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 7716bf01b..267cd5844 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -2491,7 +2491,7 @@ function RemoteFunctions(config = {}) {
                                 </div>
                             </div>
                             <div class="phoenix-ribbon-header-right">
-                                <button class="phoenix-ribbon-folder-settings" title="Select image download folder">
+                                <button class="phoenix-ribbon-folder-settings" title="${config.strings.imageGallerySelectDownloadFolder}">
                                     ${ICONS.folderSettings}
                                 </button>
                                 <button class="phoenix-ribbon-close">×</button>
@@ -2500,7 +2500,7 @@ function RemoteFunctions(config = {}) {
                         <div class="phoenix-ribbon-nav left">&#8249;</div>
                         <div class="phoenix-ribbon-strip">
                             <div class="phoenix-ribbon-row phoenix-ribbon-loading">
-                                Loading images...
+                                ${config.strings.imageGalleryLoadingInitial}
                             </div>
                         </div>
                         <div class="phoenix-ribbon-nav right">&#8250;</div>
diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
index d012f84b2..11e95418e 100644
--- a/src/LiveDevelopment/LivePreviewEdit.js
+++ b/src/LiveDevelopment/LivePreviewEdit.js
@@ -35,6 +35,8 @@ define(function (require, exports, module) {
     const Dialogs = require("widgets/Dialogs");
     const StateManager = require("preferences/StateManager");
     const ProDialogs = require("services/pro-dialogs");
+    const Mustache = require("thirdparty/mustache/mustache");
+    const Strings = require("strings");
     const ImageFolderDialogTemplate = require("text!htmlContent/image-folder-dialog.html");
 
     // state manager key, to save the download location of the image
@@ -1022,7 +1024,10 @@ define(function (require, exports, module) {
 
         // show the dialog with a text box to select a folder
         // dialog html is written in 'image-folder-dialog.html'
-        const dialog = Dialogs.showModalDialogUsingTemplate(ImageFolderDialogTemplate, false);
+        const templateVars = {
+            Strings: Strings
+        };
+        const dialog = Dialogs.showModalDialogUsingTemplate(Mustache.render(ImageFolderDialogTemplate, templateVars), false);
         const $dlg = dialog.getElement();
         const $input = $dlg.find("#folder-path-input");
         const $suggestions = $dlg.find("#folder-suggestions");
diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js
index 4a0ac3612..c5ac3a6a8 100644
--- a/src/LiveDevelopment/main.js
+++ b/src/LiveDevelopment/main.js
@@ -83,7 +83,7 @@ define(function main(require, exports, module) {
             aiPromptPlaceholder: Strings.LIVE_DEV_AI_PROMPT_PLACEHOLDER,
             imageGalleryUseImage: Strings.LIVE_DEV_IMAGE_GALLERY_USE_IMAGE,
             imageGallerySelectFromComputer: Strings.LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER,
-            imageGalleryChooseFolder: Strings.LIVE_DEV_IMAGE_GALLERY_CHOOSE_FOLDER,
+            imageGallerySelectDownloadFolder: Strings.LIVE_DEV_IMAGE_GALLERY_SELECT_DOWNLOAD_FOLDER,
             imageGallerySearchPlaceholder: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER,
             imageGallerySearchButton: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_BUTTON,
             imageGalleryLoadingInitial: Strings.LIVE_DEV_IMAGE_GALLERY_LOADING_INITIAL,
diff --git a/src/htmlContent/image-folder-dialog.html b/src/htmlContent/image-folder-dialog.html
index 15a53db43..40504da9e 100644
--- a/src/htmlContent/image-folder-dialog.html
+++ b/src/htmlContent/image-folder-dialog.html
@@ -1,12 +1,12 @@
 <div class="image-folder-dialog template modal">
     <div class="modal-header">
-        <h1 class="dialog-title">Select Folder to Save Image</h1>
+        <h1 class="dialog-title">{{Strings.LIVE_DEV_IMAGE_FOLDER_DIALOG_TITLE}}</h1>
     </div>
     <div class="modal-body">
-        <p>Choose where to download the image:</p>
+        <p>{{Strings.LIVE_DEV_IMAGE_FOLDER_DIALOG_DESCRIPTION}}</p>
         <input type="text"
                id="folder-path-input"
-               placeholder="Type folder path (e.g., assets/images/)"
+               placeholder="{{Strings.LIVE_DEV_IMAGE_FOLDER_DIALOG_PLACEHOLDER}}"
                value=""
                autocomplete="off"
                spellcheck="false">
@@ -15,18 +15,18 @@ <h1 class="dialog-title">Select Folder to Save Image</h1>
         <div id="folder-suggestions"></div>
 
         <p class="folder-help-text">
-            💡 Type folder path or leave empty to download in project root
+            {{Strings.LIVE_DEV_IMAGE_FOLDER_DIALOG_HELP}}
         </p>
 
         <div class="remember-folder-container">
             <label>
                 <input type="checkbox" id="remember-folder-checkbox" checked>
-                <span>Don't ask again for this project</span>
+                <span>{{Strings.LIVE_DEV_IMAGE_FOLDER_DIALOG_REMEMBER}}</span>
             </label>
         </div>
     </div>
     <div class="modal-footer">
-        <button class="dialog-button btn" data-button-id="cancel">Cancel</button>
-        <button class="dialog-button btn primary" data-button-id="ok">OK</button>
+        <button class="dialog-button btn" data-button-id="cancel">{{Strings.CANCEL}}</button>
+        <button class="dialog-button btn primary" data-button-id="ok">{{Strings.OK}}</button>
     </div>
 </div>
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
index 4412f917c..f2cfe7d9f 100644
--- a/src/nls/root/strings.js
+++ b/src/nls/root/strings.js
@@ -192,13 +192,18 @@ define({
     "LIVE_DEV_MORE_OPTIONS_IMAGE_GALLERY": "Image Gallery",
     "LIVE_DEV_IMAGE_GALLERY_USE_IMAGE": "Use this image",
     "LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER": "Select image from computer",
-    "LIVE_DEV_IMAGE_GALLERY_CHOOSE_FOLDER": "Choose download folder",
+    "LIVE_DEV_IMAGE_GALLERY_SELECT_DOWNLOAD_FOLDER": "Choose image download folder",
     "LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER": "Search images...",
     "LIVE_DEV_IMAGE_GALLERY_SEARCH_BUTTON": "Search",
     "LIVE_DEV_IMAGE_GALLERY_LOADING_INITIAL": "Loading images...",
     "LIVE_DEV_IMAGE_GALLERY_LOADING_MORE": "Loading...",
     "LIVE_DEV_IMAGE_GALLERY_NO_IMAGES": "No images found",
     "LIVE_DEV_IMAGE_GALLERY_LOAD_ERROR": "Failed to load images",
+    "LIVE_DEV_IMAGE_FOLDER_DIALOG_TITLE": "Select Folder to Save Image",
+    "LIVE_DEV_IMAGE_FOLDER_DIALOG_DESCRIPTION": "Choose where to download the image:",
+    "LIVE_DEV_IMAGE_FOLDER_DIALOG_PLACEHOLDER": "Type folder path (e.g., assets/images/)",
+    "LIVE_DEV_IMAGE_FOLDER_DIALOG_HELP": "💡 Type folder path or leave empty to download in project root",
+    "LIVE_DEV_IMAGE_FOLDER_DIALOG_REMEMBER": "Don't ask again for this project",
     "LIVE_DEV_AI_PROMPT_PLACEHOLDER": "Ask Phoenix AI to modify this element...",
     "LIVE_PREVIEW_CUSTOM_SERVER_BANNER": "Getting preview from your custom server {0}",
     "LIVE_PREVIEW_MODE_PREVIEW": "Preview Mode",

From 452af543fdca881506a37edec35061b07ed1aea1 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Tue, 14 Oct 2025 21:06:03 +0530
Subject: [PATCH 24/25] feat: make drag drop more intuitive

---
 .../BrowserScripts/RemoteFunctions.js         | 57 ++++++++++++++++++-
 1 file changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 267cd5844..a1bb135cc 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -375,6 +375,7 @@ function RemoteFunctions(config = {}) {
     let DROP_MARKER_CLASSNAME = "__brackets-drop-marker-horizontal";
     let DROP_MARKER_VERTICAL_CLASSNAME = "__brackets-drop-marker-vertical";
     let DROP_MARKER_INSIDE_CLASSNAME = "__brackets-drop-marker-inside";
+    let DROP_MARKER_ARROW_CLASSNAME = "__brackets-drop-marker-arrow";
 
     /**
      * This function is responsible to determine whether to show vertical/horizontal indicators
@@ -790,6 +791,11 @@ function RemoteFunctions(config = {}) {
         // clean any existing marker from that element
         _removeDropMarkerFromElement(element);
 
+        if (element._originalDragBackgroundColor === undefined) {
+            element._originalDragBackgroundColor = element.style.backgroundColor;
+        }
+        element.style.backgroundColor = "rgba(66, 133, 244, 0.15)";
+
         // create the marker element
         let marker = window.document.createElement("div");
 
@@ -806,6 +812,15 @@ function RemoteFunctions(config = {}) {
         marker.style.borderRadius = "2px";
         marker.style.pointerEvents = "none";
 
+        // for the arrow indicator
+        let arrow = window.document.createElement("div");
+        arrow.className = DROP_MARKER_ARROW_CLASSNAME;
+        arrow.style.position = "fixed";
+        arrow.style.zIndex = "2147483648";
+        arrow.style.pointerEvents = "none";
+        arrow.style.fontWeight = "bold";
+        arrow.style.color = "#4285F4";
+
         if (dropZone === "inside") {
             // inside marker - outline around the element
             marker.style.border = "2px dashed #4285F4";
@@ -814,40 +829,66 @@ function RemoteFunctions(config = {}) {
             marker.style.top = rect.top + "px";
             marker.style.width = rect.width + "px";
             marker.style.height = rect.height + "px";
-            marker.style.animation = "insideMarkerPulse 1s ease-in-out infinite alternate";
+
+            // exclusive or symbol (plus inside circle) we use when dropping inside
+            arrow.style.fontSize = "16px";
+            arrow.innerHTML = "⊕";
+            arrow.style.left = (rect.left + rect.width / 2) + "px";
+            arrow.style.top = (rect.top + rect.height / 2) + "px";
+            arrow.style.transform = "translate(-50%, -50%)";
         } else {
             // Before/After markers - lines
             marker.style.background = "linear-gradient(90deg, #4285F4, #1976D2)";
             marker.style.boxShadow = "0 0 8px rgba(66, 133, 244, 0.5)";
-            marker.style.animation = "dropMarkerPulse 0.8s ease-in-out infinite alternate";
 
+            arrow.style.fontSize = "22px";
             if (indicatorType === "vertical") {
                 // Vertical marker (for flex row containers)
                 marker.style.width = "3px";
                 marker.style.height = rect.height + "px";
                 marker.style.top = rect.top + "px";
+                arrow.style.top = (rect.top + rect.height / 2) + "px";
 
                 if (dropZone === "after") {
                     marker.style.left = rect.right + 3 + "px";
+                    // Right arrow
+                    arrow.innerHTML = "→";
+                    arrow.style.left = (rect.right + 5) + "px";
+                    arrow.style.transform = "translateY(-50%)";
                 } else {
                     marker.style.left = rect.left - 5 + "px";
+                    // Left arrow
+                    arrow.innerHTML = "←";
+                    arrow.style.left = (rect.left - 15) + "px";
+                    arrow.style.transform = "translate(-50%, -50%)";
                 }
             } else {
                 // Horizontal marker (for block/grid containers)
                 marker.style.width = rect.width + "px";
                 marker.style.height = "3px";
                 marker.style.left = rect.left + "px";
+                arrow.style.left = (rect.left + rect.width / 2) + "px";
 
                 if (dropZone === "after") {
                     marker.style.top = rect.bottom + 3 + "px";
+                    // Down arrow
+                    arrow.innerHTML = "↓";
+                    arrow.style.top = rect.bottom + "px";
+                    arrow.style.transform = "translateX(-50%)";
                 } else {
                     marker.style.top = rect.top - 5 + "px";
+                    // Up arrow
+                    arrow.innerHTML = "↑";
+                    arrow.style.top = (rect.top - 15) + "px";
+                    arrow.style.transform = "translate(-50%, -50%)";
                 }
             }
         }
 
         element._dropMarker = marker; // we need this in the _removeDropMarkerFromElement function
+        element._dropArrow = arrow; // store arrow reference too
         window.document.body.appendChild(marker);
+        window.document.body.appendChild(arrow);
     }
 
     /**
@@ -859,6 +900,10 @@ function RemoteFunctions(config = {}) {
             element._dropMarker.parentNode.removeChild(element._dropMarker);
             delete element._dropMarker;
         }
+        if (element._dropArrow && element._dropArrow.parentNode) {
+            element._dropArrow.parentNode.removeChild(element._dropArrow);
+            delete element._dropArrow;
+        }
     }
 
     /**
@@ -869,6 +914,7 @@ function RemoteFunctions(config = {}) {
         let horizontalMarkers = window.document.querySelectorAll("." + DROP_MARKER_CLASSNAME);
         let verticalMarkers = window.document.querySelectorAll("." + DROP_MARKER_VERTICAL_CLASSNAME);
         let insideMarkers = window.document.querySelectorAll("." + DROP_MARKER_INSIDE_CLASSNAME);
+        let arrows = window.document.querySelectorAll("." + DROP_MARKER_ARROW_CLASSNAME);
 
         for (let i = 0; i < horizontalMarkers.length; i++) {
             if (horizontalMarkers[i].parentNode) {
@@ -888,10 +934,17 @@ function RemoteFunctions(config = {}) {
             }
         }
 
+        for (let i = 0; i < arrows.length; i++) {
+            if (arrows[i].parentNode) {
+                arrows[i].parentNode.removeChild(arrows[i]);
+            }
+        }
+
         // Also clear any element references
         let elements = window.document.querySelectorAll("[data-brackets-id]");
         for (let j = 0; j < elements.length; j++) {
             delete elements[j]._dropMarker;
+            delete elements[j]._dropArrow;
             // only restore the styles that were modified by drag operations
             if (elements[j]._originalDragBackgroundColor !== undefined) {
                 elements[j].style.backgroundColor = elements[j]._originalDragBackgroundColor;

From c6a5cb8e0948180e1ff26749468bff402aab0671 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Wed, 15 Oct 2025 15:14:53 +0530
Subject: [PATCH 25/25] feat: set selected state for image gallery when its
 clicked

---
 .../BrowserScripts/RemoteFunctions.js         | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index a1bb135cc..7aa7ad85a 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -60,6 +60,9 @@ function RemoteFunctions(config = {}) {
     const AUTO_SCROLL_SPEED = 12; // pixels per scroll
     const AUTO_SCROLL_EDGE_SIZE = 0.05; // 5% of viewport height (either top/bottom)
 
+    // to track the state as we want to have a selected state for image gallery
+    let imageGallerySelected = false;
+
     /**
      * this function is responsible to auto scroll the live preview when
      * dragging an element to the viewport edges
@@ -259,7 +262,12 @@ function RemoteFunctions(config = {}) {
      * @param {DOMElement} element - the HTML DOM element that was clicked (should be an image)
      */
     function _handleImageGalleryOptionClick(event, element) {
-        if (!_imageRibbonGallery) {
+        dismissImageRibbonGallery();
+
+        if (imageGallerySelected) {
+            imageGallerySelected = false;
+        } else {
+            imageGallerySelected = true;
             _imageRibbonGallery = new ImageRibbonGallery(element);
         }
     }
@@ -1389,7 +1397,7 @@ function RemoteFunctions(config = {}) {
                 </span>
             </div>`;
 
-            const styles = `
+            let styles = `
                 :host {
                   all: initial !important;
                 }
@@ -1440,6 +1448,15 @@ function RemoteFunctions(config = {}) {
                 }
             `;
 
+            // to highlight that in a different color, to show the selected state
+            if (imageGallerySelected) {
+                styles += `
+                    .node-options span[data-action="image-gallery"] {
+                      background-color: rgba(255, 255, 255, 0.25) !important;
+                    }
+                `;
+            }
+
             // add everything to the shadow box
             shadow.innerHTML = `<style>${styles}</style><div class="phoenix-more-options-box">${content}</div>`;
             this._shadow = shadow;
@@ -2862,6 +2879,8 @@ function RemoteFunctions(config = {}) {
                 closeButton.addEventListener('click', (e) => {
                     e.stopPropagation();
                     this.remove();
+                    imageGallerySelected = false;
+                    dismissUIAndCleanupState();
                 });
             }
 
@@ -3584,6 +3603,12 @@ function RemoteFunctions(config = {}) {
             return false;
         }
 
+        // if imageGallerySelected is true, show the image gallery directly
+        if(element && element.tagName.toLowerCase() === 'img' && imageGallerySelected) {
+            if (!_imageRibbonGallery) {
+                _imageRibbonGallery = new ImageRibbonGallery(element);
+            }
+        }
 
         // make sure that the element is actually visible to the user
         if (isElementVisible(element)) {