🆙 Fix wear badge in popup

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);
 

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)
+        if(canShowWearButton && toggleBadge) toggleBadge(badgeCode);
-        {
-            toggleBadge(item.linkUrl);
-        }
 
         if(onClose) onClose();
     };
@@ -54,12 +57,13 @@ export const NotificationBadgeReceivedBubbleView: FC<NotificationBadgeReceivedBu
                     </Flex>
                 </Flex>
                 <Flex alignItems="center" justifyContent="end" gap={ 2 }>
+                    { canShowWearButton &&
                         <button
                             className="btn btn-success w-full btn-sm"
                             type="button"
                             onClick={ handleWear }>
                             { LocalizeText('inventory.badges.wearbadge') }
-                    </button>
+                        </button> }
                     <span className="underline cursor-pointer text-nowrap" onClick={ handleDismiss }>
                         { LocalizeText('notifications.button.later') }
                     </span>