From 62c5c9556dc3e252e91e622c1bec6ff033026d6d Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Thu, 25 Sep 2025 11:46:54 +0530
Subject: [PATCH 01/42] 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 9f353d1391de4544d09535bbaf6ba75bd83ac29b Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Thu, 25 Sep 2025 13:37:14 +0530
Subject: [PATCH 02/42] 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 30a58a3be..b7ee1b142 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 60bea7fd4c8d4bfa2a2f32569636762b7dabe3a9 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Thu, 25 Sep 2025 21:48:18 +0530
Subject: [PATCH 03/42] 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 b438ff41ebf906cc6060fdc02c7fa7fd08621385 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Fri, 26 Sep 2025 16:44:58 +0530
Subject: [PATCH 04/42] 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 ba921a17e35740fe85d61b5f65faa2f4dd715412 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Fri, 26 Sep 2025 23:48:31 +0530
Subject: [PATCH 05/42] 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 8bb9f155b53cc49718e6476383475e3c4e4681bd Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 27 Sep 2025 13:00:42 +0530
Subject: [PATCH 06/42] 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 d286c4d1eb702c38abdbe5c65b3772b129acbf02 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 27 Sep 2025 13:18:53 +0530
Subject: [PATCH 07/42] 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 bbf0fd2ecdd1a0400b2c5d27f705b84b82a3338b Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 27 Sep 2025 13:56:41 +0530
Subject: [PATCH 08/42] 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 546d5cb8c21093cea3d9b4860c50fb5e6cc39a05 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 27 Sep 2025 15:07:08 +0530
Subject: [PATCH 09/42] 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 bd8d4019ef81bebdafd1adc8ee44da89d9230dce Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 27 Sep 2025 17:03:55 +0530
Subject: [PATCH 10/42] 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 b7ed4cf8fd4d366f198b017ab1fc42abcd7ccbcc Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sun, 28 Sep 2025 14:50:04 +0530
Subject: [PATCH 11/42] 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 2ca5eea9faac6fafb5f9eea70aeb403c02f97353 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sun, 28 Sep 2025 16:25:40 +0530
Subject: [PATCH 12/42] 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 b7ee1b142..681e76566 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 e3d96c62ebd0deeff019fe5523dfe5d384284ffa Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Fri, 3 Oct 2025 23:02:22 +0530
Subject: [PATCH 13/42] 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 97e23adce..2e5eda7d5 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 = `
@@ -429,7 +423,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();
@@ -455,12 +448,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;
         });
@@ -509,15 +496,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
@@ -1323,15 +1301,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 681e76566..22cc03319 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 4373249348e40d54eac1a4a17d4ff6c4cae8ac2b Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 4 Oct 2025 00:10:37 +0530
Subject: [PATCH 14/42] 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 ff9e84442c77563ea3f35a074915d3554ccd9623 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 4 Oct 2025 13:10:55 +0530
Subject: [PATCH 15/42] 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 d8ddc718dcd9bba118d63b404ab37cacc43a5304 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sun, 5 Oct 2025 21:39:04 +0530
Subject: [PATCH 16/42] 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 2637290b77577fd515d0905affb3448fea686f98 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sun, 5 Oct 2025 22:27:24 +0530
Subject: [PATCH 17/42] 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 9329273ba278e2526a96a1d5b5dbbe1729f415e6 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Mon, 6 Oct 2025 19:27:20 +0530
Subject: [PATCH 18/42] 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 154f2d1499a19e96168cf5f9f247c3090a63f37c Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Mon, 6 Oct 2025 20:18:17 +0530
Subject: [PATCH 19/42] 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 35520a7cb4085c0a96161658e87a1564368b5242 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Mon, 6 Oct 2025 21:46:55 +0530
Subject: [PATCH 20/42] 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 c4f0a54c69707ca936e7701212214f1cb6a468d7 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Mon, 6 Oct 2025 22:51:45 +0530
Subject: [PATCH 21/42] 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 b5a4a38548761c8e49c080077157e258d096cb2c Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Tue, 7 Oct 2025 12:34:56 +0530
Subject: [PATCH 22/42] 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 944e85d6b1a8e3ef9fcc51c2ecaa0be034c2e279 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Tue, 7 Oct 2025 21:47:41 +0530
Subject: [PATCH 23/42] 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 22cc03319..5ea03991e 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 5e6e0561cc0dca68463832991d8e12cffc6ad643 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Tue, 14 Oct 2025 21:06:03 +0530
Subject: [PATCH 24/42] 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 92607258812faf51350d2f3252a016b43d2fba98 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Wed, 15 Oct 2025 15:14:53 +0530
Subject: [PATCH 25/42] 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)) {

From 218cf9a52e8f39ca29fb91efbde74b78173138fd Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Fri, 17 Oct 2025 13:03:26 +0530
Subject: [PATCH 26/42] feat: trigger the unsplash download endpoint as
 required by the unsplash guidelines

---
 src/LiveDevelopment/BrowserScripts/RemoteFunctions.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 7aa7ad85a..eafed6590 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -3013,6 +3013,17 @@ function RemoteFunctions(config = {}) {
                     const extnName = ".jpg";
 
                     const downloadUrl = image.url || image.thumb_url;
+
+                    // we need to make a req to the download endpoint
+                    // its required by the Unsplash API guidelines to track downloads for photographers
+                    // this is just a tracking call, we don't need to wait for the response
+                    if (image.download_location) {
+                        fetch(image.download_location)
+                            .catch(error => {
+                                //
+                            });
+                    }
+
                     this._useImage(downloadUrl, filename, extnName, false, thumbDiv);
                 });
 

From 7f3d40a7f1d062428a8db46595bfd3069b0eda32 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Fri, 17 Oct 2025 14:38:38 +0530
Subject: [PATCH 27/42] refactor: move image gallery button after select parent
 button so UI remains consistent

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

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index eafed6590..c6f728134 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -1367,13 +1367,6 @@ 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}">
@@ -1388,6 +1381,13 @@ function RemoteFunctions(config = {}) {
                 </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>`;
+            }
+
             // Always include duplicate and delete options
             content += `<span data-action="duplicate" title="${config.strings.duplicate}">
                     ${ICONS.duplicate}

From 7b553e1f16e15e9a2491f6d512399ee741a55307 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Fri, 17 Oct 2025 15:28:41 +0530
Subject: [PATCH 28/42] fix: scroll live preview when image gallery and image
 element overlaps each other

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

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index c6f728134..5cd7b1394 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -208,6 +208,23 @@ function RemoteFunctions(config = {}) {
         );
     }
 
+    /**
+     * this function checks whether the image gallery overlaps the image element
+     * because if it does we scroll the image element a bit above so that users can see the whole image clearly
+     * @param {DOMElement} element - the image element
+     * @param {DOMElement} imageGalleryElement - the image gallery container
+     */
+    function scrollImageToViewportIfRequired(element, imageGalleryElement) {
+        let elementRect = element.getBoundingClientRect();
+        let galleryRect = imageGalleryElement._shadow.querySelector('.phoenix-image-ribbon').getBoundingClientRect();
+
+        // this will get true when the image element and the image gallery overlaps each other
+        if (elementRect.bottom >= galleryRect.top) {
+            const scrollValue = window.scrollY + (elementRect.bottom - galleryRect.top) + 10;
+            window.scrollTo(0, scrollValue);
+        }
+    }
+
     // Checks if an element is actually visible to the user (not hidden, collapsed, or off-screen)
     function isElementVisible(element) {
         // Check if element has zero dimensions (indicates it's hidden or collapsed)
@@ -269,6 +286,7 @@ function RemoteFunctions(config = {}) {
         } else {
             imageGallerySelected = true;
             _imageRibbonGallery = new ImageRibbonGallery(element);
+            scrollImageToViewportIfRequired(element, _imageRibbonGallery);
         }
     }
 
@@ -3618,6 +3636,7 @@ function RemoteFunctions(config = {}) {
         if(element && element.tagName.toLowerCase() === 'img' && imageGallerySelected) {
             if (!_imageRibbonGallery) {
                 _imageRibbonGallery = new ImageRibbonGallery(element);
+                scrollImageToViewportIfRequired(element, _imageRibbonGallery);
             }
         }
 

From 088627207e903fb4ee4b4f4a26d416993a482eb9 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 18 Oct 2025 14:11:29 +0530
Subject: [PATCH 29/42] fix: prevent image gallery and AI box to disappear when
 live preview is scrolled

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

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 5cd7b1394..ee5566385 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -3862,7 +3862,9 @@ function RemoteFunctions(config = {}) {
 
                     // 4 is just for pixelated differences
                     if (Math.abs(calcNewDifference - prevDifference) > 4) {
-                        dismissUIAndCleanupState();
+                        dismissNodeInfoBox();
+                        dismissNodeMoreOptionsBox();
+                        cleanupPreviousElementState();
                     }
                 }
             }
@@ -3886,7 +3888,9 @@ function RemoteFunctions(config = {}) {
                         const prevDifference = _nodeInfoBox._possDifference;
 
                         if (Math.abs(calcNewDifference - prevDifference) > 4) {
-                            dismissUIAndCleanupState();
+                            dismissNodeInfoBox();
+                            dismissNodeMoreOptionsBox();
+                            cleanupPreviousElementState();
                         }
                     }
                 }
@@ -3894,6 +3898,37 @@ function RemoteFunctions(config = {}) {
         }
     }
 
+    // this function is responsible to reposition the AI box
+    // so we need to reposition it when for ex: a fixed positioned element is selected in the live preview
+    // now when live preview is scrolled the element remains at a fixed position but the AI box will drift away
+    // so we reposition it when its a fixed element
+    function _repositionAIBox() {
+        if (!_aiPromptBox || !_aiPromptBox.element) { return; }
+
+        const aiBox = _aiPromptBox._shadow.querySelector('.phoenix-ai-prompt-box');
+        if (!aiBox) { return; }
+
+        const aiBoxBounds = aiBox.getBoundingClientRect();
+        const elementBounds = _aiPromptBox.element.getBoundingClientRect();
+
+        // this is to store the prev value, so that we can compare it the second time
+        if(!_aiPromptBox._possDifference) {
+            _aiPromptBox._possDifference = aiBoxBounds.top - elementBounds.top;
+        } else {
+            const calcNewDifference = aiBoxBounds.top - elementBounds.top;
+            const prevDifference = _aiPromptBox._possDifference;
+
+            // 4 is just for pixelated differences
+            if (Math.abs(calcNewDifference - prevDifference) > 4) {
+                const boxPositions = _aiPromptBox._getBoxPosition(aiBoxBounds.width, aiBoxBounds.height);
+
+                aiBox.style.left = boxPositions.leftPos + 'px';
+                aiBox.style.top = boxPositions.topPos + 'px';
+                _aiPromptBox._possDifference = calcNewDifference;
+            }
+        }
+    }
+
     function _scrollHandler(e) {
         // Document scrolls can be updated immediately. Any other scrolls
         // need to be updated on a timer to ensure the layout is correct.
@@ -3901,11 +3936,13 @@ function RemoteFunctions(config = {}) {
             redrawHighlights();
             // need to dismiss the box if the elements are fixed, otherwise they drift at times
             _dismissBoxesForFixedElements();
+            _repositionAIBox(); // and reposition the AI box
         } else {
             if (_localHighlight || _clickHighlight || _hoverHighlight) {
                 window.setTimeout(redrawHighlights, 0);
             }
             _dismissBoxesForFixedElements();
+            _repositionAIBox();
         }
     }
 

From 191fa9e6aa1bfbf7d17b303083e6b08590104dd6 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 18 Oct 2025 16:53:18 +0530
Subject: [PATCH 30/42] fix: improvise drag-drop by looking for elements with
 same size

---
 .../BrowserScripts/RemoteFunctions.js         | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index ee5566385..537c508ba 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -987,6 +987,48 @@ function RemoteFunctions(config = {}) {
         }
     }
 
+    /**
+     * this function is for finding the best target element on where to drop the dragged element
+     * for ex: div > image...here both the div and image are of the exact same size, then when user is dragging some
+     * other element, then almost everytime they want to drop it before/after the div and not like div>newEle+img
+     * @param {Element} target - The current target element
+     * @returns {Element|null} - The outermost parent with all edges aligned, or null
+     */
+    function _findBestParentTarget(target) {
+        if (!target) {
+            return null;
+        }
+
+        const tolerance = 1; // 1px is considered same
+        let bestParent = null;
+        let currentElement = target;
+        let parent = currentElement.parentElement;
+
+        while (parent) {
+            if (parent.hasAttribute("data-brackets-id") && isElementEditable(parent)) {
+                const currentRect = currentElement.getBoundingClientRect();
+                const parentRect = parent.getBoundingClientRect();
+
+                // check if all the edges are same
+                const topAligned = Math.abs(currentRect.top - parentRect.top) <= tolerance;
+                const bottomAligned = Math.abs(currentRect.bottom - parentRect.bottom) <= tolerance;
+                const leftAligned = Math.abs(currentRect.left - parentRect.left) <= tolerance;
+                const rightAligned = Math.abs(currentRect.right - parentRect.right) <= tolerance;
+
+                if (topAligned && bottomAligned && leftAligned && rightAligned) {
+                    // all edges match, we prefer the parent element
+                    bestParent = parent;
+                    currentElement = parent;
+                } else {
+                    break;
+                }
+            }
+            parent = parent.parentElement;
+        }
+
+        return bestParent;
+    }
+
     /**
      * Find the nearest valid drop target when direct elementFromPoint fails
      * @param {number} clientX - x coordinate
@@ -1065,6 +1107,12 @@ function RemoteFunctions(config = {}) {
             }
         }
 
+        // Check if we should prefer a parent when all edges are aligned
+        const bestParent = _findBestParentTarget(target);
+        if (bestParent) {
+            target = bestParent;
+        }
+
         // Store original styles before modifying them
         if (target._originalDragBackgroundColor === undefined) {
             target._originalDragBackgroundColor = target.style.backgroundColor;
@@ -1136,6 +1184,12 @@ function RemoteFunctions(config = {}) {
             return;
         }
 
+        // Check if we should prefer a parent when all edges are aligned
+        const bestParent = _findBestParentTarget(target);
+        if (bestParent) {
+            target = bestParent;
+        }
+
         // Determine drop position based on container layout and cursor position
         const indicatorType = _getIndicatorType(target);
         const dropZone = _getDropZone(

From 70fb6c1da5a8cebae9b65daa4c04f0c31378d6d1 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 18 Oct 2025 17:17:53 +0530
Subject: [PATCH 31/42] refactor: make drag over elements background a bit
 darker so that they are properly visible

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

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 537c508ba..835b60d1b 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -820,7 +820,7 @@ function RemoteFunctions(config = {}) {
         if (element._originalDragBackgroundColor === undefined) {
             element._originalDragBackgroundColor = element.style.backgroundColor;
         }
-        element.style.backgroundColor = "rgba(66, 133, 244, 0.15)";
+        element.style.backgroundColor = "rgba(66, 133, 244, 0.22)";
 
         // create the marker element
         let marker = window.document.createElement("div");
@@ -1122,7 +1122,7 @@ function RemoteFunctions(config = {}) {
         }
 
         // Add subtle hover effect to target element
-        target.style.backgroundColor = "rgba(66, 133, 244, 0.1)";
+        target.style.backgroundColor = "rgba(66, 133, 244, 0.22)";
         target.style.transition = "background-color 0.2s ease";
 
         // Determine indicator type and drop zone based on container layout and cursor position

From 83ceeace84529661d9e0e234029a7bee70baa21b Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sat, 18 Oct 2025 23:30:20 +0530
Subject: [PATCH 32/42] refactor: make image gallery UI consistent

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

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 835b60d1b..26bfe6797 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -1343,7 +1343,7 @@ function RemoteFunctions(config = {}) {
       `,
 
         selectImageFromComputer: `
-        <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
+        <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
           <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
         </svg>
       `,
@@ -1355,7 +1355,7 @@ function RemoteFunctions(config = {}) {
       `,
 
         folderSettings: `
-        <svg viewBox="0 0 24 24" fill="currentColor">
+        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
           <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>
       `
@@ -2224,7 +2224,7 @@ function RemoteFunctions(config = {}) {
                         left: 0 !important;
                         right: 0 !important;
                         width: 100vw !important;
-                        background: linear-gradient(180deg, rgba(12,14,20,0.0), rgba(12,14,20,0.7)) !important;
+                        background: #3C3F41 !important;
                         z-index: 2147483647 !important;
                         display: flex !important;
                         font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial !important;
@@ -2234,9 +2234,6 @@ function RemoteFunctions(config = {}) {
                     .phoenix-ribbon-container {
                         width: 100% !important;
                         height: 156px !important;
-                        background: rgba(255, 255, 255, 0.3) !important;
-                        backdrop-filter: blur(10px) !important;
-                        -webkit-backdrop-filter: blur(10px) !important;
                         border: 1px solid rgba(255, 255, 255, 0.2) !important;
                         position: relative !important;
                     }
@@ -2353,7 +2350,7 @@ function RemoteFunctions(config = {}) {
                         display: flex !important;
                         width: 100% !important;
                         position: absolute !important;
-                        top: 6px !important;
+                        top: 8px !important;
                     }
 
                     .phoenix-ribbon-header-left {
@@ -2370,54 +2367,50 @@ function RemoteFunctions(config = {}) {
                     .phoenix-ribbon-search {
                         display: flex !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;
+                        border: 1px solid rgba(0, 0, 0, 0.24) !important;
+                        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
                     }
 
                     .phoenix-ribbon-search:focus-within {
-                        background: rgba(21,25,36,0.9) !important;
-                        border-color: rgba(106,169,255,0.4) !important;
+                        border: 1px solid rgba(0, 0, 0, 0.24) !important;
+                        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
                     }
 
                     .phoenix-ribbon-search input {
                         background: transparent !important;
                         border: none !important;
                         outline: none !important;
-                        color: #eaeaf0 !important;
+                        color: #a0a0a0 !important;
                         width: 150px !important;
                         padding: 2px 6px !important;
                         border-radius: 4px 0 0 4px !important;
                     }
 
                     .phoenix-ribbon-search input::placeholder {
-                        color: rgba(234, 234, 240, 0.6) !important;
-                        opacity: 1 !important;
+                        color: #a0a0a0 !important;
+                        opacity: 0.7 !important;
                     }
 
                     .phoenix-ribbon-search input::-webkit-input-placeholder {
-                        color: rgba(234, 234, 240, 0.6) !important;
+                        color: #a0a0a0 !important;
+                        opacity: 0.7 !important;
                     }
 
                     .phoenix-ribbon-search input::-moz-placeholder {
-                        color: rgba(234, 234, 240, 0.6) !important;
-                        opacity: 1 !important;
+                        color: #a0a0a0 !important;
+                        opacity: 0.7 !important;
                     }
 
                     .phoenix-ribbon-search-btn {
                         background: transparent !important;
                         border: none !important;
-                        color: #4285F4 !important;
+                        color: #a0a0a0 !important;
                         cursor: pointer !important;
                         padding: 2px 6px !important;
                         border-radius: 0 4px 4px 0 !important;
@@ -2428,7 +2421,8 @@ function RemoteFunctions(config = {}) {
                     }
 
                     .phoenix-ribbon-search-btn:hover {
-                        color: #4285F4 !important;
+                        border: 1px solid rgba(0, 0, 0, 0.24) !important;
+                        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
                     }
 
                     .phoenix-ribbon-select {
@@ -2436,64 +2430,52 @@ function RemoteFunctions(config = {}) {
                     }
 
                     .phoenix-select-image-btn {
-                        background: rgba(21,25,36,0.65) !important;
-                        border: 1px solid rgba(255,255,255,0.14) !important;
-                        color: #eaeaf0 !important;
-                        padding: 4px 6px 2px 6px !important;
+                        background-color: transparent !important;
+                        border: none !important;
+                        color: #a0a0a0 !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;
-                        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
+                        border: 1px solid rgba(0, 0, 0, 0.24) !important;
+                        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !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;
+                        background-color: transparent !important;
+                        border: none !important;
+                        color: #a0a0a0 !important;
                         border-radius: 6px !important;
+                        cursor: pointer !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;
+                        margin-bottom: 4px !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;
+                        border: 1px solid rgba(0, 0, 0, 0.24) !important;
+                        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !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 7px 1px 7px !important;
+                        background-color: transparent !important;
+                        border: none !important;
+                        color: #a0a0a0 !important;
                         border-radius: 6px !important;
+                        cursor: pointer !important;
+                        display: flex !important;
+                        align-items: center !important;
+                        justify-content: center !important;
                         margin-right: 16px !important;
-                        transition: all 0.2s ease !important;
-                        font-size: 16px !important;
+                        font-size: 22px !important;
                     }
 
                     .phoenix-ribbon-close: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;
+                        border: 1px solid rgba(0, 0, 0, 0.24) !important;
+                        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
                     }
 
                     .phoenix-ribbon-attribution {

From 8858f70bad4a68c9d91d5c3a7b3175783402cacf Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sun, 19 Oct 2025 00:38:02 +0530
Subject: [PATCH 33/42] fix: buttons jumping on hover

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

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index 26bfe6797..c5fb62a42 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -1343,7 +1343,7 @@ function RemoteFunctions(config = {}) {
       `,
 
         selectImageFromComputer: `
-        <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
+        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
           <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
         </svg>
       `,
@@ -1358,6 +1358,12 @@ function RemoteFunctions(config = {}) {
         <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
           <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>
+      `,
+
+        close: `
+        <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
+          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+        </svg>
       `
     };
 
@@ -2350,25 +2356,28 @@ function RemoteFunctions(config = {}) {
                         display: flex !important;
                         width: 100% !important;
                         position: absolute !important;
-                        top: 8px !important;
+                        top: 7px !important;
                     }
 
                     .phoenix-ribbon-header-left {
                         width: 80% !important;
                         display: flex !important;
+                        align-items: center !important;
                     }
 
                     .phoenix-ribbon-header-right {
                         width: 20% !important;
                         display: flex !important;
                         justify-content: flex-end !important;
+                        align-items: center !important;
                     }
 
                     .phoenix-ribbon-search {
                         display: flex !important;
                         align-items: stretch !important;
                         border-radius: 6px !important;
-                        margin-left: 6px !important;
+                        margin-left: 8px !important;
+                        padding: 2px 2px 2px 4px !important;
                         border: 1px solid rgba(255,255,255,0.14) !important;
                     }
 
@@ -2409,7 +2418,7 @@ function RemoteFunctions(config = {}) {
 
                     .phoenix-ribbon-search-btn {
                         background: transparent !important;
-                        border: none !important;
+                        border: 1px solid transparent !important;
                         color: #a0a0a0 !important;
                         cursor: pointer !important;
                         padding: 2px 6px !important;
@@ -2426,15 +2435,19 @@ function RemoteFunctions(config = {}) {
                     }
 
                     .phoenix-ribbon-select {
-                        margin-left: 10px !important;
+                        margin-left: 4px !important;
                     }
 
                     .phoenix-select-image-btn {
                         background-color: transparent !important;
-                        border: none !important;
+                        border: 1px solid transparent !important;
                         color: #a0a0a0 !important;
                         border-radius: 6px !important;
                         cursor: pointer !important;
+                        padding: 3px 6px !important;
+                        display: flex !important;
+                        align-items: center !important;
+                        justify-content: center !important;
                     }
 
                     .phoenix-select-image-btn:hover {
@@ -2444,15 +2457,15 @@ function RemoteFunctions(config = {}) {
 
                     .phoenix-ribbon-folder-settings {
                         background-color: transparent !important;
-                        border: none !important;
+                        border: 1px solid transparent !important;
                         color: #a0a0a0 !important;
                         border-radius: 6px !important;
                         cursor: pointer !important;
-                        margin-right: 8px !important;
+                        margin-right: 2px !important;
+                        padding: 3px 6px !important;
                         display: flex !important;
                         align-items: center !important;
                         justify-content: center !important;
-                        margin-bottom: 4px !important;
                     }
 
                     .phoenix-ribbon-folder-settings:hover {
@@ -2462,15 +2475,15 @@ function RemoteFunctions(config = {}) {
 
                     .phoenix-ribbon-close {
                         background-color: transparent !important;
-                        border: none !important;
+                        border: 1px solid transparent !important;
                         color: #a0a0a0 !important;
                         border-radius: 6px !important;
                         cursor: pointer !important;
+                        padding: 3px 6px !important;
                         display: flex !important;
                         align-items: center !important;
                         justify-content: center !important;
                         margin-right: 16px !important;
-                        font-size: 22px !important;
                     }
 
                     .phoenix-ribbon-close:hover {
@@ -2618,7 +2631,9 @@ function RemoteFunctions(config = {}) {
                                 <button class="phoenix-ribbon-folder-settings" title="${config.strings.imageGallerySelectDownloadFolder}">
                                     ${ICONS.folderSettings}
                                 </button>
-                                <button class="phoenix-ribbon-close">×</button>
+                                <button class="phoenix-ribbon-close">
+                                    ${ICONS.close}
+                                </button>
                             </div>
                         </div>
                         <div class="phoenix-ribbon-nav left">&#8249;</div>

From 36b1420fa8810086d84eca5b765b8c24ef025463 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sun, 19 Oct 2025 19:13:15 +0530
Subject: [PATCH 34/42] refactor: reduce border radius of the image gallery
 header buttons

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

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index c5fb62a42..fb59fc1c5 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -2442,7 +2442,7 @@ function RemoteFunctions(config = {}) {
                         background-color: transparent !important;
                         border: 1px solid transparent !important;
                         color: #a0a0a0 !important;
-                        border-radius: 6px !important;
+                        border-radius: 4px !important;
                         cursor: pointer !important;
                         padding: 3px 6px !important;
                         display: flex !important;
@@ -2459,7 +2459,7 @@ function RemoteFunctions(config = {}) {
                         background-color: transparent !important;
                         border: 1px solid transparent !important;
                         color: #a0a0a0 !important;
-                        border-radius: 6px !important;
+                        border-radius: 4px !important;
                         cursor: pointer !important;
                         margin-right: 2px !important;
                         padding: 3px 6px !important;
@@ -2477,7 +2477,7 @@ function RemoteFunctions(config = {}) {
                         background-color: transparent !important;
                         border: 1px solid transparent !important;
                         color: #a0a0a0 !important;
-                        border-radius: 6px !important;
+                        border-radius: 4px !important;
                         cursor: pointer !important;
                         padding: 3px 6px !important;
                         display: flex !important;

From 28fd20baa32d4bd8fd0bb606d0fff2b00b6160a9 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sun, 19 Oct 2025 19:53:14 +0530
Subject: [PATCH 35/42] refactor: make image gallery search bar styles
 consistent to Phoenix UI

---
 src/LiveDevelopment/BrowserScripts/RemoteFunctions.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index fb59fc1c5..a7580cef6 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -1355,13 +1355,13 @@ function RemoteFunctions(config = {}) {
       `,
 
         folderSettings: `
-        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+        <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
           <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>
       `,
 
         close: `
-        <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
+        <svg viewBox="0 0 24 24" fill="currentColor" width="15" height="15">
           <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
         </svg>
       `
@@ -2419,6 +2419,7 @@ function RemoteFunctions(config = {}) {
                     .phoenix-ribbon-search-btn {
                         background: transparent !important;
                         border: 1px solid transparent !important;
+                        border-left: 1px solid gray !important;
                         color: #a0a0a0 !important;
                         cursor: pointer !important;
                         padding: 2px 6px !important;
@@ -3896,7 +3897,7 @@ function RemoteFunctions(config = {}) {
     // but the element stays at position which will lead to drift between the element & boxes
     function _dismissBoxesForFixedElements() {
         // first we try more options box, because its position is generally fixed even in overlapping cases
-        if (_nodeMoreOptionsBox && _nodeMoreOptionsBox.element) {
+        if (_nodeMoreOptionsBox && _nodeMoreOptionsBox.element && _nodeMoreOptionsBox._shadow) {
             const moreOptionsBoxElement = _nodeMoreOptionsBox._shadow.querySelector('.phoenix-more-options-box');
             if(moreOptionsBoxElement) {
 
@@ -3919,7 +3920,7 @@ function RemoteFunctions(config = {}) {
                     }
                 }
             }
-        } else if (_nodeInfoBox && _nodeInfoBox.element) {
+        } else if (_nodeInfoBox && _nodeInfoBox.element && _nodeInfoBox._shadow) {
             // if more options box didn't exist, we check with info box (logic is same)
             const infoBoxElement = _nodeInfoBox._shadow.querySelector('.phoenix-node-info-box');
             if (infoBoxElement) {
@@ -3954,7 +3955,7 @@ function RemoteFunctions(config = {}) {
     // now when live preview is scrolled the element remains at a fixed position but the AI box will drift away
     // so we reposition it when its a fixed element
     function _repositionAIBox() {
-        if (!_aiPromptBox || !_aiPromptBox.element) { return; }
+        if (!_aiPromptBox || !_aiPromptBox.element || !_aiPromptBox._shadow) { return; }
 
         const aiBox = _aiPromptBox._shadow.querySelector('.phoenix-ai-prompt-box');
         if (!aiBox) { return; }

From f9829081794fd6dea991ba5c2735db5f5a16c34d Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Sun, 19 Oct 2025 21:57:20 +0530
Subject: [PATCH 36/42] refactor: match live preview AI box styling with
 phoenix styling convention

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

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index a7580cef6..d452ed787 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -1364,6 +1364,12 @@ function RemoteFunctions(config = {}) {
         <svg viewBox="0 0 24 24" fill="currentColor" width="15" height="15">
           <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
         </svg>
+      `,
+
+        paperPlane: `
+        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+        </svg>
       `
     };
 
@@ -1900,9 +1906,9 @@ function RemoteFunctions(config = {}) {
 
                 .phoenix-ai-prompt-box {
                     position: absolute !important;
-                    background: white !important;
+                    background: #3C3F41 !important;
                     border: 1px solid #4285F4 !important;
-                    border-radius: 8px !important;
+                    border-radius: 4px !important;
                     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
                     font-family: Arial, sans-serif !important;
                     z-index: 2147483647 !important;
@@ -1919,55 +1925,56 @@ function RemoteFunctions(config = {}) {
                     width: 100% !important;
                     height: ${boxHeight}px !important;
                     border: none !important;
-                    border-radius: 8px !important;
+                    border-radius: 4px 4px 0 0 !important;
                     padding: 12px 40px 12px 16px !important;
                     font-size: 14px !important;
                     font-family: Arial, sans-serif !important;
                     resize: none !important;
                     outline: none !important;
                     box-sizing: border-box !important;
-                    background: #f9f9f9 !important;
+                    background: transparent !important;
+                    color: #c5c5c5 !important;
+                    transition: background 0.2s ease !important;
                 }
 
                 .phoenix-ai-prompt-textarea:focus {
-                    background: white !important;
+                    background: rgba(255, 255, 255, 0.03) !important;
                 }
 
                 .phoenix-ai-prompt-textarea::placeholder {
-                    color: #999 !important;
+                    color: #a0a0a0 !important;
+                    opacity: 0.7 !important;
                 }
 
                 .phoenix-ai-prompt-send-button {
-                    width: 28px !important;
-                    height: 28px !important;
-                    border: none !important;
-                    border-radius: 50% !important;
-                    background: #4285F4 !important;
-                    color: white !important;
+                    background-color: transparent !important;
+                    border: 1px solid transparent !important;
+                    color: #a0a0a0 !important;
+                    border-radius: 4px !important;
                     cursor: pointer !important;
+                    padding: 3px 6px !important;
                     display: flex !important;
                     align-items: center !important;
                     justify-content: center !important;
                     font-size: 14px !important;
-                    transition: background-color 0.2s !important;
-                    line-height: 0.5 !important;
+                    transition: all 0.2s ease !important;
                 }
 
                 .phoenix-ai-prompt-send-button:hover:not(:disabled) {
-                    background: #4285F4 !important;
+                    border: 1px solid rgba(0, 0, 0, 0.24) !important;
+                    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
                 }
 
                 .phoenix-ai-prompt-send-button:disabled {
-                    background: #dadce0 !important;
-                    color: #9aa0a6 !important;
+                    opacity: 0.5 !important;
                     cursor: not-allowed !important;
                 }
 
                 .phoenix-ai-bottom-controls {
-                    border-top: 1px solid #e0e0e0 !important;
+                    border-top: 1px solid rgba(255,255,255,0.14) !important;
                     padding: 8px 16px !important;
-                    background: #f9f9f9 !important;
-                    border-radius: 0 0 8px 8px !important;
+                    background: transparent !important;
+                    border-radius: 0 0 4px 4px !important;
                     display: flex !important;
                     align-items: center !important;
                     justify-content: space-between !important;
@@ -1975,16 +1982,30 @@ function RemoteFunctions(config = {}) {
 
                 .phoenix-ai-model-select {
                     padding: 4px 8px !important;
-                    border: 1px solid #ddd !important;
+                    border: 1px solid transparent !important;
                     border-radius: 4px !important;
                     font-size: 12px !important;
-                    background: white !important;
+                    background: transparent !important;
+                    color: #a0a0a0 !important;
                     outline: none !important;
                     cursor: pointer !important;
+                    transition: all 0.2s ease !important;
+                }
+
+                .phoenix-ai-model-select:hover {
+                    border: 1px solid rgba(0, 0, 0, 0.24) !important;
+                    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
                 }
 
                 .phoenix-ai-model-select:focus {
-                    border-color: #4285F4 !important;
+                    border: 1px solid rgba(0, 0, 0, 0.24) !important;
+                    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
+                }
+
+                .phoenix-ai-model-select option {
+                    background: #000 !important;
+                    color: #fff !important;
+                    padding: 4px 8px !important;
                 }
             `;
 
@@ -2003,7 +2024,7 @@ function RemoteFunctions(config = {}) {
                             <option value="slow">Slow AI</option>
                         </select>
                         <button class="phoenix-ai-prompt-send-button" disabled>
-                            ➤
+                            ${ICONS.paperPlane}
                         </button>
                     </div>
                 </div>
@@ -2377,7 +2398,6 @@ function RemoteFunctions(config = {}) {
                         align-items: stretch !important;
                         border-radius: 6px !important;
                         margin-left: 8px !important;
-                        padding: 2px 2px 2px 4px !important;
                         border: 1px solid rgba(255,255,255,0.14) !important;
                     }
 
@@ -2395,10 +2415,15 @@ function RemoteFunctions(config = {}) {
                         background: transparent !important;
                         border: none !important;
                         outline: none !important;
-                        color: #a0a0a0 !important;
+                        color: #c5c5c5 !important;
                         width: 150px !important;
-                        padding: 2px 6px !important;
+                        padding: 4px 8px !important;
                         border-radius: 4px 0 0 4px !important;
+                        transition: background 0.2s ease !important;
+                    }
+
+                    .phoenix-ribbon-search input:focus {
+                        background: rgba(255, 255, 255, 0.03) !important;
                     }
 
                     .phoenix-ribbon-search input::placeholder {

From 0aa3d64990f27e1f6be16aef21b7549e4566d5d7 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Mon, 20 Oct 2025 11:29:49 +0530
Subject: [PATCH 37/42] fix: element backgroud color not getting properly
 cleared

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

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index d452ed787..f0ff986f7 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -3545,10 +3545,11 @@ function RemoteFunctions(config = {}) {
                 body.removeChild(highlights[i]);
             }
 
-            if (this.trigger) {
-                for (i = 0; i < this.elements.length; i++) {
+            for (i = 0; i < this.elements.length; i++) {
+                if (this.trigger) {
                     _trigger(this.elements[i], "highlight", 0);
                 }
+                clearElementBackground(this.elements[i]);
             }
 
             this.elements = [];

From e672064f5ebce45deeab942d719c8441bd596ce8 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Tue, 21 Oct 2025 17:40:22 +0530
Subject: [PATCH 38/42] feat: show root folders when empty query is entered
 inside the folder location dialog

---
 src/LiveDevelopment/LivePreviewEdit.js | 46 +++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
index 11e95418e..7d88cfca7 100644
--- a/src/LiveDevelopment/LivePreviewEdit.js
+++ b/src/LiveDevelopment/LivePreviewEdit.js
@@ -808,6 +808,36 @@ 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 root directories
+     * root directories means those directories that are directly inside the project folder
+     * we need this to show when the query is empty
+     *
+     * @param {Directory} directory - project root directory
+     * @param {Array<string>} folderList - array to store discovered root folder paths
+     * @return {Promise} Resolves when root scan is complete
+     */
+    function _scanRootDirectoriesOnly(directory, folderList) {
+        return new Promise((resolve) => {
+            directory.getContents((err, contents) => {
+                if (err) {
+                    resolve();
+                    return;
+                }
+
+                const directories = contents.filter(entry => entry.isDirectory);
+
+                directories.forEach(dir => {
+                    // ignore all the excluded folders
+                    if (EXCLUDED_FOLDERS.includes(dir.name)) { return; }
+                    // add root folder name with trailing slash
+                    folderList.push(dir.name + '/');
+                });
+                resolve();
+            });
+        });
+    }
+
     /**
      * this function scans all the directories recursively
      * and then add the relative paths of the directories to the folderList array
@@ -902,15 +932,20 @@ define(function (require, exports, module) {
      *
      * @param {string} query - The search query from the input field
      * @param {Array<string>} folderList - List of all available folder paths
+     * @param {Array<string>} rootFolders - list of root-level 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) {
+    function _updateFolderSuggestions(query, folderList, rootFolders, stringMatcher, $suggestions, $input) {
         if (!query || query.trim() === '') {
+            // when input is empty we show the root folders
+            _renderFolderSuggestions(rootFolders.slice(0, 15), $suggestions, $input);
             return;
         }
 
+        if (!stringMatcher) { return; }
+
         // filter folders using fuzzy matching
         const matches = folderList
             .map(folder => {
@@ -1034,16 +1069,19 @@ define(function (require, exports, module) {
         const $rememberCheckbox = $dlg.find("#remember-folder-checkbox");
 
         let folderList = [];
+        let rootFolders = [];
         let stringMatcher = null;
 
-        // Scan project directories and setup event handlers
-        _scanDirectories(projectRoot, '', folderList).then(() => {
+        _scanRootDirectoriesOnly(projectRoot, rootFolders).then(() => {
             stringMatcher = new StringMatch.StringMatcher({ segmentedSearch: true });
+            _renderFolderSuggestions(rootFolders.slice(0, 15), $suggestions, $input);
         });
 
+        _scanDirectories(projectRoot, '', folderList);
+
         // input event handler
         $input.on('input', function() {
-            _updateFolderSuggestions($input.val(), folderList, stringMatcher, $suggestions, $input);
+            _updateFolderSuggestions($input.val(), folderList, rootFolders, stringMatcher, $suggestions, $input);
         });
         _registerFolderDialogInputHandlers($input, $suggestions, $dlg);
         // focus the input box

From aaf8268cb64829dc978f8f802941c730b0c6649e Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Tue, 21 Oct 2025 17:48:33 +0530
Subject: [PATCH 39/42] fix: scroll suggestions list to top when query changes

---
 src/LiveDevelopment/LivePreviewEdit.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
index 7d88cfca7..58912257d 100644
--- a/src/LiveDevelopment/LivePreviewEdit.js
+++ b/src/LiveDevelopment/LivePreviewEdit.js
@@ -918,6 +918,7 @@ define(function (require, exports, module) {
         html += '</ul>';
 
         $suggestions.html(html);
+        $suggestions.scrollTop(0); // always need to scroll to top when query changes
 
         // when a suggestion is clicked we add the folder path in the input box
         $suggestions.find('.folder-suggestion-item').on('click', function() {

From 162a09b7a01bd2a495e95ada740158f13f3ed78b Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Tue, 21 Oct 2025 18:05:52 +0530
Subject: [PATCH 40/42] feat: exclude folders that are redundant (starting with
 .)

---
 src/LiveDevelopment/LivePreviewEdit.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
index 58912257d..eb8751ac4 100644
--- a/src/LiveDevelopment/LivePreviewEdit.js
+++ b/src/LiveDevelopment/LivePreviewEdit.js
@@ -805,8 +805,21 @@ 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 is to determine whether we need to exclude a folder from the suggestions list
+     * so we exclude all the folders that start with . 'dot' as this are generally irrelevant dirs
+     * secondly, we also exclude large dirs like node modules as they might freeze the UI if we scan them
+     * @param {String} folderName - the folder name to check if we need to exclude it or not
+     * @returns {Boolean} - true if we should exclude otherwise false
+     */
+    function _isExcludedFolder(folderName) {
+        if (folderName.startsWith('.')) { return true; }
+
+        const UNNECESSARY_FOLDERS = ['node_modules', 'bower_components'];
+        if (UNNECESSARY_FOLDERS.includes(folderName)) { return true; }
+
+        return false;
+    }
 
     /**
      * this function scans all the root directories
@@ -828,8 +841,7 @@ define(function (require, exports, module) {
                 const directories = contents.filter(entry => entry.isDirectory);
 
                 directories.forEach(dir => {
-                    // ignore all the excluded folders
-                    if (EXCLUDED_FOLDERS.includes(dir.name)) { return; }
+                    if (_isExcludedFolder(dir.name)) { return; }
                     // add root folder name with trailing slash
                     folderList.push(dir.name + '/');
                 });
@@ -859,10 +871,7 @@ define(function (require, exports, module) {
                 const scanPromises = [];
 
                 directories.forEach(dir => {
-                    // if its an excluded folder we ignore it
-                    if (EXCLUDED_FOLDERS.includes(dir.name)) {
-                        return;
-                    }
+                    if (_isExcludedFolder(dir.name)) { return; }
 
                     const dirRelativePath = relativePath ? `${relativePath}${dir.name}/` : `${dir.name}/`;
                     folderList.push(dirRelativePath);

From 570f93dd272c4a488db3456daa7a41c56b59d84a Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Wed, 22 Oct 2025 13:49:00 +0530
Subject: [PATCH 41/42] feat: show drilled down results inside a folder when
 query ends with trailing slash

---
 src/LiveDevelopment/LivePreviewEdit.js | 35 +++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
index eb8751ac4..860abf049 100644
--- a/src/LiveDevelopment/LivePreviewEdit.js
+++ b/src/LiveDevelopment/LivePreviewEdit.js
@@ -885,6 +885,23 @@ define(function (require, exports, module) {
         });
     }
 
+    /**
+     * this function is responsible to get the subdirectories inside a directory
+     * we need this because we need to show the drilled down folders...
+     * @param {String} parentPath - Parent folder path (e.g., "images/")
+     * @param {Array<string>} folderList - Complete list of all folder paths
+     * @return {Array<string>} Array of direct subfolders only
+     */
+    function _getSubfolders(parentPath, folderList) {
+        return folderList.filter(folder => {
+            if (!folder.startsWith(parentPath)) { return false; }
+
+            const relativePath = folder.substring(parentPath.length);
+            const pathWithoutTrailingSlash = relativePath.replace(/\/$/, '');
+            return !pathWithoutTrailingSlash.includes('/');
+        });
+    }
+
     /**
      * Renders folder suggestions as a dropdown in the UI with fuzzy match highlighting
      *
@@ -932,8 +949,7 @@ define(function (require, exports, module) {
         // 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();
+            $input.val(folderPath).trigger('input');
         });
     }
 
@@ -954,6 +970,18 @@ define(function (require, exports, module) {
             return;
         }
 
+        // if the query ends with a /
+        // we then show the drilled down list of dirs inside that parent directory
+        if (query.endsWith('/')) {
+            const subfolders = _getSubfolders(query, folderList);
+            const formattedSubfolders = subfolders.map(folder => {
+                return stringMatcher.match(folder, query) || { label: folder, stringRanges: [{ text: folder, matched: false }] };
+            });
+
+            _renderFolderSuggestions(formattedSubfolders.slice(0, 15), $suggestions, $input);
+            return;
+        }
+
         if (!stringMatcher) { return; }
 
         // filter folders using fuzzy matching
@@ -1048,8 +1076,7 @@ define(function (require, exports, module) {
                 // if there's a selected suggestion, use it
                 if ($selected.length > 0) {
                     const folderPath = $selected.data('path');
-                    $input.val(folderPath);
-                    $suggestions.empty();
+                    $input.val(folderPath).trigger('input');
                 } else {
                     // no suggestions, trigger OK button click
                     $dlg.find('[data-button-id="ok"]').click();

From c0eb2c1efd1923c4c685ee2038f9e653c8dfde05 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Wed, 22 Oct 2025 13:57:50 +0530
Subject: [PATCH 42/42] refactor: hide the AI button from the more options box

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

diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
index f0ff986f7..f4bb2aa50 100644
--- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
+++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -1446,10 +1446,11 @@ function RemoteFunctions(config = {}) {
 
             let content = `<div class="node-options">`;
 
-            // not sure if we need to hide/show the AI icon, right now showing always
-            content += `<span data-action="ai" title="${config.strings.ai}">
-                    ${ICONS.ai}
-                </span>`;
+            // @abose @devansh
+            // hiding it for now as AI is not yet ready
+            // content += `<span data-action="ai" title="${config.strings.ai}">
+            //         ${ICONS.ai}
+            //     </span>`;
 
             // Only include select parent option if element supports it
             if (showSelectParentOption) {