Fix badge notification: single bubble, working Wear button

Block NotificationDialogMessageEvent badge types to prevent duplicate
bubbles. Wrap bubble content in stopPropagation div so button clicks
don't close the notification before toggleBadge runs. Request badge
data on mount so Wear works even if inventory was never opened.

src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { LocalizeText, NotificationBubbleItem } from '../../../../api';
+import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
+import { FC, useEffect } from 'react';
+import { LocalizeText, NotificationBubbleItem, SendMessageComposer } from '../../../../api';
 import { Flex, LayoutNotificationBubbleView, LayoutNotificationBubbleViewProps, Text } from '../../../../common';
 import { useInventoryBadges } from '../../../../hooks';
 
@@ -11,16 +12,34 @@ export interface NotificationBadgeReceivedBubbleViewProps extends LayoutNotifica
 export const NotificationBadgeReceivedBubbleView: FC<NotificationBadgeReceivedBubbleViewProps> = props =>
 {
     const { item = null, onClose = null, ...rest } = props;
-    const { toggleBadge = null } = useInventoryBadges();
+    const { badgeCodes = [], toggleBadge = null } = useInventoryBadges();
 
-    const handleWear = () =>
+    useEffect(() =>
     {
-        if(item.linkUrl) toggleBadge(item.linkUrl);
-        onClose();
+        if(badgeCodes.length === 0) SendMessageComposer(new RequestBadgesComposer());
+    }, []);
+
+    const handleWear = (event: React.MouseEvent) =>
+    {
+        event.stopPropagation();
+
+        if(item.linkUrl)
+        {
+            toggleBadge(item.linkUrl);
+        }
+
+        if(onClose) onClose();
+    };
+
+    const handleDismiss = (event: React.MouseEvent) =>
+    {
+        event.stopPropagation();
+        if(onClose) onClose();
     };
 
     return (
         <LayoutNotificationBubbleView className="flex-col" onClose={ onClose } { ...rest }>
+            <div onClick={ (e) => e.stopPropagation() }>
                 <Flex alignItems="center" gap={ 2 } className="mb-2">
                     <Flex center className="w-[50px] h-[50px] shrink-0">
                         { item.iconUrl && <img alt="" className="no-select" src={ item.iconUrl } /> }
@@ -37,10 +56,11 @@ export const NotificationBadgeReceivedBubbleView: FC<NotificationBadgeReceivedBu
                         onClick={ handleWear }>
                         { LocalizeText('inventory.badges.wearbadge') }
                     </button>
-                <span className="underline cursor-pointer text-nowrap" onClick={ onClose }>
+                    <span className="underline cursor-pointer text-nowrap" onClick={ handleDismiss }>
                         { LocalizeText('notifications.button.later') }
                     </span>
                 </Flex>
+            </div>
         </LayoutNotificationBubbleView>
     );
 };

src/hooks/notification/useNotification.ts

@@ -356,6 +356,9 @@ const useNotificationState = () =>
     {
         const parser = event.getParser();
 
+        // Skip badge notifications — handled by BadgeReceivedEvent with "Wear" button
+        if(parser.type === 'badge_received' || parser.type === 'badges' || parser.type.includes('badge')) return;
+
         showNotification(parser.type, parser.parameters);
     });