feat: download images in phoenix code assets folder

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -2134,23 +2134,6 @@ 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;
@@ -2267,11 +2250,6 @@ 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>
@@ -2551,7 +2529,6 @@ 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');
@@ -2605,13 +2582,6 @@ 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/LivePreviewEdit.js

@@ -755,12 +755,39 @@ define(function (require, exports, module) {
         const projectRoot = ProjectManager.getProjectRoot();
         if (!projectRoot) { return; }
 
-        getUniqueFilename(projectRoot.fullPath, filename, extnName).then((uniqueFilename) => {
+        // phoenix-assets folder, all the images will be stored inside this
+        const phoenixAssetsPath = projectRoot.fullPath + "phoenix-code-assets/";
+        const phoenixAssetsDir = FileSystem.getDirectoryForPath(phoenixAssetsPath);
+
+        // 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) => {
+            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);
+                });
+            } else {
+                _downloadImageToPhoenixAssets(message, filename, extnName, phoenixAssetsDir);
+            }
+        });
+    }
+
+    /**
+     * Helper function to download image to phoenix-assets folder
+     */
+    function _downloadImageToPhoenixAssets(message, filename, extnName, phoenixAssetsDir) {
+        getUniqueFilename(phoenixAssetsDir.fullPath, filename, extnName).then((uniqueFilename) => {
             // check if the image is loaded from computer or from remote
             if (message.isLocalFile && message.imageData) {
-                _handleUseThisImageLocalFiles(message, uniqueFilename, projectRoot);
+                _handleUseThisImageLocalFiles(message, uniqueFilename, phoenixAssetsDir);
             } else {
-                _handleUseThisImageRemote(message, uniqueFilename, projectRoot);
+                _handleUseThisImageRemote(message, uniqueFilename, phoenixAssetsDir);
             }
         }).catch(error => {
             console.error('Something went wrong when trying to use this image', error);