reslop 0.2.4 → 0.2.6

package/lib/render/notes.js

@@ -2,209 +2,193 @@
 
 const ansi = require('../ansi.js');
 const wrap = require('../wrap.js');
-const files = require('../files.js');
 const primitives = require('./primitives.js');
+const { wrapMultiline, wrapDoc, cursorInWrap } = wrap;
+const { THEME, paint, visibleWidth, truncateVisible, seq, EL, RESET } = ansi;
+const { isListPane, paneResult, editSpan } = primitives;
 
-const { REPO_TODOS_LABEL } = files;
-const { wrapMultiline, cursorInWrap } = wrap;
-const { THEME, truncateVisible } = ansi;
-const { paintBar, paintCheckBar, windowRows } = primitives;
-const { LIST_PANES, CHECK_LEAD, paneResult } = primitives;
-
-const NOTE_COMPOSE = ['feedback'];
 const INPUT_MAX = 4;
 const NOTE_MAX = 4;
 const NOTE_PAD = 1;
+const CHECK_DONE = 'xX';
+const CHECK_TOKEN = /\[([ xX])\]/;
+const CHECK_LEAD = /^\[[ xX]\] /;
+const TODO_LEAD_W = '[ ] '.length;
+const NO_NOTE = { rows: [], cursor: null, templateHits: [], editHits: [] };
+
+const paintBar = (text, width, fgRgb, bgRgb, color) => {
+  const clipped = truncateVisible(text, width);
+  const pad = Math.max(0, width - visibleWidth(clipped));
+  const filled = clipped + ' '.repeat(pad);
+  if (!color) return filled;
+  return `${seq(fgRgb, bgRgb)}${EL}${filled}${RESET}`;
+};
 
-const todoInnerWidth = (width) => Math.max(1, width - 2);
+const checkChip = (mark, fgRgb, bgRgb, plain) => {
+  if (plain) return { fgRgb, bgRgb };
+  if (CHECK_DONE.includes(mark)) {
+    return { fgRgb: THEME.checkDoneFg, bgRgb: THEME.checkDoneBg };
+  }
+  return { fgRgb: THEME.checkFg, bgRgb: THEME.checkBg };
+};
 
-const checkLeadLen = (text) => {
-  const match = CHECK_LEAD.exec(text);
-  return match ? match[0].length : 0;
+const paintCheckBar = (text, width, fgRgb, bgRgb, color, plain = false) => {
+  const clipped = truncateVisible(text, width);
+  const match = color ? CHECK_TOKEN.exec(clipped) : null;
+  if (!match) return paintBar(text, width, fgRgb, bgRgb, color);
+  const token = match[0];
+  const pad = Math.max(0, width - visibleWidth(clipped));
+  const before = clipped.slice(0, match.index);
+  const after = clipped.slice(match.index + token.length) + ' '.repeat(pad);
+  const chip = checkChip(match[1], fgRgb, bgRgb, plain);
+  let out = `${seq(fgRgb, bgRgb)}${EL}`;
+  out += paint(before, fgRgb, bgRgb, color);
+  out += paint(token, chip.fgRgb, chip.bgRgb, color);
+  return out + paint(after, fgRgb, bgRgb, color);
 };
 
-const TODO_LEAD_W = checkLeadLen('[ ] ');
+const windowRows = (rows, focus, cap) => {
+  if (rows.length <= cap) return { rows, offset: 0 };
+  const start = Math.min(Math.max(0, focus - cap + 1), rows.length - cap);
+  return { rows: rows.slice(start, start + cap), offset: start };
+};
+
+const todoInnerWidth = (width) => Math.max(1, width - 2);
 
 const todoBodyWidth = (width) =>
   Math.max(1, todoInnerWidth(width) - TODO_LEAD_W);
 
-const wrapTodoItem = (text, inner) => {
-  const lead = checkLeadLen(text);
-  if (!lead) return wrapMultiline(text, inner);
-  const mark = text.slice(0, lead);
-  const body = text.slice(lead);
-  const bodyWidth = Math.max(1, inner - lead);
-  const hang = ' '.repeat(lead);
-  const wrapped = wrapMultiline(body, bodyWidth);
-  const { length } = wrapped;
-  const lines = new Array(length);
-  for (let i = 0; i < length; i++) {
-    const prefix = i === 0 ? mark : hang;
-    lines[i] = `${prefix}${wrapped[i]}`;
-  }
-  return lines;
+const noteInnerWidth = (width) => Math.max(1, width - NOTE_PAD * 2);
+
+const todoParts = (text, inner) => {
+  const match = CHECK_LEAD.exec(text);
+  const lead = match ? match[0].length : 0;
+  return { lead, body: text.slice(lead), bodyW: Math.max(1, inner - lead) };
+};
+
+const wrapTodoItem = (text, todo) => {
+  const mark = text.slice(0, todo.lead);
+  const hang = ' '.repeat(todo.lead);
+  const lines = wrapMultiline(todo.body, todo.bodyW);
+  return lines.map((line, index) => `${index ? hang : mark}${line}`);
+};
+
+const todoEdit = (todo, edit, rowStart, width) => {
+  const pos = cursorInWrap(todo.body, edit.cursor ?? 0, todo.bodyW);
+  const cursor = { x: pos.col + todo.lead + 2, row: rowStart + pos.row };
+  const x0 = todo.lead + 1;
+  const doc = wrapDoc(todo.body, todo.bodyW);
+  const hits = doc.map((piece, line) => ({
+    row: rowStart + line,
+    ...editSpan(x0, x0 + 1, width + 1, piece.start, piece.text),
+  }));
+  return { cursor, hits };
 };
 
-const todoCursor = (text, edit, inner, rowStart) => {
-  const lead = checkLeadLen(text);
-  const body = text.slice(lead);
-  const bodyWidth = Math.max(1, inner - lead);
-  const pos = cursorInWrap(body, edit.cursor ?? 0, bodyWidth);
-  return { x: pos.col + lead + 2, row: rowStart + pos.row };
+const taskLists = (view) => {
+  const sections = view.taskSections;
+  if (sections && sections.length) return sections;
+  const tasks = view.tasks ?? [];
+  const texts = !tasks.length && view.noteText ? [view.noteText] : tasks;
+  return [{ title: '', texts }];
 };
 
-const paintTodoList = (texts, focus, width, color, edit) => {
+const paintSectionHead = (title, width, color) =>
+  paintBar(` ${title}`, width, THEME.mutedFg, THEME.ctxBg, color);
+
+const paintBodyTodo = (view, width, color) => {
+  const focus = view.tasksFocus ?? 0;
   const inner = todoInnerWidth(width);
-  const rows = [];
-  const owners = [];
-  const checks = [];
+  const body = [];
+  const taskOwners = [];
+  const taskChecks = [];
+  let editHits = [];
   let cursor = null;
-  for (let i = 0; i < texts.length; i++) {
-    const selected = i === focus;
-    const fgRgb = selected ? THEME.chromeFg : THEME.mutedFg;
-    const bgRgb = selected ? THEME.buttonBg : THEME.ctxBg;
-    const text = texts[i];
-    const wrapped = wrapTodoItem(text, inner);
-    const rowStart = rows.length;
-    for (let line = 0; line < wrapped.length; line++) {
-      const painted = paintCheckBar(
-        ` ${wrapped[line]}`,
-        width,
-        fgRgb,
-        bgRgb,
-        color,
-        true,
-      );
-      rows.push(painted);
-      owners.push(i);
-      checks.push(line === 0);
+  let index = 0;
+  for (const section of taskLists(view)) {
+    if (section.title) {
+      body.push(paintSectionHead(section.title, width, color));
+      taskOwners.push(null);
+      taskChecks.push(false);
+    }
+    for (const text of section.texts) {
+      const selected = index === focus;
+      const fgRgb = selected ? THEME.chromeFg : THEME.mutedFg;
+      const bgRgb = selected ? THEME.buttonBg : THEME.ctxBg;
+      const todo = todoParts(text, inner);
+      const rowStart = body.length;
+      const wrapped = wrapTodoItem(text, todo);
+      for (let line = 0; line < wrapped.length; line++) {
+        const row = ` ${wrapped[line]}`;
+        body.push(paintCheckBar(row, width, fgRgb, bgRgb, color, true));
+        taskOwners.push(index);
+        taskChecks.push(line === 0);
+      }
+      if (view.taskEdit && selected) {
+        const edit = todoEdit(todo, view.taskEdit, rowStart, width);
+        cursor = edit.cursor;
+        editHits = edit.hits;
+      }
+      index += 1;
     }
-    if (!edit || !selected) continue;
-    cursor = todoCursor(text, edit, inner, rowStart);
   }
-  return { rows, owners, checks, cursor };
+  return paneResult({ body, editHits, taskOwners, taskChecks, cursor });
 };
 
-const noteInnerWidth = (width) => Math.max(1, width - NOTE_PAD * 2);
-
-const paintNoteLine = (text, width, fgRgb, bgRgb, color, withCheck) => {
-  const inner = noteInnerWidth(width);
-  const clipped = truncateVisible(text, inner);
-  const line = `${' '.repeat(NOTE_PAD)}${clipped}`;
-  if (withCheck) return paintCheckBar(line, width, fgRgb, bgRgb, color);
-  return paintBar(line, width, fgRgb, bgRgb, color);
-};
-
-const paintTemplateRow = (text, selected, width, color) => {
-  const fgRgb = selected ? THEME.chromeFg : THEME.mutedFg;
-  const bgRgb = selected ? THEME.buttonBg : THEME.noteBg;
-  return paintNoteLine(text, width, fgRgb, bgRgb, color);
-};
+const noteLine = (text, width) =>
+  `${' '.repeat(NOTE_PAD)}${truncateVisible(text, noteInnerWidth(width))}`;
 
 const paintComposeNote = (view, width, color, cap) => {
   const inner = noteInnerWidth(width);
-  const bgRgb = THEME.noteBg;
-  const compose = view.compose;
-  const wrapped = wrapMultiline(compose.text, inner);
+  const { compose } = view;
+  const doc = wrapDoc(compose.text ?? '', inner);
   const { row, col } = cursorInWrap(compose.text, compose.cursor ?? 0, inner);
-  const shown = windowRows(wrapped, row, INPUT_MAX);
+  const shown = windowRows(doc, row, INPUT_MAX);
+  const templates = view.templates ?? [];
+  const room = Math.max(0, cap - shown.rows.length);
+  const count = Math.min(templates.length, room);
+  const focus = view.templateIndex ?? -1;
   const rows = [];
   const templateHits = [];
-  if (compose.kind === 'feedback') {
-    const all = view.templates ?? [];
-    const room =
-      cap === undefined ? all.length : Math.max(0, cap - shown.rows.length);
-    const n = Math.min(all.length, room);
-    const focus = view.templateIndex ?? -1;
-    for (let i = 0; i < n; i++) {
-      const text = all[i].text ?? '';
-      const selected = i === focus;
-      rows.push(paintTemplateRow(text, selected, width, color));
-      templateHits.push({ row: i, cursor: i });
-    }
+  for (let i = 0; i < count; i++) {
+    const selected = i === focus;
+    const fgRgb = selected ? THEME.chromeFg : THEME.mutedFg;
+    const bgRgb = selected ? THEME.buttonBg : THEME.noteBg;
+    const line = noteLine(templates[i].text ?? '', width);
+    rows.push(paintBar(line, width, fgRgb, bgRgb, color));
+    templateHits.push({ row: i, cursor: i });
   }
-  const templateCount = rows.length;
-  for (const line of shown.rows) {
-    rows.push(paintNoteLine(line, width, THEME.chromeFg, bgRgb, color));
+  const editHits = [];
+  for (const piece of shown.rows) {
+    const span = editSpan(1, NOTE_PAD + 1, width + 1, piece.start, piece.text);
+    editHits.push({ row: rows.length, ...span });
+    const line = noteLine(piece.text, width);
+    rows.push(paintBar(line, width, THEME.chromeFg, THEME.noteBg, color));
   }
-  return {
-    rows,
-    cursor: {
-      x: NOTE_PAD + col + 1,
-      row: templateCount + row - shown.offset,
-    },
-    templateHits,
-  };
+  const cursor = { x: NOTE_PAD + col + 1, row: count + row - shown.offset };
+  return { rows, cursor, templateHits, editHits };
 };
 
 const paintIdleNote = (view, width, color) => {
-  const empty = { rows: [], cursor: null, templateHits: [] };
-  const text = view.noteText;
-  if (!text) return empty;
-  const inner = noteInnerWidth(width);
-  const wrapped = wrapMultiline(`feedback: ${text}`, inner);
-  const rows = [];
-  for (const line of wrapped.slice(0, NOTE_MAX)) {
-    const painted = paintNoteLine(
-      line,
-      width,
-      THEME.chromeFg,
-      THEME.noteBg,
-      color,
-      true,
-    );
-    rows.push(painted);
-  }
-  return { rows, cursor: null, templateHits: [] };
+  if (!view.noteText) return NO_NOTE;
+  const note = `feedback: ${view.noteText}`;
+  const wrapped = wrapMultiline(note, noteInnerWidth(width));
+  const rows = wrapped.slice(0, NOTE_MAX).map((text) => {
+    const line = noteLine(text, width);
+    return paintCheckBar(line, width, THEME.chromeFg, THEME.noteBg, color);
+  });
+  return { rows, cursor: null, templateHits: [], editHits: [] };
 };
 
 const paintNotePanel = (view, width, color, cap) => {
-  const empty = { rows: [], cursor: null, templateHits: [] };
-  const compose = view.compose;
-  if (compose && NOTE_COMPOSE.includes(compose.kind)) {
+  if (view.compose?.kind === 'feedback') {
     return paintComposeNote(view, width, color, cap);
   }
-  const pane = view.pane ?? 'diff';
-  if (LIST_PANES.includes(pane)) return empty;
+  if (isListPane(view.pane)) return NO_NOTE;
   return paintIdleNote(view, width, color);
 };
 
-const paintTodoCaption = (width, color) =>
-  paintBar(` ${REPO_TODOS_LABEL}`, width, THEME.mutedFg, THEME.ctxBg, color);
-
-const paintBodyTodo = (view, width, color) => {
-  const texts = view.todos ?? [];
-  let lines = texts;
-  if (!lines.length && view.noteText) lines = [view.noteText];
-  const painted = paintTodoList(
-    lines,
-    view.todoFocus ?? 0,
-    width,
-    color,
-    view.todoEdit,
-  );
-  const caption = paintTodoCaption(width, color);
-  const body = [caption, ...painted.rows];
-  const todoOwners = [null, ...painted.owners];
-  const todoChecks = [false, ...painted.checks];
-  let cursor = null;
-  if (painted.cursor) {
-    cursor = { x: painted.cursor.x, row: painted.cursor.row + 1 };
-  }
-  const fileHits = [];
-  const splitBody = false;
-  return paneResult({
-    body,
-    fileHits,
-    todoOwners,
-    todoChecks,
-    cursor,
-    splitBody,
-  });
-};
-
 module.exports = {
-  todoInnerWidth,
   todoBodyWidth,
   noteInnerWidth,
   paintNotePanel,