@unbrained/pm-web 2026.9.13 → 2026.9.23

package/public/src/views/github.ts

@@ -3,11 +3,32 @@
 // ═══════════════════════════════════════════════════════════════
 import { state } from '../state.js';
 import { api } from '../api.js';
-import { escHtml } from '../utils.js';
+import { escHtml, resetButton, showError } from '../utils.js';
 import { confirmDialog } from '../components/modals.js';
 import { toast } from '../components/toast.js';
+import { loadItemsBadge } from './projects.js';
 import type { GitHubImportResponse, GitHubIssuesResponse, GitHubIssueRow, GitHubPushResponse, GitHubRepoResponse, ListResponse } from '../api-types.js';
 
+/** Renders a styled result box with a title header and inner HTML body, used
+ * by the push and import result displays. */
+function githubResultBox(title: string, bodyHtml: string): string {
+  return `<div style="background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius);padding:12px">
+    <div style="font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px">${title}</div>
+    ${bodyHtml}
+  </div>`;
+}
+
+/** Toast the result of a GitHub push or import operation with a count and any
+ * errors, matching the pluralisation and error-count format both share. */
+function githubOpToast(verb: string, noun: string, count: number, errors: string[]): void {
+  toast(`${verb} ${count} ${noun}${count!==1?'s':''}${errors.length?' ('+errors.length+' error'+(errors.length!==1?'s':'')+')':''}`, errors.length ? 'info' : 'success');
+}
+
+/** Show result HTML in a result element, making it visible. No-op when null. */
+function showResultEl(el: HTMLElement | null, html: string): void {
+  if (el) { el.style.display = ''; el.innerHTML = html; }
+}
+
 /**
  * Renders the GitHub integration page for the current project: a header, a
  * token-required prompt when the user has no GitHub token, and otherwise the
@@ -150,8 +171,8 @@ export async function linkGitHubRepo(): Promise<void> {
     toast('Repository linked','success');
     renderGitHubView();
   } catch(err: unknown) {
-    if (errEl) { errEl.textContent = err instanceof Error ? err.message : String(err); errEl.style.display = 'block'; }
-    if (btn) { btn.disabled = false; const sp = btn.querySelector('span'); if (sp) sp.textContent = 'Link Repository'; }
+    showError(errEl, err);
+    resetButton(btn, 'Link Repository');
   }
 }
 
@@ -296,21 +317,15 @@ export async function pushItemsToGitHub(): Promise<void> {
     const data = await api<GitHubPushResponse>('POST', `/projects/${state.currentProject!.id}/github/push`, { itemIds });
     const pushed = data.pushed || [];
     const errors = data.errors || [];
-    toast(`Pushed ${pushed.length} item${pushed.length!==1?'s':''}${errors.length?' ('+errors.length+' error'+( errors.length!==1?'s':'')+')':''}`, errors.length ? 'info' : 'success');
-    if (resultEl) {
-      resultEl.style.display = '';
-      resultEl.innerHTML = `
-        <div style="background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius);padding:12px">
-          <div style="font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px">Push Results</div>
-          ${pushed.length > 0 ? `<div style="color:var(--status-closed);font-size:13px;margin-bottom:6px">✓ Pushed ${pushed.length}: ${pushed.map((p)=>`<a href="${escHtml(p.issueUrl)}" target="_blank" style="color:var(--accent)">#${p.issueNumber}</a>`).join(', ')}</div>` : ''}
-          ${errors.length > 0 ? `<div style="color:var(--status-blocked);font-size:13px">✗ ${errors.length} failed: ${errors.map((e)=>escHtml(String(e))).join('; ')}</div>` : ''}
-        </div>`;
-    }
+    githubOpToast('Pushed', 'item', pushed.length, errors);
+    showResultEl(resultEl, githubResultBox('Push Results',
+      `${pushed.length > 0 ? `<div style="color:var(--status-closed);font-size:13px;margin-bottom:6px">✓ Pushed ${pushed.length}: ${pushed.map((p)=>`<a href="${escHtml(p.issueUrl)}" target="_blank" style="color:var(--accent)">#${p.issueNumber}</a>`).join(', ')}</div>` : ''}
+      ${errors.length > 0 ? `<div style="color:var(--status-blocked);font-size:13px">✗ ${errors.length} failed: ${errors.map((e)=>escHtml(String(e))).join('; ')}</div>` : ''}`));
     loadItemsForPush();
   } catch(err: unknown) {
     toast(`Push failed: ${err instanceof Error ? err.message : String(err)}`, 'error');
   } finally {
-    if (btn) { btn.disabled = false; const sp = btn.querySelector('span'); if (sp) sp.textContent = 'Push to GitHub'; }
+    resetButton(btn, 'Push to GitHub');
   }
 }
 
@@ -347,22 +362,14 @@ export async function importGitHubIssues(): Promise<void> {
     const data = await api<GitHubImportResponse>('POST',`/projects/${state.currentProject!.id}/github/import`,{issueNumbers});
     const created = data.created || [];
     const errors = data.errors || [];
-    toast(`Imported ${created.length} issue${created.length!==1?'s':''}${errors.length?' ('+errors.length+' error'+( errors.length!==1?'s':'')+')':''}`, errors.length ? 'info' : 'success');
-    if (resultEl) {
-      resultEl.style.display = '';
-      resultEl.innerHTML = `
-        <div style="background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius);padding:12px">
-          <div style="font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px">Import Results</div>
-          ${created.length > 0 ? `<div style="color:var(--status-closed);font-size:13px;margin-bottom:6px">✓ Created ${created.length} item${created.length!==1?'s':''}: ${created.map((id)=>`<span class="mono" style="font-size:11px">${escHtml(String(id))}</span>`).join(', ')}</div>` : ''}
-          ${errors.length > 0 ? `<div style="color:var(--status-blocked);font-size:13px">✗ ${errors.length} error${errors.length!==1?'s':''}: ${errors.map((e)=>escHtml(String(e))).join('; ')}</div>` : ''}
-        </div>`;
-    }
-    // loadItemsBadge is in projects.ts, import via app bridge
-    const loadBadge = window.__app?.loadItemsBadge;
-    if (loadBadge) loadBadge();
+    githubOpToast('Imported', 'issue', created.length, errors);
+    showResultEl(resultEl, githubResultBox('Import Results',
+      `${created.length > 0 ? `<div style="color:var(--status-closed);font-size:13px;margin-bottom:6px">✓ Created ${created.length} item${created.length!==1?'s':''}: ${created.map((id)=>`<span class="mono" style="font-size:11px">${escHtml(String(id))}</span>`).join(', ')}</div>` : ''}
+      ${errors.length > 0 ? `<div style="color:var(--status-blocked);font-size:13px">✗ ${errors.length} error${errors.length!==1?'s':''}: ${errors.map((e)=>escHtml(String(e))).join('; ')}</div>` : ''}`));
+    void loadItemsBadge();
   } catch(err: unknown) {
     toast(`Import failed: ${err instanceof Error ? err.message : String(err)}`,'error');
   } finally {
-    if (btn) { btn.disabled = false; const sp = btn.querySelector('span'); if (sp) sp.textContent = 'Import Selected'; }
+    resetButton(btn, 'Import Selected');
   }
 }

package/public/src/views/graph-canvas.js

@@ -137,6 +137,11 @@ function escHtml(s) {
         .replace(/>/g, '>')
         .replace(/"/g, '"');
 }
+/** Builds a tag-to-color map from a tag frequency map, assigning palette colors to the most frequent tags in descending order. */
+export function tagColorMapFromFreq(freq) {
+    const top = [...freq.entries()].sort((a, b) => b[1] - a[1]).slice(0, TAG_PALETTE.length).map(([t]) => t);
+    return new Map(top.map((t, i) => [t, TAG_PALETTE[i]]));
+}
 // ═══════════════════════════════════════════════════════════════
 // GraphCanvas class
 // ═══════════════════════════════════════════════════════════════
@@ -548,6 +553,21 @@ export class GraphCanvas {
             return false;
         return a.source.id === b.source.id && a.target.id === b.target.id && a.type === b.type;
     }
+    /** Returns the bidirectional edge key, flag, and curve direction for the given source/target node pair. */
+    edgeBidirInfo(s, t) {
+        const key = [s.id, t.id].sort().join('|');
+        const isBiDir = this.biDirPairs.has(key);
+        const curveDir = isBiDir ? (s.id < t.id ? 1 : -1) : 0;
+        return { key, isBiDir, curveDir };
+    }
+    /** Computes the start and end points of an edge segment, offset from the node radii along the unit direction vector. */
+    edgeEndpoints(s, t, nx, ny) {
+        const x1 = s.x + nx * s.r;
+        const y1 = s.y + ny * s.r;
+        const x2 = t.x - nx * (t.r + 7);
+        const y2 = t.y - ny * (t.r + 7);
+        return { x1, y1, x2, y2 };
+    }
     buildEdgeGeometry(edge) {
         const { source: s, target: t } = edge;
         const dx = t.x - s.x || 0.01;
@@ -557,16 +577,11 @@ export class GraphCanvas {
         const ny = dy / len;
         const px = -dy / len;
         const py = dx / len;
-        const key = [s.id, t.id].sort().join('|');
-        const isBiDir = this.biDirPairs.has(key);
-        const curveDir = isBiDir ? (s.id < t.id ? 1 : -1) : 0;
+        const { key, isBiDir, curveDir } = this.edgeBidirInfo(s, t);
         const cpOffset = isBiDir ? len * 0.22 * curveDir : 0;
         const cpX = (s.x + t.x) / 2 + px * cpOffset;
         const cpY = (s.y + t.y) / 2 + py * cpOffset;
-        const x1 = s.x + nx * s.r;
-        const y1 = s.y + ny * s.r;
-        const x2 = t.x - nx * (t.r + 7);
-        const y2 = t.y - ny * (t.r + 7);
+        const { x1, y1, x2, y2 } = this.edgeEndpoints(s, t, nx, ny);
         const qX = (u) => (1 - u) * (1 - u) * x1 + 2 * (1 - u) * u * cpX + u * u * x2;
         const qY = (u) => (1 - u) * (1 - u) * y1 + 2 * (1 - u) * u * cpY + u * u * y2;
         const midU = 0.5;
@@ -683,8 +698,7 @@ export class GraphCanvas {
                 for (const t of n.tags ?? [])
                     freq.set(t, (freq.get(t) ?? 0) + 1);
             }
-            const top = [...freq.entries()].sort((a, b) => b[1] - a[1]).slice(0, TAG_PALETTE.length).map(([t]) => t);
-            this.tagColorMap = new Map(top.map((t, i) => [t, TAG_PALETTE[i]]));
+            this.tagColorMap = tagColorMapFromFreq(freq);
         }
         else {
             this.tagColorMap = new Map();
@@ -1272,9 +1286,7 @@ export class GraphCanvas {
         const px = -dy / len;
         const py = dx / len;
         // Determine curvature direction for bidirectional edges
-        const key = [s.id, t.id].sort().join('|');
-        const isBiDir = this.biDirPairs.has(key);
-        const curveDir = isBiDir ? (s.id < t.id ? 1 : -1) : 0;
+        const { isBiDir, curveDir } = this.edgeBidirInfo(s, t);
         const curvature = isBiDir ? 0.22 : 0.0;
         const cpFactor = len * curvature * curveDir;
         // Control point (on the perpendicular bisector)
@@ -1283,10 +1295,7 @@ export class GraphCanvas {
         // Start/end points offset from node radii
         const nx = dx / len;
         const ny = dy / len;
-        const x1 = s.x + nx * s.r;
-        const y1 = s.y + ny * s.r;
-        const x2 = t.x - nx * (t.r + 7);
-        const y2 = t.y - ny * (t.r + 7);
+        const { x1, y1, x2, y2 } = this.edgeEndpoints(s, t, nx, ny);
         const color = onCritPath ? '#fbbf24' : getEdgeColor(edge.type);
         const isActive = highlighted || onCritPath;
         ctx.save();
@@ -1777,11 +1786,8 @@ export class GraphCanvas {
                 break;
         }
     }
-    onMouseDown(e) {
-        if (e.button !== 0)
-            return;
-        this.canvas.focus();
-        const { x, y } = this.getPos(e);
+    /** Initiates a pointer drag at the given canvas coordinates: records the start position, performs a hit test, and begins either a node drag or canvas pan. */
+    beginPointerDrag(x, y, setCursor) {
         this.lastX = x;
         this.lastY = y;
         this.downX = x;
@@ -1795,33 +1801,75 @@ export class GraphCanvas {
             hit.fx = hit.x;
             hit.fy = hit.y;
             this.alpha = Math.max(this.alpha, 0.25);
-            this.canvas.style.cursor = 'grabbing';
+            if (setCursor)
+                this.canvas.style.cursor = 'grabbing';
         }
         else {
             this.isDraggingCanvas = true;
-            this.canvas.style.cursor = 'grabbing';
+            if (setCursor)
+                this.canvas.style.cursor = 'grabbing';
         }
     }
-    onMouseMove(e) {
-        const r = this.canvas.getBoundingClientRect();
-        const x = e.clientX - r.left;
-        const y = e.clientY - r.top;
-        const dx = x - this.lastX;
-        const dy = y - this.lastY;
-        if (Math.abs(x - this.downX) > 3 || Math.abs(y - this.downY) > 3)
+    /** Returns the canvas-relative coordinates of the first touch, or null when there is not exactly one active touch. */
+    firstTouchPos(e) {
+        if (e.touches.length !== 1)
+            return null;
+        const rect = this.canvas.getBoundingClientRect();
+        return { x: e.touches[0].clientX - rect.left, y: e.touches[0].clientY - rect.top };
+    }
+    /** Handles a pointer move during an active drag: updates hasMoved, drags the grabbed node or pans the canvas, and returns true when a drag consumed the event. */
+    handleDragMove(x, y, dx, dy, moveThreshold, clearFlyOnNode) {
+        if (Math.abs(x - this.downX) > moveThreshold || Math.abs(y - this.downY) > moveThreshold)
             this.hasMoved = true;
         if (this.isDraggingNode && this.dragNode) {
             const [wx, wy] = this.toWorld(x, y);
             this.dragNode.fx = wx;
             this.dragNode.fy = wy;
-            this.flyTarget = null;
+            if (clearFlyOnNode)
+                this.flyTarget = null;
+            return true;
         }
-        else if (this.isDraggingCanvas) {
+        if (this.isDraggingCanvas) {
             this.tx += dx;
             this.ty += dy;
             this.flyTarget = null;
+            return true;
         }
-        else {
+        return false;
+    }
+    /** Ends a node drag gesture: if the pointer did not move, toggles selection and flies to the node, then clears the drag state. Returns true when a node drag was in progress. */
+    endNodeDrag() {
+        if (!this.isDraggingNode || !this.dragNode)
+            return false;
+        if (!this.hasMoved) {
+            const id = this.dragNode.id;
+            const newSel = this.filter.selectedId === id ? null : id;
+            this.filter = { ...this.filter, selectedId: newSel };
+            this.particles = [];
+            this.lastParticleSpawn = 0;
+            this.onSelectNode(newSel);
+            if (newSel)
+                this.flyTo(this.dragNode);
+        }
+        this.dragNode.fx = null;
+        this.dragNode.fy = null;
+        this.dragNode = null;
+        return true;
+    }
+    onMouseDown(e) {
+        if (e.button !== 0)
+            return;
+        this.canvas.focus();
+        const { x, y } = this.getPos(e);
+        this.beginPointerDrag(x, y, true);
+    }
+    onMouseMove(e) {
+        const r = this.canvas.getBoundingClientRect();
+        const x = e.clientX - r.left;
+        const y = e.clientY - r.top;
+        const dx = x - this.lastX;
+        const dy = y - this.lastY;
+        if (!this.handleDragMove(x, y, dx, dy, 3, true)) {
             const [wx, wy] = this.toWorld(x, y);
             const hit = this.hitTest(wx, wy);
             const newHov = hit?.id ?? null;
@@ -1838,20 +1886,7 @@ export class GraphCanvas {
     onMouseUp(e) {
         if (e.button !== 0)
             return;
-        if (this.isDraggingNode && this.dragNode) {
-            if (!this.hasMoved) {
-                const id = this.dragNode.id;
-                const newSel = this.filter.selectedId === id ? null : id;
-                this.filter = { ...this.filter, selectedId: newSel };
-                this.particles = [];
-                this.lastParticleSpawn = 0;
-                this.onSelectNode(newSel);
-                if (newSel)
-                    this.flyTo(this.dragNode);
-            }
-            this.dragNode.fx = null;
-            this.dragNode.fy = null;
-            this.dragNode = null;
+        if (this.endNodeDrag()) {
             this.isDraggingNode = false;
         }
         else if (this.isDraggingCanvas) {
@@ -1879,29 +1914,12 @@ export class GraphCanvas {
     }
     onTouchStart(e) {
         e.preventDefault();
-        const rect = this.canvas.getBoundingClientRect();
-        if (e.touches.length === 1) {
-            const x = e.touches[0].clientX - rect.left;
-            const y = e.touches[0].clientY - rect.top;
-            this.lastX = x;
-            this.lastY = y;
-            this.downX = x;
-            this.downY = y;
-            this.hasMoved = false;
-            const [wx, wy] = this.toWorld(x, y);
-            const hit = this.hitTest(wx, wy);
-            if (hit) {
-                this.isDraggingNode = true;
-                this.dragNode = hit;
-                hit.fx = hit.x;
-                hit.fy = hit.y;
-                this.alpha = Math.max(this.alpha, 0.25);
-            }
-            else {
-                this.isDraggingCanvas = true;
-            }
+        const pos = this.firstTouchPos(e);
+        if (pos) {
+            this.beginPointerDrag(pos.x, pos.y, false);
         }
         else if (e.touches.length === 2) {
+            const rect = this.canvas.getBoundingClientRect();
             this.isDraggingNode = false;
             this.isDraggingCanvas = false;
             if (this.dragNode) {
@@ -1918,28 +1936,17 @@ export class GraphCanvas {
     }
     onTouchMove(e) {
         e.preventDefault();
-        const rect = this.canvas.getBoundingClientRect();
-        if (e.touches.length === 1) {
-            const x = e.touches[0].clientX - rect.left;
-            const y = e.touches[0].clientY - rect.top;
+        const pos = this.firstTouchPos(e);
+        if (pos) {
+            const { x, y } = pos;
             const dx = x - this.lastX;
             const dy = y - this.lastY;
-            if (Math.abs(x - this.downX) > 5 || Math.abs(y - this.downY) > 5)
-                this.hasMoved = true;
-            if (this.isDraggingNode && this.dragNode) {
-                const [wx, wy] = this.toWorld(x, y);
-                this.dragNode.fx = wx;
-                this.dragNode.fy = wy;
-            }
-            else if (this.isDraggingCanvas) {
-                this.tx += dx;
-                this.ty += dy;
-                this.flyTarget = null;
-            }
+            this.handleDragMove(x, y, dx, dy, 5, false);
             this.lastX = x;
             this.lastY = y;
         }
         else if (e.touches.length === 2) {
+            const rect = this.canvas.getBoundingClientRect();
             const dx = e.touches[0].clientX - e.touches[1].clientX;
             const dy = e.touches[0].clientY - e.touches[1].clientY;
             const dist = Math.sqrt(dx * dx + dy * dy);
@@ -1957,21 +1964,7 @@ export class GraphCanvas {
     onTouchEnd(e) {
         e.preventDefault();
         if (e.touches.length === 0) {
-            if (this.isDraggingNode && this.dragNode) {
-                if (!this.hasMoved) {
-                    const id = this.dragNode.id;
-                    const newSel = this.filter.selectedId === id ? null : id;
-                    this.filter = { ...this.filter, selectedId: newSel };
-                    this.particles = [];
-                    this.lastParticleSpawn = 0;
-                    this.onSelectNode(newSel);
-                    if (newSel)
-                        this.flyTo(this.dragNode);
-                }
-                this.dragNode.fx = null;
-                this.dragNode.fy = null;
-                this.dragNode = null;
-            }
+            this.endNodeDrag();
             this.isDraggingNode = false;
             this.isDraggingCanvas = false;
         }