mbeditor 0.1.2 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 815b7e6688f6e3d377f9c0e0f502f5b2c105da7058209d45e067c20096186c67
-  data.tar.gz: c6f493c1a1a2a4c1f6d4ed14eb593afc28d8b173c88a4fdf1954899f44500f6c
+  metadata.gz: 414b42474453e80d58cfafbab5db7d5381dd8ebb22ba1e852a10e720eb246d8a
+  data.tar.gz: 0fbaffaedc1aed6196589975816fb9b009df7f4a810dcc41e3aa428d8e19ee37
 SHA512:
-  metadata.gz: b450317bed54ea23c246042a2a86a1a3468f20de9a3d71b81ca7a7a69a80d01279ad40ca569a755077317113099f4cb931702ad620448a812ffecc4d1b4b1508
-  data.tar.gz: 3b23f5db3e43051546fd8997b8b5b975403aa7479c68463b7f1ebe1c6cc812f30322b70b2e838da51c012e7cd87604816d886715259af8169428f13f72a62d55
+  metadata.gz: 4bab09aab7ae92d7835838d3c4b240915d0c3ff0c3fc32516a69bdad24430246c86c0da3f508946e9c738ca94a0966d7457903ba9095000a4f01643ca298dbe7
+  data.tar.gz: 522f1e56c9c280ccf9078f9f960ad1c3e3f1d1f99fafc2e9d80c18d539cd6ba409d18cb596b434037e551403623b74c54c7f2f4dfe8c03c90760eebe8b51862c

data/README.md

@@ -1,5 +1,8 @@
 # mbeditor
 
+[![Gem Version](https://badge.fury.io/rb/mbeditor.svg)](https://rubygems.org/gems/mbeditor)
+[![Test](https://github.com/ojnoonan/mbeditor/actions/workflows/test.yml/badge.svg)](https://github.com/ojnoonan/mbeditor/actions/workflows/test.yml)
+
 Mbeditor (Mini Browser Editor) is a mountable Rails engine that adds a browser-based editor UI to a Rails app.
 
 ## Features

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

@@ -1,3 +1,9 @@
+//= require mbeditor/editor_store
+//= require mbeditor/file_icon
+//= require mbeditor/file_service
+//= require mbeditor/git_service
+//= require mbeditor/search_service
+//= require mbeditor/tab_manager
 //= require mbeditor/editor_plugins
 //= require mbeditor/components/CollapsibleSection
 //= require mbeditor/components/ShortcutHelp
@@ -12,8 +18,3 @@
 //= require mbeditor/components/QuickOpenDialog
 //= require mbeditor/components/TabBar
 //= require mbeditor/components/MbeditorApp
-//= require mbeditor/editor_store
-//= require mbeditor/file_service
-//= require mbeditor/git_service
-//= require mbeditor/search_service
-//= require mbeditor/tab_manager

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

@@ -83,10 +83,12 @@ var DiffViewer = function DiffViewer(_ref) {
 
   function getLanguageForPath(filePath) {
     if (!filePath) return 'plaintext';
+    var fileName = filePath.split('/').pop().toLowerCase();
+    if (fileName === 'gemfile' || fileName === 'gemfile.lock' || fileName === 'rakefile') return 'ruby';
     var ext = filePath.split('.').pop().toLowerCase();
     var map = {
       'rb': 'ruby', 'js': 'javascript', 'jsx': 'javascript',
-      'ts': 'javascript', 'tsx': 'javascript',
+      'ts': 'typescript', 'tsx': 'typescript',
       'json': 'json', 'yml': 'yaml', 'yaml': 'yaml',
       'css': 'css', 'scss': 'scss', 'html': 'html',
       'xml': 'xml', 'md': 'markdown', 'sh': 'shell'

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

@@ -40,6 +40,19 @@ var EditorPanel = function EditorPanel(_ref) {
   var setIsBlameLoading = _useState8[1];
 
   var blameDecorationsRef = useRef([]);
+  var blameZoneIdsRef = useRef([]);
+
+  var clearBlameZones = function clearBlameZones(editor) {
+    if (!editor) return;
+    if (blameZoneIdsRef.current.length === 0) return;
+
+    editor.changeViewZones(function(accessor) {
+      blameZoneIdsRef.current.forEach(function(zoneId) {
+        accessor.removeZone(zoneId);
+      });
+    });
+    blameZoneIdsRef.current = [];
+  };
 
   var findTabByPath = function findTabByPath(path) {
     if (!path) return null;
@@ -62,16 +75,23 @@ var EditorPanel = function EditorPanel(_ref) {
       window.MbeditorEditorPlugins.registerGlobalExtensions(window.monaco);
     }
 
-    var parts = tab.path.split('.');
+    var fileName = tab.path.split('/').pop() || '';
+    var parts = fileName.split('.');
     var extension = parts.length > 1 ? parts.pop().toLowerCase() : '';
     var language = 'plaintext';
-    switch (extension) {
-      case 'rb':case 'ruby':case 'gemspec':case 'rakefile':
+    switch (fileName.toLowerCase()) {
+      case 'gemfile':
+      case 'gemfile.lock':
+      case 'rakefile':
         language = 'ruby';break;
+      default:
+        switch (extension) {
+      case 'rb':case 'ruby':case 'gemspec':
+          language = 'ruby';break;
       case 'js':case 'jsx':
         language = 'javascript';break;
       case 'ts':case 'tsx':
-        language = 'javascript';break;
+        language = 'typescript';break;
       case 'css':case 'scss':case 'sass':
         language = 'css';break;
       case 'html':case 'erb':
@@ -88,6 +108,7 @@ var EditorPanel = function EditorPanel(_ref) {
         language = 'shell';break;
       case 'png':case 'jpg':case 'jpeg':case 'gif':case 'svg':case 'ico':case 'webp':case 'bmp':case 'avif':
         language = 'image';break;
+        }
     }
 
     if (language === 'image') return;
@@ -143,6 +164,8 @@ var EditorPanel = function EditorPanel(_ref) {
     });
 
     return function () {
+      blameDecorationsRef.current = editor.deltaDecorations(blameDecorationsRef.current, []);
+      clearBlameZones(editor);
       TabManager.saveTabViewState(tab.id, editor.saveViewState());
       if (window.__mbeditorActiveEditor === editor) {
         window.__mbeditorActiveEditor = null;
@@ -224,14 +247,20 @@ var EditorPanel = function EditorPanel(_ref) {
   // Reset blame state when file path changes
   useEffect(function () {
     setBlameData(null);
-    setIsBlameVisible(false);
     setIsBlameLoading(false);
+
+    // Clear stale blame render when switching files.
+    if (monacoRef.current && monacoRef.current.getModel()) {
+      clearBlameZones(monacoRef.current);
+      blameDecorationsRef.current = monacoRef.current.deltaDecorations(blameDecorationsRef.current, []);
+    }
   }, [tab.path]);
 
   // Handle Blame data fetching
   useEffect(function () {
     if (!isBlameVisible) {
       if (monacoRef.current && monacoRef.current.getModel()) {
+        clearBlameZones(monacoRef.current);
         blameDecorationsRef.current = monacoRef.current.deltaDecorations(blameDecorationsRef.current, []);
       }
       return;
@@ -240,7 +269,13 @@ var EditorPanel = function EditorPanel(_ref) {
     if (!blameData && !isBlameLoading) {
       setIsBlameLoading(true);
       GitService.fetchBlame(tab.path).then(function(data) {
-        setBlameData(data.lines || []);
+        var lines = data && Array.isArray(data.lines) ? data.lines : [];
+        setBlameData(lines);
+        if (lines.length === 0) {
+          EditorStore.setStatus('No blame data available for this file', 'warning');
+        } else {
+          EditorStore.setStatus('Loaded blame for ' + lines.length + ' lines', 'info');
+        }
         setIsBlameLoading(false);
       }).catch(function(err) {
         var status = err.response && err.response.status;
@@ -248,38 +283,89 @@ var EditorPanel = function EditorPanel(_ref) {
           ? "File is not tracked by git"
           : "Failed to load blame: " + ((err.response && err.response.data && err.response.data.error) || err.message);
         EditorStore.setStatus(msg, "error");
+        setBlameData([]);
         setIsBlameLoading(false);
-        setIsBlameVisible(false);
       });
     }
   }, [isBlameVisible, tab.path, blameData, isBlameLoading]);
 
-  // Render Blame decorations
+  // Render Blame block headers (author + summary) above contiguous commit regions.
   useEffect(function () {
     if (!monacoRef.current || !window.monaco || !isBlameVisible || !blameData) return;
+
     var editor = monacoRef.current;
-    
-    var newDecorations = blameData.map(function(lineData) {
-      var ln = lineData.line;
-      var hash = lineData.sha && lineData.sha.substring(0, 8) || '';
-      var author = lineData.author || '';
-      // Exclude uncommitted changes from noisy blame
-      var isUncommitted = hash === '00000000';
-      var text = isUncommitted ? 'Not Committed' : author + ' \xB7 ' + hash;
-      
-      return {
-        range: new window.monaco.Range(ln, 1, ln, 1),
-        options: {
-          isWholeLine: false,
-          after: {
-            content: '\xA0\xA0\xA0\xA0' + text,
-            inlineClassName: isUncommitted ? 'ide-blame-annotation-uncommitted' : 'ide-blame-annotation'
-          }
+    var model = editor.getModel();
+    var lineCount = model ? model.getLineCount() : 0;
+
+    try {
+      // Clear previous render before rebuilding.
+      clearBlameZones(editor);
+      blameDecorationsRef.current = editor.deltaDecorations(blameDecorationsRef.current, []);
+
+      var normalized = blameData.map(function(lineData) {
+        var ln = Number(lineData && lineData.line);
+        if (!model || !ln || ln < 1 || ln > lineCount) return null;
+
+        var sha = lineData && lineData.sha || '';
+        var author = lineData && lineData.author || 'Unknown';
+        var summary = lineData && lineData.summary || 'No commit message';
+        var isUncommitted = sha.substring(0, 8) === '00000000';
+
+        return {
+          line: ln,
+          sha: sha,
+          author: isUncommitted ? 'Not Committed' : author,
+          summary: summary,
+          isUncommitted: isUncommitted
+        };
+      }).filter(Boolean);
+
+      normalized.sort(function(a, b) { return a.line - b.line; });
+
+      var blocks = [];
+      normalized.forEach(function(item) {
+        var current = blocks.length > 0 ? blocks[blocks.length - 1] : null;
+        if (!current || current.sha !== item.sha || item.line !== current.endLine + 1) {
+          blocks.push({
+            sha: item.sha,
+            author: item.author,
+            summary: item.summary,
+            isUncommitted: item.isUncommitted,
+            startLine: item.line,
+            endLine: item.line
+          });
+          return;
         }
-      };
-    });
-    
-    blameDecorationsRef.current = editor.deltaDecorations(blameDecorationsRef.current, newDecorations);
+        current.endLine = item.line;
+      });
+
+      var zoneIds = [];
+      editor.changeViewZones(function(accessor) {
+        blocks.forEach(function(block, idx) {
+          var header = document.createElement('div');
+          header.className = block.isUncommitted
+            ? 'ide-blame-block-header ide-blame-block-header-uncommitted'
+            : 'ide-blame-block-header';
+          header.textContent = block.author + ' - ' + block.summary;
+
+          var zoneId = accessor.addZone({
+            afterLineNumber: block.startLine > 1 ? block.startLine - 1 : 0,
+            heightInLines: 1,
+            domNode: header,
+            suppressMouseDown: true
+          });
+          zoneIds.push(zoneId);
+        });
+      });
+      blameZoneIdsRef.current = zoneIds;
+    } catch (err) {
+      var message = err && err.message ? err.message : 'Unknown decoration error';
+      EditorStore.setStatus('Failed to render blame annotations: ' + message, 'error');
+      clearBlameZones(editor);
+      blameDecorationsRef.current = editor.deltaDecorations(blameDecorationsRef.current, []);
+    }
+
+  // Include tab.content so blame re-renders once async file contents finish loading.
   }, [blameData, isBlameVisible, tab.id, tab.content]);
 
   var sourceTab = tab.isPreview ? findTabByPath(tab.previewFor) : null;
@@ -337,20 +423,24 @@ var EditorPanel = function EditorPanel(_ref) {
     return React.createElement('div', { className: 'markdown-preview markdown-preview-full', dangerouslySetInnerHTML: { __html: markup } });
   }
 
+  // Always render the same wrapper structure so the editorRef div is never
+  // unmounted when gitAvailable changes (e.g. loaded async after workspace
+  // call returns). The toolbar is conditionally included inside the wrapper.
   return React.createElement(
     'div',
     { className: 'ide-editor-wrapper', style: { display: 'flex', flexDirection: 'column', height: '100%' } },
-    React.createElement(
+    gitAvailable && React.createElement(
       'div',
       { className: 'ide-editor-toolbar', style: { display: 'flex', justifyContent: 'flex-end', padding: '4px 8px', background: '#252526', borderBottom: '1px solid #3c3c3c' } },
       React.createElement(
         'button',
-        { 
-          className: 'ide-icon-btn ' + (isBlameVisible ? 'active' : ''), 
-          disabled: !gitAvailable,
-          onClick: gitAvailable ? function() { setIsBlameVisible(!isBlameVisible); } : undefined,
-          title: gitAvailable ? 'Toggle Git Blame' : 'Git not available in this workspace',
-          style: { fontSize: '12px', padding: '2px 6px', opacity: (gitAvailable && isBlameVisible) ? 1 : 0.6, background: isBlameVisible ? 'rgba(255,255,255,0.1)' : 'transparent', border: 'none', color: gitAvailable ? '#ccc' : '#666', cursor: gitAvailable ? 'pointer' : 'not-allowed', borderRadius: '3px' }
+        {
+          className: 'ide-icon-btn ' + (isBlameVisible ? 'active' : ''),
+          onClick: function() {
+            setIsBlameVisible(function(prev) { return !prev; });
+          },
+          title: 'Toggle Git Blame',
+          style: { fontSize: '12px', padding: '2px 6px', opacity: isBlameVisible ? 1 : 0.6, background: isBlameVisible ? 'rgba(255,255,255,0.1)' : 'transparent', border: 'none', color: '#ccc', cursor: 'pointer', borderRadius: '3px' }
         },
         React.createElement('i', { className: 'fas fa-shoe-prints', style: { marginRight: '6px' } }),
         isBlameLoading ? 'Loading...' : 'Blame'

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

@@ -109,23 +109,6 @@ var FileTree = function FileTree(_ref) {
     return { badge: key || '?', cssKey: key || 'Q', title: titleMap[key] || 'Status' };
   };
 
-  window.getFileIcon = function (name) {
-    var ext = name.split('.').pop().toLowerCase();
-    var lName = name.toLowerCase();
-    if (lName === 'gemfile' || ext === 'gemspec' || ext === 'lock') return 'fas fa-gem ruby-icon';
-    if (ext === 'rb' || ext === 'rake' || lName === 'rakefile') return 'far fa-gem ruby-icon';
-    if (ext === 'jsx' || name.endsWith('.js.jsx')) return 'fas fa-atom react-icon';
-    if (ext === 'js' || ext === 'mjs' || ext === 'cjs') return 'fa-brands fa-js js-icon';
-    if (ext === 'html') return 'fa-brands fa-html5 html-icon';
-    if (ext === 'erb') return 'fa-brands fa-html5 erb-icon';
-    if (ext === 'css' || ext === 'scss' || ext === 'sass') return 'fa-brands fa-css3-alt css-icon';
-    if (['png', 'jpg', 'jpeg', 'gif', 'svg', 'ico', 'webp', 'bmp', 'avif'].includes(ext)) return 'far fa-file-image image-icon';
-    if (ext === 'json') return 'fas fa-code json-icon';
-    if (ext === 'md' || ext === 'txt') return 'fas fa-file-alt md-icon';
-    if (ext === 'yml' || ext === 'yaml') return 'fas fa-cogs yml-icon';
-    return 'far fa-file-code';
-  };
-
   var handleInlineKeyDown = function handleInlineKeyDown(e) {
     var isRename = !!pendingRename;
     if (e.key === 'Enter') {
@@ -300,5 +283,21 @@ var FileTree = function FileTree(_ref) {
   );
 };
 
+// Wrap FileTree in React.memo with a custom comparator that only checks
+// the data props that affect what's rendered. Function prop references
+// (event handlers) are re-created on every parent render but do not
+// change the visual output, so we intentionally ignore them here.
+// This prevents O(n) tree traversal on every MbeditorApp re-render
+// caused by unrelated state changes (status messages, git polls, etc.).
+var FileTreeMemo = React.memo(FileTree, function(prev, next) {
+  return prev.items === next.items &&
+    prev.activePath === next.activePath &&
+    prev.selectedPath === next.selectedPath &&
+    prev.gitFiles === next.gitFiles &&
+    prev.expandedDirs === next.expandedDirs &&
+    prev.pendingCreate === next.pendingCreate &&
+    prev.pendingRename === next.pendingRename;
+});
+
 // Expose globally for sprockets require
-window.FileTree = FileTree;
+window.FileTree = FileTreeMemo;

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

@@ -16,6 +16,7 @@ var GitPanel = function GitPanel(_ref) {
   var _s4 = useState({});    var expandedCommits = _s4[0]; var setExpandedCommits = _s4[1];
   // { [hash]: { loading, files: [{status,path}], error } }
   var _s5 = useState({});    var commitFiles = _s5[0]; var setCommitFiles = _s5[1];
+  var _s6 = useState(false); var refreshing = _s6[0]; var setRefreshing = _s6[1];
 
   var workingTree     = gitInfo && gitInfo.workingTree     || [];
   var unpushedFiles   = gitInfo && gitInfo.unpushedFiles   || [];
@@ -46,36 +47,7 @@ var GitPanel = function GitPanel(_ref) {
   };
 
   var fileIcon = function fileIcon(filename) {
-    var ext = (filename || '').split('.').pop().toLowerCase();
-    var iconMap = {
-      'rb':      { cls: 'fas fa-gem',      color: '#cc342d' },
-      'gemspec': { cls: 'fas fa-gem',      color: '#cc342d' },
-      'js':      { cls: 'fab fa-js',       color: '#f0db4f' },
-      'ts':      { cls: 'fas fa-code',     color: '#3178c6' },
-      'jsx':     { cls: 'fab fa-js',       color: '#61dafb' },
-      'tsx':     { cls: 'fas fa-code',     color: '#61dafb' },
-      'html':    { cls: 'fab fa-html5',    color: '#e34f26' },
-      'htm':     { cls: 'fab fa-html5',    color: '#e34f26' },
-      'erb':     { cls: 'fab fa-html5',    color: '#cc342d' },
-      'css':     { cls: 'fab fa-css3-alt', color: '#1572b6' },
-      'scss':    { cls: 'fab fa-sass',     color: '#cc6699' },
-      'sass':    { cls: 'fab fa-sass',     color: '#cc6699' },
-      'md':      { cls: 'fab fa-markdown', color: '#7f8b97' },
-      'json':    { cls: 'fas fa-code',     color: '#ffe082' },
-      'yml':     { cls: 'fas fa-cog',      color: '#888' },
-      'yaml':    { cls: 'fas fa-cog',      color: '#888' },
-      'png':     { cls: 'fas fa-image',    color: '#aaa' },
-      'jpg':     { cls: 'fas fa-image',    color: '#aaa' },
-      'jpeg':    { cls: 'fas fa-image',    color: '#aaa' },
-      'gif':     { cls: 'fas fa-image',    color: '#aaa' },
-      'svg':     { cls: 'fas fa-image',    color: '#aaa' },
-      'txt':     { cls: 'fas fa-file-alt', color: '#888' },
-      'sh':      { cls: 'fas fa-terminal', color: '#89d185' },
-      'lock':    { cls: 'fas fa-lock',     color: '#888' },
-      'pdf':     { cls: 'fas fa-file-pdf', color: '#f48771' },
-    };
-    var icon = iconMap[ext] || { cls: 'fas fa-file-code', color: '#7f8b97' };
-    return React.createElement('i', { className: icon.cls + ' git-file-type-icon', style: { color: icon.color } });
+    return React.createElement('i', { className: (window.getFileIcon ? window.getFileIcon(filename) : 'far fa-file-code') + ' git-file-type-icon' });
   };
 
   // Renders a file row used in Local Changes and Changes in Branch sections
@@ -148,6 +120,23 @@ var GitPanel = function GitPanel(_ref) {
     }
   };
 
+  var handleRefresh = function handleRefresh() {
+    if (!onRefresh || refreshing) return;
+
+    var result;
+    try {
+      setRefreshing(true);
+      result = onRefresh();
+    } catch (err) {
+      setRefreshing(false);
+      throw err;
+    }
+
+    return Promise.resolve(result).finally(function () {
+      setRefreshing(false);
+    });
+  };
+
   var renderCommit = function renderCommit(commit, idx) {
     var isFirst = idx === 0;
     var isLast = idx === branchCommits.length - 1;
@@ -305,8 +294,8 @@ var GitPanel = function GitPanel(_ref) {
         { className: 'ide-git-panel-actions' },
         onRefresh && React.createElement(
           'button',
-          { className: 'git-header-btn', onClick: onRefresh, title: 'Refresh' },
-          React.createElement('i', { className: 'fas fa-sync-alt' })
+          { className: 'git-header-btn', onClick: handleRefresh, title: 'Refresh', disabled: refreshing, 'aria-busy': refreshing },
+          React.createElement('i', { className: 'fas fa-sync-alt' + (refreshing ? ' fa-spin' : '') })
         ),
         onClose && React.createElement(
           'button',

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

@@ -121,6 +121,13 @@ var MbeditorApp = function MbeditorApp() {
   var searchQuery = _useState72[0];
   var setSearchQuery = _useState72[1];
 
+  var _useState33 = useState(false);
+  var _useState332 = _slicedToArray(_useState33, 2);
+  var searchLoading = _useState332[0];
+  var setSearchLoading = _useState332[1];
+
+  var searchRequestIdRef = useRef(0);
+
   var _useState8 = useState("explorer");
 
   var _useState82 = _slicedToArray(_useState8, 2);
@@ -197,11 +204,15 @@ var MbeditorApp = function MbeditorApp() {
   var _useState182 = _slicedToArray(_useState18, 2);
   var showGitPanel = _useState182[0];
   var setShowGitPanel = _useState182[1];
+  var showGitPanelRef = useRef(showGitPanel);
+  showGitPanelRef.current = showGitPanel;
 
   var _useState18g = useState(320);
   var _useState18g2 = _slicedToArray(_useState18g, 2);
   var gitPanelWidth = _useState18g2[0];
   var setGitPanelWidth = _useState18g2[1];
+  var gitPanelWidthRef = useRef(gitPanelWidth);
+  gitPanelWidthRef.current = gitPanelWidth;
 
   var _useState18h = useState(false);
 
@@ -567,7 +578,7 @@ var MbeditorApp = function MbeditorApp() {
           if (!body) return;
 
           var rect = body.getBoundingClientRect();
-          var reservedRight = EDITOR_MIN_WIDTH + (showGitPanel ? gitPanelWidth : 0);
+          var reservedRight = EDITOR_MIN_WIDTH + (showGitPanelRef.current ? gitPanelWidthRef.current : 0);
           var maxSidebarWidth = Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_MIN_WIDTH, rect.width - reservedRight));
           var nextWidth = clientX - rect.left;
           setSidebarWidth(clamp(nextWidth, SIDEBAR_MIN_WIDTH, maxSidebarWidth));
@@ -614,23 +625,41 @@ var MbeditorApp = function MbeditorApp() {
     };
   }, []);
 
-  // Heartbeat — poll /ping every 5s and reflect connectivity in the status bar
+  // Heartbeat — adaptive poll: 30s when connected, 5s when trying to reconnect.
+  // Skipped entirely while the tab is hidden (Page Visibility API).
   useEffect(function () {
     var wasOnline = true;
-    var interval = setInterval(function () {
+    var timeoutId = null;
+
+    function schedule() {
+      var delay = wasOnline ? 30000 : 5000;
+      timeoutId = setTimeout(tick, delay);
+    }
+
+    function tick() {
+      if (document.hidden) {
+        // Tab is backgrounded — skip this cycle and reschedule at the normal
+        // online interval so we resume quickly once the tab becomes visible again.
+        schedule();
+        return;
+      }
       FileService.ping().then(function () {
         if (!wasOnline) {
           wasOnline = true;
           setServerOnline(true);
         }
+        schedule();
       }).catch(function () {
         if (wasOnline) {
           wasOnline = false;
           setServerOnline(false);
         }
+        schedule();
       });
-    }, 5000);
-    return function () { clearInterval(interval); };
+    }
+
+    schedule();
+    return function () { clearTimeout(timeoutId); };
   }, []);
 
   var handleSelectFile = function handleSelectFile(path, name, line) {
@@ -1045,12 +1074,22 @@ var MbeditorApp = function MbeditorApp() {
 
   var _debouncedSearch = useRef(window._.debounce(function (q) {
     if (!q.trim()) {
+      searchRequestIdRef.current += 1;
+      setSearchLoading(false);
       EditorStore.setState({ searchResults: [] });
       return;
     }
+    var requestId = ++searchRequestIdRef.current;
+    setSearchLoading(true);
     EditorStore.setStatus("Searching project...", "info");
     SearchService.projectSearch(q).then(function (res) {
-      EditorStore.setStatus("Found " + res.length + " results", "success");
+      if (searchRequestIdRef.current === requestId) {
+        EditorStore.setStatus("Found " + res.length + " results", "success");
+      }
+    }).finally(function () {
+      if (searchRequestIdRef.current === requestId) {
+        setSearchLoading(false);
+      }
     });
   }, 400)).current;
 
@@ -1060,6 +1099,14 @@ var MbeditorApp = function MbeditorApp() {
     _debouncedSearch(val);
   };
 
+  var clearSearch = function clearSearch() {
+    searchRequestIdRef.current += 1;
+    if (_debouncedSearch.cancel) _debouncedSearch.cancel();
+    setSearchQuery("");
+    setSearchLoading(false);
+    EditorStore.setState({ searchResults: [] });
+  };
+
   var execSearch = function execSearch(e) {
     e.preventDefault();
     _debouncedSearch(searchQuery);
@@ -1743,16 +1790,31 @@ var MbeditorApp = function MbeditorApp() {
           React.createElement(
             "div",
             { className: "search-input-wrap" },
-            React.createElement("input", {
-              className: "search-input",
-              placeholder: "Find in files...",
-              value: searchQuery,
-              onChange: handleSearchChange
-            }),
+            React.createElement(
+              "div",
+              { className: "search-input-shell" },
+              React.createElement("input", {
+                className: "search-input",
+                placeholder: "Find in files...",
+                value: searchQuery,
+                onChange: handleSearchChange
+              }),
+              searchQuery && React.createElement(
+                "button",
+                {
+                  type: "button",
+                  className: "search-clear-btn",
+                  onClick: clearSearch,
+                  title: "Clear search",
+                  "aria-label": "Clear search"
+                },
+                React.createElement("i", { className: "fas fa-times" })
+              )
+            ),
             React.createElement(
               "button",
-              { type: "submit", className: "search-btn" },
-              React.createElement("i", { className: "fas fa-search" })
+              { type: "submit", className: "search-btn", disabled: searchLoading, title: searchLoading ? "Searching..." : "Search" },
+              React.createElement("i", { className: searchLoading ? "fas fa-spinner fa-spin" : "fas fa-search" })
             )
           ),
           React.createElement(
@@ -1775,28 +1837,35 @@ var MbeditorApp = function MbeditorApp() {
               "No results"
             ),
             state.searchResults.map(function (res, i) {
+              var fileName = res.file.split('/').pop();
               return React.createElement(
                 "div",
                 { key: i, className: "search-result-item", onClick: function () {
                     return 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(
                   "div",
-                  { className: "search-result-file" },
-                  res.file,
-                  " ",
+                  { className: "search-result-body" },
+                  React.createElement(
+                    "div",
+                    { className: "search-result-file" },
+                    fileName,
+                    React.createElement(
+                      "span",
+                      { className: "search-result-line-num" },
+                      " ",
+                      res.file,
+                      ":",
+                      res.line
+                    )
+                  ),
                   React.createElement(
-                    "span",
-                    { className: "search-result-line-num" },
-                    ":",
-                    res.line
+                    "div",
+                    { className: "search-result-text" },
+                    res.text
                   )
                 ),
-                React.createElement(
-                  "div",
-                  { className: "search-result-text" },
-                  res.text
-                )
               );
             })
           )
@@ -2103,6 +2172,11 @@ var MbeditorApp = function MbeditorApp() {
         "div",
         { className: "statusbar-msg " + state.statusMessage.kind },
         state.statusMessage.text
+      ),
+      React.createElement(
+        "div",
+        { className: "statusbar-version" },
+        "v" + (document.body.dataset.mbeditorVersion || "")
       )
     ),