From 606dfc846c6a683683724cd430971ee3c856de2d Mon Sep 17 00:00:00 2001
From: Clow <zi.crab3@gmail.com>
Date: Mon, 23 Mar 2026 16:25:14 +0000
Subject: [PATCH 1/3] feat: integrate BountyTags into CreatorBountyCard and
 ContributorProfile

Closes #487

Replaces inline tier/skill rendering with the reusable BountyTags component:

- CreatorBountyCard: adds tier, skills, and category pills above the
  status/escrow/deadline line for visual consistency with BountyCard
- ContributorProfile: replaces manual tierLabel() + TIER_COLORS inline
  spans with BountyTags tier pill in the recent bounties list

Both components now use the same GitHub-label-colored pills as the
bounty board, providing consistent visual language across the app.

Wallet: HZV6YPdTeJPjPujWjzsFLLKja91K2Ze78XeY8MeFhfK8
---
 .../src/components/ContributorProfile.tsx     | 19 +++++++++++++------
 .../components/bounties/CreatorBountyCard.tsx | 11 +++++++++++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ContributorProfile.tsx b/frontend/src/components/ContributorProfile.tsx
index 43f76e9a..4a3d9eb2 100644
--- a/frontend/src/components/ContributorProfile.tsx
+++ b/frontend/src/components/ContributorProfile.tsx
@@ -5,6 +5,8 @@ import type { ContributorBadgeStats } from '../types/badges';
 import { computeBadges } from '../types/badges';
 import { BadgeGrid } from './badges';
 import { TimeAgo } from './common/TimeAgo';
+import { BountyTags } from './bounties/BountyTags';
+import type { BountyTier } from '../types/bounty';
 
 interface RecentBounty {
   title: string;
@@ -276,13 +278,18 @@ export const ContributorProfile: React.FC<ContributorProfileProps> = ({
                 <div className="flex items-center justify-between gap-2">
                   <div className="flex-1 min-w-0">
                     <p className="text-sm text-white truncate">{bounty.title}</p>
-                    <p className="text-xs text-gray-500 mt-0.5">
-                      {tierLabel(bounty.tier)} · {bounty.earned.toLocaleString()} FNDRY · {new Date(bounty.completedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
-                    </p>
+                    <div className="flex items-center gap-2 mt-1">
+                      <BountyTags
+                        tier={`T${bounty.tier}` as BountyTier}
+                        skills={[]}
+                        showTier
+                        className="inline-flex"
+                      />
+                      <span className="text-xs text-gray-500">
+                        {bounty.earned.toLocaleString()} FNDRY · {new Date(bounty.completedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+                      </span>
+                    </div>
                   </div>
-                  <span className={`text-xs font-medium ${TIER_COLORS[bounty.tier].text}`}>
-                    {tierLabel(bounty.tier)}
-                  </span>
                 </div>
               </a>
             ))}
diff --git a/frontend/src/components/bounties/CreatorBountyCard.tsx b/frontend/src/components/bounties/CreatorBountyCard.tsx
index 3a5a8246..d9f6a747 100644
--- a/frontend/src/components/bounties/CreatorBountyCard.tsx
+++ b/frontend/src/components/bounties/CreatorBountyCard.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useToast } from '../../hooks/useToast';
+import { BountyTags } from './BountyTags';
 
 interface Submission {
     id: string;
@@ -139,6 +140,16 @@ export function CreatorBountyCard({ bounty, onUpdate }: CreatorBountyCardProps)
                             )}
                         </div>
 
+                        <BountyTags
+                            tier={bounty.tier ?? 'T1'}
+                            skills={bounty.required_skills ?? bounty.skills ?? []}
+                            category={bounty.category}
+                            showTier
+                            maxSkills={4}
+                            className="mb-2"
+                            data-testid="creator-bounty"
+                        />
+
                         <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-400">
                             <span className={`font-semibold ${getStatusColor(bounty.status)} uppercase tracking-wider text-xs`}>
                                 {bounty.status.replace(/_/g, ' ')}

From 9b318fdfa7a2f94668ede2bc4329fb625c3846c1 Mon Sep 17 00:00:00 2001
From: Clow <zi.crab3@gmail.com>
Date: Mon, 23 Mar 2026 18:10:18 +0000
Subject: [PATCH 2/3] chore: retrigger review pipeline


From fa5ea88606464885d7ca4458edde0e8684005a04 Mon Sep 17 00:00:00 2001
From: Clow <zi.crab3@gmail.com>
Date: Tue, 24 Mar 2026 16:11:57 +0000
Subject: [PATCH 3/3] refactor: use BountyTier directly in RecentBounty, remove
 dead tierLabel helper

- Change RecentBounty.tier from '1 | 2 | 3' to BountyTier so the tier
  can be passed directly to BountyTags without a type cast
- Remove unused tierLabel function (was building 'T${tier}' string
  which is now handled by the BountyTier type itself)
- Drop 'as BountyTier' cast in ContributorProfile render

Addresses code review feedback from coderabbitai.
---
 frontend/src/components/ContributorProfile.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ContributorProfile.tsx b/frontend/src/components/ContributorProfile.tsx
index 4a3d9eb2..b9d266a9 100644
--- a/frontend/src/components/ContributorProfile.tsx
+++ b/frontend/src/components/ContributorProfile.tsx
@@ -11,7 +11,7 @@ import type { BountyTier } from '../types/bounty';
 interface RecentBounty {
   title: string;
   issueUrl: string;
-  tier: 1 | 2 | 3;
+  tier: BountyTier;
   earned: number;
   completedAt: string;
 }
@@ -113,10 +113,6 @@ function formatJoinDate(isoDate: string): string {
   return `Member since ${month} ${d.getFullYear()}`;
 }
 
-function tierLabel(tier: 1 | 2 | 3): string {
-  return `T${tier}`;
-}
-
 export const ContributorProfile: React.FC<ContributorProfileProps> = ({
   username,
   avatarUrl,
@@ -280,7 +276,7 @@ export const ContributorProfile: React.FC<ContributorProfileProps> = ({
                     <p className="text-sm text-white truncate">{bounty.title}</p>
                     <div className="flex items-center gap-2 mt-1">
                       <BountyTags
-                        tier={`T${bounty.tier}` as BountyTier}
+                        tier={bounty.tier}
                         skills={[]}
                         showTier
                         className="inline-flex"