mbeditor 0.2.2

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

@@ -0,0 +1,139 @@
+'use strict';
+
+// Renders the raw unified diff text produced by `git diff` for multiple files.
+// Each line is colored (green = addition, red = deletion, blue = hunk header,
+// dimmed = file header) giving a VS Code "Open Changes" style read-only view.
+var CombinedDiffViewer = function CombinedDiffViewer(_ref) {
+  var diffText = _ref.diffText;
+  var label    = _ref.label;
+  var isLoading = _ref.isLoading;
+
+  var containerRef = React.useRef(null);
+
+  // Track which file sections are collapsed.  Key = "diff --git …" header line.
+  var _us = React.useState({});
+  var collapsed = _us[0]; var setCollapsed = _us[1];
+
+  if (isLoading) {
+    return React.createElement(
+      'div',
+      { className: 'combined-diff-viewer combined-diff-loading-wrap' },
+      React.createElement('span', { className: 'combined-diff-loading-msg' }, 'Loading\u2026')
+    );
+  }
+
+  if (!diffText || !diffText.trim()) {
+    return React.createElement(
+      'div',
+      { className: 'combined-diff-viewer combined-diff-empty' },
+      React.createElement('i', { className: 'fas fa-check-circle', style: { marginRight: 8, color: '#89d185' } }),
+      'No changes.'
+    );
+  }
+
+  // Split the raw diff into per-file segments, each starting at "diff --git".
+  var segments = [];
+  var current = null;
+  diffText.split('\n').forEach(function (line) {
+    if (line.startsWith('diff --git ')) {
+      if (current) segments.push(current);
+      current = { header: line, lines: [line] };
+    } else if (current) {
+      current.lines.push(line);
+    }
+  });
+  if (current) segments.push(current);
+
+  // Extract a clean display path from the "diff --git a/foo b/foo" header
+  function extractPath(headerLine) {
+    var m = headerLine.match(/^diff --git a\/(.+) b\/(.+)$/);
+    return m ? m[2] : headerLine.replace('diff --git ', '');
+  }
+
+  function renderSegment(seg, si) {
+    var filePath = extractPath(seg.header);
+    var parts = filePath.split('/');
+    var fileName = parts.pop();
+    var fileDir = parts.join('/');
+
+    var isCollapsed = !!collapsed[si];
+
+    var lineNodes = [];
+    var inHunk = false;
+    seg.lines.forEach(function (line, li) {
+      // Skip the boring "diff --git / index / --- / +++" boilerplate at the top
+      if (li === 0) return; // "diff --git" — shown in header
+      if (line.startsWith('index ') || line.startsWith('old mode') || line.startsWith('new mode') || line.startsWith('new file') || line.startsWith('deleted file') || line.startsWith('Binary') || line.startsWith('rename ')) {
+        lineNodes.push(React.createElement('div', { key: li, className: 'cdiff-line cdiff-meta' }, line));
+        return;
+      }
+      if (line.startsWith('--- ') || line.startsWith('+++ ')) {
+        lineNodes.push(React.createElement('div', { key: li, className: 'cdiff-line cdiff-file-header' }, line));
+        inHunk = false;
+        return;
+      }
+      if (line.startsWith('@@')) {
+        inHunk = true;
+        lineNodes.push(React.createElement('div', { key: li, className: 'cdiff-line cdiff-hunk' }, line));
+        return;
+      }
+      if (!inHunk) return;
+      var cls = 'cdiff-line';
+      if (line.startsWith('+')) cls += ' cdiff-add';
+      else if (line.startsWith('-')) cls += ' cdiff-del';
+      else cls += ' cdiff-ctx';
+      lineNodes.push(React.createElement('div', { key: li, className: cls }, line || '\u00a0'));
+    });
+
+    return React.createElement(
+      'div',
+      { key: si, className: 'cdiff-file-segment' },
+      // File header bar
+      React.createElement(
+        'div',
+        {
+          className: 'cdiff-file-bar',
+          onClick: function () {
+            setCollapsed(function (prev) {
+              var next = Object.assign({}, prev);
+              next[si] = !prev[si];
+              return next;
+            });
+          }
+        },
+        React.createElement('i', {
+          className: 'fas ' + (isCollapsed ? 'fa-chevron-right' : 'fa-chevron-down') + ' cdiff-chevron'
+        }),
+        React.createElement('i', { className: 'fas fa-file-code cdiff-file-icon' }),
+        React.createElement('span', { className: 'cdiff-file-name' }, fileName),
+        fileDir ? React.createElement('span', { className: 'cdiff-file-dir' }, fileDir) : null
+      ),
+      !isCollapsed && React.createElement(
+        'div',
+        { className: 'cdiff-file-body' },
+        lineNodes
+      )
+    );
+  }
+
+  return React.createElement(
+    'div',
+    { className: 'combined-diff-viewer' },
+    // Toolbar
+    React.createElement(
+      'div',
+      { className: 'combined-diff-toolbar' },
+      React.createElement('i', { className: 'fas fa-exchange-alt', style: { color: '#569cd6', marginRight: 8 } }),
+      React.createElement('span', { className: 'combined-diff-label' }, label || 'All Changes'),
+      React.createElement('span', { className: 'combined-diff-file-count' }, segments.length + ' file' + (segments.length === 1 ? '' : 's'))
+    ),
+    // Body
+    React.createElement(
+      'div',
+      { className: 'combined-diff-body', ref: containerRef },
+      segments.map(function (seg, si) { return renderSegment(seg, si); })
+    )
+  );
+};
+
+window.CombinedDiffViewer = CombinedDiffViewer;

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

@@ -0,0 +1,65 @@
+'use strict';
+
+var CommitGraph = function CommitGraph(_ref) {
+  var commits = _ref.commits;
+  var onSelectCommit = _ref.onSelectCommit;
+
+  if (!commits || commits.length === 0) {
+    return React.createElement(
+      'div',
+      { className: 'git-empty' },
+      'No commit history available.'
+    );
+  }
+
+  // Very simplified graph rendering for a single branch view.
+  // Full cross-branch line rendering in a web UI is complex;
+  // here we render a vertical line with dots for each commit.
+  return React.createElement(
+    'div',
+    { className: 'ide-commit-graph' },
+    commits.map(function (commit, idx) {
+      var isFirst = idx === 0;
+      var isLast = idx === commits.length - 1;
+      var dateObj = new Date(commit.date);
+      var dateStr = !isNaN(dateObj) ? dateObj.toLocaleString() : commit.date;
+      var isLocal = commit.isLocal;
+
+      return React.createElement(
+        'div',
+        {
+          key: commit.hash,
+          className: 'commit-row ' + (isLocal ? 'commit-local' : ''),
+          onClick: function () { return onSelectCommit && onSelectCommit(commit); }
+        },
+        React.createElement(
+          'div',
+          { className: 'commit-graph-col' },
+          !isFirst && React.createElement('div', { className: 'commit-line-top' }),
+          React.createElement('div', { className: 'commit-dot ' + (isLocal ? 'dot-local' : 'dot-pushed') }),
+          !isLast && React.createElement('div', { className: 'commit-line-bottom' })
+        ),
+        React.createElement(
+          'div',
+          { className: 'commit-info-col' },
+          React.createElement(
+            'div',
+            { className: 'commit-title', title: commit.title },
+            commit.title
+          ),
+          React.createElement(
+            'div',
+            { className: 'commit-meta' },
+            React.createElement('span', { className: 'commit-hash' }, commit.hash.slice(0, 7)),
+            ' \xB7 ',
+            commit.author,
+            ' \xB7 ',
+            dateStr
+          )
+        )
+      );
+    })
+  );
+};
+
+window.CommitGraph = CommitGraph;

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

@@ -0,0 +1,166 @@
+'use strict';
+
+var DiffViewer = function DiffViewer(_ref) {
+  var path = _ref.path;
+  var original = _ref.original;
+  var modified = _ref.modified;
+  var isDark = _ref.isDark;
+  var onClose = _ref.onClose;
+  var editorPrefs = _ref.editorPrefs || {};
+  // If path is a diff:// URI (diff://baseSha..headSha/actual/file.rb), extract
+  // just the file path portion for display so the title bar shows a clean name.
+  var _rawDisplayPath = _ref.displayPath || path;
+  var displayPath = _rawDisplayPath;
+  if (!_ref.displayPath && _rawDisplayPath && _rawDisplayPath.indexOf('diff://') === 0) {
+    var _rest = _rawDisplayPath.slice(7); // strip 'diff://'
+    var _sep = _rest.indexOf('/');
+    if (_sep !== -1) displayPath = _rest.slice(_sep + 1);
+  }
+
+  var containerRef = React.useRef(null);
+  var editorRef = React.useRef(null);
+  var currentChangeRef = React.useRef(-1);
+
+  React.useEffect(function () {
+    if (!window.monaco || !containerRef.current) return;
+
+    var modelOriginal = window.monaco.editor.createModel(original, getLanguageForPath(displayPath));
+    var modelModified = window.monaco.editor.createModel(modified, getLanguageForPath(displayPath));
+
+    var diffEditor = window.monaco.editor.createDiffEditor(containerRef.current, {
+      theme: isDark ? 'vs-dark' : 'vs',
+      readOnly: true,
+      automaticLayout: true,
+      originalEditable: false,
+      renderSideBySide: true,
+      useInlineViewWhenSpaceIsLimited: false,
+      ignoreTrimWhitespace: false,
+      minimap: { enabled: false },
+      scrollBeyondLastLine: false,
+      fontFamily: editorPrefs.fontFamily || "'JetBrains Mono', 'Fira Code', 'Menlo', 'Consolas', monospace",
+      fontSize: editorPrefs.fontSize || 13,
+      wordWrap: editorPrefs.wordWrap || 'off'
+    });
+
+    diffEditor.setModel({
+      original: modelOriginal,
+      modified: modelModified
+    });
+
+    editorRef.current = diffEditor;
+    currentChangeRef.current = -1;
+
+    diffEditor.onDidUpdateDiff(function () {
+      currentChangeRef.current = -1;
+    });
+
+    return function () {
+      if (editorRef.current) {
+        editorRef.current.dispose();
+        editorRef.current = null;
+      }
+      modelOriginal.dispose();
+      modelModified.dispose();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [original, modified, displayPath, isDark]);
+
+  // Update font/wrap options live when editorPrefs changes, without recreating the editor
+  React.useEffect(function () {
+    if (!editorRef.current) return;
+    editorRef.current.updateOptions({
+      fontFamily: editorPrefs.fontFamily || "'JetBrains Mono', 'Fira Code', 'Menlo', 'Consolas', monospace",
+      fontSize: editorPrefs.fontSize || 13,
+      wordWrap: editorPrefs.wordWrap || 'off'
+    });
+  }, [editorPrefs]);
+
+  var handleNextDiff = function handleNextDiff() {
+    if (!editorRef.current) return;
+    var changes = editorRef.current.getLineChanges() || [];
+    if (!changes.length) return;
+    currentChangeRef.current = (currentChangeRef.current + 1) % changes.length;
+    var change = changes[currentChangeRef.current];
+    editorRef.current.getModifiedEditor().revealLineInCenter(change.modifiedStartLineNumber);
+  };
+
+  var handlePrevDiff = function handlePrevDiff() {
+    if (!editorRef.current) return;
+    var changes = editorRef.current.getLineChanges() || [];
+    if (!changes.length) return;
+    currentChangeRef.current = (currentChangeRef.current - 1 + changes.length) % changes.length;
+    var change = changes[currentChangeRef.current];
+    editorRef.current.getModifiedEditor().revealLineInCenter(change.modifiedStartLineNumber);
+  };
+
+  function getLanguageForPath(filePath) {
+    if (!filePath) return 'plaintext';
+    var fileName = filePath.split('/').pop().toLowerCase();
+    if (fileName === 'gemfile' || fileName === 'gemfile.lock' || fileName === 'rakefile') return 'ruby';
+    // Compound extensions — check before single-extension lookup
+    if (/\.js\.erb$/.test(fileName)) return 'js-erb';
+    if (/\.ts\.erb$/.test(fileName)) return 'typescript';
+    if (/\.html\.erb$/.test(fileName)) return 'erb';
+    if (/\.html\.haml$/.test(fileName)) return 'haml';
+    if (/\.js\.haml$/.test(fileName)) return 'javascript';
+    if (/\.css\.erb$/.test(fileName)) return 'css';
+    var ext = fileName.split('.').pop();
+    var map = {
+      'rb': 'ruby', 'gemspec': 'ruby',
+      'js': 'javascript', 'jsx': 'javascript',
+      'ts': 'typescript', 'tsx': 'typescript',
+      'json': 'json', 'yml': 'yaml', 'yaml': 'yaml',
+      'css': 'css', 'scss': 'css', 'sass': 'css',
+      'html': 'html', 'erb': 'erb', 'haml': 'haml',
+      'xml': 'xml', 'md': 'markdown', 'markdown': 'markdown',
+      'sh': 'shell', 'bash': 'shell', 'zsh': 'shell'
+    };
+    return map[ext] || 'plaintext';
+  }
+
+  var pathParts = (displayPath || '').split('/');
+  var fileName = pathParts.pop() || displayPath || '';
+  var fileDir = pathParts.join('/');
+
+  return React.createElement(
+    'div',
+    { className: 'ide-diff-viewer' },
+    React.createElement(
+      'div',
+      { className: 'ide-diff-toolbar' },
+      React.createElement(
+        'div',
+        { className: 'ide-diff-title' },
+        React.createElement('i', { className: 'fas fa-file-contract' }),
+          React.createElement(
+            'div',
+            { className: 'ide-diff-title-info', title: displayPath },
+            React.createElement('div', { className: 'ide-diff-title-name' }, fileName),
+            fileDir ? React.createElement('div', { className: 'ide-diff-title-dir' }, fileDir) : null
+          )
+      ),
+      React.createElement(
+        'div',
+        { className: 'ide-diff-actions' },
+        onClose && React.createElement(
+          'button',
+          { className: 'ide-diff-btn', onClick: onClose, title: 'Close diff (or click × on the tab)' },
+          React.createElement('i', { className: 'fas fa-times' })
+        ),
+        React.createElement(
+          'button',
+          { className: 'ide-diff-btn', onClick: handlePrevDiff, title: 'Previous Change' },
+          React.createElement('i', { className: 'fas fa-arrow-up' })
+        ),
+        React.createElement(
+          'button',
+          { className: 'ide-diff-btn', onClick: handleNextDiff, title: 'Next Change' },
+          React.createElement('i', { className: 'fas fa-arrow-down' })
+        )
+      )
+    ),
+    React.createElement('div', { className: 'ide-diff-editor-container', ref: containerRef })
+  );
+};
+
+window.DiffViewer = DiffViewer;