HomeLab/ForgeBucket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

darkmode is now available

Browse Source
This commit is contained in:
erangel1
2026-05-07 13:42:46 +02:00
parent ec309eb626
commit 8cb918b064
36 changed files with 588 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/RepoIssuesPage.tsx
+20 -20
View File
@@ -27,46 +27,46 @@ export default function RepoIssuesPage() {
return (
<div className="max-w-4xl mx-auto px-4 md:px-6 py-6">
<div className="flex items-center gap-1 text-sm mb-4">
<Link to={`/repos/${owner}/${repo}`} className="text-[#0052CC] hover:underline">{repo}</Link>
<span className="text-[#5E6C84]">/</span>
<span className="font-semibold text-[#172B4D]">Issues</span>
<Link to={`/repos/${owner}/${repo}`} className="text-[var(--c-brand)] hover:underline">{repo}</Link>
<span className="text-[var(--c-muted)]">/</span>
<span className="font-semibold text-[var(--c-text)]">Issues</span>
</div>
<div className="flex items-center justify-between mb-4">
<h1 className="text-xl font-semibold text-[#172B4D]">Issues</h1>
<h1 className="text-xl font-semibold text-[var(--c-text)]">Issues</h1>
<button onClick={() => setShowNew(true)}
className="px-3 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] min-h-[44px]">
className="px-3 py-2 rounded bg-[var(--c-brand)] text-white text-sm font-medium hover:bg-[var(--c-brand-hover)] min-h-[44px]">
New issue
</button>
</div>
{showNew && (
<form onSubmit={handleCreate} className="mb-6 p-5 border border-[#4C9AFF] rounded bg-white space-y-3">
<h2 className="text-sm font-semibold text-[#172B4D]">New Issue</h2>
<form onSubmit={handleCreate} className="mb-6 p-5 border border-[var(--c-brand-focus)] rounded bg-[var(--c-surface)] space-y-3">
<h2 className="text-sm font-semibold text-[var(--c-text)]">New Issue</h2>
<input value={title} onChange={e => setTitle(e.target.value)} placeholder="Title" required
className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF]" />
className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm focus:outline-none focus:border-[var(--c-brand-focus)]" />
<textarea value={body} onChange={e => setBody(e.target.value)} placeholder="Description (optional)" rows={4}
className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm resize-none focus:outline-none focus:border-[#4C9AFF]" />
className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm resize-none focus:outline-none focus:border-[var(--c-brand-focus)]" />
<div className="flex gap-2">
<button type="submit" disabled={createIssue.isPending || !title.trim()}
className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm hover:bg-[#0065FF] disabled:opacity-50 min-h-[44px]">
className="px-4 py-2 rounded bg-[var(--c-brand)] text-white text-sm hover:bg-[var(--c-brand-hover)] disabled:opacity-50 min-h-[44px]">
{createIssue.isPending ? 'Submitting…' : 'Submit'}
</button>
<button type="button" onClick={() => setShowNew(false)}
className="px-4 py-2 rounded border border-[#DFE1E6] text-sm text-[#172B4D] hover:bg-[#F4F5F7] min-h-[44px]">
className="px-4 py-2 rounded border border-[var(--c-border)] text-sm text-[var(--c-text)] hover:bg-[var(--c-surface-muted)] min-h-[44px]">
Cancel
</button>
</div>
</form>
)}
<div className="flex gap-1 mb-4 border-b border-[#DFE1E6]">
<div className="flex gap-1 mb-4 border-b border-[var(--c-border)]">
{(['open', 'closed'] as IssueState[]).map(s => {
const count = issues?.filter(i => i.state === s).length ?? 0
return (
<button key={s} onClick={() => setState(s)}
className={cn('px-4 py-2 text-sm font-medium capitalize border-b-2 -mb-px min-h-[44px]',
state === s ? 'border-[#0052CC] text-[#0052CC]' : 'border-transparent text-[#5E6C84] hover:text-[#172B4D]')}>
state === s ? 'border-[var(--c-brand)] text-[var(--c-brand)]' : 'border-transparent text-[var(--c-muted)] hover:text-[var(--c-text)]')}>
{s} {count > 0 && `(${count})`}
</button>
)
@@ -74,21 +74,21 @@ export default function RepoIssuesPage() {
</div>
{isLoading ? (
<p className="text-sm text-[#5E6C84] py-4">Loading…</p>
<p className="text-sm text-[var(--c-muted)] py-4">Loading…</p>
) : !issues?.length ? (
<p className="text-sm text-[#5E6C84] py-8 text-center">No {state} issues.</p>
<p className="text-sm text-[var(--c-muted)] py-8 text-center">No {state} issues.</p>
) : (
<div className="flex flex-col gap-2">
{issues.map(issue => (
<div key={issue.id}
className="flex items-start gap-3 p-4 border border-[#DFE1E6] rounded hover:bg-[#FAFBFC]">
<svg width="16" height="16" viewBox="0 0 16 16" fill={issue.state === 'open' ? '#00875A' : '#5E6C84'}
className="flex items-start gap-3 p-4 border border-[var(--c-border)] rounded hover:bg-[var(--c-surface-raised)]">
<svg width="16" height="16" viewBox="0 0 16 16" fill={issue.state === 'open' ? 'var(--c-success)' : 'var(--c-muted)'}
className="mt-0.5 shrink-0">
<path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm9 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25-6.25a.75.75 0 0 0-1.5 0v3.5a.75.75 0 0 0 1.5 0v-3.5Z"/>
</svg>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-[#172B4D]">#{issue.number} {issue.title}</p>
<p className="text-xs text-[#5E6C84] mt-0.5">
<p className="text-sm font-medium text-[var(--c-text)]">#{issue.number} {issue.title}</p>
<p className="text-xs text-[var(--c-muted)] mt-0.5">
opened by {issue.authorName} · {new Date(issue.createdAt).toLocaleDateString()}
</p>
</div>
@@ -97,7 +97,7 @@ export default function RepoIssuesPage() {
? closeIssue.mutate(issue.number)
: reopenIssue.mutate(issue.number)
}
className="text-xs px-3 py-1.5 rounded border border-[#DFE1E6] text-[#5E6C84] hover:bg-[#F4F5F7] shrink-0 min-h-[32px]">
className="text-xs px-3 py-1.5 rounded border border-[var(--c-border)] text-[var(--c-muted)] hover:bg-[var(--c-surface-muted)] shrink-0 min-h-[32px]">
{issue.state === 'open' ? 'Close' : 'Reopen'}
</button>
</div>