mbeditor 0.9.0 → 0.10.1

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

@@ -440,6 +440,17 @@ var MbeditorApp = function MbeditorApp() {
   var showLogPanel = _useStateLog2[0];
   var setShowLogPanel = _useStateLog2[1];
 
+  var _useStateProblems = useState(false);
+  var _useStateProblems2 = _slicedToArray(_useStateProblems, 2);
+  var showProblemsPanel = _useStateProblems2[0];
+  var setShowProblemsPanel = _useStateProblems2[1];
+
+  // Error/warning tallies across the open tabs, mirrored into the status bar.
+  var _useStateProblemCounts = useState({ errors: 0, warnings: 0 });
+  var _useStateProblemCounts2 = _slicedToArray(_useStateProblemCounts, 2);
+  var problemCounts = _useStateProblemCounts2[0];
+  var setProblemCounts = _useStateProblemCounts2[1];
+
   var _useState18g = useState(320);
   var _useState18g2 = _slicedToArray(_useState18g, 2);
   var gitPanelWidth = _useState18g2[0];
@@ -1487,14 +1498,18 @@ var MbeditorApp = function MbeditorApp() {
     });
   }
 
-  // Auto-refresh the file tree every 10s to pick up external changes (new files, deletions, etc.)
-  // When an ActionCable WebSocket is connected this acts only as a safety-net fallback —
-  // the WebSocket push above handles immediate invalidation after mbeditor mutations.
+  // Auto-refresh the file tree every 10s to pick up external changes (new files,
+  // deletions, a branch switch in a terminal).
+  //
+  // This runs whether or not the WebSocket is connected. It used to skip when
+  // connected, on the reasoning that the push covered it — but the server only
+  // broadcasts from mbeditor's own mutation endpoints, so a connected socket
+  // meant external changes were never picked up at all. The push remains the
+  // instant path for our own writes; this is what catches everything else.
   // Uses functional setTreeData to skip the re-render when nothing has changed.
   useEffect(function () {
     var intervalId = setInterval(function () {
       if (document.hidden) return;
-      if (WebSocketService.isConnected()) return; // WebSocket is handling refreshes
       FileService.getTree().then(function (data) {
         var newData = data || [];
         setTreeData(function (prevData) {
@@ -1536,6 +1551,31 @@ var MbeditorApp = function MbeditorApp() {
     };
   }, []);
 
+  // Keep the status-bar error/warning tallies in step with Monaco's markers.
+  // Every diagnostic source in the editor — rubocop, ruby-lsp, the TypeScript
+  // worker — lands here, so one subscription covers all of them. Markers change
+  // on every keystroke for JS, so the recount is debounced.
+  useEffect(function () {
+    if (!monacoReady || !window.monaco || !window.monaco.editor || !window.ProblemsPanel) return;
+
+    var timer = null;
+    var recount = function () {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(function () {
+        timer = null;
+        setProblemCounts(window.ProblemsPanel.counts());
+      }, 250);
+    };
+
+    var sub = window.monaco.editor.onDidChangeMarkers(recount);
+    recount();
+
+    return function () {
+      if (timer) clearTimeout(timer);
+      sub.dispose();
+    };
+  }, [monacoReady]);
+
   var handleSelectFile = function handleSelectFile(path, name, line, col) {
     TabManager.openTab(path, name, line, null, false, col);
     handleNodeSelect({ path: path, name: name || path.split('/').pop(), type: 'file' });
@@ -2747,6 +2787,10 @@ var MbeditorApp = function MbeditorApp() {
     setShowLogPanel(function (prev) { return !prev; });
   };
 
+  var toggleProblemsPanel = function toggleProblemsPanel() {
+    setShowProblemsPanel(function (prev) { return !prev; });
+  };
+
   var toggleZenMode = function toggleZenMode() {
     setZenMode(function (prev) {
       var next = !prev;
@@ -3382,16 +3426,24 @@ var MbeditorApp = function MbeditorApp() {
         "Mini Browser Editor — ",
         window.location.host
       ),
+      // The slot claims all the room between the title and the buttons; the
+      // search pill then takes 75% of it, centred. Sizing the pill against a
+      // slot rather than against the title bar keeps it proportional to the
+      // actual gap as the toolbar's button labels grow and shrink.
       React.createElement(
-        'button',
-        {
-          type: 'button',
-          className: 'ide-titlebar-search',
-          title: 'Search files (Ctrl/Cmd+P)',
-          onClick: function () { setQuickOpen(true); }
-        },
-        React.createElement('i', { className: 'fas fa-search', style: { marginRight: '6px', opacity: 0.7 } }),
-        React.createElement('span', { className: 'ide-titlebar-search-text' }, 'Search files…')
+        'div',
+        { className: 'ide-titlebar-search-slot' },
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            className: 'ide-titlebar-search',
+            title: 'Search files (Ctrl/Cmd+P)',
+            onClick: function () { setQuickOpen(true); }
+          },
+          React.createElement('i', { className: 'fas fa-search', style: { marginRight: '6px', opacity: 0.7 } }),
+          React.createElement('span', { className: 'ide-titlebar-search-text' }, 'Search files…')
+        )
       ),
       React.createElement(
         "div",
@@ -3455,13 +3507,6 @@ var MbeditorApp = function MbeditorApp() {
           )
         ),
         React.createElement("div", { className: "statusbar-sep" }),
-        React.createElement(
-          "button",
-          { type: "button", className: "statusbar-btn", onClick: toggleLogPanel, title: "Toggle Rails log (Ctrl+Shift+L)" },
-          React.createElement("i", { className: "fas fa-stream" }),
-          !editorPrefs.toolbarIconOnly && " Logs"
-        ),
-        React.createElement("div", { className: "statusbar-sep" }),
         React.createElement(
           "button",
           { type: "button", className: "statusbar-btn", onClick: function () { return setShowHelp(true); }, title: "Keyboard shortcuts & help" },
@@ -4974,6 +5019,12 @@ var MbeditorApp = function MbeditorApp() {
       ),
       showLogPanel && !zenMode && React.createElement(window.LogPanel || LogPanel, {
         onClose: function () { setShowLogPanel(false); }
+      }),
+      showProblemsPanel && !zenMode && React.createElement(window.ProblemsPanel || ProblemsPanel, {
+        onClose: function () { setShowProblemsPanel(false); },
+        onOpenFile: function (path, line, col) {
+          handleSelectFile(path, path.split('/').pop(), line, col);
+        }
       })
     ),
     React.createElement(
@@ -4998,6 +5049,23 @@ var MbeditorApp = function MbeditorApp() {
           state.gitInfo.behind
         )
       ),
+      React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "statusbar-btn statusbar-problems" + (showProblemsPanel ? " active" : ""),
+          onClick: toggleProblemsPanel,
+          title: problemCounts.errors + " error(s), " + problemCounts.warnings +
+            " warning(s) in open files — click to open Problems"
+        },
+        React.createElement("i", { className: "fas fa-bug statusbar-problems-error-icon" }),
+        React.createElement("span", { className: "statusbar-problems-count" }, problemCounts.errors),
+        React.createElement("i", {
+          className: "fas fa-exclamation-triangle statusbar-problems-warning-icon",
+          style: { marginLeft: "8px" }
+        }),
+        React.createElement("span", { className: "statusbar-problems-count" }, problemCounts.warnings)
+      ),
       !serverOnline && (function () {
         var dirtyCount = state.panes.reduce(function (acc, p) {
           return acc + p.tabs.filter(function (t) { return t.dirty; }).length;
@@ -5027,6 +5095,17 @@ var MbeditorApp = function MbeditorApp() {
         { className: "statusbar-msg " + state.statusMessage.kind },
         state.statusMessage.text
       ),
+      React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "statusbar-btn statusbar-logs-btn" + (showLogPanel ? " active" : ""),
+          onClick: toggleLogPanel,
+          title: "Toggle Rails log (Ctrl+Shift+L)"
+        },
+        React.createElement("i", { className: "fas fa-stream" }),
+        " Logs"
+      ),
       activeEOL && React.createElement(
         "button",
         {

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

@@ -0,0 +1,217 @@
+'use strict';
+
+// ProblemsPanel — bottom drawer listing the diagnostics Monaco is holding for
+// the files you have open: rubocop and ruby-lsp for Ruby, the TypeScript
+// worker's syntax errors for JS/JSX, and anything else that writes markers.
+//
+// Scope is deliberately "open tabs", not the workspace: markers only exist for
+// models Monaco has loaded, so a count over anything wider would be a lie.
+// Closing a tab drops its problems, same as VS Code with an unopened file.
+var ProblemsPanel = (function () {
+  var SEVERITY_ERROR = 8;
+  var SEVERITY_WARNING = 4;
+  // Long enough to recognise the statement, short enough not to push the
+  // location off the end of the row.
+  var CODE_PREVIEW_LIMIT = 120;
+
+  // The offending source line, trimmed, for display beside the message. Markers
+  // can outlive the edit that invalidated them by a frame, so a line number
+  // past the end of the buffer yields nothing rather than throwing.
+  function codePreview(model, lineNumber) {
+    if (!lineNumber || lineNumber < 1 || lineNumber > model.getLineCount()) return '';
+
+    var text = model.getLineContent(lineNumber).trim();
+    return text.length > CODE_PREVIEW_LIMIT ? text.slice(0, CODE_PREVIEW_LIMIT) + '…' : text;
+  }
+
+  // Reading markers means walking every model, so callers that only want the
+  // counts share this one pass. Exposed on the component for the status bar.
+  function collect() {
+    var monaco = window.monaco;
+    if (!monaco || !monaco.editor) return { errors: [], warnings: [], byFile: [] };
+
+    var errors = [];
+    var warnings = [];
+    var byFile = [];
+
+    monaco.editor.getModels().forEach(function (model) {
+      var path = model._mbeditorPath;
+      if (!path || model.isDisposed()) return;
+
+      var markers = monaco.editor.getModelMarkers({ resource: model.uri }).filter(function (m) {
+        return m.severity === SEVERITY_ERROR || m.severity === SEVERITY_WARNING;
+      });
+      if (markers.length === 0) return;
+
+      markers.sort(function (a, b) { return a.startLineNumber - b.startLineNumber; });
+
+      // Carry the source line alongside the marker: read here, while the model
+      // is in hand, rather than looking the model up again at render time.
+      var entries = markers.map(function (m) {
+        (m.severity === SEVERITY_ERROR ? errors : warnings).push(m);
+        return { marker: m, code: codePreview(model, m.startLineNumber) };
+      });
+
+      byFile.push({ path: path, markers: entries });
+    });
+
+    byFile.sort(function (a, b) { return a.path < b.path ? -1 : a.path > b.path ? 1 : 0; });
+    return { errors: errors, warnings: warnings, byFile: byFile };
+  }
+
+  function counts() {
+    var all = collect();
+    return { errors: all.errors.length, warnings: all.warnings.length };
+  }
+
+  var Panel = function ProblemsPanelComponent(_ref) {
+    var onClose = _ref.onClose;
+    var onOpenFile = _ref.onOpenFile;
+
+    var _problems = React.useState(collect);
+    var problems = _problems[0], setProblems = _problems[1];
+    var _filter = React.useState('');
+    var filter = _filter[0], setFilter = _filter[1];
+
+    var MIN_HEIGHT = 120;
+    var _height = React.useState(function () {
+      var saved = parseInt(window.localStorage.getItem('mbeditorProblemsHeight'), 10);
+      return (saved && saved >= MIN_HEIGHT) ? saved : 240;
+    });
+    var height = _height[0], setHeight = _height[1];
+    var heightRef = React.useRef(height);
+    heightRef.current = height;
+
+    // Same delta-based resize as the log drawer.
+    var onResizeMouseDown = function (e) {
+      e.preventDefault();
+      var startY = e.clientY;
+      var startHeight = heightRef.current;
+      var onMove = function (ev) {
+        var vh = window.innerHeight || document.documentElement.clientHeight || 0;
+        var maxH = vh > 0 ? Math.round(vh * 0.85) : Infinity;
+        setHeight(Math.min(maxH, Math.max(MIN_HEIGHT, startHeight + (startY - ev.clientY))));
+      };
+      var onUp = function () {
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+        window.localStorage.setItem('mbeditorProblemsHeight', String(heightRef.current));
+      };
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    };
+
+    React.useEffect(function () {
+      if (!window.monaco || !window.monaco.editor) return;
+      var refresh = function () { setProblems(collect()); };
+      var sub = window.monaco.editor.onDidChangeMarkers(refresh);
+      refresh();
+      return function () { sub.dispose(); };
+    }, []);
+
+    var needle = filter.trim().toLowerCase();
+    var shown = needle
+      ? problems.byFile.map(function (entry) {
+          return {
+            path: entry.path,
+            markers: entry.markers.filter(function (item) {
+              return (item.marker.message + ' ' + item.code + ' ' + entry.path)
+                .toLowerCase().indexOf(needle) !== -1;
+            })
+          };
+        }).filter(function (entry) { return entry.markers.length > 0; })
+      : problems.byFile;
+
+    var total = problems.errors.length + problems.warnings.length;
+
+    return React.createElement(
+      'div',
+      { className: 'ide-problems-drawer', style: { height: height + 'px' } },
+      React.createElement('div', {
+        className: 'ide-problems-resize',
+        title: 'Drag to resize',
+        onMouseDown: onResizeMouseDown
+      }),
+      React.createElement(
+        'div',
+        { className: 'ide-problems-header' },
+        React.createElement('i', { className: 'fas fa-bug' }),
+        React.createElement('span', { className: 'ide-problems-title' }, 'Problems'),
+        React.createElement(
+          'span',
+          { className: 'ide-problems-summary' },
+          problems.errors.length + ' error' + (problems.errors.length === 1 ? '' : 's') +
+            ', ' + problems.warnings.length + ' warning' + (problems.warnings.length === 1 ? '' : 's') +
+            ' in open files'
+        ),
+        React.createElement('input', {
+          className: 'ide-problems-filter',
+          type: 'text',
+          placeholder: 'Filter…',
+          value: filter,
+          onChange: function (e) { setFilter(e.target.value); }
+        }),
+        React.createElement('button', {
+          type: 'button', className: 'ide-problems-btn',
+          title: 'Close', onClick: onClose
+        }, React.createElement('i', { className: 'fas fa-times' }))
+      ),
+      React.createElement(
+        'div',
+        { className: 'ide-problems-body' },
+        total === 0
+          ? React.createElement('div', { className: 'ide-problems-empty' }, 'No problems in the open files')
+          : shown.length === 0
+            ? React.createElement('div', { className: 'ide-problems-empty' }, 'No problems match the filter')
+            : shown.map(function (entry) {
+                return React.createElement(
+                  'div',
+                  { className: 'ide-problems-file', key: entry.path },
+                  React.createElement(
+                    'div',
+                    { className: 'ide-problems-file-name' },
+                    entry.path,
+                    React.createElement('span', { className: 'ide-problems-file-count' }, entry.markers.length)
+                  ),
+                  entry.markers.map(function (item, index) {
+                    var marker = item.marker;
+                    var isError = marker.severity === SEVERITY_ERROR;
+                    return React.createElement(
+                      'button',
+                      {
+                        type: 'button',
+                        className: 'ide-problems-item ide-problems-item-' + (isError ? 'error' : 'warning'),
+                        key: entry.path + ':' + marker.startLineNumber + ':' + index,
+                        'aria-label': (isError ? 'Error' : 'Warning') + ': ' + marker.message +
+                          ', ' + entry.path + ' line ' + marker.startLineNumber +
+                          (item.code ? ', source: ' + item.code : ''),
+                        onClick: function () {
+                          if (onOpenFile) onOpenFile(entry.path, marker.startLineNumber, marker.startColumn);
+                        }
+                      },
+                      React.createElement('i', {
+                        className: 'fas ' + (isError ? 'fa-bug' : 'fa-exclamation-triangle') + ' ide-problems-icon',
+                        'aria-hidden': 'true'
+                      }),
+                      React.createElement('span', { className: 'ide-problems-msg' }, marker.message),
+                      item.code && React.createElement('code', { className: 'ide-problems-code' }, item.code),
+                      marker.source && React.createElement('span', { className: 'ide-problems-source' }, marker.source),
+                      React.createElement(
+                        'span',
+                        { className: 'ide-problems-loc' },
+                        '[' + marker.startLineNumber + ', ' + marker.startColumn + ']'
+                      )
+                    );
+                  })
+                );
+              })
+      )
+    );
+  };
+
+  Panel.collect = collect;
+  Panel.counts = counts;
+  return Panel;
+})();
+
+window.ProblemsPanel = ProblemsPanel;

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

@@ -94,6 +94,20 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     return 50;
   }
 
+  // Recently opened files, most recent first, as a path -> rank lookup. Built
+  // once per query rather than per comparison, since the sort calls this for
+  // every pair.
+  function recentRanks() {
+    var ranks = {};
+    var recent = (typeof TabManager !== 'undefined' && TabManager.getRecentFiles)
+      ? TabManager.getRecentFiles() : [];
+    recent.forEach(function (entry, index) {
+      var path = typeof entry === 'string' ? entry : (entry && entry.path);
+      if (path && !(path in ranks)) ranks[path] = index;
+    });
+    return ranks;
+  }
+
   // Match relevance within a priority tier: exact basename > prefix > substring > other.
   function getMatchRelevance(result, q) {
     if (!q) return 3;
@@ -128,13 +142,30 @@ 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'; });
-    // Sort: files always beat dirs; within the same tier exact basename > prefix > substring > other.
-    // JS sort is stable in modern engines so MiniSearch relevance score order is the tiebreaker
-    // when match relevance is equal.
+    // Sort, in order of precedence:
+    //   1. match quality — exact basename > prefix > substring > other, so a
+    //      worse match can never jump the queue however recently it was opened
+    //   2. how recently the file was opened, most recent first
+    //   3. the static file-type tier (controller > model > … > noise)
+    //
+    // Recency sits above the type tier deliberately: when two files match a
+    // query equally well, the one you were just working in is almost always
+    // the one you meant, and that beats a guess made from the directory name.
+    // Files never opened all tie here and fall through to the type tier, which
+    // is what orders the bulk of a cold result list.
+    //
+    // Directories keep their +100 penalty inside the type tier so files still
+    // come first. JS sort is stable in modern engines, so MiniSearch's own
+    // relevance order remains the final tiebreaker.
+    var ranks = recentRanks();
+    var NEVER_OPENED = Infinity;
     filtered.sort(function(a, b) {
       var aRelevance = getMatchRelevance(a, query);
       var bRelevance = getMatchRelevance(b, query);
       if (aRelevance !== bRelevance) return aRelevance - bRelevance;
+      var aRecent = a.path in ranks ? ranks[a.path] : NEVER_OPENED;
+      var bRecent = b.path in ranks ? ranks[b.path] : NEVER_OPENED;
+      if (aRecent !== bRecent) return aRecent - bRecent;
       var aPriority = getFilePriority(a.path) + (a.type === 'dir' ? 100 : 0);
       var bPriority = getFilePriority(b.path) + (b.type === 'dir' ? 100 : 0);
       return aPriority - bPriority;