From 53f41cdbe9321863d636b9d8befc0bc86290dfb5 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Tue, 12 May 2026 10:54:01 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=86=99=20Fix=20wear=20badge=20in=20popup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/LayoutNotificationBubbleView.tsx   |  2 +-
 .../NotificationBadgeReceivedBubbleView.tsx   | 30 +++++++++++--------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/common/layout/LayoutNotificationBubbleView.tsx b/src/common/layout/LayoutNotificationBubbleView.tsx
index b502b3b..b72fe65 100644
--- a/src/common/layout/LayoutNotificationBubbleView.tsx
+++ b/src/common/layout/LayoutNotificationBubbleView.tsx
@@ -16,7 +16,7 @@ export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'text-sm bg-[#1c1c20f2] px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] ', 'rounded' ];
+        const newClassNames: string[] = [ 'pointer-events-auto text-sm bg-[#1c1c20f2] px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] ', 'rounded' ];
 
         if(classNames.length) newClassNames.push(...classNames);
 
diff --git a/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx b/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx
index 8c1154e..efe6098 100644
--- a/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx
+++ b/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx
@@ -12,21 +12,24 @@ export interface NotificationBadgeReceivedBubbleViewProps extends LayoutNotifica
 export const NotificationBadgeReceivedBubbleView: FC<NotificationBadgeReceivedBubbleViewProps> = props =>
 {
     const { item = null, onClose = null, ...rest } = props;
-    const { badgeCodes = [], toggleBadge = null } = useInventoryBadges();
+    const { activeBadgeCodes = [], toggleBadge = null, isWearingBadge = null, canWearBadges = null } = useInventoryBadges();
 
     useEffect(() =>
     {
-        if(badgeCodes.length === 0) SendMessageComposer(new RequestBadgesComposer());
-    }, []);
+        if(activeBadgeCodes.length === 0) SendMessageComposer(new RequestBadgesComposer());
+    }, [ activeBadgeCodes.length ]);
+
+    const badgeCode = item?.linkUrl ?? null;
+    const isLoaded = activeBadgeCodes.length > 0;
+    const alreadyWearing = !!badgeCode && !!isWearingBadge && isWearingBadge(badgeCode);
+    const slotsAvailable = !!canWearBadges && canWearBadges();
+    const canShowWearButton = !!badgeCode && isLoaded && !alreadyWearing && slotsAvailable;
 
     const handleWear = (event: React.MouseEvent) =>
     {
         event.stopPropagation();
 
-        if(item.linkUrl)
-        {
-            toggleBadge(item.linkUrl);
-        }
+        if(canShowWearButton && toggleBadge) toggleBadge(badgeCode);
 
         if(onClose) onClose();
     };
@@ -54,12 +57,13 @@ export const NotificationBadgeReceivedBubbleView: FC<NotificationBadgeReceivedBu
                     </Flex>
                 </Flex>
                 <Flex alignItems="center" justifyContent="end" gap={ 2 }>
-                    <button
-                        className="btn btn-success w-full btn-sm"
-                        type="button"
-                        onClick={ handleWear }>
-                        { LocalizeText('inventory.badges.wearbadge') }
-                    </button>
+                    { canShowWearButton &&
+                        <button
+                            className="btn btn-success w-full btn-sm"
+                            type="button"
+                            onClick={ handleWear }>
+                            { LocalizeText('inventory.badges.wearbadge') }
+                        </button> }
                     <span className="underline cursor-pointer text-nowrap" onClick={ handleDismiss }>
                         { LocalizeText('notifications.button.later') }
                     </span>