design-share 0.3.0 → 0.3.1

package/README.md

@@ -62,3 +62,7 @@ Quitting with Ctrl+C in the terminal is respected as a deliberate stop. Closing
 ## Requirements
 
 Node 18 or newer, git, and a repo with an origin remote (solo local mode works without one).
+
+---
+
+Built by [Callebe](https://github.com/callebe01). If design-share saves your team some friction, you can [buy me a coffee](https://buymeacoffee.com/callebe).

package/package.json

@@ -1,9 +1,15 @@
 {
   "name": "design-share",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Live branch previews and pinned comments for design teams. Zero config, no server, git is the backend.",
   "keywords": ["design", "preview", "branches", "collaboration", "cli"],
   "license": "MIT",
+  "funding": "https://buymeacoffee.com/callebe",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/callebe01/design-share.git"
+  },
+  "homepage": "https://github.com/callebe01/design-share#readme",
   "type": "module",
   "bin": {
     "design-share": "bin/design-share.js"

package/public/app.js

@@ -10,6 +10,62 @@ const icons = {
   eye: '<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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>',
 };
 
+/* ---------- PR panel (read only) ---------- */
+
+function renderPrChip() {
+  const chip = el('pr-chip');
+  const sel = state.selected;
+  const pr = sel && state.board.prs ? state.board.prs[sel.branch] : null;
+  chip.hidden = !pr;
+  if (pr) {
+    const open = !el('pr-panel').hidden;
+    chip.innerHTML = `PR #${pr.number} <span class="chev">${open ? '▴' : '▾'}</span>`;
+    chip.title = pr.title || '';
+  } else {
+    el('pr-panel').hidden = true;
+  }
+}
+
+async function togglePrPanel(force) {
+  const panel = el('pr-panel');
+  const show = force !== undefined ? force : panel.hidden;
+  if (!show) { panel.hidden = true; renderPrChip(); return; }
+  const sel = state.selected;
+  if (!sel) return;
+  panel.innerHTML = '<div class="pr-loading"><div class="spinner"></div></div>';
+  panel.hidden = false;
+  renderPrChip();
+  const r = await fetch(`/api/pr?branch=${encodeURIComponent(sel.branch)}`).then((x) => x.json());
+  if (panel.hidden) return; // closed while loading
+  if (!r.pr) {
+    panel.innerHTML = '<div class="pr-loading">Could not load the PR right now.</div>';
+    return;
+  }
+  const pr = r.pr;
+  const stateCls = pr.state === 'OPEN' ? 'live' : pr.state === 'MERGED' ? 'merged' : 'closed';
+  panel.innerHTML = `
+    <div class="pr-head">
+      <span class="dot ${stateCls}"></span>
+      <span class="pr-title">${escapeHtml(pr.title)}</span>
+      <span class="pr-num">#${pr.number}</span>
+      <a class="pr-open" href="${escapeHtml(pr.url)}" target="_blank" rel="noopener">Open on GitHub</a>
+    </div>
+    <div class="pr-byline">${escapeHtml(pr.author)} · ${escapeHtml(pr.state.toLowerCase())} · ${timeAgo(Date.parse(pr.createdAt) / 1000)}</div>
+    ${pr.body ? `<div class="pr-body">${escapeHtml(pr.body)}</div>` : '<div class="pr-body dim-note">No description.</div>'}
+    ${pr.comments.length ? `
+      <div class="pr-comments-label">Comments (${pr.comments.length})</div>
+      ${pr.comments.map((c) => `
+        <div class="pr-comment">
+          <div class="pr-comment-head">
+            <span class="avatar">${escapeHtml((c.author || '?').slice(0, 1))}</span>
+            <b>${escapeHtml(c.author)}</b>
+            <span class="pr-comment-time">${timeAgo(Date.parse(c.createdAt) / 1000)}</span>
+          </div>
+          <div class="pr-comment-body">${escapeHtml(c.body)}</div>
+        </div>`).join('')}` : '<div class="dim-note" style="margin-top:8px">No comments on the PR yet.</div>'}
+  `;
+}
+
 /* ---------- review requests ---------- */
 
 function branchRequests(branch) {
@@ -271,6 +327,7 @@ function branchRow({ user, branch, time, dim, own }) {
 
 async function select(user, branch) {
   state.selected = { user, branch };
+  el('pr-panel').hidden = true;
   state.commentMode = false;
   state.pendingPin = null;
   state.focusedComment = null;
@@ -358,6 +415,7 @@ function renderStage() {
   }
 
   renderRequestButton();
+  renderPrChip();
 
   const cm = el('btn-comment-mode');
   cm.innerHTML = `${icons.message} <span>${state.commentMode ? 'Click an element to pin' : 'Comment'}</span>`;
@@ -668,6 +726,7 @@ el('btn-retry').onclick = () => pollPreview();
 document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') {
     if (!el('composer').hidden) closeComposer();
+    else if (!el('pr-panel').hidden) togglePrPanel(false);
     else if (state.commentMode) { state.commentMode = false; renderStage(); }
     else if (state.focusedComment) {
       state.focusedComment = null;
@@ -722,9 +781,25 @@ function parseHash() {
     state.railFilter = e.target.value;
     renderRail();
   });
+  const setRailCollapsed = (collapsed) => {
+    document.getElementById('app').classList.toggle('rail-collapsed', collapsed);
+    el('btn-expand').hidden = !collapsed;
+    try { localStorage.setItem('ds-rail-collapsed', collapsed ? '1' : ''); } catch { /* private mode */ }
+  };
+  el('btn-collapse').onclick = () => setRailCollapsed(true);
+  el('btn-expand').onclick = () => setRailCollapsed(false);
+  try { if (localStorage.getItem('ds-rail-collapsed') === '1') setRailCollapsed(true); } catch { /* private mode */ }
+  document.addEventListener('keydown', (e) => {
+    if (e.key === '[' && !isTyping()) {
+      setRailCollapsed(!document.getElementById('app').classList.contains('rail-collapsed'));
+    }
+  });
+
   el('btn-request').onclick = (e) => { e.stopPropagation(); toggleRequestPopover(); };
+  el('pr-chip').onclick = (e) => { e.stopPropagation(); togglePrPanel(); };
   document.addEventListener('click', (e) => {
     if (!el('request-popover').hidden && !e.target.closest('.request-wrap')) toggleRequestPopover(false);
+    if (!el('pr-panel').hidden && !e.target.closest('#pr-panel') && !e.target.closest('#pr-chip')) togglePrPanel(false);
   });
   renderViewportSeg();
   await refresh();

package/public/index.html

@@ -12,6 +12,9 @@
     <div class="rail-head">
       <span class="logo-mark"></span>
       <span id="repo-name" class="repo-name">…</span>
+      <button id="btn-collapse" class="icon-btn" title="Collapse sidebar [">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
+      </button>
     </div>
     <div class="rail-filter">
       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
@@ -20,14 +23,22 @@
     <div id="rail-sections"></div>
     <div class="rail-foot">
       <div id="sync-status" class="sync-status"></div>
+      <a class="coffee-link" href="https://buymeacoffee.com/callebe" target="_blank" rel="noopener">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2v2"/><path d="M14 2v2"/><path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"/><path d="M6 2v2"/></svg>
+        buy me a coffee
+      </a>
     </div>
   </aside>
 
   <main id="stage">
     <header id="stage-head">
       <div class="stage-title-wrap">
+        <button id="btn-expand" class="icon-btn" title="Show sidebar [" hidden>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
+        </button>
         <span id="stage-title" class="stage-title">pick a branch</span>
         <span id="stage-meta" class="stage-meta"></span>
+        <button id="pr-chip" class="pr-chip" hidden></button>
       </div>
       <div class="stage-actions">
         <div class="seg" id="viewport-seg"></div>
@@ -38,6 +49,7 @@
         <button class="btn" id="btn-comment-mode"></button>
       </div>
     </header>
+    <div id="pr-panel" hidden></div>
     <div id="frame-area">
       <div id="frame-wrap">
         <div id="frame-empty" class="frame-state">

package/public/style.css

@@ -65,7 +65,23 @@ button { font: inherit; cursor: pointer; }
   background: #fff;
 }
 
-.repo-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.repo-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text-3);
+  flex: none;
+}
+.icon-btn:hover { color: var(--text); background: #f2f2f4; }
+
+#app.rail-collapsed #rail { display: none; }
 
 .rail-filter {
   display: flex;
@@ -137,6 +153,75 @@ button { font: inherit; cursor: pointer; }
 
 .badge.review { color: var(--amber); border-color: #ecd9b8; background: #fdf8ee; }
 
+.pr-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10.5px;
+  color: var(--text-2);
+  border: 1px solid var(--border);
+  border-radius: 99px;
+  padding: 0 8px;
+  line-height: 17px;
+  background: #fff;
+  cursor: pointer;
+  flex: none;
+}
+.pr-chip:hover { color: var(--text); border-color: #d0d0d5; }
+.pr-chip .chev { font-size: 8px; color: var(--text-3); }
+
+#pr-panel {
+  position: absolute;
+  top: 46px;
+  left: 14px;
+  width: min(560px, calc(100% - 28px));
+  max-height: 55vh;
+  overflow-y: auto;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 0 0 10px 10px;
+  border-top: 0;
+  box-shadow: var(--shadow);
+  padding: 12px 14px;
+  z-index: 15;
+}
+#stage { position: relative; }
+
+.pr-loading { display: flex; justify-content: center; padding: 18px; color: var(--text-3); font-size: 12px; }
+.pr-head { display: flex; align-items: center; gap: 8px; }
+.pr-head .dot.merged { background: #8250df; }
+.pr-head .dot.closed { background: var(--red); }
+.pr-title { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; }
+.pr-num { font-size: 11.5px; color: var(--text-3); flex: none; }
+.pr-open { font-size: 11.5px; flex: none; color: var(--text-2); text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 8px; }
+.pr-open:hover { color: var(--text); border-color: #d0d0d5; }
+.pr-byline { font-size: 11.5px; color: var(--text-3); margin: 4px 0 8px; }
+.pr-body {
+  font-size: 12.5px;
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-word;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 9px 11px;
+  background: #fafafa;
+  max-height: 220px;
+  overflow-y: auto;
+}
+.dim-note { font-size: 12px; color: var(--text-3); }
+.pr-comments-label {
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-3);
+  margin: 12px 0 6px;
+}
+.pr-comment { border-top: 1px solid var(--border); padding: 8px 0; }
+.pr-comment-head { display: flex; align-items: center; gap: 7px; font-size: 12px; margin-bottom: 3px; }
+.pr-comment-time { font-size: 10.5px; color: var(--text-3); }
+.pr-comment-body { font-size: 12.5px; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
+
 .request-wrap { position: relative; }
 #request-popover {
   position: absolute;
@@ -224,9 +309,19 @@ button { font: inherit; cursor: pointer; }
 }
 .share-cta:hover { color: var(--text); border-color: #d0d0d5; }
 
-.rail-foot { border-top: 1px solid var(--border); padding: 8px 16px; }
+.rail-foot { border-top: 1px solid var(--border); padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; }
 .sync-status { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
 .sync-status .dot { width: 6px; height: 6px; }
+.coffee-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10.5px;
+  color: var(--text-3);
+  text-decoration: none;
+  width: fit-content;
+}
+.coffee-link:hover { color: var(--text-2); }
 
 /* ---------- stage ---------- */
 
@@ -307,12 +402,17 @@ button { font: inherit; cursor: pointer; }
   max-width: 100%;
   background: var(--panel);
   transition: max-width 0.18s ease;
+  min-height: 100%;
+}
+#frame-wrap.vw-tablet,
+#frame-wrap.vw-mobile {
+  margin: 0 auto;
+  box-shadow: var(--shadow);
   border-left: 1px solid var(--border);
   border-right: 1px solid var(--border);
-  min-height: 100%;
 }
-#frame-wrap.vw-tablet { max-width: 834px; margin: 0 auto; box-shadow: var(--shadow); }
-#frame-wrap.vw-mobile { max-width: 390px; margin: 0 auto; box-shadow: var(--shadow); }
+#frame-wrap.vw-tablet { max-width: 834px; }
+#frame-wrap.vw-mobile { max-width: 390px; }
 
 #frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
 

package/src/github.js

@@ -3,6 +3,37 @@ import { execFile } from 'node:child_process';
 // PR links come from the gh CLI so no tokens are stored or handled: gh uses
 // whoever is already logged in. Machines without gh (or without auth) simply
 // return an empty map and the dashboard shows no PR links.
+// Read only PR detail for the header panel: description plus conversation.
+export function prDetail(repoRoot, number) {
+  return new Promise((resolve) => {
+    execFile('gh', [
+      'pr', 'view', String(number),
+      '--json', 'number,title,body,state,author,url,createdAt,comments',
+    ], { cwd: repoRoot, timeout: 15_000 }, (err, stdout) => {
+      if (err) return resolve(null);
+      try {
+        const d = JSON.parse(stdout);
+        resolve({
+          number: d.number,
+          title: d.title,
+          body: d.body || '',
+          state: d.state,
+          url: d.url,
+          author: (d.author && d.author.login) || '',
+          createdAt: d.createdAt,
+          comments: (d.comments || []).map((c) => ({
+            author: (c.author && c.author.login) || '',
+            body: c.body || '',
+            createdAt: c.createdAt,
+          })),
+        });
+      } catch {
+        resolve(null);
+      }
+    });
+  });
+}
+
 export function listOpenPRs(repoRoot) {
   return new Promise((resolve) => {
     execFile('gh', [

package/src/server.js

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'node:url';
 import { tryGit } from './git.js';
 import { currentBranch } from './detect.js';
 import { serveStatic } from './previews.js';
-import { listOpenPRs } from './github.js';
+import { listOpenPRs, prDetail } from './github.js';
 
 const PUBLIC_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'public');
 const SYNC_INTERVAL_MS = 15_000;
@@ -110,6 +110,19 @@ export class DesignShareServer {
         if (req.method === 'GET' && p === '/api/board') {
           return json(res, 200, await this.board());
         }
+        if (req.method === 'GET' && p === '/api/pr') {
+          const branch = url.searchParams.get('branch') || '';
+          const pr = this.prs[branch];
+          if (!pr) return json(res, 200, { pr: null });
+          this._prDetailCache = this._prDetailCache || new Map();
+          const cached = this._prDetailCache.get(pr.number);
+          if (cached && Date.now() - cached.at < 120_000) {
+            return json(res, 200, { pr: cached.data });
+          }
+          const data = await prDetail(this.repo.root, pr.number);
+          if (data) this._prDetailCache.set(pr.number, { at: Date.now(), data });
+          return json(res, 200, { pr: data });
+        }
         if (req.method === 'POST' && p === '/api/share') {
           const body = await readBody(req);
           const branch = body.branch || (await currentBranch(this.repo.root));