CodeIssuesDiscussionsWikiPull RequestsProjectsCommitsActionsReleasesContributorsPulse● GatesSecuritySettingsDeploymentsPipelineInsightsAgents✨ Explain✨ Ask AI✨ Workspace✨ Spec✨ Tests▓ Debt Map✨ NL Search🏛 Archaeology
Blame · Line-by-line history
pending-comments-banner.tsx
Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.
| cb5a796 | 1 | /** |
| 2 | * Pending-comments banner — surfaced inline on repo pages (issues list, | |
| 3 | * issue detail, PR list, PR detail, repo home) when the viewer is the | |
| 4 | * repo owner AND there are 1+ comments awaiting moderation. | |
| 5 | * | |
| 6 | * We can't add this to `RepoNav` because that component is locked per | |
| 7 | * the build bible. Living here as a thin functional component lets each | |
| 8 | * page wrapper drop it in below the nav with a single import. | |
| 9 | * | |
| 10 | * Styling is scoped under `.modq-banner-*` so it can't bleed into other | |
| 11 | * surfaces. CSS injected inline once per render — the styles are <1KB | |
| 12 | * and the duplicate-injection cost is irrelevant given how rare the | |
| 13 | * banner appears (only on owner-viewed pages with pending items). | |
| 14 | */ | |
| 15 | ||
| 16 | const styles = ` | |
| 17 | .modq-banner { | |
| 18 | display: flex; | |
| 19 | align-items: center; | |
| 20 | gap: 14px; | |
| 21 | margin: 12px 0 18px; | |
| 22 | padding: 12px 16px; | |
| 23 | border-radius: 10px; | |
| 24 | background: linear-gradient(135deg, rgba(245, 191, 79, 0.14), rgba(220, 130, 47, 0.10)); | |
| 25 | border: 1px solid rgba(245, 191, 79, 0.45); | |
| 26 | color: var(--text, #e6edf3); | |
| 27 | font-size: 14px; | |
| 28 | line-height: 1.4; | |
| 29 | } | |
| 30 | .modq-banner-icon { | |
| 31 | flex: 0 0 auto; | |
| 32 | width: 28px; | |
| 33 | height: 28px; | |
| 34 | border-radius: 50%; | |
| 35 | background: rgba(245, 191, 79, 0.20); | |
| 36 | display: inline-flex; | |
| 37 | align-items: center; | |
| 38 | justify-content: center; | |
| 39 | font-weight: 700; | |
| 40 | color: #f5bf4f; | |
| 41 | } | |
| 42 | .modq-banner-text { flex: 1 1 auto; } | |
| 43 | .modq-banner-text strong { color: var(--text-strong, #fff); } | |
| 44 | .modq-banner-action { | |
| 45 | flex: 0 0 auto; | |
| 46 | padding: 6px 14px; | |
| 47 | border-radius: 6px; | |
| 48 | background: rgba(245, 191, 79, 0.18); | |
| 49 | color: #f5bf4f; | |
| 50 | border: 1px solid rgba(245, 191, 79, 0.45); | |
| 51 | text-decoration: none; | |
| 52 | font-weight: 600; | |
| 53 | font-size: 13px; | |
| 54 | } | |
| 55 | .modq-banner-action:hover { | |
| 56 | background: rgba(245, 191, 79, 0.30); | |
| 57 | text-decoration: none; | |
| 58 | } | |
| 59 | .modq-pending-badge { | |
| 60 | display: inline-block; | |
| 61 | margin-left: 6px; | |
| 62 | padding: 2px 8px; | |
| 63 | border-radius: 9999px; | |
| 64 | background: rgba(245, 191, 79, 0.18); | |
| 65 | border: 1px solid rgba(245, 191, 79, 0.45); | |
| 66 | color: #f5bf4f; | |
| 67 | font-size: 11px; | |
| 68 | font-weight: 600; | |
| 69 | letter-spacing: 0.02em; | |
| 70 | } | |
| 71 | .modq-comment-pending { | |
| 72 | border-left: 3px solid rgba(245, 191, 79, 0.55) !important; | |
| 73 | background: rgba(245, 191, 79, 0.04); | |
| 74 | } | |
| 75 | `; | |
| 76 | ||
| 77 | export function PendingCommentsBanner({ | |
| 78 | owner, | |
| 79 | repo, | |
| 80 | count, | |
| 81 | }: { | |
| 82 | owner: string; | |
| 83 | repo: string; | |
| 84 | count: number; | |
| 85 | }) { | |
| 86 | if (!count || count <= 0) return null; | |
| 87 | return ( | |
| 88 | <> | |
| 89 | <style dangerouslySetInnerHTML={{ __html: styles }} /> | |
| 90 | <div class="modq-banner" role="status" aria-live="polite"> | |
| 91 | <span class="modq-banner-icon" aria-hidden="true">!</span> | |
| 92 | <span class="modq-banner-text"> | |
| 93 | <strong> | |
| 94 | {count} comment{count === 1 ? "" : "s"} | |
| 95 | </strong>{" "} | |
| 96 | from non-collaborators {count === 1 ? "is" : "are"} awaiting your | |
| 97 | approval. Review them before they go public. | |
| 98 | </span> | |
| 99 | <a | |
| 100 | class="modq-banner-action" | |
| 101 | href={`/${owner}/${repo}/comments/pending`} | |
| 102 | > | |
| 103 | Review queue | |
| 104 | </a> | |
| 105 | </div> | |
| 106 | </> | |
| 107 | ); | |
| 108 | } |