mbeditor 0.3.9 → 0.4.3

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

@@ -60,7 +60,9 @@ var DEFAULT_EDITOR_PREFS = {
   prettierBracketSpacing: true,
   vimMode: false,
   fileTreeTypeahead: true,
-  quickOpenShowFolders: false
+  quickOpenShowFolders: false,
+  tabDisplayMode: 'scroll',
+  persistFindState: true
 };
 
 var SidebarActionButton = function SidebarActionButton(_ref) {
@@ -195,7 +197,25 @@ var MbeditorApp = function MbeditorApp() {
   var searchOffsetRef       = useRef(0);
   var searchLoadingMoreRef  = useRef(false);
 
+  var _useStateRx = useState(false);
+  var _useStateRx2 = _slicedToArray(_useStateRx, 2);
+  var searchUseRegex = _useStateRx2[0];
+  var setSearchUseRegex = _useStateRx2[1];
+
+  var _useStateMC = useState(false);
+  var _useStateMC2 = _slicedToArray(_useStateMC, 2);
+  var searchMatchCase = _useStateMC2[0];
+  var setSearchMatchCase = _useStateMC2[1];
+
+  var _useStateWW = useState(false);
+  var _useStateWW2 = _slicedToArray(_useStateWW, 2);
+  var searchWholeWord = _useStateWW2[0];
+  var setSearchWholeWord = _useStateWW2[1];
+
   var searchQueryRef = useRef('');
+  var searchUseRegexRef = useRef(false);
+  var searchMatchCaseRef = useRef(false);
+  var searchWholeWordRef = useRef(false);
   var searchResultsContainerRef = useRef(null);
 
   var _useState8 = useState("explorer");
@@ -417,6 +437,36 @@ var MbeditorApp = function MbeditorApp() {
   var prevGitBranchRef = useRef(null);
   var isSwitchingBranchRef = useRef(false);
 
+  // ── Draft backup helpers ─────────────────────────────────────────────────
+  var draftWriteTimerRef = useRef({});
+  var serverOnlineRef = useRef(true);
+
+  var _draftKey = function _draftKey(path) {
+    var base = typeof window.mbeditorBasePath === 'function' ? window.mbeditorBasePath() : '';
+    return 'mbeditor_draft\x00' + base + '\x00' + path;
+  };
+  var _saveDraftNow = function _saveDraftNow(path, content) {
+    try { localStorage.setItem(_draftKey(path), JSON.stringify({ content: content, ts: Date.now() })); } catch (e) {}
+  };
+  var _clearDraft = function _clearDraft(path) {
+    try { localStorage.removeItem(_draftKey(path)); } catch (e) {}
+  };
+  var _loadDraft = function _loadDraft(path) {
+    try { return JSON.parse(localStorage.getItem(_draftKey(path))); } catch (e) { return null; }
+  };
+  var _scheduleDraftWrite = function _scheduleDraftWrite(path, content) {
+    if (draftWriteTimerRef.current[path]) clearTimeout(draftWriteTimerRef.current[path]);
+    draftWriteTimerRef.current[path] = setTimeout(function () {
+      delete draftWriteTimerRef.current[path];
+      _saveDraftNow(path, content);
+    }, 500);
+  };
+
+  var _useState_dro = useState(null);
+  var _useState_dro2 = _slicedToArray(_useState_dro, 2);
+  var draftRestoreOffer = _useState_dro2[0];
+  var setDraftRestoreOffer = _useState_dro2[1];
+
   var clamp = function clamp(value, min, max) {
     return Math.min(max, Math.max(min, value));
   };
@@ -634,6 +684,9 @@ var MbeditorApp = function MbeditorApp() {
       if (workspace && typeof workspace.testAvailable === 'boolean') {
         setTestAvailable(workspace.testAvailable);
       }
+      if (workspace && typeof workspace.actionCableEnabled === 'boolean') {
+        WebSocketService.connect(workspace.actionCableEnabled);
+      }
     });
 
     // Helper: load tab content for a set of panes and restore them into EditorStore
@@ -937,11 +990,55 @@ var MbeditorApp = function MbeditorApp() {
     return function () { clearTimeout(timeoutId); };
   }, []);
 
+  // On reconnect: scan open dirty tabs for newer localStorage drafts and offer restore.
+  useEffect(function () {
+    if (!serverOnline) {
+      serverOnlineRef.current = false;
+      return;
+    }
+    if (serverOnlineRef.current) return; // was already online — no transition
+    serverOnlineRef.current = true;
+    var st = EditorStore.getState();
+    var offers = [];
+    st.panes.forEach(function (pane) {
+      pane.tabs.forEach(function (tab) {
+        if (!tab.dirty || !tab.path || tab.path.startsWith('mbeditor://')) return;
+        var draft = _loadDraft(tab.path);
+        if (draft && draft.content !== tab.content) {
+          offers.push({ paneId: pane.id, tabId: tab.id, path: tab.path, name: tab.name, draftContent: draft.content });
+        }
+      });
+    });
+    if (offers.length > 0) setDraftRestoreOffer(offers);
+  }, [serverOnline]);
+
+  // WebSocket push — when the server broadcasts files_changed, refresh the tree
+  // and git status immediately (same work as the 10s poll below does).
+  useEffect(function () {
+    function handleFilesChanged() {
+      if (document.hidden) return;
+      GitService.fetchStatus()["catch"](function () {});
+      FileService.getTree().then(function (data) {
+        var newData = data || [];
+        setTreeData(function (prevData) {
+          if (JSON.stringify(newData) === JSON.stringify(prevData)) return prevData;
+          SearchService.buildIndex(newData);
+          return newData;
+        });
+      })["catch"](function () {});
+    }
+    WebSocketService.onFilesChanged(handleFilesChanged);
+    return function () { WebSocketService.offFilesChanged(handleFilesChanged); };
+  }, []);
+
   // 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.
   // 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
       // Refresh tree and check for git branch changes (to trigger per-branch tab state swap)
       GitService.fetchStatus()["catch"](function () {});
       FileService.getTree().then(function (data) {
@@ -1145,6 +1242,12 @@ var MbeditorApp = function MbeditorApp() {
   var activeFileCommit = _useState32[0];
   var setActiveFileCommit = _useState32[1];
 
+  // EOL indicator — tracks current line-ending style of the active file
+  var _useState31e = useState(null);
+  var _useState31e2 = _slicedToArray(_useState31e, 2);
+  var activeEOL = _useState31e2[0];
+  var setActiveEOL = _useState31e2[1];
+
   useEffect(function () {
     if (!gitAvailable || !activeTab || activeTab.isDiff || activeTab.isCombinedDiff || activeTab.isCommitGraph || !activeTab.path || activeTab.path.indexOf('diff://') === 0 || activeTab.path.indexOf('combined-diff://') === 0) {
       setActiveFileCommit(null);
@@ -1163,6 +1266,22 @@ var MbeditorApp = function MbeditorApp() {
     });
   }, [activeTab ? activeTab.id : null, gitAvailable]);
 
+  // Update EOL indicator whenever active tab or its content changes
+  useEffect(function () {
+    if (!activeTab || typeof activeTab.content !== 'string' ||
+        activeTab.isDiff || activeTab.isCombinedDiff || activeTab.isCommitGraph || activeTab.isPreview) {
+      setActiveEOL(null);
+      return;
+    }
+    if (activeTab.content.indexOf('\r\n') !== -1) {
+      setActiveEOL('CRLF');
+    } else if (activeTab.content.indexOf('\r') !== -1) {
+      setActiveEOL('CR');
+    } else {
+      setActiveEOL('LF');
+    }
+  }, [activeTab ? activeTab.id : null, activeTab ? activeTab.content : null]);
+
   useEffect(function () {
     if (!activeTab || typeof activeTab.content !== 'string') return;
     if (activeTab.isDiff || activeTab.isCombinedDiff || activeTab.isCommitGraph) return;
@@ -1248,6 +1367,7 @@ var MbeditorApp = function MbeditorApp() {
       });
       EditorStore.setState({ panes: newPanes });
       EditorStore.setStatus("Saved", "success");
+      _clearDraft(tab.path);
       
       // Hot reload for Markdown: sync preview tab after save
       if (/\.(md|markdown)$/i.test(tab.path)) {
@@ -1302,16 +1422,21 @@ var MbeditorApp = function MbeditorApp() {
     var pane2 = EditorStore.getState().panes.find(function (p) {
       return p.id === 2;
     });
-    if (!pane2 || pane2.tabs.length === 0) {
-      dragSplitWidthRef.current = 50;
-      setPane1Width(50);
-    } else {
-      dragSplitWidthRef.current = pane1Width;
-    }
+    var alreadySplit = pane2 && pane2.tabs.length > 0;
+    // Only set the split ref; do NOT pre-split the view width here.
+    // Pane 2 appears as a drop zone only when the cursor actually hovers
+    // over the right-half editor content, keeping the tab bar intact.
+    dragSplitWidthRef.current = alreadySplit ? pane1Width : 50;
     setDraggedTab({ sourcePaneId: sourcePaneId, tabId: tabId });
   };
 
   var clearDragState = function clearDragState() {
+    // If pane 2 is still empty after the drag, restore pane 1 to full width.
+    var pane2 = EditorStore.getState().panes.find(function (p) { return p.id === 2; });
+    if (!pane2 || pane2.tabs.length === 0) {
+      setPane1Width(100);
+      dragSplitWidthRef.current = 50;
+    }
     setDraggedTab(null);
     setDragOverPaneId(null);
   };
@@ -1322,6 +1447,21 @@ var MbeditorApp = function MbeditorApp() {
     clearDragState();
   };
 
+  var handleChangeEOL = function handleChangeEOL(newEOL) {
+    var ed = window.__mbeditorActiveEditor;
+    if (!ed || !window.monaco) return;
+    var model = ed.getModel();
+    if (!model || !activeTab || !focusedPane) return;
+    var seq = newEOL === 'CRLF'
+      ? window.monaco.editor.EndOfLineSequence.CRLF
+      : window.monaco.editor.EndOfLineSequence.LF;
+    model.setEOL(seq);
+    var newContent = model.getValue();
+    TabManager.markDirty(focusedPane.id, activeTab.path, newContent);
+    setActiveEOL(newEOL);
+    EditorStore.setStatus('Line endings changed to ' + newEOL, 'info');
+  };
+
   var handleFormat = function handleFormat() {
     if (!activeTab) return;
 
@@ -1519,7 +1659,7 @@ var MbeditorApp = function MbeditorApp() {
     searchQueryRef.current = q;
     EditorStore.setState({ searchResults: [], searchHasMore: false });
     EditorStore.setStatus("Searching project...", "info");
-    SearchService.projectSearch(q, 0, SearchService.PAGE_SIZE).then(function (res) {
+    SearchService.projectSearch(q, 0, SearchService.PAGE_SIZE, { regex: searchUseRegexRef.current, matchCase: searchMatchCaseRef.current, wholeWord: searchWholeWordRef.current }).then(function (res) {
       if (searchRequestIdRef.current !== requestId) return;
       var hasMore = !!(res && res.hasMore);
       setSearchHasMore(hasMore); searchHasMoreRef.current = hasMore;
@@ -1537,7 +1677,7 @@ var MbeditorApp = function MbeditorApp() {
     if (!q || searchLoadingMoreRef.current || !searchHasMoreRef.current) return;
     searchLoadingMoreRef.current = true;
     var offset = searchOffsetRef.current;
-    SearchService.projectSearch(q, offset, SearchService.PAGE_SIZE).then(function(res) {
+    SearchService.projectSearch(q, offset, SearchService.PAGE_SIZE, { regex: searchUseRegexRef.current, matchCase: searchMatchCaseRef.current, wholeWord: searchWholeWordRef.current }).then(function(res) {
       if (searchQueryRef.current !== q) { searchLoadingMoreRef.current = false; return; }
       var hasMore = !!(res && res.hasMore);
       searchHasMoreRef.current = hasMore;
@@ -1556,6 +1696,33 @@ var MbeditorApp = function MbeditorApp() {
     _debouncedSearch(val);
   };
 
+  var handleSearchRegexToggle = function handleSearchRegexToggle() {
+    var next = !searchUseRegexRef.current;
+    searchUseRegexRef.current = next;
+    setSearchUseRegex(next);
+    if (searchQueryRef.current) {
+      _debouncedSearch(searchQueryRef.current);
+    }
+  };
+
+  var handleSearchMatchCaseToggle = function handleSearchMatchCaseToggle() {
+    var next = !searchMatchCaseRef.current;
+    searchMatchCaseRef.current = next;
+    setSearchMatchCase(next);
+    if (searchQueryRef.current) {
+      _debouncedSearch(searchQueryRef.current);
+    }
+  };
+
+  var handleSearchWholeWordToggle = function handleSearchWholeWordToggle() {
+    var next = !searchWholeWordRef.current;
+    searchWholeWordRef.current = next;
+    setSearchWholeWord(next);
+    if (searchQueryRef.current) {
+      _debouncedSearch(searchQueryRef.current);
+    }
+  };
+
   var clearSearch = function clearSearch() {
     searchRequestIdRef.current += 1;
     if (_debouncedSearch.cancel) _debouncedSearch.cancel();
@@ -2062,6 +2229,7 @@ var MbeditorApp = function MbeditorApp() {
       tabs: tabs,
       activeId: activeId,
       paneId: paneId,
+      tabDisplayMode: editorPrefs.tabDisplayMode || 'scroll',
       onSelect: function (id) {
         // Sync explorer selection with the newly active tab so there's only one highlight
         var tab = tabs.find(function(t) { return t.id === id; });
@@ -2504,32 +2672,57 @@ var MbeditorApp = function MbeditorApp() {
           { className: "search-panel" },
           React.createElement(
             "div",
-            { className: "search-input-wrap" },
+            { className: "search-input-shell" },
+            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
-              }),
+              { className: "search-input-adornments" },
+              React.createElement(
+                "button",
+                {
+                  type: "button",
+                  className: "search-adornment-btn" + (searchMatchCase ? " active" : ""),
+                  onClick: handleSearchMatchCaseToggle,
+                  title: "Match Case"
+                },
+                React.createElement("i", { className: "codicon codicon-case-sensitive" })
+              ),
+              React.createElement(
+                "button",
+                {
+                  type: "button",
+                  className: "search-adornment-btn" + (searchWholeWord ? " active" : ""),
+                  onClick: handleSearchWholeWordToggle,
+                  title: "Match Whole Word"
+                },
+                React.createElement("i", { className: "codicon codicon-whole-word" })
+              ),
+              React.createElement(
+                "button",
+                {
+                  type: "button",
+                  className: "search-adornment-btn" + (searchUseRegex ? " active" : ""),
+                  onClick: handleSearchRegexToggle,
+                  title: "Use Regular Expression"
+                },
+                React.createElement("i", { className: "codicon codicon-regex" })
+              ),
               searchQuery && React.createElement(
                 "button",
                 {
                   type: "button",
-                  className: "search-clear-btn",
+                  className: "search-adornment-btn search-adornment-clear",
                   onClick: clearSearch,
                   title: "Clear search",
                   "aria-label": "Clear search"
                 },
                 React.createElement("i", { className: "fas fa-times" })
               )
-            ),
-            React.createElement(
-              "button",
-              { type: "submit", className: "search-btn", disabled: searchLoading, title: searchLoading ? "Searching..." : "Search" },
-              React.createElement("i", { className: searchLoading ? "fas fa-spinner fa-spin" : "fas fa-search" })
             )
           ),
           (function() {
@@ -2548,38 +2741,47 @@ var MbeditorApp = function MbeditorApp() {
                   ? (total + (searchHasMore ? '+' : '') + " result" + (total !== 1 ? "s" : ""))
                   : "No results"
               ),
-              hasAny && React.createElement(
+              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",
-                    {
-                      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-body" },
+                { className: "search-results-area" },
+                hasAny && React.createElement(
+                  "div",
+                  {
+                    className: "search-results" + (searchLoading ? " search-results-blurred" : ""),
+                    ref: searchResultsContainerRef,
+                    onScroll: handleSearchResultsScroll
+                  },
+                  allResults.map(function(res, i) {
+                    var fileName = res.file.split('/').pop();
+                    return React.createElement(
+                      "div",
+                      {
+                        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,
-                        React.createElement("span", { className: "search-result-line-num" }, " ", res.file, ":", res.line)
-                      ),
-                      React.createElement("div", { className: "search-result-text" }, res.text)
-                    )
-                  );
-                }),
-                searchHasMore && React.createElement(
-                  "div", { className: "search-loading-more" },
-                  React.createElement("i", { className: "fas fa-spinner fa-spin" }),
-                  " Loading more\u2026"
+                        "div", { 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("div", { className: "search-result-text" }, res.text)
+                      )
+                    );
+                  }),
+                  searchHasMore && React.createElement(
+                    "div", { className: "search-loading-more" },
+                    React.createElement("i", { className: "fas fa-spinner fa-spin" }),
+                    " Loading more\u2026"
+                  )
+                ),
+                searchLoading && React.createElement(
+                  "div",
+                  { className: "search-loading-overlay" },
+                  React.createElement("div", { className: "search-loading-spinner" })
                 )
               )
             );
@@ -2604,16 +2806,40 @@ var MbeditorApp = function MbeditorApp() {
             if (!draggedTab) return;
             e.preventDefault();
 
+            // If the cursor is over the tab bar, suppress the cross-pane split overlay
+            // so same-pane tab reordering within any tab bar is unaffected.
+            if (e.target && e.target.closest && e.target.closest('.tab-bar')) {
+              if (dragOverPaneId !== null) setDragOverPaneId(null);
+              e.dataTransfer.dropEffect = 'move';
+              return;
+            }
+
             var rect = e.currentTarget.getBoundingClientRect();
             var splitAtX = rect.left + rect.width * (dragSplitWidthRef.current / 100);
             var hoverPaneId = e.clientX >= splitAtX ? 2 : 1;
             var nextDropPane = hoverPaneId === draggedTab.sourcePaneId ? null : hoverPaneId;
 
-            e.dataTransfer.dropEffect = nextDropPane ? 'move' : 'none';
+            // When cursor first enters the right-half content area and pane 2 is empty,
+            // apply the 50% split width so the drop zone becomes visible.
+            if (nextDropPane === 2) {
+              var pane2Empty = EditorStore.getState().panes.find(function(p) { return p.id === 2; });
+              if (!pane2Empty || pane2Empty.tabs.length === 0) {
+                setPane1Width(50);
+              }
+            }
+
+            e.dataTransfer.dropEffect = 'move';
             if (dragOverPaneId !== nextDropPane) setDragOverPaneId(nextDropPane);
           },
           onDropCapture: function (e) {
             if (!draggedTab) return;
+
+            // If dropping onto a tab bar element, let the tab item's own onDrop
+            // bubble-phase handler manage the reorder — don't intercept here.
+            if (e.target && e.target.closest && e.target.closest('.tab-bar')) {
+              return;
+            }
+
             e.preventDefault();
 
             var rect = e.currentTarget.getBoundingClientRect();
@@ -2628,10 +2854,12 @@ var MbeditorApp = function MbeditorApp() {
           }
         },
         state.panes.map(function (pane, idx) {
-          if (pane.id === 2 && pane.tabs.length === 0 && !draggedTab) return null; // Show pane 2 while dragging to allow drop-to-split
+          // Show empty pane 2 as a drop zone only when the cursor is actively hovering
+          // over its half of the editor content (dragOverPaneId === 2).
+          if (pane.id === 2 && pane.tabs.length === 0 && dragOverPaneId !== 2) return null;
 
           // Dynamic width distribution
-          var isSplit = state.panes[1].tabs.length > 0 || !!draggedTab;
+          var isSplit = state.panes[1].tabs.length > 0 || dragOverPaneId === 2;
           var flexBasis = '100%';
           if (isSplit) flexBasis = pane.id === 1 ? pane1Width + "%" : 100 - pane1Width + "%";
 
@@ -3109,6 +3337,18 @@ var MbeditorApp = function MbeditorApp() {
                         onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { fileTreeTypeahead: v }); }); }
                       })
                     ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Tab bar layout'),
+                      React.createElement(
+                        'select', {
+                          value: editorPrefs.tabDisplayMode || 'scroll',
+                          onChange: function(e) { var v = e.target.value; setEditorPrefs(function(p) { return Object.assign({}, p, { tabDisplayMode: v }); }); }
+                        },
+                        React.createElement('option', { value: 'scroll' }, 'Scroll'),
+                        React.createElement('option', { value: 'wrap' }, 'Wrap (multi-row)')
+                      )
+                    ),
                     React.createElement(
                       'label', { className: 'ide-settings-row ide-settings-row-check' },
                       React.createElement('span', { className: 'ide-settings-label' }, 'Quick Open: show folders'),
@@ -3130,6 +3370,17 @@ var MbeditorApp = function MbeditorApp() {
                       })
                     ),
 
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Persist find state across files'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: editorPrefs.persistFindState !== false,
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { persistFindState: v }); }); }
+                      })
+                    ),
+
                     /* ── RuboCop ─────────────────────────────────── */
                     React.createElement('div', { className: 'ide-settings-section-header' }, 'RuboCop'),
                     React.createElement(
@@ -3206,8 +3457,10 @@ var MbeditorApp = function MbeditorApp() {
                     var valNorm = val.replace(/\r\n/g, '\n');
                     if (valNorm === cleanNorm) {
                       TabManager.markClean(pane.id, pActiveTab.id, val);
+                      _clearDraft(pActiveTab.path);
                     } else {
                       TabManager.markDirty(pane.id, pActiveTab.id, val);
+                      _scheduleDraftWrite(pActiveTab.path, val);
                     }
                   }
                 });
@@ -3409,12 +3662,22 @@ var MbeditorApp = function MbeditorApp() {
           state.gitInfo.behind
         )
       ),
-      !serverOnline && React.createElement(
-        "div",
-        { className: "statusbar-offline" },
-        React.createElement("i", { className: "fas fa-exclamation-triangle" }),
-        " Server offline"
-      ),
+      !serverOnline && (function () {
+        var dirtyCount = state.panes.reduce(function (acc, p) {
+          return acc + p.tabs.filter(function (t) { return t.dirty; }).length;
+        }, 0);
+        return React.createElement(
+          "div",
+          {
+            className: "statusbar-offline",
+            title: dirtyCount > 0 ? dirtyCount + " unsaved file" + (dirtyCount !== 1 ? "s" : "") + " — changes are backed up locally" : "Server offline"
+          },
+          React.createElement("i", { className: "fas fa-exclamation-triangle" }),
+          dirtyCount > 0
+            ? " Offline \u2014 " + dirtyCount + " unsaved"
+            : " Server offline"
+        );
+      })(),
       activeFileCommit && React.createElement(
         "div",
         { className: "statusbar-file-commit", title: activeFileCommit.title + " — " + activeFileCommit.author },
@@ -3428,6 +3691,16 @@ var MbeditorApp = function MbeditorApp() {
         { className: "statusbar-msg " + state.statusMessage.kind },
         state.statusMessage.text
       ),
+      activeEOL && React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "statusbar-btn statusbar-eol-btn",
+          title: "Line endings: " + activeEOL + " — click to change",
+          onClick: function() { handleChangeEOL(activeEOL === 'CRLF' ? 'LF' : 'CRLF'); }
+        },
+        activeEOL
+      ),
       React.createElement(
         "div",
         { className: "statusbar-version" },
@@ -3549,6 +3822,63 @@ var MbeditorApp = function MbeditorApp() {
       onSelectFolder: handleOpenFolderInExplorer,
       onClose: function () { return setQuickOpen(false); }
     }),
+    draftRestoreOffer && React.createElement(
+      "div",
+      {
+        className: "ide-draft-restore-overlay",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Restore unsaved drafts"
+      },
+      React.createElement(
+        "div",
+        { className: "ide-draft-restore-dialog" },
+        React.createElement("div", { className: "ide-draft-restore-title" },
+          React.createElement("i", { className: "fas fa-save", style: { marginRight: 8 } }),
+          "Unsaved drafts found"
+        ),
+        React.createElement("div", { className: "ide-draft-restore-body" },
+          draftRestoreOffer.length + " file" + (draftRestoreOffer.length !== 1 ? "s have" : " has") + " locally backed-up drafts from when the server was offline:"
+        ),
+        React.createElement(
+          "ul",
+          { className: "ide-draft-restore-list" },
+          draftRestoreOffer.map(function (o) {
+            return React.createElement("li", { key: o.path }, o.name || o.path);
+          })
+        ),
+        React.createElement(
+          "div",
+          { className: "ide-draft-restore-actions" },
+          React.createElement(
+            "button",
+            {
+              type: "button",
+              className: "ide-draft-restore-btn ide-draft-restore-btn-primary",
+              onClick: function () {
+                draftRestoreOffer.forEach(function (offer) {
+                  TabManager.markDirty(offer.paneId, offer.tabId, offer.draftContent);
+                });
+                setDraftRestoreOffer(null);
+              }
+            },
+            "Restore all"
+          ),
+          React.createElement(
+            "button",
+            {
+              type: "button",
+              className: "ide-draft-restore-btn",
+              onClick: function () {
+                draftRestoreOffer.forEach(function (offer) { _clearDraft(offer.path); });
+                setDraftRestoreOffer(null);
+              }
+            },
+            "Discard drafts"
+          )
+        )
+      )
+    ),
     contextMenu && React.createElement(
       React.Fragment,
       null,