mbeditor 0.13.1 → 0.14.1

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

@@ -44,6 +44,32 @@ var ProblemsPanel = (function () {
     return text.length > CODE_PREVIEW_LIMIT ? text.slice(0, CODE_PREVIEW_LIMIT) + '…' : text;
   }
 
+  // VS Code-style file group header: chevron, file-type icon, basename, then
+  // the containing directory in a dimmer colour. `path` is workspace-relative.
+  function fileGroupName(path) {
+    var slash = path.lastIndexOf('/');
+    return {
+      base: slash === -1 ? path : path.slice(slash + 1),
+      dir: slash === -1 ? '' : path.slice(0, slash)
+    };
+  }
+
+  function renderFileGroupHeader(path, count) {
+    var parts = fileGroupName(path);
+    return React.createElement(
+      'div',
+      { className: 'ide-problems-file-name' },
+      React.createElement('i', { className: 'fas fa-chevron-down', 'aria-hidden': 'true' }),
+      React.createElement('i', {
+        className: (window.getFileIcon ? window.getFileIcon(parts.base) : 'far fa-file-code'),
+        'aria-hidden': 'true'
+      }),
+      React.createElement('span', null, parts.base),
+      parts.dir && React.createElement('span', { className: 'ide-problems-dir' }, parts.dir),
+      React.createElement('span', { className: 'ide-problems-file-count' }, count)
+    );
+  }
+
   // Reading markers means walking every model, so callers that only want the
   // counts share this one pass. Exposed on the component for the status bar.
   function collect() {
@@ -111,6 +137,9 @@ var ProblemsPanel = (function () {
 
   var Panel = function ProblemsPanelComponent(_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 onOpenFile = _ref.onOpenFile;
     // Called after `-a` has rewritten files on disk, so the app can re-read
     // every open tab. Nothing else would: the write came from a subprocess,
@@ -226,34 +255,6 @@ var ProblemsPanel = (function () {
       });
     };
 
-    var MIN_HEIGHT = 120;
-    var _height = React.useState(function () {
-      var saved = parseInt(window.localStorage.getItem('mbeditorProblemsHeight'), 10);
-      return (saved && saved >= MIN_HEIGHT) ? saved : 240;
-    });
-    var height = _height[0], setHeight = _height[1];
-    var heightRef = React.useRef(height);
-    heightRef.current = height;
-
-    // Same delta-based resize as the log drawer.
-    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;
-        setHeight(Math.min(maxH, Math.max(MIN_HEIGHT, startHeight + (startY - ev.clientY))));
-      };
-      var onUp = function () {
-        document.removeEventListener('mousemove', onMove);
-        document.removeEventListener('mouseup', onUp);
-        window.localStorage.setItem('mbeditorProblemsHeight', String(heightRef.current));
-      };
-      document.addEventListener('mousemove', onMove);
-      document.addEventListener('mouseup', onUp);
-    };
-
     React.useEffect(function () {
       if (!window.monaco || !window.monaco.editor) return;
       // Debounced for the same reason the status-bar tally is: markers change
@@ -314,16 +315,11 @@ var ProblemsPanel = (function () {
     return React.createElement(
       'div',
       { className: 'ide-problems-drawer', style: { height: height + 'px' } },
-      React.createElement('div', {
-        className: 'ide-problems-resize',
-        title: 'Drag to resize',
-        onMouseDown: onResizeMouseDown
-      }),
       React.createElement(
         'div',
         { className: 'ide-problems-header' },
-        React.createElement('i', { className: 'fas fa-bug' }),
         React.createElement('span', { className: 'ide-problems-title' }, 'Problems'),
+        React.createElement('span', { className: 'ide-problems-total-pill' }, total + wsCounts.error + wsCounts.warning + wsCounts.info),
         // No prose summary: the severity chips below carry the same three
         // counts, and restating them was the longest thing in the header.
         React.createElement(
@@ -340,7 +336,7 @@ var ProblemsPanel = (function () {
               {
                 key: s.kind,
                 type: 'button',
-                className: 'ide-problems-sev-chip ide-problems-sev-' + s.kind + (on ? ' is-on' : ''),
+                className: 'ide-problems-sev-chip' + (on ? ' is-on' : ''),
                 title: (on ? 'Hide' : 'Show') + ' ' + SEVERITY_LABEL[s.kind].toLowerCase() + 's',
                 'aria-pressed': on ? 'true' : 'false',
                 onClick: function () { toggleSeverity(s.kind); }
@@ -350,19 +346,25 @@ var ProblemsPanel = (function () {
             );
           })
         ),
+        React.createElement('input', {
+          className: 'ide-problems-filter',
+          type: 'text',
+          placeholder: 'Filter…',
+          value: filter,
+          onChange: function (e) { setFilter(e.target.value); }
+        }),
         React.createElement(
           'div',
           { className: 'ide-problems-actions' },
           React.createElement('button', {
-            type: 'button', className: 'ide-problems-btn',
+            type: 'button', className: 'ide-icon-btn',
             disabled: !!running,
             title: 'Run rubocop over the whole workspace',
             onClick: function () { runRubocop('check'); }
           },
-            React.createElement('i', { className: running === 'check' ? 'fas fa-spinner fa-spin' : 'fas fa-play' }),
-            React.createElement('span', null, ' RuboCop')),
+            React.createElement('i', { className: running === 'check' ? 'fas fa-spinner fa-spin' : 'fas fa-play' })),
           React.createElement('button', {
-            type: 'button', className: 'ide-problems-btn',
+            type: 'button', className: 'ide-icon-btn',
             // Nothing to correct until a run says so, and rerunning `-a` on a
             // clean tree is a slow no-op.
             disabled: !!running || !workspace || !workspace.correctable,
@@ -373,28 +375,19 @@ var ProblemsPanel = (function () {
                 : 'Run RuboCop first',
             onClick: function () { runRubocop('autocorrect'); }
           },
-            React.createElement('i', { className: running === 'autocorrect' ? 'fas fa-spinner fa-spin' : 'fas fa-magic' }),
-            React.createElement('span', null, ' Fix')),
+            React.createElement('i', { className: running === 'autocorrect' ? 'fas fa-spinner fa-spin' : 'fas fa-magic' })),
           React.createElement('button', {
-            type: 'button', className: 'ide-problems-btn',
+            type: 'button', className: 'ide-icon-btn',
             disabled: !workspace || !(workspace.files || []).length,
             title: workspace && (workspace.files || []).length
               ? 'Open all ' + workspace.files.length + ' file(s) with offenses'
               : 'Run RuboCop first',
             onClick: openAllOffending
           },
-            React.createElement('i', { className: 'fas fa-folder-open' }),
-            React.createElement('span', null, ' Open all'))
+            React.createElement('i', { className: 'fas fa-folder-open' }))
         ),
-        React.createElement('input', {
-          className: 'ide-problems-filter',
-          type: 'text',
-          placeholder: 'Filter…',
-          value: filter,
-          onChange: function (e) { setFilter(e.target.value); }
-        }),
         React.createElement('button', {
-          type: 'button', className: 'ide-problems-btn',
+          type: 'button', className: 'ide-icon-btn',
           title: 'Close', onClick: onClose
         }, React.createElement('i', { className: 'fas fa-times' }))
       ),
@@ -412,13 +405,7 @@ var ProblemsPanel = (function () {
                   return React.createElement(
                     'div',
                     { className: 'ide-problems-file', key: 'ws:' + file.path },
-                    React.createElement(
-                      'div',
-                      { className: 'ide-problems-file-name' },
-                      React.createElement('i', { className: 'fas fa-gavel', 'aria-hidden': 'true' }),
-                      ' ' + file.path,
-                      React.createElement('span', { className: 'ide-problems-file-count' }, file.offenses.length)
-                    ),
+                    renderFileGroupHeader(file.path, file.offenses.length),
                     file.offenses.map(function (o, i) {
                       var kind = COP_SEVERITY_KIND[o.severity] || 'info';
                       return React.createElement(
@@ -502,12 +489,7 @@ var ProblemsPanel = (function () {
                 return React.createElement(
                   'div',
                   { className: 'ide-problems-file', key: entry.path },
-                  React.createElement(
-                    'div',
-                    { className: 'ide-problems-file-name' },
-                    entry.path,
-                    React.createElement('span', { className: 'ide-problems-file-count' }, entry.markers.length)
-                  ),
+                  renderFileGroupHeader(entry.path, entry.markers.length),
                   entry.markers.map(function (item, index) {
                     var marker = item.marker;
                     var kind = SEVERITY_KIND[marker.severity] || 'info';

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

@@ -65,10 +65,19 @@ function recentRanks() {
 // in — a typo'd or transposed query hits nothing literally, so an exact match
 // can never be demoted by loosening the index search.
 var FUZZY_ONLY = 4;
+
+// CamelCase -> snake_case, so a query like "ThemeController" ranks against
+// "theme_controller.rb" the same way "theme_controller" would. A no-op
+// (beyond lowercasing) for queries with no lower-to-upper transition, so
+// non-CamelCase ranking is unchanged.
+function toSnakeCase(q) {
+  return (q || '').replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase();
+}
+
 function getMatchRelevance(result, q) {
   if (!q) return FUZZY_ONLY;
   var name = (result.name || (result.path || '').split('/').pop() || '').toLowerCase();
-  var lq = q.toLowerCase();
+  var lq = toSnakeCase(q);
   if (name === lq)            return 0;
   if (name.slice(0, lq.length) === lq) return 1;
   if (name.indexOf(lq) >= 0)  return 2;
@@ -194,7 +203,17 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     // path in the workspace ran on every keystroke, between the keypress and
     // the character appearing.
     var timer = setTimeout(function () {
-      var filtered = rankResults(SearchService.searchFiles(query), query, showFolders);
+      var hits = SearchService.searchFiles(query);
+      // CamelCase query, e.g. "ThemeController": also search its snake_case
+      // form so it finds theme_controller.rb, whose index terms are snake_case.
+      var snake = toSnakeCase(query);
+      if (snake !== query.toLowerCase()) {
+        var seen = new Set(hits.map(function (r) { return r.path; }));
+        SearchService.searchFiles(snake).forEach(function (r) {
+          if (!seen.has(r.path)) { seen.add(r.path); hits.push(r); }
+        });
+      }
+      var filtered = rankResults(hits, query, showFolders);
       setResults(filtered.slice(0, 200));
       setSelectedIndex(0);
     }, 120);
@@ -291,7 +310,7 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     return React.createElement(
       'div',
       { className: 'quick-open-section' },
-      React.createElement('div', { className: 'quick-open-section-header' },
+      React.createElement('div', { className: 'quick-open-section-header quick-open-section-header-muted' },
         React.createElement('i', { className: 'fas fa-history', style: { marginRight: '6px', fontSize: '10px' } }),
         'Recent Searches'
       ),
@@ -303,6 +322,8 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     var recentFiles = (typeof TabManager !== 'undefined' && TabManager.getRecentFiles)
       ? TabManager.getRecentFiles() : [];
     if (recentFiles.length === 0) return null;
+    // No section header here (unlike Favourites/Recent Searches) — VS Code
+    // marks each row inline with a trailing "recently opened" label instead.
     var rows = recentFiles.map(function (entry) {
       var path = entry.path;
       var name = entry.name || (path.split('/').pop());
@@ -320,16 +341,13 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
           React.createElement('div', { className: 'quick-open-result-name' }, name),
           React.createElement('div', { className: 'quick-open-result-path' }, path)
         ),
+        React.createElement('span', { className: 'quick-open-recent-label' }, 'recently opened'),
         renderStarBtn(path)
       );
     });
     return React.createElement(
       'div',
       { className: 'quick-open-section' },
-      React.createElement('div', { className: 'quick-open-section-header' },
-        React.createElement('i', { className: 'fas fa-clock', style: { marginRight: '6px', fontSize: '10px' } }),
-        'Recently Opened'
-      ),
       rows
     );
   }
@@ -349,7 +367,7 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
           ref: inputRef,
           type: 'text',
           className: 'quick-open-input',
-          placeholder: 'Search files by name (Ctrl+P)…',
+          placeholder: 'Search files by name',
           value: query,
           onChange: function (e) { setQuery(e.target.value); },
           onKeyDown: handleKeyDown

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

@@ -0,0 +1,342 @@
+'use strict';
+
+// SettingsModal — the editor preferences screen, as a VS Code-style modal.
+// Owns the row catalogue (SETTINGS_ROWS) and the row renderer; MbeditorApp only
+// mounts it and hands over the prefs pair. Dismissable with ×, the backdrop, or
+// Escape.
+
+// Settings rows, in the order they render. `{ header: ... }` entries start a
+// section; everything else is a row descriptor consumed by renderSettingsRow.
+// Checkbox default: plain `!!value` unless `def: true` (default checked,
+// `value !== false`) or `strict: true` (`value === true`, used only where the
+// on-state must be exact). Number default: `value || def` unless `nullish: true`
+// (`value != null ? value : def`, needed so 0 is a valid stored value).
+var SETTINGS_ROWS = [
+  { header: 'Appearance' },
+  { key: 'theme', type: 'select', label: 'Theme', title: 'Color theme for the editor', def: 'vs-dark', options: [
+    ['vs-dark', 'Dark'], ['vs', 'Light'], ['hc-black', 'HC Dark'], ['hc-light', 'HC Light'],
+    ['dracula', 'Dracula'], ['night-owl', 'Night Owl'], ['monokai', 'Monokai'], ['nord', 'Nord'],
+    ['github-dark', 'GitHub Dark'], ['tomorrow-night', 'Tomorrow Night'], ['github-light', 'GitHub Light']
+  ] },
+  { key: 'glass', type: 'checkbox', label: 'Liquid Glass chrome', title: 'Translucent, blurred panels layered over the current theme. Monaco stays solid' },
+  { key: 'fontSize', type: 'number', label: 'Font size', title: 'Editor font size in pixels (8–32)', min: 8, max: 32, step: 1, def: 13 },
+  { key: 'fontFamily', type: 'text', label: 'Font family', title: 'Font stack used in the editor — the first font available on your system is used', def: "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace" },
+  { key: 'lineHeight', type: 'number', label: 'Line height (0=auto)', title: 'Row height in pixels. 0 = auto (roughly font size × 1.5)', min: 0, max: 100, step: 1, def: 0, nullish: true },
+  { key: 'letterSpacing', type: 'number', label: 'Letter spacing (px)', title: 'Extra space between characters in pixels. 0 = default', min: -5, max: 20, step: 0.5, parse: 'float', def: 0, nullish: true },
+
+  { header: 'Indentation' },
+  { key: 'tabSize', type: 'number', label: 'Tab size', title: 'Number of spaces per indentation level (also sets Prettier tab width)', min: 1, max: 8, step: 1, def: 4 },
+  { key: 'insertSpaces', type: 'checkbox', label: 'Use spaces', title: 'Insert spaces instead of tab characters when pressing Tab' },
+
+  { header: 'Editor' },
+  { key: 'wordWrap', type: 'select', label: 'Word wrap', title: 'How long lines are handled — Off: scroll horizontally, On: wrap at viewport width, Column: wrap at a fixed column', def: 'off', options: [
+    ['off', 'Off'], ['on', 'On'], ['wordWrapColumn', 'Column']
+  ] },
+  { key: 'lineNumbers', type: 'select', label: 'Line numbers', title: 'Show line numbers in the gutter — On, Off, or Relative (useful with Vim mode)', def: 'on', options: [
+    ['on', 'On'], ['off', 'Off'], ['relative', 'Relative']
+  ] },
+  { key: 'renderWhitespace', type: 'select', label: 'Whitespace', title: 'Render whitespace characters visually — None, Selection only, Boundary (leading/trailing), or All', def: 'none', options: [
+    ['none', 'None'], ['selection', 'Selection'], ['boundary', 'Boundary'], ['all', 'All']
+  ] },
+  { key: 'minimap', type: 'checkbox', label: 'Minimap', title: 'Show a scaled-down overview of the file on the right edge of the editor' },
+  { key: 'scrollBeyondLastLine', type: 'checkbox', label: 'Scroll past end', title: 'Allow scrolling past the last line so it can be positioned at the top of the viewport' },
+  { key: 'bracketPairColorization', type: 'checkbox', label: 'Bracket colors', title: 'Colorize matching bracket pairs with distinct colors to make nesting easier to read' },
+  { key: 'vimMode', type: 'checkbox', label: 'Vim mode', title: 'Enable Vim keybindings (Normal/Insert/Visual modes). Press Escape to return to Normal mode.' },
+  { key: 'autoClosingBrackets', type: 'select', label: 'Auto-close brackets', title: 'When to insert a matching closing bracket automatically', def: 'always', options: [
+    ['always', 'Always'], ['languageDefined', 'Per language rules'], ['beforeWhitespace', 'Only before whitespace'], ['never', 'Never']
+  ] },
+  { key: 'autoClosingQuotes', type: 'select', label: 'Auto-close quotes', title: 'When to insert a matching closing quote automatically', def: 'always', options: [
+    ['always', 'Always'], ['languageDefined', 'Per language rules'], ['beforeWhitespace', 'Only before whitespace'], ['never', 'Never']
+  ] },
+  { key: 'renderLineHighlight', type: 'select', label: 'Line highlight', title: 'What to highlight on the current editor line', def: 'none', options: [
+    ['none', 'None'], ['gutter', 'Line number only'], ['line', 'Current line background'], ['all', 'Line number + background']
+  ] },
+  { key: 'cursorStyle', type: 'select', label: 'Cursor style', title: 'Shape of the text cursor in the editor', def: 'line', options: [
+    ['line', 'Line (|)'], ['block', 'Block (filled)'], ['underline', 'Underline (_)'],
+    ['line-thin', 'Line thin'], ['block-outline', 'Block outline'], ['underline-thin', 'Underline thin']
+  ] },
+  { key: 'cursorBlinking', type: 'select', label: 'Cursor blinking', title: 'Cursor animation style — Blink (on/off), Smooth (fade), Phase (offset fade), Expand (grow), or Solid (no animation)', def: 'blink', options: [
+    ['blink', 'Blink (on/off)'], ['smooth', 'Smooth (fade)'], ['phase', 'Phase (offset fade)'],
+    ['expand', 'Expand (grow/shrink)'], ['solid', 'Solid (no blink)']
+  ] },
+  { key: 'folding', type: 'checkbox', label: 'Code folding', title: 'Show collapse arrows next to foldable regions (functions, classes, blocks)', def: true },
+  { key: 'smoothScrolling', type: 'checkbox', label: 'Smooth scrolling', title: 'Animate scrolling instead of jumping instantly' },
+  { key: 'mouseWheelZoom', type: 'checkbox', label: 'Ctrl+scroll to zoom', title: 'Hold Ctrl (or Cmd) and scroll the mouse wheel to zoom the font size' },
+
+  { header: 'Behaviour' },
+  { key: 'autoIndent', type: 'select', label: 'Auto indent', title: 'How aggressively the editor re-indents lines as you type', def: 'full', options: [
+    ['none', 'None (disabled)'], ['keep', 'Keep current level'], ['brackets', 'Indent on { and ['],
+    ['advanced', 'Language indent rules'], ['full', 'Full (language grammar)']
+  ] },
+  { key: 'acceptSuggestionOnEnter', type: 'select', label: 'Accept suggestion on Enter', title: 'Whether pressing Enter accepts the highlighted autocomplete suggestion', def: 'on', options: [
+    ['on', 'Always'], ['smart', 'Only when navigated (↑↓)'], ['off', 'Never (Tab only)']
+  ] },
+  { key: 'wordBasedSuggestions', type: 'select', label: 'Word-based suggestions', title: 'Suggest completions based on words already present in open files', def: 'matchingDocuments', options: [
+    ['off', 'Off'], ['currentDocument', 'Current file only'], ['matchingDocuments', 'Same language files'], ['allDocuments', 'All open files']
+  ] },
+  { key: 'formatOnType', type: 'checkbox', label: 'Format on type', title: 'Re-indent and auto-close blocks as you type (e.g. after pressing Enter inside {})', strict: true },
+  { key: 'formatOnSave', type: 'checkbox', label: 'Format on save', title: 'Format the file before every save — RuboCop -A for Ruby, Prettier for JS/JSX/CSS/HTML/Markdown', strict: true },
+  { key: 'quickSuggestions', type: 'checkbox', label: 'Quick suggestions', title: 'Show autocomplete suggestions while typing (not just on trigger characters like .)', def: true },
+
+  { header: 'Formatting' },
+  { key: 'prettierPrintWidth', type: 'number', label: 'Print width', title: 'Prettier: maximum line length before wrapping (40–200)', min: 40, max: 200, step: 1, def: 80, nullish: true },
+  { key: 'prettierTrailingComma', type: 'select', label: 'Trailing commas', title: 'Prettier: add trailing commas in multi-line expressions — All (ES2017+), ES5 (objects/arrays only), or None', def: 'all', options: [
+    ['all', 'All'], ['es5', 'ES5'], ['none', 'None']
+  ] },
+  { key: 'prettierSemi', type: 'checkbox', label: 'Semicolons', title: 'Prettier: add semicolons at the end of statements', def: true },
+  { key: 'prettierSingleQuote', type: 'checkbox', label: 'Single quotes', title: 'Prettier: use single quotes instead of double quotes for strings' },
+  { key: 'prettierBracketSpacing', type: 'checkbox', label: 'Bracket spacing', title: 'Prettier: add spaces inside object literal braces, e.g. { a: 1 } vs {a: 1}', def: true },
+
+  { header: 'Interface' },
+  { key: 'autoRevealInExplorer', type: 'checkbox', label: 'Explorer follows active file', title: 'Automatically scroll the file explorer to reveal and highlight the file you are editing' },
+  { key: 'fileTreeTypeahead', type: 'checkbox', label: 'Explorer type-ahead', title: 'Jump to a file in the explorer by typing its name when the sidebar is focused', def: true },
+  { key: 'showDotFiles', type: 'checkbox', label: 'Show dotfiles', title: 'Show hidden files and directories (those starting with a dot, e.g. .env, .gitignore) in the file explorer' },
+  { key: 'tabDisplayMode', type: 'select', label: 'Tab bar layout', title: 'Scroll: tabs overflow horizontally with a scrollbar; Wrap: tabs flow onto multiple rows', def: 'scroll', options: [
+    ['scroll', 'Scroll'], ['wrap', 'Wrap (multi-row)']
+  ] },
+  { key: 'quickOpenShowFolders', type: 'checkbox', label: 'Quick Open: show folders', title: 'Include folder names in the Quick Open picker (Ctrl+P / Cmd+P) results, not just files' },
+  // The stored preference, not the derived value: at a narrow width labels are
+  // dropped regardless, and the box must not appear to do nothing.
+  { key: 'toolbarLabels', type: 'checkbox', label: 'Toolbar: show labels', title: 'Show a text label beside each toolbar icon. Every button already names itself on hover' },
+  { key: 'persistFindState', type: 'checkbox', label: 'Persist find state across files', title: 'Keep the search/replace text when switching between files in the editor', def: true },
+  { key: 'branchStateRestore', type: 'checkbox', label: 'Restore tabs on branch switch', title: 'Save which files are open per branch and restore them when switching branches. Disable to always start with a clean slate when switching.', def: true },
+  { key: 'routeHints', type: 'checkbox', label: 'Controller route hints', title: 'Show the verb and path that route to each controller action after its def line, and mark public actions nothing routes to', def: true },
+
+  { header: 'RuboCop' },
+  { key: 'rubocopLintEnabled', type: 'checkbox', label: 'Enable RuboCop linting', title: 'Run RuboCop in the background and show lint warnings/errors as markers in the editor gutter', def: true },
+
+  { header: 'Diagnostics' },
+  { key: 'auditLog', type: 'checkbox', label: 'Record audit log', title: 'Record a numbers-only trace of editor activity you can download and hand to an AI to analyse. It never contains code, file names, URLs or host paths.', def: true },
+  // Lazy references: the handlers are declared in MbeditorApp.js, which loads
+  // after this file in the shared IIFE.
+  { key: 'auditLogDownload', type: 'button', label: 'Download log', action: 'Download', title: 'Save the recorded trace as a JSON file to hand to an AI. It carries numbers only — no code, file names, URLs or host paths', onClick: function () { downloadAuditLog(); } },
+  { key: 'auditLogClear', type: 'button', label: 'Clear log', action: 'Clear', title: 'Discard everything recorded so far, so the next download is a clean trace', onClick: function () { clearAuditLog(); } }
+];
+
+function setEditorPref(setEditorPrefs, key, value) {
+  setEditorPrefs(function(p) {
+    var next = Object.assign({}, p);
+    next[key] = value;
+    return next;
+  });
+}
+
+// Label + description line, then the control. The checkbox is the exception:
+// it sits inline before the label, with the description under both.
+function settingsRowText(desc) {
+  return [
+    React.createElement('span', { className: 'ide-settings-label', key: 'l' }, desc.label),
+    desc.title ? React.createElement('span', { className: 'ide-settings-desc', key: 'd' }, desc.title) : null
+  ];
+}
+
+function renderSettingsRow(desc, editorPrefs, setEditorPrefs) {
+  var raw = editorPrefs[desc.key];
+  function set(v) { setEditorPref(setEditorPrefs, desc.key, v); }
+
+  if (desc.type === 'checkbox') {
+    var checked = desc.strict ? raw === true : (desc.def === true ? raw !== false : !!raw);
+    return React.createElement(
+      'label', { className: 'ide-settings-row ide-settings-row-check', key: desc.key },
+      React.createElement('input', {
+        type: 'checkbox',
+        className: 'ide-settings-checkbox',
+        checked: checked,
+        onChange: function(e) { set(e.target.checked); }
+      }),
+      settingsRowText(desc)
+    );
+  }
+
+  if (desc.type === 'button') {
+    return React.createElement(
+      'div', { className: 'ide-settings-row', key: desc.key },
+      settingsRowText(desc),
+      React.createElement('button', {
+        type: 'button', className: 'ide-settings-reset-btn', onClick: desc.onClick
+      }, desc.action)
+    );
+  }
+
+  var control = null;
+  if (desc.type === 'select') {
+    control = React.createElement(
+      'select', {
+        className: 'ide-settings-input',
+        value: raw || desc.def,
+        onChange: function(e) { set(e.target.value); }
+      },
+      desc.options.map(function(opt) {
+        return React.createElement('option', { value: opt[0], key: opt[0] }, opt[1]);
+      })
+    );
+  } else if (desc.type === 'number') {
+    var val = desc.nullish ? (raw != null ? raw : desc.def) : (raw || desc.def);
+    var parse = function(e) { return desc.parse === 'float' ? parseFloat(e.target.value) : parseInt(e.target.value, 10); };
+    control = React.createElement('input', {
+      key: String(val),
+      type: 'number', min: String(desc.min), max: String(desc.max), step: String(desc.step),
+      className: 'ide-settings-input ide-settings-input-number',
+      defaultValue: val,
+      onChange: function(e) {
+        var v = parse(e);
+        if (!isNaN(v) && v >= desc.min && v <= desc.max) set(v);
+      },
+      onBlur: function(e) {
+        var v = parse(e);
+        if (isNaN(v) || v < desc.min || v > desc.max) e.target.value = String(val);
+      }
+    });
+  } else if (desc.type === 'text') {
+    control = React.createElement('input', {
+      type: 'text',
+      className: 'ide-settings-input ide-settings-input-wide',
+      value: raw || desc.def,
+      onChange: function(e) { set(e.target.value); }
+    });
+  } else {
+    return null;
+  }
+
+  return React.createElement(
+    'label', { className: 'ide-settings-row', key: desc.key },
+    settingsRowText(desc), control
+  );
+}
+
+// Flat SETTINGS_ROWS → [{ name, rows }], split on the `{ header }` entries.
+function settingsSections(rows) {
+  var out = [];
+  var cur = null;
+  rows.forEach(function(d) {
+    if (d.header) { cur = { name: d.header, rows: [] }; out.push(cur); }
+    else if (cur) cur.rows.push(d);
+  });
+  return out;
+}
+
+var SETTINGS_SECTIONS = settingsSections(SETTINGS_ROWS);
+
+var SettingsModal = function SettingsModal(props) {
+  var _React = React;
+  var useState = _React.useState;
+  var useEffect = _React.useEffect;
+  var useRef = _React.useRef;
+
+  var onClose = props.onClose;
+  var editorPrefs = props.editorPrefs;
+  var setEditorPrefs = props.setEditorPrefs;
+
+  var _q = useState('');
+  var query = _q[0];
+  var setQuery = _q[1];
+
+  var sections = SETTINGS_SECTIONS;
+  var _as = useState(sections[0] ? sections[0].name : null);
+  var activeSection = _as[0];
+  var setActiveSection = _as[1];
+
+  var sectionRefs = useRef({});
+
+  useEffect(function() {
+    function onKeyDown(e) { if (e.key === 'Escape') onClose(); }
+    window.addEventListener('keydown', onKeyDown);
+    return function() { window.removeEventListener('keydown', onKeyDown); };
+  }, [onClose]);
+
+  var q = query.trim().toLowerCase();
+  var visible = sections.map(function(s) {
+    if (!q) return s;
+    return {
+      name: s.name,
+      rows: s.rows.filter(function(d) {
+        return (d.label || '').toLowerCase().indexOf(q) !== -1 ||
+               (d.title || '').toLowerCase().indexOf(q) !== -1;
+      })
+    };
+  }).filter(function(s) { return s.rows.length > 0; });
+
+  return React.createElement(
+    'div',
+    { className: 'ide-settings-overlay', onClick: onClose },
+    React.createElement(
+      'div',
+      { className: 'ide-settings-modal', onClick: function(e) { e.stopPropagation(); } },
+      React.createElement(
+        'div', { className: 'ide-settings-modal-header' },
+        React.createElement('span', { className: 'ide-settings-modal-title' }, 'Settings'),
+        React.createElement('input', {
+          type: 'search',
+          className: 'ide-settings-search',
+          placeholder: 'Search settings',
+          autoFocus: true,
+          value: query,
+          onChange: function(e) { setQuery(e.target.value); }
+        }),
+        React.createElement('button', {
+          type: 'button', className: 'ide-settings-modal-close', title: 'Close', 'aria-label': 'Close settings', onClick: onClose
+        }, React.createElement('i', { className: 'fas fa-times', 'aria-hidden': 'true' }))
+      ),
+      React.createElement(
+        'div', { className: 'ide-settings-modal-body' },
+        React.createElement(
+          'nav', { className: 'ide-settings-nav' },
+          visible.map(function(s) {
+            return React.createElement('button', {
+              type: 'button',
+              key: s.name,
+              className: 'ide-settings-nav-item' + (s.name === activeSection ? ' active' : ''),
+              onClick: function() {
+                setActiveSection(s.name);
+                var el = sectionRefs.current[s.name];
+                if (el && el.scrollIntoView) el.scrollIntoView({ block: 'start' });
+              }
+            }, s.name);
+          })
+        ),
+        React.createElement(
+          'div', { className: 'ide-settings-body' },
+          visible.map(function(s) {
+            return React.createElement(
+              'section', { className: 'ide-settings-section', key: s.name,
+                ref: function(el) { sectionRefs.current[s.name] = el; } },
+              React.createElement('h3', { className: 'ide-settings-section-header' }, s.name),
+              s.rows.map(function(d) { return renderSettingsRow(d, editorPrefs, setEditorPrefs); }),
+              s.name === 'RuboCop' && props.rubocopAvailable && props.rubocopConfigPath
+                ? React.createElement(
+                    'div', { className: 'ide-settings-row' },
+                    React.createElement('span', { className: 'ide-settings-label' }, 'Config file'),
+                    React.createElement(
+                      'button', {
+                        type: 'button',
+                        className: 'ide-settings-config-link',
+                        title: 'Open ' + props.rubocopConfigPath,
+                        onClick: function() { props.onOpenRubocopConfig(); onClose(); }
+                      },
+                      React.createElement('i', { className: 'fas fa-file-alt', style: { marginRight: 5 } }),
+                      props.rubocopConfigPath
+                    )
+                  )
+                : null
+            );
+          }),
+          visible.length === 0
+            ? React.createElement('div', { className: 'ide-settings-empty' }, 'No settings match "' + query + '".')
+            : null,
+          React.createElement(
+            'button', {
+              className: 'ide-settings-reset-btn',
+              type: 'button',
+              title: 'Restore every editor preference on this page to its default',
+              onClick: props.onReset
+            },
+            React.createElement('i', { className: 'fas fa-undo', style: { marginRight: 6 } }),
+            'Reset to defaults'
+          )
+        )
+      )
+    )
+  );
+};
+
+window.SettingsModal = SettingsModal;

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

@@ -102,7 +102,8 @@ var ShortcutHelp = function ShortcutHelp(_ref) {
                   'tbody',
                   null,
                   React.createElement(Row, { keys: 'Ctrl+P', desc: 'Quick-open any file by name' }),
-                  React.createElement(Row, { keys: 'PgUp/PgDn', desc: 'Cycle between cursor position and last jump origin' }),
+                  React.createElement(Row, { keys: 'PgUp', desc: 'Navigate back through cursor history (across files)' }),
+                  React.createElement(Row, { keys: 'PgDn', desc: 'Navigate forward through cursor history' }),
                   React.createElement(Row, { keys: 'Ctrl+S', desc: 'Save the active file' }),
                   React.createElement(Row, { keys: 'Ctrl+Shift+G', desc: 'Toggle git panel' }),
                   React.createElement(Row, { keys: 'Ctrl+Shift+L', desc: 'Toggle Rails log panel' }),
@@ -181,6 +182,22 @@ var ShortcutHelp = function ShortcutHelp(_ref) {
                   ]
                 }
               )
+            ),
+
+            React.createElement(
+              Section,
+              { title: 'Sharing code with a chat assistant' },
+              React.createElement(
+                Tips,
+                {
+                  items: [
+                    'Combined View: Ctrl/Cmd-click several files or folders, right-click, "Open in Combined View" — every file on one page with Copy and Download',
+                    'Pick methods: in Combined View, tick methods under a Ruby file to send only those; "Download .md" / "Copy .md" bundles everything into one attachment',
+                    'Paste & Place: right-click inside a Ruby file (or F1) → "Paste & Place Ruby Method...", paste the reply, "Find placement", check the diff, "Apply to editor" — then save; Ctrl+Z undoes',
+                    'Upload compare: drop or upload a file over an existing one and click "Compare" to see the diff before choosing Skip / Keep both / Overwrite'
+                  ]
+                }
+              )
             )
           )
         )