reslop 0.2.0 → 0.2.3

package/lib/render/chrome.js

@@ -10,21 +10,33 @@ const { ACTION_IDS, BRANCH_ACTIONS, COMMIT_ACTIONS, actionLetter } = keys;
 const { buttonWord } = keys;
 const { FILES_HIDDEN, FILES_GIT_DISABLED, BRANCHES_DISABLED } = keys;
 const { COMMITS_DISABLED, TODO_DISABLED, DIFF_DISABLED, UNIT_DISABLED } = keys;
+const { NPM_DISABLED } = keys;
 const { diffGitDisabled, branchGitDisabled, commitGitDisabled } = keys;
 const { CONFIRM, confirmPrefix, promptFromChoices } = keys;
 const { THEME, paint, visibleWidth } = ansi;
 const { truncateVisible, fg, RESET, EL, seq } = ansi;
-const { fill, branchLabel, paintBracketName } = primitives;
+const { fill, branchLabel } = primitives;
 
 const HEADER_ROLE_FG = {
   repo: THEME.headerRepoFg,
   dir: THEME.headerDirFg,
   slash: THEME.headerSlashFg,
   file: THEME.headerFileFg,
-  meta: THEME.headerMetaFg,
 };
 
-const BUSY_BAR = ['▰▰▱▱▱▱', '▱▰▰▱▱▱', '▱▱▰▰▱▱', '▱▱▱▰▰▱', '▱▱▱▱▰▰', '▰▱▱▱▱▰'];
+const WAVE = '·•●•·';
+
+const busyBars = (wave) => {
+  const n = wave.length;
+  const frames = new Array(n);
+  for (let frame = 0; frame < n; frame++) {
+    const start = (n - frame) % n;
+    frames[frame] = wave.slice(start) + wave.slice(0, start);
+  }
+  return frames;
+};
+
+const BUSY_BAR = busyBars(WAVE);
 const BUSY_PROGRESS = [
   'pulling',
   'pushing',
@@ -34,11 +46,13 @@ const BUSY_PROGRESS = [
   'npm i',
   'npm uninstall',
   'npm audit fix',
+  'running',
   'checking out',
   'creating branch',
   'rebasing',
   'dropping',
   'committing',
+  'rewording',
   'force pushing',
 ];
 
@@ -62,6 +76,8 @@ const INFO_STATUS = [
   'unified',
   'mixed',
   'side-by-side',
+  'dark',
+  'light',
   'saved',
   'reloaded',
   'not a diff block',
@@ -69,6 +85,7 @@ const INFO_STATUS = [
   'diff mode',
   'committed',
   'amended',
+  'reworded',
   'fixup',
   'updated',
   'updating reslop',
@@ -91,6 +108,7 @@ const INFO_STATUS = [
   'checked out',
   'created',
   'empty branch name',
+  'empty commit message',
 ];
 const INFO_PREFIX = ['checked out ', 'created ', 'rebased onto ', 'dropped '];
 
@@ -100,21 +118,12 @@ const dropPrompt = (name) => ` drop ${name}? y/n`;
 const PUSH_REJECT_PREFIX = CONFIRM.confirmPush.prefix;
 const PUSH_PROMPT = `${PUSH_REJECT_PREFIX} force push`;
 
+const BUTTON_LEAD = ' ';
 const BUTTON_GAP = '  ';
+const BUTTON_EDGE = 1;
+const buttonGap = (index) => (index ? BUTTON_GAP : BUTTON_LEAD);
 const LOGO = '👁️';
 
-const ORIGIN_LABEL = {
-  commit: (view) => view.revShort || 'commit',
-  pr: (view) => view.sourceLabel || 'pr',
-  todo: () => 'todo',
-};
-
-const originLabel = (origin, view) => {
-  const named = ORIGIN_LABEL[origin];
-  if (named) return named(view);
-  return origin ?? 'unknown';
-};
-
 const pathSegments = (rel) => {
   const segs = [];
   if (!rel) return segs;
@@ -132,91 +141,59 @@ const pathSegments = (rel) => {
   return segs;
 };
 
-const headerTarget = (view) => {
+const headerScreen = (view) => {
   const pane = view.pane ?? 'diff';
+  if (pane === 'branches') return 'branches';
+  if (pane === 'commits') {
+    const mode = view.commitView === 'full' ? 'full' : 'brief';
+    return `commits ${mode}`;
+  }
+  if (pane === 'npm') return 'npm';
   if (pane === 'files') {
     const files = view.files ?? [];
-    const cursor = view.fileCursor ?? 0;
-    const entry = files[cursor];
-    const total = files.length;
-    const n = total ? cursor + 1 : 0;
-    if (!entry) return { path: '', origin: '', n, total };
-    if (isTodosEntry(entry)) {
-      return { path: TODO_FILE, origin: 'todo', n, total };
-    }
-    return { path: entry.path, origin: entry.status, n, total };
-  }
-  if (pane === 'branches') {
-    const compose = view.compose;
-    const branches = view.branches ?? [];
-    if (compose && compose.kind === 'branch') {
-      const total = branches.length + 1;
-      return { path: compose.text || '', origin: 'new', n: total, total };
-    }
-    const cursor = view.branchCursor ?? 0;
-    const entry = branches[cursor];
-    const total = branches.length;
-    const n = total ? cursor + 1 : 0;
-    if (!entry) return { path: '', origin: 'branch', n, total };
-    const origin = entry.current ? 'current' : 'branch';
-    return { path: entry.name, origin, n, total };
+    const entry = files[view.fileCursor ?? 0];
+    if (isTodosEntry(entry)) return TODO_FILE;
+    return '';
   }
-  if (pane === 'commits') {
-    const commits = view.commits ?? [];
-    const cursor = view.commitCursor ?? 0;
-    const entry = commits[cursor];
-    const total = commits.length;
-    const n = total ? cursor + 1 : 0;
-    if (!entry) return { path: '', origin: 'commit', n, total };
-    const origin = entry.head ? 'HEAD' : 'commit';
-    return { path: entry.subject ?? '', origin, n, total };
-  }
-  if (pane === 'unit') {
-    const path = view.reviewPath ?? '';
-    const lines = view.unitLines ?? [];
-    const top = Math.max(0, (view.scroll ?? 0) - 1);
-    const n = lines.length ? Math.min(lines.length, top + 1) : 0;
-    const origin = view.item ? originLabel(view.item.origin, view) : 'unit';
-    return { path, origin, n, total: lines.length };
-  }
-  if (!view.item) return { path: '', origin: '', n: 0, total: view.total ?? 0 };
-  if (view.item.origin === 'todo') {
-    return { path: TODO_FILE, origin: 'todo', n: 1, total: 1 };
-  }
-  return {
-    path: itemPath(view.item),
-    origin: originLabel(view.item.origin, view),
-    n: view.index + 1,
-    total: view.total,
-  };
+  if (view.item && view.item.origin === 'todo') return TODO_FILE;
+  return '';
 };
 
-const headerPrefix = (view) => {
+const headerTarget = (view) => {
+  const pane = view.pane ?? 'diff';
+  if (pane === 'files') {
+    const entry = (view.files ?? [])[view.fileCursor ?? 0];
+    if (!entry || isTodosEntry(entry)) return '';
+    return entry.path;
+  }
+  if (pane === 'unit') return view.reviewPath ?? '';
+  if (!view.item || view.item.origin === 'todo') return '';
+  return itemPath(view.item);
+};
+
+const headerLabel = (view) => headerScreen(view) || headerTarget(view);
+
+const headerSep = (view) => (headerScreen(view) ? ': ' : '/');
+
+const headerPrefix = (view, label) => {
   const repo = view.repoName || '';
-  const { path } = headerTarget(view);
-  if (repo && path) return ` ${LOGO}  reslop: ${repo}/`;
+  if (repo && label) return ` ${LOGO}  reslop: ${repo}${headerSep(view)}`;
   if (repo) return ` ${LOGO}  reslop: ${repo} `;
   return ` ${LOGO}  reslop: `;
 };
 
-const headerSuffix = ({ origin, n, total }) =>
-  origin ? ` ${origin} ${n}/${total}` : ` ${n}/${total}`;
-
 const headerText = (view) => {
-  const prefix = headerPrefix(view);
-  const target = headerTarget(view);
-  return `${prefix}${target.path}${headerSuffix(target)}`;
+  const label = headerLabel(view);
+  return `${headerPrefix(view, label)}${label}`;
 };
 
 const headerPieces = (view, width) => {
   const repo = view.repoName || '';
-  const target = headerTarget(view);
-  const path = target.path;
-  const suffix = headerSuffix(target);
+  const path = headerLabel(view);
   const right = ' ';
   const chrome = ` ${LOGO}  reslop: `;
-  const prefixW = visibleWidth(headerPrefix(view));
-  const used = prefixW + visibleWidth(suffix) + visibleWidth(right);
+  const prefixW = visibleWidth(headerPrefix(view, path));
+  const used = prefixW + visibleWidth(right);
   const room = Math.max(0, width - used);
   const clipped = truncateVisible(path, room);
   const pad = Math.max(0, room - visibleWidth(clipped));
@@ -224,7 +201,9 @@ const headerPieces = (view, width) => {
   if (repo) {
     pieces.push({ text: repo, role: 'repo' });
     if (path) {
-      pieces.push({ text: '/', role: 'slash' });
+      const sep = headerSep(view);
+      const role = sep === '/' ? 'slash' : 'chrome';
+      pieces.push({ text: sep, role });
     } else {
       pieces.push({ text: ' ', role: 'chrome' });
     }
@@ -235,7 +214,6 @@ const headerPieces = (view, width) => {
   if (pad) {
     pieces.push({ text: ' '.repeat(pad), role: 'chrome' });
   }
-  pieces.push({ text: suffix, role: 'meta' });
   pieces.push({ text: right, role: 'chrome' });
   return pieces;
 };
@@ -298,6 +276,7 @@ const layoutButtons = (width, compact, hidden, extra, disabled) => {
       for (const add of extraIds) {
         if (!ids.includes(add)) ids.push(add);
       }
+      continue;
     }
     if (hiddenIds.includes(id)) continue;
     ids.push(id);
@@ -306,13 +285,15 @@ const layoutButtons = (width, compact, hidden, extra, disabled) => {
     const hits = [];
     const parts = [];
     let x = 0;
+    const limit = Math.max(0, width - BUTTON_EDGE);
     for (const id of ids) {
       const letter = actionLetter(id);
       const word = buttonWord(id);
       const label = short ? letter : word;
-      const piece = `${BUTTON_GAP}${label}`;
+      const gap = buttonGap(parts.length);
+      const piece = `${gap}${label}`;
       const w = visibleWidth(piece);
-      if (x + w > width && parts.length) break;
+      if (x + w > limit && parts.length) break;
       const off = disabledIds.includes(id);
       if (!off) hits.push({ id, x0: x, x1: x + w });
       parts.push({ action: { id }, piece, letter, label, disabled: off });
@@ -331,8 +312,10 @@ const paintButtons = (layout, width, color) => {
   let used = 0;
   const fgRgb = THEME.buttonFg;
   const bgRgb = THEME.buttonBg;
-  for (const part of layout.parts) {
-    out += paint(BUTTON_GAP, fgRgb, bgRgb, color);
+  for (let i = 0; i < layout.parts.length; i++) {
+    const part = layout.parts[i];
+    const gap = buttonGap(i);
+    out += paint(gap, fgRgb, bgRgb, color);
     if (part.disabled) out += paint(part.label, fgRgb, bgRgb, color);
     else out += paintMarkedWord(part.label, part.letter, color, BUTTON_MARK);
     used += visibleWidth(part.piece);
@@ -470,14 +453,10 @@ const paintChoicePrompt = (choices, width, color, prefix = '') => {
   return out + fill(pad, THEME.mutedFg, bgRgb, color);
 };
 
-const STATUS_MARK = /(\[[^\]]+\]|\+[0-9]+(?:\/[0-9]+)?|-[0-9]+(?:\/[0-9]+)?)/g;
+const STATUS_MARK = /(\+[0-9]+(?:\/[0-9]+)?|-[0-9]+(?:\/[0-9]+)?)/g;
 
 const paintStatusMark = (token, color) => {
   const bgRgb = THEME.chromeBg;
-  const muted = THEME.mutedFg;
-  if (token.startsWith('[')) {
-    return paintBracketName(token, THEME.buttonHotFg, muted, bgRgb, color);
-  }
   if (token.startsWith('+')) {
     return paint(token, THEME.addLineFg, bgRgb, color);
   }
@@ -505,6 +484,68 @@ const paintStatusLeft = (text, color) => {
   return out;
 };
 
+const paintBranchHead = (text, branch, color) => {
+  const name = branchLabel(branch);
+  if (!name || !text.startsWith(' ')) return null;
+  const head = ` ${name}`;
+  const shown = text.startsWith(head) ? name : text.slice(1);
+  if (!shown || !name.startsWith(shown)) return null;
+  const rest = text.slice(1 + shown.length);
+  const bgRgb = THEME.chromeBg;
+  return (
+    paint(' ', THEME.mutedFg, bgRgb, color) +
+    paint(shown, THEME.buttonHotFg, bgRgb, color, true) +
+    paintStatusLeft(rest, color)
+  );
+};
+
+const SAVE_HINT = 'Press **Ctrl-S** or **Enter** at EOF to save';
+const HINT_HOT_FG = 0xff;
+
+const hintParts = (source) => {
+  const bits = source.split('**');
+  const parts = [];
+  for (let i = 0; i < bits.length; i++) {
+    if (!bits[i]) continue;
+    parts.push({ text: bits[i], hot: i % 2 === 1 });
+  }
+  return parts;
+};
+
+const saveHintText = () => SAVE_HINT.replaceAll('**', '');
+
+const commitSaveHint = (view) => {
+  if (view.mode !== 'compose' || view.commitView !== 'full') return false;
+  const compose = view.compose;
+  return Boolean(compose && compose.kind === 'commit');
+};
+
+const paintSaveHintBar = (width, color) => {
+  const bgRgb = THEME.buttonBg;
+  const plain = `${BUTTON_LEAD}${saveHintText()}`;
+  if (!color) {
+    const pad = Math.max(0, width - visibleWidth(plain));
+    return plain + ' '.repeat(pad);
+  }
+  let out = paint(BUTTON_LEAD, THEME.buttonFg, bgRgb, color);
+  for (const part of hintParts(SAVE_HINT)) {
+    const tone = part.hot ? HINT_HOT_FG : THEME.buttonFg;
+    out += paint(part.text, tone, bgRgb, color, part.hot);
+  }
+  const pad = Math.max(0, width - visibleWidth(plain));
+  return out + fill(pad, THEME.buttonFg, bgRgb, color);
+};
+
+const paintFooter = (view, layout, width, color) => {
+  if (commitSaveHint(view)) return paintSaveHintBar(width, color);
+  return paintButtons(layout, width, color);
+};
+
+const footerHits = (view, layout) => {
+  if (commitSaveHint(view)) return [];
+  return layout.hits;
+};
+
 const paintStatusLine = (view, status, width, color) => {
   const confirm = CONFIRM[view.mode];
   if (confirm) {
@@ -518,8 +559,13 @@ const paintStatusLine = (view, status, width, color) => {
     return layout.clipped + leftGap + layout.msg + rightGap + layout.right;
   }
   const bgRgb = THEME.chromeBg;
+  const worktree = countsKind(view.sourceKind, view.revShort) === 'worktree';
+  const head = worktree
+    ? paintBranchHead(layout.clipped, view.branch, color)
+    : null;
+  const left = head ?? paintStatusLeft(layout.clipped, color);
   return (
-    paintStatusLeft(layout.clipped, color) +
+    left +
     paint(leftGap, THEME.mutedFg, bgRgb, color) +
     paint(layout.msg, layout.msgFg, bgRgb, color) +
     paint(rightGap, THEME.mutedFg, bgRgb, color) +
@@ -541,10 +587,10 @@ const statusBranchHit = (view, width, y) => {
   if (!branchLabel(branch)) return null;
   if (countsKind(view.sourceKind, view.revShort) !== 'worktree') return null;
   const layout = statusLayout(view, view.status ?? '', width);
-  const open = layout.clipped.indexOf('[');
-  const close = layout.clipped.indexOf(']');
-  if (open < 0 || close <= open) return null;
-  return { id: 'branch', y, x0: open, x1: close + 1 };
+  const name = branchLabel(branch);
+  const at = layout.clipped.indexOf(name);
+  if (at < 0) return null;
+  return { id: 'branch', y, x0: at, x1: at + visibleWidth(name) };
 };
 
 const selectedBranch = (view) => (view.branches ?? [])[view.branchCursor ?? 0];
@@ -557,6 +603,7 @@ const hiddenActions = (view) => {
   if (pane === 'unit') return UNIT_DISABLED;
   if (pane === 'branches') return BRANCHES_DISABLED;
   if (pane === 'commits') return COMMITS_DISABLED;
+  if (pane === 'npm') return NPM_DISABLED;
   if (view.item && view.item.origin === 'todo') return TODO_DISABLED;
   return DIFF_DISABLED;
 };
@@ -577,6 +624,10 @@ const dimFooterActions = (view) => {
     if (!entry) return commitGitDisabled({ canCommit: staged });
     return commitGitDisabled({ ...entry, canCommit: staged });
   }
+  if (pane === 'npm' && view.npmView) {
+    if (view.npmRunning) return ['npmRerun'];
+    return [];
+  }
   return [];
 };
 
@@ -584,10 +635,14 @@ const extraFooterActions = (view) => {
   const pane = view.pane ?? 'diff';
   if (pane === 'files') {
     const scope = view.fileScope === 'file' ? 'diff' : 'file';
-    return [scope, 'commit', 'pull', 'push'];
+    return ['npm', scope, 'commit', 'pull', 'push'];
   }
   if (pane === 'branches') return Object.keys(BRANCH_ACTIONS);
   if (pane === 'commits') return Object.keys(COMMIT_ACTIONS);
+  if (pane === 'npm') {
+    if (view.npmView) return ['npmStop', 'npmRerun'];
+    return ['npmEdit', 'npmNew'];
+  }
   return [];
 };
 
@@ -601,6 +656,8 @@ module.exports = {
   paintHeader,
   layoutButtons,
   paintButtons,
+  paintFooter,
+  footerHits,
   paintStatusLine,
   statusChoiceHits,
   statusBranchHit,