Update LayoutItemCount

src/common/card/tabs/NitroCardTabsItemView.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { FC, MouseEventHandler } from 'react';
-import { ItemCountView } from '../../../views/shared/item-count/ItemCountView';
+import { LayoutItemCountView } from '../../layout';
 
 interface NitroCardTabsItemViewProps
 {
@@ -17,7 +17,7 @@ export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
         <li className={ 'nav-link cursor-pointer position-relative' + classNames({ ' active': isActive }) } onClick={ onClick }>
             { children }
             { (count > 0) &&
-                <ItemCountView count={ count } /> }
+                <LayoutItemCountView count={ count } /> }
         </li>
     );
 }

src/common/index.scss

@@ -260,4 +260,12 @@
     height: 15px;
 }
 
+.nitro-item-count {
+    top: 2px;
+    right: 2px;
+    font-size: 8px;
+    z-index: 1;
+}
+
+
 @import './card/NitroCardView';

src/common/layout/LayoutGridItem.tsx

@@ -1,8 +1,8 @@
 import { FC, useMemo } from 'react';
-import { ItemCountView } from '../../views/shared/item-count/ItemCountView';
 import { LimitedEditionStyledNumberView } from '../../views/shared/limited-edition/LimitedEditionStyledNumberView';
 import { Base } from '../Base';
 import { Column, ColumnProps } from '../Column';
+import { LayoutItemCountView } from './LayoutItemCountView';
 
 export interface LayoutGridItemProps extends ColumnProps
 {
@@ -61,7 +61,7 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
     return (
         <Column center={ center } pointer position={ position } overflow={ overflow } column={ column } classNames={ getClassNames } style={ getStyle } { ...rest }>
             { (itemCount > itemCountMinimum) &&
-                <ItemCountView count={ itemCount } /> }
+                <LayoutItemCountView count={ itemCount } /> }
             { (itemUniqueNumber > 0) && 
                 <>
                     <Base fit className="unique-bg-override" style={ { backgroundImage: `url(${ itemImage })` } } />

src/common/layout/LayoutItemCountView.tsx

@@ -0,0 +1,28 @@
+import { FC, useMemo } from 'react';
+import { Base, BaseProps } from '..';
+
+interface LayoutItemCountViewProps extends BaseProps<HTMLDivElement>
+{
+    count: number;
+}
+
+export const LayoutItemCountView: FC<LayoutItemCountViewProps> = props =>
+{
+    const { count = 0, position = 'aboslute', classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'badge', 'border', 'bg-danger', 'px-1', 'rounded-circle', 'nitro-item-count' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return (
+        <Base position="absolute" classNames={ getClassNames } { ...rest }>
+            { count }
+            { children }
+        </Base>
+    );
+}

src/common/layout/index.ts

@@ -2,6 +2,7 @@ export * from './LayoutCurrencyIcon';
 export * from './LayoutGiftTagView';
 export * from './LayoutGridItem';
 export * from './LayoutImage';
+export * from './LayoutItemCountView';
 export * from './LayoutLoadingSpinnerView';
 export * from './LayoutMiniCameraView';
 export * from './LayoutNotificationAlertView';

src/components/toolbar/ToolbarMeView.tsx

@@ -1,8 +1,7 @@
 import { RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, GetRoomSession } from '../../api';
-import { Base, Flex } from '../../common';
+import { Base, Flex, LayoutItemCountView } from '../../common';
-import { ItemCountView } from '../../views/shared/item-count/ItemCountView';
 import { ToolbarViewItems } from './common/ToolbarViewItems';
 
 export interface ToolbarMeViewProps
@@ -31,7 +30,7 @@ export const ToolbarMeView: FC<ToolbarMeViewProps> = props =>
                 <Base pointer className="navigation-item icon icon-me-helper-tool" onClick={ () => handleToolbarItemClick(ToolbarViewItems.GUIDE_TOOL_ITEM) } /> }
             <Base pointer className="navigation-item icon icon-me-achievements" onClick={ () => handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }>
                 { (unseenAchievementCount > 0) &&
-                    <ItemCountView count={ unseenAchievementCount } /> }
+                    <LayoutItemCountView count={ unseenAchievementCount } /> }
             </Base>
             <Base pointer className="navigation-item icon icon-me-profile" onClick={ () => handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) } />
             <Base pointer className="navigation-item icon icon-me-rooms" />

src/components/toolbar/ToolbarView.tsx

@@ -1,11 +1,10 @@
 import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, UserInfoDataParser, UserInfoEvent, Wait } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GetUserProfile, GoToDesktop, OpenMessengerChat } from '../../api';
-import { Base, Flex, TransitionAnimation, TransitionAnimationTypes } from '../../common';
+import { Base, Flex, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { AchievementsUIEvent, AchievementsUIUnseenCountEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, GuideToolEvent, InventoryEvent, ModToolsEvent, NavigatorEvent, UnseenItemTrackerUpdateEvent, UserSettingsUIEvent } from '../../events';
 import { BatchUpdates, DispatchUiEvent, UseMessageEventHook, UseRoomEngineEvent, UseUiEvent } from '../../hooks';
 import { AvatarImageView } from '../../views/shared/avatar-image/AvatarImageView';
-import { ItemCountView } from '../../views/shared/item-count/ItemCountView';
 import { ToolbarViewItems } from './common/ToolbarViewItems';
 import { ToolbarMeView } from './ToolbarMeView';
 
@@ -199,7 +198,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                         <Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
                             <AvatarImageView figure={ userFigure } direction={ 2 } />
                             { (unseenAchievementCount > 0) &&
-                                <ItemCountView count={ unseenAchievementCount } /> }
+                                <LayoutItemCountView count={ unseenAchievementCount } /> }
                         </Flex>
                         { isInRoom &&
                             <Base pointer className="navigation-item icon icon-habbo" onClick={ visitDesktop } /> }
@@ -209,7 +208,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                         <Base pointer className="navigation-item icon icon-catalog" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CATALOG_ITEM) } />
                         <Base pointer className="navigation-item icon icon-inventory" onClick={ event => handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }>
                             { (unseenInventoryCount > 0) &&
-                                <ItemCountView count={ unseenInventoryCount } /> }
+                                <LayoutItemCountView count={ unseenInventoryCount } /> }
                         </Base>
                         { isInRoom &&
                             <Base pointer className="navigation-item icon icon-camera" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) } /> }
@@ -222,7 +221,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                     <Flex gap={ 2 }>
                         <Base pointer className="navigation-item icon icon-friendall" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
                             { (unseenFriendRequestCount > 0) &&
-                                <ItemCountView count={ unseenFriendRequestCount } /> }
+                                <LayoutItemCountView count={ unseenFriendRequestCount } /> }
                         </Base>
                         { ((chatIconType === CHAT_ICON_SHOWING) || (chatIconType === CHAT_ICON_UNREAD)) &&
                             <Base pointer className={ `navigation-item icon icon-message ${ (chatIconType === CHAT_ICON_UNREAD) && 'is-unread' }` } onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) } /> }

src/views/friends/views/messenger/FriendsMessengerView.tsx

@@ -1,12 +1,11 @@
 import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, RoomInviteEvent, SendMessageComposer as SendMessageComposerPacket } from '@nitrots/nitro-renderer';
 import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound, RemoveLinkEventTracker, SendMessageComposer } from '../../../../api';
-import { Base, Button, ButtonGroup, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { FriendsMessengerIconEvent } from '../../../../events';
 import { BatchUpdates, DispatchUiEvent, UseMessageEventHook } from '../../../../hooks';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
-import { ItemCountView } from '../../../shared/item-count/ItemCountView';
 import { MessengerThread } from '../../common/MessengerThread';
 import { MessengerThreadChat } from '../../common/MessengerThreadChat';
 import { useFriendsContext } from '../../FriendsContext';
@@ -267,7 +266,7 @@ export const FriendsMessengerView: FC<{}> = props =>
                             return (
                                 <Flex key={index} className={`open-chat-entry p-1 cursor-pointer rounded ${activeThreadIndex === messageThreadIndex ? 'active' : ''}`} onClick={event => setActiveThreadIndex(messageThreadIndex)}>
                                     {thread.unread &&
-                                            <ItemCountView count={ thread.unreadCount }/>
+                                            <LayoutItemCountView count={ thread.unreadCount }/>
                                     }
                                     <div className="friend-head rounded flex-shrink-0">
                                         

src/views/shared/Shared.scss

@@ -5,4 +5,3 @@
 @import "./pet-image/PetImage";
 @import "./rarity-level/RarityLevelView";
 @import "./room-previewer/RoomPreviewerView";
-@import "./item-count/ItemCountView";

src/views/shared/item-count/ItemCountView.scss

@@ -1,6 +0,0 @@
-.nitro-item-count {
-    top: 2px;
-    right: 2px;
-    font-size: 8px;
-    z-index: 1;
-}

src/views/shared/item-count/ItemCountView.tsx

@@ -1,13 +0,0 @@
-import { FC } from 'react';
-
-interface ItemCountViewProps
-{
-    count: number;
-}
-
-export const ItemCountView: FC<ItemCountViewProps> = props =>
-{
-    const { count = 0 } = props;
-
-    return <div className="position-absolute badge border bg-danger px-1 rounded-circle nitro-item-count">{ count }</div>
-}