feat: show folder suggestions when typing a folder name in the dialog

Author: devvaannsh

src/LiveDevelopment/LivePreviewEdit.js

@@ -31,7 +31,9 @@ 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 ImageFolderDialogTemplate = require("text!htmlContent/image-folder-dialog.html");
 
     /**
@@ -783,6 +785,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
@@ -792,33 +908,43 @@ 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() {
             $input.focus();
         }, 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();
         });
     }
 

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>

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