switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Feat v0.6.12 css isolation (#47)
All checks were successful
CI/CD / detect-changes (push) Successful in 4s
Details
CI/CD / test-frontend (push) Successful in 6s
Details
CI/CD / test-go-pg (push) Successful in 2m44s
Details
CI/CD / test-sqlite (push) Successful in 2m47s
Details
CI/CD / build-and-deploy (push) Successful in 1m46s
Details

Browse Source 
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #47.
This commit is contained in:
Jeffrey Smith
2026-04-01 11:58:39 +00:00
committed by xcaliber
parent 786bc92768
commit 221ae94f4f
33 changed files with 1385 additions and 1074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
packages/git-board/js/main.js
View File

@@ -160,21 +160,21 @@
return html`
<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>
<div class="ext-git-board-shell">
<header class="ext-git-board-header">
<div class="ext-git-board-header__left">
<h1 class="ext-git-board-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">
<div class="ext-git-board-header__right">
<button class="sw-btn sw-btn--secondary sw-btn--sm" 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 class="ext-git-board-empty">${loading ? 'Loading…' : 'Select a repository'}</div>
`}
</div>
`}
@@ -186,11 +186,11 @@
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="ext-git-board-shell">
<header class="ext-git-board-header">
<div class="ext-git-board-header__left"><h1 class="ext-git-board-title">Git Board</h1></div>
</header>
<div class="gb-setup">
<div class="ext-git-board-setup">
<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
@@ -200,7 +200,7 @@
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>
<p class="ext-git-board-setup__hint">Connections are managed centrally — no API tokens in extension settings.</p>
</div>
</div>
`;
@@ -211,7 +211,7 @@
function RepoPicker({ repos, owner, repo, onSelect }) {
var current = owner + '/' + repo;
return html`
<select class="gb-repo-picker" value=${current}
<select class="ext-git-board-repo-picker" value=${current}
onChange=${function (e) {
var parts = e.target.value.split('/');
onSelect(parts[0], parts.slice(1).join('/'));
@@ -233,7 +233,7 @@
var inProgress = issues.filter(function (i) { return i.state === 'open' && !!i.assignee; });
return html`
<div class="gb-board">
<div class="ext-git-board-board">
<${Column} id="open" title="Open" count=${openUnassigned.length} onDrop=${onDrop}>
${openUnassigned.map(function (i) {
return html`<${IssueCard} key=${i.number} issue=${i} onClick=${onCardClick} />`;
@@ -268,19 +268,19 @@
} : {};
return html`
<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>
<div class="ext-git-board-column ${over ? 'ext-git-board-column--dragover' : ''}" ...${handlers}>
<div class="ext-git-board-column__header">
<span class="ext-git-board-column__title">${title}</span>
<span class="ext-git-board-column__count">${count || 0}</span>
</div>
<div class="gb-column__cards">${children}</div>
<div class="ext-git-board-column__cards">${children}</div>
</div>
`;
}
function IssueCard({ issue, onClick }) {
return html`
<div class="gb-card" draggable="true"
<div class="ext-git-board-card" draggable="true"
onDragStart=${function (e) {
e.dataTransfer.setData('text/plain', String(issue.number));
e.dataTransfer.effectAllowed = 'move';
@@ -289,14 +289,14 @@
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>`}
<div class="ext-git-board-card__header">
<span class="ext-git-board-card__number">#${issue.number}</span>
${issue.assignee && html`<span class="ext-git-board-card__assignee">@${esc(issue.assignee)}</span>`}
</div>
<div class="gb-card__title">${esc(issue.title)}</div>
<div class="gb-card__labels">
<div class="ext-git-board-card__title">${esc(issue.title)}</div>
<div class="ext-git-board-card__labels">
${(issue.labels || []).map(function (l) {
return html`<span key=${l} class="badge">${esc(l)}</span>`;
return html`<span key=${l} class="ext-git-board-badge">${esc(l)}</span>`;
})}
</div>
</div>
@@ -305,13 +305,13 @@
function PRCard({ pr }) {
return html`
<a class="gb-card gb-card--pr" href=${pr.html_url} target="_blank" rel="noopener">
<div class="gb-card__header">
<span class="gb-card__number">#${pr.number}</span>
<span class="gb-card__branch">${esc(pr.head)} → ${esc(pr.base)}</span>
<a class="ext-git-board-card ext-git-board-card--pr" href=${pr.html_url} target="_blank" rel="noopener">
<div class="ext-git-board-card__header">
<span class="ext-git-board-card__number">#${pr.number}</span>
<span class="ext-git-board-card__branch">${esc(pr.head)} → ${esc(pr.base)}</span>
</div>
<div class="gb-card__title">${esc(pr.title)}</div>
<div class="gb-card__meta">
<div class="ext-git-board-card__title">${esc(pr.title)}</div>
<div class="ext-git-board-card__meta">
<span>@${esc(pr.user)}</span>
<span>${timeAgo(pr.created_at)}</span>
</div>
@@ -387,68 +387,68 @@
}, [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="ext-git-board-modal-overlay" onClick=${function (e) {
if (e.target.classList.contains('ext-git-board-modal-overlay')) onClose(changed);
}}>
<div class="gb-modal">
<div class="gb-modal__header">
<div class="gb-modal__title-row">
<div class="ext-git-board-modal">
<div class="ext-git-board-modal__header">
<div class="ext-git-board-modal__title-row">
${loading ? 'Loading…' : html`
<span class="gb-card__number">#${number}</span>
<h2 class="gb-modal__title">${esc(issue && issue.title)}</h2>
<span class="ext-git-board-card__number">#${number}</span>
<h2 class="ext-git-board-modal__title">${esc(issue && issue.title)}</h2>
`}
</div>
<button class="gb-modal__close" onClick=${function () { onClose(changed); }}>✕</button>
<button class="ext-git-board-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>`}
<div class="ext-git-board-modal__body" ref=${bodyRef}>
<div class="ext-git-board-modal__meta">
<span class="ext-git-board-badge ${issue.state === 'open' ? 'ext-git-board-badge--green' : 'ext-git-board-badge--muted'}">${issue.state}</span>
${issue.assignee && html`<span class="ext-git-board-card__assignee">@${esc(issue.assignee)}</span>`}
${issue.created_at && html`<span class="ext-git-board-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>
class="ext-git-board-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 class="ext-git-board-card__labels" style="margin-bottom:12px;">
${issue.labels.map(function (l) { return html`<span key=${l} class="ext-git-board-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 class="ext-git-board-modal__description">
${issue.body ? html`<pre class="ext-git-board-modal__body-text">${esc(issue.body)}</pre>`
: html`<p class="ext-git-board-modal__empty">No description.</p>`}
</div>
<div class="gb-modal__comments">
<h3 class="gb-modal__section-title">Comments (${(issue.comments || []).length})</h3>
<div class="ext-git-board-modal__comments">
<h3 class="ext-git-board-modal__section-title">Comments (${(issue.comments || []).length})</h3>
${(issue.comments || []).length === 0 && html`
<p class="gb-modal__empty">No comments yet.</p>
<p class="ext-git-board-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">
<div class="ext-git-board-comment" key=${i}>
<div class="ext-git-board-comment__header">
<strong>@${esc(c.user)}</strong>
<span class="gb-comment__date">${timeAgo(c.created_at)}</span>
<span class="ext-git-board-comment__date">${timeAgo(c.created_at)}</span>
</div>
<div class="gb-comment__body">${esc(c.body)}</div>
<div class="ext-git-board-comment__body">${esc(c.body)}</div>
</div>
`;
})}
</div>
<div class="gb-modal__add-comment">
<textarea class="gb-modal__textarea" rows="3"
<div class="ext-git-board-modal__add-comment">
<textarea class="ext-git-board-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">
<div class="ext-git-board-modal__actions">
<button class="sw-btn sw-btn--primary sw-btn--sm" disabled=${posting || !comment.trim()}
onClick=${postComment}>
${posting ? 'Posting…' : 'Comment'}