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,36 +12,55 @@ 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 }>
-            <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 } /> }
+            <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 } /> }
+                    </Flex>
+                    <Flex column gap={ 0 }>
+                        <Text bold variant="white">{ LocalizeText('notification.badge.received') }</Text>
+                        <Text variant="white" small>{ item.message }</Text>
+                    </Flex>
                 </Flex>
-                <Flex column gap={ 0 }>
-                    <Text bold variant="white">{ LocalizeText('notification.badge.received') }</Text>
-                    <Text variant="white" small>{ item.message }</Text>
+                <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>
+                    <span className="underline cursor-pointer text-nowrap" onClick={ handleDismiss }>
+                        { LocalizeText('notifications.button.later') }
+                    </span>
                 </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>
-                <span className="underline cursor-pointer text-nowrap" onClick={ onClose }>
-                    { 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);
     });