mdboard 1.2.0 → 1.3.0

package/src/client/notes.js

@@ -0,0 +1,183 @@
+/* ══════════════════════════════════════════════════════════════
+   NOTES VIEW — Notion-style split layout
+   ══════════════════════════════════════════════════════════════ */
+
+var notesState = { notes: [], activeId: null, editor: null, dirty: false };
+
+function renderNotes() {
+  var container = document.getElementById('notes-container');
+  if (!container) return;
+
+  container.innerHTML =
+    '<div class="notes-layout">' +
+      '<div class="notes-sidebar">' +
+        '<div class="notes-toolbar">' +
+          '<input type="text" placeholder="Search..." id="notes-search">' +
+          '<button class="btn btn-sm btn-create" id="notes-new">+ New</button>' +
+        '</div>' +
+        '<div class="notes-list" id="notes-list"></div>' +
+      '</div>' +
+      '<div class="notes-editor" id="notes-editor-pane">' +
+        '<div class="notes-empty-state">' +
+          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:48px;height:48px;opacity:.3;margin-bottom:12px"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>' +
+          '<p>Select a note or create a new one</p>' +
+          '<p style="font-size:12px;margin-top:4px;color:var(--text3)">Use <kbd>/</kbd> for block commands</p>' +
+        '</div>' +
+      '</div>' +
+    '</div>';
+
+  loadNoteList();
+
+  document.getElementById('notes-new').addEventListener('click', createNewNote);
+  document.getElementById('notes-search').addEventListener('input', function() {
+    renderNoteList(this.value.toLowerCase());
+  });
+}
+
+async function loadNoteList() {
+  var base = apiBase();
+  var notes = await fetchJson(base + '/notes');
+  notesState.notes = notes || [];
+  renderNoteList('');
+}
+
+function renderNoteList(filter) {
+  var list = document.getElementById('notes-list');
+  if (!list) return;
+
+  var notes = notesState.notes;
+  if (filter) {
+    notes = notes.filter(function(n) {
+      return (n.title || '').toLowerCase().indexOf(filter) !== -1;
+    });
+  }
+
+  notes.sort(function(a, b) {
+    return (b.updated || b.created || '').localeCompare(a.updated || a.created || '');
+  });
+
+  if (notes.length === 0) {
+    list.innerHTML = '<div class="notes-list-empty">No notes yet</div>';
+    return;
+  }
+
+  var html = '';
+  for (var i = 0; i < notes.length; i++) {
+    var n = notes[i];
+    var active = n.id === notesState.activeId ? ' active' : '';
+    html += '<div class="notes-list-item' + active + '" data-id="' + escHtml(n.id) + '">' +
+      '<div class="notes-list-title">' + escHtml(n.title || 'Untitled') + '</div>' +
+      '<div class="notes-list-date">' + escHtml(n.updated || n.created || '') + '</div>' +
+    '</div>';
+  }
+  list.innerHTML = html;
+
+  list.querySelectorAll('.notes-list-item').forEach(function(el) {
+    el.addEventListener('click', function() {
+      selectNote(el.dataset.id);
+    });
+  });
+}
+
+async function selectNote(id) {
+  if (notesState.editor) {
+    destroyEditor(notesState.editor);
+    notesState.editor = null;
+  }
+
+  notesState.activeId = id;
+  renderNoteList(document.getElementById('notes-search') ? document.getElementById('notes-search').value.toLowerCase() : '');
+
+  var pane = document.getElementById('notes-editor-pane');
+  if (!pane) return;
+
+  pane.innerHTML = '<div class="notes-editor-loading">Loading...</div>';
+
+  var base = apiBase();
+  var note = await fetchJson(base + '/notes/' + encodeURIComponent(id));
+  if (!note) {
+    pane.innerHTML = '<div class="notes-empty-state"><p>Note not found</p></div>';
+    return;
+  }
+
+  pane.innerHTML =
+    '<div class="notes-header-bar">' +
+      '<input type="text" class="notes-title-input" id="notes-title" placeholder="Untitled" value="' + escHtml(note.title || '') + '">' +
+      '<span class="notes-meta">' + escHtml(note.updated || note.created || '') + '</span>' +
+    '</div>' +
+    '<div class="notes-editorjs-wrap" id="notes-editorjs"></div>' +
+    '<div class="notes-editor-footer">' +
+      '<button class="btn btn-danger btn-sm" id="notes-delete">Delete</button>' +
+      '<span style="flex:1"></span>' +
+      '<button class="btn btn-primary" id="notes-save">Save</button>' +
+    '</div>';
+
+  notesState.editor = initEditor('notes-editorjs', note.content || '', {
+    placeholder: 'Type / for commands...',
+    autofocus: true,
+    onChange: function() { notesState.dirty = true; }
+  });
+  notesState.dirty = false;
+
+  document.getElementById('notes-save').addEventListener('click', saveCurrentNote);
+  document.getElementById('notes-delete').addEventListener('click', function() {
+    deleteCurrentNote(id);
+  });
+
+  // Ctrl/Cmd+S to save
+  pane.addEventListener('keydown', function(e) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+      e.preventDefault();
+      saveCurrentNote();
+    }
+  });
+}
+
+async function saveCurrentNote() {
+  if (!notesState.activeId) return;
+
+  var titleEl = document.getElementById('notes-title');
+  var title = titleEl ? titleEl.value : '';
+  var content = notesState.editor ? await getEditorMarkdown(notesState.editor) : '';
+
+  var updates = {};
+  var current = notesState.notes.find(function(n) { return n.id === notesState.activeId; });
+  if (title && (!current || title !== current.title)) updates.title = title;
+  updates.content = content;
+  updates.updated = new Date().toISOString().split('T')[0];
+
+  var ok = await patchItem('notes', notesState.activeId, updates);
+  if (ok) {
+    notesState.dirty = false;
+    await loadNoteList();
+  }
+}
+
+async function createNewNote() {
+  var result = await createItem('notes', { title: 'Untitled', content: '' });
+  if (result && result.id) {
+    await loadNoteList();
+    selectNote(result.id);
+  }
+}
+
+async function deleteCurrentNote(id) {
+  if (!confirm('Delete this note?')) return;
+  var ok = await deleteItem('notes', id);
+  if (ok) {
+    if (notesState.editor) {
+      destroyEditor(notesState.editor);
+      notesState.editor = null;
+    }
+    notesState.activeId = null;
+    await loadNoteList();
+    var pane = document.getElementById('notes-editor-pane');
+    if (pane) {
+      pane.innerHTML =
+        '<div class="notes-empty-state">' +
+          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:48px;height:48px;opacity:.3;margin-bottom:12px"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>' +
+          '<p>Select a note or create a new one</p>' +
+        '</div>';
+    }
+  }
+}

package/src/client/overview.js

@@ -0,0 +1,104 @@
+/* ══════════════════════════════════════════════════════════════
+   OVERVIEW VIEW
+   ══════════════════════════════════════════════════════════════ */
+async function renderOverview() {
+  var c = document.getElementById('overview-container');
+  if (!D.loaded) { c.innerHTML = '<div class="loading-container"><div class="skeleton skeleton-card" style="height:200px"></div></div>'; return; }
+
+  // Fetch overview data
+  var overviewMs = await fetchJson('/api/overview/milestones') || [];
+  var overviewLinks = await fetchJson('/api/overview/links');
+  var overviewMetrics = await fetchJson('/api/overview/metrics');
+
+  D.overviewLinks = overviewLinks;
+
+  var html = '<h2 style="margin-bottom:16px;font-size:16px;font-weight:700">Workspace Overview</h2>';
+
+  // Global Milestones
+  html += '<h3 style="font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);font-weight:600;margin:16px 0 8px">Global Milestones</h3>';
+  if (overviewMs.length > 0) {
+    html += overviewMs.map(function(ms) {
+      var pct = ms.combinedProgress != null ? ms.combinedProgress : (ms.progress || 0);
+      var tracked = ms.tracked || [];
+      var trackedHtml = '';
+      if (tracked.length > 0) {
+        trackedHtml = '<div class="tracked-ms"><div class="tracked-ms-header">Tracked Sub-Milestones</div>' +
+          tracked.map(function(t) {
+            return '<div class="tracked-ms-item"><span class="dot" style="background:' + (t.sourceColor || 'var(--accent)') + '"></span>' +
+              '<span style="font-size:12px;flex:1">' + escHtml(t.title || t.id || '') + '</span>' +
+              '<div class="progress progress-accent" style="width:80px"><div class="progress-fill" style="width:' + t.progress + '%;background:' + (t.sourceColor || 'var(--accent)') + '"></div></div>' +
+              '<span class="tracked-ms-pct">' + t.progress + '%</span></div>';
+          }).join('') + '</div>';
+      }
+      return '<div class="ms-card">' +
+        '<div class="ms-header"><h2>' + milestoneIcon(ms.status) + ' ' + escHtml(ms.title || ms.id || '') + '</h2>' +
+        '<span class="badge ' + badgeClass('badge', ms.status) + '">' + escHtml(ms.status || '') + '</span>' +
+        (ms.deadline ? '<span class="ms-deadline">' + fmtDate(ms.deadline) + '</span>' : '') + '</div>' +
+        '<div class="ms-progress"><div class="progress-label"><span>' + (ms.completedCount || 0) + ' / ' + (ms.featureCount || 0) + ' tasks</span><span>' + pct + '%</span></div>' +
+        '<div class="progress progress-lg progress-success"><div class="progress-fill" style="width:' + pct + '%"></div></div></div>' +
+        trackedHtml + '</div>';
+    }).join('');
+  } else {
+    html += '<div style="color:var(--text3);padding:8px 0">No milestones found across sources.</div>';
+  }
+
+  // Cross-project links
+  if (overviewLinks && overviewLinks.links && overviewLinks.links.length > 0) {
+    html += '<h3 style="font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);font-weight:600;margin:24px 0 8px">Cross-Project Links</h3>';
+    html += '<div class="metrics-grid">';
+    var linkGroups = {};
+    overviewLinks.links.forEach(function(l) {
+      var key = (l.fromSource || 'unknown');
+      if (!linkGroups[key]) linkGroups[key] = [];
+      linkGroups[key].push(l);
+    });
+    Object.keys(linkGroups).forEach(function(src) {
+      var links = linkGroups[src];
+      html += '<div class="metric-card"><h3>' + escHtml(src) + ' Links</h3>';
+      html += links.map(function(l) {
+        return '<div class="health-row"><span style="font-size:12px;font-family:var(--mono)">' + escHtml(l.from || '') + '</span>' +
+          '<span style="color:var(--text3);margin:0 4px">&rarr;</span>' +
+          '<span class="link-chip" data-link="' + escHtml(l.to || '') + '">' +
+          '<span class="link-chip-dot" style="background:var(--accent)"></span>' + escHtml(l.to || '') + '</span></div>';
+      }).join('');
+      html += '</div>';
+    });
+    html += '</div>';
+  }
+
+  // Source metrics
+  if (overviewMetrics && overviewMetrics.sources) {
+    html += '<h3 style="font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);font-weight:600;margin:24px 0 8px">Source Metrics</h3>';
+    html += '<div class="metrics-grid">';
+    Object.keys(overviewMetrics.sources).forEach(function(key) {
+      var m = overviewMetrics.sources[key];
+      var pct = m.totalTasks > 0 ? Math.round((m.completedTasks / m.totalTasks) * 100) : 0;
+      html += '<div class="metric-card" style="border-left:3px solid ' + (m.color || 'var(--accent)') + '">' +
+        '<h3>' + escHtml(m.label || key) + '</h3>' +
+        '<div class="health-row"><div class="health-label">Tasks</div><div class="health-val">' + m.totalTasks + '</div></div>' +
+        '<div class="health-row"><div class="health-label">Completed</div><div class="health-val">' + m.completedTasks + '</div></div>' +
+        '<div class="health-row"><div class="health-label">Points</div><div class="health-val">' + m.totalPoints + '</div></div>' +
+        '<div class="progress progress-lg progress-success" style="margin-top:8px"><div class="progress-fill" style="width:' + pct + '%;background:' + (m.color || 'var(--success)') + '"></div></div>' +
+        '</div>';
+    });
+    html += '</div>';
+  }
+
+  c.innerHTML = html;
+
+  // Click handlers for link chips
+  c.querySelectorAll('.link-chip[data-link]').forEach(function(chip) {
+    chip.addEventListener('click', function() {
+      var ref = chip.dataset.link;
+      var parts = ref.split(':');
+      if (parts.length === 2) {
+        switchSource(parts[0]);
+        // After switch, try to find and open the item
+        setTimeout(function() {
+          var task = D.tasks.find(function(t) { return t.id === ref || t.id === parts[1]; });
+          if (task) openPanel('tasks', task);
+        }, 500);
+      }
+    });
+  });
+}