design-share 0.1.0

package/public/app.js

@@ -0,0 +1,526 @@
+/* design-share dashboard */
+
+const icons = {
+  monitor: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>',
+  tablet: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="12" x2="12.01" y1="18" y2="18"/></svg>',
+  smartphone: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2"/><path d="M12 18h.01"/></svg>',
+  message: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>',
+  check: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>',
+  plus: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>',
+};
+
+const el = (id) => document.getElementById(id);
+const state = {
+  board: null,
+  selected: null,          // { user, branch }
+  viewport: 'desktop',
+  commentMode: false,
+  pendingPin: null,        // { xPct, yPct }
+  focusedComment: null,
+  previewStatus: null,
+  frameUrl: null,
+};
+
+const VIEWPORTS = [
+  { key: 'desktop', icon: 'monitor', title: 'Desktop' },
+  { key: 'tablet', icon: 'tablet', title: 'Tablet · 834' },
+  { key: 'mobile', icon: 'smartphone', title: 'Mobile · 390' },
+];
+
+function timeAgo(tsSeconds) {
+  if (!tsSeconds) return '';
+  const s = Math.max(1, Math.floor(Date.now() / 1000 - tsSeconds));
+  if (s < 60) return 'now';
+  if (s < 3600) return `${Math.floor(s / 60)}m`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h`;
+  return `${Math.floor(s / 86400)}d`;
+}
+
+function toast(msg) {
+  const t = document.createElement('div');
+  t.className = 'toast';
+  t.textContent = msg;
+  document.body.appendChild(t);
+  setTimeout(() => t.remove(), 1800);
+}
+
+async function api(path, body) {
+  const res = await fetch(path, body
+    ? { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }
+    : undefined);
+  return res.json();
+}
+
+function isTyping() {
+  const a = document.activeElement;
+  return a && (a.tagName === 'TEXTAREA' || a.tagName === 'INPUT');
+}
+
+function slugify(name) {
+  return (name || '').toLowerCase().replace(/[^a-z0-9]+/g, '') || 'someone';
+}
+
+function branchComments(branch) {
+  if (!state.board) return [];
+  return state.board.comments
+    .filter((c) => c.branch === branch)
+    .sort((a, b) => a.createdAt - b.createdAt);
+}
+
+function openCount(branch) {
+  return branchComments(branch).filter((c) => !c.resolvedAt).length;
+}
+
+/* ---------- rail ---------- */
+
+function renderRail() {
+  const b = state.board;
+  el('repo-name').textContent = b.repo.name;
+
+  const sections = el('rail-sections');
+  const frag = document.createDocumentFragment();
+
+  const shares = b.shares.slice().sort((x, y) => (y.updatedAt || 0) - (x.updatedAt || 0));
+  const byUser = new Map();
+  for (const s of shares) {
+    if (!byUser.has(s.user)) byUser.set(s.user, { name: s.name, items: [] });
+    byUser.get(s.user).items.push(s);
+  }
+
+  // Me first
+  const order = [...byUser.keys()].sort((x, y) => (x === b.me.slug ? -1 : y === b.me.slug ? 1 : 0));
+
+  const ownShared = byUser.has(b.me.slug) && byUser.get(b.me.slug).items.some((s) => s.branch === b.ownBranch);
+  if (b.ownBranch && !ownShared) {
+    const label = document.createElement('div');
+    label.className = 'rail-section-label';
+    label.textContent = 'you';
+    frag.appendChild(label);
+    frag.appendChild(branchRow({
+      user: b.me.slug, branch: b.ownBranch, own: true,
+      time: b.heads[b.ownBranch] ? b.heads[b.ownBranch].time : null,
+    }));
+    const cta = document.createElement('button');
+    cta.className = 'share-cta';
+    cta.innerHTML = `${icons.plus}  share ${escapeHtml(b.ownBranch)} with the board`;
+    cta.onclick = async () => {
+      await api('/api/share', { branch: b.ownBranch });
+      toast('Shared with the team board');
+      refresh();
+    };
+    frag.appendChild(cta);
+  }
+
+  for (const user of order) {
+    const group = byUser.get(user);
+    const label = document.createElement('div');
+    label.className = 'rail-section-label';
+    label.textContent = user === b.me.slug ? `${group.name} (you)` : group.name;
+    frag.appendChild(label);
+    for (const s of group.items) {
+      frag.appendChild(branchRow({
+        user: s.user, branch: s.branch,
+        time: b.heads[s.branch] ? b.heads[s.branch].time : s.updatedAt / 1000,
+      }));
+    }
+  }
+
+  if (b.otherBranches.length) {
+    const label = document.createElement('div');
+    label.className = 'rail-section-label';
+    label.textContent = 'other branches';
+    frag.appendChild(label);
+    for (const o of b.otherBranches.slice(0, 12)) {
+      frag.appendChild(branchRow({
+        user: slugify(o.author), branch: o.branch, time: o.time, dim: true,
+      }));
+    }
+  }
+
+  sections.replaceChildren(frag);
+
+  const sync = el('sync-status');
+  if (!b.sync.hasRemote) {
+    sync.innerHTML = '<span class="dot idle"></span> local only · no origin remote';
+  } else if (b.sync.lastSyncError) {
+    sync.innerHTML = '<span class="dot starting"></span> sync retrying…';
+    sync.title = b.sync.lastSyncError;
+  } else {
+    sync.innerHTML = '<span class="dot live"></span> synced through git';
+  }
+}
+
+function branchRow({ user, branch, time, dim, own }) {
+  const b = state.board;
+  const key = `${user}/${branch}`;
+  const btn = document.createElement('button');
+  btn.className = 'branch-row' + (dim ? ' dim' : '');
+  const sel = state.selected;
+  if (sel && sel.user === user && sel.branch === branch) btn.classList.add('selected');
+
+  const prev = b.previews[key];
+  const isOwnServing = own || (user === b.me.slug && branch === b.ownBranch);
+  let dotCls = 'idle';
+  if (prev && prev.status === 'ready') dotCls = 'live';
+  else if (prev && prev.status === 'starting') dotCls = 'starting';
+  else if (isOwnServing && prev && prev.status === 'ready') dotCls = 'live';
+
+  const unresolved = openCount(branch);
+  btn.innerHTML = `
+    <span class="dot ${dotCls}"></span>
+    <span class="branch-label">${escapeHtml(branch)}</span>
+    ${unresolved ? `<span class="badge">${unresolved}</span>` : ''}
+    <span class="meta">${timeAgo(time)}</span>`;
+  btn.onclick = () => select(user, branch);
+  return btn;
+}
+
+/* ---------- selection + preview ---------- */
+
+async function select(user, branch) {
+  state.selected = { user, branch };
+  state.commentMode = false;
+  state.pendingPin = null;
+  state.focusedComment = null;
+  state.frameUrl = null;
+  location.hash = `#/u/${encodeURIComponent(user)}/${encodeURIComponent(branch)}`;
+  el('frame').hidden = true;
+  el('frame').src = 'about:blank';
+  renderAll();
+  pollPreview();
+}
+
+let previewPollToken = 0;
+async function pollPreview() {
+  const token = ++previewPollToken;
+  const sel = state.selected;
+  if (!sel) return;
+  while (token === previewPollToken && state.selected === sel) {
+    const r = await api('/api/preview/start', { user: sel.user, branch: sel.branch });
+    if (token !== previewPollToken) return;
+    state.previewStatus = r;
+    renderStage();
+    if (r.status === 'ready') return;
+    if (r.status === 'error') return;
+    await new Promise((ok) => setTimeout(ok, 1500));
+  }
+}
+
+function renderStage() {
+  const sel = state.selected;
+  const b = state.board;
+  const frame = el('frame');
+  const wrap = el('frame-wrap');
+
+  wrap.className = state.viewport === 'desktop' ? '' : `vw-${state.viewport}`;
+
+  el('frame-empty').hidden = !!sel;
+  const ps = state.previewStatus;
+
+  if (!sel) {
+    el('stage-title').textContent = 'pick a branch';
+    el('stage-meta').textContent = '';
+    el('frame-loading').hidden = true;
+    el('frame-error').hidden = true;
+    frame.hidden = true;
+    renderPins();
+    return;
+  }
+
+  const share = b.shares.find((s) => s.user === sel.user && s.branch === sel.branch);
+  const authorName = share ? share.name : (sel.user === b.me.slug ? b.me.name : sel.user);
+  const head = b.heads[sel.branch];
+  el('stage-title').textContent = sel.branch;
+  el('stage-meta').textContent = `${authorName}${head ? ' · updated ' + timeAgo(head.time) : ''}${sel.user === b.me.slug && sel.branch === b.ownBranch ? ' · your working copy' : ''}`;
+
+  const loading = el('frame-loading');
+  const error = el('frame-error');
+
+  if (ps && ps.status === 'ready' && ps.url) {
+    loading.hidden = true;
+    error.hidden = true;
+    if (state.frameUrl !== ps.url) {
+      state.frameUrl = ps.url;
+      frame.src = ps.url;
+    }
+    frame.hidden = false;
+  } else if (ps && ps.status === 'error') {
+    loading.hidden = true;
+    error.hidden = false;
+    frame.hidden = true;
+    el('error-sub').textContent = ps.error || 'The preview process did not start.';
+    el('error-log').textContent = (ps.logTail || '').trim();
+  } else {
+    loading.hidden = false;
+    error.hidden = true;
+    frame.hidden = true;
+    const own = sel.user === b.me.slug && sel.branch === b.ownBranch;
+    el('loading-title').textContent = own ? 'Starting your preview' : `Starting ${sel.branch}`;
+    el('loading-sub').textContent = own
+      ? 'Booting the dev server for your working copy.'
+      : 'Checking the branch out into a hidden worktree and booting its preview. First open can take a moment.';
+    el('loading-log').textContent = ps && ps.logTail ? ps.logTail.trim() : '';
+  }
+
+  const cm = el('btn-comment-mode');
+  cm.innerHTML = `${icons.message} <span>${state.commentMode ? 'Click to place pin' : 'Comment'}</span>`;
+  cm.classList.toggle('active-mode', state.commentMode);
+  el('pin-layer').classList.toggle('capture', state.commentMode);
+
+  renderPins();
+}
+
+/* ---------- pins ---------- */
+
+function renderPins() {
+  const layer = el('pin-layer');
+  layer.querySelectorAll('.pin').forEach((p) => p.remove());
+  const sel = state.selected;
+  if (!sel || el('frame').hidden) return;
+  const comments = branchComments(sel.branch);
+  comments.forEach((c, i) => {
+    if (c.resolvedAt && state.focusedComment !== c.id) return;
+    if (c.xPct == null) return;
+    const pin = document.createElement('div');
+    pin.className = 'pin' + (c.resolvedAt ? ' resolved' : '') + (state.focusedComment === c.id ? ' focused' : '');
+    pin.style.left = c.xPct + '%';
+    pin.style.top = c.yPct + '%';
+    pin.innerHTML = `<span>${i + 1}</span>`;
+    pin.onclick = (e) => {
+      e.stopPropagation();
+      state.focusedComment = c.id;
+      renderComments();
+      renderPins();
+      const card = document.querySelector(`[data-comment="${c.id}"]`);
+      if (card) card.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    };
+    layer.appendChild(pin);
+  });
+}
+
+el('pin-layer').addEventListener('click', (e) => {
+  if (!state.commentMode || !state.selected) return;
+  const rect = el('pin-layer').getBoundingClientRect();
+  const xPct = ((e.clientX - rect.left) / rect.width) * 100;
+  const yPct = ((e.clientY - rect.top) / rect.height) * 100;
+  state.pendingPin = { xPct, yPct };
+  const composer = el('composer');
+  composer.hidden = false;
+  composer.style.left = Math.min(xPct, 72) + '%';
+  composer.style.top = Math.min(yPct + 2, 80) + '%';
+  el('composer-text').value = '';
+  el('composer-text').focus();
+});
+
+async function postComment() {
+  const text = el('composer-text').value.trim();
+  const sel = state.selected;
+  if (!text || !sel || !state.pendingPin) return;
+  const rect = el('pin-layer').getBoundingClientRect();
+  await api('/api/comments', {
+    targetUser: sel.user,
+    branch: sel.branch,
+    route: state.frameUrl ? new URL(state.frameUrl).pathname : '/',
+    xPct: state.pendingPin.xPct,
+    yPct: state.pendingPin.yPct,
+    viewportLabel: state.viewport,
+    viewportW: Math.round(rect.width),
+    viewportH: Math.round(rect.height),
+    text,
+  });
+  closeComposer();
+  state.commentMode = false;
+  await refresh();
+  toast('Pinned. The author will see it on their board.');
+}
+
+function closeComposer() {
+  el('composer').hidden = true;
+  state.pendingPin = null;
+}
+
+el('composer-post').onclick = postComment;
+el('composer-cancel').onclick = () => { closeComposer(); };
+el('composer-text').addEventListener('keydown', (e) => {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') postComment();
+  if (e.key === 'Escape') closeComposer();
+});
+
+/* ---------- comments panel ---------- */
+
+function renderComments() {
+  const sel = state.selected;
+  const list = el('comments-list');
+  if (!sel) {
+    el('comments-count').textContent = '';
+    list.innerHTML = '<div class="empty-note">Comments for the selected branch land here, pinned to the exact spot and commit.</div>';
+    return;
+  }
+  const comments = branchComments(sel.branch);
+  const open = comments.filter((c) => !c.resolvedAt);
+  const resolved = comments.filter((c) => c.resolvedAt);
+  el('comments-count').textContent = open.length ? `${open.length} open` : '';
+
+  const frag = document.createDocumentFragment();
+  if (!comments.length) {
+    const d = document.createElement('div');
+    d.className = 'empty-note';
+    d.textContent = 'No comments yet. Use Comment, then click anywhere on the preview to pin one.';
+    frag.appendChild(d);
+  }
+  comments.forEach((c, i) => {
+    if (!c.resolvedAt) frag.appendChild(commentCard(c, i + 1));
+  });
+  if (resolved.length) {
+    const note = document.createElement('div');
+    note.className = 'section-note';
+    note.textContent = `resolved (${resolved.length})`;
+    frag.appendChild(note);
+    comments.forEach((c, i) => {
+      if (c.resolvedAt) frag.appendChild(commentCard(c, i + 1));
+    });
+  }
+  list.replaceChildren(frag);
+}
+
+function commentCard(c, num) {
+  const b = state.board;
+  const card = document.createElement('div');
+  card.className = 'comment-card' + (c.resolvedAt ? ' resolved' : '') + (state.focusedComment === c.id ? ' focused' : '');
+  card.dataset.comment = c.id;
+
+  const head = b.heads[c.branch];
+  const changed = head && c.commit && head.sha !== c.commit;
+  const initials = (c.name || c.user || '?').slice(0, 1);
+
+  card.innerHTML = `
+    <div class="comment-head">
+      <span class="avatar">${escapeHtml(initials)}</span>
+      <span class="comment-author">${escapeHtml(c.name || c.user)}</span>
+      <span class="comment-num">${num}</span>
+    </div>
+    <div class="comment-text">${escapeHtml(c.text)}</div>
+    <div class="comment-meta">
+      <span>${timeAgo(c.createdAt / 1000)}</span>
+      ${c.viewportLabel ? `<span>· ${escapeHtml(c.viewportLabel)}</span>` : ''}
+      ${c.commit ? `<span>· ${escapeHtml(c.commit.slice(0, 7))}</span>` : ''}
+      ${changed && !c.resolvedAt ? '<span class="chip changed"><span class="dot starting"></span>updated since pin</span>' : ''}
+      ${c.resolvedAt ? `<span class="chip">${icons.check} resolved</span>` : ''}
+    </div>
+    ${(c.replies || []).length ? `<div class="comment-replies">${c.replies.map((r) => `<div class="reply"><b>${escapeHtml(r.name || r.user)}</b> ${escapeHtml(r.text)}</div>`).join('')}</div>` : ''}
+  `;
+
+  const actions = document.createElement('div');
+  actions.className = 'comment-actions';
+  if (!c.resolvedAt) {
+    const resolveBtn = document.createElement('button');
+    resolveBtn.className = 'link-btn resolve';
+    resolveBtn.textContent = changed ? 'Mark fixed' : 'Resolve';
+    resolveBtn.onclick = async () => { await api(`/api/comments/${c.id}/resolve`, { resolved: true }); refresh(); };
+    actions.appendChild(resolveBtn);
+  } else {
+    const reopenBtn = document.createElement('button');
+    reopenBtn.className = 'link-btn';
+    reopenBtn.textContent = 'Reopen';
+    reopenBtn.onclick = async () => { await api(`/api/comments/${c.id}/resolve`, { resolved: false }); refresh(); };
+    actions.appendChild(reopenBtn);
+  }
+  card.appendChild(actions);
+
+  const reply = document.createElement('input');
+  reply.className = 'reply-input';
+  reply.placeholder = 'Reply…';
+  reply.addEventListener('keydown', async (e) => {
+    if (e.key === 'Enter' && reply.value.trim()) {
+      await api(`/api/comments/${c.id}/replies`, { text: reply.value.trim() });
+      reply.value = '';
+      refresh();
+    }
+  });
+  card.appendChild(reply);
+
+  card.onclick = (e) => {
+    if (e.target === reply || e.target.tagName === 'BUTTON') return;
+    state.focusedComment = c.id;
+    renderPins();
+    document.querySelectorAll('.comment-card').forEach((x) => x.classList.remove('focused'));
+    card.classList.add('focused');
+  };
+  return card;
+}
+
+/* ---------- header controls ---------- */
+
+function renderViewportSeg() {
+  const seg = el('viewport-seg');
+  seg.innerHTML = '';
+  for (const v of VIEWPORTS) {
+    const btn = document.createElement('button');
+    btn.innerHTML = icons[v.icon];
+    btn.title = v.title;
+    btn.className = state.viewport === v.key ? 'active' : '';
+    btn.onclick = () => { state.viewport = v.key; renderViewportSeg(); renderStage(); };
+    seg.appendChild(btn);
+  }
+}
+
+el('btn-comment-mode').onclick = () => {
+  if (!state.selected || el('frame').hidden) { toast('Open a preview first'); return; }
+  state.commentMode = !state.commentMode;
+  if (!state.commentMode) closeComposer();
+  renderStage();
+};
+
+el('btn-retry').onclick = () => pollPreview();
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    if (!el('composer').hidden) closeComposer();
+    else if (state.commentMode) { state.commentMode = false; renderStage(); }
+  }
+});
+
+/* ---------- boot + polling ---------- */
+
+function escapeHtml(s) {
+  return String(s ?? '').replace(/[&<>"']/g, (ch) => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+  }[ch]));
+}
+
+function renderAll() {
+  if (!state.board) return;
+  renderRail();
+  renderStage();
+  renderComments();
+}
+
+async function refresh() {
+  try {
+    const board = await fetch('/api/board').then((r) => r.json());
+    state.board = board;
+    if (!isTyping() && el('composer').hidden) {
+      renderAll();
+    } else {
+      renderStage();
+    }
+  } catch { /* server restarting */ }
+}
+
+function parseHash() {
+  const m = location.hash.match(/^#\/u\/([^/]+)\/(.+)$/);
+  if (m) return { user: decodeURIComponent(m[1]), branch: decodeURIComponent(m[2]) };
+  return null;
+}
+
+(async function boot() {
+  renderViewportSeg();
+  await refresh();
+  const target = parseHash();
+  if (target) {
+    select(target.user, target.branch);
+  } else if (state.board && state.board.ownBranch) {
+    select(state.board.me.slug, state.board.ownBranch);
+  }
+  setInterval(refresh, 3000);
+})();

package/public/index.html

@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>design-share</title>
+<link rel="stylesheet" href="/style.css">
+</head>
+<body>
+<div id="app">
+  <aside id="rail">
+    <div class="rail-head">
+      <span class="logo-mark"></span>
+      <span id="repo-name" class="repo-name">…</span>
+    </div>
+    <div id="rail-sections"></div>
+    <div class="rail-foot">
+      <div id="sync-status" class="sync-status"></div>
+    </div>
+  </aside>
+
+  <main id="stage">
+    <header id="stage-head">
+      <div class="stage-title-wrap">
+        <span id="stage-title" class="stage-title">pick a branch</span>
+        <span id="stage-meta" class="stage-meta"></span>
+      </div>
+      <div class="stage-actions">
+        <div class="seg" id="viewport-seg"></div>
+        <button class="btn" id="btn-comment-mode"></button>
+      </div>
+    </header>
+    <div id="frame-area">
+      <div id="frame-wrap">
+        <div id="frame-empty" class="frame-state">
+          <div class="frame-state-title">No branch selected</div>
+          <div class="frame-state-sub">Pick a branch from the left rail to open its live preview.</div>
+        </div>
+        <div id="frame-loading" class="frame-state" hidden>
+          <div class="spinner"></div>
+          <div class="frame-state-title" id="loading-title">Starting preview</div>
+          <div class="frame-state-sub" id="loading-sub">Checking out the branch and booting its dev server.</div>
+          <pre id="loading-log" class="log-tail"></pre>
+        </div>
+        <div id="frame-error" class="frame-state" hidden>
+          <div class="frame-state-title err">Preview could not start</div>
+          <div class="frame-state-sub" id="error-sub"></div>
+          <pre id="error-log" class="log-tail"></pre>
+          <button class="btn" id="btn-retry">Try again</button>
+        </div>
+        <iframe id="frame" title="branch preview" hidden></iframe>
+        <div id="pin-layer"></div>
+        <div id="composer" hidden>
+          <textarea id="composer-text" rows="2" placeholder="Leave a note for the author…"></textarea>
+          <div class="composer-actions">
+            <button class="btn small" id="composer-post">Post</button>
+            <span class="kbd-hint">⌘↵</span>
+            <button class="btn ghost small" id="composer-cancel">Cancel</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <aside id="comments-panel">
+    <div class="panel-head">
+      <span>Comments</span>
+      <span id="comments-count" class="count"></span>
+    </div>
+    <div id="comments-list"></div>
+  </aside>
+</div>
+<script src="/app.js"></script>
+</body>
+</html>