Update common components

src/common/Base.tsx

@@ -6,6 +6,8 @@ export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttrib
 {
     innerRef?: LegacyRef<T>;
     fit?: boolean;
+    grow?: boolean;
+    shrink?: boolean;
     fullWidth?: boolean;
     fullHeight?: boolean;
     overflow?: OverflowType;
@@ -16,7 +18,7 @@ export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttrib
 
 export const Base: FC<BaseProps<HTMLDivElement>> = props =>
 {
-    const { ref = null, innerRef = null, fit = false, fullWidth = false, fullHeight = false, overflow = null, position = null, pointer = false, classNames = [], className = '', style = {}, ...rest } = props;
+    const { ref = null, innerRef = null, fit = false, grow = false, shrink = false, fullWidth = false, fullHeight = false, overflow = null, position = null, pointer = false, classNames = [], className = '', style = {}, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -26,6 +28,10 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
 
         if(fit || fullHeight) newClassNames.push('h-100');
 
+        if(grow) newClassNames.push('flex-grow-1');
+
+        if(shrink) newClassNames.push('flex-shrink-0');
+
         if(overflow) newClassNames.push('overflow-' + overflow);
 
         if(position) newClassNames.push('position-' + position);
@@ -35,7 +41,7 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ fit, fullWidth, fullHeight, overflow, position, pointer, classNames ]);
+    }, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, pointer, classNames ]);
 
     const getClassName = useMemo(() =>
     {

src/common/Button.tsx

@@ -7,12 +7,13 @@ export interface ButtonProps extends FlexProps
 {
     variant?: ColorVariantType;
     size?: ButtonSizeType;
+    active?: boolean;
     disabled?: boolean;
 }
 
 export const Button: FC<ButtonProps> = props =>
 {
-    const { variant = 'primary', size = null, disabled = false, classNames = [], ...rest } = props;
+    const { variant = 'primary', size = null, active = false, disabled = false, classNames = [], ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -22,12 +23,14 @@ export const Button: FC<ButtonProps> = props =>
 
         if(size) newClassNames.push('btn-' + size);
 
+        if(active) newClassNames.push('active');
+
         if(disabled) newClassNames.push('disabled');
 
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ variant, size, disabled, classNames ]);
+    }, [ variant, size, active, disabled, classNames ]);
 
     return <Flex center classNames={ getClassNames } { ...rest } />;
 }

src/common/Column.tsx

@@ -5,11 +5,12 @@ import { ColumnSizesType } from './types/ColumnSizesType';
 export interface ColumnProps extends FlexProps
 {
     size?: ColumnSizesType;
+    column?: boolean;
 }
 
 export const Column: FC<ColumnProps> = props =>
 {
-    const { size = 0, gap = 2, classNames = [], ...rest } = props;
+    const { size = 0, column = true, gap = 2, classNames = [], ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -22,5 +23,5 @@ export const Column: FC<ColumnProps> = props =>
         return newClassNames;
     }, [ size, classNames ]);
 
-    return <Flex classNames={ getClassNames } column={ true } gap={ gap } { ...rest } />;
+    return <Flex classNames={ getClassNames } column={ column } gap={ gap } { ...rest } />;
 }

src/common/Flex.tsx

@@ -9,8 +9,6 @@ export interface FlexProps extends BaseProps<HTMLDivElement>
     inline?: boolean;
     column?: boolean;
     reverse?: boolean;
-    grow?: boolean;
-    shrink?: boolean;
     gap?: SpacingType;
     center?: boolean;
     alignItems?: AlignItemType;
@@ -19,7 +17,7 @@ export interface FlexProps extends BaseProps<HTMLDivElement>
 
 export const Flex: FC<FlexProps> = props =>
 {
-    const { inline = false, column = undefined, reverse = false, grow = false, shrink = false, gap = null, center = false, alignItems = null, justifyContent = null, classNames = [], ...rest } = props;
+    const { inline = false, column = undefined, reverse = false, gap = null, center = false, alignItems = null, justifyContent = null, classNames = [], ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -28,10 +26,6 @@ export const Flex: FC<FlexProps> = props =>
         if(inline) newClassNames.push('d-inline-flex');
         else newClassNames.push('d-flex');
 
-        if(grow) newClassNames.push('flex-grow-1');
-
-        if(shrink) newClassNames.push('flex-shrink-0');
-
         if(column)
         {
             if(reverse) newClassNames.push('flex-column-reverse');
@@ -53,7 +47,7 @@ export const Flex: FC<FlexProps> = props =>
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ inline, column, reverse, grow, shrink, gap, center, alignItems, justifyContent, classNames ]);
+    }, [ inline, column, reverse, gap, center, alignItems, justifyContent, classNames ]);
 
     return <Base classNames={ getClassNames } { ...rest } />;
 }

src/common/Grid.tsx

@@ -41,7 +41,7 @@ export const Grid: FC<GridProps> = props =>
             newStyle['--bs-columns'] = columnCount.toString();
         }
 
-        if(grow)
+        if(grow && (!columnCount || (columnCount > 1)))
         {
             newStyle['--nitro-grid-column-min-width'] = (columnMinWidth + 'px');
             newStyle['--nitro-grid-column-min-height'] = (columnMinHeight + 'px');
@@ -53,7 +53,5 @@ export const Grid: FC<GridProps> = props =>
         return newStyle;
     }, [ columnCount, columnMinWidth, columnMinHeight, grow, style ]);
 
-    console.log('render')
-
     return <Base classNames={ getClassNames } style={ getStyle } { ...rest } />;
 }

src/common/Text.tsx

@@ -12,11 +12,12 @@ export interface TextProps extends BaseProps<HTMLDivElement>
     underline?: boolean;
     truncate?: boolean;
     center?: boolean;
+    textEnd?: boolean;
 }
 
 export const Text: FC<TextProps> = props =>
 {
-    const { variant = 'black', fontWeight = null, fontSize = 0, underline = false, truncate = false, center = false, ...rest } = props;
+    const { variant = 'black', fontWeight = null, fontSize = 0, underline = false, truncate = false, center = false, textEnd = false, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -34,8 +35,10 @@ export const Text: FC<TextProps> = props =>
 
         if(center) newClassNames.push('text-center');
 
+        if(textEnd) newClassNames.push('text-end');
+
         return newClassNames;
-    }, [ variant, fontWeight, fontSize, underline, truncate, center ]);
+    }, [ variant, fontWeight, fontSize, underline, truncate, center, textEnd ]);
 
     return <Base classNames={ getClassNames } { ...rest } />;
 }

src/common/layout/LayoutGridItem.tsx

@@ -11,13 +11,14 @@ export interface LayoutGridItemProps extends ColumnProps
     itemActive?: boolean;
     itemCount?: number;
     itemCountMinimum?: number;
+    itemUniqueSoldout?: boolean;
     itemUniqueNumber?: number;
     itemUnseen?: boolean;
 }
 
 export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
 {
-    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props;
+    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, center = true, column = true, style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -25,9 +26,9 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
 
         if(itemActive) newClassNames.push('active');
 
-        if(itemUniqueNumber === -1) newClassNames.push('unique-item', 'sold-out');
+        if(itemUniqueSoldout || (itemUniqueNumber > 0)) newClassNames.push('unique-item');
 
-        if(itemUniqueNumber > 0) newClassNames.push('unique-item');
+        if(itemUniqueSoldout) newClassNames.push('sold-out');
 
         if(itemUnseen) newClassNames.push('unseen');
 
@@ -36,21 +37,23 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ itemActive, itemUniqueNumber, itemUnseen, itemImage, classNames ]);
+    }, [ itemActive, itemUniqueSoldout, itemUniqueNumber, itemUnseen, itemImage, classNames ]);
 
     const getStyle = useMemo(() =>
     {
-        const newStyle = { ...style };
+        let newStyle = { ...style };
 
         if(itemImage) newStyle.backgroundImage = `url(${ itemImage })`;
 
         if(itemColor) newStyle.backgroundColor = itemColor;
 
+        if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
+
         return newStyle;
     }, [ style, itemImage, itemColor ]);
 
     return (
-        <Column center pointer position={ position } overflow={ overflow } classNames={ getClassNames } style={ getStyle } { ...rest }>
+        <Column center={ center } pointer position={ position } overflow={ overflow } column={ column } classNames={ getClassNames } style={ getStyle } { ...rest }>
             { (itemCount > itemCountMinimum) &&
                 <ItemCountView count={ itemCount } /> }
             { (itemUniqueNumber > 0) && 

src/common/layout/LayoutImage.tsx

@@ -3,12 +3,12 @@ import { Base, BaseProps } from '../Base';
 
 export interface LayoutImageProps extends BaseProps<HTMLDivElement>
 {
-    imageUrl: string;
+    imageUrl?: string;
 }
 
 export const LayoutImage: FC<LayoutImageProps> = props =>
 {
-    const { imageUrl = null, style = null, ...rest } = props;
+    const { imageUrl = null, fit = true, style = null, ...rest } = props;
 
     const getStyle = useMemo(() =>
     {
@@ -19,5 +19,5 @@ export const LayoutImage: FC<LayoutImageProps> = props =>
         return newStyle;
     }, [ style, imageUrl ]);
 
-    return <Base fit style={ getStyle } { ...rest } />;
+    return <Base fit={ fit } style={ getStyle } { ...rest } />;
 }

src/common/types/ColorVariantType.ts

@@ -1 +1 @@
-export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white';
+export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning';

src/components/index.scss

@@ -1,3 +1,5 @@
 @import './achievements/AchievementsView';
 @import './avatar-editor/AvatarEditorView';
+@import './catalog/CatalogView';
 @import './inventory/InventoryView';
+@import './toolbar/ToolbarView';

src/views/toolbar/ToolbarView.scss

@@ -1,126 +0,0 @@
-.nitro-toolbar-container {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: $toolbar-height;
-    z-index: $toolbar-zindex;
-
-    .nitro-toolbar {
-        height: 100%;
-        pointer-events: all;
-        background: rgba($dark, 0.95);
-        box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5),
-            inset 0 -4px darken(rgba($dark, 0.6), 4);
-
-        #toolbar-chat-input-container {
-            margin: 0 10px;
-
-            @include media-breakpoint-down(sm) {
-                width: 0px;
-                height: 0px;
-            }
-        }
-
-        .navigation-items {
-            display: flex;
-            align-items: center;
-
-            &.navigation-avatar {
-                border-right: 1px solid rgba(0, 0, 0, 0.3);
-            }
-
-            .navigation-item {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-                //margin: 0 1px;
-                position: relative;
-
-                &.item-avatar {
-                    width: 50px;
-                    height: 45px;
-                    overflow: hidden;
-
-                    .avatar-image {
-                        margin-left: -5px;
-                        margin-top: 25px;
-                    }
-                }
-
-                .icon,
-                &.item-avatar {
-                    position: relative;
-                    //transition: transform .2s ease-out;
-
-                    &:hover,
-                    &.active {
-                        -webkit-transform: translate(-1px, -1px);
-                        transform: translate(-1px, -1px);
-                        filter: drop-shadow(2px 2px 0 rgba($black, 0.8));
-                    }
-                }
-
-                .avatar-image {
-                    pointer-events: none;
-                }
-
-                .chat-input-container {
-                    left: 60px;
-                }
-            }
-        }
-
-        .nitro-toolbar-me-menu {
-            bottom: 77px;
-            left: 200px;
-            position: absolute;
-            font-size: 12px;
-            z-index: $toolbar-memenu-zindex;
-
-            .list-group {
-                .list-group-item {
-                    min-width: 70px;
-                    transition: all 0.3s;
-                    font-size: 10px;
-                    text-align: center;
-
-                    i {
-                        filter: grayscale(1);
-                    }
-
-                    &:hover {
-                        color: $cyan;
-                        text-decoration: underline;
-
-                        i {
-                            filter: grayscale(0);
-                        }
-                    }
-
-                    .count {
-                        top: 0px;
-                        right: 5px;
-                        font-size: 10px;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.toolbar-icon-animation {
-    position: absolute;
-    object-fit: cover;
-    height: auto;
-    width: auto;
-    max-width: 120px;
-    max-height: 150px;
-    z-index: 500;
-    filter: drop-shadow(2px 1px 0 rgba($white, 1))
-        drop-shadow(-2px 1px 0 rgba($white, 1))
-        drop-shadow(0 -2px 0 rgba($white, 1));
-}
-
-@import "./me/ToolbarMeView";

src/views/toolbar/ToolbarView.tsx

@@ -1,236 +0,0 @@
-import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, 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 { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
-import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements';
-import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent';
-import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
-import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
-import { dispatchUiEvent, useRoomEngineEvent, useUiEvent } from '../../hooks';
-import { CreateMessageHook } from '../../hooks/messages/message-event';
-import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation';
-import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types';
-import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
-import { ItemCountView } from '../shared/item-count/ItemCountView';
-import { ToolbarMeView } from './me/ToolbarMeView';
-import { ToolbarViewItems, ToolbarViewProps } from './ToolbarView.types';
-
-const CHAT_ICON_HIDDEN: number = 0;
-const CHAT_ICON_SHOWING: number = 1;
-const CHAT_ICON_UNREAD: number = 2;
-
-export const ToolbarView: FC<ToolbarViewProps> = props =>
-{
-    const { isInRoom } = props;
-
-    const [ userInfo, setUserInfo ] = useState<UserInfoDataParser>(null);
-    const [ userFigure, setUserFigure ] = useState<string>(null);
-    const [ isMeExpanded, setMeExpanded ] = useState(false);
-    const [ chatIconType, setChatIconType ] = useState(CHAT_ICON_HIDDEN);
-    const [ unseenInventoryCount, setUnseenInventoryCount ] = useState(0);
-    const [ unseenAchievementCount, setUnseenAchievementCount ] = useState(0);
-    const [ unseenFriendRequestCount, setFriendRequestCount ] = useState(0);
-    const isMod = GetSessionDataManager().isModerator;
-
-    const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
-    {
-        const parser = event.getParser();
-
-        setUserInfo(parser.userInfo);
-        setUserFigure(parser.userInfo.figure);
-    }, []);
-
-    CreateMessageHook(UserInfoEvent, onUserInfoEvent);
-
-    const onUserFigureEvent = useCallback((event: FigureUpdateEvent) =>
-    {
-        const parser = event.getParser();
-
-        setUserFigure(parser.figure);
-    }, []);
-    
-    CreateMessageHook(FigureUpdateEvent, onUserFigureEvent);
-
-    const onFriendsMessengerIconEvent = useCallback((event: FriendsMessengerIconEvent) =>
-    {
-        setChatIconType(event.iconType);
-    }, []);
-
-    useUiEvent(FriendsMessengerIconEvent.UPDATE_ICON, onFriendsMessengerIconEvent);
-
-    const onUnseenItemTrackerUpdateEvent = useCallback((event: UnseenItemTrackerUpdateEvent) =>
-    {
-        setUnseenInventoryCount(event.count);
-    }, []);
-
-    useUiEvent(UnseenItemTrackerUpdateEvent.UPDATE_COUNT, onUnseenItemTrackerUpdateEvent);
-
-    const onAchievementsUIUnseenCountEvent = useCallback((event: AchievementsUIUnseenCountEvent) =>
-    {
-        setUnseenAchievementCount(event.count);
-    }, []);
-
-    useUiEvent(AchievementsUIUnseenCountEvent.UNSEEN_COUNT, onAchievementsUIUnseenCountEvent);
-
-    const onFriendsRequestCountEvent = useCallback((event: FriendsRequestCountEvent) =>
-    {
-        setFriendRequestCount(event.count);
-    }, []);
-
-    useUiEvent(FriendsRequestCountEvent.UPDATE_COUNT, onFriendsRequestCountEvent);
-
-    const animationIconToToolbar = useCallback((iconName: string, image: HTMLImageElement, x: number, y: number) =>
-    {
-        const target = (document.body.getElementsByClassName(iconName)[0] as HTMLElement);
-
-        if(!target) return;
-        
-        image.className = 'toolbar-icon-animation';
-        image.style.visibility = 'visible';
-        image.style.left = (x + 'px');
-        image.style.top = (y + 'px');
-
-        document.body.append(image);
-
-        const targetBounds  = target.getBoundingClientRect();
-        const imageBounds   = image.getBoundingClientRect();
-
-        const left = (imageBounds.x - targetBounds.x);
-        const top = (imageBounds.y - targetBounds.y);
-        const squared = Math.sqrt(((left * left) + (top * top)));
-        const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5)));
-        const height = 20;
-
-        const motionName = (`ToolbarBouncing[${ iconName }]`);
-
-        if(!Motions.getMotionByTag(motionName))
-        {
-            Motions.runMotion(new Queue(new Wait((wait + 8)), new DropBounce(target, 400, 12))).tag = motionName;
-        }
-
-        const motion = new Queue(new EaseOut(new JumpBy(image, wait, ((targetBounds.x - imageBounds.x) + height), (targetBounds.y - imageBounds.y), 100, 1), 1), new Dispose(image));
-
-        Motions.runMotion(motion);
-    }, []);
-
-    const onNitroToolbarAnimateIconEvent = useCallback((event: NitroToolbarAnimateIconEvent) =>
-    {
-        animationIconToToolbar('icon-inventory', event.image, event.x, event.y);
-    }, [ animationIconToToolbar ]);
-
-    useRoomEngineEvent(NitroToolbarAnimateIconEvent.ANIMATE_ICON, onNitroToolbarAnimateIconEvent);
-
-    const handleToolbarItemClick = useCallback((item: string) =>
-    {
-        switch(item)
-        {
-            case ToolbarViewItems.NAVIGATOR_ITEM:
-                dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_NAVIGATOR));
-                return;
-            case ToolbarViewItems.INVENTORY_ITEM:
-                dispatchUiEvent(new InventoryEvent(InventoryEvent.TOGGLE_INVENTORY));
-                return;
-            case ToolbarViewItems.CATALOG_ITEM:
-                dispatchUiEvent(new CatalogEvent(CatalogEvent.TOGGLE_CATALOG));
-                return;
-            case ToolbarViewItems.FRIEND_LIST_ITEM:
-                dispatchUiEvent(new CatalogEvent(FriendsEvent.TOGGLE_FRIEND_LIST));
-                return;
-            case ToolbarViewItems.CAMERA_ITEM:
-                dispatchUiEvent(new RoomWidgetCameraEvent(RoomWidgetCameraEvent.TOGGLE_CAMERA));
-                return;
-            case ToolbarViewItems.CLOTHING_ITEM:
-                dispatchUiEvent(new AvatarEditorEvent(AvatarEditorEvent.TOGGLE_EDITOR));
-                setMeExpanded(false);
-                return;
-            case ToolbarViewItems.MOD_TOOLS_ITEM:
-                dispatchUiEvent(new ModToolsEvent(ModToolsEvent.TOGGLE_MOD_TOOLS));
-                return;
-            case ToolbarViewItems.ACHIEVEMENTS_ITEM:
-                dispatchUiEvent(new AchievementsUIEvent(AchievementsUIEvent.TOGGLE_ACHIEVEMENTS));
-                setMeExpanded(false);
-                return;
-            case ToolbarViewItems.PROFILE_ITEM:
-                GetUserProfile(GetSessionDataManager().userId);
-                setMeExpanded(false);
-                return;
-            case ToolbarViewItems.SETTINGS_ITEM:
-                dispatchUiEvent(new UserSettingsUIEvent(UserSettingsUIEvent.TOGGLE_USER_SETTINGS));
-                setMeExpanded(false);
-                return;
-            case ToolbarViewItems.FRIEND_CHAT_ITEM:
-                OpenMessengerChat();
-                return;
-        }
-    }, []);
-
-    const visitDesktop = useCallback(() =>
-    {
-        if(!GetRoomSession()) return;
-
-        GoToDesktop();
-        GetRoomSessionManager().removeSession(-1);
-    }, []);
-
-    return (
-        <div className="nitro-toolbar-container">
-            <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
-                <ToolbarMeView unseenAchievementCount={ unseenAchievementCount } handleToolbarItemClick={ handleToolbarItemClick } />
-            </TransitionAnimation>
-            <div className="d-flex justify-content-between align-items-center nitro-toolbar py-1 px-3">
-                <div className="d-flex align-items-center">
-                    <div className="navigation-items gap-2">
-                        <div className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
-                            <AvatarImageView figure={ userFigure } direction={ 2 } />
-                            { (unseenAchievementCount > 0) &&
-                                <ItemCountView count={ unseenAchievementCount } /> }
-                        </div>
-                        { isInRoom && (
-                            <div className="navigation-item" onClick={ visitDesktop }>
-                                <i className="icon icon-habbo"></i>
-                            </div>) }
-                        { !isInRoom && (
-                            <div className="navigation-item" onClick={ event => CreateLinkEvent('navigator/goto/home') }>
-                                <i className="icon icon-house"></i>
-                            </div>) }
-                        <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.NAVIGATOR_ITEM) }>
-                            <i className="icon icon-rooms"></i>
-                        </div>
-                        <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CATALOG_ITEM) }>
-                            <i className="icon icon-catalog"></i>
-                        </div>
-                        <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }>
-                            <i className="icon icon-inventory"></i>
-                            { (unseenInventoryCount > 0) &&
-                                <ItemCountView count={ unseenInventoryCount } /> }
-                        </div>
-                        { isInRoom && (
-                            <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }>
-                                <i className="icon icon-camera"></i>
-                            </div>) }
-                        { isMod && (
-                            <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.MOD_TOOLS_ITEM) }>
-                            <i className="icon icon-modtools"></i>
-                        </div>) }
-                    </div>
-                    <div id="toolbar-chat-input-container" className="d-flex align-items-center" />
-                </div>
-                <div className="d-flex align-items-center gap-2">
-                    <div className="navigation-items gap-2">
-                        <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
-                            <i className="icon icon-friendall"></i>
-                            { (unseenFriendRequestCount > 0) &&
-                                <ItemCountView count={ unseenFriendRequestCount } /> }
-                        </div>
-                        { ((chatIconType === CHAT_ICON_SHOWING) || (chatIconType === CHAT_ICON_UNREAD)) &&
-                            <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) }>
-                                { (chatIconType === CHAT_ICON_SHOWING) && <i className="icon icon-message" /> }
-                                { (chatIconType === CHAT_ICON_UNREAD) && <i className="icon icon-message is-unseen" /> }
-                            </div> }
-                    </div>
-                    <div id="toolbar-friend-bar-container" className="d-none d-lg-block" />
-                </div>
-            </div>
-        </div>
-    );
-}

src/views/toolbar/ToolbarView.types.ts

@@ -1,19 +0,0 @@
-export interface ToolbarViewProps
-{
-    isInRoom: boolean;
-}
-
-export class ToolbarViewItems
-{
-    public static NAVIGATOR_ITEM: string    = 'TVI_NAVIGATOR_ITEM';
-    public static INVENTORY_ITEM: string    = 'TVI_INVENTORY_ITEM';
-    public static CATALOG_ITEM: string      = 'TVI_CATALOG_ITEM';
-    public static FRIEND_LIST_ITEM: string  = 'TVI_FRIEND_LIST_ITEM';
-    public static FRIEND_CHAT_ITEM: string  = 'TVI_FRIEND_CHAT_ITEM';
-    public static CLOTHING_ITEM: string     = 'TVI_CLOTHING_ITEM';
-    public static CAMERA_ITEM: string       = 'TVI_CAMERA_ITEM';
-    public static MOD_TOOLS_ITEM: string    = 'TVI_MOD_TOOLS_ITEM';
-    public static ACHIEVEMENTS_ITEM: string = 'TVI_ACHIEVEMENTS_ITEM';
-    public static PROFILE_ITEM: string      = 'TVI_PROFILE_ITEM';
-    public static SETTINGS_ITEM: string     = 'TVI_SETTINGS_ITEM';
-}

src/views/toolbar/me/ToolbarMeView.tsx

@@ -1,53 +0,0 @@
-import { RoomObjectCategory } from '@nitrots/nitro-renderer';
-import { FC, useEffect } from 'react';
-import { GetRoomEngine, GetRoomSession } from '../../../api';
-import { ItemCountView } from '../../shared/item-count/ItemCountView';
-import { ToolbarViewItems } from '../ToolbarView.types';
-import { ToolbarMeViewProps } from './ToolbarMeView.types';
-
-export const ToolbarMeView: FC<ToolbarMeViewProps> = props =>
-{
-    const { unseenAchievementCount = 0, handleToolbarItemClick = null } = props;
-
-    useEffect(() =>
-    {
-        const roomSession = GetRoomSession();
-
-        if(!roomSession) return;
-
-        GetRoomEngine().selectRoomObject(roomSession.roomId, roomSession.ownRoomIndex, RoomObjectCategory.UNIT);
-    }, []);
-
-    return (
-        <div className="d-flex nitro-toolbar-me px-1 py-2">
-            <div className="navigation-items">
-                <div className="navigation-item">
-                    <i className="icon icon-me-talents"></i>
-                </div>
-                <div className="navigation-item">
-                    <i className="icon icon-me-helper-tool"></i>
-                </div>
-                <div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }>
-                    <i className="icon icon-me-achievements"></i>
-                    { (unseenAchievementCount > 0) &&
-                        <ItemCountView count={ unseenAchievementCount } /> }
-                </div>
-                <div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) }>
-                    <i className="icon icon-me-profile"></i>
-                </div>
-                <div className="navigation-item">
-                    <i className="icon icon-me-rooms"></i>
-                </div>
-                <div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.CLOTHING_ITEM) }>
-                    <i className="icon icon-me-clothing"></i>
-                </div>
-                <div className="navigation-item">
-                    <i className="icon icon-me-forums"></i>
-                </div>
-                <div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.SETTINGS_ITEM) }>
-                    <i className="icon icon-me-settings"></i>
-                </div>
-            </div>
-        </div>
-    );
-}