mbeditor 0.1.0

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

@@ -0,0 +1,118 @@
+"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"); } }; })();
+
+var _React = React;
+var useState = _React.useState;
+var useEffect = _React.useEffect;
+var useRef = _React.useRef;
+
+var QuickOpenDialog = function QuickOpenDialog(_ref) {
+  var onSelect = _ref.onSelect;
+  var onClose = _ref.onClose;
+
+  var _useState = useState("");
+
+  var _useState2 = _slicedToArray(_useState, 2);
+
+  var query = _useState2[0];
+  var setQuery = _useState2[1];
+
+  var _useState3 = useState([]);
+
+  var _useState32 = _slicedToArray(_useState3, 2);
+
+  var results = _useState32[0];
+  var setResults = _useState32[1];
+
+  var _useState4 = useState(0);
+
+  var _useState42 = _slicedToArray(_useState4, 2);
+
+  var selectedIndex = _useState42[0];
+  var setSelectedIndex = _useState42[1];
+
+  var inputRef = useRef(null);
+
+  useEffect(function () {
+    if (inputRef.current) inputRef.current.focus();
+  }, []);
+
+  useEffect(function () {
+    var res = SearchService.searchFiles(query);
+    setResults(res.slice(0, 20)); // cap at 20
+    setSelectedIndex(0);
+  }, [query]);
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === "Escape") onClose();
+    if (e.key === "ArrowDown") setSelectedIndex(function (i) {
+      return Math.min(i + 1, results.length - 1);
+    });
+    if (e.key === "ArrowUp") setSelectedIndex(function (i) {
+      return Math.max(i - 1, 0);
+    });
+    if (e.key === "Enter" && results[selectedIndex]) {
+      var res = results[selectedIndex];
+      onSelect(res.path, res.name);
+    }
+  };
+
+  return React.createElement(
+    "div",
+    { className: "quick-open-overlay", onClick: onClose },
+    React.createElement(
+      "div",
+      { className: "quick-open-box", onClick: function (e) {
+          return e.stopPropagation();
+        } },
+      React.createElement("input", {
+        ref: inputRef,
+        type: "text",
+        className: "quick-open-input",
+        placeholder: "Search files by name (Ctrl+P)...",
+        value: query,
+        onChange: function (e) {
+          return setQuery(e.target.value);
+        },
+        onKeyDown: handleKeyDown
+      }),
+      React.createElement(
+        "div",
+        { className: "quick-open-results" },
+        results.map(function (res, i) {
+          return React.createElement(
+            "div",
+            {
+              key: res.id,
+              className: "quick-open-result " + (i === selectedIndex ? "selected" : ""),
+              onClick: function () {
+                return onSelect(res.path, res.name);
+              },
+              onMouseEnter: function () {
+                return setSelectedIndex(i);
+              }
+            },
+            React.createElement(
+              "div",
+              { className: "quick-open-result-name" },
+              res.name
+            ),
+            React.createElement(
+              "div",
+              { className: "quick-open-result-path" },
+              res.path
+            )
+          );
+        }),
+        query && results.length === 0 && React.createElement(
+          "div",
+          { style: { padding: "12px 16px", color: "#666", fontSize: "12px" } },
+          "No matching files."
+        )
+      )
+    )
+  );
+};
+
+window.QuickOpenDialog = QuickOpenDialog;

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

@@ -0,0 +1,186 @@
+'use strict';
+
+// ShortcutHelp — isolated module.
+// Renders a centred overlay listing all keyboard shortcuts and usage tips.
+// Dismissable with the × button, clicking the backdrop, or Escape.
+// Mount/unmount is controlled entirely by the parent (showHelp state).
+
+var ShortcutHelp = function ShortcutHelp(_ref) {
+  var onClose = _ref.onClose;
+
+  var _React = React;
+  var useEffect = _React.useEffect;
+
+  useEffect(function () {
+    function onKeyDown(e) {
+      if (e.key === 'Escape') onClose();
+    }
+    window.addEventListener('keydown', onKeyDown);
+    return function () { window.removeEventListener('keydown', onKeyDown); };
+  }, [onClose]);
+
+  function Section(props) {
+    return React.createElement(
+      'div',
+      { className: 'shelp-section' },
+      React.createElement('h3', { className: 'shelp-section-title' }, props.title),
+      props.children
+    );
+  }
+
+  function Row(props) {
+    return React.createElement(
+      'tr',
+      null,
+      React.createElement(
+        'td',
+        { className: 'shelp-key' },
+        React.createElement('kbd', null, props.keys)
+      ),
+      React.createElement('td', { className: 'shelp-desc' }, props.desc)
+    );
+  }
+
+  function Tips(props) {
+    return React.createElement(
+      'ul',
+      { className: 'shelp-tips' },
+      props.items.map(function (item, i) {
+        return React.createElement('li', { key: i }, item);
+      })
+    );
+  }
+
+  return React.createElement(
+    'div',
+    { className: 'shelp-backdrop', onClick: onClose },
+    React.createElement(
+      'div',
+      {
+        className: 'shelp-panel',
+        onClick: function (e) { e.stopPropagation(); },
+        role: 'dialog',
+        'aria-modal': 'true',
+        'aria-label': 'Keyboard shortcuts and help'
+      },
+      React.createElement(
+        'div',
+        { className: 'shelp-header' },
+        React.createElement(
+          'span',
+          { className: 'shelp-title' },
+          React.createElement('i', { className: 'fas fa-keyboard', style: { marginRight: '8px' } }),
+          'Keyboard Shortcuts & Help'
+        ),
+        React.createElement(
+          'button',
+          { className: 'shelp-close', onClick: onClose, 'aria-label': 'Close help' },
+          React.createElement('i', { className: 'fas fa-times' })
+        )
+      ),
+
+      React.createElement(
+        'div',
+        { className: 'shelp-body' },
+
+        React.createElement(
+          'div',
+          { className: 'shelp-columns' },
+
+          // Left column
+          React.createElement(
+            'div',
+            { className: 'shelp-col' },
+
+            React.createElement(
+              Section,
+              { title: 'File navigation' },
+              React.createElement(
+                'table',
+                { className: 'shelp-table' },
+                React.createElement(
+                  'tbody',
+                  null,
+                  React.createElement(Row, { keys: 'Ctrl+P', desc: 'Quick-open any file by name' }),
+                  React.createElement(Row, { keys: 'Ctrl+S', desc: 'Save the active file' }),
+                  React.createElement(Row, { keys: 'Escape', desc: 'Close quick-open / context menus' })
+                )
+              )
+            ),
+
+            React.createElement(
+              Section,
+              { title: 'Editor actions' },
+              React.createElement(
+                'table',
+                { className: 'shelp-table' },
+                React.createElement(
+                  'tbody',
+                  null,
+                  React.createElement(Row, { keys: 'Ctrl+Z', desc: 'Undo' }),
+                  React.createElement(Row, { keys: 'Ctrl+Y', desc: 'Redo' }),
+                  React.createElement(Row, { keys: 'Ctrl+/', desc: 'Toggle line comment' }),
+                  React.createElement(Row, { keys: 'Ctrl+D', desc: 'Select next occurrence' }),
+                  React.createElement(Row, { keys: 'Alt+↑/↓', desc: 'Move line up / down' }),
+                  React.createElement(Row, { keys: 'Ctrl+Space', desc: 'Trigger autocomplete' })
+                )
+              )
+            )
+          ),
+
+          // Right column
+          React.createElement(
+            'div',
+            { className: 'shelp-col' },
+
+            React.createElement(
+              Section,
+              { title: 'Tabs & panes' },
+              React.createElement(
+                Tips,
+                {
+                  items: [
+                    'Click a file to open a preview tab',
+                    'Double-click to pin the tab permanently',
+                    'Drag a tab to the right half to create a split pane',
+                    'Use × to close a tab, or middle-click'
+                  ]
+                }
+              )
+            ),
+
+            React.createElement(
+              Section,
+              { title: 'Sidebar panels' },
+              React.createElement(
+                Tips,
+                {
+                  items: [
+                    'Explorer — browse files; click to open',
+                    'Search — full-text search across all project files',
+                    'Git (top-right) — branch info, changed and unpushed files'
+                  ]
+                }
+              )
+            ),
+
+            React.createElement(
+              Section,
+              { title: 'File tree' },
+              React.createElement(
+                Tips,
+                {
+                  items: [
+                    'Right-click a file or folder for rename / delete / new file',
+                    'Click a folder to expand or collapse it',
+                    'Coloured badges show git status (M modified, A added, D deleted)'
+                  ]
+                }
+              )
+            )
+          )
+        )
+      )
+    )
+  );
+};

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

@@ -0,0 +1,123 @@
+'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'); } }; })();
+
+var _React = React;
+var useState = _React.useState;
+var useEffect = _React.useEffect;
+var useRef = _React.useRef;
+
+var TabBar = function TabBar(_ref) {
+  var tabs = _ref.tabs;
+  var activeId = _ref.activeId;
+  var onSelect = _ref.onSelect;
+  var onClose = _ref.onClose;
+  var onTabDragStart = _ref.onTabDragStart;
+  var onTabDragEnd = _ref.onTabDragEnd;
+  var onHardenTab = _ref.onHardenTab;
+  var onShowHistory = _ref.onShowHistory;
+
+  var containerRef = useRef(null);
+
+  var _useState = useState(null);
+
+  var _useState2 = _slicedToArray(_useState, 2);
+
+  var draggingTabId = _useState2[0];
+  var setDraggingTabId = _useState2[1];
+
+  var getTabMarkerClass = function getTabMarkerClass(tab) {
+    var tabMarkers = tab.markers || [];
+    if (!tabMarkers.length) return '';
+
+    var hasError = tabMarkers.some(function (marker) {
+      var severity = String(marker && marker.severity || '').toLowerCase();
+      return severity === 'error' || severity === 'fatal';
+    });
+    if (hasError) return 'tab-has-error';
+
+    var hasWarning = tabMarkers.some(function (marker) {
+      var severity = String(marker && marker.severity || '').toLowerCase();
+      return severity !== 'error' && severity !== 'fatal';
+    });
+    if (hasWarning) return 'tab-has-warning';
+
+    return '';
+  };
+
+  // Scroll active tab into view
+  useEffect(function () {
+    if (containerRef.current) {
+      var activeEl = containerRef.current.querySelector('.tab-item.active');
+      if (activeEl) {
+        activeEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+      }
+    }
+  }, [activeId, tabs]);
+
+  return React.createElement(
+    'div',
+    { className: 'tab-bar', ref: containerRef, onWheel: function (e) {
+        if (containerRef.current) {
+          containerRef.current.scrollLeft += e.deltaY;
+        }
+      } },
+    tabs.map(function (tab) {
+      var isSpecial = tab.isCommitGraph || tab.isDiff || tab.isPreview;
+      return React.createElement(
+        'div',
+        {
+          key: tab.id,
+          className: 'tab-item ' + (activeId === tab.id ? 'active' : '') + ' ' + (tab.isSoftOpen ? 'tab-soft' : '') + ' ' + getTabMarkerClass(tab) + ' ' + (draggingTabId === tab.id ? 'dragging' : ''),
+          onClick: function () {
+            return onSelect(tab.id);
+          },
+          onDoubleClick: function () {
+            if (tab.isSoftOpen && onHardenTab) onHardenTab(tab.id);
+          },
+          title: tab.path + ' - Drag to move to another pane',
+          draggable: true,
+          onDragStart: function (e) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('application/x-mbeditor-tab', tab.id);
+            setDraggingTabId(tab.id);
+            if (onTabDragStart) onTabDragStart(tab.id);
+          },
+          onDragEnd: function () {
+            setDraggingTabId(null);
+            if (onTabDragEnd) onTabDragEnd();
+          },
+          onContextMenu: function (e) {
+            if (isSpecial) return;
+            e.preventDefault();
+            if (onShowHistory) onShowHistory(tab.path);
+          }
+        },
+        React.createElement('i', { className: 'tab-item-icon ' + (window.getFileIcon ? window.getFileIcon(tab.name) : 'far fa-file-code') }),
+        React.createElement(
+          'div',
+          { className: 'tab-item-name' },
+          tab.name
+        ),
+        tab.dirty && React.createElement(
+          'div',
+          { className: 'tab-dirty-dot' },
+          '●'
+        ),
+        React.createElement(
+          'div',
+          {
+            className: 'tab-close',
+            onClick: function (e) {
+              e.stopPropagation();
+              onClose(tab.id);
+            }
+          },
+          React.createElement('i', { className: 'fas fa-times' })
+        )
+      );
+    })
+  );
+};
+
+window.TabBar = TabBar;