From 0b033742d0f8750d398d48af7e25c4c3ed9c6bbc Mon Sep 17 00:00:00 2001
From: Life <simoleo89@gmail.com>
Date: Sat, 4 Apr 2026 18:45:19 +0200
Subject: [PATCH] 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.
---
 .../NotificationBadgeReceivedBubbleView.tsx   | 68 ++++++++++++-------
 src/hooks/notification/useNotification.ts     |  3 +
 2 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx b/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx
index 0969c8e..7b57db3 100644
--- a/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx
+++ b/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>
     );
 };
diff --git a/src/hooks/notification/useNotification.ts b/src/hooks/notification/useNotification.ts
index c13c499..007a61c 100644
--- a/src/hooks/notification/useNotification.ts
+++ b/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);
     });