feat(KB-022): add GitHub issue status badges to task cards
- Extend core types with GitHub issue tracking fields (issueNumber, issueStatus, lastIssueSync) - Add TaskStore.getTaskGitHubIssueInfo() to fetch issue details from GitHub API - Create server-side API endpoint for issue status lookup with caching - Build GitHubBadge component with color-coded status indicators (open/closed) - Integrate badges into TaskCard with hover state linking to GitHub issues - Add CSS styles for badge positioning and visual polish - Include comprehensive tests for GitHubBadge and TaskCard badge rendering
This commit is contained in:
@@ -1705,6 +1705,44 @@ body {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* === GitHub Badges === */
|
||||
.card-github-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: filter 0.15s ease, transform 0.1s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.card-github-badge:hover {
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
|
||||
.card-github-badge:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Modifier classes for state-based styling */
|
||||
.card-github-badge--open {
|
||||
/* Green styling applied via inline styles */
|
||||
}
|
||||
|
||||
.card-github-badge--closed {
|
||||
/* Red styling applied via inline styles */
|
||||
}
|
||||
|
||||
.card-github-badge--merged {
|
||||
/* Purple styling applied via inline styles */
|
||||
}
|
||||
|
||||
.card-github-badge--completed {
|
||||
/* Purple styling applied via inline styles */
|
||||
}
|
||||
|
||||
/* Card saving state */
|
||||
.card.card-saving {
|
||||
opacity: 0.7;
|
||||
|
||||
Reference in New Issue
Block a user