feat: add choose download folder button

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -2134,6 +2134,23 @@ function RemoteFunctions(config = {}) {
                         transition: all 0.2s ease !important;
                     }
 
+                    .phoenix-ribbon-folder-select {
+                        background: rgba(0,0,0,0.5) !important;
+                        border: none !important;
+                        color: white !important;
+                        cursor: pointer !important;
+                        padding: 4px 8px !important;
+                        border-radius: 3px !important;
+                        margin-right: 8px !important;
+                        display: flex !important;
+                        align-items: center !important;
+                        justify-content: center !important;
+                    }
+
+                    .phoenix-ribbon-folder-select:hover {
+                        background: rgba(0,0,0,0.7) !important;
+                    }
+
                     .phoenix-ribbon-close {
                         background: rgba(0,0,0,0.5) !important;
                         border: none !important;
@@ -2250,6 +2267,11 @@ function RemoteFunctions(config = {}) {
                                 </div>
                             </div>
                             <div class="phoenix-ribbon-header-right">
+                                <button class="phoenix-ribbon-folder-select" title="${config.strings.imageGalleryChooseFolder}">
+                                    <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
+                                        <path d="M10 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2h-8l-2-2z"/>
+                                    </svg>
+                                </button>
                                 <button class="phoenix-ribbon-close">×</button>
                             </div>
                         </div>
@@ -2529,6 +2551,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 folderSelectBtn = this._shadow.querySelector('.phoenix-ribbon-folder-select');
             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');
@@ -2582,6 +2605,13 @@ function RemoteFunctions(config = {}) {
                 });
             }
 
+            if (folderSelectBtn) {
+                folderSelectBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    console.log('i got clicked');
+                });
+            }
+
             if (navLeft) {
                 navLeft.addEventListener('click', (e) => {
                     e.stopPropagation();

src/LiveDevelopment/main.js

@@ -83,6 +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,
             imageGallerySearchPlaceholder: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER
         }
     };

src/nls/root/strings.js

@@ -191,6 +191,7 @@ define({
     "LIVE_DEV_MORE_OPTIONS_AI": "Edit with AI",
     "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_SEARCH_PLACEHOLDER": "Search 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}",