mbeditor 0.3.9 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3e496861ff75f2bb3c09388afbc609c07230ad8a914de28040b867ccb922a04d
-  data.tar.gz: f5825193b830cca72f626a86a15483eb46ccb4cd335388a6ccaed088841ff313
+  metadata.gz: 1a73400b5400313c994fbd40ebae5000cc776f07eebeb9790380a622a193ba73
+  data.tar.gz: bdd3a1d8825e5ff23eef4fab724a33e3f48a0ab8ce3be316652c822f378ceffa
 SHA512:
-  metadata.gz: dd1ed23cefc9609ca7d99d77410104b63107dc0e72f80e72279adc4a01cba1a6da3fe2d6e0467ec23b7db1166d3ccbdfcf380d4057c5644008ab4a9fa87e5092
-  data.tar.gz: 0b6bc8dcec6f206fc3867c19bc7ffe028230b8503109dc8473e10997abe41c56db0fd3970f88c23bbf6fd69873c1d905cc0ce11a2010c6205cccc891ee511982
+  metadata.gz: af01460ee4ece9edf319dfd84da74e0a4d6016cdc96c73c8f7bd1a1a421de254b7abcf157ec81c182591e94dff9b44a437b274f48c02129c6099a67f89dc6af2
+  data.tar.gz: 84d1af77774b4676e193db1800ba33401df62893491a134de11c84e6e3f17f26d2a7cc8b19c99bbdc05bbb9af018f079017ba1466680b29a00a065173399c572

data/CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.0] - 2026-04-22
+
+### Added
+- **Draft auto-save and restore** — unsaved edits are written to `localStorage` every 500 ms per file. On reconnect after a server outage, a dialog offers to restore any drafts that diverged from the in-memory tab content.
+- **Tab bar layout setting** — new "Tab bar layout" preference (Scroll / Wrap multi-row) stored in editor prefs; `TabBar` receives a `tabDisplayMode` prop and applies the appropriate CSS class; horizontal wheel scroll is disabled in wrap mode.
+
+### Fixed
+- **Drag-to-split** — pane 2 drop zone is now only shown when the cursor actively hovers over the right-half content area, preventing the tab bar from collapsing during a drag. Dropping onto a tab bar element is no longer intercepted by the cross-pane drop handler, preserving same-pane reordering.
+- **Quick Open sorting** — files consistently rank above directories; within the same priority tier results are sorted by match relevance (exact basename > prefix match > substring > other).
+- **Search total count** — the count thread is joined with a 100 ms timeout; `total_count` is omitted from the response when the thread has not finished, so the first page is never blocked by the counting subprocess.
+- **Status bar message colour** — removed `color-mix` transparency that was dimming the accent-text colour.
+
 ## [0.3.9] - 2026-04-21
 
 ### Added

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

@@ -60,7 +60,8 @@ var DEFAULT_EDITOR_PREFS = {
   prettierBracketSpacing: true,
   vimMode: false,
   fileTreeTypeahead: true,
-  quickOpenShowFolders: false
+  quickOpenShowFolders: false,
+  tabDisplayMode: 'scroll'
 };
 
 var SidebarActionButton = function SidebarActionButton(_ref) {
@@ -417,6 +418,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));
   };
@@ -937,6 +968,28 @@ 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]);
+
   // Auto-refresh the file tree every 10s to pick up external changes (new files, deletions, etc.)
   // Uses functional setTreeData to skip the re-render when nothing has changed.
   useEffect(function () {
@@ -1248,6 +1301,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 +1356,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);
   };
@@ -2062,6 +2121,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; });
@@ -2604,16 +2664,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 +2712,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 +3195,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'),
@@ -3206,8 +3304,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 +3509,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 },
@@ -3549,6 +3659,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,

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

@@ -94,6 +94,17 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     return 50;
   }
 
+  // Match relevance within a priority tier: exact basename > prefix > substring > other.
+  function getMatchRelevance(result, q) {
+    if (!q) return 3;
+    var name = (result.name || (result.path || '').split('/').pop() || '').toLowerCase();
+    var lq = q.toLowerCase();
+    if (name === lq)            return 0;
+    if (name.slice(0, lq.length) === lq) return 1;
+    if (name.indexOf(lq) >= 0)  return 2;
+    return 3;
+  }
+
   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' });
@@ -117,11 +128,14 @@ 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'; });
-    // 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.
+    // 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.
     filtered.sort(function(a, b) {
-      return getFilePriority(a.path) - getFilePriority(b.path);
+      var aPriority = getFilePriority(a.path) + (a.type === 'dir' ? 100 : 0);
+      var bPriority = getFilePriority(b.path) + (b.type === 'dir' ? 100 : 0);
+      if (aPriority !== bPriority) return aPriority - bPriority;
+      return getMatchRelevance(a, query) - getMatchRelevance(b, query);
     });
     setResults(filtered.slice(0, 200));
     setSelectedIndex(0);

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

@@ -18,6 +18,7 @@ var TabBar = function TabBar(_ref) {
   var onHardenTab = _ref.onHardenTab;
   var onShowHistory = _ref.onShowHistory;
   var onRevealInExplorer = _ref.onRevealInExplorer;
+  var tabDisplayMode = _ref.tabDisplayMode || 'scroll';
 
   var containerRef = useRef(null);
 
@@ -87,8 +88,8 @@ var TabBar = function TabBar(_ref) {
     null,
     React.createElement(
     'div',
-    { className: 'tab-bar', ref: containerRef, onWheel: function (e) {
-        if (containerRef.current) {
+    { className: 'tab-bar tab-bar-' + tabDisplayMode, ref: containerRef, onWheel: function (e) {
+        if (tabDisplayMode !== 'wrap' && containerRef.current) {
           containerRef.current.scrollLeft += e.deltaY;
         }
       } },

data/app/assets/stylesheets/mbeditor/editor.css

@@ -327,6 +327,18 @@ html, body, #mbeditor-root {
 .tab-bar::-webkit-scrollbar { height: 3px; }
 .tab-bar::-webkit-scrollbar-thumb { background: var(--ide-hover-bg); }
 
+/* Wrap (multi-row) tab layout */
+.tab-bar.tab-bar-wrap {
+  flex-wrap: wrap;
+  overflow-x: hidden;
+  overflow-y: visible;
+  height: auto;
+}
+.tab-bar.tab-bar-wrap .tab-item {
+  flex-shrink: 1;
+  flex-grow: 0;
+}
+
 .tab-item {
   display: flex;
   align-items: center;
@@ -792,7 +804,7 @@ html, body, #mbeditor-root {
 
 .statusbar-msg {
   margin-left: auto;
-  color: color-mix(in srgb, var(--ide-accent-text) 80%, transparent);
+  color: var(--ide-accent-text);
   font-size: 11px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1683,6 +1695,70 @@ html, body, #mbeditor-root {
   to   { opacity: 1; transform: translateY(0); }
 }
 
+/* ── Draft restore dialog ───────────────────────────────────── */
+.ide-draft-restore-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.55);
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ide-draft-restore-dialog {
+  background: var(--ide-panel-bg-alt);
+  border: 1px solid var(--ide-border-input);
+  border-radius: 8px;
+  padding: 20px 24px;
+  min-width: 320px;
+  max-width: 480px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
+  color: var(--ide-text);
+  font-size: 13px;
+}
+.ide-draft-restore-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  color: var(--ide-warning, #e5c07b);
+}
+.ide-draft-restore-body { margin-bottom: 8px; color: var(--ide-text-muted); }
+.ide-draft-restore-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 16px 0;
+  max-height: 160px;
+  overflow-y: auto;
+}
+.ide-draft-restore-list li {
+  padding: 3px 0;
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--ide-accent-fg, #9cdcfe);
+}
+.ide-draft-restore-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+.ide-draft-restore-btn {
+  padding: 5px 14px;
+  border-radius: 4px;
+  border: 1px solid var(--ide-border-input);
+  background: var(--ide-input-bg);
+  color: var(--ide-text);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.ide-draft-restore-btn:hover { background: var(--ide-hover-bg); }
+.ide-draft-restore-btn-primary {
+  background: var(--ide-accent);
+  color: var(--ide-accent-text);
+  border-color: var(--ide-accent);
+}
+.ide-draft-restore-btn-primary:hover { opacity: 0.9; }
+
 /* ── Settings panel ─────────────────────────────────────────── */
 .ide-settings-panel { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
 .ide-settings-body { padding: 8px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; align-items: start; }

data/app/controllers/mbeditor/editors_controller.rb

@@ -328,7 +328,12 @@ module Mbeditor
       results   = stream_search_results(query, needed)
       has_more  = results.length > offset + limit
       response  = { results: results[offset, limit] || [], has_more: has_more }
-      response[:total_count] = count_thread.value if count_thread
+      if count_thread
+        # Give the count thread up to 100 ms; omit total_count when it hasn't finished yet
+        # so the first page is never blocked by the counting subprocess.
+        count_thread.join(0.1)
+        response[:total_count] = count_thread.value unless count_thread.alive?
+      end
 
       render json: response
     rescue StandardError => e

data/lib/mbeditor/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Mbeditor
-  VERSION = "0.3.9"
+  VERSION = "0.4.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mbeditor
 version: !ruby/object:Gem::Version
-  version: 0.3.9
+  version: 0.4.0
 platform: ruby
 authors:
 - Oliver Noonan
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-04-21 00:00:00.000000000 Z
+date: 2026-06-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails