reslop 0.2.6 → 0.2.7

package/lib/render/chrome.js

@@ -4,6 +4,8 @@ const ansi = require('../ansi.js');
 const keys = require('../keys.js');
 const files = require('../files.js');
 const primitives = require('./primitives.js');
+const blocks = require('./dash-blocks.js');
+const { npmStatus } = blocks;
 
 const { itemPath, REPO_TASKS_LABEL, isTasksEntry, fileTotals } = files;
 const { ACTION_IDS, actionLetter } = keys;
@@ -12,10 +14,15 @@ const { FILES_HIDDEN, FILES_GIT_DISABLED, BRANCHES_DISABLED } = keys;
 const { COMMITS_DISABLED, TASKS_DISABLED, DIFF_DISABLED, UNIT_DISABLED } = keys;
 const { NPM_DISABLED } = keys;
 const { diffGitDisabled, branchGitDisabled, commitGitDisabled } = keys;
+const { entryHasDiff, lineHasDiff, withoutMoves } = keys;
 const { CONFIRM, confirmPrefix, promptFromChoices } = keys;
 const { THEME, paint, visibleWidth } = ansi;
 const { truncateVisible, fg, RESET, EL, seq } = ansi;
 const { fill, branchLabel, isTaskView } = primitives;
+const searchPaint = require('./search.js');
+const { paintPathText } = searchPaint;
+const locate = require('../find.js');
+const { activeHit, spansFor, fileMatches } = locate;
 
 const WAVE = '·•●•·';
 const BUSY_BAR = Array.from(WAVE, (_, frame) => {
@@ -57,6 +64,7 @@ const INFO_STATUS = [
   'dropped',
   'already staged',
   'read only',
+  'transitive',
   'nothing to review',
   'nothing to commit',
   'unified',
@@ -112,7 +120,6 @@ const BUTTON_LEAD = ' ';
 const BUTTON_GAP = '  ';
 const BUTTON_EDGE = 1;
 const BACK_ARROW = '🢐';
-const STOP_MARK = '⊗';
 const BACK_KEY = 'esc';
 
 const BUTTON_MARK = {
@@ -160,8 +167,10 @@ const headerScreen = (view) => {
   const { pane } = view;
   if (
     pane === 'dashboard' ||
+    pane === 'repos' ||
     pane === 'branches' ||
     pane === 'npm' ||
+    pane === 'packages' ||
     pane === 'tasks'
   ) {
     return pane;
@@ -205,44 +214,74 @@ const headerText = (view) => {
   return `${piecesText(pieces)}${label}`;
 };
 
+const headerFind = (view, label, clipped) => {
+  const query = view.find && view.find.query ? view.find.query : '';
+  const target = headerTarget(view);
+  if (!query || label !== target || !label) return [];
+  const hit = activeHit(view.files ?? [], view.find);
+  return spansFor(clipped, label, query, hit);
+};
+
+const paintHeaderRoles = (pieces) => {
+  let out = `${seq(THEME.headerChromeFg, THEME.headerBg)}${EL}`;
+  for (const piece of pieces) {
+    out += `${fg(HEADER_ROLE_FG[piece.role])}${piece.text}`;
+  }
+  return out;
+};
+
+const paintHeaderHits = (clipped, spans, color) => {
+  let out = '';
+  let offset = 0;
+  for (const seg of pathSegments(clipped)) {
+    const local = [];
+    const end = offset + seg.text.length;
+    for (const span of spans) {
+      const start = Math.max(span.start, offset);
+      const stop = Math.min(span.end, end);
+      if (start >= stop) continue;
+      local.push({
+        start: start - offset,
+        end: stop - offset,
+        on: span.on === true,
+      });
+    }
+    const roleFg = HEADER_ROLE_FG[seg.role];
+    out += paintPathText(seg.text, roleFg, THEME.headerBg, color, false, local);
+    offset = end;
+  }
+  return out;
+};
+
 const paintHeader = (view, width, color) => {
   const { pieces, label } = headerLead(view);
   const right = ' ';
   const used = visibleWidth(piecesText(pieces)) + visibleWidth(right);
   const room = Math.max(0, width - used);
   const clipped = truncateVisible(label, room);
-  const pad = Math.max(0, room - visibleWidth(clipped));
-  pieces.push(...pathSegments(clipped));
-  if (pad) pieces.push({ text: ' '.repeat(pad), role: 'chrome' });
-  pieces.push({ text: right, role: 'chrome' });
-  if (!color) return piecesText(pieces);
-  let out = `${seq(THEME.headerChromeFg, THEME.headerBg)}${EL}`;
-  for (const piece of pieces) {
-    out += `${fg(HEADER_ROLE_FG[piece.role])}${piece.text}`;
+  const pad = ' '.repeat(Math.max(0, room - visibleWidth(clipped)));
+  const spans = headerFind(view, label, clipped);
+  if (!color || !spans.length) {
+    pieces.push(...pathSegments(clipped));
+    if (pad) pieces.push({ text: pad, role: 'chrome' });
+    pieces.push({ text: right, role: 'chrome' });
+    if (!color) return piecesText(pieces);
+    return `${paintHeaderRoles(pieces)}${RESET}`;
   }
+  let out = paintHeaderRoles(pieces);
+  out += paintHeaderHits(clipped, spans, color);
+  out += `${fg(HEADER_ROLE_FG.chrome)}${pad}${right}`;
   return `${out}${RESET}`;
 };
 
-const backFooterId = (view) => {
-  const { pane } = view;
-  if (pane === 'branches' || pane === 'commits' || pane === 'tasks') {
-    return 'back';
-  }
-  if (pane === 'npm') return view.npmView ? 'npmStop' : 'back';
-  return isTaskView(view) ? 'back' : '';
-};
+const backFooterId = (view) =>
+  view.pane === 'npm' && view.npmView ? 'npmStop' : 'back';
 
-const backHintMark = (view) => {
-  if (view.pane === 'npm' && view.npmView && view.npmRunning) return STOP_MARK;
-  return BACK_ARROW;
-};
+const backHintMark = () => BACK_ARROW;
 
 const buttonGap = (index) => (index ? BUTTON_GAP : BUTTON_LEAD);
 
-const hintBody = (mark) => {
-  const gap = mark === STOP_MARK ? ' ' : '';
-  return `${mark}${gap}${BACK_KEY}`;
-};
+const hintBody = (mark) => `${mark}${BACK_KEY}`;
 
 const buttonLabel = (id, short) => (short ? actionLetter(id) : buttonWord(id));
 
@@ -266,38 +305,125 @@ const paintMarkedWord = (label, letter, color, mark) => {
   return out + paint(after, mark.fgRgb, mark.bgRgb, color);
 };
 
-const footerIds = (hidden, extra, backId) => {
+const footerIds = (hidden, extra, backId, globals, tail, after) => {
   const ids = backId ? [backId] : [];
-  for (const add of extra) {
-    if (!ids.includes(add)) ids.push(add);
-  }
-  for (const id of ACTION_IDS) {
-    if (id === 'quit' || hidden.includes(id) || ids.includes(id)) continue;
-    ids.push(id);
+  const push = (id) => {
+    if (!ids.includes(id)) ids.push(id);
+  };
+  for (const add of extra) push(add);
+  for (const id of globals) push(id);
+  if (tail) {
+    for (const id of ACTION_IDS) {
+      if (id === 'quit' || hidden.includes(id) || ids.includes(id)) continue;
+      ids.push(id);
+    }
   }
+  for (const id of after) push(id);
   return ids;
 };
 
+const buttonPiece = (id, index, short, backId, mark) => {
+  const back = id === backId;
+  const letter = back ? BACK_KEY : actionLetter(id);
+  const label = back ? hintBody(mark) : buttonLabel(id, short);
+  const gap = buttonGap(index);
+  return {
+    id,
+    piece: `${gap}${label}`,
+    gap,
+    letter,
+    label,
+    back,
+    mark: back ? mark : '',
+  };
+};
+
+const packGroup = (ids, short, start, backId, mark) => {
+  const parts = [];
+  for (let i = 0; i < ids.length; i++) {
+    parts.push(buttonPiece(ids[i], start + i, short, backId, mark));
+  }
+  return parts;
+};
+
+const groupWidth = (parts) => {
+  let width = 0;
+  for (const part of parts) width += visibleWidth(part.piece);
+  return width;
+};
+
+const placeGroup = (parts, hits, disabled, x) => {
+  const placed = [];
+  let cursor = x;
+  for (const part of parts) {
+    const w = visibleWidth(part.piece);
+    const off = disabled.includes(part.id);
+    if (!off) hits.push({ id: part.id, x0: cursor, x1: cursor + w });
+    placed.push({ ...part, disabled: off });
+    cursor += w;
+  }
+  return { placed, cursor };
+};
+
+const splitFooter = (ids, options, limit) => {
+  const { disabled = [], backId = '', mark = BACK_ARROW } = options;
+  const { globals = [], after = [] } = options;
+  const rightIds = [];
+  for (const id of [...globals, ...after]) {
+    if (ids.includes(id) && !rightIds.includes(id)) rightIds.push(id);
+  }
+  const leftIds = ids.filter((id) => !rightIds.includes(id));
+  const pack = (leftShort, rightShort) => {
+    const left = packGroup(leftIds, leftShort, 0, backId, mark);
+    const start = left.length ? 1 : 0;
+    const right = packGroup(rightIds, rightShort, start, backId, mark);
+    return { left, right };
+  };
+  const wide = (packed) =>
+    groupWidth(packed.left) + groupWidth(packed.right) > limit;
+  let packed = pack(false, false);
+  if (wide(packed)) packed = pack(false, true);
+  if (wide(packed)) packed = pack(true, true);
+  const left = packed.left.slice();
+  const right = packed.right.slice();
+  while (groupWidth(left) + groupWidth(right) > limit && left.length) {
+    left.pop();
+  }
+  while (groupWidth(left) + groupWidth(right) > limit && right.length) {
+    right.pop();
+  }
+  const hits = [];
+  const leftPlace = placeGroup(left, hits, disabled, 0);
+  const parts = leftPlace.placed;
+  let x = leftPlace.cursor;
+  const gap = Math.max(0, limit - x - groupWidth(right));
+  if (gap && right.length) {
+    parts.push({ spacer: true, piece: ' '.repeat(gap) });
+    x += gap;
+  }
+  const rightPlace = placeGroup(right, hits, disabled, x);
+  parts.push(...rightPlace.placed);
+  return { hits, parts };
+};
+
 const layoutButtons = (width, options = {}) => {
   const { compact = false, hidden = [], extra = [], disabled = [] } = options;
-  const { backId = '', mark = BACK_ARROW } = options;
-  const ids = footerIds(hidden, extra, backId);
+  const { backId = '', mark = BACK_ARROW, globals = [] } = options;
+  const { tail = true, after = [] } = options;
+  const ids = footerIds(hidden, extra, backId, globals, tail, after);
   const limit = Math.max(0, width - BUTTON_EDGE);
+  if (globals.length) return splitFooter(ids, options, limit);
   const build = (short) => {
     const hits = [];
     const parts = [];
     let x = 0;
     for (const id of ids) {
-      const back = id === backId;
-      const letter = back ? BACK_KEY : actionLetter(id);
-      const label = back ? hintBody(mark) : buttonLabel(id, short);
-      const piece = `${buttonGap(parts.length)}${label}`;
-      const w = visibleWidth(piece);
+      const part = buttonPiece(id, parts.length, short, backId, mark);
+      const w = visibleWidth(part.piece);
       if (x + w > limit && parts.length) break;
       const off = disabled.includes(id);
       if (!off) hits.push({ id, x0: x, x1: x + w });
-      const hint = back ? mark : '';
-      parts.push({ id, piece, letter, label, disabled: off, back, mark: hint });
+      parts.push({ ...part, disabled: off });
       x += w;
     }
     return { hits, parts };
@@ -315,7 +441,13 @@ const paintButtons = (layout, width, color) => {
   let used = 0;
   for (let i = 0; i < layout.parts.length; i++) {
     const part = layout.parts[i];
-    out += paint(buttonGap(i), fgRgb, bgRgb, color);
+    if (part.spacer) {
+      out += paint(part.piece, fgRgb, bgRgb, color);
+      used += visibleWidth(part.piece);
+      continue;
+    }
+    const gap = part.gap ?? buttonGap(i);
+    out += paint(gap, fgRgb, bgRgb, color);
     if (part.back) out += paintBackHint(color, part.mark);
     else if (part.disabled) out += paint(part.label, fgRgb, bgRgb, color);
     else out += paintMarkedWord(part.label, part.letter, color, BUTTON_MARK);
@@ -339,13 +471,19 @@ const isWorktree = (view) =>
   countsKind(view.sourceKind, view.revShort) === 'worktree';
 
 const notesLine = (counts) => {
-  const feedback = counts.feedback ?? 0;
-  const tasks = counts.tasks ?? 0;
-  const code = counts.code ?? 0;
-  return `feedback ${feedback}  tasks ${tasks}  code ${code}`;
+  const done = counts.tasksDone ?? 0;
+  const total = counts.tasks ?? 0;
+  return `tasks ${done}/${total}`;
 };
 
 const statusLead = (view) => {
+  if (view.pane === 'repos') {
+    const tiles = view.repos && view.repos.tiles ? view.repos.tiles : [];
+    const count = tiles.length;
+    if (!count) return 'repos';
+    const at = (view.repos.cursor ?? 0) + 1;
+    return `${at}/${count}`;
+  }
   const counts = view.counts ?? {};
   const kind = countsKind(view.sourceKind, view.revShort);
   if (kind === 'worktree') return branchLabel(view.branch);
@@ -356,8 +494,13 @@ const statusLead = (view) => {
   return `${kind} ${label}  ${counts.pr ?? 0}`;
 };
 
-const statusLeft = (view) =>
-  ` ${joinStatus([statusLead(view), notesLine(view.counts ?? {})])}`;
+const STATUS_QUIET = new Set(['npm', 'packages', 'branches']);
+
+const statusLeft = (view) => {
+  if (view.pane === 'repos') return ` ${statusLead(view)}`;
+  const notes = STATUS_QUIET.has(view.pane) ? '' : notesLine(view.counts ?? {});
+  return ` ${joinStatus([statusLead(view), notes])}`;
+};
 
 const statusDelta = (total) => {
   const stagedAdd = total.stagedAdded ?? 0;
@@ -372,6 +515,8 @@ const statusDelta = (total) => {
   return `${plus}  ${minus}`;
 };
 
+const DIFF_QUIET = new Set(['npm', 'packages', 'tasks', 'branches']);
+
 const statusStats = (view) => {
   const counts = view.counts ?? {};
   const staged = counts.staged ?? 0;
@@ -380,7 +525,10 @@ const statusStats = (view) => {
     total.remaining || total.staged || total.added || total.removed;
   const n = hasGit ? total.staged : staged;
   const m = hasGit ? total.remaining : staged + (counts.unstaged ?? 0);
-  return joinStatus([view.npmLogs, statusDelta(total), `${n}/${m}`]);
+  const delta = DIFF_QUIET.has(view.pane) ? '' : statusDelta(total);
+  const ratio = STATUS_QUIET.has(view.pane) ? '' : `${n}/${m}`;
+  const packages = view.pane === 'packages' ? npmStatus(view.packages) : '';
+  return joinStatus([view.npmLogs, delta, ratio, packages]);
 };
 
 const statusLayout = (view, status, width) => {
@@ -491,7 +639,26 @@ const paintFooter = (view, layout, width, color) => {
 
 const footerHits = (view, layout) => (commitSaveHint(view) ? [] : layout.hits);
 
+const paintFindStatus = (view, width, color) => {
+  const query = view.find.query ?? '';
+  const hits = fileMatches(view.files ?? [], query);
+  const miss = query.length > 0 && hits.length === 0;
+  const lead = ' /';
+  const caret = 1;
+  const room = Math.max(0, width - lead.length - caret);
+  const shown = truncateVisible(query, room);
+  const pad = Math.max(0, width - lead.length - visibleWidth(shown) - caret);
+  if (!color) return `${lead}${shown}${' '.repeat(caret + pad)}`;
+  const bgRgb = THEME.chromeBg;
+  const tone = miss ? THEME.errorFg : THEME.chromeFg;
+  let out = paint(lead, THEME.warnFg, bgRgb, color, true);
+  out += paint(shown, tone, bgRgb, color);
+  out += paint(' ', THEME.searchOnFg, THEME.searchOnBg, color);
+  return out + fill(pad, THEME.mutedFg, bgRgb, color);
+};
+
 const paintStatusLine = (view, status, width, color) => {
+  if (view.find) return paintFindStatus(view, width, color);
   const confirm = CONFIRM[view.mode];
   if (confirm) {
     const prefix = confirmPrefix(confirm, view);
@@ -524,7 +691,7 @@ const statusChoiceHits = (view, y) => {
 };
 
 const statusBranchHit = (view, width, y) => {
-  if (CONFIRM[view.mode]) return null;
+  if (view.find || CONFIRM[view.mode]) return null;
   const name = branchLabel(view.branch);
   if (!name || !isWorktree(view)) return null;
   const layout = statusLayout(view, view.status ?? '', width);
@@ -537,7 +704,7 @@ const withHidden = (ids, more) => [...ids, ...more];
 
 const hiddenActions = (view) => {
   const { pane } = view;
-  if (pane === 'dashboard') return DASH_HIDDEN;
+  if (pane === 'dashboard' || pane === 'repos') return DASH_HIDDEN;
   if (pane === 'files') return FILES_HIDDEN;
   if (pane === 'unit') return withHidden(UNIT_DISABLED, ['feedback', 'tasks']);
   if (pane === 'branches') return BRANCHES_DISABLED;
@@ -552,9 +719,18 @@ const hiddenActions = (view) => {
 const dimFooterActions = (view) => {
   const pane = view.pane ?? 'diff';
   if (pane === 'files') {
-    return isTasksEntry(selectedFile(view)) ? FILES_GIT_DISABLED : [];
+    const entry = selectedFile(view);
+    if (isTasksEntry(entry)) return FILES_GIT_DISABLED;
+    return withoutMoves([], entryHasDiff(entry));
   }
-  if (pane === 'diff' || pane === 'unit') return diffGitDisabled(view.item);
+  if (pane === 'unit') {
+    const off = [...diffGitDisabled(view.item)];
+    const lines = view.unitLines;
+    if (!lines || !lines.length) return off;
+    const line = lines[view.unitLine ?? 0];
+    return withoutMoves(off, lineHasDiff(line));
+  }
+  if (pane === 'diff') return diffGitDisabled(view.item);
   if (pane === 'branches') return branchGitDisabled(selectedBranch(view));
   if (pane === 'commits') {
     return commitGitDisabled({
@@ -563,46 +739,46 @@ const dimFooterActions = (view) => {
       unstagedCurrent: !view.rev && !view.revShort,
     });
   }
+  if (pane === 'packages') {
+    const listed = view.packages && view.packages.modules;
+    const rows = listed && listed.packages ? listed.packages : [];
+    const cursor = view.packagesCursor ?? 0;
+    const onRow = rows.length > 0 && cursor < rows.length;
+    if (!onRow) return ['packageDrop', 'packageWanted', 'packageLatest'];
+    if (rows[cursor] && rows[cursor].transitive) {
+      return ['packageNew', 'packageDrop'];
+    }
+    return [];
+  }
   if (pane !== 'npm') return [];
   if (view.npmView) return view.npmRunning ? ['npmRerun'] : [];
   return view.npmLogs ? [] : ['npmLogs'];
 };
 
-const navExcept = (skip) => DASH_IDS.filter((id) => !skip.includes(id));
+const GIT_FOOTER = ['add', 'unstage', 'revert', 'ignore'];
 
 const extraFooterActions = (view) => {
   const { pane } = view;
-  if (pane === 'dashboard') return DASH_IDS;
+  if (pane === 'repos') return ['theme'];
+  if (pane === 'dashboard') return ['theme', 'pull', 'push'];
+  if (pane === 'unit') return ['add', 'unstage', 'revert', 'feedback', 'code'];
+  if (pane === 'files') return [...GIT_FOOTER, 'code'];
+  if (pane === 'diff') return [...GIT_FOOTER, 'feedback', 'code', 'layout'];
   if (pane === 'branches') {
-    return [
-      ...navExcept(['dashNpm']),
-      'newBranch',
-      'rebase',
-      'drop',
-      'pull',
-      'push',
-    ];
+    return ['newBranch', 'rebase', 'drop', 'pull', 'push'];
   }
   if (pane === 'commits') {
-    return [
-      ...navExcept(['dashCommits']),
-      'commit',
-      'amend',
-      'apply',
-      'reword',
-      'fixup',
-      'drop',
-      'view',
-    ];
+    return ['newCommit', 'apply', 'reword', 'drop', 'view', 'pull', 'push'];
   }
   if (pane === 'npm') {
-    if (view.npmView) {
-      return [...navExcept(['dashRun']), 'npmVerbose', 'npmRerun'];
-    }
-    return [...DASH_IDS, 'npmEdit', 'npmNew', 'npmDrop', 'npmLogs'];
+    if (view.npmView) return ['npmVerbose', 'npmRerun'];
+    return ['npmEdit', 'npmNew', 'npmDrop', 'npmLogs'];
+  }
+  if (pane === 'packages') {
+    return ['packageNew', 'packageDrop', 'packageWanted', 'packageLatest'];
   }
-  if (pane === 'tasks' || isTaskView(view)) return [...DASH_IDS, 'drop'];
-  return navExcept(['dashDiffs']);
+  if (pane === 'tasks' || isTaskView(view)) return ['drop', 'check'];
+  return GIT_FOOTER;
 };
 
 const footerLayout = (view, width) =>
@@ -612,6 +788,8 @@ const footerLayout = (view, width) =>
     disabled: dimFooterActions(view),
     backId: backFooterId(view),
     mark: backHintMark(view),
+    globals: view.pane === 'repos' ? [] : DASH_IDS,
+    tail: false,
   });
 
 module.exports = {