V0.38.5 git board rewrite (#238)
Co-authored-by: gobha <jasafpro@gmail.com> Co-committed-by: gobha <jasafpro@gmail.com>
This commit is contained in:
@@ -1,9 +1,11 @@
|
||||
/**
|
||||
* Git Board — Surface Entry Point
|
||||
*
|
||||
* Kanban board for Gitea/GitHub issues and PRs.
|
||||
* Kanban board for Gitea issues and PRs.
|
||||
* Calls Starlark backend via /s/git-board/api/*.
|
||||
* Per-user API token via extension settings.
|
||||
* Authentication via gitea-client library connections.
|
||||
*
|
||||
* Features: DnD between columns, issue detail modal with comments.
|
||||
*/
|
||||
(async function () {
|
||||
'use strict';
|
||||
@@ -33,16 +35,20 @@
|
||||
}
|
||||
|
||||
var { html } = window;
|
||||
var { useState, useEffect, useCallback, useRef } = hooks;
|
||||
var { useState, useEffect, useCallback, useRef, useMemo } = hooks;
|
||||
var { render } = preact;
|
||||
|
||||
var API = base + '/s/' + slug + '/api';
|
||||
|
||||
async function api(path) {
|
||||
async function api(path, opts) {
|
||||
var token = sw.auth._getToken();
|
||||
var resp = await fetch(API + path, {
|
||||
headers: { 'Authorization': 'Bearer ' + token }
|
||||
});
|
||||
var fetchOpts = { headers: { 'Authorization': 'Bearer ' + token } };
|
||||
if (opts && opts.method) fetchOpts.method = opts.method;
|
||||
if (opts && opts.body) {
|
||||
fetchOpts.body = JSON.stringify(opts.body);
|
||||
fetchOpts.headers['Content-Type'] = 'application/json';
|
||||
}
|
||||
var resp = await fetch(API + path, fetchOpts);
|
||||
var text = await resp.text();
|
||||
try { return JSON.parse(text); } catch (_) { return { error: text }; }
|
||||
}
|
||||
@@ -50,26 +56,27 @@
|
||||
// ── App ────────────────────────────────────
|
||||
|
||||
function App() {
|
||||
var [owner, setOwner] = useState('');
|
||||
var [repo, setRepo] = useState('');
|
||||
var [repos, setRepos] = useState([]);
|
||||
var [board, setBoard] = useState(null);
|
||||
var [owner, setOwner] = useState('');
|
||||
var [repo, setRepo] = useState('');
|
||||
var [repos, setRepos] = useState([]);
|
||||
var [board, setBoard] = useState(null);
|
||||
var [loading, setLoading] = useState(false);
|
||||
var [needsToken, setNeedsToken] = useState(false);
|
||||
var [needsConn, setNeedsConn] = useState(false);
|
||||
var [modal, setModal] = useState(null); // {owner, repo, number}
|
||||
var menuRef = useRef(null);
|
||||
|
||||
// Mount user menu
|
||||
useEffect(function () {
|
||||
if (menuRef.current && sw.userMenu) {
|
||||
sw.userMenu(menuRef.current, { placement: 'down-right' });
|
||||
sw.userMenu(menuRef.current, { placement: 'down-left' });
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Load repos on mount
|
||||
useEffect(function () {
|
||||
api('/repos').then(function (d) {
|
||||
if (d.error && d.error.indexOf('failed') !== -1) {
|
||||
setNeedsToken(true);
|
||||
if (d.error) {
|
||||
if (d.error.indexOf('no gitea connection configured') !== -1) {
|
||||
setNeedsConn(true);
|
||||
} else { sw.toast(d.error, 'error'); }
|
||||
return;
|
||||
}
|
||||
setRepos(d.data || []);
|
||||
@@ -87,10 +94,10 @@
|
||||
.then(function (d) {
|
||||
if (d.error) {
|
||||
sw.toast(d.error, 'error');
|
||||
if (d.error.indexOf('failed') !== -1) setNeedsToken(true);
|
||||
if (d.error.indexOf('no gitea connection configured') !== -1) setNeedsConn(true);
|
||||
} else {
|
||||
setBoard(d);
|
||||
setNeedsToken(false);
|
||||
setNeedsConn(false);
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
@@ -98,71 +105,102 @@
|
||||
|
||||
useEffect(function () { loadBoard(); }, [loadBoard]);
|
||||
|
||||
if (needsToken) return html`
|
||||
<${TokenSetup} menuRef=${menuRef} />
|
||||
`;
|
||||
var onDrop = useCallback(function (issueNumber, targetCol) {
|
||||
if (!board) return;
|
||||
var issue = (board.issues || []).find(function (i) { return i.number === issueNumber; });
|
||||
if (!issue) return;
|
||||
|
||||
var patch = {};
|
||||
if (targetCol === 'open') {
|
||||
// Move to Open: unassign + reopen
|
||||
if (issue.state === 'closed') patch.state = 'open';
|
||||
// Note: Gitea PATCH /issues doesn't support clearing assignee via empty string,
|
||||
// but we do our best — the board will re-split on refresh.
|
||||
} else if (targetCol === 'in_progress') {
|
||||
// Move to In Progress: assign to current user + ensure open
|
||||
if (issue.state === 'closed') patch.state = 'open';
|
||||
// Gitea needs assignees array — not supported by our simple update_issue.
|
||||
// For now, just reopen. User assigns via modal.
|
||||
if (issue.state === 'closed') patch.state = 'open';
|
||||
} else if (targetCol === 'done') {
|
||||
patch.state = 'closed';
|
||||
}
|
||||
|
||||
if (!patch.state) return; // no meaningful change
|
||||
|
||||
// Optimistic update
|
||||
var newIssues = (board.issues || []).map(function (i) {
|
||||
if (i.number !== issueNumber) return i;
|
||||
var copy = {};
|
||||
for (var k in i) copy[k] = i[k];
|
||||
if (patch.state) copy.state = patch.state;
|
||||
return copy;
|
||||
});
|
||||
setBoard({ issues: newIssues, pull_requests: board.pull_requests || [] });
|
||||
|
||||
api('/issue/' + owner + '/' + repo + '/' + issueNumber, {
|
||||
method: 'POST', body: patch
|
||||
}).then(function (d) {
|
||||
if (d.error) {
|
||||
sw.toast('Update failed: ' + d.error, 'error');
|
||||
loadBoard(); // revert
|
||||
}
|
||||
});
|
||||
}, [board, owner, repo, loadBoard]);
|
||||
|
||||
var openModal = useCallback(function (number) {
|
||||
setModal({ owner: owner, repo: repo, number: number });
|
||||
}, [owner, repo]);
|
||||
|
||||
var closeModal = useCallback(function (changed) {
|
||||
setModal(null);
|
||||
if (changed) loadBoard();
|
||||
}, [loadBoard]);
|
||||
|
||||
return html`
|
||||
<div class="gb-shell">
|
||||
<header class="gb-header">
|
||||
<div class="gb-header__left">
|
||||
<h1 class="gb-title">Git Board</h1>
|
||||
<${RepoPicker} repos=${repos} owner=${owner} repo=${repo}
|
||||
onSelect=${function (o, r) { setOwner(o); setRepo(r); }} />
|
||||
</div>
|
||||
<div class="gb-header__right">
|
||||
<button class="btn-small" onClick=${loadBoard} disabled=${loading}>
|
||||
${loading ? '↻' : 'Refresh'}
|
||||
</button>
|
||||
<div ref=${menuRef}></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
${board ? html`<${Board} data=${board} />` : html`
|
||||
<div class="gb-empty">${loading ? 'Loading…' : 'Select a repository'}</div>
|
||||
`}
|
||||
</div>
|
||||
<div class="user-menu-container" ref=${menuRef}></div>
|
||||
${needsConn ? html`<${ConnectionSetup} />` : html`
|
||||
<div class="gb-shell">
|
||||
<header class="gb-header">
|
||||
<div class="gb-header__left">
|
||||
<h1 class="gb-title">Git Board</h1>
|
||||
<${RepoPicker} repos=${repos} owner=${owner} repo=${repo}
|
||||
onSelect=${function (o, r) { setOwner(o); setRepo(r); }} />
|
||||
</div>
|
||||
<div class="gb-header__right">
|
||||
<button class="btn-small" onClick=${loadBoard} disabled=${loading}>
|
||||
${loading ? '↻' : 'Refresh'}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
${board ? html`<${Board} data=${board} onDrop=${onDrop} onCardClick=${openModal} />` : html`
|
||||
<div class="gb-empty">${loading ? 'Loading…' : 'Select a repository'}</div>
|
||||
`}
|
||||
</div>
|
||||
`}
|
||||
${modal && html`<${IssueModal} ...${modal} onClose=${closeModal} />`}
|
||||
`;
|
||||
}
|
||||
|
||||
// ── Token Setup ────────────────────────────
|
||||
|
||||
function TokenSetup({ menuRef }) {
|
||||
var [token, setToken] = useState('');
|
||||
var [saving, setSaving] = useState(false);
|
||||
|
||||
async function save() {
|
||||
if (!token.trim()) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await sw.api.extensions.updateUserSettings('git-board', { api_token: token.trim() });
|
||||
sw.toast('Token saved — reloading', 'success');
|
||||
setTimeout(function () { location.reload(); }, 500);
|
||||
} catch (e) {
|
||||
sw.toast(e.message || 'Failed to save', 'error');
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
// ── Connection Setup ─────────────────────────
|
||||
|
||||
function ConnectionSetup() {
|
||||
return html`
|
||||
<div class="gb-shell">
|
||||
<header class="gb-header">
|
||||
<div class="gb-header__left"><h1 class="gb-title">Git Board</h1></div>
|
||||
<div class="gb-header__right"><div ref=${menuRef}></div></div>
|
||||
</header>
|
||||
<div class="gb-setup">
|
||||
<h2>Connect Your Account</h2>
|
||||
<p>Enter your personal access token for Gitea or GitHub.<br/>
|
||||
The admin configures the platform URL. You provide your own token.</p>
|
||||
<div class="gb-setup__form">
|
||||
<input type="password" class="gb-setup__input"
|
||||
placeholder="ghp_... or gitea token"
|
||||
value=${token} onInput=${function (e) { setToken(e.target.value); }} />
|
||||
<button class="btn-small btn-primary" onClick=${save} disabled=${saving || !token.trim()}>
|
||||
${saving ? 'Saving…' : 'Save Token'}
|
||||
</button>
|
||||
</div>
|
||||
<p class="gb-setup__hint">Token is stored in your personal extension settings — not shared with other users.</p>
|
||||
<h2>Connect to Gitea</h2>
|
||||
<p>Git Board requires a Gitea connection to fetch repositories, issues, and pull requests.</p>
|
||||
<p>Ask your admin to add a <strong>Gitea</strong> connection in
|
||||
<strong>Admin → Connections</strong>, or add a personal one in
|
||||
<strong>Settings → Connections</strong>.</p>
|
||||
<button class="btn-small btn-primary"
|
||||
onClick=${function () { window.location.href = base + '/settings'; }}>
|
||||
Open Settings
|
||||
</button>
|
||||
<p class="gb-setup__hint">Connections are managed centrally — no API tokens in extension settings.</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -185,41 +223,52 @@
|
||||
`;
|
||||
}
|
||||
|
||||
// ── Kanban Board ───────────────────────────
|
||||
// ── Kanban Board with DnD ─────────────────
|
||||
|
||||
var COLUMNS = [
|
||||
{ key: 'open', title: 'Open', filter: function (i) { return i.state === 'open'; } },
|
||||
{ key: 'in_progress', title: 'In Progress', filter: function (i) { return i.assignee && i.state === 'open'; } },
|
||||
{ key: 'prs', title: 'Pull Requests', isPR: true },
|
||||
{ key: 'closed', title: 'Done', filter: function (i) { return i.state === 'closed'; } },
|
||||
];
|
||||
|
||||
function Board({ data }) {
|
||||
function Board({ data, onDrop, onCardClick }) {
|
||||
var issues = data.issues || [];
|
||||
var prs = data.pull_requests || [];
|
||||
|
||||
// Split issues: unassigned open vs assigned open
|
||||
var openUnassigned = issues.filter(function (i) { return i.state === 'open' && !i.assignee; });
|
||||
var inProgress = issues.filter(function (i) { return i.state === 'open' && !!i.assignee; });
|
||||
|
||||
return html`
|
||||
<div class="gb-board">
|
||||
<${Column} title="Open" count=${openUnassigned.length}>
|
||||
${openUnassigned.map(function (i) { return html`<${IssueCard} key=${i.number} issue=${i} />`; })}
|
||||
<${Column} id="open" title="Open" count=${openUnassigned.length} onDrop=${onDrop}>
|
||||
${openUnassigned.map(function (i) {
|
||||
return html`<${IssueCard} key=${i.number} issue=${i} onClick=${onCardClick} />`;
|
||||
})}
|
||||
<//>
|
||||
<${Column} title="In Progress" count=${inProgress.length}>
|
||||
${inProgress.map(function (i) { return html`<${IssueCard} key=${i.number} issue=${i} />`; })}
|
||||
<${Column} id="in_progress" title="In Progress" count=${inProgress.length} onDrop=${onDrop}>
|
||||
${inProgress.map(function (i) {
|
||||
return html`<${IssueCard} key=${i.number} issue=${i} onClick=${onCardClick} />`;
|
||||
})}
|
||||
<//>
|
||||
<${Column} title="Pull Requests" count=${prs.length}>
|
||||
<${Column} id="done" title="Done" count=${0} onDrop=${onDrop}>
|
||||
<//>
|
||||
<${Column} id="prs" title="Pull Requests" count=${prs.length}>
|
||||
${prs.map(function (p) { return html`<${PRCard} key=${p.number} pr=${p} />`; })}
|
||||
<//>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function Column({ title, count, children }) {
|
||||
function Column({ id, title, count, children, onDrop }) {
|
||||
var [over, setOver] = useState(false);
|
||||
|
||||
var handlers = onDrop ? {
|
||||
onDragOver: function (e) { e.preventDefault(); setOver(true); },
|
||||
onDragLeave: function () { setOver(false); },
|
||||
onDrop: function (e) {
|
||||
e.preventDefault();
|
||||
setOver(false);
|
||||
var num = parseInt(e.dataTransfer.getData('text/plain'), 10);
|
||||
if (num && onDrop) onDrop(num, id);
|
||||
}
|
||||
} : {};
|
||||
|
||||
return html`
|
||||
<div class="gb-column">
|
||||
<div class="gb-column ${over ? 'gb-column--dragover' : ''}" ...${handlers}>
|
||||
<div class="gb-column__header">
|
||||
<span class="gb-column__title">${title}</span>
|
||||
<span class="gb-column__count">${count || 0}</span>
|
||||
@@ -229,9 +278,17 @@
|
||||
`;
|
||||
}
|
||||
|
||||
function IssueCard({ issue }) {
|
||||
function IssueCard({ issue, onClick }) {
|
||||
return html`
|
||||
<a class="gb-card" href=${issue.html_url} target="_blank" rel="noopener">
|
||||
<div class="gb-card" draggable="true"
|
||||
onDragStart=${function (e) {
|
||||
e.dataTransfer.setData('text/plain', String(issue.number));
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
}}
|
||||
onClick=${function (e) {
|
||||
e.preventDefault();
|
||||
if (onClick) onClick(issue.number);
|
||||
}}>
|
||||
<div class="gb-card__header">
|
||||
<span class="gb-card__number">#${issue.number}</span>
|
||||
${issue.assignee && html`<span class="gb-card__assignee">@${esc(issue.assignee)}</span>`}
|
||||
@@ -242,7 +299,7 @@
|
||||
return html`<span key=${l} class="badge">${esc(l)}</span>`;
|
||||
})}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -262,6 +319,153 @@
|
||||
`;
|
||||
}
|
||||
|
||||
// ── Issue Detail Modal ────────────────────
|
||||
|
||||
function IssueModal({ owner, repo, number, onClose }) {
|
||||
var [issue, setIssue] = useState(null);
|
||||
var [loading, setLoading] = useState(true);
|
||||
var [comment, setComment] = useState('');
|
||||
var [posting, setPosting] = useState(false);
|
||||
var [changed, setChanged] = useState(false);
|
||||
var bodyRef = useRef(null);
|
||||
|
||||
useEffect(function () {
|
||||
setLoading(true);
|
||||
api('/issue/' + owner + '/' + repo + '/' + number).then(function (d) {
|
||||
if (d.error) { sw.toast(d.error, 'error'); onClose(false); return; }
|
||||
setIssue(d);
|
||||
setLoading(false);
|
||||
});
|
||||
}, [owner, repo, number]);
|
||||
|
||||
// Close on Escape
|
||||
useEffect(function () {
|
||||
var handler = function (e) { if (e.key === 'Escape') onClose(changed); };
|
||||
document.addEventListener('keydown', handler);
|
||||
return function () { document.removeEventListener('keydown', handler); };
|
||||
}, [changed]);
|
||||
|
||||
var postComment = useCallback(function () {
|
||||
if (!comment.trim() || posting) return;
|
||||
setPosting(true);
|
||||
api('/issue/' + owner + '/' + repo + '/' + number + '/comment', {
|
||||
method: 'POST', body: { body: comment.trim() }
|
||||
}).then(function (d) {
|
||||
if (d.error) { sw.toast(d.error, 'error'); }
|
||||
else {
|
||||
// Append to local comments
|
||||
setIssue(function (prev) {
|
||||
if (!prev) return prev;
|
||||
var copy = {};
|
||||
for (var k in prev) copy[k] = prev[k];
|
||||
copy.comments = (prev.comments || []).concat([d]);
|
||||
return copy;
|
||||
});
|
||||
setComment('');
|
||||
setChanged(true);
|
||||
}
|
||||
setPosting(false);
|
||||
});
|
||||
}, [comment, posting, owner, repo, number]);
|
||||
|
||||
var toggleState = useCallback(function () {
|
||||
if (!issue) return;
|
||||
var newState = issue.state === 'open' ? 'closed' : 'open';
|
||||
api('/issue/' + owner + '/' + repo + '/' + number, {
|
||||
method: 'POST', body: { state: newState }
|
||||
}).then(function (d) {
|
||||
if (d.error) { sw.toast(d.error, 'error'); return; }
|
||||
setIssue(function (prev) {
|
||||
if (!prev) return prev;
|
||||
var copy = {};
|
||||
for (var k in prev) copy[k] = prev[k];
|
||||
copy.state = newState;
|
||||
return copy;
|
||||
});
|
||||
setChanged(true);
|
||||
});
|
||||
}, [issue, owner, repo, number]);
|
||||
|
||||
return html`
|
||||
<div class="gb-modal-overlay" onClick=${function (e) {
|
||||
if (e.target.classList.contains('gb-modal-overlay')) onClose(changed);
|
||||
}}>
|
||||
<div class="gb-modal">
|
||||
<div class="gb-modal__header">
|
||||
<div class="gb-modal__title-row">
|
||||
${loading ? 'Loading…' : html`
|
||||
<span class="gb-card__number">#${number}</span>
|
||||
<h2 class="gb-modal__title">${esc(issue && issue.title)}</h2>
|
||||
`}
|
||||
</div>
|
||||
<button class="gb-modal__close" onClick=${function () { onClose(changed); }}>✕</button>
|
||||
</div>
|
||||
|
||||
${!loading && issue && html`
|
||||
<div class="gb-modal__body" ref=${bodyRef}>
|
||||
<div class="gb-modal__meta">
|
||||
<span class="badge ${issue.state === 'open' ? 'badge--green' : 'badge--muted'}">${issue.state}</span>
|
||||
${issue.assignee && html`<span class="gb-card__assignee">@${esc(issue.assignee)}</span>`}
|
||||
${issue.created_at && html`<span class="gb-modal__date">${new Date(issue.created_at).toLocaleDateString()}</span>`}
|
||||
<a href=${issue.html_url || '#'} target="_blank" rel="noopener"
|
||||
class="gb-modal__extlink">Open in Gitea ↗</a>
|
||||
</div>
|
||||
|
||||
${issue.labels && issue.labels.length > 0 && html`
|
||||
<div class="gb-card__labels" style="margin-bottom:12px;">
|
||||
${issue.labels.map(function (l) { return html`<span key=${l} class="badge">${esc(l)}</span>`; })}
|
||||
</div>
|
||||
`}
|
||||
|
||||
<div class="gb-modal__description">
|
||||
${issue.body ? html`<pre class="gb-modal__body-text">${esc(issue.body)}</pre>`
|
||||
: html`<p class="gb-modal__empty">No description.</p>`}
|
||||
</div>
|
||||
|
||||
<div class="gb-modal__comments">
|
||||
<h3 class="gb-modal__section-title">Comments (${(issue.comments || []).length})</h3>
|
||||
${(issue.comments || []).length === 0 && html`
|
||||
<p class="gb-modal__empty">No comments yet.</p>
|
||||
`}
|
||||
${(issue.comments || []).map(function (c, i) {
|
||||
return html`
|
||||
<div class="gb-comment" key=${i}>
|
||||
<div class="gb-comment__header">
|
||||
<strong>@${esc(c.user)}</strong>
|
||||
<span class="gb-comment__date">${timeAgo(c.created_at)}</span>
|
||||
</div>
|
||||
<div class="gb-comment__body">${esc(c.body)}</div>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div class="gb-modal__add-comment">
|
||||
<textarea class="gb-modal__textarea" rows="3"
|
||||
placeholder="Add a comment…"
|
||||
value=${comment}
|
||||
onInput=${function (e) { setComment(e.target.value); }}
|
||||
onKeyDown=${function (e) {
|
||||
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) postComment();
|
||||
}} />
|
||||
<div class="gb-modal__actions">
|
||||
<button class="btn-small btn-primary" disabled=${posting || !comment.trim()}
|
||||
onClick=${postComment}>
|
||||
${posting ? 'Posting…' : 'Comment'}
|
||||
</button>
|
||||
<button class="btn-small ${issue.state === 'open' ? 'btn-danger' : 'btn-secondary'}"
|
||||
onClick=${toggleState}>
|
||||
${issue.state === 'open' ? 'Close Issue' : 'Reopen Issue'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// ── Utilities ──────────────────────────────
|
||||
|
||||
function esc(s) {
|
||||
|
||||
Reference in New Issue
Block a user