🆙 Fix wear badge in popup

This commit is contained in:
duckietm
2026-05-12 10:54:01 +02:00
parent cdf8d929e1
commit 53f41cdbe9
2 changed files with 18 additions and 14 deletions
@@ -16,7 +16,7 @@ export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps>
const getClassNames = useMemo(() => 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); if(classNames.length) newClassNames.push(...classNames);
@@ -12,21 +12,24 @@ export interface NotificationBadgeReceivedBubbleViewProps extends LayoutNotifica
export const NotificationBadgeReceivedBubbleView: FC<NotificationBadgeReceivedBubbleViewProps> = props => export const NotificationBadgeReceivedBubbleView: FC<NotificationBadgeReceivedBubbleViewProps> = props =>
{ {
const { item = null, onClose = null, ...rest } = props; const { item = null, onClose = null, ...rest } = props;
const { badgeCodes = [], toggleBadge = null } = useInventoryBadges(); const { activeBadgeCodes = [], toggleBadge = null, isWearingBadge = null, canWearBadges = null } = useInventoryBadges();
useEffect(() => 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) => const handleWear = (event: React.MouseEvent) =>
{ {
event.stopPropagation(); event.stopPropagation();
if(item.linkUrl) if(canShowWearButton && toggleBadge) toggleBadge(badgeCode);
{
toggleBadge(item.linkUrl);
}
if(onClose) onClose(); if(onClose) onClose();
}; };
@@ -54,12 +57,13 @@ export const NotificationBadgeReceivedBubbleView: FC<NotificationBadgeReceivedBu
</Flex> </Flex>
</Flex> </Flex>
<Flex alignItems="center" justifyContent="end" gap={ 2 }> <Flex alignItems="center" justifyContent="end" gap={ 2 }>
<button { canShowWearButton &&
className="btn btn-success w-full btn-sm" <button
type="button" className="btn btn-success w-full btn-sm"
onClick={ handleWear }> type="button"
{ LocalizeText('inventory.badges.wearbadge') } onClick={ handleWear }>
</button> { LocalizeText('inventory.badges.wearbadge') }
</button> }
<span className="underline cursor-pointer text-nowrap" onClick={ handleDismiss }> <span className="underline cursor-pointer text-nowrap" onClick={ handleDismiss }>
{ LocalizeText('notifications.button.later') } { LocalizeText('notifications.button.later') }
</span> </span>