[FEATURE] Add Good First Issue badge for beginner-friendly issues (#181)#246
Conversation
- Add hasGoodFirstIssueLabel() helper to detect label variations - Add isGoodFirstIssue derived state for reactive badge display - Add emerald pill badge in mobile layout (text: Beginner) - Add emerald pill badge in desktop layout (text: Good First Issue) - Include tooltip explaining badge meaning for contributors - Update component header documentation
|
Note
|
| Cohort / File(s) | Summary |
|---|---|
Issue card — label detection & badges src/components/results/IssueCard.svelte |
Adds hasGoodFirstIssueLabel helper and derived isGoodFirstIssue; conditionally renders a mobile "Beginner" badge and desktop "Good First Issue" badge alongside existing issue-card UI. |
Results container — filters, sort, export, rate-limit props src/components/results/ResultsContainer.svelte |
Replaces inline filters with a card UI (easy-toggle, tag cloud show-more, custom sort dropdown, export buttons, reset filters); removes RateLimitDisplay re-export; passes new rate-limit props downstream and adds related CSS for the filter card. |
Search form — rate-limit UI & props src/components/results/SearchForm.svelte |
Adds public props rateLimitRemaining?: number and rateLimitResetTime?: string; shows inline rate-limit status near token input when provided; preserves existing auth/search logic. |
Tag cloud — styling simplification src/components/shared/TagCloud.svelte |
Removes dynamic font-size scaling and getFontSize; replaces with fixed-size tag buttons, adjusted opacity/border, reduced padding/gaps, and mobile-specific compact sizing. |
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
- [FEATURE] Interactive Issue Preview Card with Animations (#125) #239 — Modifies
IssueCard.svelte; likely overlaps on label handling and badge rendering. - [FEATURE] Add smart search result sorting with relevance score (#122) #238 — Touches
ResultsContainer.sveltesorting UI; related to the custom sort dropdown and state changes. - [FEATURE] Add interactive tag cloud component (#137) #245 — Changes
TagCloudbehavior and integration; related to the tag cloud styling and usage updates.
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Out of Scope Changes check | Pull request includes substantial out-of-scope changes: complete filter card UI redesign in ResultsContainer.svelte with label cloud collapse/expand, custom sort dropdown, export controls, and CSS-heavy modifications not requested in issue #181. | Remove non-essential UI redesigns (filter card, sort dropdown, export controls, tag cloud modifications) from this PR and address them in separate feature requests or future PRs. Keep only IssueCard.svelte badge implementation changes. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | ✅ Passed | The title clearly and concisely describes the main feature: adding a Good First Issue badge for beginner-friendly issues, directly matching the primary changeset. |
| Description check | ✅ Passed | The description covers all key template sections: summary of changes, implementation details, test plan checklist, and links to issue #181. All required information is present. |
| Linked Issues check | ✅ Passed | Changes fully satisfy issue #181 requirements: detects both 'good first issue' and 'good-first-issue' labels, displays distinctive emerald badge, positions it prominently, includes tooltip, modified IssueCard.svelte, and provides visual distinction. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✨ Finishing touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
feature/181-good-first-issue-badge
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/results/IssueCard.svelte
🧰 Additional context used
📓 Path-based instructions (4)
**/*.svelte
📄 CodeRabbit inference engine (CLAUDE.md)
Use Svelte 5 runes ($state, $derived, $effect) for reactive state management
Files:
src/components/results/IssueCard.svelte
**/*.{svelte,astro,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use UnoCSS with Tailwind-compatible syntax for styling
Files:
src/components/results/IssueCard.svelte
**/*.{js,ts,tsx,svelte,astro}
📄 CodeRabbit inference engine (CLAUDE.md)
Ensure ESLint linting passes with 0 errors (run
npm run lint)
Files:
src/components/results/IssueCard.svelte
**/*.{js,ts,tsx,svelte,astro,json,md}
📄 CodeRabbit inference engine (CLAUDE.md)
Format all code with Prettier including Svelte/Astro plugins (run
npm run format)
Files:
src/components/results/IssueCard.svelte
🪛 GitHub Actions: CI
src/components/results/IssueCard.svelte
[error] 139-139: Prettier formatting issue. Delete extra line break/whitespace (prettier/prettier)
🪛 GitHub Check: lint
src/components/results/IssueCard.svelte
[failure] 139-139:
Delete ⏎··················
[failure] 263-263:
Delete ⏎··················
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (2)
src/components/results/IssueCard.svelte (2)
56-66: LGTM! Label normalization logic is sound.The helper function correctly handles label variations by normalizing spaces and hyphens, and includes proper null safety checks. The implementation aligns well with the PR objectives to detect both 'good first issue' and 'good-first-issue' variants.
70-70: LGTM! Correctly implements Svelte 5 reactive state.The derived state properly uses the
$derivedrune for reactive computation, consistent with the coding guidelines and other derived states in the component.
Deploying issueflow with
|
| Latest commit: |
a4c681c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://98445498.issueflow.pages.dev |
| Branch Preview URL: | https://feature-181-good-first-issue.issueflow.pages.dev |
- Redesign filter card with improved visual hierarchy - Add custom dropdown replacing native select for consistent theme - Make TagCloud tags compact like GitHub issue labels (0.7rem, pill style) - Move rate limit display inline with Token label for cleaner layout - Add show more/less functionality for Labels section - Compact Sort and Export controls into single-line layouts - Add proper dividers between filter card sections - Clean up unused imports (RateLimitDisplay, isRateLimitError)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/components/results/SearchForm.svelte (1)
507-511: Rate limit exhaustion state not displayed.When
rateLimitRemainingis exactly 0, the rate limit info is hidden entirely. Users won't see any indication that they've exhausted their rate limit, which could lead to confusion when requests start failing.Consider also displaying when
rateLimitRemaining === 0:🔎 Proposed fix
- {#if rateLimitRemaining !== undefined && rateLimitRemaining > 0} - <span class="text-[10px] {rateLimitRemaining < 10 ? 'text-amber-400' : 'text-slate-500'}"> - {rateLimitRemaining} left{#if rateLimitResetTime} + {#if rateLimitRemaining !== undefined} + <span class="text-[10px] {rateLimitRemaining === 0 ? 'text-red-400' : rateLimitRemaining < 10 ? 'text-amber-400' : 'text-slate-500'}"> + {rateLimitRemaining === 0 ? 'Rate limit exhausted' : `${rateLimitRemaining} left`}{#if rateLimitResetTime} · {rateLimitResetTime}{/if} </span> {/if}src/components/shared/TagCloud.svelte (1)
51-53: Redundantborder: nonedeclaration.Line 81 sets
border: nonein CSS, but the inline style on line 53 setsborder: 1px solid #{label.color}60;. Since inline styles take precedence, the CSS rule is ineffective. Consider removing it for clarity.🔎 Proposed fix
.tag-button { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.125rem 0.5rem; border-radius: 9999px; - border: none; cursor: pointer;Also applies to: 81-81
src/components/results/ResultsContainer.svelte (2)
639-684: Dropdown lacks keyboard navigation.The sort dropdown has good ARIA attributes (
role="listbox",aria-selected), but is missing keyboard interaction patterns expected for a listbox:
- Arrow keys to navigate options
Escapeto close dropdownEnter/Spaceto select when focusedFor better accessibility, consider adding
onkeydownhandlers to support keyboard-only users.🔎 Example keyboard handler pattern
<button type="button" onclick={() => (sortDropdownOpen = !sortDropdownOpen)} onblur={() => setTimeout(() => (sortDropdownOpen = false), 150)} onkeydown={(e) => { if (e.key === 'Escape') { sortDropdownOpen = false; } else if (e.key === 'ArrowDown' && !sortDropdownOpen) { sortDropdownOpen = true; e.preventDefault(); } }} class="dropdown-trigger" ... >For the options, consider using
roving tabindexoraria-activedescendantpattern for keyboard navigation within the listbox.
642-642: Minor: Timeout not cleaned up on unmount.The
setTimeoutinonblurisn't cleared if the component unmounts. In practice, Svelte's reactivity handles this gracefully (setting state on an unmounted component is a no-op), but for strictness you could track and clear the timeout inonDestroy.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/results/ResultsContainer.sveltesrc/components/results/SearchForm.sveltesrc/components/shared/TagCloud.svelte
🧰 Additional context used
📓 Path-based instructions (4)
**/*.svelte
📄 CodeRabbit inference engine (CLAUDE.md)
Use Svelte 5 runes ($state, $derived, $effect) for reactive state management
Files:
src/components/shared/TagCloud.sveltesrc/components/results/SearchForm.sveltesrc/components/results/ResultsContainer.svelte
**/*.{svelte,astro,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use UnoCSS with Tailwind-compatible syntax for styling
Files:
src/components/shared/TagCloud.sveltesrc/components/results/SearchForm.sveltesrc/components/results/ResultsContainer.svelte
**/*.{js,ts,tsx,svelte,astro}
📄 CodeRabbit inference engine (CLAUDE.md)
Ensure ESLint linting passes with 0 errors (run
npm run lint)
Files:
src/components/shared/TagCloud.sveltesrc/components/results/SearchForm.sveltesrc/components/results/ResultsContainer.svelte
**/*.{js,ts,tsx,svelte,astro,json,md}
📄 CodeRabbit inference engine (CLAUDE.md)
Format all code with Prettier including Svelte/Astro plugins (run
npm run format)
Files:
src/components/shared/TagCloud.sveltesrc/components/results/SearchForm.sveltesrc/components/results/ResultsContainer.svelte
🧠 Learnings (1)
📚 Learning: 2025-12-27T04:07:21.626Z
Learnt from: CR
Repo: VibeTensor/IssueFlow PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-27T04:07:21.626Z
Learning: Applies to src/lib/search-history.ts : Use localStorage-based utility for search history management as implemented in `src/lib/search-history.ts`
Applied to files:
src/components/results/ResultsContainer.svelte
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (6)
src/components/results/SearchForm.svelte (1)
48-52: LGTM!Props are appropriately typed as optional, maintaining backwards compatibility with existing usages.
src/components/shared/TagCloud.svelte (1)
111-122: LGTM!Mobile-specific styling with reduced gaps and font sizes provides a good responsive experience. The
@media (max-width: 640px)breakpoint aligns with the Tailwindsmbreakpoint convention.src/components/results/ResultsContainer.svelte (4)
516-518: LGTM!Clean integration of rate limit props with SearchForm using derived values from
rateLimitstate.
559-587: LGTM!The "Easy to Start" toggle is well-implemented with:
- Clear visual states (active/inactive)
- Proper
aria-pressedfor accessibility- Checkbox-style visual indicator with checkmark
707-736: LGTM!The export row provides a clean, compact UI for exporting issues in multiple formats. The button group styling with shared container background is visually cohesive.
1248-1258: LGTM!The filter card container styles provide a polished, consistent look with appropriate backdrop blur and shadow for depth.
1 participant
Summary
Implementation Details
hasGoodFirstIssueLabel()helper function with label normalization (handles spaces/hyphens)isGoodFirstIssuederived state for reactive badge displaybg-emerald-600 text-white rounded-fullfor solid pill appearanceTest Plan
Closes #181
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.