From d3b8542e654cd3742d0b766d4422f08b5299304a Mon Sep 17 00:00:00 2001
From: Claude <claude@anthropic.com>
Date: Thu, 26 Feb 2026 00:57:03 +0000
Subject: [PATCH] feat(profile): increase showcase limit to 5 and add rarity
 glow to thumbnails

Increase MAX_SHOWCASE from 3 to 5 and apply rarity glow borders with
sparkle animations to achievement showcase thumbnails, matching the
AchievementsWidget visual treatment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../modals/AchievementShowcaseModal.tsx        |  2 +-
 .../ProfileAchievementShowcase.tsx             | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/modals/AchievementShowcaseModal.tsx b/packages/shared/src/components/modals/AchievementShowcaseModal.tsx
index 5b44c83b94..421ee64039 100644
--- a/packages/shared/src/components/modals/AchievementShowcaseModal.tsx
+++ b/packages/shared/src/components/modals/AchievementShowcaseModal.tsx
@@ -18,7 +18,7 @@ import { useShowcaseAchievements } from '../../hooks/profile/useShowcaseAchievem
 import { useProfileAchievements } from '../../hooks/profile/useProfileAchievements';
 import { useToastNotification } from '../../hooks/useToastNotification';
 
-const MAX_SHOWCASE = 3;
+const MAX_SHOWCASE = 5;
 
 export interface AchievementShowcaseModalProps extends ModalProps {
   user: PublicProfile;
diff --git a/packages/shared/src/features/profile/components/achievements/ProfileAchievementShowcase.tsx b/packages/shared/src/features/profile/components/achievements/ProfileAchievementShowcase.tsx
index 0d79ee2c4a..47bb3baf6b 100644
--- a/packages/shared/src/features/profile/components/achievements/ProfileAchievementShowcase.tsx
+++ b/packages/shared/src/features/profile/components/achievements/ProfileAchievementShowcase.tsx
@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 import React from 'react';
+import classNames from 'classnames';
 import type { PublicProfile } from '../../../../lib/user';
 import { useShowcaseAchievements } from '../../../../hooks/profile/useShowcaseAchievements';
 import { useProfilePreview } from '../../../../hooks/profile/useProfilePreview';
@@ -21,7 +22,9 @@ import { formatDate, TimeFormatType } from '../../../../lib/dateFormat';
 import {
   getAchievementRarityTier,
   AchievementRarityTier,
+  rarityGlowClasses,
 } from './achievementRarity';
+import { RaritySparkles } from './RaritySparkles';
 import { useLazyModal } from '../../../../hooks/useLazyModal';
 import { LazyModal } from '../../../../components/modals/common/types';
 
@@ -97,12 +100,23 @@ export function ProfileAchievementShowcase({
                 trigger={
                   <button
                     type="button"
-                    className="flex size-16 shrink-0 items-center justify-center rounded-14"
+                    className={classNames(
+                      'relative flex size-16 shrink-0 items-center justify-center rounded-14',
+                      rarityTier
+                        ? [
+                            'overflow-visible border',
+                            rarityGlowClasses[rarityTier],
+                          ]
+                        : 'overflow-hidden',
+                    )}
                   >
+                    {rarityTier && (
+                      <RaritySparkles tier={rarityTier} size="compact" />
+                    )}
                     <LazyImage
                       imgSrc={achievement.image}
                       imgAlt={achievement.name}
-                      className="size-16 rounded-14 object-cover"
+                      className="size-full rounded-14 object-cover"
                       fallbackSrc="https://daily.dev/default-achievement.png"
                     />
                   </button>