feat: save folder location in state manager project wise

Author: devvaannsh

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 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";
+
     /**
      * This function syncs text content changes between the original source code
      * and the live preview DOM after a text edit in the browser
@@ -1005,12 +1008,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;
@@ -1036,6 +1048,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();

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>

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;
+    }
 }