@khanglvm/relay 0.6.0 → 0.8.0

package/src/ui/blocks.js

@@ -103,6 +103,55 @@
       return out;
     }
 
+    // GFM pipe tables — a header row of "| a | b |" cells immediately followed
+    // by a separator row of dashes (with optional ":" alignment markers).
+    // Rendered as a real .blk-table so it matches the dedicated table block.
+    function splitRow(row) {
+      const trimmed = row.trim().replace(/^\|/, '').replace(/\|$/, '');
+      return trimmed.split(/(?<!\\)\|/).map((c) => c.replace(/\\\|/g, '|').trim());
+    }
+    function isSepRow(row) {
+      if (!row || row.indexOf('|') === -1) return false;
+      const cells = splitRow(row);
+      return cells.length > 0 && cells.every((c) => /^:?-{1,}:?$/.test(c));
+    }
+    function isTableStart(idx) {
+      const head = lines[idx];
+      return (
+        idx + 1 < lines.length &&
+        head.indexOf('|') !== -1 &&
+        !isSepRow(head) &&
+        isSepRow(lines[idx + 1])
+      );
+    }
+    function consumeTable() {
+      const headers = splitRow(lines[i]);
+      const aligns = splitRow(lines[i + 1]).map((c) => {
+        const left = c.startsWith(':');
+        const right = c.endsWith(':');
+        return left && right ? 'center' : right ? 'right' : left ? 'left' : '';
+      });
+      i += 2;
+      const body = [];
+      while (i < lines.length && !/^\s*$/.test(lines[i]) && lines[i].indexOf('|') !== -1 && !isSepRow(lines[i])) {
+        body.push(splitRow(lines[i]));
+        i++;
+      }
+      const ncols = headers.length;
+      const alignAttr = (ci) => (aligns[ci] ? ` style="text-align:${aligns[ci]}"` : '');
+      const cell = (tag, ci, text) => `<${tag}${alignAttr(ci)}>${mdInline(esc(text == null ? '' : text))}</${tag}>`;
+      let out = '<div class="md-tablewrap"><table class="blk-table md-table"><thead><tr>';
+      for (let c = 0; c < ncols; c++) out += cell('th', c, headers[c]);
+      out += '</tr></thead><tbody>';
+      for (const r of body) {
+        out += '<tr>';
+        for (let c = 0; c < ncols; c++) out += cell('td', c, r[c]);
+        out += '</tr>';
+      }
+      out += '</tbody></table></div>';
+      return out;
+    }
+
     while (i < lines.length) {
       const line = lines[i];
 
@@ -140,6 +189,9 @@
         continue;
       }
 
+      // GFM pipe table (header row + dash separator)
+      if (isTableStart(i)) { html += consumeTable(); continue; }
+
       // lists
       if (/^(\s*)([-*]|\d+\.)\s+/.test(line)) { html += consumeList(); continue; }
 
@@ -155,7 +207,8 @@
         !/^\s*---+\s*$/.test(lines[i]) &&
         !/^#{1,3}\s+/.test(lines[i]) &&
         !/^\s*>\s?/.test(lines[i]) &&
-        !/^(\s*)([-*]|\d+\.)\s+/.test(lines[i])
+        !/^(\s*)([-*]|\d+\.)\s+/.test(lines[i]) &&
+        !isTableStart(i)
       ) {
         buf.push(lines[i]);
         i++;

package/src/ui/style.css

@@ -73,7 +73,7 @@ body {
   color: var(--fg);
   font: 16px/1.6 var(--sans);
   -webkit-font-smoothing: antialiased;
-  transition: background 200ms var(--ease), color 200ms var(--ease);
+  transition: background 200ms var(--ease), color 200ms var(--ease), padding 240ms var(--ease);
 }
 .wrap { max-width: 860px; margin: 0 auto; padding: 32px 20px 28px; }
 
@@ -193,7 +193,7 @@ input[type="text"]:focus, textarea:focus {
 textarea { min-height: 90px; resize: vertical; }
 
 .qnotewrap { margin-top: 10px; }
-.qnotewrap .qnote { font-size: 0.88rem; padding: 8px 12px; }
+.qnotewrap .qnote { font-size: 0.88rem; padding: 8px 12px; min-height: 52px; resize: vertical; }
 
 .errmsg { color: var(--danger); font-size: 0.85rem; margin: 8px 0 0; display: none; }
 .card.error .errmsg { display: block; }
@@ -220,8 +220,14 @@ textarea { min-height: 90px; resize: vertical; }
   position: sticky; top: 0;
   background: var(--danger); color: var(--danger-fg);
   text-align: center; padding: 9px 16px; font-size: 0.9rem;
+  line-height: 1.45;
   z-index: 10; display: none;
+  border-bottom: 1px solid transparent;
 }
+/* Calm status notes (timeout hand-back / lost connection). Never the red error
+   state — the board stays usable, so these only inform. */
+.banner.info { background: var(--accent-soft); color: var(--accent); }
+.banner.warn { background: var(--bg-sunken); color: var(--fg-2); border-bottom-color: var(--border-strong); }
 
 /* Live-update toast: flagged after a `rly update` reload (see app.js).
    Fixed top-center, accent-soft bg, accent text; JS auto-removes it. */