mbeditor 0.13.0 → 0.14.0

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

@@ -6,19 +6,16 @@ var FileHistoryPanel = function FileHistoryPanel(_ref) {
   var onClose = _ref.onClose;
 
   var _React$useState = React.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      commits = _React$useState2[0],
-      setCommits = _React$useState2[1];
+      commits = _React$useState[0],
+      setCommits = _React$useState[1];
 
   var _React$useState3 = React.useState(true),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      loading = _React$useState4[0],
-      setLoading = _React$useState4[1];
+      loading = _React$useState3[0],
+      setLoading = _React$useState3[1];
 
   var _React$useState5 = React.useState(null),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      error = _React$useState6[0],
-      setError = _React$useState6[1];
+      error = _React$useState5[0],
+      setError = _React$useState5[1];
 
   React.useEffect(function () {
     if (!path) return;

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

@@ -1,6 +1,5 @@
 'use strict';
 
-var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
 
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
 
@@ -25,6 +24,7 @@ var FileTree = function FileTree(_ref) {
   var activePath = _ref.activePath;
   var selectedPaths = _ref.selectedPaths;   // Set<string> — all selected paths
   var anchorPath = _ref.anchorPath;         // string — anchor for shift-click range
+  var revealTarget = _ref.revealTarget;     // { path } — one-shot scroll target after create/rename/delete
   var onNodeSelect = _ref.onNodeSelect;     // fn(node) — single select (also clears multi)
   var onMultiSelect = _ref.onMultiSelect;   // fn(Set<string>) — multi-select update
   var onMove = _ref.onMove;                 // fn(srcPaths[], destFolderPath) — DnD move
@@ -44,23 +44,20 @@ var FileTree = function FileTree(_ref) {
 
   var _useState = useState('');
 
-  var _useState2 = _slicedToArray(_useState, 2);
 
-  var inlineValue = _useState2[0];
-  var setInlineValue = _useState2[1];
+  var inlineValue = _useState[0];
+  var setInlineValue = _useState[1];
 
   var _useStateDnD = useState(null);
-  var _useStateDnD2 = _slicedToArray(_useStateDnD, 2);
-  var dragOverFolder = _useStateDnD2[0];
-  var setDragOverFolder = _useStateDnD2[1];
+  var dragOverFolder = _useStateDnD[0];
+  var setDragOverFolder = _useStateDnD[1];
 
   // Target of an in-flight *external* drag: a folder path, '' for the tree
   // root, or null when no external drag is over the tree. Kept separate from
   // dragOverFolder so the two drop kinds highlight differently.
   var _useStateExt = useState(null);
-  var _useStateExt2 = _slicedToArray(_useStateExt, 2);
-  var externalDragOver = _useStateExt2[0];
-  var setExternalDragOver = _useStateExt2[1];
+  var externalDragOver = _useStateExt[0];
+  var setExternalDragOver = _useStateExt[1];
 
   var inlineRef = useRef(null);
   var committedRef = useRef(false);
@@ -123,6 +120,18 @@ var FileTree = function FileTree(_ref) {
     return function () { clearTimeout(timer); };
   }, [anchorPath]);
 
+  // Scroll the affected row into view after a create/rename/delete. The
+  // caller expands any ancestor dirs before setting revealTarget, so this
+  // only has to wait for the tree re-render and locate the row.
+  useEffect(function () {
+    if (!revealTarget || !revealTarget.path) return;
+    var timer = setTimeout(function () {
+      var idx = flatItemsRef.current.findIndex(function(item) { return item.kind === 'node' && item.node.path === revealTarget.path; });
+      if (idx >= 0) scrollToItem(idx);
+    }, 80);
+    return function () { clearTimeout(timer); };
+  }, [revealTarget]);
+
   // Auto-reveal: when activePath changes, expand all ancestor dirs and scroll into view
   useEffect(function () {
     if (!activePath) return;
@@ -651,7 +660,8 @@ var FileTree = function FileTree(_ref) {
             onContextMenu: function(e) {
               e.preventDefault();
               e.stopPropagation();
-              selectNode(node);
+              var isPartOfMultiSelect = selectedPaths && selectedPaths.size > 1 && selectedPaths.has(node.path);
+              if (!isPartOfMultiSelect) selectNode(node);
               if (onContextMenu) onContextMenu(e, node);
             }
           },
@@ -715,7 +725,11 @@ var FileTreeMemo = React.memo(FileTree, function(prev, next) {
     prev.gitFiles === next.gitFiles &&
     prev.expandedDirs === next.expandedDirs &&
     prev.pendingCreate === next.pendingCreate &&
-    prev.pendingRename === next.pendingRename;
+    prev.pendingRename === next.pendingRename &&
+    // A fresh object per reveal request, so identity is the signal. Without it
+    // the reveal only lands when the tree happened to change in the same batch,
+    // which is most of the time and never all of it.
+    prev.revealTarget === next.revealTarget;
 });
 
 // Expose globally for sprockets require

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

@@ -84,6 +84,9 @@ var GitPanel = function GitPanel(_ref) {
   var statusMeta = function statusMeta(rawStatus) {
     var raw = (rawStatus || '').trim();
     if (raw === '??') return { badge: 'NEW', cssKey: 'A', description: 'Untracked' };
+    // Before the first-character switch below: AA and DD are conflicts, and it
+    // would call them "added" and "deleted".
+    if (window.MBEDITOR_UNMERGED_STATUSES[raw]) return { badge: 'U', cssKey: 'Q', description: 'Conflict' };
     if (raw.startsWith('R')) return { badge: 'R', cssKey: 'R', description: 'Renamed' };
     switch (raw.charAt(0)) {
       case 'M': return { badge: 'M', cssKey: 'M', description: 'Modified' };

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

@@ -0,0 +1,51 @@
+'use strict';
+
+// Gutter — the one draggable strip between two cards.
+//
+// It lives in the gap, never inside the panel it resizes: a grip rendered
+// inside a card sits on the card's own background and reads as decoration
+// rather than as the seam you can pull. Every gutter in the app is this
+// component; the panel next to it owns the resize maths and gets a bare
+// mousedown through `onDragStart`.
+//
+// `onSnap` is the one behaviour Gutter owns itself, because it is the same
+// three lines wherever it appears: a gutter with nothing to resize yet (a
+// collapsed explorer, a closed drawer) tracks its own drag and fires once on
+// mouseup if the pointer travelled far enough in the opening direction —
+// right for a vertical gutter, up for a horizontal one, or the reverse with
+// `snapDirection: -1` (a panel that opens from the right edge). It is handed the
+// distance so a caller can open to the dragged size. In that mode
+// `onDragStart` is not called.
+var Gutter = function Gutter(props) {
+  var vertical = props.orientation === 'vertical';
+  var onSnap = props.onSnap;
+
+  var onMouseDown = onSnap ? function (e) {
+    e.preventDefault();
+    var start = vertical ? e.clientX : e.clientY;
+    var threshold = props.snapThreshold == null ? 24 : props.snapThreshold;
+    var onMove = function (ev) { ev.preventDefault(); };
+    var onUp = function (ev) {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      var dir = props.snapDirection == null ? 1 : props.snapDirection;
+      var moved = (vertical ? ev.clientX - start : start - ev.clientY) * dir;
+      if (moved >= threshold) onSnap(moved);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  } : props.onDragStart;
+
+  return React.createElement('div', {
+    className: 'ide-gutter ide-gutter-' + (vertical ? 'v' : 'h') +
+      (props.active ? ' active' : '') +
+      (props.className ? ' ' + props.className : ''),
+    role: 'separator',
+    'aria-orientation': vertical ? 'vertical' : 'horizontal',
+    'aria-label': props.label,
+    title: props.label,
+    onMouseDown: onMouseDown
+  });
+};
+
+window.Gutter = Gutter;

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

@@ -88,7 +88,15 @@ var ImportDialog = function ImportDialog(_ref) {
     options.push(destOption(prefix, label, hint));
   };
 
-  if (initialFolder) offer(initialFolder, initialFolder, 'selected folder');
+  // The folder this upload was started from is always first and always the
+  // active one. Offering it after the suggestions meant that once you had
+  // imported a folder anywhere, that same folder scored top of the suggestion
+  // list next time and sat at the head of the options — so the dialog read as
+  // "it remembered where I last put things". With nothing selected it was
+  // worse: the previous destination was the first option and the actually
+  // chosen one ("Workspace root") was last.
+  offer(initialFolder, initialFolder || 'Workspace root',
+    initialFolder ? 'selected folder' : 'create the folders from the root');
   suggestions.forEach(function (s) {
     var bits = [];
     if (s.files) bits.push(s.files + ' matching file' + (s.files === 1 ? '' : 's'));

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

@@ -48,6 +48,9 @@ function classifyLogLine(line) {
 
 var LogPanel = function LogPanel(_ref) {
   var onClose = _ref.onClose;
+  // Height is owned by MbeditorApp: the gutter that drags it lives between the
+  // editor card and this drawer, not inside it.
+  var height = _ref.height;
 
   var _lines = React.useState([]);
   var lines = _lines[0], setLines = _lines[1];
@@ -56,46 +59,7 @@ var LogPanel = function LogPanel(_ref) {
   var _autoScroll = React.useState(true);
   var autoScroll = _autoScroll[0], setAutoScroll = _autoScroll[1];
 
-  var MIN_HEIGHT = 120;
-  var _height = React.useState(function () {
-    var saved = parseInt(window.localStorage.getItem('mbeditorLogHeight'), 10);
-    return (saved && saved >= MIN_HEIGHT) ? saved : 240;
-  });
-  var height = _height[0], setHeight = _height[1];
-
   var bodyRef = React.useRef(null);
-  // Mirror height into a ref so the drag end-handler can persist the final value
-  // (setHeight is async, so reading state in onMouseUp would be stale).
-  var heightRef = React.useRef(height);
-  heightRef.current = height;
-
-  // Drag the top edge to resize the drawer. Delta-based: track how far the
-  // pointer has moved from where the drag started and add that to the starting
-  // height. Dragging up grows the drawer. This is independent of where the
-  // drawer is anchored and survives a zero/unknown viewport height.
-  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;
-      var next = Math.min(maxH, Math.max(MIN_HEIGHT, startHeight + (startY - ev.clientY)));
-      heightRef.current = next;
-      setHeight(next);
-    };
-    var onUp = function () {
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-      window.localStorage.setItem('mbeditorLogHeight', String(heightRef.current));
-    };
-    document.body.style.cursor = 'ns-resize';
-    document.body.style.userSelect = 'none';
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  };
 
   React.useEffect(function () {
     LogService.start();
@@ -130,11 +94,6 @@ var LogPanel = function LogPanel(_ref) {
   return React.createElement(
     'div',
     { className: 'ide-log-drawer', style: { height: height + 'px' } },
-    React.createElement('div', {
-      className: 'ide-log-resize',
-      title: 'Drag to resize',
-      onMouseDown: onResizeMouseDown
-    }),
     React.createElement(
       'div',
       { className: 'ide-log-header' },