mdboard 2.0.0 → 2.1.1

package/index.html

@@ -202,12 +202,16 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
 /* ── Detail Panel — Notion-style ─────────────────────────── */
 .panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;opacity:0;pointer-events:none;transition:opacity .2s}
 .panel-overlay.open{opacity:1;pointer-events:auto}
-.detail-panel{top: 1rem;right: 1rem;height: calc(100vh - 2rem);border-radius: var(--radius);position:fixed;width:600px;max-width:92vw;background:var(--bg);border-left:1px solid var(--border);z-index:100;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;overflow:hidden}
+.detail-panel{top: 1rem;right: 1rem;height: calc(100vh - 2rem);border-radius: var(--radius);position:fixed;width:600px;max-width:92vw;background:var(--bg);border-left:1px solid var(--border);z-index:100;transform:translateX(100%);transition:transform .25s ease,top .25s ease,left .25s ease,right .25s ease,width .25s ease,height .25s ease;display:flex;flex-direction:column;overflow:hidden}
 .detail-panel.open{transform:translateX(0)}
+.detail-panel.expanded{top:50%;left:50%;right:auto;width:900px;height:85vh;border:1px solid var(--border);box-shadow:0 16px 48px rgba(0,0,0,.4)}
+.detail-panel.expanded.open{transform:translate(-50%,-50%)}
 .panel-header{padding:12px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0;background:var(--surface)}
 .panel-type{font-size:10px;padding:3px 8px;border-radius:var(--radius-sm);background:var(--accent-dim);color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
 .panel-item-id{font-family:var(--mono);font-size:13px;color:var(--text2)}
-.panel-close{margin-left:auto;background:none;border:none;color:var(--text2);cursor:pointer;font-size:18px;padding:4px 8px;border-radius:var(--radius-sm);line-height:1}
+.panel-expand{margin-left:auto;background:none;border:none;color:var(--text2);cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);line-height:1;display:flex;align-items:center}
+.panel-expand:hover{background:var(--surface2);color:var(--text)}
+.panel-close{background:none;border:none;color:var(--text2);cursor:pointer;font-size:18px;padding:4px 8px;border-radius:var(--radius-sm);line-height:1}
 .panel-close:hover{background:var(--surface2);color:var(--text)}
 .panel-title-wrap{padding:20px 24px 8px;flex-shrink:0}
 .panel-title-input{width:100%;font-size:28px;font-weight:700;background:transparent;border:none;color:var(--text);font-family:var(--font);outline:none;padding:0;line-height:1.3}
@@ -223,6 +227,14 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
 .prop-value select:disabled,.prop-value input:disabled{opacity:.6;cursor:default}
 .prop-value select:disabled:hover,.prop-value input:disabled:hover{border-color:transparent}
 .prop-text{font-size:13px;color:var(--text2);padding:4px 8px}
+.prop-longtext{width:100%}
+.prop-longtext-preview{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:background .15s;min-height:28px}
+.prop-longtext-preview:hover{background:var(--surface2)}
+.prop-longtext-text{flex:1;font-size:13px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.prop-longtext-toggle{font-size:9px;color:var(--text3);flex-shrink:0;transition:transform .15s}
+.prop-longtext-editor{width:100%;min-height:80px;resize:vertical;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:8px;border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;line-height:1.5;outline:none;margin-top:4px;transition:border-color .2s}
+.prop-longtext-editor:focus{border-color:var(--accent)}
+.prop-longtext-editor:disabled{opacity:.6;cursor:default}
 .prop-icon{flex-shrink:0}
 .prop-row-toggle{cursor:pointer;user-select:none}
 .prop-row-toggle:hover{background:var(--surface2);border-radius:var(--radius-sm)}
@@ -467,6 +479,7 @@ h4.ce-header{font-size:15px;line-height:1.4}
   .header{padding:12px 16px}
   .content{padding:16px}
   .detail-panel{width:100%;max-width:100%}
+  .detail-panel.expanded{width:96vw;height:90vh}
   .notes-sidebar{width:200px}
   .notes-header-bar{padding:24px 24px 0}
   .notes-editorjs-wrap{padding:12px 16px 24px}
@@ -1156,6 +1169,12 @@ function renderFieldPill(item, entityType, field) {
     }
   }
 
+  if (fieldDef && fieldDef.type === 'longtext') {
+    var ltText = String(value);
+    var ltTrunc = ltText.length > 50 ? ltText.substring(0, 50) + '...' : ltText;
+    return '<span class="pill" style="background:var(--surface2);color:var(--text2)">' + escHtml(ltTrunc) + '</span>';
+  }
+
   if (fieldDef && fieldDef.type === 'number' && value != null) {
     return '<span class="pill pill-points">' + value + (fieldDef.label === 'Points' ? ' pts' : '') + '</span>';
   }
@@ -1185,6 +1204,12 @@ function renderFieldCell(item, entityType, col) {
       statusIcon(entityType, value) + ' ' + escHtml(getFieldLabel(entityType, col, value)) + '</span>';
   }
 
+  if (fieldDef && fieldDef.type === 'longtext') {
+    var ltText = String(value);
+    var ltTrunc = ltText.length > 50 ? ltText.substring(0, 50) + '...' : ltText;
+    return '<span style="color:var(--text2)">' + escHtml(ltTrunc) + '</span>';
+  }
+
   if (fieldDef && fieldDef.type === 'list') {
     var arr = Array.isArray(value) ? value : [value];
     return escHtml(arr.join(', '));
@@ -2590,22 +2615,43 @@ async function deleteCurrentNote(id) {
 /* ══════════════════════════════════════════════════════════════
    PANEL — Dynamic detail panel from config
    ══════════════════════════════════════════════════════════════ */
-var panelState = { open: false, entityType: null, item: null, isCreate: false, editor: null };
+var panelState = { open: false, entityType: null, item: null, isCreate: false, editor: null, expanded: false };
 
-function openPanel(entityType, item) {
-  panelState = { open: true, entityType: entityType, item: JSON.parse(JSON.stringify(item)), isCreate: false, editor: null };
-  renderPanel();
+async function openPanel(entityType, item) {
+  panelState = { open: true, entityType: entityType, item: JSON.parse(JSON.stringify(item)), isCreate: false, editor: null, expanded: false };
   document.getElementById('detail-panel').classList.add('open');
   document.getElementById('panel-overlay').classList.add('open');
+
+  // Fetch full item with content from single endpoint
+  var plural = getEntityPlural(entityType);
+  var base = apiBase();
+  var full = await fetchJson(base + '/' + plural + '/' + encodeURIComponent(item.id));
+  if (full && full.content !== undefined) {
+    panelState.item.content = full.content;
+  }
+
+  renderPanel();
 }
 
 function closePanel() {
   if (panelState.editor) { destroyEditor(panelState.editor); panelState.editor = null; }
-  panelState = { open: false, entityType: null, item: null, isCreate: false, editor: null };
-  document.getElementById('detail-panel').classList.remove('open');
+  panelState = { open: false, entityType: null, item: null, isCreate: false, editor: null, expanded: false };
+  document.getElementById('detail-panel').classList.remove('open', 'expanded');
   document.getElementById('panel-overlay').classList.remove('open');
 }
 
+function togglePanelExpand() {
+  panelState.expanded = !panelState.expanded;
+  document.getElementById('detail-panel').classList.toggle('expanded', panelState.expanded);
+  var btn = document.getElementById('panel-expand-btn');
+  if (btn) {
+    btn.innerHTML = panelState.expanded
+      ? '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M14 6h-4V2M2 10h4v4M10 6l4.5-4.5M6 10L1.5 14.5"/></svg>'
+      : '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M10 2h4v4M6 14H2v-4M14 2L9.5 6.5M2 14l4.5-4.5"/></svg>';
+    btn.title = panelState.expanded ? 'Collapse' : 'Expand';
+  }
+}
+
 function openCreateDialog(entityType) {
   var fields = getEntityFields(entityType);
   var item = { _isNew: true, title: '' };
@@ -2630,7 +2676,7 @@ function openCreateDialog(entityType) {
     }
   }
 
-  panelState = { open: true, entityType: entityType, item: item, isCreate: true, editor: null };
+  panelState = { open: true, entityType: entityType, item: item, isCreate: true, editor: null, expanded: false };
   renderPanel();
   document.getElementById('detail-panel').classList.add('open');
   document.getElementById('panel-overlay').classList.add('open');
@@ -2657,6 +2703,10 @@ function renderPanel() {
     html += '<span class="pill" style="background:' + item._sourceColor + '20;color:' + item._sourceColor + ';font-size:10px">' + escHtml(item._sourceLabel || item._source) + '</span>';
   }
 
+  var expandIcon = panelState.expanded
+    ? '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M14 6h-4V2M2 10h4v4M10 6l4.5-4.5M6 10L1.5 14.5"/></svg>'
+    : '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M10 2h4v4M6 14H2v-4M14 2L9.5 6.5M2 14l4.5-4.5"/></svg>';
+  html += '<button class="panel-expand" id="panel-expand-btn" title="' + (panelState.expanded ? 'Collapse' : 'Expand') + '">' + expandIcon + '</button>';
   html += '<button class="panel-close" id="panel-close-btn">&times;</button></div>';
 
   // ── Title ──
@@ -2743,6 +2793,7 @@ function renderPanel() {
 
   // Event listeners
   document.getElementById('panel-close-btn').addEventListener('click', closePanel);
+  document.getElementById('panel-expand-btn').addEventListener('click', togglePanelExpand);
   document.getElementById('panel-cancel-btn').addEventListener('click', closePanel);
   var saveBtn = document.getElementById('panel-save-btn');
   if (saveBtn) saveBtn.addEventListener('click', isCreate ? saveCreatePanel : savePanel);
@@ -2773,6 +2824,38 @@ function renderPanel() {
     });
   }
 
+  // Longtext expand/collapse
+  panel.querySelectorAll('.prop-longtext-preview').forEach(function(prev) {
+    prev.addEventListener('click', function() {
+      var wrap = prev.parentNode;
+      var textarea = wrap.querySelector('.prop-longtext-editor');
+      var toggle = prev.querySelector('.prop-longtext-toggle');
+      if (textarea.style.display === 'none') {
+        textarea.style.display = '';
+        prev.style.display = 'none';
+        textarea.style.height = 'auto';
+        textarea.style.height = Math.max(80, textarea.scrollHeight) + 'px';
+        textarea.focus();
+      }
+    });
+  });
+  panel.querySelectorAll('.prop-longtext-editor').forEach(function(ta) {
+    ta.addEventListener('blur', function() {
+      var wrap = ta.parentNode;
+      var prev = wrap.querySelector('.prop-longtext-preview');
+      var textSpan = prev.querySelector('.prop-longtext-text');
+      var val = ta.value || '';
+      var truncated = val.length > 80 ? val.substring(0, 80) + '...' : (val || 'Empty');
+      textSpan.textContent = truncated;
+      ta.style.display = 'none';
+      prev.style.display = '';
+    });
+    ta.addEventListener('input', function() {
+      ta.style.height = 'auto';
+      ta.style.height = Math.max(80, ta.scrollHeight) + 'px';
+    });
+  });
+
   // Live icon updates for enum fields
   panel.querySelectorAll('select[id^="p-"]').forEach(function(sel) {
     sel.addEventListener('change', function() {
@@ -2827,6 +2910,18 @@ function renderPropRow(name, field, value, entityType, isReadonly) {
       html += '<input type="text" id="p-' + name + '" value="' + escHtml(value || '') + '" placeholder=""' + (isReadonly ? ' disabled' : '') + '>';
       break;
 
+    case 'longtext':
+      var ltVal = value || '';
+      var ltTruncated = ltVal.length > 80 ? ltVal.substring(0, 80) + '...' : ltVal;
+      html += '<div class="prop-longtext" id="p-lt-wrap-' + name + '">';
+      html += '<div class="prop-longtext-preview" id="p-lt-preview-' + name + '" title="Click to expand">';
+      html += '<span class="prop-longtext-text">' + escHtml(ltTruncated || 'Empty') + '</span>';
+      html += '<span class="prop-longtext-toggle">&#9660;</span>';
+      html += '</div>';
+      html += '<textarea id="p-' + name + '" class="prop-longtext-editor" style="display:none" placeholder="Enter text..."' + (isReadonly ? ' disabled' : '') + '>' + escHtml(ltVal) + '</textarea>';
+      html += '</div>';
+      break;
+
     case 'list':
       var listVal = Array.isArray(value) ? value.join(', ') : (value || '');
       html += '<input type="text" id="p-' + name + '" value="' + escHtml(listVal) + '" placeholder="Comma-separated"' + (isReadonly ? ' disabled' : '') + '>';
@@ -2944,6 +3039,8 @@ function readFieldValue(el, fieldDef) {
       return el.value.trim() || null;
     case 'date':
       return el.value || null;
+    case 'longtext':
+      return el.value || '';
     case 'enum':
     case 'string':
     case 'text':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdboard",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Git-based project management dashboard. Reads markdown files with YAML frontmatter and serves a visual kanban board, table, milestones, and metrics views.",
   "main": "./src/server/server.js",
   "bin": {

package/presets/shape-up/entities.json

@@ -48,8 +48,8 @@
           ],
           "default": "big"
         },
-        "problem":  { "type": "text", "label": "Problem" },
-        "solution": { "type": "text", "label": "Solution" },
+        "problem":  { "type": "longtext", "label": "Problem" },
+        "solution": { "type": "longtext", "label": "Solution" },
         "no_gos":   { "type": "list", "label": "No-gos" }
       }
     },
@@ -115,8 +115,8 @@
           ],
           "default": "big"
         },
-        "problem":  { "type": "text", "label": "Problem" },
-        "solution": { "type": "text", "label": "Solution" },
+        "problem":  { "type": "longtext", "label": "Problem" },
+        "solution": { "type": "longtext", "label": "Solution" },
         "no_gos":   { "type": "list", "label": "No-gos" }
       }
     },

package/src/core/yaml.js

@@ -58,8 +58,21 @@ function parseYaml(text) {
       continue;
     }
 
-    obj[key] = parseValue(rawValue);
-    i++;
+    // Check for continuation lines (multiline plain scalar)
+    let fullValue = rawValue;
+    let j = i + 1;
+    while (j < lines.length) {
+      const nextLine = lines[j];
+      if (nextLine.match(/^\s/) && nextLine.trim() !== '' &&
+          !nextLine.match(/^\s+-\s/) && !nextLine.match(/^\s+\w[\w.-]*\s*:/)) {
+        fullValue += ' ' + nextLine.trim();
+        j++;
+      } else {
+        break;
+      }
+    }
+    obj[key] = parseValue(fullValue);
+    i = j;
   }
 
   return obj;
@@ -99,6 +112,29 @@ function serializeValue(v) {
   return String(v);
 }
 
+function wrapPlainScalar(text) {
+  // Normalize newlines to spaces
+  const normalized = text.replace(/\n/g, ' ').replace(/\s+/g, ' ').trim();
+  const words = normalized.split(' ');
+  const lines = [];
+  let currentLine = '';
+
+  for (const word of words) {
+    if (currentLine === '') {
+      currentLine = word;
+    } else if (currentLine.length + 1 + word.length > 78) {
+      lines.push(currentLine);
+      currentLine = word;
+    } else {
+      currentLine += ' ' + word;
+    }
+  }
+  if (currentLine) lines.push(currentLine);
+
+  // First line is bare, continuation lines indented with 2 spaces
+  return lines.map((l, i) => (i === 0 ? l : '  ' + l)).join('\n');
+}
+
 function serializeYaml(obj) {
   const lines = [];
   for (const [key, value] of Object.entries(obj)) {
@@ -124,7 +160,11 @@ function serializeYaml(obj) {
         }
       }
     } else {
-      lines.push(key + ': ' + serializeValue(value));
+      if (typeof value === 'string' && (value.length > 80 || value.indexOf('\n') !== -1)) {
+        lines.push(key + ': ' + wrapPlainScalar(value));
+      } else {
+        lines.push(key + ': ' + serializeValue(value));
+      }
     }
   }
   return lines.join('\n');