mbeditor 0.3.8 → 0.3.9

data/app/assets/javascripts/mbeditor/components/MbeditorApp.js

@@ -24,6 +24,8 @@ var DEFAULT_EDITOR_PREFS = {
   theme: 'vs-dark',
   fontSize: 13,
   fontFamily: "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
+  lineHeight: 0,
+  letterSpacing: 0,
   tabSize: 4,
   insertSpaces: false,
   wordWrap: 'off',
@@ -32,6 +34,20 @@ var DEFAULT_EDITOR_PREFS = {
   scrollBeyondLastLine: false,
   minimap: false,
   bracketPairColorization: true,
+  renderLineHighlight: 'none',
+  cursorStyle: 'line',
+  cursorBlinking: 'blink',
+  folding: true,
+  smoothScrolling: false,
+  mouseWheelZoom: false,
+  autoClosingBrackets: 'always',
+  autoClosingQuotes: 'always',
+  autoIndent: 'full',
+  formatOnPaste: true,
+  formatOnType: true,
+  quickSuggestions: true,
+  wordBasedSuggestions: 'matchingDocuments',
+  acceptSuggestionOnEnter: 'on',
   autoRevealInExplorer: true,
   toolbarIconOnly: false,
   rubocopLintEnabled: true,
@@ -170,20 +186,17 @@ var MbeditorApp = function MbeditorApp() {
   var searchHasMore = _useState33h2[0];
   var setSearchHasMore = _useState33h2[1];
 
-  var _useState33i = useState(false);
-  var _useState33i2 = _slicedToArray(_useState33i, 2);
-  var searchLoadingMore = _useState33i2[0];
-  var setSearchLoadingMore = _useState33i2[1];
+  var _useState33tc = useState(0);
+  var _useState33tc2 = _slicedToArray(_useState33tc, 2);
+  var searchTotalCount = _useState33tc2[0];
+  var setSearchTotalCount = _useState33tc2[1];
 
-  var searchOffsetRef = useRef(0);        // tracks next offset to load
-  var searchQueryRef  = useRef('');       // tracks query that produced current results
-  var searchResultsContainerRef = useRef(null);
-  var searchVirtStartRef = useRef(0);     // first visible item index (for virtual list)
+  var searchHasMoreRef      = useRef(false);
+  var searchOffsetRef       = useRef(0);
+  var searchLoadingMoreRef  = useRef(false);
 
-  var _useState33j = useState(0);
-  var _useState33j2 = _slicedToArray(_useState33j, 2);
-  var searchVirtStart = _useState33j2[0];
-  var setSearchVirtStart = _useState33j2[1];
+  var searchQueryRef = useRef('');
+  var searchResultsContainerRef = useRef(null);
 
   var _useState8 = useState("explorer");
 
@@ -1481,40 +1494,61 @@ var MbeditorApp = function MbeditorApp() {
   var onFormatRef = useRef(handleFormat);
   onFormatRef.current = handleFormat;
 
+  // Eagerly load all remaining pages sequentially in the background.
+  // Self-chains via .then() so only one request is in-flight at a time.
+  // Uses only refs so it's safe to call from async callbacks without
+  // worrying about stale closure state.
   var _debouncedSearch = useRef(window._.debounce(function (q) {
     if (!q.trim()) {
       searchRequestIdRef.current += 1;
       setSearchLoading(false);
-      setSearchHasMore(false);
+      setSearchHasMore(false); searchHasMoreRef.current = false;
+      setSearchTotalCount(0);
       searchOffsetRef.current = 0;
+      searchLoadingMoreRef.current = false;
       searchQueryRef.current = '';
       EditorStore.setState({ searchResults: [], searchHasMore: false });
       return;
     }
     var requestId = ++searchRequestIdRef.current;
     setSearchLoading(true);
-    setSearchHasMore(false);
+    setSearchHasMore(false); searchHasMoreRef.current = false;
+    setSearchTotalCount(0);
     searchOffsetRef.current = 0;
+    searchLoadingMoreRef.current = false;
     searchQueryRef.current = q;
-    setSearchVirtStart(0);
-    searchVirtStartRef.current = 0;
     EditorStore.setState({ searchResults: [], searchHasMore: false });
     EditorStore.setStatus("Searching project...", "info");
     SearchService.projectSearch(q, 0, SearchService.PAGE_SIZE).then(function (res) {
-      if (searchRequestIdRef.current === requestId) {
-        var hasMore = !!(res && res.hasMore);
-        setSearchHasMore(hasMore);
-        searchOffsetRef.current = SearchService.PAGE_SIZE;
-        var count = res && res.results ? res.results.length : 0;
-        EditorStore.setStatus("Found " + count + (hasMore ? '+' : '') + " result" + (count !== 1 ? "s" : ""), "success");
-      }
+      if (searchRequestIdRef.current !== requestId) return;
+      var hasMore = !!(res && res.hasMore);
+      setSearchHasMore(hasMore); searchHasMoreRef.current = hasMore;
+      searchOffsetRef.current = SearchService.PAGE_SIZE;
+      if (res && res.totalCount != null) setSearchTotalCount(res.totalCount);
+      var total = (res && res.totalCount != null) ? res.totalCount : (res && res.results ? res.results.length : 0);
+      EditorStore.setStatus("Found " + total + (hasMore ? '+' : '') + " result" + (total !== 1 ? "s" : ""), "success");
     }).finally(function () {
-      if (searchRequestIdRef.current === requestId) {
-        setSearchLoading(false);
-      }
+      if (searchRequestIdRef.current === requestId) setSearchLoading(false);
     });
   }, 400)).current;
 
+  var loadMoreSearchResults = function loadMoreSearchResults() {
+    var q = searchQueryRef.current;
+    if (!q || searchLoadingMoreRef.current || !searchHasMoreRef.current) return;
+    searchLoadingMoreRef.current = true;
+    var offset = searchOffsetRef.current;
+    SearchService.projectSearch(q, offset, SearchService.PAGE_SIZE).then(function(res) {
+      if (searchQueryRef.current !== q) { searchLoadingMoreRef.current = false; return; }
+      var hasMore = !!(res && res.hasMore);
+      searchHasMoreRef.current = hasMore;
+      setSearchHasMore(hasMore);
+      searchOffsetRef.current = offset + SearchService.PAGE_SIZE;
+      searchLoadingMoreRef.current = false;
+    }).catch(function() {
+      searchLoadingMoreRef.current = false;
+    });
+  };
+
   var handleSearchChange = function handleSearchChange(e) {
     var val = e.target.value;
     if (!val) { clearSearch(); return; }
@@ -1527,12 +1561,11 @@ var MbeditorApp = function MbeditorApp() {
     if (_debouncedSearch.cancel) _debouncedSearch.cancel();
     setSearchQuery("");
     setSearchLoading(false);
-    setSearchHasMore(false);
-    setSearchLoadingMore(false);
+    setSearchHasMore(false); searchHasMoreRef.current = false;
+    setSearchTotalCount(0);
     searchOffsetRef.current = 0;
+    searchLoadingMoreRef.current = false;
     searchQueryRef.current = '';
-    setSearchVirtStart(0);
-    searchVirtStartRef.current = 0;
     EditorStore.setState({ searchResults: [], searchHasMore: false });
   };
 
@@ -1541,35 +1574,11 @@ var MbeditorApp = function MbeditorApp() {
     _debouncedSearch(searchQuery);
   };
 
-  var loadMoreSearchResults = function loadMoreSearchResults() {
-    var q = searchQueryRef.current;
-    if (!q || searchLoadingMore || !searchHasMore) return;
-    var offset = searchOffsetRef.current;
-    setSearchLoadingMore(true);
-    SearchService.projectSearch(q, offset, SearchService.PAGE_SIZE).then(function (res) {
-      var hasMore = !!(res && res.hasMore);
-      setSearchHasMore(hasMore);
-      searchOffsetRef.current = offset + SearchService.PAGE_SIZE;
-    }).finally(function () {
-      setSearchLoadingMore(false);
-    });
-  };
-
-  // Scroll handler for the virtualized search results list.
-  var SEARCH_ITEM_H = 40;
-  var SEARCH_OVERSCAN = 8;
+  // Load more results when the user scrolls near the bottom of the list.
   var handleSearchResultsScroll = function handleSearchResultsScroll(e) {
     var el = e.currentTarget;
-    var newStart = Math.floor(el.scrollTop / SEARCH_ITEM_H);
-    if (Math.abs(newStart - searchVirtStartRef.current) >= 4) {
-      searchVirtStartRef.current = newStart;
-      setSearchVirtStart(newStart);
-    }
-    // Trigger load-more when within 200px of the bottom
-    if (!searchLoadingMore && searchHasMore) {
-      if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
-        loadMoreSearchResults();
-      }
+    if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
+      loadMoreSearchResults();
     }
   };
 
@@ -2523,88 +2532,58 @@ var MbeditorApp = function MbeditorApp() {
               React.createElement("i", { className: searchLoading ? "fas fa-spinner fa-spin" : "fas fa-search" })
             )
           ),
-          React.createElement(
-            "div",
-            {
-              className: "search-results",
-              ref: searchResultsContainerRef,
-              onScroll: handleSearchResultsScroll
-            },
-            (function() {
-              var allResults = state.searchResults || [];
-              var totalCount = allResults.length;
-
-              if (searchQuery && totalCount === 0 && !searchLoading) {
-                return React.createElement(
-                  "div", { className: "search-results-empty" }, "No results"
-                );
-              }
-
-              if (totalCount === 0) return null;
+          (function() {
+            var allResults  = state.searchResults || [];
+            var loadedCount = allResults.length;
+            var total       = searchTotalCount > 0 ? searchTotalCount : loadedCount;
+            var hasAny      = loadedCount > 0;
 
-              // Compute virtual window
-              var containerEl = searchResultsContainerRef.current;
-              var containerH = containerEl ? containerEl.clientHeight : 400;
-              var visibleCount = Math.ceil(containerH / SEARCH_ITEM_H) + SEARCH_OVERSCAN * 2;
-              var virtStart = Math.max(0, searchVirtStart - SEARCH_OVERSCAN);
-              var virtEnd   = Math.min(totalCount, virtStart + visibleCount);
-              var paddingTop    = virtStart * SEARCH_ITEM_H;
-              var paddingBottom = Math.max(0, (totalCount - virtEnd) * SEARCH_ITEM_H);
-
-              var visibleItems = allResults.slice(virtStart, virtEnd).map(function(res, idx) {
-                var absoluteIdx = virtStart + idx;
-                var fileName = res.file.split('/').pop();
-                return React.createElement(
-                  "div",
-                  {
-                    key: absoluteIdx,
-                    className: "search-result-item",
-                    onClick: function() { handleSelectFile(res.file, res.file.split('/').pop(), res.line); }
-                  },
-                  React.createElement("i", { className: (window.getFileIcon ? window.getFileIcon(fileName) : 'far fa-file-code') + " search-result-icon" }),
-                  React.createElement(
+            return React.createElement(
+              React.Fragment,
+              null,
+              searchQuery && !searchLoading && React.createElement(
+                "div",
+                { className: "search-results-header" },
+                hasAny
+                  ? (total + (searchHasMore ? '+' : '') + " result" + (total !== 1 ? "s" : ""))
+                  : "No results"
+              ),
+              hasAny && React.createElement(
+                "div",
+                {
+                  className: "search-results",
+                  ref: searchResultsContainerRef,
+                  onScroll: handleSearchResultsScroll
+                },
+                allResults.map(function(res, i) {
+                  var fileName = res.file.split('/').pop();
+                  return React.createElement(
                     "div",
-                    { className: "search-result-body" },
+                    {
+                      key: i,
+                      className: "search-result-item",
+                      onClick: (function(r) { return function() { handleSelectFile(r.file, r.file.split('/').pop(), r.line); }; })(res)
+                    },
+                    React.createElement("i", { className: (window.getFileIcon ? window.getFileIcon(fileName) : 'far fa-file-code') + " search-result-icon" }),
                     React.createElement(
-                      "div",
-                      { className: "search-result-file" },
-                      fileName,
+                      "div", { className: "search-result-body" },
                       React.createElement(
-                        "span",
-                        { className: "search-result-line-num" },
-                        " ", res.file, ":", res.line
-                      )
-                    ),
-                    React.createElement(
-                      "div",
-                      { className: "search-result-text" },
-                      res.text
+                        "div", { className: "search-result-file" },
+                        fileName,
+                        React.createElement("span", { className: "search-result-line-num" }, " ", res.file, ":", res.line)
+                      ),
+                      React.createElement("div", { className: "search-result-text" }, res.text)
                     )
-                  )
-                );
-              });
-
-              return React.createElement(
-                React.Fragment,
-                null,
-                React.createElement(
-                  "div",
-                  { className: "search-results-meta" },
-                  totalCount,
-                  " result" + (totalCount !== 1 ? "s" : ""),
-                  searchHasMore && React.createElement("span", { className: "search-results-capped" }, " — more available, scroll for next page")
-                ),
-                React.createElement("div", { style: { height: paddingTop + 'px', flexShrink: 0 } }),
-                visibleItems,
-                React.createElement("div", { style: { height: paddingBottom + 'px', flexShrink: 0 } }),
-                searchLoadingMore && React.createElement(
-                  "div",
-                  { className: "search-results-loading-more", 'aria-busy': 'true' },
-                  'Loading more…'
+                  );
+                }),
+                searchHasMore && React.createElement(
+                  "div", { className: "search-loading-more" },
+                  React.createElement("i", { className: "fas fa-spinner fa-spin" }),
+                  " Loading more\u2026"
                 )
-              );
-            })()
-          )
+              )
+            );
+          })()
         )
       )
     ),
@@ -2735,6 +2714,32 @@ var MbeditorApp = function MbeditorApp() {
                         onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { fontFamily: e.target.value }); }); }
                       })
                     ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Row height in pixels. 0 = auto (roughly font size × 1.5)' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Line height (0=auto)'),
+                      React.createElement('input', {
+                        type: 'number', min: '0', max: '100', step: '1',
+                        className: 'ide-settings-input',
+                        value: editorPrefs.lineHeight != null ? editorPrefs.lineHeight : 0,
+                        onChange: function(e) {
+                          var v = parseInt(e.target.value, 10);
+                          if (!isNaN(v) && v >= 0 && v <= 100) setEditorPrefs(function(p) { return Object.assign({}, p, { lineHeight: v }); });
+                        }
+                      })
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Extra space between characters in pixels. 0 = default' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Letter spacing (px)'),
+                      React.createElement('input', {
+                        type: 'number', min: '-5', max: '20', step: '0.5',
+                        className: 'ide-settings-input',
+                        value: editorPrefs.letterSpacing != null ? editorPrefs.letterSpacing : 0,
+                        onChange: function(e) {
+                          var v = parseFloat(e.target.value);
+                          if (!isNaN(v) && v >= -5 && v <= 20) setEditorPrefs(function(p) { return Object.assign({}, p, { letterSpacing: v }); });
+                        }
+                      })
+                    ),
 
                     /* ── Indentation (unified editor + Prettier) ── */
                     React.createElement('div', { className: 'ide-settings-section-header' }, 'Indentation'),
@@ -2844,6 +2849,184 @@ var MbeditorApp = function MbeditorApp() {
                         onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { vimMode: v }); }); }
                       })
                     ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'When to insert a matching closing bracket automatically' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Auto-close brackets'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.autoClosingBrackets || 'always',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { autoClosingBrackets: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'always' }, 'Always'),
+                        React.createElement('option', { value: 'languageDefined' }, 'Per language rules'),
+                        React.createElement('option', { value: 'beforeWhitespace' }, 'Only before whitespace'),
+                        React.createElement('option', { value: 'never' }, 'Never')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'When to insert a matching closing quote automatically' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Auto-close quotes'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.autoClosingQuotes || 'always',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { autoClosingQuotes: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'always' }, 'Always'),
+                        React.createElement('option', { value: 'languageDefined' }, 'Per language rules'),
+                        React.createElement('option', { value: 'beforeWhitespace' }, 'Only before whitespace'),
+                        React.createElement('option', { value: 'never' }, 'Never')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'What to highlight on the current editor line' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Line highlight'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.renderLineHighlight || 'none',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { renderLineHighlight: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'none' }, 'None'),
+                        React.createElement('option', { value: 'gutter' }, 'Line number only'),
+                        React.createElement('option', { value: 'line' }, 'Current line background'),
+                        React.createElement('option', { value: 'all' }, 'Line number + background')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Cursor style'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.cursorStyle || 'line',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { cursorStyle: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'line' }, 'Line (|)'),
+                        React.createElement('option', { value: 'block' }, 'Block (filled)'),
+                        React.createElement('option', { value: 'underline' }, 'Underline (_)'),
+                        React.createElement('option', { value: 'line-thin' }, 'Line thin'),
+                        React.createElement('option', { value: 'block-outline' }, 'Block outline'),
+                        React.createElement('option', { value: 'underline-thin' }, 'Underline thin')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Cursor blinking'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.cursorBlinking || 'blink',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { cursorBlinking: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'blink' }, 'Blink (on/off)'),
+                        React.createElement('option', { value: 'smooth' }, 'Smooth (fade)'),
+                        React.createElement('option', { value: 'phase' }, 'Phase (offset fade)'),
+                        React.createElement('option', { value: 'expand' }, 'Expand (grow/shrink)'),
+                        React.createElement('option', { value: 'solid' }, 'Solid (no blink)')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Show collapse arrows next to foldable regions (functions, classes, blocks)' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Code folding'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: editorPrefs.folding !== false,
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { folding: v }); }); }
+                      })
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Animate scrolling instead of jumping instantly' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Smooth scrolling'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: !!(editorPrefs.smoothScrolling),
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { smoothScrolling: v }); }); }
+                      })
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Hold Ctrl (or Cmd) and scroll the mouse wheel to zoom the font size' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Ctrl+scroll to zoom'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: !!(editorPrefs.mouseWheelZoom),
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { mouseWheelZoom: v }); }); }
+                      })
+                    ),
+
+                    /* ── Behaviour ───────────────────────────────── */
+                    React.createElement('div', { className: 'ide-settings-section-header' }, 'Behaviour'),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'How aggressively the editor re-indents lines as you type' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Auto indent'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.autoIndent || 'full',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { autoIndent: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'none' }, 'None (disabled)'),
+                        React.createElement('option', { value: 'keep' }, 'Keep current level'),
+                        React.createElement('option', { value: 'brackets' }, 'Indent on { and ['),
+                        React.createElement('option', { value: 'advanced' }, 'Language indent rules'),
+                        React.createElement('option', { value: 'full' }, 'Full (language grammar)')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Whether pressing Enter accepts the highlighted autocomplete suggestion' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Accept suggestion on Enter'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.acceptSuggestionOnEnter || 'on',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { acceptSuggestionOnEnter: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'on' }, 'Always'),
+                        React.createElement('option', { value: 'smart' }, 'Only when navigated (↑↓)'),
+                        React.createElement('option', { value: 'off' }, 'Never (Tab only)')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Suggest completions based on words already present in open files' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Word-based suggestions'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.wordBasedSuggestions || 'matchingDocuments',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { wordBasedSuggestions: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'off' }, 'Off'),
+                        React.createElement('option', { value: 'currentDocument' }, 'Current file only'),
+                        React.createElement('option', { value: 'matchingDocuments' }, 'Same language files'),
+                        React.createElement('option', { value: 'allDocuments' }, 'All open files')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Auto-format pasted code using the language formatter' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Format on paste'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: editorPrefs.formatOnPaste !== false,
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { formatOnPaste: v }); }); }
+                      })
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Re-indent and auto-close blocks as you type (e.g. after pressing Enter inside {})' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Format on type'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: editorPrefs.formatOnType !== false,
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { formatOnType: v }); }); }
+                      })
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Show autocomplete suggestions while typing (not just on trigger characters like .)' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Quick suggestions'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: editorPrefs.quickSuggestions !== false,
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { quickSuggestions: v }); }); }
+                      })
+                    ),
 
                     /* ── Formatting (Prettier) ───────────────────── */
                     React.createElement('div', { className: 'ide-settings-section-header' }, 'Formatting'),

data/app/assets/javascripts/mbeditor/components/QuickOpenDialog.js

@@ -76,6 +76,24 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     if (inputRef.current) inputRef.current.focus();
   };
 
+  // Priority tier for a file path: lower = shown first.
+  // Order: controller > model > helper > concern > view > job > other > noise
+  function getFilePriority(path) {
+    var p = (path || '').toLowerCase();
+    if (p.indexOf('/controllers/') >= 0) return 1;
+    if (p.indexOf('/models/')      >= 0) return 2;
+    if (p.indexOf('/helpers/')     >= 0) return 3;
+    if (p.indexOf('/concerns/')    >= 0) return 4;
+    if (p.indexOf('/views/')       >= 0) return 5;
+    if (p.indexOf('/jobs/')        >= 0) return 6;
+    // Deprioritise: migrations, schema, compiled assets, vendor, lock files
+    if (p.indexOf('/migrate/')  >= 0 || p.indexOf('schema.rb') >= 0) return 90;
+    if (p.indexOf('/public/')   >= 0 || p.indexOf('/vendor/')   >= 0) return 91;
+    if (p.slice(-7)  === '.min.js' || p.slice(-8) === '.min.css' ||
+        p.slice(-4)  === '.map'    || p.slice(-5) === '.lock')        return 92;
+    return 50;
+  }
+
   var getQuickOpenIcon = function getQuickOpenIcon(path, name, type) {
     if (type === 'dir') {
       return React.createElement('i', { className: 'fas fa-folder quick-open-result-icon quick-open-folder-icon', 'aria-hidden': 'true' });
@@ -99,7 +117,13 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     var res = SearchService.searchFiles(query);
     // Filter by type: always include files; include dirs only when showFolders is on
     var filtered = showFolders ? res : res.filter(function(r) { return r.type !== 'dir'; });
-    setResults(filtered.slice(0, 20));
+    // Stable priority sort: controller > model > helper > concern > view > job > other > noise.
+    // JS sort is stable in modern engines, so relative order within the same tier
+    // (i.e. MiniSearch relevance score) is preserved.
+    filtered.sort(function(a, b) {
+      return getFilePriority(a.path) - getFilePriority(b.path);
+    });
+    setResults(filtered.slice(0, 200));
     setSelectedIndex(0);
   }, [query, showFolders]);
 

data/app/assets/javascripts/mbeditor/editor_store.js

@@ -20,6 +20,7 @@ var EditorStore = (function () {
   };
 
   var _listeners = [];
+  var _statusTimer = null;
 
   function getState() { return _state; }
 
@@ -42,6 +43,9 @@ var EditorStore = (function () {
   // Subscribe to changes in a specific subset of state keys.
   // The listener is only called when at least one of the watched keys changes
   // by reference (===), preventing unnecessary re-renders for unrelated updates.
+  // IMPORTANT: all state updates MUST produce a new object reference for any
+  // nested value (use Object.assign / spread — never mutate in place), otherwise
+  // subscribeToSlice will not detect the change.
   function subscribeToSlice(keys, fn) {
     var prev = {};
     keys.forEach(function(k) { prev[k] = _state[k]; });
@@ -57,9 +61,13 @@ var EditorStore = (function () {
   function setStatus(text, kind) {
     kind = kind || "info";
     setState({ statusMessage: { text: text, kind: kind } });
-    // Auto-clear after 4s for non-error messages
+    if (_statusTimer !== null) {
+      clearTimeout(_statusTimer);
+      _statusTimer = null;
+    }
     if (kind !== "error") {
-      setTimeout(function () {
+      _statusTimer = setTimeout(function () {
+        _statusTimer = null;
         if (_state.statusMessage.text === text) {
           setState({ statusMessage: { text: "", kind: "info" } });
         }