Skip to content

Combined submissions/winning badge#1833

Merged
ragnep merged 10 commits intomainfrom
active-submissions-badge-redesign
Jan 27, 2026
Merged

Combined submissions/winning badge#1833
ragnep merged 10 commits intomainfrom
active-submissions-badge-redesign

Conversation

@ragnep
Copy link
Copy Markdown
Contributor

@ragnep ragnep commented Jan 27, 2026

Summary by CodeRabbit

  • New Features

    • Unified artist activity badge that consolidates submissions and wins into a single interactive indicator, showing counts, a winner icon or palette icon, and a dot when both apply; clicking opens the relevant view.
  • Bug Fixes / UX

    • Tooltips suppressed on touch/mobile devices for more reliable interaction; desktop tooltips show contextual, pluralized descriptions.
  • Tests

    • Added tests validating badge states, interactions, tooltip behavior, and mobile suppression.

✏️ Tip: You can customize this high-level summary in your review settings.

Signed-off-by: ragnep <ragneinfo@gmail.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jan 27, 2026

Warning

Rate limit exceeded

@ragnep has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 14 minutes and 33 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

Consolidates separate submission and winner badges into a new ArtistActivityBadge component and updates multiple artist-info components to use it; adds tests for the new badge including mobile tooltip suppression.

Changes

Cohort / File(s) Summary
New ArtistActivityBadge Component
components/waves/drops/ArtistActivityBadge.tsx
New exported React component that computes badge state from submissionCount and winCount, renders palette/trophy icon (or both with dot), manages aria labels, unique tooltip ids, desktop-only tooltip, hover state, and invokes onBadgeClick with an initial tab.
ArtistActivityBadge Test Suite
__tests__/components/waves/drops/ArtistActivityBadge.test.tsx
Adds tests covering null render, submissions-only, wins-only, combined state, tooltip suppression on mobile (mocks isMobileDevice / useDeviceInfo / react-tooltip), icon presence, aria labels, and click handling.
Badge Consolidation in Artist Info Components
components/memes/drops/MemesLeaderboardDropArtistInfo.tsx, components/memes/drops/meme-participation-drop/MemeDropArtistInfo.tsx, components/waves/drop/SingleWaveDropAuthor.tsx, components/waves/drops/WaveDropHeader.tsx
Replaces ProfileWinnerBadge and ArtistSubmissionBadge with ArtistActivityBadge; introduces hasActivityBadge (submissions

Sequence Diagram(s)

sequenceDiagram
  participant Parent as Parent Component
  participant Badge as ArtistActivityBadge
  participant Device as isMobileDevice / useDeviceInfo
  participant Tooltip as Tooltip
  participant Handler as onBadgeClick

  Parent->>Badge: render(submissionCount, winCount, tooltipId, onBadgeClick)
  Badge->>Device: query mobile/touch state
  alt not mobile
    Badge->>Tooltip: render tooltip(content, tooltipId)
    Tooltip-->>Badge: tooltip shown on hover
  end
  Badge->>Handler: on click -> onBadgeClick(initialTab)
  Handler-->>Parent: open modal / switch tab
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

  • Issue #1827: Implements the same consolidation of submission and winner badges into a single ArtistActivityBadge and updates usages across components.

Possibly related PRs

  • PR #1640: Overlaps by consolidating ProfileWinnerBadge/ArtistSubmissionBadge into ArtistActivityBadge and updating components.
  • PR #1639: Modifies badge rendering in meme-related artist info components; related to the same badge consolidation.
  • PR #1655: Related refactor replacing separate submission/winner badges with a unified activity badge across UI paths.

Suggested reviewers

  • prxt6529

Poem

🥕 I hopped through code with ears so bright,

Palette, trophy — now side-by-side in light,
Tooltips whisper on desktops, quiet on phone,
One badge to rule the artist throne — behold, it's grown! 🐇✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and accurately summarizes the primary change: consolidating two separate badges (submission and winning) into a single combined badge component.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
components/waves/drop/SingleWaveDropAuthor.tsx (1)

45-85: Avoid nesting the badge button inside a Link.

ArtistActivityBadge renders a <button>, which shouldn’t be nested inside an anchor. This can cause accessibility and click/keyboard inconsistencies. Consider moving the badge outside the Link and adjusting layout.

✅ Suggested structural adjustment (layout may need a small tweak)
-        <Link
-          href={`/${drop.author.handle}`}
-          className="tw-flex tw-items-center tw-gap-x-2.5 tw-no-underline"
-        >
+        <Link
+          href={`/${drop.author.handle}`}
+          className="tw-flex tw-items-center tw-gap-x-2.5 tw-no-underline"
+        >
           ...
-            <div className="tw-inline-flex tw-items-center tw-gap-x-1">
-              {hasActivityBadge && (
-                <ArtistActivityBadge
-                  submissionCount={submissionCount}
-                  winCount={winnerCount}
-                  onBadgeClick={handleBadgeClick}
-                  tooltipId={`single-drop-activity-badge-${drop.id}`}
-                />
-              )}
-            </div>
+            {/* badge moved outside Link */}
           ...
-        </Link>
+        </Link>
+        {hasActivityBadge && (
+          <ArtistActivityBadge
+            submissionCount={submissionCount}
+            winCount={winnerCount}
+            onBadgeClick={handleBadgeClick}
+            tooltipId={`single-drop-activity-badge-${drop.id}`}
+          />
+        )}
🤖 Fix all issues with AI agents
In `@components/waves/drops/ArtistActivityBadge.tsx`:
- Around line 66-83: The button in the ArtistActivityBadge component currently
uses aria-haspopup="dialog" and a static aria-expanded="false", which is
incorrect for a non-interactive tooltip; remove those two attributes and instead
use aria-describedby to reference the tooltip element when present (use the
existing dataTooltipId or the tooltip's id), and ensure aria-describedby is
added/removed or updated when the tooltip opens/closes so screen readers get the
tooltip text; also verify the tooltip element itself has role="tooltip" or an
appropriate semantic attribute.
🧹 Nitpick comments (1)
components/waves/drops/ArtistActivityBadge.tsx (1)

11-18: Consider reusing shared tooltip styles to avoid drift.

There’s already a shared tooltip style helper; reusing it keeps visuals consistent across components.

♻️ Proposed refactor
 import { Tooltip } from "react-tooltip";
+import { TOOLTIP_STYLES } from "@/helpers/tooltip.helpers";
 
-const TOOLTIP_STYLES = {
-  backgroundColor: "#1F2937",
-  color: "white",
-  padding: "6px 12px",
-  fontSize: "12px",
-  zIndex: 50,
-  boxShadow: "0 4px 16px 0 rgba(0,0,0,0.30), 0 2px 8px 0 rgba(55,55,62,0.25)",
-} as const;

Signed-off-by: ragnep <ragneinfo@gmail.com>
Signed-off-by: ragnep <ragneinfo@gmail.com>
Signed-off-by: ragnep <ragneinfo@gmail.com>
Signed-off-by: ragnep <ragneinfo@gmail.com>
Signed-off-by: ragnep <ragneinfo@gmail.com>
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@components/waves/drops/ArtistActivityBadge.tsx`:
- Around line 130-142: The button inside ArtistActivityBadge's JSX currently
lacks an explicit type and can act as a submit in forms; update the <button>
element in ArtistActivityBadge (the one with onClick handler that calls
setIsTooltipOpen(false) and onBadgeClick(initialTab), plus
onMouseEnter/onMouseLeave and aria props) to include type="button" to prevent
accidental form submissions while preserving the existing handlers and
attributes.
🧹 Nitpick comments (1)
components/waves/drops/ArtistActivityBadge.tsx (1)

11-18: Disambiguate tooltip style constant to avoid confusion with shared styles.

There’s already a TOOLTIP_STYLES helper elsewhere; keeping the same name locally risks confusion or accidental misuse later. If you intend a bespoke style here, a more specific name keeps intent clear.

♻️ Suggested rename (no behavior change)
-const TOOLTIP_STYLES = {
+const ARTIST_BADGE_TOOLTIP_STYLES = {
   backgroundColor: "#1F2937",
   color: "white",
   padding: "6px 12px",
   fontSize: "12px",
   zIndex: 50,
   boxShadow: "0 4px 16px 0 rgba(0,0,0,0.30), 0 2px 8px 0 rgba(55,55,62,0.25)",
 } as const;
@@
-          style={TOOLTIP_STYLES}
+          style={ARTIST_BADGE_TOOLTIP_STYLES}

Also applies to: 160-160

Comment thread components/waves/drops/ArtistActivityBadge.tsx
Signed-off-by: ragnep <ragneinfo@gmail.com>
@sonarqubecloud
Copy link
Copy Markdown

@ragnep ragnep merged commit ecce4d4 into main Jan 27, 2026
7 checks passed
@ragnep ragnep deleted the active-submissions-badge-redesign branch January 27, 2026 11:31
@coderabbitai coderabbitai Bot mentioned this pull request Mar 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants