From 7926bb7469bd0cbc17d699d1ae003629f7e6f17d Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Thu, 16 Sep 2021 01:37:17 -0300
Subject: [PATCH 01/31] Updates DONT TOUCH IT

---
 .../handlers/RoomWidgetInfostandHandler.ts    |   4 +-
 src/events/friend-list/index.ts               |   2 -
 .../FriendEnteredRoomEvent.ts                 |   0
 .../FriendListContentEvent.ts                 |   4 +-
 .../FriendsEvent.ts}                          |   4 +-
 .../FriendsSendFriendRequestEvent.ts}         |   6 +-
 src/events/friends/index.ts                   |   4 +
 src/events/index.ts                           |   2 +-
 .../friends/FriendListMessageHandler.tsx      |  73 ----------
 .../friends/FriendListMessageHandler.types.ts |   5 -
 src/views/friends/FriendsMessageHandler.tsx   |  90 ++++++++++++
 src/views/friends/FriendsView.scss            |   2 +-
 src/views/friends/FriendsView.tsx             | 128 +++++++-----------
 src/views/friends/common/MessengerChat.ts     |  34 +++++
 .../friends/common/MessengerChatMessage.ts    |  13 ++
 .../friends/context/FriendListContext.tsx     |  14 --
 .../friends/context/FriendListContext.type.ts |  13 --
 src/views/friends/context/FriendsContext.tsx  |  14 ++
 .../friends/context/FriendsContext.type.ts    |  13 ++
 ...iendListReducer.tsx => FriendsReducer.tsx} |  40 ++++--
 .../views/friend-bar/FriendBarView.tsx        |   6 +-
 .../views/friend-item/FriendsListItemView.tsx |   3 +-
 .../FriendsGroupItemView.tsx                  |  63 +++++++++
 .../FriendsGroupItemView.types.ts             |   6 +
 .../FriendsGroupView.tsx}                     |  10 +-
 .../FriendsGroupView.types.ts}                |   2 +-
 .../views/friends-list/FriendsListView.tsx    |  43 ++++++
 .../friends-list/FriendsListView.types.ts     |   9 ++
 .../FriendsRequestItemView.tsx                |  37 +++++
 .../FriendsRequestItemView.types.ts           |   6 +
 .../views/messenger/FriendsMessengerView.tsx  |  13 ++
 .../FriendsRequestItemView.types.ts           |   3 +-
 .../NavigatorRoomSettingsView.tsx             |   6 +-
 src/views/toolbar/ToolbarView.tsx             |   4 +-
 34 files changed, 450 insertions(+), 226 deletions(-)
 delete mode 100644 src/events/friend-list/index.ts
 rename src/events/{friend-list => friends}/FriendEnteredRoomEvent.ts (100%)
 rename src/events/{friend-list => friends}/FriendListContentEvent.ts (83%)
 rename src/events/{friend-list/FriendListEvent.ts => friends/FriendsEvent.ts} (57%)
 rename src/events/{friend-list/FriendListSendFriendRequestEvent.ts => friends/FriendsSendFriendRequestEvent.ts} (57%)
 create mode 100644 src/events/friends/index.ts
 delete mode 100644 src/views/friends/FriendListMessageHandler.tsx
 delete mode 100644 src/views/friends/FriendListMessageHandler.types.ts
 create mode 100644 src/views/friends/FriendsMessageHandler.tsx
 create mode 100644 src/views/friends/common/MessengerChat.ts
 create mode 100644 src/views/friends/common/MessengerChatMessage.ts
 delete mode 100644 src/views/friends/context/FriendListContext.tsx
 delete mode 100644 src/views/friends/context/FriendListContext.type.ts
 create mode 100644 src/views/friends/context/FriendsContext.tsx
 create mode 100644 src/views/friends/context/FriendsContext.type.ts
 rename src/views/friends/reducers/{FriendListReducer.tsx => FriendsReducer.tsx} (77%)
 create mode 100644 src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx
 create mode 100644 src/views/friends/views/friends-group-item/FriendsGroupItemView.types.ts
 rename src/views/friends/views/{list/FriendsListView.tsx => friends-group/FriendsGroupView.tsx} (58%)
 rename src/views/friends/views/{list/FriendsListView.types.ts => friends-group/FriendsGroupView.types.ts} (82%)
 create mode 100644 src/views/friends/views/friends-list/FriendsListView.tsx
 create mode 100644 src/views/friends/views/friends-list/FriendsListView.types.ts
 create mode 100644 src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx
 create mode 100644 src/views/friends/views/friends-request-item/FriendsRequestItemView.types.ts
 create mode 100644 src/views/friends/views/messenger/FriendsMessengerView.tsx

diff --git a/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts b/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts
index 1ee584ce..e86aba4e 100644
--- a/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts
+++ b/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts
@@ -1,7 +1,7 @@
 import { IFurnitureData, NitroEvent, ObjectDataFactory, PetFigureData, PetRespectComposer, PetSupplementComposer, PetType, RoomControllerLevel, RoomModerationSettings, RoomObjectCategory, RoomObjectOperationType, RoomObjectType, RoomObjectVariable, RoomSessionPetInfoUpdateEvent, RoomSessionUserBadgesEvent, RoomTradingLevelEnum, RoomUnitDropHandItemComposer, RoomUnitGiveHandItemComposer, RoomUnitGiveHandItemPetComposer, RoomUserData, RoomWidgetEnum, RoomWidgetEnumItemExtradataParameter, Vector3d } from '@nitrots/nitro-renderer';
 import { GetNitroInstance, GetRoomEngine, GetSessionDataManager, IsOwnerOfFurniture } from '../../../..';
 import { InventoryTradeRequestEvent, WiredSelectObjectEvent } from '../../../../../events';
-import { FriendListSendFriendRequestEvent } from '../../../../../events/friend-list/FriendListSendFriendRequestEvent';
+import { FriendsSendFriendRequestEvent } from '../../../../../events/friends/FriendsSendFriendRequestEvent';
 import { dispatchUiEvent } from '../../../../../hooks/events';
 import { SendMessageHook } from '../../../../../hooks/messages';
 import { PetSupplementEnum } from '../../../../../views/room/widgets/avatar-info/common/PetSupplementEnum';
@@ -76,7 +76,7 @@ export class RoomWidgetInfostandHandler extends RoomWidgetHandler
             case RoomWidgetRoomObjectMessage.GET_OBJECT_INFO:
                 return this.processObjectInfoMessage((message as RoomWidgetRoomObjectMessage));
             case RoomWidgetUserActionMessage.SEND_FRIEND_REQUEST:
-                dispatchUiEvent(new FriendListSendFriendRequestEvent(userId));
+                dispatchUiEvent(new FriendsSendFriendRequestEvent(userId));
                 break;
             case RoomWidgetUserActionMessage.RESPECT_USER:
                 GetSessionDataManager().giveRespect(userId);
diff --git a/src/events/friend-list/index.ts b/src/events/friend-list/index.ts
deleted file mode 100644
index 4789fde9..00000000
--- a/src/events/friend-list/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './FriendEnteredRoomEvent';
-export * from './FriendListEvent';
diff --git a/src/events/friend-list/FriendEnteredRoomEvent.ts b/src/events/friends/FriendEnteredRoomEvent.ts
similarity index 100%
rename from src/events/friend-list/FriendEnteredRoomEvent.ts
rename to src/events/friends/FriendEnteredRoomEvent.ts
diff --git a/src/events/friend-list/FriendListContentEvent.ts b/src/events/friends/FriendListContentEvent.ts
similarity index 83%
rename from src/events/friend-list/FriendListContentEvent.ts
rename to src/events/friends/FriendListContentEvent.ts
index a7623cbc..80048267 100644
--- a/src/events/friend-list/FriendListContentEvent.ts
+++ b/src/events/friends/FriendListContentEvent.ts
@@ -1,7 +1,7 @@
 import { MessengerFriend } from '../../views/friends/common/MessengerFriend';
-import { FriendListEvent } from './FriendListEvent';
+import { FriendsEvent } from './FriendsEvent';
 
-export class FriendListContentEvent extends FriendListEvent
+export class FriendListContentEvent extends FriendsEvent
 {
     public static FRIEND_LIST_CONTENT: string = 'FLSFRE_FRIEND_LIST_CONTENT';
 
diff --git a/src/events/friend-list/FriendListEvent.ts b/src/events/friends/FriendsEvent.ts
similarity index 57%
rename from src/events/friend-list/FriendListEvent.ts
rename to src/events/friends/FriendsEvent.ts
index d450144e..0f8be1d7 100644
--- a/src/events/friend-list/FriendListEvent.ts
+++ b/src/events/friends/FriendsEvent.ts
@@ -1,8 +1,10 @@
 import { NitroEvent } from '@nitrots/nitro-renderer';
 
-export class FriendListEvent extends NitroEvent
+export class FriendsEvent extends NitroEvent
 {
     public static SHOW_FRIEND_LIST: string = 'IE_SHOW_FRIEND_LIST';
     public static TOGGLE_FRIEND_LIST: string = 'IE_TOGGLE_FRIEND_LIST';
+    public static SHOW_FRIEND_MESSENGER: string = 'IE_SHOW_FRIEND_MESSENGER';
+    public static TOGGLE_FRIEND_MESSENGER: string = 'IE_TOGGLE_FRIEND_MESSENGER';
     public static REQUEST_FRIEND_LIST: string = 'FLSFRE_REQUEST_FRIEND_LIST';
 }
diff --git a/src/events/friend-list/FriendListSendFriendRequestEvent.ts b/src/events/friends/FriendsSendFriendRequestEvent.ts
similarity index 57%
rename from src/events/friend-list/FriendListSendFriendRequestEvent.ts
rename to src/events/friends/FriendsSendFriendRequestEvent.ts
index 02d7c006..9e42661b 100644
--- a/src/events/friend-list/FriendListSendFriendRequestEvent.ts
+++ b/src/events/friends/FriendsSendFriendRequestEvent.ts
@@ -1,6 +1,6 @@
-import { FriendListEvent } from './FriendListEvent';
+import { FriendsEvent } from './FriendsEvent';
 
-export class FriendListSendFriendRequestEvent extends FriendListEvent
+export class FriendsSendFriendRequestEvent extends FriendsEvent
 {
     public static SEND_FRIEND_REQUEST: string = 'FLSFRE_SEND_FRIEND_REQUEST';
 
@@ -8,7 +8,7 @@ export class FriendListSendFriendRequestEvent extends FriendListEvent
 
     constructor(userId: number)
     {
-        super(FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST);
+        super(FriendsSendFriendRequestEvent.SEND_FRIEND_REQUEST);
 
         this._userId = userId;
     }
diff --git a/src/events/friends/index.ts b/src/events/friends/index.ts
new file mode 100644
index 00000000..9a4bb3ed
--- /dev/null
+++ b/src/events/friends/index.ts
@@ -0,0 +1,4 @@
+export * from './FriendEnteredRoomEvent';
+export * from './FriendListContentEvent';
+export * from './FriendsEvent';
+export * from './FriendsSendFriendRequestEvent';
diff --git a/src/events/index.ts b/src/events/index.ts
index 006285c8..9d4842ca 100644
--- a/src/events/index.ts
+++ b/src/events/index.ts
@@ -1,7 +1,7 @@
 export * from './avatar-editor';
 export * from './camera';
 export * from './catalog';
-export * from './friend-list';
+export * from './friends';
 export * from './inventory';
 export * from './navigator';
 export * from './notification-center';
diff --git a/src/views/friends/FriendListMessageHandler.tsx b/src/views/friends/FriendListMessageHandler.tsx
deleted file mode 100644
index e84e72a5..00000000
--- a/src/views/friends/FriendListMessageHandler.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { FriendListFragmentEvent, FriendListUpdateEvent, FriendRequestsEvent, GetFriendRequestsComposer, MessengerInitEvent } from '@nitrots/nitro-renderer';
-import { FC, useCallback } from 'react';
-import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
-import { MessengerSettings } from './common/MessengerSettings';
-import { useFriendListContext } from './context/FriendListContext';
-import { FriendListMessageHandlerProps } from './FriendListMessageHandler.types';
-import { FriendListActions } from './reducers/FriendListReducer';
-
-export const FriendListMessageHandler: FC<FriendListMessageHandlerProps> = props =>
-{
-    const { friendListState = null, dispatchFriendListState = null } = useFriendListContext();
-
-    const onMessengerInitEvent = useCallback((event: MessengerInitEvent) =>
-    {
-        const parser = event.getParser();
-
-        dispatchFriendListState({
-            type: FriendListActions.UPDATE_SETTINGS,
-            payload: {
-                settings: new MessengerSettings(
-                    parser.userFriendLimit,
-                    parser.normalFriendLimit,
-                    parser.extendedFriendLimit,
-                    parser.categories)
-            }
-        });
-
-        SendMessageHook(new GetFriendRequestsComposer());
-    }, [ dispatchFriendListState ]);
-
-    const onFriendListFragmentEvent = useCallback((event: FriendListFragmentEvent) =>
-    {
-        const parser = event.getParser();
-
-        dispatchFriendListState({
-            type: FriendListActions.PROCESS_FRAGMENT,
-            payload: {
-                fragment: parser.fragment
-            }
-        });
-    }, [ dispatchFriendListState ]);
-
-    const onFriendListUpdateEvent = useCallback((event: FriendListUpdateEvent) =>
-    {
-        const parser = event.getParser();
-
-        dispatchFriendListState({
-            type: FriendListActions.PROCESS_UPDATE,
-            payload: {
-                update: parser
-            }
-        });
-    }, [ dispatchFriendListState ]);
-
-    const onFriendRequestsEvent = useCallback((event: FriendRequestsEvent) =>
-    {
-        const parser = event.getParser();
-        
-        dispatchFriendListState({
-            type: FriendListActions.PROCESS_REQUESTS,
-            payload: {
-                requests: parser.requests
-            }
-        });
-    }, [ dispatchFriendListState ]);
-
-    CreateMessageHook(MessengerInitEvent, onMessengerInitEvent);
-    CreateMessageHook(FriendListFragmentEvent, onFriendListFragmentEvent);
-    CreateMessageHook(FriendListUpdateEvent, onFriendListUpdateEvent);
-    CreateMessageHook(FriendRequestsEvent, onFriendRequestsEvent);
-
-    return null;
-}
diff --git a/src/views/friends/FriendListMessageHandler.types.ts b/src/views/friends/FriendListMessageHandler.types.ts
deleted file mode 100644
index 2a810612..00000000
--- a/src/views/friends/FriendListMessageHandler.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-
-export interface FriendListMessageHandlerProps
-{
-    
-}
diff --git a/src/views/friends/FriendsMessageHandler.tsx b/src/views/friends/FriendsMessageHandler.tsx
new file mode 100644
index 00000000..579230a5
--- /dev/null
+++ b/src/views/friends/FriendsMessageHandler.tsx
@@ -0,0 +1,90 @@
+import { FriendListFragmentEvent, FriendListUpdateEvent, FriendRequestsEvent, GetFriendRequestsComposer, MessengerInitEvent, NewConsoleMessageEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
+import { MessengerSettings } from './common/MessengerSettings';
+import { useFriendsContext } from './context/FriendsContext';
+import { FriendsActions } from './reducers/FriendsReducer';
+
+export const FriendsMessageHandler: FC<{}> = props =>
+{
+    const { friendsState = null, dispatchFriendsState = null } = useFriendsContext();
+    const { activeChats = [] } = friendsState;
+
+    const onMessengerInitEvent = useCallback((event: MessengerInitEvent) =>
+    {
+        const parser = event.getParser();
+
+        dispatchFriendsState({
+            type: FriendsActions.UPDATE_SETTINGS,
+            payload: {
+                settings: new MessengerSettings(
+                    parser.userFriendLimit,
+                    parser.normalFriendLimit,
+                    parser.extendedFriendLimit,
+                    parser.categories)
+            }
+        });
+
+        SendMessageHook(new GetFriendRequestsComposer());
+    }, [ dispatchFriendsState ]);
+
+    const onFriendsFragmentEvent = useCallback((event: FriendListFragmentEvent) =>
+    {
+        const parser = event.getParser();
+
+        dispatchFriendsState({
+            type: FriendsActions.PROCESS_FRAGMENT,
+            payload: {
+                fragment: parser.fragment
+            }
+        });
+    }, [ dispatchFriendsState ]);
+
+    const onFriendsUpdateEvent = useCallback((event: FriendListUpdateEvent) =>
+    {
+        const parser = event.getParser();
+
+        dispatchFriendsState({
+            type: FriendsActions.PROCESS_UPDATE,
+            payload: {
+                update: parser
+            }
+        });
+    }, [ dispatchFriendsState ]);
+
+    const onFriendRequestsEvent = useCallback((event: FriendRequestsEvent) =>
+    {
+        const parser = event.getParser();
+        
+        dispatchFriendsState({
+            type: FriendsActions.PROCESS_REQUESTS,
+            payload: {
+                requests: parser.requests
+            }
+        });
+    }, [ dispatchFriendsState ]);
+
+    const onNewConsoleMessageEvent = useCallback((event: NewConsoleMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        const activeChat = activeChats.find(c => c.friendId === parser.senderId);
+
+        if(activeChat)
+        {
+
+        }
+        else
+        {
+
+        }
+    }, [ friendsState, dispatchFriendsState ]);
+
+    CreateMessageHook(MessengerInitEvent, onMessengerInitEvent);
+    CreateMessageHook(FriendListFragmentEvent, onFriendsFragmentEvent);
+    CreateMessageHook(FriendListUpdateEvent, onFriendsUpdateEvent);
+    CreateMessageHook(FriendRequestsEvent, onFriendRequestsEvent);
+    CreateMessageHook(NewConsoleMessageEvent, onNewConsoleMessageEvent);
+
+    return null;
+}
diff --git a/src/views/friends/FriendsView.scss b/src/views/friends/FriendsView.scss
index 1d882087..519d6d1e 100644
--- a/src/views/friends/FriendsView.scss
+++ b/src/views/friends/FriendsView.scss
@@ -1,4 +1,4 @@
-.nitro-friend-list {
+.nitro-friends {
     width: 250px;
 }
 
diff --git a/src/views/friends/FriendsView.tsx b/src/views/friends/FriendsView.tsx
index 6e2d74eb..8c8e5316 100644
--- a/src/views/friends/FriendsView.tsx
+++ b/src/views/friends/FriendsView.tsx
@@ -1,54 +1,69 @@
 import { MessengerInitComposer, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectUserType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { GetRoomSession, LocalizeText } from '../../api';
-import { FriendEnteredRoomEvent, FriendListEvent } from '../../events';
-import { FriendListContentEvent } from '../../events/friend-list/FriendListContentEvent';
-import { FriendListSendFriendRequestEvent } from '../../events/friend-list/FriendListSendFriendRequestEvent';
+import { GetRoomSession } from '../../api';
+import { FriendEnteredRoomEvent, FriendListContentEvent, FriendsEvent } from '../../events';
+import { FriendsSendFriendRequestEvent } from '../../events/friends/FriendsSendFriendRequestEvent';
 import { useRoomEngineEvent } from '../../hooks/events';
 import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
-import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
-import { FriendListContextProvider } from './context/FriendListContext';
-import { FriendListMessageHandler } from './FriendListMessageHandler';
-import { FriendListReducer, initialFriendList } from './reducers/FriendListReducer';
+import { FriendsContextProvider } from './context/FriendsContext';
+import { FriendsMessageHandler } from './FriendsMessageHandler';
+import { FriendsReducer, initialFriends } from './reducers/FriendsReducer';
 import { FriendBarView } from './views/friend-bar/FriendBarView';
-import { FriendsListView } from './views/list/FriendsListView';
-
-const TABS: string[] = ['friendlist.friends', 'generic.search'];
+import { FriendsListView } from './views/friends-list/FriendsListView';
+import { FriendsMessengerView } from './views/messenger/FriendsMessengerView';
 
 export const FriendsView: FC<{}> = props =>
 {
-    const [ friendListState, dispatchFriendListState ] = useReducer(FriendListReducer, initialFriendList);
-    const { friends = null, requests = null, settings = null } = friendListState;
+    const [ friendsState, dispatchFriendsState ] = useReducer(FriendsReducer, initialFriends);
+    const { friends = [], requests = [], settings = null } = friendsState;
 
-    const [ isVisible, setIsVisible ] = useState(false);
     const [ isReady, setIsReady ] = useState(false);
-    const [ currentTab, setCurrentTab ] = useState<number>(0);
+    const [ isListVisible, setIsListVisible ] = useState(false);
+    const [ isMessengerVisible, setIsMessengerVisible ] = useState(false);
 
-    const onFriendListEvent = useCallback((event: FriendListEvent) =>
+    useEffect(() =>
+    {
+        SendMessageHook(new MessengerInitComposer());
+    }, []);
+
+    useEffect(() =>
+    {
+        if(!settings) return;
+
+        setIsReady(true);
+    }, [ settings ]);
+
+    const onFriendsEvent = useCallback((event: FriendsEvent) =>
     {
         switch(event.type)
         {
-            case FriendListEvent.SHOW_FRIEND_LIST:
-                setIsVisible(true);
+            case FriendsEvent.SHOW_FRIEND_LIST:
+                setIsListVisible(true);
                 return;
-            case FriendListEvent.TOGGLE_FRIEND_LIST:
-                setIsVisible(value => !value);
+            case FriendsEvent.TOGGLE_FRIEND_LIST:
+                setIsListVisible(value => !value);
                 return;
-            case FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST:
-                const requestEvent = (event as FriendListSendFriendRequestEvent);
+            case FriendsEvent.SHOW_FRIEND_MESSENGER:
+                setIsMessengerVisible(true);
                 return;
-            case FriendListEvent.REQUEST_FRIEND_LIST:
-                dispatchUiEvent(new FriendListContentEvent(friendListState.friends));
+            case FriendsEvent.TOGGLE_FRIEND_MESSENGER:
+                setIsMessengerVisible(value => !value);
+                return;
+            case FriendsSendFriendRequestEvent.SEND_FRIEND_REQUEST:
+                const requestEvent = (event as FriendsSendFriendRequestEvent);
+                return;
+            case FriendsEvent.REQUEST_FRIEND_LIST:
+                dispatchUiEvent(new FriendListContentEvent(friendsState.friends));
                 return;
         }
-    }, [friendListState.friends]);
+    }, [ friendsState.friends ]);
 
-    useUiEvent(FriendListEvent.SHOW_FRIEND_LIST, onFriendListEvent);
-    useUiEvent(FriendListEvent.TOGGLE_FRIEND_LIST, onFriendListEvent);
-    useUiEvent(FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST, onFriendListEvent);
-    useUiEvent(FriendListEvent.REQUEST_FRIEND_LIST, onFriendListEvent);
+    useUiEvent(FriendsEvent.SHOW_FRIEND_LIST, onFriendsEvent);
+    useUiEvent(FriendsEvent.TOGGLE_FRIEND_LIST, onFriendsEvent);
+    useUiEvent(FriendsSendFriendRequestEvent.SEND_FRIEND_REQUEST, onFriendsEvent);
+    useUiEvent(FriendsEvent.REQUEST_FRIEND_LIST, onFriendsEvent);
 
     const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
     {
@@ -62,7 +77,7 @@ export const FriendsView: FC<{}> = props =>
 
         if(!userData || (userData.type !== RoomObjectUserType.getTypeNumber(RoomObjectUserType.USER))) return;
 
-        const friend = friendListState.friends.find(friend =>
+        const friend = friendsState.friends.find(friend =>
             {
                 return (friend.id === userData.webID);
             });
@@ -70,67 +85,26 @@ export const FriendsView: FC<{}> = props =>
         if(!friend) return;
 
         dispatchUiEvent(new FriendEnteredRoomEvent(userData.roomIndex, RoomObjectCategory.UNIT, userData.webID, userData.name, userData.type));
-    }, [ friendListState.friends ]);
+    }, [ friendsState.friends ]);
 
     useRoomEngineEvent(RoomEngineObjectEvent.ADDED, onRoomEngineObjectEvent);
 
-    useEffect(() =>
-    {
-        if(!settings) return;
-
-        setIsReady(true);
-    }, [ settings ]);
-
-    useEffect(() =>
-    {
-        SendMessageHook(new MessengerInitComposer());
-    }, []);
-
     const onlineFriends = useMemo(() =>
     {
-        if(!friends) return [];
-
         return friends.filter(f => f.online);
     }, [ friends ]);
 
     const offlineFriends = useMemo(() =>
     {
-        if(!friends) return [];
-
         return friends.filter(f => !f.online);
     }, [ friends ]);
 
     return (
-        <FriendListContextProvider value={ { friendListState, dispatchFriendListState } }>
-            <FriendListMessageHandler />
+        <FriendsContextProvider value={ { friendsState, dispatchFriendsState } }>
+            <FriendsMessageHandler />
             { isReady && createPortal(<FriendBarView />, document.getElementById('toolbar-friend-bar-container')) }
-            { isVisible &&
-                <NitroCardView className="nitro-friend-list">
-                    <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ () => setIsVisible(false) } />
-                    <NitroCardContentView className="p-0">
-                        <NitroCardTabsView>
-                            { TABS.map((tab, index) =>
-                                {
-                                    return (<NitroCardTabsItemView key={ index } isActive={ currentTab === index } onClick={ () => setCurrentTab(index) }>
-                                        { LocalizeText(tab) }
-                                    </NitroCardTabsItemView>);
-                                }) }
-                        </NitroCardTabsView>
-                        <div className="text-black">
-                            { currentTab === 0 && <NitroCardAccordionView>
-                                <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` } defaultState={ true }>
-                                   <FriendsListView list={ onlineFriends } />
-                                </NitroCardAccordionItemView>
-                                <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${offlineFriends.length})` }>
-                                    <FriendsListView list={ offlineFriends } />
-                                </NitroCardAccordionItemView>
-                                { requests.length > 0 && <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.tab.friendrequests') + ` (${requests.length})` }>
-                                    <FriendsListView list={ requests } />
-                                </NitroCardAccordionItemView> }
-                            </NitroCardAccordionView> }
-                        </div>
-                    </NitroCardContentView>
-                </NitroCardView> }
-        </FriendListContextProvider>
+            { isListVisible && <FriendsListView onlineFriends={ onlineFriends } offlineFriends={ offlineFriends } friendRequests={ requests } onCloseClick={ () => setIsListVisible(false) } /> }
+            { isMessengerVisible && <FriendsMessengerView /> }
+        </FriendsContextProvider>
     );
 }
diff --git a/src/views/friends/common/MessengerChat.ts b/src/views/friends/common/MessengerChat.ts
new file mode 100644
index 00000000..d21982c9
--- /dev/null
+++ b/src/views/friends/common/MessengerChat.ts
@@ -0,0 +1,34 @@
+import { MessengerChatMessage } from './MessengerChatMessage';
+export class MessengerChat
+{
+    private _friendId: number;
+    private _isRead: boolean;
+    private _messages: MessengerChatMessage[];
+
+    constructor(friendId: number, isRead: boolean = true)
+    {
+        this._friendId = friendId;
+        this._isRead = isRead;
+        this._messages = [];
+    }
+
+    public addMessage(): void
+    {
+        this._messages.push();
+    }
+
+    public get friendId(): number
+    {
+        return this._friendId;
+    }
+
+    public get isRead(): boolean
+    {
+        return this._isRead;
+    }
+
+    public get messages(): MessengerChatMessage[]
+    {
+        return this._messages;
+    }
+}
diff --git a/src/views/friends/common/MessengerChatMessage.ts b/src/views/friends/common/MessengerChatMessage.ts
new file mode 100644
index 00000000..28b54787
--- /dev/null
+++ b/src/views/friends/common/MessengerChatMessage.ts
@@ -0,0 +1,13 @@
+export class MessengerChatMessage
+{
+    private _type: number;
+    private _senderId: number;
+    private _message: string;
+    private _extraData: string;
+    private _sentAt: number;
+
+    constructor(type: number, senderId: number, message: string, extraData: string, sentAt: number)
+    {
+        
+    }
+}
diff --git a/src/views/friends/context/FriendListContext.tsx b/src/views/friends/context/FriendListContext.tsx
deleted file mode 100644
index 39d23764..00000000
--- a/src/views/friends/context/FriendListContext.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createContext, FC, useContext } from 'react';
-import { FriendListContextProps, IFriendListContext } from './FriendListContext.type';
-
-const FriendListContext = createContext<IFriendListContext>({
-    friendListState: null,
-    dispatchFriendListState: null
-});
-
-export const FriendListContextProvider: FC<FriendListContextProps> = props =>
-{
-    return <FriendListContext.Provider value={ props.value }>{ props.children }</FriendListContext.Provider>
-}
-
-export const useFriendListContext = () => useContext(FriendListContext);
diff --git a/src/views/friends/context/FriendListContext.type.ts b/src/views/friends/context/FriendListContext.type.ts
deleted file mode 100644
index 6e74c4cb..00000000
--- a/src/views/friends/context/FriendListContext.type.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Dispatch, ProviderProps } from 'react';
-import { IFriendListAction, IFriendListState } from '../reducers/FriendListReducer';
-
-export interface IFriendListContext
-{
-    friendListState: IFriendListState;
-    dispatchFriendListState: Dispatch<IFriendListAction>;
-}
-
-export interface FriendListContextProps extends ProviderProps<IFriendListContext>
-{
-
-}
diff --git a/src/views/friends/context/FriendsContext.tsx b/src/views/friends/context/FriendsContext.tsx
new file mode 100644
index 00000000..5b551102
--- /dev/null
+++ b/src/views/friends/context/FriendsContext.tsx
@@ -0,0 +1,14 @@
+import { createContext, FC, useContext } from 'react';
+import { FriendsContextProps, IFriendsContext } from './FriendsContext.type';
+
+const FriendsContext = createContext<IFriendsContext>({
+    friendsState: null,
+    dispatchFriendsState: null
+});
+
+export const FriendsContextProvider: FC<FriendsContextProps> = props =>
+{
+    return <FriendsContext.Provider value={ props.value }>{ props.children }</FriendsContext.Provider>
+}
+
+export const useFriendsContext = () => useContext(FriendsContext);
diff --git a/src/views/friends/context/FriendsContext.type.ts b/src/views/friends/context/FriendsContext.type.ts
new file mode 100644
index 00000000..a61ef776
--- /dev/null
+++ b/src/views/friends/context/FriendsContext.type.ts
@@ -0,0 +1,13 @@
+import { Dispatch, ProviderProps } from 'react';
+import { IFriendsAction, IFriendsState } from '../reducers/FriendsReducer';
+
+export interface IFriendsContext
+{
+    friendsState: IFriendsState;
+    dispatchFriendsState: Dispatch<IFriendsAction>;
+}
+
+export interface FriendsContextProps extends ProviderProps<IFriendsContext>
+{
+
+}
diff --git a/src/views/friends/reducers/FriendListReducer.tsx b/src/views/friends/reducers/FriendsReducer.tsx
similarity index 77%
rename from src/views/friends/reducers/FriendListReducer.tsx
rename to src/views/friends/reducers/FriendsReducer.tsx
index 3139d735..1b1ab612 100644
--- a/src/views/friends/reducers/FriendListReducer.tsx
+++ b/src/views/friends/reducers/FriendsReducer.tsx
@@ -1,5 +1,6 @@
 import { FriendListUpdateParser, FriendParser, FriendRequestData } from '@nitrots/nitro-renderer';
 import { Reducer } from 'react';
+import { MessengerChat } from '../common/MessengerChat';
 import { MessengerFriend } from '../common/MessengerFriend';
 import { MessengerRequest } from '../common/MessengerRequest';
 import { MessengerSettings } from '../common/MessengerSettings';
@@ -11,14 +12,15 @@ function compareName(a, b)
     return 0;
 }
 
-export interface IFriendListState
+export interface IFriendsState
 {
     settings: MessengerSettings;
     friends: MessengerFriend[];
     requests: MessengerRequest[];
+    activeChats: MessengerChat[];
 }
 
-export interface IFriendListAction
+export interface IFriendsAction
 {
     type: string;
     payload: {
@@ -26,34 +28,37 @@ export interface IFriendListAction
         fragment?: FriendParser[];
         update?: FriendListUpdateParser;
         requests?: FriendRequestData[];
+        chats?: MessengerChat[];
     }
 }
 
-export class FriendListActions
+export class FriendsActions
 {
-    public static RESET_STATE: string = 'FLA_RESET_STATE';
-    public static UPDATE_SETTINGS: string = 'FLA_UPDATE_SETTINGS';
-    public static PROCESS_FRAGMENT: string = 'FLA_PROCESS_FRAGMENT';
-    public static PROCESS_UPDATE: string = 'FLA_PROCESS_UPDATE';
-    public static PROCESS_REQUESTS: string = 'FLA_PROCESS_REQUESTS';
+    public static RESET_STATE: string = 'FA_RESET_STATE';
+    public static UPDATE_SETTINGS: string = 'FA_UPDATE_SETTINGS';
+    public static PROCESS_FRAGMENT: string = 'FA_PROCESS_FRAGMENT';
+    public static PROCESS_UPDATE: string = 'FA_PROCESS_UPDATE';
+    public static PROCESS_REQUESTS: string = 'FA_PROCESS_REQUESTS';
+    public static SET_ACTIVE_CHATS: string = 'FA_SET_ACTIVE_CHATS';
 }
 
-export const initialFriendList: IFriendListState = {
+export const initialFriends: IFriendsState = {
     settings: null,
     friends: [],
-    requests: []
+    requests: [],
+    activeChats: []
 }
 
-export const FriendListReducer: Reducer<IFriendListState, IFriendListAction> = (state, action) =>
+export const FriendsReducer: Reducer<IFriendsState, IFriendsAction> = (state, action) =>
 {
     switch(action.type)
     {
-        case FriendListActions.UPDATE_SETTINGS: {
+        case FriendsActions.UPDATE_SETTINGS: {
             const settings = (action.payload.settings || state.settings || null);
 
             return { ...state, settings };
         }
-        case FriendListActions.PROCESS_FRAGMENT: {
+        case FriendsActions.PROCESS_FRAGMENT: {
             const fragment = (action.payload.fragment || null);
             let friends = [ ...state.friends ];
 
@@ -85,7 +90,7 @@ export const FriendListReducer: Reducer<IFriendListState, IFriendListAction> = (
 
             return { ...state, friends };
         }
-        case FriendListActions.PROCESS_UPDATE: {
+        case FriendsActions.PROCESS_UPDATE: {
             const update = (action.payload.update || null);
             let friends = [ ...state.friends ];
 
@@ -118,7 +123,7 @@ export const FriendListReducer: Reducer<IFriendListState, IFriendListAction> = (
 
             return { ...state, friends };
         }
-        case FriendListActions.PROCESS_REQUESTS: {
+        case FriendsActions.PROCESS_REQUESTS: {
             const newRequests = (action.payload.requests || null);
             let requests = [ ...state.requests ];
 
@@ -133,6 +138,11 @@ export const FriendListReducer: Reducer<IFriendListState, IFriendListAction> = (
 
             return { ...state, requests };
         }
+        case FriendsActions.SET_ACTIVE_CHATS: {
+            const activeChats = (action.payload.chats || []);
+            
+            return { ...state, activeChats };
+        }
         default:
             return state;
     }
diff --git a/src/views/friends/views/friend-bar/FriendBarView.tsx b/src/views/friends/views/friend-bar/FriendBarView.tsx
index 3931c4f4..dd7c698b 100644
--- a/src/views/friends/views/friend-bar/FriendBarView.tsx
+++ b/src/views/friends/views/friend-bar/FriendBarView.tsx
@@ -1,12 +1,12 @@
 import { FC, useMemo, useState } from 'react';
-import { useFriendListContext } from '../../context/FriendListContext';
+import { useFriendsContext } from '../../context/FriendsContext';
 import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView';
 import { FriendBarViewProps } from './FriendBarView.types';
 
 export const FriendBarView: FC<FriendBarViewProps> = props =>
 {
-    const { friendListState = null } = useFriendListContext();
-    const { friends = null } = friendListState;
+    const { friendsState = null } = useFriendsContext();
+    const { friends = null } = friendsState;
     const [ indexOffset, setIndexOffset ] = useState(0);
     const [ maxDisplayCount, setMaxDisplayCount ] = useState(3);
 
diff --git a/src/views/friends/views/friend-item/FriendsListItemView.tsx b/src/views/friends/views/friend-item/FriendsListItemView.tsx
index bac0415d..3b398814 100644
--- a/src/views/friends/views/friend-item/FriendsListItemView.tsx
+++ b/src/views/friends/views/friend-item/FriendsListItemView.tsx
@@ -1,4 +1,5 @@
-import { FollowFriendMessageComposer, SetRelationshipStatusComposer } from '@nitrots/nitro-renderer';
+import { SetRelationshipStatusComposer } from '@nitrots/nitro-renderer';
+import { FollowFriendMessageComposer } from '@nitrots/nitro-renderer/src/nitro/communication/messages/outgoing/friendlist/FollowFriendMessageComposer';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
diff --git a/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx b/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx
new file mode 100644
index 00000000..bd9203f1
--- /dev/null
+++ b/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx
@@ -0,0 +1,63 @@
+import { FollowFriendMessageComposer, SetRelationshipStatusComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText } from '../../../../api';
+import { SendMessageHook } from '../../../../hooks';
+import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
+import { MessengerFriend } from '../../common/MessengerFriend';
+import { FriendsGroupItemViewProps } from './FriendsGroupItemView.types';
+
+export const FriendsGroupItemView: FC<FriendsGroupItemViewProps> = props =>
+{
+    const { friend = null } = props;
+
+    const [ isExpanded, setIsExpanded ] = useState<boolean>(false);
+
+    const followFriend = useCallback(() =>
+    {
+        if(!friend) return;
+        
+        SendMessageHook(new FollowFriendMessageComposer(friend.id));
+    }, [ friend ]);
+
+    const getCurrentRelationshipName = useCallback(() =>
+    {
+        if(!friend) return 'none';
+
+        switch(friend.relationshipStatus)
+        {
+            case MessengerFriend.RELATIONSHIP_HEART: return 'heart';
+            case MessengerFriend.RELATIONSHIP_SMILE: return 'smile';
+            case MessengerFriend.RELATIONSHIP_BOBBA: return 'bobba';
+            default: return 'none';
+        }
+    }, [ friend ]);
+
+    const updateRelationship = useCallback((type: number) =>
+    {
+        if(type !== friend.relationshipStatus) SendMessageHook(new SetRelationshipStatusComposer(friend.id, type));
+        
+        setIsExpanded(false);
+    }, [ friend ]);
+
+    if(!friend) return null;
+
+    return (
+        <div className="px-2 py-1 d-flex gap-1 align-items-center">
+            <UserProfileIconView userId={ friend.id } />
+            <div>{ friend.name }</div>
+            <div className="ms-auto d-flex align-items-center gap-1">
+                { !isExpanded && <>
+                    { friend.followingAllowed && <i onClick={ followFriend } className="icon icon-friendlist-follow cursor-pointer" title={ LocalizeText('friendlist.tip.follow') } /> }
+                    { friend.online && <i className="icon icon-friendlist-chat cursor-pointer" title={ LocalizeText('friendlist.tip.im') } /> }
+                    <i className={ 'icon cursor-pointer icon-relationship-' + getCurrentRelationshipName() } onClick={ () => setIsExpanded(true) } title={ LocalizeText('infostand.link.relationship') } />
+                    </> }
+                { isExpanded && <>
+                    <i className="icon icon-relationship-heart cursor-pointer" onClick={ () => updateRelationship(MessengerFriend.RELATIONSHIP_HEART) } />
+                    <i className="icon icon-relationship-smile cursor-pointer" onClick={ () => updateRelationship(MessengerFriend.RELATIONSHIP_SMILE) } />
+                    <i className="icon icon-relationship-bobba cursor-pointer" onClick={ () => updateRelationship(MessengerFriend.RELATIONSHIP_BOBBA) } />
+                    <i className="icon icon-relationship-none cursor-pointer" onClick={ () => updateRelationship(MessengerFriend.RELATIONSHIP_NONE) } />
+                </> }
+            </div>
+        </div>
+    );
+}
diff --git a/src/views/friends/views/friends-group-item/FriendsGroupItemView.types.ts b/src/views/friends/views/friends-group-item/FriendsGroupItemView.types.ts
new file mode 100644
index 00000000..345532b1
--- /dev/null
+++ b/src/views/friends/views/friends-group-item/FriendsGroupItemView.types.ts
@@ -0,0 +1,6 @@
+import { MessengerFriend } from '../../common/MessengerFriend';
+
+export interface FriendsGroupItemViewProps
+{
+    friend: MessengerFriend;
+}
diff --git a/src/views/friends/views/list/FriendsListView.tsx b/src/views/friends/views/friends-group/FriendsGroupView.tsx
similarity index 58%
rename from src/views/friends/views/list/FriendsListView.tsx
rename to src/views/friends/views/friends-group/FriendsGroupView.tsx
index 86ed2707..c5eb989b 100644
--- a/src/views/friends/views/list/FriendsListView.tsx
+++ b/src/views/friends/views/friends-group/FriendsGroupView.tsx
@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
 import { MessengerFriend } from '../../common/MessengerFriend';
 import { MessengerRequest } from '../../common/MessengerRequest';
-import { FriendsListItemView } from '../friend-item/FriendsListItemView';
-import { FriendsRequestItemView } from '../request-item/FriendsRequestItemView';
-import { FriendsListViewProps } from './FriendsListView.types';
+import { FriendsGroupItemView } from '../friends-group-item/FriendsGroupItemView';
+import { FriendsRequestItemView } from '../friends-request-item/FriendsRequestItemView';
+import { FriendsGroupViewProps } from './FriendsGroupView.types';
 
-export const FriendsListView: FC<FriendsListViewProps> = props =>
+export const FriendsGroupView: FC<FriendsGroupViewProps> = props =>
 {
     const { list =  null } = props;
 
@@ -15,7 +15,7 @@ export const FriendsListView: FC<FriendsListViewProps> = props =>
         { list.map((item, index) =>
         {
             if(item instanceof MessengerFriend)
-                return <FriendsListItemView key={ index } friend={ item } />
+                return <FriendsGroupItemView key={ index } friend={ item } />
             else if(item instanceof MessengerRequest)
                 return  <FriendsRequestItemView key={ index } request={ item } />
             else
diff --git a/src/views/friends/views/list/FriendsListView.types.ts b/src/views/friends/views/friends-group/FriendsGroupView.types.ts
similarity index 82%
rename from src/views/friends/views/list/FriendsListView.types.ts
rename to src/views/friends/views/friends-group/FriendsGroupView.types.ts
index 8a4c4bc9..48bc5ee6 100644
--- a/src/views/friends/views/list/FriendsListView.types.ts
+++ b/src/views/friends/views/friends-group/FriendsGroupView.types.ts
@@ -1,7 +1,7 @@
 import { MessengerFriend } from '../../common/MessengerFriend';
 import { MessengerRequest } from '../../common/MessengerRequest';
 
-export interface FriendsListViewProps
+export interface FriendsGroupViewProps
 {
     list: MessengerFriend[] | MessengerRequest[];
 }
diff --git a/src/views/friends/views/friends-list/FriendsListView.tsx b/src/views/friends/views/friends-list/FriendsListView.tsx
new file mode 100644
index 00000000..fd796044
--- /dev/null
+++ b/src/views/friends/views/friends-list/FriendsListView.tsx
@@ -0,0 +1,43 @@
+import { FC, useState } from 'react';
+import { LocalizeText } from '../../../../api';
+import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
+import { FriendsGroupView } from '../friends-group/FriendsGroupView';
+import { FriendsListViewProps } from './FriendsListView.types';
+
+const TABS: string[] = ['friendlist.friends', 'generic.search'];
+
+export const FriendsListView: FC<FriendsListViewProps> = props =>
+{
+    const { onlineFriends = [], offlineFriends = [], friendRequests = [], onCloseClick = null } = props;
+    
+    const [ currentTab, setCurrentTab ] = useState<number>(0);
+
+    return (
+        <NitroCardView className="nitro-friends">
+                <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ onCloseClick } />
+                <NitroCardContentView className="p-0">
+                    <NitroCardTabsView>
+                        { TABS.map((tab, index) =>
+                            {
+                                return (<NitroCardTabsItemView key={ index } isActive={ currentTab === index } onClick={ () => setCurrentTab(index) }>
+                                    { LocalizeText(tab) }
+                                </NitroCardTabsItemView>);
+                            }) }
+                    </NitroCardTabsView>
+                    <div className="text-black">
+                        { currentTab === 0 && <NitroCardAccordionView>
+                            <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` } defaultState={ true }>
+                                <FriendsGroupView list={ onlineFriends } />
+                            </NitroCardAccordionItemView>
+                            <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${offlineFriends.length})` }>
+                                <FriendsGroupView list={ offlineFriends } />
+                            </NitroCardAccordionItemView>
+                            { friendRequests.length > 0 && <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.tab.friendrequests') + ` (${friendRequests.length})` }>
+                                <FriendsGroupView list={ friendRequests } />
+                            </NitroCardAccordionItemView> }
+                        </NitroCardAccordionView> }
+                    </div>
+                </NitroCardContentView>
+            </NitroCardView>
+    );
+};
diff --git a/src/views/friends/views/friends-list/FriendsListView.types.ts b/src/views/friends/views/friends-list/FriendsListView.types.ts
new file mode 100644
index 00000000..01bfcc84
--- /dev/null
+++ b/src/views/friends/views/friends-list/FriendsListView.types.ts
@@ -0,0 +1,9 @@
+import { MessengerFriend } from './../../common/MessengerFriend';
+import { MessengerRequest } from './../../common/MessengerRequest';
+export interface FriendsListViewProps
+{
+    onCloseClick: () => void;
+    onlineFriends: MessengerFriend[];
+    offlineFriends: MessengerFriend[];
+    friendRequests: MessengerRequest[];
+}
diff --git a/src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx b/src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx
new file mode 100644
index 00000000..f25c42f9
--- /dev/null
+++ b/src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx
@@ -0,0 +1,37 @@
+import { AcceptFriendMessageComposer, DeclineFriendMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
+import { FriendsRequestItemViewProps } from './FriendsRequestItemView.types';
+
+export const FriendsRequestItemView: FC<FriendsRequestItemViewProps> = props =>
+{
+    const { request = null } = props;
+
+    const accept = useCallback(() =>
+    {
+        if(!request) return;
+        
+        SendMessageHook(new AcceptFriendMessageComposer(request.id));
+    }, [ request ]);
+
+    const decline = useCallback(() =>
+    {
+        if(!request) return;
+        
+        SendMessageHook(new DeclineFriendMessageComposer(false, request.id));
+    }, [ request ]);
+
+    if(!request) return null;
+
+    return (
+        <div className="px-2 py-1 d-flex gap-1 align-items-center">
+            <UserProfileIconView userId={ request.id } />
+            <div>{ request.name }</div>
+            <div className="ms-auto d-flex align-items-center gap-1">
+               <i className="icon icon-accept cursor-pointer" onClick={ accept } />
+               <i className="icon icon-deny cursor-pointer" onClick={ decline } />
+            </div>
+        </div>
+    );
+};
diff --git a/src/views/friends/views/friends-request-item/FriendsRequestItemView.types.ts b/src/views/friends/views/friends-request-item/FriendsRequestItemView.types.ts
new file mode 100644
index 00000000..4f5c38d5
--- /dev/null
+++ b/src/views/friends/views/friends-request-item/FriendsRequestItemView.types.ts
@@ -0,0 +1,6 @@
+import { MessengerRequest } from '../../common/MessengerRequest';
+
+export interface FriendsRequestItemViewProps
+{
+    request: MessengerRequest;
+}
diff --git a/src/views/friends/views/messenger/FriendsMessengerView.tsx b/src/views/friends/views/messenger/FriendsMessengerView.tsx
new file mode 100644
index 00000000..38a3c07b
--- /dev/null
+++ b/src/views/friends/views/messenger/FriendsMessengerView.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+
+export const FriendsMessengerView: FC<{}> = props =>
+{
+    return (<NitroCardView className="nitro-friends-messenger" simple={ true }>
+                <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ () => {} } />
+                <NitroCardContentView className="p-0">
+                    
+                </NitroCardContentView>
+            </NitroCardView>);
+};
diff --git a/src/views/friends/views/request-item/FriendsRequestItemView.types.ts b/src/views/friends/views/request-item/FriendsRequestItemView.types.ts
index 4f5c38d5..bc01f938 100644
--- a/src/views/friends/views/request-item/FriendsRequestItemView.types.ts
+++ b/src/views/friends/views/request-item/FriendsRequestItemView.types.ts
@@ -1,5 +1,4 @@
-import { MessengerRequest } from '../../common/MessengerRequest';
-
+import { MessengerRequest } from './../../common/MessengerRequest';
 export interface FriendsRequestItemViewProps
 {
     request: MessengerRequest;
diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
index 385a0a4f..8fe49ce2 100644
--- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
+++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
@@ -1,8 +1,8 @@
 import { RoomBannedUsersComposer, RoomBannedUsersEvent, RoomSettingsEvent, RoomUsersWithRightsComposer, RoomUsersWithRightsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { FriendListEvent } from '../../../../events';
-import { FriendListContentEvent } from '../../../../events/friend-list/FriendListContentEvent';
+import { FriendsEvent } from '../../../../events';
+import { FriendListContentEvent } from '../../../../events/friends/FriendListContentEvent';
 import { dispatchUiEvent, useUiEvent } from '../../../../hooks';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
@@ -87,7 +87,7 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
 
     useEffect(() =>
     {
-        if(roomSettingsData) dispatchUiEvent(new FriendListEvent(FriendListEvent.REQUEST_FRIEND_LIST));
+        if(roomSettingsData) dispatchUiEvent(new FriendsEvent(FriendsEvent.REQUEST_FRIEND_LIST));
     }, [roomSettingsData])
 
     const save = useCallback((data: RoomSettingsData) =>
diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index 74b22062..3ab96937 100644
--- a/src/views/toolbar/ToolbarView.tsx
+++ b/src/views/toolbar/ToolbarView.tsx
@@ -1,7 +1,7 @@
 import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, Queue, UserInfoDataParser, UserInfoEvent, UserProfileComposer, Wait } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GoToDesktop } from '../../api';
-import { AvatarEditorEvent, CatalogEvent, FriendListEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
+import { AvatarEditorEvent, CatalogEvent, FriendsEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
 import { AchievementsUIEvent } from '../../events/achievements';
 import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
@@ -107,7 +107,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                 dispatchUiEvent(new CatalogEvent(CatalogEvent.TOGGLE_CATALOG));
                 return;
             case ToolbarViewItems.FRIEND_LIST_ITEM:
-                dispatchUiEvent(new CatalogEvent(FriendListEvent.TOGGLE_FRIEND_LIST));
+                dispatchUiEvent(new CatalogEvent(FriendsEvent.TOGGLE_FRIEND_LIST));
                 return;
             case ToolbarViewItems.CAMERA_ITEM:
                 dispatchUiEvent(new RoomWidgetCameraEvent(RoomWidgetCameraEvent.TOGGLE_CAMERA));

From 34ad458f87b4651dc0329f9c0cb9e9ac069d2f59 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 17 Sep 2021 02:39:58 -0400
Subject: [PATCH 02/31] Rename CatalogGiftView

---
 src/views/catalog/CatalogView.tsx                             | 4 ++--
 src/views/catalog/views/CatalogViews.scss                     | 2 +-
 .../gift/{CatalogPageGiftView.scss => CatalogGiftView.scss}   | 0
 .../gift/{CatalogPageGiftView.tsx => CatalogGiftView.tsx}     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename src/views/catalog/views/gift/{CatalogPageGiftView.scss => CatalogGiftView.scss} (100%)
 rename src/views/catalog/views/gift/{CatalogPageGiftView.tsx => CatalogGiftView.tsx} (99%)

diff --git a/src/views/catalog/CatalogView.tsx b/src/views/catalog/CatalogView.tsx
index d49b167e..d69eb842 100644
--- a/src/views/catalog/CatalogView.tsx
+++ b/src/views/catalog/CatalogView.tsx
@@ -10,7 +10,7 @@ import { CatalogMode, CatalogViewProps } from './CatalogView.types';
 import { BuildCatalogPageTree } from './common/CatalogUtilities';
 import { CatalogContextProvider } from './context/CatalogContext';
 import { CatalogReducer, initialCatalog } from './reducers/CatalogReducer';
-import { CatalogPageGiftView } from './views/gift/CatalogPageGiftView';
+import { CatalogGiftView } from './views/gift/CatalogGiftView';
 import { ACTIVE_PAGES, CatalogNavigationView } from './views/navigation/CatalogNavigationView';
 import { CatalogPageView } from './views/page/CatalogPageView';
 
@@ -214,7 +214,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                         </div>
                     </NitroCardContentView>
                 </NitroCardView> }
-                <CatalogPageGiftView />
+                <CatalogGiftView />
         </CatalogContextProvider>
     );
 }
diff --git a/src/views/catalog/views/CatalogViews.scss b/src/views/catalog/views/CatalogViews.scss
index d5d8464b..0a5f6295 100644
--- a/src/views/catalog/views/CatalogViews.scss
+++ b/src/views/catalog/views/CatalogViews.scss
@@ -2,4 +2,4 @@
 @import './navigation/CatalogNavigationView';
 @import './page/CatalogPageView';
 @import './search/CatalogSearchView';
-@import './gift/CatalogPageGiftView';
+@import './gift/CatalogGiftView';
diff --git a/src/views/catalog/views/gift/CatalogPageGiftView.scss b/src/views/catalog/views/gift/CatalogGiftView.scss
similarity index 100%
rename from src/views/catalog/views/gift/CatalogPageGiftView.scss
rename to src/views/catalog/views/gift/CatalogGiftView.scss
diff --git a/src/views/catalog/views/gift/CatalogPageGiftView.tsx b/src/views/catalog/views/gift/CatalogGiftView.tsx
similarity index 99%
rename from src/views/catalog/views/gift/CatalogPageGiftView.tsx
rename to src/views/catalog/views/gift/CatalogGiftView.tsx
index 1d7a1bf1..d466d5b6 100644
--- a/src/views/catalog/views/gift/CatalogPageGiftView.tsx
+++ b/src/views/catalog/views/gift/CatalogGiftView.tsx
@@ -10,7 +10,7 @@ import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
 import { FurniImageView } from '../../../shared/furni-image/FurniImageView';
 import { useCatalogContext } from '../../context/CatalogContext';
 
-export const CatalogPageGiftView: FC<{}> = props =>
+export const CatalogGiftView: FC<{}> = props =>
 {
     const { catalogState = null } = useCatalogContext();
     const { giftConfiguration = null } = catalogState;

From 7ee1a6898780d6e09767a0e87adacf6cffdb4928 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 17 Sep 2021 02:40:11 -0400
Subject: [PATCH 03/31] Fix dimmer again

---
 .../furniture/dimmer/FurnitureDimmerView.tsx    | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
index f65f2664..d1f88b64 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
@@ -55,16 +55,8 @@ export const FurnitureDimmerView: FC<{}> = props =>
 
                 BatchUpdates(() =>
                 {
-                    let prevDimmerState = 0;
-
-                    setDimmerState(prevValue =>
-                        {
-                            setLastDimmerState(prevValue);
-
-                            return widgetEvent.state;
-                        });
-
-                    setLastDimmerState(prevDimmerState);
+                    setLastDimmerState(dimmerState);
+                    setDimmerState(widgetEvent.state);
                     setSelectedPresetId(widgetEvent.presetId);
                     setEffectId(widgetEvent.effectId);
                     setSelectedEffectId(widgetEvent.effectId);
@@ -73,10 +65,11 @@ export const FurnitureDimmerView: FC<{}> = props =>
                     setBrightness(widgetEvent.brightness);
                     setSelectedBrightness(widgetEvent.brightness);
                 });
+
                 return;
             }
         }
-    }, []);
+    }, [ dimmerState ]);
 
     CreateEventDispatcherHook(RoomWidgetUpdateDimmerEvent.PRESETS, eventDispatcher, onNitroEvent);
     CreateEventDispatcherHook(RoomWidgetUpdateDimmerEvent.HIDE, eventDispatcher, onNitroEvent);
@@ -144,6 +137,8 @@ export const FurnitureDimmerView: FC<{}> = props =>
     {
         if((dimmerState === 0) && (lastDimmerState === 0)) return;
 
+        console.log('ye')
+
         widgetHandler.processWidgetMessage(new RoomWidgetDimmerPreviewMessage(selectedColor, selectedBrightness, (selectedEffectId === 2)));
     }, [ widgetHandler, dimmerState, lastDimmerState, selectedColor, selectedBrightness, selectedEffectId ]);
 

From 4a55aff19cafd0030bdeaa83810ecb9093eb6d3d Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 17 Sep 2021 02:40:37 -0400
Subject: [PATCH 04/31] Remove console log

---
 .../page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx b/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx
index b36ce01b..4cb90755 100644
--- a/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx
+++ b/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx
@@ -63,8 +63,6 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
         const stringDataType = new StringDataType();
         stringDataType.setValue(productData);
 
-        console.log(stringDataType);
-
         dispatchUiEvent(new SetRoomPreviewerStuffDataEvent(activeOffer, stringDataType));
     }, [ currentBadge, activeOffer, roomPreviewer ]);
 

From 94f0d142c76928d532512c183e3c6439ceefa2cb Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 17 Sep 2021 02:40:54 -0400
Subject: [PATCH 05/31] Fix chat input width resetting

---
 src/views/room/widgets/chat-input/ChatInputView.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/room/widgets/chat-input/ChatInputView.tsx b/src/views/room/widgets/chat-input/ChatInputView.tsx
index c1ac2a3b..534dd93c 100644
--- a/src/views/room/widgets/chat-input/ChatInputView.tsx
+++ b/src/views/room/widgets/chat-input/ChatInputView.tsx
@@ -260,11 +260,18 @@ export const ChatInputView: FC<{}> = props =>
         }
     }, [ onKeyDownEvent ]);
 
+    useEffect(() =>
+    {
+        if(!inputRef.current) return;
+
+        inputRef.current.parentElement.dataset.value = chatValue;
+    }, [ chatValue ]);
+
     return (
         createPortal(
         <div className="nitro-chat-input-container">
             <div className="input-sizer">
-                <input ref={ inputRef } type="text" className="chat-input" placeholder={ LocalizeText('widgets.chatinput.default') } value={ chatValue } maxLength={ maxChatLength } onChange={ event => { event.target.parentElement.dataset.value = event.target.value; updateChatInput(event.target.value) } } onMouseDown={ event => setInputFocus() } />
+                <input ref={ inputRef } type="text" className="chat-input" placeholder={ LocalizeText('widgets.chatinput.default') } value={ chatValue } maxLength={ maxChatLength } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } />
             </div>
             <ChatInputStyleSelectorView onStyleSelected={ onStyleSelected } />
         </div>, document.getElementById('toolbar-chat-input-container'))

From b5850c1995494ce5872a1ee07d027ccd02deb9a3 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Fri, 17 Sep 2021 08:15:53 -0300
Subject: [PATCH 06/31] Updates

---
 src/api/friends/OpenMessengerChat.ts          |  7 ++
 src/api/friends/index.ts                      |  1 +
 src/api/index.ts                              |  1 +
 src/views/friends/FriendsView.tsx             |  9 +--
 src/views/friends/common/MessengerChat.ts     |  4 +-
 .../friends/common/MessengerChatMessage.ts    | 35 ++++++++-
 .../views/friend-item/FriendsListItemView.tsx | 13 +++-
 .../views/messenger/FriendsMessengerView.tsx  | 75 ++++++++++++++++++-
 8 files changed, 127 insertions(+), 18 deletions(-)
 create mode 100644 src/api/friends/OpenMessengerChat.ts
 create mode 100644 src/api/friends/index.ts

diff --git a/src/api/friends/OpenMessengerChat.ts b/src/api/friends/OpenMessengerChat.ts
new file mode 100644
index 00000000..e5c685cd
--- /dev/null
+++ b/src/api/friends/OpenMessengerChat.ts
@@ -0,0 +1,7 @@
+import { CreateLinkEvent } from '..';
+
+export function OpenMessengerChat(friendId: number): void
+{
+    console.log(`friends/messenger/${friendId}`);
+    CreateLinkEvent(`friends/messenger/${friendId}`);
+}
diff --git a/src/api/friends/index.ts b/src/api/friends/index.ts
new file mode 100644
index 00000000..ffb458ee
--- /dev/null
+++ b/src/api/friends/index.ts
@@ -0,0 +1 @@
+export * from './OpenMessengerChat';
diff --git a/src/api/index.ts b/src/api/index.ts
index 773325c3..0b87703a 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,4 +1,5 @@
 export * from './core';
+export * from './friends';
 export * from './groups';
 export * from './navigator';
 export * from './nitro';
diff --git a/src/views/friends/FriendsView.tsx b/src/views/friends/FriendsView.tsx
index 8c8e5316..3e593a88 100644
--- a/src/views/friends/FriendsView.tsx
+++ b/src/views/friends/FriendsView.tsx
@@ -21,7 +21,6 @@ export const FriendsView: FC<{}> = props =>
 
     const [ isReady, setIsReady ] = useState(false);
     const [ isListVisible, setIsListVisible ] = useState(false);
-    const [ isMessengerVisible, setIsMessengerVisible ] = useState(false);
 
     useEffect(() =>
     {
@@ -45,12 +44,6 @@ export const FriendsView: FC<{}> = props =>
             case FriendsEvent.TOGGLE_FRIEND_LIST:
                 setIsListVisible(value => !value);
                 return;
-            case FriendsEvent.SHOW_FRIEND_MESSENGER:
-                setIsMessengerVisible(true);
-                return;
-            case FriendsEvent.TOGGLE_FRIEND_MESSENGER:
-                setIsMessengerVisible(value => !value);
-                return;
             case FriendsSendFriendRequestEvent.SEND_FRIEND_REQUEST:
                 const requestEvent = (event as FriendsSendFriendRequestEvent);
                 return;
@@ -104,7 +97,7 @@ export const FriendsView: FC<{}> = props =>
             <FriendsMessageHandler />
             { isReady && createPortal(<FriendBarView />, document.getElementById('toolbar-friend-bar-container')) }
             { isListVisible && <FriendsListView onlineFriends={ onlineFriends } offlineFriends={ offlineFriends } friendRequests={ requests } onCloseClick={ () => setIsListVisible(false) } /> }
-            { isMessengerVisible && <FriendsMessengerView /> }
+            <FriendsMessengerView />
         </FriendsContextProvider>
     );
 }
diff --git a/src/views/friends/common/MessengerChat.ts b/src/views/friends/common/MessengerChat.ts
index d21982c9..963a941b 100644
--- a/src/views/friends/common/MessengerChat.ts
+++ b/src/views/friends/common/MessengerChat.ts
@@ -12,9 +12,9 @@ export class MessengerChat
         this._messages = [];
     }
 
-    public addMessage(): void
+    public addMessage(type: number, senderId: number, message: string, sentAt: number, extraData?: string): void
     {
-        this._messages.push();
+        this._messages.push(new MessengerChatMessage(type, senderId, message, sentAt, extraData));
     }
 
     public get friendId(): number
diff --git a/src/views/friends/common/MessengerChatMessage.ts b/src/views/friends/common/MessengerChatMessage.ts
index 28b54787..0b410216 100644
--- a/src/views/friends/common/MessengerChatMessage.ts
+++ b/src/views/friends/common/MessengerChatMessage.ts
@@ -3,11 +3,40 @@ export class MessengerChatMessage
     private _type: number;
     private _senderId: number;
     private _message: string;
-    private _extraData: string;
     private _sentAt: number;
+    private _extraData: string;
 
-    constructor(type: number, senderId: number, message: string, extraData: string, sentAt: number)
+    constructor(type: number, senderId: number, message: string, sentAt: number, extraData?: string)
     {
-        
+        this._type = type;
+        this._senderId = senderId;
+        this._message = message;
+        this._sentAt = sentAt;
+        this._extraData = extraData;
+    }
+
+    public get type(): number
+    {
+        return this._type;
+    }
+
+    public get senderId(): number
+    {
+        return this._senderId;
+    }
+
+    public get message(): string
+    {
+        return this._message;
+    }
+
+    public get sentAt(): number
+    {
+        return this._sentAt;
+    }
+
+    public get extraData(): string
+    {
+        return this._extraData;
     }
 }
diff --git a/src/views/friends/views/friend-item/FriendsListItemView.tsx b/src/views/friends/views/friend-item/FriendsListItemView.tsx
index 3b398814..2edafd90 100644
--- a/src/views/friends/views/friend-item/FriendsListItemView.tsx
+++ b/src/views/friends/views/friend-item/FriendsListItemView.tsx
@@ -1,7 +1,7 @@
 import { SetRelationshipStatusComposer } from '@nitrots/nitro-renderer';
 import { FollowFriendMessageComposer } from '@nitrots/nitro-renderer/src/nitro/communication/messages/outgoing/friendlist/FollowFriendMessageComposer';
 import { FC, useCallback, useState } from 'react';
-import { LocalizeText } from '../../../../api';
+import { LocalizeText, OpenMessengerChat } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
 import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
 import { MessengerFriend } from '../../common/MessengerFriend';
@@ -20,6 +20,13 @@ export const FriendsListItemView: FC<FriendsListItemViewProps> = props =>
         SendMessageHook(new FollowFriendMessageComposer(friend.id));
     }, [ friend ]);
 
+    const openMessengerChat = useCallback(() =>
+    {
+        if(!friend) return;
+        
+        OpenMessengerChat(friend.id);
+    }, [ friend ]);
+
     const getCurrentRelationshipName = useCallback(() =>
     {
         if(!friend) return 'none';
@@ -48,8 +55,8 @@ export const FriendsListItemView: FC<FriendsListItemViewProps> = props =>
             <div>{ friend.name }</div>
             <div className="ms-auto d-flex align-items-center gap-1">
                 { !isExpanded && <>
-                    { friend.followingAllowed && <i onClick={ followFriend } className="icon icon-friendlist-follow cursor-pointer" title={ LocalizeText('friendlist.tip.follow') } /> }
-                    { friend.online && <i className="icon icon-friendlist-chat cursor-pointer" title={ LocalizeText('friendlist.tip.im') } /> }
+                    { friend.followingAllowed && <i className="icon icon-friendlist-follow cursor-pointer" onClick={ followFriend } title={ LocalizeText('friendlist.tip.follow') } /> }
+                    { friend.online && <i className="icon icon-friendlist-chat cursor-pointer" onClick={ openMessengerChat } title={ LocalizeText('friendlist.tip.im') } /> }
                     <i className={ 'icon cursor-pointer icon-relationship-' + getCurrentRelationshipName() } onClick={ () => setIsExpanded(true) } title={ LocalizeText('infostand.link.relationship') } />
                     </> }
                 { isExpanded && <>
diff --git a/src/views/friends/views/messenger/FriendsMessengerView.tsx b/src/views/friends/views/messenger/FriendsMessengerView.tsx
index 38a3c07b..b64ed9d2 100644
--- a/src/views/friends/views/messenger/FriendsMessengerView.tsx
+++ b/src/views/friends/views/messenger/FriendsMessengerView.tsx
@@ -1,9 +1,80 @@
-import { FC } from 'react';
-import { LocalizeText } from '../../../../api';
+import { ILinkEventTracker, NitroEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
+import { FriendsEvent } from '../../../../events/friends/FriendsEvent';
+import { useUiEvent } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { MessengerChat } from '../../common/MessengerChat';
+import { useFriendsContext } from '../../context/FriendsContext';
+import { FriendsActions } from '../../reducers/FriendsReducer';
 
 export const FriendsMessengerView: FC<{}> = props =>
 {
+    const { friendsState = null, dispatchFriendsState = null } = useFriendsContext();
+    const { activeChats = [] } = friendsState;
+
+    const [ isVisible, setIsVisible ] = useState(false);
+    const [ activeChatIndex, setActiveChatIndex ] = useState(0);
+    
+    const onNitroEvent = useCallback((event: NitroEvent) =>
+    {
+        switch(event.type)
+        {
+            case FriendsEvent.SHOW_FRIEND_MESSENGER:
+                setIsVisible(true);
+                return;
+            case FriendsEvent.TOGGLE_FRIEND_MESSENGER:
+                setIsVisible(value => !value);
+                return;
+        }
+    }, []);
+
+    useUiEvent(FriendsEvent.SHOW_FRIEND_MESSENGER, onNitroEvent);
+    useUiEvent(FriendsEvent.TOGGLE_FRIEND_MESSENGER, onNitroEvent);
+
+    const linkReceived = useCallback((url: string) =>
+    {
+        const parts = url.split('/');
+        console.log(parts);
+        if(parts.length < 3) return;
+
+        const friendId = parseInt(parts[2]);
+        console.log(friendId);
+        let existingChatIndex = activeChats.findIndex(c => c.friendId === friendId);
+
+        if(existingChatIndex === -1)
+        {
+            const clonedActiveChats = Array.from(activeChats);
+            clonedActiveChats.push(new MessengerChat(friendId, true));
+
+            dispatchFriendsState({
+                type: FriendsActions.SET_ACTIVE_CHATS,
+                payload: {
+                    chats: clonedActiveChats
+                }
+            });
+
+            existingChatIndex = clonedActiveChats.length - 1;
+        }
+
+        setActiveChatIndex(existingChatIndex);
+        setIsVisible(true);
+    }, [ activeChats, dispatchFriendsState ]);
+
+    useEffect(() =>
+    {
+        const linkTracker: ILinkEventTracker = {
+            linkReceived,
+            eventUrlPrefix: 'friends/messenger/'
+        };
+
+        AddEventLinkTracker(linkTracker);
+
+        return () => RemoveLinkEventTracker(linkTracker);
+    }, [ linkReceived ]);
+
+    if(!isVisible) return null;
+
     return (<NitroCardView className="nitro-friends-messenger" simple={ true }>
                 <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ () => {} } />
                 <NitroCardContentView className="p-0">

From c7a5170c2208dc439c88868e09674ac1249943ed Mon Sep 17 00:00:00 2001
From: Layne <laynebalsters@gmail.com>
Date: Sat, 18 Sep 2021 01:27:31 -0400
Subject: [PATCH 07/31] new header ig

---
 .../card/content/NitroCardContentView.scss    |  6 -----
 .../card/header/NitroCardHeaderView.scss      | 25 ++++++++++++-------
 .../card/header/NitroCardHeaderView.tsx       |  4 +--
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/layout/card/content/NitroCardContentView.scss b/src/layout/card/content/NitroCardContentView.scss
index c681fd34..9ffd6fe9 100644
--- a/src/layout/card/content/NitroCardContentView.scss
+++ b/src/layout/card/content/NitroCardContentView.scss
@@ -2,15 +2,9 @@
     padding-top: $container-padding-x;
     padding-bottom: $container-padding-x;
     overflow: auto;
-
-    &.simple {
-        padding-left: ($container-padding-x + 25px);
-        padding-right: ($container-padding-x + 25px);
-    }
 }
 
 @include media-breakpoint-down(lg) {
-        
     .content-area {
         height: 100% !important;
         min-height: auto !important;
diff --git a/src/layout/card/header/NitroCardHeaderView.scss b/src/layout/card/header/NitroCardHeaderView.scss
index b3142be8..b81b748e 100644
--- a/src/layout/card/header/NitroCardHeaderView.scss
+++ b/src/layout/card/header/NitroCardHeaderView.scss
@@ -2,7 +2,6 @@
     min-height: 33px;
     max-height: 33px;
     white-space: nowrap;
-    overflow: hidden;
 
     .header-text {
         margin: 0 35px;
@@ -10,19 +9,22 @@
 
     &.simple-header {
         min-height: 28px;
-        max-height: 28px;
+
+        .header-close {
+            font-size: 12px;
+        }
     }
 
     .bg-tertiary-split {
         position: relative;
-        border: 2px solid darken($quaternary, 4);
-        box-shadow: 0 0 0 2px $white;
+        border-bottom: 2px solid darken($quaternary, 5);
+        box-shadow: 0 2px white;
         width: 100%;
-        margin: 0 25px;
+        margin: 0;
 
         &:before {
             position: absolute;
-            content: ' ';
+            content: " ";
             top: 0;
             left: 0;
             width: 100%;
@@ -36,15 +38,20 @@
         border-radius: $border-radius;
         box-shadow: 0 0 0 1.5px $white;
         border: 2px solid #921911;
-        background: repeating-linear-gradient(rgba(245,80,65,1), rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%);
+        background: repeating-linear-gradient(
+            rgba(245, 80, 65, 1),
+            rgba(245, 80, 65, 1) 50%,
+            rgba(194, 48, 39, 1) 50%,
+            rgba(194, 48, 39, 1) 100%
+        );
         cursor: pointer;
         line-height: 1;
         padding: 1px 3px;
-    
+
         &:hover {
             filter: brightness(1.2);
         }
-    
+
         &:active {
             filter: brightness(0.8);
         }
diff --git a/src/layout/card/header/NitroCardHeaderView.tsx b/src/layout/card/header/NitroCardHeaderView.tsx
index 3be15c6d..b964fe46 100644
--- a/src/layout/card/header/NitroCardHeaderView.tsx
+++ b/src/layout/card/header/NitroCardHeaderView.tsx
@@ -18,8 +18,8 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
         return (
             <div className="container-fluid bg-light">
                 <div className="row nitro-card-header simple-header">
-                    <div className="d-flex justify-content-center align-items-center w-100 position-relative">
-                        <div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 rounded-bottom drag-handler">{ headerText }</div>
+                    <div className="d-flex justify-content-center align-items-center w-100 position-relative px-0">
+                        <div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 drag-handler">{ headerText }</div>
                         <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
                             <i className="fas fa-times" />
                         </div>

From 7a6fe87aedd54715462945fdccf16b66a41e2bce Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sat, 18 Sep 2021 03:04:50 -0300
Subject: [PATCH 08/31] Messenger Chat

---
 src/layout/card/NitroCardView.scss            |   4 +
 src/layout/card/NitroCardView.tsx             |   2 +-
 src/views/friends/FriendsMessageHandler.tsx   |  20 +--
 src/views/friends/FriendsView.scss            |   1 +
 src/views/friends/FriendsView.tsx             |   2 +-
 src/views/friends/common/MessengerChat.ts     |  21 ++-
 .../friends/common/MessengerChatMessage.ts    |   4 +
 .../common/MessengerChatMessageGroup.ts       |  28 ++++
 src/views/friends/reducers/FriendsReducer.tsx |  22 +++
 .../friend-bar-item/FriendBarItemView.tsx     |  11 +-
 .../views/friend-bar/FriendBarView.tsx        |  10 +-
 .../views/friend-bar/FriendBarView.types.ts   |   3 +-
 .../views/friend-item/FriendsListItemView.tsx |  71 ---------
 .../friend-item/FriendsListItemView.types.ts  |   6 -
 .../FriendsGroupItemView.tsx                  |  11 +-
 .../views/messenger/FriendsMessengerView.scss |  71 +++++++++
 .../views/messenger/FriendsMessengerView.tsx  | 141 ++++++++++++++++--
 17 files changed, 309 insertions(+), 119 deletions(-)
 create mode 100644 src/views/friends/common/MessengerChatMessageGroup.ts
 delete mode 100644 src/views/friends/views/friend-item/FriendsListItemView.tsx
 delete mode 100644 src/views/friends/views/friend-item/FriendsListItemView.types.ts
 create mode 100644 src/views/friends/views/messenger/FriendsMessengerView.scss

diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss
index 44285071..cd7bfebf 100644
--- a/src/layout/card/NitroCardView.scss
+++ b/src/layout/card/NitroCardView.scss
@@ -19,6 +19,10 @@ $nitro-card-tabs-height: 33px;
     height: 100%;
     pointer-events: none;
 
+    .theme-primary {
+        border: $border-width solid $border-color;
+    }
+
     @include media-breakpoint-down(lg) {
         
         .draggable-window {
diff --git a/src/layout/card/NitroCardView.tsx b/src/layout/card/NitroCardView.tsx
index aaf4178a..f44ee67f 100644
--- a/src/layout/card/NitroCardView.tsx
+++ b/src/layout/card/NitroCardView.tsx
@@ -11,7 +11,7 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
         <NitroCardContextProvider value={ { theme, simple } }>
             <div className="nitro-card-responsive">
                 <DraggableWindow { ...rest }>
-                    <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
+                    <div className={ `nitro-card d-flex flex-column rounded shadow overflow-hidden theme-${theme} ${className}` }>
                         { children }
                     </div>
                 </DraggableWindow>
diff --git a/src/views/friends/FriendsMessageHandler.tsx b/src/views/friends/FriendsMessageHandler.tsx
index 579230a5..e1e055f2 100644
--- a/src/views/friends/FriendsMessageHandler.tsx
+++ b/src/views/friends/FriendsMessageHandler.tsx
@@ -1,6 +1,8 @@
 import { FriendListFragmentEvent, FriendListUpdateEvent, FriendRequestsEvent, GetFriendRequestsComposer, MessengerInitEvent, NewConsoleMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
+import { GetSessionDataManager } from '../../api';
 import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
+import { MessengerChatMessage } from './common/MessengerChatMessage';
 import { MessengerSettings } from './common/MessengerSettings';
 import { useFriendsContext } from './context/FriendsContext';
 import { FriendsActions } from './reducers/FriendsReducer';
@@ -68,17 +70,17 @@ export const FriendsMessageHandler: FC<{}> = props =>
     {
         const parser = event.getParser();
 
-        const activeChat = activeChats.find(c => c.friendId === parser.senderId);
+        let userId = parser.senderId;
 
-        if(activeChat)
-        {
+        if(userId === GetSessionDataManager().userId) userId = 0;
 
-        }
-        else
-        {
-
-        }
-    }, [ friendsState, dispatchFriendsState ]);
+        dispatchFriendsState({
+            type: FriendsActions.ADD_CHAT_MESSAGE,
+            payload: {
+                chatMessage: new MessengerChatMessage(MessengerChatMessage.MESSAGE, userId, parser.messageText, parser.secondsSinceSent, parser.extraData)
+            }
+        });
+    }, [ dispatchFriendsState ]);
 
     CreateMessageHook(MessengerInitEvent, onMessengerInitEvent);
     CreateMessageHook(FriendListFragmentEvent, onFriendsFragmentEvent);
diff --git a/src/views/friends/FriendsView.scss b/src/views/friends/FriendsView.scss
index 519d6d1e..3d55929f 100644
--- a/src/views/friends/FriendsView.scss
+++ b/src/views/friends/FriendsView.scss
@@ -3,3 +3,4 @@
 }
 
 @import './views/friend-bar/FriendBarView';
+@import './views/messenger/FriendsMessengerView';
diff --git a/src/views/friends/FriendsView.tsx b/src/views/friends/FriendsView.tsx
index 3e593a88..0c9415f7 100644
--- a/src/views/friends/FriendsView.tsx
+++ b/src/views/friends/FriendsView.tsx
@@ -95,7 +95,7 @@ export const FriendsView: FC<{}> = props =>
     return (
         <FriendsContextProvider value={ { friendsState, dispatchFriendsState } }>
             <FriendsMessageHandler />
-            { isReady && createPortal(<FriendBarView />, document.getElementById('toolbar-friend-bar-container')) }
+            { isReady && createPortal(<FriendBarView onlineFriends={ onlineFriends } />, document.getElementById('toolbar-friend-bar-container')) }
             { isListVisible && <FriendsListView onlineFriends={ onlineFriends } offlineFriends={ offlineFriends } friendRequests={ requests } onCloseClick={ () => setIsListVisible(false) } /> }
             <FriendsMessengerView />
         </FriendsContextProvider>
diff --git a/src/views/friends/common/MessengerChat.ts b/src/views/friends/common/MessengerChat.ts
index 963a941b..2369a7c9 100644
--- a/src/views/friends/common/MessengerChat.ts
+++ b/src/views/friends/common/MessengerChat.ts
@@ -1,20 +1,24 @@
 import { MessengerChatMessage } from './MessengerChatMessage';
+import { MessengerChatMessageGroup } from './MessengerChatMessageGroup';
 export class MessengerChat
 {
     private _friendId: number;
     private _isRead: boolean;
-    private _messages: MessengerChatMessage[];
+    private _messageGroups: MessengerChatMessageGroup[];
 
     constructor(friendId: number, isRead: boolean = true)
     {
         this._friendId = friendId;
         this._isRead = isRead;
-        this._messages = [];
+        this._messageGroups = [];
     }
 
-    public addMessage(type: number, senderId: number, message: string, sentAt: number, extraData?: string): void
+    public addMessage(message: MessengerChatMessage): void
     {
-        this._messages.push(new MessengerChatMessage(type, senderId, message, sentAt, extraData));
+        if(!this.lastMessageGroup || this.lastMessageGroup.userId !== message.senderId) this._messageGroups.push(new MessengerChatMessageGroup(message.senderId));
+
+        this.lastMessageGroup.addMessage(message);
+        this._isRead = false;
     }
 
     public get friendId(): number
@@ -27,8 +31,13 @@ export class MessengerChat
         return this._isRead;
     }
 
-    public get messages(): MessengerChatMessage[]
+    public get messageGroups(): MessengerChatMessageGroup[]
     {
-        return this._messages;
+        return this._messageGroups;
+    }
+
+    public get lastMessageGroup(): MessengerChatMessageGroup
+    {
+        return this._messageGroups[this._messageGroups.length - 1];
     }
 }
diff --git a/src/views/friends/common/MessengerChatMessage.ts b/src/views/friends/common/MessengerChatMessage.ts
index 0b410216..5ded0a7d 100644
--- a/src/views/friends/common/MessengerChatMessage.ts
+++ b/src/views/friends/common/MessengerChatMessage.ts
@@ -1,5 +1,9 @@
 export class MessengerChatMessage
 {
+    public static MESSAGE: number = 0;
+    public static ROOM_INVITE: number = 1;
+    public static SYSTEM_NOTIFICATION: number = 2;
+
     private _type: number;
     private _senderId: number;
     private _message: string;
diff --git a/src/views/friends/common/MessengerChatMessageGroup.ts b/src/views/friends/common/MessengerChatMessageGroup.ts
new file mode 100644
index 00000000..0bb27fe3
--- /dev/null
+++ b/src/views/friends/common/MessengerChatMessageGroup.ts
@@ -0,0 +1,28 @@
+import { MessengerChatMessage } from './MessengerChatMessage';
+
+export class MessengerChatMessageGroup
+{
+    private _userId: number;
+    private _messages: MessengerChatMessage[];
+
+    constructor(userId: number)
+    {
+        this._userId = userId;
+        this._messages = [];
+    }
+
+    public addMessage(message: MessengerChatMessage): void
+    {
+        this._messages.push(message);
+    }
+
+    public get userId(): number
+    {
+        return this._userId;
+    }
+
+    public get messages(): MessengerChatMessage[]
+    {
+        return this._messages;
+    }
+}
diff --git a/src/views/friends/reducers/FriendsReducer.tsx b/src/views/friends/reducers/FriendsReducer.tsx
index 1b1ab612..f66ce6fd 100644
--- a/src/views/friends/reducers/FriendsReducer.tsx
+++ b/src/views/friends/reducers/FriendsReducer.tsx
@@ -1,6 +1,7 @@
 import { FriendListUpdateParser, FriendParser, FriendRequestData } from '@nitrots/nitro-renderer';
 import { Reducer } from 'react';
 import { MessengerChat } from '../common/MessengerChat';
+import { MessengerChatMessage } from '../common/MessengerChatMessage';
 import { MessengerFriend } from '../common/MessengerFriend';
 import { MessengerRequest } from '../common/MessengerRequest';
 import { MessengerSettings } from '../common/MessengerSettings';
@@ -29,6 +30,8 @@ export interface IFriendsAction
         update?: FriendListUpdateParser;
         requests?: FriendRequestData[];
         chats?: MessengerChat[];
+        chatMessage?: MessengerChatMessage;
+        numberValue?: number;
     }
 }
 
@@ -40,6 +43,7 @@ export class FriendsActions
     public static PROCESS_UPDATE: string = 'FA_PROCESS_UPDATE';
     public static PROCESS_REQUESTS: string = 'FA_PROCESS_REQUESTS';
     public static SET_ACTIVE_CHATS: string = 'FA_SET_ACTIVE_CHATS';
+    public static ADD_CHAT_MESSAGE: string = 'FA_ADD_CHAT_MESSAGE';
 }
 
 export const initialFriends: IFriendsState = {
@@ -143,6 +147,24 @@ export const FriendsReducer: Reducer<IFriendsState, IFriendsAction> = (state, ac
             
             return { ...state, activeChats };
         }
+        case FriendsActions.ADD_CHAT_MESSAGE: {
+            const message = action.payload.chatMessage;
+            const toFriendId = action.payload.numberValue;
+
+            const activeChats = Array.from(state.activeChats);
+
+            let activeChatIndex = activeChats.findIndex(c => c.friendId === toFriendId ? toFriendId : message.senderId);
+
+            if(activeChatIndex === -1)
+            {
+                activeChats.push(new MessengerChat(message.senderId, false));
+                activeChatIndex = activeChats.length - 1;
+            }
+
+            activeChats[activeChatIndex].addMessage(message);
+
+            return { ...state, activeChats };
+        }
         default:
             return state;
     }
diff --git a/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx b/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx
index b845f530..40873386 100644
--- a/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx
+++ b/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx
@@ -1,6 +1,6 @@
 import { FollowFriendMessageComposer, MouseEventType, UserProfileComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { LocalizeText } from '../../../../api';
+import { LocalizeText, OpenMessengerChat } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { FriendBarItemViewProps } from './FriendBarItemView.types';
@@ -16,6 +16,13 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
         SendMessageHook(new FollowFriendMessageComposer(friend.id));
     }, [ friend ]);
 
+    const openMessengerChat = useCallback(() =>
+    {
+        if(!friend) return;
+        
+        OpenMessengerChat(friend.id);
+    }, [ friend ]);
+
     const openProfile = useCallback(() =>
     {
         SendMessageHook(new UserProfileComposer(friend.id));
@@ -59,7 +66,7 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
             <div className="text-truncate">{ friend.name }</div>
             { isVisible &&
                 <div className="d-flex justify-content-between">
-                    <i className="icon icon-fb-chat cursor-pointer" />
+                    <i onClick={ openMessengerChat } className="icon icon-fb-chat cursor-pointer" />
                     { friend.followingAllowed && <i onClick={ followFriend } className="icon icon-fb-visit cursor-pointer" /> }
                     <i onClick={ openProfile } className="icon icon-fb-profile cursor-pointer" />
                 </div> }
diff --git a/src/views/friends/views/friend-bar/FriendBarView.tsx b/src/views/friends/views/friend-bar/FriendBarView.tsx
index dd7c698b..a0347c94 100644
--- a/src/views/friends/views/friend-bar/FriendBarView.tsx
+++ b/src/views/friends/views/friend-bar/FriendBarView.tsx
@@ -1,20 +1,14 @@
 import { FC, useMemo, useState } from 'react';
-import { useFriendsContext } from '../../context/FriendsContext';
 import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView';
 import { FriendBarViewProps } from './FriendBarView.types';
 
 export const FriendBarView: FC<FriendBarViewProps> = props =>
 {
-    const { friendsState = null } = useFriendsContext();
-    const { friends = null } = friendsState;
+    const { onlineFriends = null } = props;
+
     const [ indexOffset, setIndexOffset ] = useState(0);
     const [ maxDisplayCount, setMaxDisplayCount ] = useState(3);
 
-    const onlineFriends = useMemo(() =>
-    {
-        return friends.filter(friend => friend.online);
-    }, [ friends ]);
-
     const canDecreaseIndex = useMemo(() =>
     {
         if(indexOffset === 0) return false;
diff --git a/src/views/friends/views/friend-bar/FriendBarView.types.ts b/src/views/friends/views/friend-bar/FriendBarView.types.ts
index f47af57f..61a040ce 100644
--- a/src/views/friends/views/friend-bar/FriendBarView.types.ts
+++ b/src/views/friends/views/friend-bar/FriendBarView.types.ts
@@ -1,4 +1,5 @@
+import { MessengerFriend } from './../../common/MessengerFriend';
 export interface FriendBarViewProps
 {
-    
+    onlineFriends: MessengerFriend[];
 }
diff --git a/src/views/friends/views/friend-item/FriendsListItemView.tsx b/src/views/friends/views/friend-item/FriendsListItemView.tsx
deleted file mode 100644
index 2edafd90..00000000
--- a/src/views/friends/views/friend-item/FriendsListItemView.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { SetRelationshipStatusComposer } from '@nitrots/nitro-renderer';
-import { FollowFriendMessageComposer } from '@nitrots/nitro-renderer/src/nitro/communication/messages/outgoing/friendlist/FollowFriendMessageComposer';
-import { FC, useCallback, useState } from 'react';
-import { LocalizeText, OpenMessengerChat } from '../../../../api';
-import { SendMessageHook } from '../../../../hooks';
-import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
-import { MessengerFriend } from '../../common/MessengerFriend';
-import { FriendsListItemViewProps } from './FriendsListItemView.types';
-
-export const FriendsListItemView: FC<FriendsListItemViewProps> = props =>
-{
-    const { friend = null } = props;
-
-    const [ isExpanded, setIsExpanded ] = useState<boolean>(false);
-
-    const followFriend = useCallback(() =>
-    {
-        if(!friend) return;
-        
-        SendMessageHook(new FollowFriendMessageComposer(friend.id));
-    }, [ friend ]);
-
-    const openMessengerChat = useCallback(() =>
-    {
-        if(!friend) return;
-        
-        OpenMessengerChat(friend.id);
-    }, [ friend ]);
-
-    const getCurrentRelationshipName = useCallback(() =>
-    {
-        if(!friend) return 'none';
-
-        switch(friend.relationshipStatus)
-        {
-            case MessengerFriend.RELATIONSHIP_HEART: return 'heart';
-            case MessengerFriend.RELATIONSHIP_SMILE: return 'smile';
-            case MessengerFriend.RELATIONSHIP_BOBBA: return 'bobba';
-            default: return 'none';
-        }
-    }, [ friend ]);
-
-    const updateRelationship = useCallback((type: number) =>
-    {
-        if(type !== friend.relationshipStatus) SendMessageHook(new SetRelationshipStatusComposer(friend.id, type));
-        
-        setIsExpanded(false);
-    }, [ friend ]);
-
-    if(!friend) return null;
-
-    return (
-        <div className="px-2 py-1 d-flex gap-1 align-items-center">
-            <UserProfileIconView userId={ friend.id } />
-            <div>{ friend.name }</div>
-            <div className="ms-auto d-flex align-items-center gap-1">
-                { !isExpanded && <>
-                    { friend.followingAllowed && <i className="icon icon-friendlist-follow cursor-pointer" onClick={ followFriend } title={ LocalizeText('friendlist.tip.follow') } /> }
-                    { friend.online && <i className="icon icon-friendlist-chat cursor-pointer" onClick={ openMessengerChat } title={ LocalizeText('friendlist.tip.im') } /> }
-                    <i className={ 'icon cursor-pointer icon-relationship-' + getCurrentRelationshipName() } onClick={ () => setIsExpanded(true) } title={ LocalizeText('infostand.link.relationship') } />
-                    </> }
-                { isExpanded && <>
-                    <i className="icon icon-relationship-heart cursor-pointer" onClick={ () => updateRelationship(MessengerFriend.RELATIONSHIP_HEART) } />
-                    <i className="icon icon-relationship-smile cursor-pointer" onClick={ () => updateRelationship(MessengerFriend.RELATIONSHIP_SMILE) } />
-                    <i className="icon icon-relationship-bobba cursor-pointer" onClick={ () => updateRelationship(MessengerFriend.RELATIONSHIP_BOBBA) } />
-                    <i className="icon icon-relationship-none cursor-pointer" onClick={ () => updateRelationship(MessengerFriend.RELATIONSHIP_NONE) } />
-                </> }
-            </div>
-        </div>
-    );
-}
diff --git a/src/views/friends/views/friend-item/FriendsListItemView.types.ts b/src/views/friends/views/friend-item/FriendsListItemView.types.ts
deleted file mode 100644
index df44d3b5..00000000
--- a/src/views/friends/views/friend-item/FriendsListItemView.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { MessengerFriend } from '../../common/MessengerFriend';
-
-export interface FriendsListItemViewProps
-{
-    friend: MessengerFriend;
-}
diff --git a/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx b/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx
index bd9203f1..60b2066a 100644
--- a/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx
+++ b/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx
@@ -1,6 +1,6 @@
 import { FollowFriendMessageComposer, SetRelationshipStatusComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { LocalizeText } from '../../../../api';
+import { LocalizeText, OpenMessengerChat } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
 import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
 import { MessengerFriend } from '../../common/MessengerFriend';
@@ -19,6 +19,13 @@ export const FriendsGroupItemView: FC<FriendsGroupItemViewProps> = props =>
         SendMessageHook(new FollowFriendMessageComposer(friend.id));
     }, [ friend ]);
 
+    const openMessengerChat = useCallback(() =>
+    {
+        if(!friend) return;
+        
+        OpenMessengerChat(friend.id);
+    }, [ friend ]);
+
     const getCurrentRelationshipName = useCallback(() =>
     {
         if(!friend) return 'none';
@@ -48,7 +55,7 @@ export const FriendsGroupItemView: FC<FriendsGroupItemViewProps> = props =>
             <div className="ms-auto d-flex align-items-center gap-1">
                 { !isExpanded && <>
                     { friend.followingAllowed && <i onClick={ followFriend } className="icon icon-friendlist-follow cursor-pointer" title={ LocalizeText('friendlist.tip.follow') } /> }
-                    { friend.online && <i className="icon icon-friendlist-chat cursor-pointer" title={ LocalizeText('friendlist.tip.im') } /> }
+                    { friend.online && <i className="icon icon-friendlist-chat cursor-pointer" onClick={ openMessengerChat } title={ LocalizeText('friendlist.tip.im') } /> }
                     <i className={ 'icon cursor-pointer icon-relationship-' + getCurrentRelationshipName() } onClick={ () => setIsExpanded(true) } title={ LocalizeText('infostand.link.relationship') } />
                     </> }
                 { isExpanded && <>
diff --git a/src/views/friends/views/messenger/FriendsMessengerView.scss b/src/views/friends/views/messenger/FriendsMessengerView.scss
new file mode 100644
index 00000000..429f64cf
--- /dev/null
+++ b/src/views/friends/views/messenger/FriendsMessengerView.scss
@@ -0,0 +1,71 @@
+.nitro-friends-messenger {
+    width: 300px;
+
+    .friend-head {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        overflow: hidden;
+
+        .avatar-image {
+            position: absolute;
+            margin-left: -27px;
+            margin-top: -27px;
+        }
+    }
+
+    .chat-title {
+        margin-top: -21px;
+    }
+
+    .chat-messages {
+        height: 200px;
+        min-height: 200px;
+        overflow-y: auto;
+
+        .message-avatar {
+            position: relative;
+            overflow: hidden;
+            width: 50px;
+            height: 50px;
+
+            .avatar-image {
+                position: absolute;
+                margin-left: -22px;
+                margin-top: -25px;
+            }
+        }
+
+        .messages-group-left {
+            position: relative;
+            
+            &:before {
+                position: absolute;
+                content: ' ';
+                width: 0;
+                height: 0;
+                border-right: 8px solid rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
+                border-top: 8px solid transparent;
+                border-bottom: 8px solid transparent;
+                top: 10px;
+                left: -8px;
+            }
+        }
+
+        .messages-group-right {
+            position: relative;
+            
+            &:before {
+                position: absolute;
+                content: ' ';
+                width: 0;
+                height: 0;
+                border-left: 8px solid rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
+                border-top: 8px solid transparent;
+                border-bottom: 8px solid transparent;
+                top: 10px;
+                right: -8px;
+            }
+        }
+    }
+}
diff --git a/src/views/friends/views/messenger/FriendsMessengerView.tsx b/src/views/friends/views/messenger/FriendsMessengerView.tsx
index b64ed9d2..c3679025 100644
--- a/src/views/friends/views/messenger/FriendsMessengerView.tsx
+++ b/src/views/friends/views/messenger/FriendsMessengerView.tsx
@@ -1,20 +1,25 @@
-import { ILinkEventTracker, NitroEvent } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useState } from 'react';
-import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
+import { FollowFriendMessageComposer, ILinkEventTracker, NitroEvent, SendMessageComposer, UserProfileComposer } from '@nitrots/nitro-renderer';
+import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AddEventLinkTracker, GetSessionDataManager, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
 import { FriendsEvent } from '../../../../events/friends/FriendsEvent';
-import { useUiEvent } from '../../../../hooks';
+import { SendMessageHook, useUiEvent } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { MessengerChat } from '../../common/MessengerChat';
+import { MessengerChatMessage } from '../../common/MessengerChatMessage';
 import { useFriendsContext } from '../../context/FriendsContext';
 import { FriendsActions } from '../../reducers/FriendsReducer';
 
 export const FriendsMessengerView: FC<{}> = props =>
 {
     const { friendsState = null, dispatchFriendsState = null } = useFriendsContext();
-    const { activeChats = [] } = friendsState;
+    const { activeChats = [], friends = [] } = friendsState;
 
     const [ isVisible, setIsVisible ] = useState(false);
-    const [ activeChatIndex, setActiveChatIndex ] = useState(0);
+    const [ selectedChatIndex, setSelectedChatIndex ] = useState(0);
+    const [ message, setMessage ] = useState('');
+
+    const messagesBox = useRef<HTMLDivElement>();
     
     const onNitroEvent = useCallback((event: NitroEvent) =>
     {
@@ -35,11 +40,11 @@ export const FriendsMessengerView: FC<{}> = props =>
     const linkReceived = useCallback((url: string) =>
     {
         const parts = url.split('/');
-        console.log(parts);
+
         if(parts.length < 3) return;
 
         const friendId = parseInt(parts[2]);
-        console.log(friendId);
+
         let existingChatIndex = activeChats.findIndex(c => c.friendId === friendId);
 
         if(existingChatIndex === -1)
@@ -57,10 +62,35 @@ export const FriendsMessengerView: FC<{}> = props =>
             existingChatIndex = clonedActiveChats.length - 1;
         }
 
-        setActiveChatIndex(existingChatIndex);
+        setSelectedChatIndex(existingChatIndex);
         setIsVisible(true);
     }, [ activeChats, dispatchFriendsState ]);
 
+    const getFriendFigure = useCallback((id: number) =>
+    {
+        const friend = friends.find(f => f.id === id);
+
+        if(!friend) return null;
+
+        return friend.figure;
+    }, [ friends ]);
+
+    const selectedChat = useMemo(() =>
+    {
+        return activeChats[selectedChatIndex];
+    }, [ activeChats, selectedChatIndex ]);
+
+    const selectedChatFriend = useMemo(() =>
+    {
+        if(!selectedChat) return null;
+
+        const friend = friends.find(f => f.id === selectedChat.friendId);
+
+        if(!friend) return null;
+
+        return friend;
+    }, [ friends, selectedChat ]);
+
     useEffect(() =>
     {
         const linkTracker: ILinkEventTracker = {
@@ -73,12 +103,99 @@ export const FriendsMessengerView: FC<{}> = props =>
         return () => RemoveLinkEventTracker(linkTracker);
     }, [ linkReceived ]);
 
+    useEffect(() =>
+    {
+        if(!messagesBox || !messagesBox.current) return;
+        
+        messagesBox.current.scrollTop = messagesBox.current.scrollHeight;
+
+    }, [ selectedChat ]);
+
+    const followFriend = useCallback(() =>
+    {
+        SendMessageHook(new FollowFriendMessageComposer(selectedChatFriend.id));
+    }, [ selectedChatFriend ]);
+
+    const openProfile = useCallback(() =>
+    {
+        SendMessageHook(new UserProfileComposer(selectedChatFriend.id));
+    }, [ selectedChatFriend ]);
+
+    const sendMessage = useCallback(() =>
+    {
+        if(message.length === 0) return;
+
+        SendMessageHook(new SendMessageComposer(selectedChat.friendId, message));
+
+        dispatchFriendsState({
+            type: FriendsActions.ADD_CHAT_MESSAGE,
+            payload: {
+                chatMessage: new MessengerChatMessage(MessengerChatMessage.MESSAGE, 0, message, (new Date().getMilliseconds())),
+                numberValue: selectedChat.friendId
+            }
+        });
+        setMessage('');
+    }, [ selectedChat, message, dispatchFriendsState ]);
+
+    const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) =>
+    {
+        if(event.key !== 'Enter') return;
+
+        sendMessage();
+    }, [ sendMessage ]);
+
     if(!isVisible) return null;
 
     return (<NitroCardView className="nitro-friends-messenger" simple={ true }>
-                <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ () => {} } />
-                <NitroCardContentView className="p-0">
-                    
+                <NitroCardHeaderView headerText={ LocalizeText('messenger.window.title', ['OPEN_CHAT_COUNT'], [activeChats.length.toString()]) } onCloseClick={ () => setIsVisible(false) } />
+                <NitroCardContentView>
+                    <div className="d-flex gap-2 overflow-auto pb-1">
+                        { activeChats && activeChats.map((chat, index) =>
+                        {
+                            return <div key={ index } className="friend-head bg-muted rounded flex-shrink-0 cursor-pointer" onClick={ () => setSelectedChatIndex(index) }>
+                                <AvatarImageView figure={ getFriendFigure(chat.friendId) } headOnly={true} direction={3} />
+                            </div>;
+                        }) }
+                    </div>
+                    <hr className="bg-dark mt-3 mb-2" />
+                    { selectedChat && selectedChatFriend && <>
+                        <div className="text-black chat-title bg-light pe-2 position-absolute">{ LocalizeText('messenger.window.separator', ['FRIEND_NAME'], [ selectedChatFriend.name ]) }</div>
+                        <div className="d-flex gap-2 mb-2">
+                            <div className="btn-group">
+                                <button className="btn btn-sm btn-primary" onClick={ followFriend }>
+                                    <i className="icon icon-friendlist-follow" />
+                                </button>
+                                <button className="btn btn-sm btn-primary" onClick={ openProfile }>
+                                    <i className="icon icon-user-profile" />
+                                </button>
+                            </div>
+                            <button className="btn btn-sm btn-danger">{ LocalizeText('messenger.window.button.report') }</button>
+                            <button className="btn btn-sm btn-primary ms-auto"><i className="fas fa-times" /></button>
+                        </div>
+                        <div ref={ messagesBox } className="bg-muted p-2 rounded chat-messages mb-2 d-flex flex-column">
+                            { selectedChat.messageGroups.map((group, groupIndex) =>
+                            {
+                                return <div key={ groupIndex } className={ 'd-flex gap-2 w-100 justify-content-' + (group.userId === 0 ? 'end' : 'start') }>
+                                    { group.userId !== 0 && <div className="message-avatar flex-shrink-0">
+                                        <AvatarImageView figure={ selectedChatFriend.figure } direction={ 2 } />
+                                    </div> }
+                                    <div className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (group.userId === 0 ? 'right' : 'left') }>
+                                        { group.messages.map((message, messageIndex) =>
+                                        {
+                                            return <div key={ messageIndex } className="text-break">{ message.message }</div>
+                                        }) }
+                                    </div>
+                                    { group.userId === 0 && <div className="message-avatar flex-shrink-0">
+                                        <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
+                                    </div> }
+                                </div>;
+                            }) }
+                        </div>
+                        <div className="d-flex gap-2">
+                            <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('messenger.window.input.default', ['FRIEND_NAME'], [ selectedChatFriend.name ]) } value={ message } onChange={ (e) => setMessage(e.target.value) } onKeyDown={ onKeyDown } />
+                            <button className="btn btn-sm btn-success" onClick={ sendMessage }>{ LocalizeText('widgets.chatinput.say') }</button>
+                        </div>
+                    </> }
                 </NitroCardContentView>
             </NitroCardView>);
 };

From 0ade1ee7cb4bee83e69b91d41324244d72a25b79 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sat, 18 Sep 2021 03:05:47 -0300
Subject: [PATCH 09/31] Remove Console Log

---
 src/api/friends/OpenMessengerChat.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/api/friends/OpenMessengerChat.ts b/src/api/friends/OpenMessengerChat.ts
index e5c685cd..08520b1b 100644
--- a/src/api/friends/OpenMessengerChat.ts
+++ b/src/api/friends/OpenMessengerChat.ts
@@ -2,6 +2,5 @@ import { CreateLinkEvent } from '..';
 
 export function OpenMessengerChat(friendId: number): void
 {
-    console.log(`friends/messenger/${friendId}`);
     CreateLinkEvent(`friends/messenger/${friendId}`);
 }

From a54be45a4ff279e7fe148237f3b1c59a9eb40c9e Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sat, 18 Sep 2021 04:09:49 -0300
Subject: [PATCH 10/31] Updates

---
 .../friendlist/icons/icon_new_message.png     | Bin 0 -> 177 bytes
 .../images/friendlist/icons/icon_warning.png  | Bin 0 -> 225 bytes
 src/assets/styles/icons.scss                  |  12 ++++
 src/views/friends/FriendsMessageHandler.tsx   |   3 +-
 src/views/friends/common/MessengerChat.ts     |  16 +++--
 .../friends/common/MessengerChatMessage.ts    |   3 +-
 .../common/MessengerChatMessageGroup.ts       |   9 ++-
 src/views/friends/reducers/FriendsReducer.tsx |  24 ++++++-
 .../views/messenger/FriendsMessengerView.scss |   9 ++-
 .../views/messenger/FriendsMessengerView.tsx  |  61 +++++++++++++-----
 10 files changed, 110 insertions(+), 27 deletions(-)
 create mode 100644 src/assets/images/friendlist/icons/icon_new_message.png
 create mode 100644 src/assets/images/friendlist/icons/icon_warning.png

diff --git a/src/assets/images/friendlist/icons/icon_new_message.png b/src/assets/images/friendlist/icons/icon_new_message.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7a31fa00dc9ba26150a1722162be85e55cfaa45
GIT binary patch
literal 177
zcmeAS@N?(olHy`uVBq!ia0vp^d_XL~!3HGNrubO_sR~aQ#}Es_vlAS-8Vq<?KDXVo
z`N8oq=)+yRW5M??h`TJ4_#&Vz$|AmvTk*2q)S#|sb9VD6JM3-R$v)jv)SByHu1}Zk
zU!IuuB{za2wq9FxBbZ~~zd7$$b)E1@ubFywPs_x|85<gPZrga=_<U7v#l&-G&FX!s
cX3I}6*T11JxaV}C7SIh0p00i_>zopr090#4fdBvi

literal 0
HcmV?d00001

diff --git a/src/assets/images/friendlist/icons/icon_warning.png b/src/assets/images/friendlist/icons/icon_warning.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a3ffcf9efa03104936b6823bd7435cff4b4a610
GIT binary patch
literal 225
zcmeAS@N?(olHy`uVBq!ia0vp^;y^6Q!3HGPJ}O-eq&N#aB8wRq_zr_G<MI3zDL}!=
zo-U3d6}PrdHRNkB;Bc*$aLa$A7;DN`s-&3P%6@Ey{jZ9J7q;Dd<nQuJ;*&hn{p)tE
zA`TBe-&i(*N!392!6DlXYP{;#j{KWkn$o}atwd0D&fA0c-xRJ_{&7m~yH(TrHy>LB
zeq{8kw;XW)eZ?&6#hu4Hmp!{Cm!HhG?puX)X7n1Ls;kD~hxUIs<=V=BrCNP;;4|i)
Xl&z_ce_Xf+bRL7JtDnm{r-UW|QKMd}

literal 0
HcmV?d00001

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index a5108a7c..3d8f14ab 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -693,6 +693,18 @@
         height: 16px;
     }
 
+    &.icon-friendlist-warning {
+        background: url('../images/friendlist/icons/icon_warning.png');
+        width: 23px;
+        height: 21px;
+    }
+
+    &.icon-friendlist-new-message {
+        background: url('../images/friendlist/icons/icon_new_message.png');
+        width: 14px;
+        height: 16px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }
diff --git a/src/views/friends/FriendsMessageHandler.tsx b/src/views/friends/FriendsMessageHandler.tsx
index e1e055f2..479fc961 100644
--- a/src/views/friends/FriendsMessageHandler.tsx
+++ b/src/views/friends/FriendsMessageHandler.tsx
@@ -77,7 +77,8 @@ export const FriendsMessageHandler: FC<{}> = props =>
         dispatchFriendsState({
             type: FriendsActions.ADD_CHAT_MESSAGE,
             payload: {
-                chatMessage: new MessengerChatMessage(MessengerChatMessage.MESSAGE, userId, parser.messageText, parser.secondsSinceSent, parser.extraData)
+                chatMessage: new MessengerChatMessage(MessengerChatMessage.MESSAGE, userId, parser.messageText, parser.secondsSinceSent, parser.extraData),
+                boolValue: true
             }
         });
     }, [ dispatchFriendsState ]);
diff --git a/src/views/friends/common/MessengerChat.ts b/src/views/friends/common/MessengerChat.ts
index 2369a7c9..4b49d0ae 100644
--- a/src/views/friends/common/MessengerChat.ts
+++ b/src/views/friends/common/MessengerChat.ts
@@ -6,19 +6,25 @@ export class MessengerChat
     private _isRead: boolean;
     private _messageGroups: MessengerChatMessageGroup[];
 
-    constructor(friendId: number, isRead: boolean = true)
+    constructor(friendId: number)
     {
         this._friendId = friendId;
-        this._isRead = isRead;
+        this._isRead = true;
         this._messageGroups = [];
     }
 
-    public addMessage(message: MessengerChatMessage): void
+    public addMessage(message: MessengerChatMessage, setAsNotRead: boolean = true, isSystem: boolean = false): void
     {
-        if(!this.lastMessageGroup || this.lastMessageGroup.userId !== message.senderId) this._messageGroups.push(new MessengerChatMessageGroup(message.senderId));
+        if(!this.lastMessageGroup || this.lastMessageGroup.userId !== message.senderId || isSystem || this.lastMessageGroup.isSystem) this._messageGroups.push(new MessengerChatMessageGroup(message.senderId, isSystem));
 
         this.lastMessageGroup.addMessage(message);
-        this._isRead = false;
+        
+        if(setAsNotRead) this._isRead = false;
+    }
+
+    public read(): void
+    {
+        this._isRead = true;
     }
 
     public get friendId(): number
diff --git a/src/views/friends/common/MessengerChatMessage.ts b/src/views/friends/common/MessengerChatMessage.ts
index 5ded0a7d..6a0aced7 100644
--- a/src/views/friends/common/MessengerChatMessage.ts
+++ b/src/views/friends/common/MessengerChatMessage.ts
@@ -2,7 +2,8 @@ export class MessengerChatMessage
 {
     public static MESSAGE: number = 0;
     public static ROOM_INVITE: number = 1;
-    public static SYSTEM_NOTIFICATION: number = 2;
+    public static SECURITY_ALERT: number = 2;
+    public static STATUS_ALERT: number = 3;
 
     private _type: number;
     private _senderId: number;
diff --git a/src/views/friends/common/MessengerChatMessageGroup.ts b/src/views/friends/common/MessengerChatMessageGroup.ts
index 0bb27fe3..0fad7be8 100644
--- a/src/views/friends/common/MessengerChatMessageGroup.ts
+++ b/src/views/friends/common/MessengerChatMessageGroup.ts
@@ -4,11 +4,13 @@ export class MessengerChatMessageGroup
 {
     private _userId: number;
     private _messages: MessengerChatMessage[];
+    private _isSystem: boolean;
 
-    constructor(userId: number)
+    constructor(userId: number, isSystem: boolean)
     {
         this._userId = userId;
         this._messages = [];
+        this._isSystem = isSystem;
     }
 
     public addMessage(message: MessengerChatMessage): void
@@ -25,4 +27,9 @@ export class MessengerChatMessageGroup
     {
         return this._messages;
     }
+
+    public get isSystem(): boolean
+    {
+        return this._isSystem;
+    }
 }
diff --git a/src/views/friends/reducers/FriendsReducer.tsx b/src/views/friends/reducers/FriendsReducer.tsx
index f66ce6fd..82f2e734 100644
--- a/src/views/friends/reducers/FriendsReducer.tsx
+++ b/src/views/friends/reducers/FriendsReducer.tsx
@@ -19,6 +19,7 @@ export interface IFriendsState
     friends: MessengerFriend[];
     requests: MessengerRequest[];
     activeChats: MessengerChat[];
+    firstChatEverOpen: boolean;
 }
 
 export interface IFriendsAction
@@ -32,6 +33,7 @@ export interface IFriendsAction
         chats?: MessengerChat[];
         chatMessage?: MessengerChatMessage;
         numberValue?: number;
+        boolValue?: boolean;
     }
 }
 
@@ -43,6 +45,7 @@ export class FriendsActions
     public static PROCESS_UPDATE: string = 'FA_PROCESS_UPDATE';
     public static PROCESS_REQUESTS: string = 'FA_PROCESS_REQUESTS';
     public static SET_ACTIVE_CHATS: string = 'FA_SET_ACTIVE_CHATS';
+    public static SET_CHAT_READ: string = 'FA_SET_CHAT_READ';
     public static ADD_CHAT_MESSAGE: string = 'FA_ADD_CHAT_MESSAGE';
 }
 
@@ -50,7 +53,8 @@ export const initialFriends: IFriendsState = {
     settings: null,
     friends: [],
     requests: [],
-    activeChats: []
+    activeChats: [],
+    firstChatEverOpen: false
 }
 
 export const FriendsReducer: Reducer<IFriendsState, IFriendsAction> = (state, action) =>
@@ -145,11 +149,25 @@ export const FriendsReducer: Reducer<IFriendsState, IFriendsAction> = (state, ac
         case FriendsActions.SET_ACTIVE_CHATS: {
             const activeChats = (action.payload.chats || []);
             
+            if(!state.firstChatEverOpen && activeChats.length > 0) activeChats[0].addMessage(new MessengerChatMessage(MessengerChatMessage.SECURITY_ALERT, 0, null, 0), false, true);
+            
+            return { ...state, activeChats, firstChatEverOpen: true };
+        }
+        case FriendsActions.SET_CHAT_READ: {
+            const friendId = action.payload.numberValue;
+            
+            const activeChats = Array.from(state.activeChats);
+
+            let activeChatIndex = activeChats.findIndex(c => c.friendId === friendId);
+
+            if(activeChatIndex > -1) activeChats[activeChatIndex].read();
+            
             return { ...state, activeChats };
         }
         case FriendsActions.ADD_CHAT_MESSAGE: {
             const message = action.payload.chatMessage;
             const toFriendId = action.payload.numberValue;
+            const setAsNotRead = action.payload.boolValue;
 
             const activeChats = Array.from(state.activeChats);
 
@@ -157,11 +175,11 @@ export const FriendsReducer: Reducer<IFriendsState, IFriendsAction> = (state, ac
 
             if(activeChatIndex === -1)
             {
-                activeChats.push(new MessengerChat(message.senderId, false));
+                activeChats.push(new MessengerChat(message.senderId));
                 activeChatIndex = activeChats.length - 1;
             }
 
-            activeChats[activeChatIndex].addMessage(message);
+            activeChats[activeChatIndex].addMessage(message, setAsNotRead);
 
             return { ...state, activeChats };
         }
diff --git a/src/views/friends/views/messenger/FriendsMessengerView.scss b/src/views/friends/views/messenger/FriendsMessengerView.scss
index 429f64cf..bbfdb0aa 100644
--- a/src/views/friends/views/messenger/FriendsMessengerView.scss
+++ b/src/views/friends/views/messenger/FriendsMessengerView.scss
@@ -1,5 +1,5 @@
 .nitro-friends-messenger {
-    width: 300px;
+    width: 280px;
 
     .friend-head {
         position: relative;
@@ -7,6 +7,13 @@
         height: 40px;
         overflow: hidden;
 
+        .icon {
+            position: absolute;
+            top: 1px;
+            right: 1px;
+            z-index: 10;
+        }
+
         .avatar-image {
             position: absolute;
             margin-left: -27px;
diff --git a/src/views/friends/views/messenger/FriendsMessengerView.tsx b/src/views/friends/views/messenger/FriendsMessengerView.tsx
index c3679025..882b435f 100644
--- a/src/views/friends/views/messenger/FriendsMessengerView.tsx
+++ b/src/views/friends/views/messenger/FriendsMessengerView.tsx
@@ -50,7 +50,7 @@ export const FriendsMessengerView: FC<{}> = props =>
         if(existingChatIndex === -1)
         {
             const clonedActiveChats = Array.from(activeChats);
-            clonedActiveChats.push(new MessengerChat(friendId, true));
+            clonedActiveChats.push(new MessengerChat(friendId));
 
             dispatchFriendsState({
                 type: FriendsActions.SET_ACTIVE_CHATS,
@@ -75,8 +75,24 @@ export const FriendsMessengerView: FC<{}> = props =>
         return friend.figure;
     }, [ friends ]);
 
-    const selectedChat = useMemo(() =>
+    const selectChat = useCallback((index: number) =>
     {
+        const chat = activeChats[index];
+
+        if(!chat) return;
+
+        dispatchFriendsState({
+            type: FriendsActions.SET_CHAT_READ,
+            payload: {
+                numberValue: chat.friendId
+            }
+        });
+        
+        setSelectedChatIndex(index);
+    }, [ activeChats, dispatchFriendsState ]);
+
+    const selectedChat = useMemo(() =>
+    {        
         return activeChats[selectedChatIndex];
     }, [ activeChats, selectedChatIndex ]);
 
@@ -131,7 +147,8 @@ export const FriendsMessengerView: FC<{}> = props =>
             type: FriendsActions.ADD_CHAT_MESSAGE,
             payload: {
                 chatMessage: new MessengerChatMessage(MessengerChatMessage.MESSAGE, 0, message, (new Date().getMilliseconds())),
-                numberValue: selectedChat.friendId
+                numberValue: selectedChat.friendId,
+                boolValue: false
             }
         });
         setMessage('');
@@ -152,7 +169,8 @@ export const FriendsMessengerView: FC<{}> = props =>
                     <div className="d-flex gap-2 overflow-auto pb-1">
                         { activeChats && activeChats.map((chat, index) =>
                         {
-                            return <div key={ index } className="friend-head bg-muted rounded flex-shrink-0 cursor-pointer" onClick={ () => setSelectedChatIndex(index) }>
+                            return <div key={ index } className="friend-head rounded flex-shrink-0 cursor-pointer bg-muted" onClick={ () => selectChat(index) }>
+                                { !chat.isRead && <i className="icon icon-friendlist-new-message" /> }
                                 <AvatarImageView figure={ getFriendFigure(chat.friendId) } headOnly={true} direction={3} />
                             </div>;
                         }) }
@@ -176,18 +194,31 @@ export const FriendsMessengerView: FC<{}> = props =>
                             { selectedChat.messageGroups.map((group, groupIndex) =>
                             {
                                 return <div key={ groupIndex } className={ 'd-flex gap-2 w-100 justify-content-' + (group.userId === 0 ? 'end' : 'start') }>
-                                    { group.userId !== 0 && <div className="message-avatar flex-shrink-0">
-                                        <AvatarImageView figure={ selectedChatFriend.figure } direction={ 2 } />
-                                    </div> }
-                                    <div className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (group.userId === 0 ? 'right' : 'left') }>
+                                    { group.isSystem && <>
                                         { group.messages.map((message, messageIndex) =>
-                                        {
-                                            return <div key={ messageIndex } className="text-break">{ message.message }</div>
-                                        }) }
-                                    </div>
-                                    { group.userId === 0 && <div className="message-avatar flex-shrink-0">
-                                        <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
-                                    </div> }
+                                            {
+                                                return <div key={ messageIndex } className="text-break">
+                                                    { message.type === MessengerChatMessage.SECURITY_ALERT && <div className="bg-light rounded mb-2 d-flex gap-2 px-2 py-1 small text-muted align-items-center">
+                                                        <i className="icon icon-friendlist-warning flex-shrink-0" />
+                                                        <div>{ LocalizeText('messenger.moderationinfo') }</div>
+                                                    </div> }
+                                                </div>
+                                            }) }
+                                    </> }
+                                    { !group.isSystem && <>
+                                        { group.userId !== 0 && <div className="message-avatar flex-shrink-0">
+                                            <AvatarImageView figure={ selectedChatFriend.figure } direction={ 2 } />
+                                        </div> }
+                                        <div className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (group.userId === 0 ? 'right' : 'left') }>
+                                            { group.messages.map((message, messageIndex) =>
+                                            {
+                                                return <div key={ messageIndex } className="text-break">{ message.message }</div>
+                                            }) }
+                                        </div>
+                                        { group.userId === 0 && <div className="message-avatar flex-shrink-0">
+                                            <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
+                                        </div> }
+                                    </> }
                                 </div>;
                             }) }
                         </div>

From 83df995ce3f005cf11a4e956afb81decceb22005 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sat, 18 Sep 2021 04:31:08 -0400
Subject: [PATCH 11/31] Update alerts

---
 src/App.tsx                                   |   1 +
 ...rtUIEvent.ts => NotificationAlertEvent.ts} |  23 +--
 .../NotificationBubbleEvent.ts                |   2 +-
 .../NotificationCenterAddNotificationEvent.ts |  19 ---
 src/events/notification-center/index.ts       |   4 +-
 src/layout/Layout.scss                        |   1 +
 src/layout/index.ts                           |   1 +
 .../NotificationAlertView.scss                |   8 ++
 .../NotificationAlertView.tsx                 |  17 +++
 .../NotificationAlertView.types.ts            |   7 +
 src/layout/notification-alert/index.ts        |   2 +
 src/views/help/HelpMessageHandler.tsx         |  27 ++++
 src/views/help/HelpView.tsx                   |  11 ++
 src/views/help/common/GetCloseReasonKey.ts    |   8 ++
 src/views/main/MainView.tsx                   |   2 +
 .../NotificationCenterMessageHandler.tsx      | 133 ++++++++++++++----
 .../NotificationCenterView.scss               |   9 --
 .../NotificationCenterView.tsx                |  60 ++++----
 .../common/BroadcastMessageNotification.ts    |   4 -
 .../common/DialogMessageNotification.ts       |  24 ----
 .../common/HotelWillShutdownNotification.ts   |  17 ---
 .../common/MOTDNotification.ts                |  19 ---
 .../common/ModeratorMessageNotification.ts    |  17 ---
 .../common/Notification.ts                    |  49 -------
 .../common/NotificationAlertItem.ts           |  62 ++++++++
 .../common/NotificationAlertType.ts           |   7 +
 ...ationItem.ts => NotificationBubbleItem.ts} |  10 +-
 ...ationType.ts => NotificationBubbleType.ts} |   2 +-
 .../common/NotificationUtilities.ts           |  97 ++++++++-----
 .../common/ProductImageUtility.ts             |  59 ++++++++
 .../context/NotificationCenterContext.tsx     |  14 --
 .../NotificationCenterContext.types.ts        |  13 --
 .../reducers/NotificationCenterReducer.tsx    |  77 ----------
 .../NotificationCenterAlertBase.tsx           |  19 ---
 .../NotificationCenterAlertBase.types.ts      |   5 -
 .../views/alert-layouts/GetAlertLayout.tsx    |  19 +++
 .../NotificationAlertLayoutView.types.ts      |   7 +
 .../default/NotificationDefaultAlertView.tsx  |  35 +++++
 .../NotificationDefaultAlertView.types.ts     |   7 +
 .../event/NotificationEventAlertView.tsx      |  33 +++++
 .../event/NotificationEventAlertView.types.ts |   7 +
 ...NotificationCenterBroadcastMessageView.tsx |  30 ----
 ...icationCenterBroadcastMessageView.types.ts |   7 -
 .../views/bubble-layouts/GetBubbleLayout.tsx  |   8 +-
 .../NotificationBubbleLayoutView.types.ts     |   4 +-
 .../HotelWillShutdownView.tsx                 |  28 ----
 .../HotelWillShutdownView.types.ts            |   7 -
 .../ModeratorMessageView.tsx                  |  33 -----
 .../ModeratorMessageView.types.ts             |   7 -
 .../views/motd/NotificationCenterMotdView.tsx |  10 --
 .../motd/NotificationCenterMotdView.types.ts  |   7 -
 .../tray-item/NotificationTrayItemView.tsx    |  22 ---
 .../NotificationTrayItemView.types.ts         |   7 -
 53 files changed, 555 insertions(+), 553 deletions(-)
 rename src/events/notification-center/{SimpleAlertUIEvent.ts => NotificationAlertEvent.ts} (52%)
 delete mode 100644 src/events/notification-center/NotificationCenterAddNotificationEvent.ts
 create mode 100644 src/layout/notification-alert/NotificationAlertView.scss
 create mode 100644 src/layout/notification-alert/NotificationAlertView.tsx
 create mode 100644 src/layout/notification-alert/NotificationAlertView.types.ts
 create mode 100644 src/layout/notification-alert/index.ts
 create mode 100644 src/views/help/HelpMessageHandler.tsx
 create mode 100644 src/views/help/HelpView.tsx
 create mode 100644 src/views/help/common/GetCloseReasonKey.ts
 delete mode 100644 src/views/notification-center/common/BroadcastMessageNotification.ts
 delete mode 100644 src/views/notification-center/common/DialogMessageNotification.ts
 delete mode 100644 src/views/notification-center/common/HotelWillShutdownNotification.ts
 delete mode 100644 src/views/notification-center/common/MOTDNotification.ts
 delete mode 100644 src/views/notification-center/common/ModeratorMessageNotification.ts
 delete mode 100644 src/views/notification-center/common/Notification.ts
 create mode 100644 src/views/notification-center/common/NotificationAlertItem.ts
 create mode 100644 src/views/notification-center/common/NotificationAlertType.ts
 rename src/views/notification-center/common/{NotificationItem.ts => NotificationBubbleItem.ts} (75%)
 rename src/views/notification-center/common/{NotificationType.ts => NotificationBubbleType.ts} (95%)
 create mode 100644 src/views/notification-center/common/ProductImageUtility.ts
 delete mode 100644 src/views/notification-center/context/NotificationCenterContext.tsx
 delete mode 100644 src/views/notification-center/context/NotificationCenterContext.types.ts
 delete mode 100644 src/views/notification-center/reducers/NotificationCenterReducer.tsx
 delete mode 100644 src/views/notification-center/views/alert-base/NotificationCenterAlertBase.tsx
 delete mode 100644 src/views/notification-center/views/alert-base/NotificationCenterAlertBase.types.ts
 create mode 100644 src/views/notification-center/views/alert-layouts/GetAlertLayout.tsx
 create mode 100644 src/views/notification-center/views/alert-layouts/NotificationAlertLayoutView.types.ts
 create mode 100644 src/views/notification-center/views/alert-layouts/default/NotificationDefaultAlertView.tsx
 create mode 100644 src/views/notification-center/views/alert-layouts/default/NotificationDefaultAlertView.types.ts
 create mode 100644 src/views/notification-center/views/alert-layouts/event/NotificationEventAlertView.tsx
 create mode 100644 src/views/notification-center/views/alert-layouts/event/NotificationEventAlertView.types.ts
 delete mode 100644 src/views/notification-center/views/broadcast-message/NotificationCenterBroadcastMessageView.tsx
 delete mode 100644 src/views/notification-center/views/broadcast-message/NotificationCenterBroadcastMessageView.types.ts
 delete mode 100644 src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.tsx
 delete mode 100644 src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.types.ts
 delete mode 100644 src/views/notification-center/views/moderator-message/ModeratorMessageView.tsx
 delete mode 100644 src/views/notification-center/views/moderator-message/ModeratorMessageView.types.ts
 delete mode 100644 src/views/notification-center/views/motd/NotificationCenterMotdView.tsx
 delete mode 100644 src/views/notification-center/views/motd/NotificationCenterMotdView.types.ts
 delete mode 100644 src/views/notification-center/views/tray-item/NotificationTrayItemView.tsx
 delete mode 100644 src/views/notification-center/views/tray-item/NotificationTrayItemView.types.ts

diff --git a/src/App.tsx b/src/App.tsx
index ae6999e5..439fbc5d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -126,6 +126,7 @@ export const App: FC<{}> = props =>
     
     return (
         <div className="nitro-app">
+            <div id="nitro-alerts-container" />
             { (!isReady || isError) && <LoadingView isError={ isError } message={ message } /> }
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady && !isError) } timeout={ 300 }>
                 <MainView />
diff --git a/src/events/notification-center/SimpleAlertUIEvent.ts b/src/events/notification-center/NotificationAlertEvent.ts
similarity index 52%
rename from src/events/notification-center/SimpleAlertUIEvent.ts
rename to src/events/notification-center/NotificationAlertEvent.ts
index d869d0b7..4f64acc9 100644
--- a/src/events/notification-center/SimpleAlertUIEvent.ts
+++ b/src/events/notification-center/NotificationAlertEvent.ts
@@ -1,29 +1,36 @@
 import { NitroEvent } from '@nitrots/nitro-renderer';
 
-export class SimpleAlertUIEvent extends NitroEvent
+export class NotificationAlertEvent extends NitroEvent
 {
-    public static ALERT: string = 'SAUE_ALERT';
+    public static ALERT: string = 'NAE_ALERT';
 
-    private _message: string;
+    private _messages: string[];
+    private _alertType: string;
     private _clickUrl: string;
     private _clickUrlText: string;
     private _title: string;
     private _imageUrl: string;
 
-    constructor(message: string, clickUrl: string = null, clickUrlText: string = null, title: string = null, imageUrl: string = null)
+    constructor(messages: string[], alertType: string = null, clickUrl: string = null, clickUrlText: string = null, title: string = null, imageUrl: string = null)
     {
-        super(SimpleAlertUIEvent.ALERT);
+        super(NotificationAlertEvent.ALERT);
 
-        this._message = message;
+        this._messages = messages;
+        this._alertType = alertType;
         this._clickUrl = clickUrl;
         this._clickUrlText = clickUrlText;
         this._title = title;
         this._imageUrl = imageUrl;
     }
 
-    public get message(): string
+    public get messages(): string[]
     {
-        return this._message;
+        return this._messages;
+    }
+
+    public get alertType(): string
+    {
+        return this._alertType;
     }
 
     public get clickUrl(): string
diff --git a/src/events/notification-center/NotificationBubbleEvent.ts b/src/events/notification-center/NotificationBubbleEvent.ts
index 11a343a2..55383655 100644
--- a/src/events/notification-center/NotificationBubbleEvent.ts
+++ b/src/events/notification-center/NotificationBubbleEvent.ts
@@ -2,7 +2,7 @@ import { NitroEvent } from '@nitrots/nitro-renderer';
 
 export class NotificationBubbleEvent extends NitroEvent
 {
-    public static NEW_BUBBLE: string = 'NNBE_NEW_BUBBLE';
+    public static NEW_BUBBLE: string = 'NBE_NEW_BUBBLE';
 
     private _message: string;
     private _notificationType: string;
diff --git a/src/events/notification-center/NotificationCenterAddNotificationEvent.ts b/src/events/notification-center/NotificationCenterAddNotificationEvent.ts
deleted file mode 100644
index 200fda47..00000000
--- a/src/events/notification-center/NotificationCenterAddNotificationEvent.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NitroNotification } from '../../views/notification-center/common/Notification';
-import { NotificationCenterEvent } from './NotificationCenterEvent';
-
-export class NotificationCenterAddNotificationEvent extends NotificationCenterEvent
-{
-    private _notification: NitroNotification;
-
-    constructor(notification: NitroNotification)
-    {
-        super(NotificationCenterEvent.ADD_NOTIFICATION);
-        
-        this._notification = notification;
-    }
-
-    public get notification(): NitroNotification
-    {
-        return this._notification;
-    }
-}
diff --git a/src/events/notification-center/index.ts b/src/events/notification-center/index.ts
index 2951cdfb..cac7d708 100644
--- a/src/events/notification-center/index.ts
+++ b/src/events/notification-center/index.ts
@@ -1,4 +1,4 @@
-export * from './NotificationCenterAddNotificationEvent';
+export * from './NotificationAlertEvent';
+export * from './NotificationBubbleEvent';
 export * from './NotificationCenterAlertEvent';
 export * from './NotificationCenterEvent';
-export * from './SimpleAlertUIEvent';
diff --git a/src/layout/Layout.scss b/src/layout/Layout.scss
index 3b613a5f..9e435e47 100644
--- a/src/layout/Layout.scss
+++ b/src/layout/Layout.scss
@@ -27,6 +27,7 @@
 @import './loading-habbos/LoadingHabbosView';
 @import './loading-spinner/LoadingSpinnerView';
 @import './mini-camera/NitroLayoutMiniCameraView';
+@import './notification-alert/NotificationAlertView';
 @import './notification-bubble/NotificationBubbleView';
 @import './trophy/NitroLayoutTrophyView';
 @import './gift-card/NitroLayoutGiftCardView';
diff --git a/src/layout/index.ts b/src/layout/index.ts
index f02a74e0..81e87964 100644
--- a/src/layout/index.ts
+++ b/src/layout/index.ts
@@ -3,6 +3,7 @@ export * from './draggable-window';
 export * from './gift-card';
 export * from './loading-spinner';
 export * from './mini-camera';
+export * from './notification-alert';
 export * from './notification-bubble';
 export * from './transitions';
 export * from './trophy';
diff --git a/src/layout/notification-alert/NotificationAlertView.scss b/src/layout/notification-alert/NotificationAlertView.scss
new file mode 100644
index 00000000..d6dbe418
--- /dev/null
+++ b/src/layout/notification-alert/NotificationAlertView.scss
@@ -0,0 +1,8 @@
+.nitro-alert {
+    width: 350px;
+
+    .content-area {
+        min-height: 125px;
+        max-height: 300px;
+    }
+}
diff --git a/src/layout/notification-alert/NotificationAlertView.tsx b/src/layout/notification-alert/NotificationAlertView.tsx
new file mode 100644
index 00000000..f5281398
--- /dev/null
+++ b/src/layout/notification-alert/NotificationAlertView.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../card';
+import { NotificationAlertViewProps } from './NotificationAlertView.types';
+
+export const NotificationAlertView: FC<NotificationAlertViewProps> = props =>
+{
+    const { title = '', close = null, className = '', children = null, ...rest } = props;
+
+    return (
+        <NitroCardView className={ 'nitro-alert ' + className } simple={ true } { ...rest }>
+            <NitroCardHeaderView headerText={ title } onCloseClick={ close } />
+            <NitroCardContentView className="d-flex flex-column justify-content-between text-black">
+                { children }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
diff --git a/src/layout/notification-alert/NotificationAlertView.types.ts b/src/layout/notification-alert/NotificationAlertView.types.ts
new file mode 100644
index 00000000..9d1817e5
--- /dev/null
+++ b/src/layout/notification-alert/NotificationAlertView.types.ts
@@ -0,0 +1,7 @@
+import { DetailsHTMLAttributes } from 'react';
+
+export interface NotificationAlertViewProps extends DetailsHTMLAttributes<HTMLDivElement>
+{
+    title: string;
+    close: () => void;
+}
diff --git a/src/layout/notification-alert/index.ts b/src/layout/notification-alert/index.ts
new file mode 100644
index 00000000..91f80b3d
--- /dev/null
+++ b/src/layout/notification-alert/index.ts
@@ -0,0 +1,2 @@
+export * from './NotificationAlertView';
+export * from './NotificationAlertView.types';
diff --git a/src/views/help/HelpMessageHandler.tsx b/src/views/help/HelpMessageHandler.tsx
new file mode 100644
index 00000000..f71634b7
--- /dev/null
+++ b/src/views/help/HelpMessageHandler.tsx
@@ -0,0 +1,27 @@
+import { CallForHelpResultMessageEvent, FurnitureListItemParser, PetData } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { LocalizeText } from '../../api';
+import { CreateMessageHook } from '../../hooks/messages/message-event';
+import { NotificationAlertType } from '../notification-center/common/NotificationAlertType';
+import { NotificationUtilities } from '../notification-center/common/NotificationUtilities';
+import { GetCloseReasonKey } from './common/GetCloseReasonKey';
+let furniMsgFragments: Map<number, FurnitureListItemParser>[] = null;
+let petMsgFragments: Map<number, PetData>[] = null;
+ 
+export const HelpMessageHandler: FC<{}> = props =>
+{
+    const onCallForHelpResultMessageEvent = useCallback((event: CallForHelpResultMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        let message = parser.messageText;
+
+        if(!message || !message.length) message = LocalizeText('help.cfh.closed.' + GetCloseReasonKey(parser.resultType))
+
+        NotificationUtilities.simpleAlert(message, NotificationAlertType.MODERATION, null, null, LocalizeText('mod.alert.title'));
+    }, []);
+
+    CreateMessageHook(CallForHelpResultMessageEvent, onCallForHelpResultMessageEvent);
+
+    return null;
+}
diff --git a/src/views/help/HelpView.tsx b/src/views/help/HelpView.tsx
new file mode 100644
index 00000000..4917c713
--- /dev/null
+++ b/src/views/help/HelpView.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { HelpMessageHandler } from './HelpMessageHandler';
+
+export const HelpView: FC<{}> = props =>
+{
+    return (
+        <>
+            <HelpMessageHandler />
+        </>
+    );
+}
diff --git a/src/views/help/common/GetCloseReasonKey.ts b/src/views/help/common/GetCloseReasonKey.ts
new file mode 100644
index 00000000..520d14fd
--- /dev/null
+++ b/src/views/help/common/GetCloseReasonKey.ts
@@ -0,0 +1,8 @@
+export const GetCloseReasonKey = (code: number) =>
+{
+    if(code === 1) return 'useless';
+
+    if(code === 2) return 'abusive';
+
+    return 'resolved';
+}
diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx
index 68269e58..49e28a61 100644
--- a/src/views/main/MainView.tsx
+++ b/src/views/main/MainView.tsx
@@ -9,6 +9,7 @@ import { CameraWidgetView } from '../camera/CameraWidgetView';
 import { CatalogView } from '../catalog/CatalogView';
 import { FriendsView } from '../friends/FriendsView';
 import { GroupsView } from '../groups/GroupsView';
+import { HelpView } from '../help/HelpView';
 import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
 import { ModToolsView } from '../mod-tools/ModToolsView';
@@ -69,6 +70,7 @@ export const MainView: FC<MainViewProps> = props =>
             <UserProfileView />
             <GroupsView />
             <CameraWidgetView />
+            <HelpView />
         </div>
     );
 }
diff --git a/src/views/notification-center/NotificationCenterMessageHandler.tsx b/src/views/notification-center/NotificationCenterMessageHandler.tsx
index de974b13..9afc098d 100644
--- a/src/views/notification-center/NotificationCenterMessageHandler.tsx
+++ b/src/views/notification-center/NotificationCenterMessageHandler.tsx
@@ -1,20 +1,14 @@
-import { AchievementNotificationMessageEvent, ActivityPointNotificationMessageEvent, ClubGiftNotificationEvent, HabboBroadcastMessageEvent, HotelClosesAndWillOpenAtEvent, HotelWillShutdownEvent, ModeratorMessageEvent, MOTDNotificationEvent, NotificationDialogMessageEvent, PetAddedToInventoryEvent, RespectReceivedEvent, RoomEnterEvent, Vector3d } from '@nitrots/nitro-renderer';
+import { AchievementNotificationMessageEvent, ActivityPointNotificationMessageEvent, ClubGiftNotificationEvent, ClubGiftSelectedEvent, HabboBroadcastMessageEvent, HotelClosedAndOpensEvent, HotelClosesAndWillOpenAtEvent, HotelWillCloseInMinutesEvent, InfoFeedEnableMessageEvent, MaintenanceStatusMessageEvent, ModeratorCautionEvent, ModeratorMessageEvent, MOTDNotificationEvent, NotificationDialogMessageEvent, PetLevelNotificationEvent, PetReceivedMessageEvent, RespectReceivedEvent, RoomEnterEvent, UserBannedMessageEvent, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { GetRoomEngine, GetSessionDataManager, LocalizeBadgeName, LocalizeText } from '../../api';
-import { NotificationCenterAlertEvent } from '../../events';
-import { dispatchUiEvent } from '../../hooks/events';
+import { GetConfiguration, GetRoomEngine, GetSessionDataManager, LocalizeBadgeName, LocalizeText } from '../../api';
 import { CreateMessageHook } from '../../hooks/messages';
-import { HotelWillShutdownNotification } from './common/HotelWillShutdownNotification';
-import { NotificationType } from './common/NotificationType';
+import { NotificationBubbleType } from './common/NotificationBubbleType';
 import { NotificationUtilities } from './common/NotificationUtilities';
-import { useNotificationCenterContext } from './context/NotificationCenterContext';
+import { ProductImageUtility } from './common/ProductImageUtility';
 import { INotificationCenterMessageHandlerProps } from './NotificationCenterMessageHandler.types';
-import { NotificationCenterActions } from './reducers/NotificationCenterReducer';
 
 export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHandlerProps> = props =>
 {
-    const { dispatchNotificationCenterState = null } = useNotificationCenterContext();
-
     const onRespectReceivedEvent = useCallback((event: RespectReceivedEvent) =>
     {
         const parser = event.getParser();
@@ -24,8 +18,8 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
         const text1 = LocalizeText('notifications.text.respect.1');
         const text2 = LocalizeText('notifications.text.respect.2', [ 'count' ], [ parser.respectsReceived.toString() ]);
 
-        NotificationUtilities.showSingleBubble(text1, NotificationType.RESPECT);
-        NotificationUtilities.showSingleBubble(text2, NotificationType.RESPECT);
+        NotificationUtilities.showSingleBubble(text1, NotificationBubbleType.RESPECT);
+        NotificationUtilities.showSingleBubble(text2, NotificationBubbleType.RESPECT);
     }, []);
 
     CreateMessageHook(RespectReceivedEvent, onRespectReceivedEvent);
@@ -34,7 +28,7 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
     {
         const parser = event.getParser();
 
-        NotificationUtilities.simpleAlert(parser.message.replace(/\\r/g, '\r'));
+        NotificationUtilities.simpleAlert(parser.message.replace(/\\r/g, '\r'), null, null, LocalizeText('notifications.broadcast.title'));
     }, []);
 
     CreateMessageHook(HabboBroadcastMessageEvent, onHabboBroadcastMessageEvent);
@@ -48,7 +42,7 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
         const badgeImage = GetSessionDataManager().getBadgeUrl(parser.data.badgeCode);
         const internalLink = 'questengine/achievements/' + parser.data.category;
 
-        NotificationUtilities.showSingleBubble((text1 + ' ' + badgeName), NotificationType.ACHIEVEMENT, badgeImage, internalLink);
+        NotificationUtilities.showSingleBubble((text1 + ' ' + badgeName), NotificationBubbleType.ACHIEVEMENT, badgeImage, internalLink);
     }, []);
 
     CreateMessageHook(AchievementNotificationMessageEvent, onAchievementNotificationMessageEvent);
@@ -66,7 +60,7 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
     {
         const parser = event.getParser();
 
-        dispatchUiEvent(new NotificationCenterAlertEvent(NotificationCenterAlertEvent.HOTEL_ALERT, [ parser.message ], parser.link));
+        NotificationUtilities.handleModeratorMessage(parser.message, parser.link);
     }, []);
 
     CreateMessageHook(ModeratorMessageEvent, onModeratorMessageEvent);
@@ -75,11 +69,31 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
     {
         const parser = event.getParser();
 
-        // bubble for loyalty
+        if(parser.amountChanged <= 0) return;
+
+        let imageUrl: string = null;
+
+        switch(parser.type)
+        {
+            case 5:
+                imageUrl = GetConfiguration<string>('currency.asset.icon.url', '').replace('%type%', parser.type.toString());
+                break;
+        }
+
+        NotificationUtilities.showSingleBubble(LocalizeText('notifications.text.loyalty.received', [ 'amount' ], [ parser.amountChanged.toString() ]), NotificationBubbleType.INFO, imageUrl);
     }, []);
 
     CreateMessageHook(ActivityPointNotificationMessageEvent, onActivityPointNotificationMessageEvent);
 
+    const onUserBannedMessageEvent = useCallback((event: UserBannedMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        NotificationUtilities.handleUserBannedMessage(parser.message);
+    }, []);
+
+    CreateMessageHook(UserBannedMessageEvent, onUserBannedMessageEvent);
+
     const onHotelClosesAndWillOpenAtEvent = useCallback((event: HotelClosesAndWillOpenAtEvent) =>
     {
         const parser = event.getParser();
@@ -89,7 +103,7 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
 
     CreateMessageHook(HotelClosesAndWillOpenAtEvent, onHotelClosesAndWillOpenAtEvent);
 
-    const onPetAddedToInventoryEvent = useCallback((event: PetAddedToInventoryEvent) =>
+    const onPetReceivedMessageEvent = useCallback((event: PetReceivedMessageEvent) =>
     {
         const parser = event.getParser();
 
@@ -101,10 +115,10 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
 
         if(imageResult) imageUrl = imageResult.getImage().src;
 
-        NotificationUtilities.showSingleBubble(text, NotificationType.PETLEVEL, imageUrl);
+        NotificationUtilities.showSingleBubble(text, NotificationBubbleType.PETLEVEL, imageUrl);
     }, []);
 
-    CreateMessageHook(PetAddedToInventoryEvent, onPetAddedToInventoryEvent);
+    CreateMessageHook(PetReceivedMessageEvent, onPetReceivedMessageEvent);
 
     const onRoomEnterEvent = useCallback((event: RoomEnterEvent) =>
     {
@@ -119,24 +133,67 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
     {
         const parser = event.getParser();
 
-        dispatchUiEvent(new NotificationCenterAlertEvent(NotificationCenterAlertEvent.HOTEL_ALERT, parser.messages));
+        NotificationUtilities.handleMOTD(parser.messages);
     }, []);
 
     CreateMessageHook(MOTDNotificationEvent, onMOTDNotificationEvent);
 
-    const onHotelWillShutdownEvent = useCallback((event: HotelWillShutdownEvent) =>
+    const onPetLevelNotificationEvent = useCallback((event: PetLevelNotificationEvent) =>
     {
         const parser = event.getParser();
 
-        dispatchNotificationCenterState({
-            type: NotificationCenterActions.ADD_NOTIFICATION,
-            payload: {
-                notification: new HotelWillShutdownNotification(parser.minutes)
-            }
-        });
-    }, [ dispatchNotificationCenterState ]);
+        let imageUrl: string = null;
 
-    CreateMessageHook(HotelWillShutdownEvent, onHotelWillShutdownEvent);
+        const imageResult = GetRoomEngine().getRoomObjectPetImage(parser.figureData.typeId, parser.figureData.paletteId, parseInt(parser.figureData.color, 16), new Vector3d(45 * 3), 64, null, true);
+
+        if(imageResult) imageUrl = imageResult.getImage().src;
+
+        NotificationUtilities.showSingleBubble(LocalizeText('notifications.text.petlevel', [ 'pet_name', 'level' ], [ parser.petName, parser.level.toString() ]), NotificationBubbleType.PETLEVEL, imageUrl);
+    }, []);
+
+    CreateMessageHook(PetLevelNotificationEvent, onPetLevelNotificationEvent);
+
+    const onInfoFeedEnableMessageEvent = useCallback((event: InfoFeedEnableMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        NotificationUtilities.BUBBLES_DISABLED = !(parser.enabled);
+    }, []);
+
+    CreateMessageHook(InfoFeedEnableMessageEvent, onInfoFeedEnableMessageEvent);
+
+    const onClubGiftSelectedEvent = useCallback((event: ClubGiftSelectedEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser.products || !parser.products.length) return;
+
+        const productData = parser.products[0];
+
+        if(!productData) return;
+
+        NotificationUtilities.showSingleBubble(LocalizeText('notifications.text.club_gift.selected'), NotificationBubbleType.INFO, ProductImageUtility.getProductImageUrl(productData.productType, productData.furniClassId, productData.extraParam))
+    }, []);
+
+    CreateMessageHook(ClubGiftSelectedEvent, onClubGiftSelectedEvent);
+
+    const onMaintenanceStatusMessageEvent = useCallback((event: MaintenanceStatusMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        NotificationUtilities.handleHotelMaintenanceMessage(parser.minutesUntilMaintenance, parser.duration);
+    }, []);
+
+    CreateMessageHook(MaintenanceStatusMessageEvent, onMaintenanceStatusMessageEvent);
+
+    const onModeratorCautionEvent = useCallback((event: ModeratorCautionEvent) =>
+    {
+        const parser = event.getParser();
+
+        NotificationUtilities.handleModeratorCaution(parser.message, parser.url);
+    }, []);
+
+    CreateMessageHook(ModeratorCautionEvent, onModeratorCautionEvent);
 
     const onNotificationDialogMessageEvent = useCallback((event: NotificationDialogMessageEvent) =>
     {
@@ -147,5 +204,23 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
 
     CreateMessageHook(NotificationDialogMessageEvent, onNotificationDialogMessageEvent);
 
+    const onHotelWillCloseInMinutesEvent = useCallback((event: HotelWillCloseInMinutesEvent) =>
+    {
+        const parser = event.getParser();
+
+        NotificationUtilities.handleHotelClosingMessage(parser.openMinute);
+    }, []);
+
+    CreateMessageHook(HotelWillCloseInMinutesEvent, onHotelWillCloseInMinutesEvent);
+
+    const onHotelClosedAndOpensEvent = useCallback((event: HotelClosedAndOpensEvent) =>
+    {
+        const parser = event.getParser();
+
+        NotificationUtilities.handleLoginFailedHotelClosedMessage(parser.openHour, parser.openMinute);
+    }, []);
+
+    CreateMessageHook(HotelClosedAndOpensEvent, onHotelClosedAndOpensEvent);
+
     return null;
 }
diff --git a/src/views/notification-center/NotificationCenterView.scss b/src/views/notification-center/NotificationCenterView.scss
index 78a94d63..671ea3e7 100644
--- a/src/views/notification-center/NotificationCenterView.scss
+++ b/src/views/notification-center/NotificationCenterView.scss
@@ -1,12 +1,3 @@
-.nitro-alert {
-    width: 350px;
-
-    .content-area {
-        min-height: 125px;
-        max-height: 300px;
-    }
-}
-
 .nitro-notification-center-container {
     position: absolute;
     top: 0;
diff --git a/src/views/notification-center/NotificationCenterView.tsx b/src/views/notification-center/NotificationCenterView.tsx
index ace8d3e4..0367b604 100644
--- a/src/views/notification-center/NotificationCenterView.tsx
+++ b/src/views/notification-center/NotificationCenterView.tsx
@@ -1,40 +1,42 @@
 import { FC, ReactNode, useCallback, useMemo, useState } from 'react';
-import { NotificationCenterAlertEvent } from '../../events';
+import { createPortal } from 'react-dom';
+import { NotificationAlertEvent } from '../../events';
 import { NotificationBubbleEvent } from '../../events/notification-center/NotificationBubbleEvent';
 import { useUiEvent } from '../../hooks/events';
-import { NotificationItem } from './common/NotificationItem';
-import { NotificationType } from './common/NotificationType';
+import { NotificationAlertItem } from './common/NotificationAlertItem';
+import { NotificationBubbleItem } from './common/NotificationBubbleItem';
+import { NotificationBubbleType } from './common/NotificationBubbleType';
 import { NotificationCenterMessageHandler } from './NotificationCenterMessageHandler';
 import { NotificationCenterViewProps } from './NotificationCenterView.types';
-import { NotificationCenterBroadcastMessageView } from './views/broadcast-message/NotificationCenterBroadcastMessageView';
+import { GetAlertLayout } from './views/alert-layouts/GetAlertLayout';
 import { GetBubbleLayout } from './views/bubble-layouts/GetBubbleLayout';
 
 export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
 {
-    const [ alerts, setAlerts ] = useState<NotificationCenterAlertEvent[]>([]);
-    const [ bubbleAlerts, setBubbleAlerts ] = useState<NotificationItem[]>([]);
+    const [ alerts, setAlerts ] = useState<NotificationAlertItem[]>([]);
+    const [ bubbleAlerts, setBubbleAlerts ] = useState<NotificationBubbleItem[]>([]);
 
-    const onNotificationCenterAlertEvent = useCallback((event: NotificationCenterAlertEvent) =>
+    const onNotificationAlertEvent = useCallback((event: NotificationAlertEvent) =>
     {
-        setAlerts(prevValue =>
-            {
-                return [ ...prevValue, event ];
-            });
+        console.log(event);
+        const alertItem = new NotificationAlertItem(event.messages, event.alertType, event.clickUrl, event.clickUrlText, event.title, event.imageUrl);
+
+        setAlerts(prevValue => [ alertItem, ...prevValue ]);
     }, []);
 
-    useUiEvent(NotificationCenterAlertEvent.HOTEL_ALERT, onNotificationCenterAlertEvent);
+    useUiEvent(NotificationAlertEvent.ALERT, onNotificationAlertEvent);
 
     const onNotificationBubbleEvent = useCallback((event: NotificationBubbleEvent) =>
     {
         console.log(event);
-        const notificationItem = new NotificationItem(event.message, event.notificationType, event.imageUrl, event.linkUrl);
+        const notificationItem = new NotificationBubbleItem(event.message, event.notificationType, event.imageUrl, event.linkUrl);
 
         setBubbleAlerts(prevValue => [ notificationItem, ...prevValue ]);
     }, []);
 
     useUiEvent(NotificationBubbleEvent.NEW_BUBBLE, onNotificationBubbleEvent);
 
-    const closeAlert = useCallback((alert: NotificationCenterAlertEvent) =>
+    const closeAlert = useCallback((alert: NotificationAlertItem) =>
     {
         setAlerts(prevValue =>
             {
@@ -47,7 +49,7 @@ export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
             });
     }, []);
 
-    const closeBubbleAlert = useCallback((item: NotificationItem) =>
+    const closeBubbleAlert = useCallback((item: NotificationBubbleItem) =>
     {
         setBubbleAlerts(prevValue =>
             {
@@ -60,6 +62,22 @@ export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
             })
     }, []);
 
+    const getAlerts = useMemo(() =>
+    {
+        if(!alerts || !alerts.length) return null;
+
+        const elements: ReactNode[] = [];
+
+        for(const alert of alerts)
+        {
+            const element = GetAlertLayout(alert, () => closeAlert(alert));
+
+            elements.push(element);
+        }
+
+        return elements;
+    }, [ alerts, closeAlert ]);
+
     const getBubbleAlerts = useMemo(() =>
     {
         if(!bubbleAlerts || !bubbleAlerts.length) return null;
@@ -70,7 +88,7 @@ export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
         {
             const element = GetBubbleLayout(alert, () => closeBubbleAlert(alert));
 
-            if(alert.notificationType === NotificationType.CLUBGIFT)
+            if(alert.notificationType === NotificationBubbleType.CLUBGIFT)
             {
                 elements.unshift(element);
 
@@ -89,15 +107,7 @@ export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
             <div className="nitro-notification-center">
                 { getBubbleAlerts }
             </div>
-            { (alerts.length > 0) && alerts.map((alert, index) =>
-                {
-                    switch(alert.type)
-                    {
-                        case NotificationCenterAlertEvent.HOTEL_ALERT:
-                        default:
-                            return <NotificationCenterBroadcastMessageView key={ index } notification={ alert } onClose={ () => closeAlert(alert) } />;
-                    }
-                })}
+            { createPortal(getAlerts, document.getElementById('nitro-alerts-container')) }
         </>
     );
 }
diff --git a/src/views/notification-center/common/BroadcastMessageNotification.ts b/src/views/notification-center/common/BroadcastMessageNotification.ts
deleted file mode 100644
index ddf0fa0d..00000000
--- a/src/views/notification-center/common/BroadcastMessageNotification.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { NitroNotification } from './Notification';
-
-export class BroadcastMessageNotification extends NitroNotification
-{}
diff --git a/src/views/notification-center/common/DialogMessageNotification.ts b/src/views/notification-center/common/DialogMessageNotification.ts
deleted file mode 100644
index a3201658..00000000
--- a/src/views/notification-center/common/DialogMessageNotification.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NitroNotification } from './Notification';
-
-export class DialogMessageNotification extends NitroNotification
-{
-    private _type: string;
-    private _parameters: Map<string, string>;
-
-    constructor(type: string, parameters: Map<string, string>)
-    {
-        super();
-        this._type = type;
-        this._parameters = parameters;
-    }
-
-    public get type(): string
-    {
-        return this._type;
-    }
-
-    public get parameters(): Map<string, string>
-    {
-        return this._parameters;
-    }
-}
diff --git a/src/views/notification-center/common/HotelWillShutdownNotification.ts b/src/views/notification-center/common/HotelWillShutdownNotification.ts
deleted file mode 100644
index 9f30c1ae..00000000
--- a/src/views/notification-center/common/HotelWillShutdownNotification.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NitroNotification } from './Notification';
-
-export class HotelWillShutdownNotification extends NitroNotification
-{
-    private _minutes: number;
-
-    constructor(minutes: number)
-    {
-        super();
-        this._minutes = minutes;
-    }
-
-    public get minutes(): number
-    {
-        return this._minutes;
-    }
-}
diff --git a/src/views/notification-center/common/MOTDNotification.ts b/src/views/notification-center/common/MOTDNotification.ts
deleted file mode 100644
index f543507d..00000000
--- a/src/views/notification-center/common/MOTDNotification.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NitroNotification } from './Notification';
-
-export class MOTDNotification extends NitroNotification
-{
-    private _messages: string[];
-
-    constructor(messages: string[])
-    {
-        super();
-        this._messages = [];
-
-        for(const message of messages) this._messages.push(message.replace(/\r\n|\r|\n/g, '<br />'));
-    }
-
-    public get messages(): string[]
-    {
-        return this._messages;
-    }
-}
diff --git a/src/views/notification-center/common/ModeratorMessageNotification.ts b/src/views/notification-center/common/ModeratorMessageNotification.ts
deleted file mode 100644
index ed324b11..00000000
--- a/src/views/notification-center/common/ModeratorMessageNotification.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NitroNotification } from './Notification';
-
-export class ModeratorMessageNotification extends NitroNotification
-{
-    private _link: string;
-
-    constructor(message: string, link: string)
-    {
-        super(message);
-        this._link = link;
-    }
-
-    public get link(): string
-    {
-        return this._link;
-    }
-}
diff --git a/src/views/notification-center/common/Notification.ts b/src/views/notification-center/common/Notification.ts
deleted file mode 100644
index 2f170cce..00000000
--- a/src/views/notification-center/common/Notification.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-export class NitroNotification
-{
-    public static CURRENT_ID: number = 0;
-
-    private _id: number;
-    private _title: string;
-    private _message: string;
-    private _dismissed: boolean = false;
-    private _timestamp: number;
-
-    constructor(message: string = null, title: string = null)
-    {
-        this._id = ++NitroNotification.CURRENT_ID;
-        this._title = title;
-        this._timestamp = Date.now();
-
-        if(message) this._message = message.replace(/\r\n|\r|\n/g, '<br />');
-    }
-
-    public dismiss(): void
-    {
-        this._dismissed = true;
-    }
-
-    public get id(): number
-    {
-        return this._id;
-    }
-
-    public get title(): string
-    {
-        return this._title;
-    }
-
-    public get message(): string
-    {
-        return this._message;
-    }
-
-    public get dismissed(): boolean
-    {
-        return this._dismissed;
-    }
-
-    public get timestamp(): number
-    {
-        return this._timestamp;
-    }
-}
diff --git a/src/views/notification-center/common/NotificationAlertItem.ts b/src/views/notification-center/common/NotificationAlertItem.ts
new file mode 100644
index 00000000..b3432276
--- /dev/null
+++ b/src/views/notification-center/common/NotificationAlertItem.ts
@@ -0,0 +1,62 @@
+import { NotificationBubbleType } from './NotificationBubbleType';
+
+export class NotificationAlertItem
+{
+    private static ITEM_ID: number = -1;
+
+    private _id: number;
+    private _messages: string[];
+    private _alertType: string;
+    private _clickUrl: string;
+    private _clickUrlText: string;
+    private _title: string;
+    private _imageUrl: string;
+
+    constructor(messages: string[], alertType: string = NotificationBubbleType.INFO, clickUrl: string = null, clickUrlText: string = null, title: string = null, imageUrl: string = null)
+    {
+        NotificationAlertItem.ITEM_ID += 1;
+
+        this._id = NotificationAlertItem.ITEM_ID;
+        this._messages = messages;
+        this._alertType = alertType;
+        this._clickUrl = clickUrl;
+        this._clickUrlText = clickUrlText;
+        this._title = title;
+        this._imageUrl = imageUrl;
+    }
+
+    public get id(): number
+    {
+        return this._id;
+    }
+
+    public get messages(): string[]
+    {
+        return this._messages;
+    }
+
+    public get alertType(): string
+    {
+        return this._alertType;
+    }
+
+    public get clickUrl(): string
+    {
+        return this._clickUrl;
+    }
+
+    public get clickUrlText(): string
+    {
+        return this._clickUrlText;
+    }
+
+    public get title(): string
+    {
+        return this._title;
+    }
+
+    public get imageUrl(): string
+    {
+        return this._imageUrl;
+    }
+}
diff --git a/src/views/notification-center/common/NotificationAlertType.ts b/src/views/notification-center/common/NotificationAlertType.ts
new file mode 100644
index 00000000..9a4b192b
--- /dev/null
+++ b/src/views/notification-center/common/NotificationAlertType.ts
@@ -0,0 +1,7 @@
+export class NotificationAlertType
+{
+    public static DEFAULT: string = 'default';
+    public static MOTD: string = 'motd';
+    public static MODERATION: string = 'moderation';
+    public static EVENT: string = 'event';
+}
diff --git a/src/views/notification-center/common/NotificationItem.ts b/src/views/notification-center/common/NotificationBubbleItem.ts
similarity index 75%
rename from src/views/notification-center/common/NotificationItem.ts
rename to src/views/notification-center/common/NotificationBubbleItem.ts
index 9387db74..fe90dab7 100644
--- a/src/views/notification-center/common/NotificationItem.ts
+++ b/src/views/notification-center/common/NotificationBubbleItem.ts
@@ -1,6 +1,6 @@
-import { NotificationType } from './NotificationType';
+import { NotificationBubbleType } from './NotificationBubbleType';
 
-export class NotificationItem
+export class NotificationBubbleItem
 {
     private static ITEM_ID: number = -1;
 
@@ -10,11 +10,11 @@ export class NotificationItem
     private _iconUrl: string;
     private _linkUrl: string;
 
-    constructor(message: string, notificationType: string = NotificationType.INFO, iconUrl: string = null, linkUrl: string = null)
+    constructor(message: string, notificationType: string = NotificationBubbleType.INFO, iconUrl: string = null, linkUrl: string = null)
     {
-        NotificationItem.ITEM_ID += 1;
+        NotificationBubbleItem.ITEM_ID += 1;
 
-        this._id = NotificationItem.ITEM_ID;
+        this._id = NotificationBubbleItem.ITEM_ID;
         this._message = message;
         this._notificationType = notificationType;
         this._iconUrl = iconUrl;
diff --git a/src/views/notification-center/common/NotificationType.ts b/src/views/notification-center/common/NotificationBubbleType.ts
similarity index 95%
rename from src/views/notification-center/common/NotificationType.ts
rename to src/views/notification-center/common/NotificationBubbleType.ts
index dff016d8..cce38f5b 100644
--- a/src/views/notification-center/common/NotificationType.ts
+++ b/src/views/notification-center/common/NotificationBubbleType.ts
@@ -1,4 +1,4 @@
-export class NotificationType 
+export class NotificationBubbleType 
 {
     public static FRIENDOFFLINE: string = 'friendoffline';
     public static FRIENDONLINE: string = 'friendonline';
diff --git a/src/views/notification-center/common/NotificationUtilities.ts b/src/views/notification-center/common/NotificationUtilities.ts
index a80247b4..c4dd1bd9 100644
--- a/src/views/notification-center/common/NotificationUtilities.ts
+++ b/src/views/notification-center/common/NotificationUtilities.ts
@@ -1,10 +1,11 @@
 import { HabboWebTools, RoomEnterEffect } from '@nitrots/nitro-renderer';
 import { CreateLinkEvent, GetConfiguration, GetNitroInstance, LocalizeText } from '../../../api';
-import { SimpleAlertUIEvent } from '../../../events';
+import { NotificationAlertEvent } from '../../../events';
 import { NotificationBubbleEvent } from '../../../events/notification-center/NotificationBubbleEvent';
 import { dispatchUiEvent } from '../../../hooks';
 import { CatalogPageName } from '../../catalog/common/CatalogPageName';
-import { NotificationType } from './NotificationType';
+import { NotificationAlertType } from './NotificationAlertType';
+import { NotificationBubbleType } from './NotificationBubbleType';
 
 export class NotificationUtilities
 {
@@ -12,6 +13,8 @@ export class NotificationUtilities
     private static MODERATION_DISCLAIMER_DELAY_MS: number = 5000;
     private static MODERATION_DISCLAIMER_TIMEOUT: ReturnType<typeof setTimeout> = null;
 
+    public static BUBBLES_DISABLED: boolean = false;
+
     private static cleanText(text: string): string
     {
         return text.replace(/\\r/g, '\r')
@@ -68,62 +71,92 @@ export class NotificationUtilities
 
         const configuration = this.getNotificationConfig(('notification.' + type));
 
-        if(configuration)
-        {
-            for(const key in configuration) options.set(key, configuration[key]);
-        }
+        if(configuration) for(const key in configuration) options.set(key, configuration[key]);
 
         console.log(options);
 
+        const title = this.getNotificationPart(options, type, 'title', true);
+        const message = this.getNotificationPart(options, type, 'message', true).replace(/\\r/g, '\r');
+        const linkTitle = this.getNotificationPart(options, type, 'linkTitle', false);
+        const linkUrl = this.getNotificationPart(options, type, 'linkUrl', false);
+        const image = this.getNotificationImageUrl(options, type);
+
         if(options.get('display') === 'BUBBLE')
         {
-            const message = this.getNotificationPart(options, type, 'message', true);
-            const linkUrl = this.getNotificationPart(options, type, 'linkUrl', false);
-            const isEventLink = (linkUrl && linkUrl.substr(0, 6) === 'event');
-            const image = this.getNotificationImageUrl(options, type);
-
-            dispatchUiEvent(new NotificationBubbleEvent(LocalizeText(message), NotificationType.INFO, LocalizeText(image), (isEventLink ? linkUrl.substr(6) : linkUrl)));
+            this.showSingleBubble(LocalizeText(message), NotificationBubbleType.INFO, LocalizeText(image), linkUrl);
         }
         else
         {
-
+            this.simpleAlert(message, NotificationAlertType.EVENT, linkUrl, linkTitle, title, image);
         }
     }
 
     public static showSingleBubble(message: string, type: string, imageUrl: string = null, internalLink: string = null): void
     {
+        if(this.BUBBLES_DISABLED) return;
+
         dispatchUiEvent(new NotificationBubbleEvent(message, type, imageUrl, internalLink));
     }
 
-    public static simpleAlert(message: string, clickUrl: string = null, clickUrlText: string = null, title: string = null, imageUrl: string = null): void
-    {
-        if(!title || !title.length) title = LocalizeText('notifications.broadcast.title');
-
-        dispatchUiEvent(new SimpleAlertUIEvent(message, clickUrl, clickUrlText, title, imageUrl));
-    }
-
-    public static alert(title: string, message: string): void
-    {
-        dispatchUiEvent(new SimpleAlertUIEvent(message, null, null, title, null));
-    }
-
     public static showClubGiftNotification(numGifts: number): void
     {
         if(numGifts <= 0) return;
 
-        dispatchUiEvent(new NotificationBubbleEvent(numGifts.toString(), NotificationType.CLUBGIFT, null, 'catalog/open/' + CatalogPageName.CLUB_GIFTS));
+        this.showSingleBubble(numGifts.toString(), NotificationBubbleType.CLUBGIFT, null, ('catalog/open/' + CatalogPageName.CLUB_GIFTS));
     }
 
-    public static showModeratorMessage(message: string, url: string = null): void
+    public static handleMOTD(messages: string[]): void
     {
-        this.simpleAlert(this.cleanText(message), url, LocalizeText('mod.alert.link'), LocalizeText('mod.alert.title'));
+        messages = messages.map(message => this.cleanText(message));
+
+        dispatchUiEvent(new NotificationAlertEvent(messages, NotificationAlertType.MOTD, null, null, LocalizeText('notifications.motd.title')));
+    }
+
+    public static simpleAlert(message: string, type: string, clickUrl: string = null, clickUrlText: string = null, title: string = null, imageUrl: string = null): void
+    {
+        if(!title || !title.length) title = LocalizeText('notifications.broadcast.title');
+
+        dispatchUiEvent(new NotificationAlertEvent([ this.cleanText(message) ], type, clickUrl, clickUrlText, title, imageUrl));
+    }
+
+    public static showModeratorMessage(message: string, url: string = null, showHabboWay: boolean = true): void
+    {
+        this.simpleAlert(message, NotificationAlertType.MODERATION, url, LocalizeText('mod.alert.link'), LocalizeText('mod.alert.title'));
+    }
+
+    public static handleModeratorCaution(message: string, url: string = null): void
+    {
+        this.showModeratorMessage(message, url);
+    }
+
+    public static handleModeratorMessage(message: string, url: string = null): void
+    {
+        this.showModeratorMessage(message, url, false);
+    }
+
+    public static handleUserBannedMessage(message: string): void
+    {
+        this.showModeratorMessage(message);
     }
 
     public static handleHotelClosedMessage(open: number, minute: number, thrownOut: boolean): void
     {
-        const text: string = LocalizeText(('opening.hours.' + (thrownOut ? 'disconnected' : 'closed')), [ 'h', 'm'], [ this.getTimeZeroPadded(open), this.getTimeZeroPadded(minute) ]);;
+        this.simpleAlert( LocalizeText(('opening.hours.' + (thrownOut ? 'disconnected' : 'closed')), [ 'h', 'm'], [ this.getTimeZeroPadded(open), this.getTimeZeroPadded(minute) ]), NotificationAlertType.DEFAULT, null, null, LocalizeText('opening.hours.title'));
+    }
 
-        this.alert(LocalizeText('opening.hours.title'), text);
+    public static handleHotelMaintenanceMessage(minutesUntilMaintenance: number, duration: number): void
+    {
+        this.simpleAlert(LocalizeText('maintenance.shutdown', [ 'm', 'd' ], [ minutesUntilMaintenance.toString(), duration.toString() ]), NotificationAlertType.DEFAULT, null, null, LocalizeText('opening.hours.title'));
+    }
+
+    public static handleHotelClosingMessage(minutes: number): void
+    {
+        this.simpleAlert(LocalizeText('opening.hours.shutdown', [ 'm' ], [ minutes.toString() ]), NotificationAlertType.DEFAULT, null, null, LocalizeText('opening.hours.title'));
+    }
+
+    public static handleLoginFailedHotelClosedMessage(openHour: number, openMinutes: number): void
+    {
+        this.simpleAlert(LocalizeText('opening.hours.disconnected', [ 'h', 'm' ], [ openHour.toString(), openMinutes.toString() ]), NotificationAlertType.DEFAULT, null, null, LocalizeText('opening.hours.title'));
     }
 
     public static openUrl(url: string): void
@@ -134,7 +167,7 @@ export class NotificationUtilities
         }
         else
         {
-            CreateLinkEvent(url);
+            CreateLinkEvent(url.substring(6));
         }
     }
 
@@ -153,7 +186,7 @@ export class NotificationUtilities
         {
             if(this.MODERATION_DISCLAIMER_SHOWN) return;
 
-            this.showSingleBubble(LocalizeText('mod.chatdisclaimer'), NotificationType.INFO);
+            this.showSingleBubble(LocalizeText('mod.chatdisclaimer'), NotificationBubbleType.INFO);
 
             this.MODERATION_DISCLAIMER_SHOWN = true;
         }
diff --git a/src/views/notification-center/common/ProductImageUtility.ts b/src/views/notification-center/common/ProductImageUtility.ts
new file mode 100644
index 00000000..9078754c
--- /dev/null
+++ b/src/views/notification-center/common/ProductImageUtility.ts
@@ -0,0 +1,59 @@
+import { CatalogPageMessageProductData } from '@nitrots/nitro-renderer';
+import { GetRoomEngine } from '../../../api';
+import { FurniCategory } from '../../catalog/common/FurniCategory';
+
+export class ProductImageUtility
+{
+    public static getProductImageUrl(productType: string, furniClassId: number, extraParam: string): string
+    {
+        let imageUrl: string = null;
+
+        switch(productType)
+        {
+            case CatalogPageMessageProductData.S:
+                imageUrl = GetRoomEngine().getFurnitureFloorIconUrl(furniClassId);
+                break;
+            case CatalogPageMessageProductData.I:
+                const productCategory = this.getProductCategory(CatalogPageMessageProductData.I, furniClassId);
+
+                if(productCategory === 1)
+                {
+                    imageUrl = GetRoomEngine().getFurnitureWallIconUrl(furniClassId, extraParam);
+                }
+                else
+                {
+                    switch(productCategory)
+                    {
+                        case FurniCategory.WALL_PAPER:
+                            break;
+                        case FurniCategory.LANDSCAPE:
+                            break;
+                        case FurniCategory.FLOOR:
+                            break;
+                    }
+                }
+                break;
+            case CatalogPageMessageProductData.E:
+                // fx_icon_furniClassId_png
+                break;
+        }
+
+        return imageUrl;
+    }
+
+    private static getProductCategory(productType: string, furniClassId: number): number
+    {
+        if(productType === CatalogPageMessageProductData.S) return 1;
+
+        if(productType === CatalogPageMessageProductData.I)
+        {
+            if(furniClassId === 3001) return FurniCategory.WALL_PAPER;
+
+            if(furniClassId === 3002) return FurniCategory.FLOOR;
+
+            if(furniClassId === 4057) return FurniCategory.LANDSCAPE;
+        }
+
+        return 1;
+    }
+}
diff --git a/src/views/notification-center/context/NotificationCenterContext.tsx b/src/views/notification-center/context/NotificationCenterContext.tsx
deleted file mode 100644
index 036cd97b..00000000
--- a/src/views/notification-center/context/NotificationCenterContext.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createContext, FC, useContext } from 'react';
-import { INotificationCenterContext, NotificationCenterContextProps } from './NotificationCenterContext.types';
-
-const NotificationCenterContext = createContext<INotificationCenterContext>({
-    notificationCenterState: null,
-    dispatchNotificationCenterState: null
-});
-
-export const NotificationCenterContextProvider: FC<NotificationCenterContextProps> = props =>
-{
-    return <NotificationCenterContext.Provider value={ props.value }>{ props.children }</NotificationCenterContext.Provider>
-}
-
-export const useNotificationCenterContext = () => useContext(NotificationCenterContext);
diff --git a/src/views/notification-center/context/NotificationCenterContext.types.ts b/src/views/notification-center/context/NotificationCenterContext.types.ts
deleted file mode 100644
index 8e5358f4..00000000
--- a/src/views/notification-center/context/NotificationCenterContext.types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Dispatch, ProviderProps } from 'react';
-import { INotificationCenterAction, INotificationCenterState } from '../reducers/NotificationCenterReducer';
-
-export interface INotificationCenterContext
-{
-    notificationCenterState: INotificationCenterState;
-    dispatchNotificationCenterState: Dispatch<INotificationCenterAction>;
-}
-
-export interface NotificationCenterContextProps extends ProviderProps<INotificationCenterContext>
-{
-
-}
diff --git a/src/views/notification-center/reducers/NotificationCenterReducer.tsx b/src/views/notification-center/reducers/NotificationCenterReducer.tsx
deleted file mode 100644
index 8d861033..00000000
--- a/src/views/notification-center/reducers/NotificationCenterReducer.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Reducer } from 'react';
-import { NitroNotification } from '../common/Notification';
-
-export interface INotificationCenterState
-{
-    notifications: NitroNotification[];
-}
-
-export interface INotificationCenterAction
-{
-    type: string;
-    payload: {
-        id?: number;
-        notification?: NitroNotification;
-    };
-}
-
-export class NotificationCenterActions
-{
-    public static ADD_NOTIFICATION: string = 'NCA_ADD_NOTIFICATION';
-    public static REMOVE_NOTIFICATION: string = 'NCA_REMOVE_NOTIFICATION';
-    public static DISMISS_NOTIFICATION: string = 'NCA_DISMISS_NOTIFICATION';
-}
-
-export const initialNotificationCenter: INotificationCenterState = {
-    notifications: []
-}
-
-export const NotificationCenterReducer: Reducer<INotificationCenterState, INotificationCenterAction> = (state, action) =>
-{
-    switch(action.type)
-    {   
-        case NotificationCenterActions.ADD_NOTIFICATION: {
-            const notification = (action.payload.notification || null);
-
-            if(!notification) return state;
-
-            const notifications = [ ...state.notifications, notification ];
-
-            return { ...state, notifications };
-        }
-        case NotificationCenterActions.REMOVE_NOTIFICATION: {
-            const id = (action.payload.id || null);
-
-            if(!id) return state;
-
-            if(!state.notifications) return state;
-
-            const notifications = Array.from(state.notifications);
-            const notificationIndex = notifications.findIndex(notification => notification.id === id);
-
-            if(notificationIndex === -1) return state;
-
-            notifications.splice(notificationIndex, 1);
-
-            return { ...state, notifications };
-        }
-        case NotificationCenterActions.DISMISS_NOTIFICATION: {
-            const id = (action.payload.id || null);
-
-            if(!id) return state;
-
-            if(!state.notifications) return state;
-
-            const notifications = Array.from(state.notifications);
-            const notificationIndex = notifications.findIndex(notification => notification.id === id);
-
-            if(notificationIndex === -1) return state;
-
-            notifications[notificationIndex].dismiss();
-
-            return { ...state, notifications };
-        }
-        default:
-            return state;
-    }
-}
diff --git a/src/views/notification-center/views/alert-base/NotificationCenterAlertBase.tsx b/src/views/notification-center/views/alert-base/NotificationCenterAlertBase.tsx
deleted file mode 100644
index e071e39b..00000000
--- a/src/views/notification-center/views/alert-base/NotificationCenterAlertBase.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { FC } from 'react';
-import { LocalizeText } from '../../../../api';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { NotificationCenterAlertBaseProps } from './NotificationCenterAlertBase.types';
-
-
-export const NotificationCenterAlertBase: FC<NotificationCenterAlertBaseProps> = props =>
-{
-    const { headerText = LocalizeText('mod.alert.title'), onClose = null, children = null } = props;
-
-    return (
-        <NitroCardView className="nitro-alert" simple={ true }>
-            <NitroCardHeaderView headerText={ headerText } onCloseClick={ onClose } />
-            <NitroCardContentView className="d-flex flex-column justify-content-between text-black">
-                { children }
-            </NitroCardContentView>
-        </NitroCardView>
-    );
-}
diff --git a/src/views/notification-center/views/alert-base/NotificationCenterAlertBase.types.ts b/src/views/notification-center/views/alert-base/NotificationCenterAlertBase.types.ts
deleted file mode 100644
index e7c08d27..00000000
--- a/src/views/notification-center/views/alert-base/NotificationCenterAlertBase.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface NotificationCenterAlertBaseProps
-{
-    headerText?: string;
-    onClose: () => void;
-}
diff --git a/src/views/notification-center/views/alert-layouts/GetAlertLayout.tsx b/src/views/notification-center/views/alert-layouts/GetAlertLayout.tsx
new file mode 100644
index 00000000..fb774c6e
--- /dev/null
+++ b/src/views/notification-center/views/alert-layouts/GetAlertLayout.tsx
@@ -0,0 +1,19 @@
+import { NotificationAlertItem } from '../../common/NotificationAlertItem';
+import { NotificationAlertType } from '../../common/NotificationAlertType';
+import { NotificationDefaultAlertView } from './default/NotificationDefaultAlertView';
+import { NotificationEventAlertView } from './event/NotificationEventAlertView';
+
+export const GetAlertLayout = (item: NotificationAlertItem, close: () => void) =>
+{
+    if(!item) return null;
+
+    const props = { key: item.id, item, close };
+
+    switch(item.alertType)
+    {
+        case NotificationAlertType.EVENT:
+            return <NotificationEventAlertView { ...props } />
+        default:
+            return <NotificationDefaultAlertView { ...props } />
+    }
+}
diff --git a/src/views/notification-center/views/alert-layouts/NotificationAlertLayoutView.types.ts b/src/views/notification-center/views/alert-layouts/NotificationAlertLayoutView.types.ts
new file mode 100644
index 00000000..57c77873
--- /dev/null
+++ b/src/views/notification-center/views/alert-layouts/NotificationAlertLayoutView.types.ts
@@ -0,0 +1,7 @@
+import { NotificationAlertItem } from '../../common/NotificationAlertItem';
+
+export interface NotificationAlertLayoutViewProps
+{
+    item: NotificationAlertItem;
+    close: () => void;
+}
diff --git a/src/views/notification-center/views/alert-layouts/default/NotificationDefaultAlertView.tsx b/src/views/notification-center/views/alert-layouts/default/NotificationDefaultAlertView.tsx
new file mode 100644
index 00000000..5b567410
--- /dev/null
+++ b/src/views/notification-center/views/alert-layouts/default/NotificationDefaultAlertView.tsx
@@ -0,0 +1,35 @@
+import { FC, useCallback } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { NotificationAlertView } from '../../../../../layout';
+import { NotificationUtilities } from '../../../common/NotificationUtilities';
+import { NotificationDefaultAlertViewProps } from './NotificationDefaultAlertView.types';
+
+export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps> = props =>
+{
+    const { item = null, close = null, ...rest } = props;
+
+    const visitUrl = useCallback(() =>
+    {
+        NotificationUtilities.openUrl(item.clickUrl);
+        
+        close();
+    }, [ item, close ]);
+
+    return (
+        <NotificationAlertView title={ item.title } close={ close } { ...rest }>
+            { (item.messages.length > 0) && item.messages.map((message, index) =>
+                {
+                    const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');
+
+                    return (
+                        <div key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />
+                    );
+                }) }
+            <div className="d-flex justify-content-center align-items-center mt-1">
+                <button type="button" className="btn btn-primary" onClick={ close }>{ LocalizeText('generic.close') }</button>
+            </div>
+            { item.clickUrl && item.clickUrl.length &&
+                <button type="button" className="btn btn-link" onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</button> }
+        </NotificationAlertView>
+    );
+}
diff --git a/src/views/notification-center/views/alert-layouts/default/NotificationDefaultAlertView.types.ts b/src/views/notification-center/views/alert-layouts/default/NotificationDefaultAlertView.types.ts
new file mode 100644
index 00000000..287d8ca3
--- /dev/null
+++ b/src/views/notification-center/views/alert-layouts/default/NotificationDefaultAlertView.types.ts
@@ -0,0 +1,7 @@
+import { DetailsHTMLAttributes } from 'react';
+import { NotificationAlertLayoutViewProps } from '../NotificationAlertLayoutView.types';
+
+export interface NotificationDefaultAlertViewProps extends NotificationAlertLayoutViewProps, DetailsHTMLAttributes<HTMLDivElement>
+{
+
+}
diff --git a/src/views/notification-center/views/alert-layouts/event/NotificationEventAlertView.tsx b/src/views/notification-center/views/alert-layouts/event/NotificationEventAlertView.tsx
new file mode 100644
index 00000000..8910e22e
--- /dev/null
+++ b/src/views/notification-center/views/alert-layouts/event/NotificationEventAlertView.tsx
@@ -0,0 +1,33 @@
+import { FC, useCallback } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { NotificationAlertView } from '../../../../../layout';
+import { NotificationUtilities } from '../../../common/NotificationUtilities';
+import { NotificationEventAlertViewProps } from './NotificationEventAlertView.types';
+
+export const NotificationEventAlertView: FC<NotificationEventAlertViewProps> = props =>
+{
+    const { item = null, close = null, ...rest } = props;
+
+    const visitUrl = useCallback(() =>
+    {
+        NotificationUtilities.openUrl(item.clickUrl);
+        
+        close();
+    }, [ item, close ]);
+
+    return (
+        <NotificationAlertView title={ item.title } close={ close } { ...rest }>
+            { (item.messages.length > 0) && item.messages.map((message, index) =>
+                {
+                    const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');
+
+                    return (
+                        <div key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />
+                    );
+                }) }
+            <div className="d-flex justify-content-center align-items-center mt-1">
+                <button type="button" className="btn btn-primary" onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</button>
+            </div>
+        </NotificationAlertView>
+    );
+}
diff --git a/src/views/notification-center/views/alert-layouts/event/NotificationEventAlertView.types.ts b/src/views/notification-center/views/alert-layouts/event/NotificationEventAlertView.types.ts
new file mode 100644
index 00000000..1d8b2906
--- /dev/null
+++ b/src/views/notification-center/views/alert-layouts/event/NotificationEventAlertView.types.ts
@@ -0,0 +1,7 @@
+import { DetailsHTMLAttributes } from 'react';
+import { NotificationAlertLayoutViewProps } from '../NotificationAlertLayoutView.types';
+
+export interface NotificationEventAlertViewProps extends NotificationAlertLayoutViewProps, DetailsHTMLAttributes<HTMLDivElement>
+{
+
+}
diff --git a/src/views/notification-center/views/broadcast-message/NotificationCenterBroadcastMessageView.tsx b/src/views/notification-center/views/broadcast-message/NotificationCenterBroadcastMessageView.tsx
deleted file mode 100644
index 04908525..00000000
--- a/src/views/notification-center/views/broadcast-message/NotificationCenterBroadcastMessageView.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { FC, useMemo } from 'react';
-import { LocalizeText } from '../../../../api';
-import { NotificationCenterAlertBase } from '../alert-base/NotificationCenterAlertBase';
-import { NotificationCenterBroadcastMessageViewProps } from './NotificationCenterBroadcastMessageView.types';
-
-export const NotificationCenterBroadcastMessageView: FC<NotificationCenterBroadcastMessageViewProps> = props =>
-{
-    const { notification = null, onClose = null } = props;
-
-    const message = useMemo(() =>
-    {
-        let finalMessage = '';
-
-        notification.message.forEach(message =>
-            {
-                finalMessage += message.replace(/\r\n|\r|\n/g, '<br />');
-            });
-
-        return finalMessage;
-    }, [ notification ]);
-
-    return (
-        <NotificationCenterAlertBase onClose={ onClose }>
-            <div dangerouslySetInnerHTML={ { __html: message } } />
-            <div className="d-flex justify-content-center align-items-center">
-                <button type="button" className="btn btn-primary" onClick={ onClose }>{ LocalizeText('generic.close') }</button>
-            </div>
-        </NotificationCenterAlertBase>
-    );
-};
diff --git a/src/views/notification-center/views/broadcast-message/NotificationCenterBroadcastMessageView.types.ts b/src/views/notification-center/views/broadcast-message/NotificationCenterBroadcastMessageView.types.ts
deleted file mode 100644
index bd89dd38..00000000
--- a/src/views/notification-center/views/broadcast-message/NotificationCenterBroadcastMessageView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { NotificationCenterAlertEvent } from '../../../../events';
-
-export class NotificationCenterBroadcastMessageViewProps
-{
-    notification: NotificationCenterAlertEvent;
-    onClose: () => void;
-}
diff --git a/src/views/notification-center/views/bubble-layouts/GetBubbleLayout.tsx b/src/views/notification-center/views/bubble-layouts/GetBubbleLayout.tsx
index 08492b92..4426df56 100644
--- a/src/views/notification-center/views/bubble-layouts/GetBubbleLayout.tsx
+++ b/src/views/notification-center/views/bubble-layouts/GetBubbleLayout.tsx
@@ -1,9 +1,9 @@
-import { NotificationItem } from '../../common/NotificationItem';
-import { NotificationType } from '../../common/NotificationType';
+import { NotificationBubbleItem } from '../../common/NotificationBubbleItem';
+import { NotificationBubbleType } from '../../common/NotificationBubbleType';
 import { NotificationClubGiftBubbleView } from './club-gift/NotificationClubGiftBubbleView';
 import { NotificationDefaultBubbleView } from './default/NotificationDefaultBubbleView';
 
-export const GetBubbleLayout = (item: NotificationItem, close: () => void) =>
+export const GetBubbleLayout = (item: NotificationBubbleItem, close: () => void) =>
 {
     if(!item) return null;
 
@@ -11,7 +11,7 @@ export const GetBubbleLayout = (item: NotificationItem, close: () => void) =>
 
     switch(item.notificationType)
     {
-        case NotificationType.CLUBGIFT:
+        case NotificationBubbleType.CLUBGIFT:
             return <NotificationClubGiftBubbleView { ...props } />
         default:
             return <NotificationDefaultBubbleView { ...props } />
diff --git a/src/views/notification-center/views/bubble-layouts/NotificationBubbleLayoutView.types.ts b/src/views/notification-center/views/bubble-layouts/NotificationBubbleLayoutView.types.ts
index ca1fd341..5f9c81d6 100644
--- a/src/views/notification-center/views/bubble-layouts/NotificationBubbleLayoutView.types.ts
+++ b/src/views/notification-center/views/bubble-layouts/NotificationBubbleLayoutView.types.ts
@@ -1,7 +1,7 @@
-import { NotificationItem } from '../../common/NotificationItem';
+import { NotificationBubbleItem } from '../../common/NotificationBubbleItem';
 
 export interface NotificationBubbleLayoutViewProps
 {
-    item: NotificationItem;
+    item: NotificationBubbleItem;
     close: () => void;
 }
diff --git a/src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.tsx b/src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.tsx
deleted file mode 100644
index 650de0e4..00000000
--- a/src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { FC } from 'react';
-import { LocalizeText } from '../../../../api';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
-import { HotelWillShutdownViewProps } from './HotelWillShutdownView.types';
-
-export const HotelWillShutdownView: FC<HotelWillShutdownViewProps> = props =>
-{
-    const { notification = null, inTray = null, onButtonClick = null } = props;
-    
-    if(!notification) return null;
-
-    const content = <>{ LocalizeText('opening.hours.shutdown', ['m'], [notification.minutes.toString()]) }</>;
-
-    if(inTray)
-        return (
-            <NotificationTrayItemView title={ LocalizeText('mod.alert.title') } content={ content } timestamp={ notification.timestamp } onCloseClick={ () => onButtonClick('remove_notification') } />
-        );
-
-    return (
-        <NitroCardView className="nitro-notification" simple={ true }>
-            <NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
-            <NitroCardContentView className="text-black">
-                { content }
-            </NitroCardContentView>
-        </NitroCardView>
-    );
-};
diff --git a/src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.types.ts b/src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.types.ts
deleted file mode 100644
index 89915153..00000000
--- a/src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { HotelWillShutdownNotification } from '../../common/HotelWillShutdownNotification';
-import { NotificationViewProps } from '../../NotificationCenterView.types';
-
-export class HotelWillShutdownViewProps extends NotificationViewProps
-{
-    notification: HotelWillShutdownNotification;
-}
diff --git a/src/views/notification-center/views/moderator-message/ModeratorMessageView.tsx b/src/views/notification-center/views/moderator-message/ModeratorMessageView.tsx
deleted file mode 100644
index 341d31ea..00000000
--- a/src/views/notification-center/views/moderator-message/ModeratorMessageView.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { FC } from 'react';
-import { LocalizeText } from '../../../../api';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
-import { ModeratorMessageViewProps } from './ModeratorMessageView.types';
-
-export const ModeratorMessageView: FC<ModeratorMessageViewProps> = props =>
-{
-    const { notification = null, inTray = null, onButtonClick = null } = props;
-    
-    if(!notification) return null;
-
-    const content = <>
-        <div dangerouslySetInnerHTML={ { __html: notification.message } } />
-        <div className="fw-bold text-center">
-            <a href={ notification.link } rel="noreferrer" target="_blank" onClick={ () => onButtonClick('dismiss_notification') }>{ LocalizeText('mod.alert.link') }</a>
-        </div>
-    </>;
-
-    if(inTray)
-        return (
-            <NotificationTrayItemView title={ LocalizeText('mod.alert.title') } content={ content } timestamp={ notification.timestamp } onCloseClick={ () => onButtonClick('remove_notification') } />
-        );
-
-    return (
-        <NitroCardView className="nitro-notification" simple={ true }>
-            <NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
-            <NitroCardContentView className="text-black">
-                { content }
-            </NitroCardContentView>
-        </NitroCardView>
-    );
-};
diff --git a/src/views/notification-center/views/moderator-message/ModeratorMessageView.types.ts b/src/views/notification-center/views/moderator-message/ModeratorMessageView.types.ts
deleted file mode 100644
index 2e7c63de..00000000
--- a/src/views/notification-center/views/moderator-message/ModeratorMessageView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ModeratorMessageNotification } from '../../common/ModeratorMessageNotification';
-import { NotificationViewProps } from '../../NotificationCenterView.types';
-
-export class ModeratorMessageViewProps extends NotificationViewProps
-{
-    notification: ModeratorMessageNotification;
-}
diff --git a/src/views/notification-center/views/motd/NotificationCenterMotdView.tsx b/src/views/notification-center/views/motd/NotificationCenterMotdView.tsx
deleted file mode 100644
index 1039f298..00000000
--- a/src/views/notification-center/views/motd/NotificationCenterMotdView.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { FC } from 'react';
-import { NotificationCenterBroadcastMessageView } from '../broadcast-message/NotificationCenterBroadcastMessageView';
-import { NotificationCenterMotdViewProps } from './NotificationCenterMotdView.types';
-
-export const NotificationCenterMotdView: FC<NotificationCenterMotdViewProps> = props =>
-{
-    const { notification = null, onClose = null } = props;
-
-    return <NotificationCenterBroadcastMessageView notification={ notification } onClose={ onClose } />;
-}
diff --git a/src/views/notification-center/views/motd/NotificationCenterMotdView.types.ts b/src/views/notification-center/views/motd/NotificationCenterMotdView.types.ts
deleted file mode 100644
index 921e8634..00000000
--- a/src/views/notification-center/views/motd/NotificationCenterMotdView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { NotificationCenterAlertEvent } from '../../../../events';
-
-export interface NotificationCenterMotdViewProps
-{
-    notification: NotificationCenterAlertEvent;
-    onClose: () => void;
-}
diff --git a/src/views/notification-center/views/tray-item/NotificationTrayItemView.tsx b/src/views/notification-center/views/tray-item/NotificationTrayItemView.tsx
deleted file mode 100644
index cc836c6a..00000000
--- a/src/views/notification-center/views/tray-item/NotificationTrayItemView.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { FC } from 'react';
-import { NotificationTrayItemViewProps } from './NotificationTrayItemView.types';
-
-export const NotificationTrayItemView: FC<NotificationTrayItemViewProps> = props =>
-{
-    const { title = null, content = null, timestamp = null, onCloseClick = null } = props;
-    
-    return (
-        <div className="rounded bg-muted mb-2 text-black">
-            <div className="py-1 px-2 fw-bold d-flex justify-content-between align-items-center">
-                <div className="me-2">{ title }</div>
-                <i className="fas fa-times cursor-pointer" onClick={ onCloseClick }></i>
-            </div>
-            <div className="py-1 px-2">
-                { content }
-            </div>
-            <div className="py-1 px-2">
-                <i className="far fa-clock"></i> { timestamp }
-            </div>
-        </div>
-    );
-};
diff --git a/src/views/notification-center/views/tray-item/NotificationTrayItemView.types.ts b/src/views/notification-center/views/tray-item/NotificationTrayItemView.types.ts
deleted file mode 100644
index c84e1793..00000000
--- a/src/views/notification-center/views/tray-item/NotificationTrayItemView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export class NotificationTrayItemViewProps
-{
-    title: string;
-    content: any;
-    timestamp: number;
-    onCloseClick: () => void;
-}

From 9e3dcc2271dc72ccb406e5c73eecd8acc92b094b Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sat, 18 Sep 2021 14:37:14 -0300
Subject: [PATCH 12/31] Achievements updates

---
 src/views/achievements/AchievementsView.scss  | 29 ++++++++++++++-----
 src/views/achievements/AchievementsView.tsx   |  2 +-
 .../AchievementCategoryListItemView.tsx       | 11 ++++---
 .../category-list/AchievementsListView.tsx    |  7 ++---
 .../category/AchievementCategoryView.tsx      | 16 ++++++----
 5 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/src/views/achievements/AchievementsView.scss b/src/views/achievements/AchievementsView.scss
index 00014327..fa6343fb 100644
--- a/src/views/achievements/AchievementsView.scss
+++ b/src/views/achievements/AchievementsView.scss
@@ -1,24 +1,28 @@
 .nitro-achievements {
     width: 650px;
-
-    .content-area {
-        min-height: 376px;
-        height: 376px;
-    }
-
+    
     .score {
         border-color: $grid-border-color !important;
         background-color: $grid-bg-color;
     }
 
     .category {
+        border-color: $grid-border-color !important;
+        background-color: $grid-bg-color;
+        cursor: pointer;
+
+        &.active {
+            border-color: $grid-active-border-color !important;
+            background-color: $grid-active-bg-color;
+        }
+
         .category-score {
             margin-top: 43.5px;
         }
     }
 
     .achievements {
-        height: 230px;
+        height: 152px;
         overflow-y: auto;
         overflow-x: hidden;
 
@@ -44,4 +48,15 @@
             }
         }
     }
+
+    .achievement-image {
+        height: 80px;
+        width: 80px;
+
+        .badge-image {
+            width: 80px;
+            height: 80px;
+            background-size: contain;
+        }
+    }
 }
diff --git a/src/views/achievements/AchievementsView.tsx b/src/views/achievements/AchievementsView.tsx
index 38cdcf6c..48bb619b 100644
--- a/src/views/achievements/AchievementsView.tsx
+++ b/src/views/achievements/AchievementsView.tsx
@@ -40,7 +40,7 @@ export const AchievementsView: FC<AchievementsViewProps> = props =>
         <AchievementsContextProvider value={ { achievementsState, dispatchAchievementsState } }>
             <AchievementsMessageHandler />
             { isVisible &&
-                <NitroCardView uniqueKey="achievements" className="nitro-achievements">
+                <NitroCardView uniqueKey="achievements" className="nitro-achievements" simple={ true }>
                     <NitroCardHeaderView headerText={ LocalizeText('inventory.achievements') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardContentView>
                         <div className="row">
diff --git a/src/views/achievements/views/category-list-item/AchievementCategoryListItemView.tsx b/src/views/achievements/views/category-list-item/AchievementCategoryListItemView.tsx
index 21ebb6a7..ddc6ed24 100644
--- a/src/views/achievements/views/category-list-item/AchievementCategoryListItemView.tsx
+++ b/src/views/achievements/views/category-list-item/AchievementCategoryListItemView.tsx
@@ -1,6 +1,6 @@
+import classNames from 'classnames';
 import { FC, useCallback, useMemo } from 'react';
 import { GetConfiguration } from '../../../../api';
-import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
 import { useAchievementsContext } from '../../context/AchievementsContext';
 import { AchievementsActions } from '../../reducers/AchievementsReducer';
 import { AchievementCategoryListItemViewProps } from './AchievementCategoryListItemView.types';
@@ -58,8 +58,11 @@ export const AchievementCategoryListItemView: FC<AchievementCategoryListItemView
     }, [ dispatchAchievementsState ]);
 
     return (
-        <NitroCardGridItemView className="d-flex flex-column justify-content-center align-items-center category border border-2 rounded p-2" itemActive={ isActive } itemImage={ getCategoryImage } onClick={ event => selectCategory(category.name) }>
-            <div className="position-absolute category-score small">{ getCategoryProgress }</div>
-        </NitroCardGridItemView>
+        <div className="col mb-3">
+            <div className={ 'd-flex flex-column justify-content-center align-items-center category border border-2 rounded p-2' + classNames({ ' active': isActive }) } onClick={ () => selectCategory(category.name) }>
+                <img src={ getCategoryImage } alt="" />
+                <div className="position-absolute category-score small">{ getCategoryProgress }</div>
+            </div>
+        </div>
     );
 }
diff --git a/src/views/achievements/views/category-list/AchievementsListView.tsx b/src/views/achievements/views/category-list/AchievementsListView.tsx
index 216a3c3c..2ca173c7 100644
--- a/src/views/achievements/views/category-list/AchievementsListView.tsx
+++ b/src/views/achievements/views/category-list/AchievementsListView.tsx
@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
 import { useAchievementsContext } from '../../context/AchievementsContext';
 import { AchievementCategoryListItemView } from '../category-list-item/AchievementCategoryListItemView';
 
@@ -9,11 +8,11 @@ export const AchievementsListView: FC<{}> = props =>
     const { categories = null, selectedCategoryName = null } = achievementsState;
     
     return (
-        <NitroCardGridView columns={ 3 }>
+        <div className="row row-cols-3">
             { categories && categories.map((category, index) =>
                 {
-                    return <AchievementCategoryListItemView key={ index } category={ category } />;
+                    return <AchievementCategoryListItemView key={ index } category={ category } isActive={ selectedCategoryName === category.name } />;
                 }) }
-        </NitroCardGridView>
+        </div>
     );
 };
diff --git a/src/views/achievements/views/category/AchievementCategoryView.tsx b/src/views/achievements/views/category/AchievementCategoryView.tsx
index 050d6a64..8d59bba5 100644
--- a/src/views/achievements/views/category/AchievementCategoryView.tsx
+++ b/src/views/achievements/views/category/AchievementCategoryView.tsx
@@ -1,7 +1,7 @@
 import { AchievementData } from '@nitrots/nitro-renderer';
 import classNames from 'classnames';
-import { FC, useCallback } from 'react';
-import { LocalizeText } from '../../../../api';
+import { FC, useCallback, useMemo } from 'react';
+import { LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../../api';
 import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { useAchievementsContext } from '../../context/AchievementsContext';
 import { AchievementsActions } from '../../reducers/AchievementsReducer';
@@ -34,7 +34,7 @@ export const AchievementCategoryView: FC<AchievementCategoryViewProps> = props =
         return badgeId;
     }, []);
 
-    const getSelectedAchievement = useCallback(() =>
+    const selectedAchievement = useMemo(() =>
     {
         if(!getSelectedCategory()) return null;
         
@@ -54,13 +54,17 @@ export const AchievementCategoryView: FC<AchievementCategoryViewProps> = props =
 
     return (
         <div className="d-flex flex-column h-100">
-            <div className="bg-primary rounded p-2 d-flex align-items-center mb-3">
+            <div className="bg-primary rounded p-2 d-flex align-items-center mb-2">
                 <h5 className="m-0 me-2 w-100">{ LocalizeText('quests.' + selectedCategoryName + '.name') }</h5>
                 <div>IMAGE</div>
             </div>
-            <div className="bg-muted rounded p-2 mb-3 d-flex">
+            <div className="bg-secondary rounded p-2 mb-3 d-flex gap-2 align-items-center">
+                <div className="achievement-image">
+                    <BadgeImageView badgeCode={ getAchievementImage(selectedAchievement) } />
+                </div>
                 <div>
-                    <BadgeImageView badgeCode={ getAchievementImage(getSelectedAchievement()) } />
+                    <div>{ LocalizeBadgeName(selectedAchievement.badgeId) }</div>
+                    <div>{ LocalizeBadgeDescription(selectedAchievement.badgeId) }</div>
                 </div>
             </div>
             <div className="achievements">

From e0b7acd3686e0ad60f8b739ec56cd96d8cce931e Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sun, 19 Sep 2021 17:56:46 -0300
Subject: [PATCH 13/31] Fix Achievements (shut up harmony)

---
 src/views/achievements/reducers/AchievementsReducer.tsx     | 6 ++++--
 .../achievements/views/category/AchievementCategoryView.tsx | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/views/achievements/reducers/AchievementsReducer.tsx b/src/views/achievements/reducers/AchievementsReducer.tsx
index 460d998a..8ae9f004 100644
--- a/src/views/achievements/reducers/AchievementsReducer.tsx
+++ b/src/views/achievements/reducers/AchievementsReducer.tsx
@@ -43,13 +43,15 @@ export const AchievementsReducer: Reducer<IAchievementsState, IAchievementsActio
             const categories = (action.payload.categories || state.categories || null);
 
             let selectedCategoryName = null;
+            let selectedAchievementId = null;
 
             if(categories.length > 0)
             {
-                selectedCategoryName = categories[0].name;    
+                selectedCategoryName = categories[0].name;
+                selectedAchievementId = categories[0].achievements[0].achievementId;   
             }
 
-            return { ...state, categories, selectedCategoryName };
+            return { ...state, categories, selectedCategoryName, selectedAchievementId };
         }
         case AchievementsActions.SET_SCORE: {
             const score = (action.payload.score || state.score || null);
diff --git a/src/views/achievements/views/category/AchievementCategoryView.tsx b/src/views/achievements/views/category/AchievementCategoryView.tsx
index 8d59bba5..879c4d84 100644
--- a/src/views/achievements/views/category/AchievementCategoryView.tsx
+++ b/src/views/achievements/views/category/AchievementCategoryView.tsx
@@ -58,7 +58,7 @@ export const AchievementCategoryView: FC<AchievementCategoryViewProps> = props =
                 <h5 className="m-0 me-2 w-100">{ LocalizeText('quests.' + selectedCategoryName + '.name') }</h5>
                 <div>IMAGE</div>
             </div>
-            <div className="bg-secondary rounded p-2 mb-3 d-flex gap-2 align-items-center">
+            { selectedAchievement && <div className="bg-secondary rounded p-2 mb-3 d-flex gap-2 align-items-center">
                 <div className="achievement-image">
                     <BadgeImageView badgeCode={ getAchievementImage(selectedAchievement) } />
                 </div>
@@ -66,7 +66,7 @@ export const AchievementCategoryView: FC<AchievementCategoryViewProps> = props =
                     <div>{ LocalizeBadgeName(selectedAchievement.badgeId) }</div>
                     <div>{ LocalizeBadgeDescription(selectedAchievement.badgeId) }</div>
                 </div>
-            </div>
+            </div> }
             <div className="achievements">
                 <div className="row row-cols-4">
                     { getSelectedCategory().achievements.map((achievement, index) =>

From d5e6a79c8a0f9be2602407e3a65f95473f43b134 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sun, 19 Sep 2021 18:01:27 -0300
Subject: [PATCH 14/31] Extra check to Achievements

---
 src/views/achievements/reducers/AchievementsReducer.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/achievements/reducers/AchievementsReducer.tsx b/src/views/achievements/reducers/AchievementsReducer.tsx
index 8ae9f004..6f8e2b11 100644
--- a/src/views/achievements/reducers/AchievementsReducer.tsx
+++ b/src/views/achievements/reducers/AchievementsReducer.tsx
@@ -48,7 +48,8 @@ export const AchievementsReducer: Reducer<IAchievementsState, IAchievementsActio
             if(categories.length > 0)
             {
                 selectedCategoryName = categories[0].name;
-                selectedAchievementId = categories[0].achievements[0].achievementId;   
+                
+                if(categories[0].achievements.length > 0) selectedAchievementId = categories[0].achievements[0].achievementId;   
             }
 
             return { ...state, categories, selectedCategoryName, selectedAchievementId };

From e97f18c53c8d56bc06ec1750c5b4b049294d7d49 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Mon, 20 Sep 2021 04:17:38 -0400
Subject: [PATCH 15/31] Update craco config

---
 craco.config.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/craco.config.js b/craco.config.js
index 661daecc..4f5320a4 100644
--- a/craco.config.js
+++ b/craco.config.js
@@ -5,6 +5,23 @@ module.exports = {
     webpack: {
         configure: (webpackConfig) => ({
             ...webpackConfig,
+            optimization: {
+                ...webpackConfig.optimization,
+                splitChunks: {
+                    cacheGroups: {
+                        vendor: {
+                            name: 'vendors',
+                            test: /[\\/]node_modules[\\/]/,
+                            chunks: 'all',
+                        },
+                        renderer: {
+                            name: 'renderer',
+                            test: /[\\/]node_modules[\\/]@nitrots[\\/]nitro-renderer[\\/]/,
+                            chunks: 'all',
+                        }
+                    }
+                }
+            },
             module: {
                 ...webpackConfig.module,
                 rules: webpackConfig.module.rules.map((rule) => 

From 6a2821389688f5e75b3ddda2e05811dec2b2fbdb Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 21 Sep 2021 21:48:00 -0400
Subject: [PATCH 16/31] Messenger updates

---
 src/api/friends/OpenMessengerChat.ts          |   5 +-
 .../friends/FriendsMessengerIconEvent.ts      |  23 ++
 src/events/friends/index.ts                   |   1 +
 .../card/content/NitroCardContentView.scss    |   1 +
 .../catalog/common/AttemptCatalogPlacement.ts |  30 ++
 .../catalog/common/IsCatalogOfferDraggable.ts |   8 +
 .../views/page/offer/CatalogPageOfferView.tsx |  15 +-
 .../views/page/product/CatalogProductView.tsx |   2 +-
 src/views/friends/FriendsMessageHandler.tsx   |  23 +-
 src/views/friends/common/MessengerChat.ts     |  49 ---
 .../common/MessengerChatMessageGroup.ts       |  35 --
 src/views/friends/common/MessengerThread.ts   |  83 ++++
 ...rChatMessage.ts => MessengerThreadChat.ts} |  25 +-
 .../common/MessengerThreadChatGroup.ts        |  28 ++
 src/views/friends/reducers/FriendsReducer.tsx |  64 +--
 .../FriendsMessengerThreadGroup.tsx           |  48 +++
 .../FriendsMessengerThreadGroup.types.ts      |   8 +
 .../FriendsMessengerThreadView.tsx            |  17 +
 .../FriendsMessengerThreadView.types.ts       |   6 +
 .../views/messenger/FriendsMessengerView.scss |   1 +
 .../views/messenger/FriendsMessengerView.tsx  | 365 ++++++++++--------
 .../chat/message/ChatWidgetMessageView.scss   |   4 +-
 .../shared/avatar-image/AvatarImage.scss      |   6 +
 .../shared/avatar-image/AvatarImageView.tsx   |  11 +-
 .../room-previewer/RoomPreviewerView.scss     |   1 -
 src/views/toolbar/ToolbarView.scss            |  25 +-
 src/views/toolbar/ToolbarView.tsx             |  48 ++-
 src/views/toolbar/ToolbarView.types.ts        |   1 +
 tsconfig.json                                 |   2 +-
 29 files changed, 569 insertions(+), 366 deletions(-)
 create mode 100644 src/events/friends/FriendsMessengerIconEvent.ts
 create mode 100644 src/views/catalog/common/AttemptCatalogPlacement.ts
 create mode 100644 src/views/catalog/common/IsCatalogOfferDraggable.ts
 delete mode 100644 src/views/friends/common/MessengerChat.ts
 delete mode 100644 src/views/friends/common/MessengerChatMessageGroup.ts
 create mode 100644 src/views/friends/common/MessengerThread.ts
 rename src/views/friends/common/{MessengerChatMessage.ts => MessengerThreadChat.ts} (51%)
 create mode 100644 src/views/friends/common/MessengerThreadChatGroup.ts
 create mode 100644 src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.tsx
 create mode 100644 src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.types.ts
 create mode 100644 src/views/friends/views/messenger-thread/FriendsMessengerThreadView.tsx
 create mode 100644 src/views/friends/views/messenger-thread/FriendsMessengerThreadView.types.ts

diff --git a/src/api/friends/OpenMessengerChat.ts b/src/api/friends/OpenMessengerChat.ts
index 08520b1b..0b8ab554 100644
--- a/src/api/friends/OpenMessengerChat.ts
+++ b/src/api/friends/OpenMessengerChat.ts
@@ -1,6 +1,7 @@
 import { CreateLinkEvent } from '..';
 
-export function OpenMessengerChat(friendId: number): void
+export function OpenMessengerChat(friendId: number = -1): void
 {
-    CreateLinkEvent(`friends/messenger/${friendId}`);
+    if(friendId === -1) CreateLinkEvent('friends/messenger/open');
+    else CreateLinkEvent(`friends/messenger/${friendId}`);
 }
diff --git a/src/events/friends/FriendsMessengerIconEvent.ts b/src/events/friends/FriendsMessengerIconEvent.ts
new file mode 100644
index 00000000..602eb726
--- /dev/null
+++ b/src/events/friends/FriendsMessengerIconEvent.ts
@@ -0,0 +1,23 @@
+import { NitroEvent } from '@nitrots/nitro-renderer';
+
+export class FriendsMessengerIconEvent extends NitroEvent
+{
+    public static UPDATE_ICON: string = 'FMIE_UPDATE_ICON';
+    public static HIDE_ICON: number = 0;
+    public static SHOW_ICON: number = 1;
+    public static UNREAD_ICON: number = 2;
+
+    private _iconType: number;
+
+    constructor(type: string, subType: number = FriendsMessengerIconEvent.SHOW_ICON)
+    {
+        super(type);
+
+        this._iconType = subType;
+    }
+
+    public get iconType(): number
+    {
+        return this._iconType;
+    }
+}
diff --git a/src/events/friends/index.ts b/src/events/friends/index.ts
index 9a4bb3ed..2f3699c3 100644
--- a/src/events/friends/index.ts
+++ b/src/events/friends/index.ts
@@ -1,4 +1,5 @@
 export * from './FriendEnteredRoomEvent';
 export * from './FriendListContentEvent';
 export * from './FriendsEvent';
+export * from './FriendsMessengerIconEvent';
 export * from './FriendsSendFriendRequestEvent';
diff --git a/src/layout/card/content/NitroCardContentView.scss b/src/layout/card/content/NitroCardContentView.scss
index 9ffd6fe9..4cbe6ee3 100644
--- a/src/layout/card/content/NitroCardContentView.scss
+++ b/src/layout/card/content/NitroCardContentView.scss
@@ -1,4 +1,5 @@
 .content-area {
+    height: 100%;
     padding-top: $container-padding-x;
     padding-bottom: $container-padding-x;
     overflow: auto;
diff --git a/src/views/catalog/common/AttemptCatalogPlacement.ts b/src/views/catalog/common/AttemptCatalogPlacement.ts
new file mode 100644
index 00000000..af342ee3
--- /dev/null
+++ b/src/views/catalog/common/AttemptCatalogPlacement.ts
@@ -0,0 +1,30 @@
+import { CatalogPageMessageOfferData, RoomObjectCategory, RoomObjectPlacementSource } from '@nitrots/nitro-renderer';
+import { GetRoomEngine } from '../../../api';
+import { IsCatalogOfferDraggable } from './IsCatalogOfferDraggable';
+import { ProductTypeEnum } from './ProductTypeEnum';
+
+export const AttemptCatalogPlacement = (offer: CatalogPageMessageOfferData) =>
+{
+    if(!IsCatalogOfferDraggable(offer)) return;
+
+    const product = offer.products[0];
+
+    let category: number = -1;
+
+    switch(product.productType)
+    {
+        case ProductTypeEnum.FLOOR:
+            category = RoomObjectCategory.FLOOR;
+            break;
+        case ProductTypeEnum.WALL:
+            category = RoomObjectCategory.WALL;
+            break;
+    }
+
+    if(category === -1) return;
+
+    if(GetRoomEngine().processRoomObjectPlacement(RoomObjectPlacementSource.CATALOG, -(offer.offerId), category, product.furniClassId, (product.extraParam) ? product.extraParam.toString() : null))
+    {
+        
+    }
+}
diff --git a/src/views/catalog/common/IsCatalogOfferDraggable.ts b/src/views/catalog/common/IsCatalogOfferDraggable.ts
new file mode 100644
index 00000000..174ce4d0
--- /dev/null
+++ b/src/views/catalog/common/IsCatalogOfferDraggable.ts
@@ -0,0 +1,8 @@
+import { CatalogPageMessageOfferData, RoomControllerLevel } from '@nitrots/nitro-renderer';
+import { GetRoomSession } from '../../../api';
+import { ProductTypeEnum } from './ProductTypeEnum';
+
+export const IsCatalogOfferDraggable = (offer: CatalogPageMessageOfferData) =>
+{
+    return ((GetRoomSession().isRoomOwner || (GetRoomSession().isGuildRoom && (GetRoomSession().controllerLevel >= RoomControllerLevel.GUILD_MEMBER))) && (offer.products.length === 1) && (offer.products[0].productType !== ProductTypeEnum.EFFECT) && (offer.products[0].productType !== ProductTypeEnum.HABBO_CLUB))
+}
diff --git a/src/views/catalog/views/page/offer/CatalogPageOfferView.tsx b/src/views/catalog/views/page/offer/CatalogPageOfferView.tsx
index 89f6b90f..980ee8e7 100644
--- a/src/views/catalog/views/page/offer/CatalogPageOfferView.tsx
+++ b/src/views/catalog/views/page/offer/CatalogPageOfferView.tsx
@@ -1,5 +1,5 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, useCallback } from 'react';
+import { FC, MouseEvent, useCallback, useState } from 'react';
 import { useCatalogContext } from '../../../context/CatalogContext';
 import { CatalogActions } from '../../../reducers/CatalogReducer';
 import { CatalogProductView } from '../product/CatalogProductView';
@@ -8,6 +8,7 @@ import { CatalogPageOfferViewProps } from './CatalogPageOfferView.types';
 export const CatalogPageOfferView: FC<CatalogPageOfferViewProps> = props =>
 {
     const { isActive = false, offer = null } = props;
+    const [ isMouseDown, setMouseDown ] = useState(false);
     const { dispatchCatalogState = null } = useCatalogContext();
 
     const onMouseEvent = useCallback((event: MouseEvent) =>
@@ -24,8 +25,18 @@ export const CatalogPageOfferView: FC<CatalogPageOfferViewProps> = props =>
                     }
                 });
                 return;
+            case MouseEventType.MOUSE_DOWN:
+                console.log('ye')
+                setMouseDown(true);
+                return;
+            case MouseEventType.MOUSE_UP:
+                setMouseDown(false);
+                return;
+            case MouseEventType.ROLL_OUT:
+                if(!isMouseDown || !isActive) return;
+                return;
         }
-    }, [ isActive, offer, dispatchCatalogState ]);
+    }, [ isActive, offer, isMouseDown, dispatchCatalogState ]);
 
     const product = ((offer.products && offer.products[0]) || null);
 
diff --git a/src/views/catalog/views/page/product/CatalogProductView.tsx b/src/views/catalog/views/page/product/CatalogProductView.tsx
index 684488d0..2bb1c543 100644
--- a/src/views/catalog/views/page/product/CatalogProductView.tsx
+++ b/src/views/catalog/views/page/product/CatalogProductView.tsx
@@ -65,7 +65,7 @@ export const CatalogProductView: FC<CatalogProductViewProps> = props =>
 
     return (
         <div className="col pe-1 pb-1 catalog-offer-item-container">
-            <div className={ 'position-relative border border-2 rounded catalog-offer-item cursor-pointer ' + (isActive ? 'active ' : '') + (product.uniqueLimitedItem ? 'unique-item ' : '') + ((product.uniqueLimitedItem && !product.uniqueLimitedItemsLeft) ? 'sold-out ' : '') } style={ { backgroundImage: imageUrl }} onClick={ onMouseEvent }>
+            <div className={ 'position-relative border border-2 rounded catalog-offer-item cursor-pointer ' + (isActive ? 'active ' : '') + (product.uniqueLimitedItem ? 'unique-item ' : '') + ((product.uniqueLimitedItem && !product.uniqueLimitedItemsLeft) ? 'sold-out ' : '') } style={ { backgroundImage: imageUrl }} onClick={ onMouseEvent } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
                 { !imageUrl && (product.productType === ProductTypeEnum.ROBOT) &&
                     <AvatarImageView figure={ product.extraParam } direction={ 3 } headOnly={ true } /> }
                 { (product.productCount > 1) && <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ product.productCount }</span> }
diff --git a/src/views/friends/FriendsMessageHandler.tsx b/src/views/friends/FriendsMessageHandler.tsx
index 479fc961..ce84725e 100644
--- a/src/views/friends/FriendsMessageHandler.tsx
+++ b/src/views/friends/FriendsMessageHandler.tsx
@@ -1,8 +1,6 @@
-import { FriendListFragmentEvent, FriendListUpdateEvent, FriendRequestsEvent, GetFriendRequestsComposer, MessengerInitEvent, NewConsoleMessageEvent } from '@nitrots/nitro-renderer';
+import { FriendListFragmentEvent, FriendListUpdateEvent, FriendRequestsEvent, GetFriendRequestsComposer, MessengerInitEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { GetSessionDataManager } from '../../api';
 import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
-import { MessengerChatMessage } from './common/MessengerChatMessage';
 import { MessengerSettings } from './common/MessengerSettings';
 import { useFriendsContext } from './context/FriendsContext';
 import { FriendsActions } from './reducers/FriendsReducer';
@@ -10,7 +8,6 @@ import { FriendsActions } from './reducers/FriendsReducer';
 export const FriendsMessageHandler: FC<{}> = props =>
 {
     const { friendsState = null, dispatchFriendsState = null } = useFriendsContext();
-    const { activeChats = [] } = friendsState;
 
     const onMessengerInitEvent = useCallback((event: MessengerInitEvent) =>
     {
@@ -66,28 +63,10 @@ export const FriendsMessageHandler: FC<{}> = props =>
         });
     }, [ dispatchFriendsState ]);
 
-    const onNewConsoleMessageEvent = useCallback((event: NewConsoleMessageEvent) =>
-    {
-        const parser = event.getParser();
-
-        let userId = parser.senderId;
-
-        if(userId === GetSessionDataManager().userId) userId = 0;
-
-        dispatchFriendsState({
-            type: FriendsActions.ADD_CHAT_MESSAGE,
-            payload: {
-                chatMessage: new MessengerChatMessage(MessengerChatMessage.MESSAGE, userId, parser.messageText, parser.secondsSinceSent, parser.extraData),
-                boolValue: true
-            }
-        });
-    }, [ dispatchFriendsState ]);
-
     CreateMessageHook(MessengerInitEvent, onMessengerInitEvent);
     CreateMessageHook(FriendListFragmentEvent, onFriendsFragmentEvent);
     CreateMessageHook(FriendListUpdateEvent, onFriendsUpdateEvent);
     CreateMessageHook(FriendRequestsEvent, onFriendRequestsEvent);
-    CreateMessageHook(NewConsoleMessageEvent, onNewConsoleMessageEvent);
 
     return null;
 }
diff --git a/src/views/friends/common/MessengerChat.ts b/src/views/friends/common/MessengerChat.ts
deleted file mode 100644
index 4b49d0ae..00000000
--- a/src/views/friends/common/MessengerChat.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { MessengerChatMessage } from './MessengerChatMessage';
-import { MessengerChatMessageGroup } from './MessengerChatMessageGroup';
-export class MessengerChat
-{
-    private _friendId: number;
-    private _isRead: boolean;
-    private _messageGroups: MessengerChatMessageGroup[];
-
-    constructor(friendId: number)
-    {
-        this._friendId = friendId;
-        this._isRead = true;
-        this._messageGroups = [];
-    }
-
-    public addMessage(message: MessengerChatMessage, setAsNotRead: boolean = true, isSystem: boolean = false): void
-    {
-        if(!this.lastMessageGroup || this.lastMessageGroup.userId !== message.senderId || isSystem || this.lastMessageGroup.isSystem) this._messageGroups.push(new MessengerChatMessageGroup(message.senderId, isSystem));
-
-        this.lastMessageGroup.addMessage(message);
-        
-        if(setAsNotRead) this._isRead = false;
-    }
-
-    public read(): void
-    {
-        this._isRead = true;
-    }
-
-    public get friendId(): number
-    {
-        return this._friendId;
-    }
-
-    public get isRead(): boolean
-    {
-        return this._isRead;
-    }
-
-    public get messageGroups(): MessengerChatMessageGroup[]
-    {
-        return this._messageGroups;
-    }
-
-    public get lastMessageGroup(): MessengerChatMessageGroup
-    {
-        return this._messageGroups[this._messageGroups.length - 1];
-    }
-}
diff --git a/src/views/friends/common/MessengerChatMessageGroup.ts b/src/views/friends/common/MessengerChatMessageGroup.ts
deleted file mode 100644
index 0fad7be8..00000000
--- a/src/views/friends/common/MessengerChatMessageGroup.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { MessengerChatMessage } from './MessengerChatMessage';
-
-export class MessengerChatMessageGroup
-{
-    private _userId: number;
-    private _messages: MessengerChatMessage[];
-    private _isSystem: boolean;
-
-    constructor(userId: number, isSystem: boolean)
-    {
-        this._userId = userId;
-        this._messages = [];
-        this._isSystem = isSystem;
-    }
-
-    public addMessage(message: MessengerChatMessage): void
-    {
-        this._messages.push(message);
-    }
-
-    public get userId(): number
-    {
-        return this._userId;
-    }
-
-    public get messages(): MessengerChatMessage[]
-    {
-        return this._messages;
-    }
-
-    public get isSystem(): boolean
-    {
-        return this._isSystem;
-    }
-}
diff --git a/src/views/friends/common/MessengerThread.ts b/src/views/friends/common/MessengerThread.ts
new file mode 100644
index 00000000..a2ee75e1
--- /dev/null
+++ b/src/views/friends/common/MessengerThread.ts
@@ -0,0 +1,83 @@
+import { LocalizeText } from '../../../api';
+import { MessengerFriend } from './MessengerFriend';
+import { MessengerThreadChat } from './MessengerThreadChat';
+import { MessengerThreadChatGroup } from './MessengerThreadChatGroup';
+
+export class MessengerThread
+{
+    public static MESSAGE_RECEIVED: string = 'MT_MESSAGE_RECEIVED';
+
+    private _participant: MessengerFriend;
+    private _groups: MessengerThreadChatGroup[];
+    private _lastUpdated: Date;
+    private _unread: boolean;
+
+    constructor(participant: MessengerFriend, isNew: boolean = true)
+    {
+        this._participant = participant;
+        this._groups = [];
+        this._lastUpdated = new Date();
+        this._unread = false;
+
+        if(isNew)
+        {
+            this.addMessage(-1, LocalizeText('messenger.moderationinfo'), 0, null, MessengerThreadChat.SECURITY_NOTIFICATION);
+
+            this._unread = false;
+        }
+    }
+
+    public addMessage(senderId: number, message: string, secondsSinceSent: number = 0, extraData: string = null, type: number = 0): MessengerThreadChat
+    {
+        const group = this.getLastGroup(senderId);
+
+        if(!group) return;
+
+        const chat = new MessengerThreadChat(senderId, message, secondsSinceSent, extraData, type);
+
+        group.addChat(chat);
+
+        this._lastUpdated = new Date();
+        this._unread = true;
+
+        return chat;
+    }
+
+    private getLastGroup(userId: number): MessengerThreadChatGroup
+    {
+        let group = this._groups[(this._groups.length - 1)];
+
+        if(group && (group.userId === userId)) return group;
+
+        group = new MessengerThreadChatGroup(userId);
+
+        this._groups.push(group);
+
+        return group;
+    }
+
+    public setRead(): void
+    {
+        this._unread = false;
+    }
+
+    public get participant(): MessengerFriend
+    {
+        return this._participant;
+    }
+
+    public get groups(): MessengerThreadChatGroup[]
+    {
+        return this._groups;
+    }
+
+    public get lastUpdated(): Date
+    {
+        return this._lastUpdated;
+    }
+
+    public get unread(): boolean
+    {
+        return this._unread;
+    }
+}
diff --git a/src/views/friends/common/MessengerChatMessage.ts b/src/views/friends/common/MessengerThreadChat.ts
similarity index 51%
rename from src/views/friends/common/MessengerChatMessage.ts
rename to src/views/friends/common/MessengerThreadChat.ts
index 6a0aced7..2927fecc 100644
--- a/src/views/friends/common/MessengerChatMessage.ts
+++ b/src/views/friends/common/MessengerThreadChat.ts
@@ -1,23 +1,25 @@
-export class MessengerChatMessage
+export class MessengerThreadChat
 {
-    public static MESSAGE: number = 0;
+    public static CHAT: number = 0;
     public static ROOM_INVITE: number = 1;
-    public static SECURITY_ALERT: number = 2;
-    public static STATUS_ALERT: number = 3;
+    public static STATUS_NOTIFICATION: number = 2;
+    public static SECURITY_NOTIFICATION: number = 3;
 
     private _type: number;
     private _senderId: number;
     private _message: string;
-    private _sentAt: number;
+    private _secondsSinceSent: number;
     private _extraData: string;
+    private _date: Date;
 
-    constructor(type: number, senderId: number, message: string, sentAt: number, extraData?: string)
+    constructor(senderId: number, message: string, secondsSinceSent: number = 0, extraData: string = null, type: number = 0)
     {
         this._type = type;
         this._senderId = senderId;
         this._message = message;
-        this._sentAt = sentAt;
+        this._secondsSinceSent = secondsSinceSent;
         this._extraData = extraData;
+        this._date = new Date();
     }
 
     public get type(): number
@@ -35,13 +37,18 @@ export class MessengerChatMessage
         return this._message;
     }
 
-    public get sentAt(): number
+    public get secondsSinceSent(): number
     {
-        return this._sentAt;
+        return this._secondsSinceSent;
     }
 
     public get extraData(): string
     {
         return this._extraData;
     }
+
+    public get date(): Date
+    {
+        return this._date;
+    }
 }
diff --git a/src/views/friends/common/MessengerThreadChatGroup.ts b/src/views/friends/common/MessengerThreadChatGroup.ts
new file mode 100644
index 00000000..661dcb07
--- /dev/null
+++ b/src/views/friends/common/MessengerThreadChatGroup.ts
@@ -0,0 +1,28 @@
+import { MessengerThreadChat } from './MessengerThreadChat';
+
+export class MessengerThreadChatGroup
+{
+    private _userId: number;
+    private _chats: MessengerThreadChat[];
+
+    constructor(userId: number)
+    {
+        this._userId = userId;
+        this._chats = [];
+    }
+
+    public addChat(message: MessengerThreadChat): void
+    {
+        this._chats.push(message);
+    }
+
+    public get userId(): number
+    {
+        return this._userId;
+    }
+
+    public get chats(): MessengerThreadChat[]
+    {
+        return this._chats;
+    }
+}
diff --git a/src/views/friends/reducers/FriendsReducer.tsx b/src/views/friends/reducers/FriendsReducer.tsx
index 82f2e734..1901bb49 100644
--- a/src/views/friends/reducers/FriendsReducer.tsx
+++ b/src/views/friends/reducers/FriendsReducer.tsx
@@ -1,7 +1,5 @@
 import { FriendListUpdateParser, FriendParser, FriendRequestData } from '@nitrots/nitro-renderer';
 import { Reducer } from 'react';
-import { MessengerChat } from '../common/MessengerChat';
-import { MessengerChatMessage } from '../common/MessengerChatMessage';
 import { MessengerFriend } from '../common/MessengerFriend';
 import { MessengerRequest } from '../common/MessengerRequest';
 import { MessengerSettings } from '../common/MessengerSettings';
@@ -18,8 +16,6 @@ export interface IFriendsState
     settings: MessengerSettings;
     friends: MessengerFriend[];
     requests: MessengerRequest[];
-    activeChats: MessengerChat[];
-    firstChatEverOpen: boolean;
 }
 
 export interface IFriendsAction
@@ -30,8 +26,6 @@ export interface IFriendsAction
         fragment?: FriendParser[];
         update?: FriendListUpdateParser;
         requests?: FriendRequestData[];
-        chats?: MessengerChat[];
-        chatMessage?: MessengerChatMessage;
         numberValue?: number;
         boolValue?: boolean;
     }
@@ -44,17 +38,12 @@ export class FriendsActions
     public static PROCESS_FRAGMENT: string = 'FA_PROCESS_FRAGMENT';
     public static PROCESS_UPDATE: string = 'FA_PROCESS_UPDATE';
     public static PROCESS_REQUESTS: string = 'FA_PROCESS_REQUESTS';
-    public static SET_ACTIVE_CHATS: string = 'FA_SET_ACTIVE_CHATS';
-    public static SET_CHAT_READ: string = 'FA_SET_CHAT_READ';
-    public static ADD_CHAT_MESSAGE: string = 'FA_ADD_CHAT_MESSAGE';
 }
 
 export const initialFriends: IFriendsState = {
     settings: null,
     friends: [],
-    requests: [],
-    activeChats: [],
-    firstChatEverOpen: false
+    requests: []
 }
 
 export const FriendsReducer: Reducer<IFriendsState, IFriendsAction> = (state, action) =>
@@ -108,11 +97,17 @@ export const FriendsReducer: Reducer<IFriendsState, IFriendsAction> = (state, ac
                 {
                     const index = friends.findIndex(existingFriend => (existingFriend.id === friend.id));
 
-                    const newFriend = new MessengerFriend();
-                    newFriend.populate(friend);
+                    if(index === -1)
+                    {
+                        const newFriend = new MessengerFriend();
+                        newFriend.populate(friend);
 
-                    if(index > -1) friends[index] = newFriend;
-                    else friends.unshift(newFriend);
+                        friends.unshift(newFriend);
+                    }
+                    else
+                    {
+                        friends[index].populate(friend);
+                    }
                 }
 
                 for(const friend of update.addedFriends) processUpdate(friend);
@@ -146,43 +141,6 @@ export const FriendsReducer: Reducer<IFriendsState, IFriendsAction> = (state, ac
 
             return { ...state, requests };
         }
-        case FriendsActions.SET_ACTIVE_CHATS: {
-            const activeChats = (action.payload.chats || []);
-            
-            if(!state.firstChatEverOpen && activeChats.length > 0) activeChats[0].addMessage(new MessengerChatMessage(MessengerChatMessage.SECURITY_ALERT, 0, null, 0), false, true);
-            
-            return { ...state, activeChats, firstChatEverOpen: true };
-        }
-        case FriendsActions.SET_CHAT_READ: {
-            const friendId = action.payload.numberValue;
-            
-            const activeChats = Array.from(state.activeChats);
-
-            let activeChatIndex = activeChats.findIndex(c => c.friendId === friendId);
-
-            if(activeChatIndex > -1) activeChats[activeChatIndex].read();
-            
-            return { ...state, activeChats };
-        }
-        case FriendsActions.ADD_CHAT_MESSAGE: {
-            const message = action.payload.chatMessage;
-            const toFriendId = action.payload.numberValue;
-            const setAsNotRead = action.payload.boolValue;
-
-            const activeChats = Array.from(state.activeChats);
-
-            let activeChatIndex = activeChats.findIndex(c => c.friendId === toFriendId ? toFriendId : message.senderId);
-
-            if(activeChatIndex === -1)
-            {
-                activeChats.push(new MessengerChat(message.senderId));
-                activeChatIndex = activeChats.length - 1;
-            }
-
-            activeChats[activeChatIndex].addMessage(message, setAsNotRead);
-
-            return { ...state, activeChats };
-        }
         default:
             return state;
     }
diff --git a/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.tsx b/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.tsx
new file mode 100644
index 00000000..b0d30ea7
--- /dev/null
+++ b/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.tsx
@@ -0,0 +1,48 @@
+import { FC } from 'react';
+import { GetSessionDataManager } from '../../../../api';
+import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { MessengerThreadChat } from '../../common/MessengerThreadChat';
+import { FriendsMessengerThreadGroupProps } from './FriendsMessengerThreadGroup.types';
+
+export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> = props =>
+{
+    const { thread = null, group = null } = props;
+
+    if(!thread || !group) return null;
+
+    if(group.userId === -1)
+    {
+        return (
+            <div className="d-flex gap-2 w-100 justify-content-start">
+                { group.chats.map((chat, index) =>
+                    {
+                        return (
+                            <div key={ index } className="text-break">
+                                { chat.type === MessengerThreadChat.SECURITY_NOTIFICATION &&
+                                    <div className="bg-light rounded mb-2 d-flex gap-2 px-2 py-1 small text-muted align-items-center">
+                                        <i className="icon icon-friendlist-warning flex-shrink-0" />
+                                        <div>{ chat.message }</div>
+                                    </div> }
+                            </div>
+                        );
+                    }) }
+            </div>
+        );
+    }
+
+    return (
+        <div className={ 'd-flex gap-2 w-100 justify-content-' + (group.userId === 0 ? 'end' : 'start') }>
+            { (group.userId > 0) &&
+                <div className="message-avatar flex-shrink-0">
+                    <AvatarImageView figure={ thread.participant.figure } direction={ 2 } />
+                </div> }
+            <div className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (group.userId === 0 ? 'right' : 'left') }>
+                { group.chats.map((chat, index) => <div key={ index } className="text-break">{ chat.message }</div>) }
+            </div>
+            { (group.userId === 0) &&
+                <div className="message-avatar flex-shrink-0">
+                    <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
+                </div> }
+        </div>
+    );
+}
diff --git a/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.types.ts b/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.types.ts
new file mode 100644
index 00000000..12a0ed17
--- /dev/null
+++ b/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.types.ts
@@ -0,0 +1,8 @@
+import { MessengerThread } from '../../common/MessengerThread';
+import { MessengerThreadChatGroup } from '../../common/MessengerThreadChatGroup';
+
+export interface FriendsMessengerThreadGroupProps
+{
+    thread: MessengerThread;
+    group: MessengerThreadChatGroup;
+}
diff --git a/src/views/friends/views/messenger-thread/FriendsMessengerThreadView.tsx b/src/views/friends/views/messenger-thread/FriendsMessengerThreadView.tsx
new file mode 100644
index 00000000..3bf6326a
--- /dev/null
+++ b/src/views/friends/views/messenger-thread/FriendsMessengerThreadView.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { FriendsMessengerThreadGroup } from '../messenger-thread-group/FriendsMessengerThreadGroup';
+import { FriendsMessengerThreadViewProps } from './FriendsMessengerThreadView.types';
+
+export const FriendsMessengerThreadView: FC<FriendsMessengerThreadViewProps> = props =>
+{
+    const { thread = null } = props;
+
+    return (
+        <>
+            { (thread.groups.length > 0) && thread.groups.map((group, index) =>
+                {
+                    return <FriendsMessengerThreadGroup key={ index } thread={ thread } group={ group } />;
+                }) }
+        </>
+    );
+}
diff --git a/src/views/friends/views/messenger-thread/FriendsMessengerThreadView.types.ts b/src/views/friends/views/messenger-thread/FriendsMessengerThreadView.types.ts
new file mode 100644
index 00000000..a6e0f4c4
--- /dev/null
+++ b/src/views/friends/views/messenger-thread/FriendsMessengerThreadView.types.ts
@@ -0,0 +1,6 @@
+import { MessengerThread } from '../../common/MessengerThread';
+
+export interface FriendsMessengerThreadViewProps
+{
+    thread: MessengerThread;
+}
diff --git a/src/views/friends/views/messenger/FriendsMessengerView.scss b/src/views/friends/views/messenger/FriendsMessengerView.scss
index bbfdb0aa..596ab19f 100644
--- a/src/views/friends/views/messenger/FriendsMessengerView.scss
+++ b/src/views/friends/views/messenger/FriendsMessengerView.scss
@@ -1,5 +1,6 @@
 .nitro-friends-messenger {
     width: 280px;
+    resize: both;
 
     .friend-head {
         position: relative;
diff --git a/src/views/friends/views/messenger/FriendsMessengerView.tsx b/src/views/friends/views/messenger/FriendsMessengerView.tsx
index 882b435f..dac6a7a5 100644
--- a/src/views/friends/views/messenger/FriendsMessengerView.tsx
+++ b/src/views/friends/views/messenger/FriendsMessengerView.tsx
@@ -1,41 +1,134 @@
-import { FollowFriendMessageComposer, ILinkEventTracker, NitroEvent, SendMessageComposer, UserProfileComposer } from '@nitrots/nitro-renderer';
+import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, SendMessageComposer, UserProfileComposer } from '@nitrots/nitro-renderer';
 import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { AddEventLinkTracker, GetSessionDataManager, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
-import { FriendsEvent } from '../../../../events/friends/FriendsEvent';
-import { SendMessageHook, useUiEvent } from '../../../../hooks';
+import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
+import { FriendsMessengerIconEvent } from '../../../../events';
+import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
-import { MessengerChat } from '../../common/MessengerChat';
-import { MessengerChatMessage } from '../../common/MessengerChatMessage';
+import { MessengerThread } from '../../common/MessengerThread';
+import { MessengerThreadChat } from '../../common/MessengerThreadChat';
 import { useFriendsContext } from '../../context/FriendsContext';
-import { FriendsActions } from '../../reducers/FriendsReducer';
+import { FriendsMessengerThreadView } from '../messenger-thread/FriendsMessengerThreadView';
 
 export const FriendsMessengerView: FC<{}> = props =>
 {
-    const { friendsState = null, dispatchFriendsState = null } = useFriendsContext();
-    const { activeChats = [], friends = [] } = friendsState;
-
     const [ isVisible, setIsVisible ] = useState(false);
-    const [ selectedChatIndex, setSelectedChatIndex ] = useState(0);
-    const [ message, setMessage ] = useState('');
-
+    const [ messageThreads, setMessageThreads ] = useState<MessengerThread[]>([]);
+    const [ activeThreadIndex, setActiveThreadIndex ] = useState(-1);
+    const [ hiddenThreadIndexes, setHiddenThreadIndexes ] = useState<number[]>([]);
+    const [ messageText, setMessageText ] = useState('');
+    const { friendsState = null } = useFriendsContext();
+    const { friends = [] } = friendsState;
     const messagesBox = useRef<HTMLDivElement>();
-    
-    const onNitroEvent = useCallback((event: NitroEvent) =>
-    {
-        switch(event.type)
-        {
-            case FriendsEvent.SHOW_FRIEND_MESSENGER:
-                setIsVisible(true);
-                return;
-            case FriendsEvent.TOGGLE_FRIEND_MESSENGER:
-                setIsVisible(value => !value);
-                return;
-        }
-    }, []);
+    const [ updateValue, setUpdateValue ] = useState({});
 
-    useUiEvent(FriendsEvent.SHOW_FRIEND_MESSENGER, onNitroEvent);
-    useUiEvent(FriendsEvent.TOGGLE_FRIEND_MESSENGER, onNitroEvent);
+    const followFriend = useCallback(() =>
+    {
+        SendMessageHook(new FollowFriendMessageComposer(messageThreads[activeThreadIndex].participant.id));
+    }, [ messageThreads, activeThreadIndex ]);
+
+    const openProfile = useCallback(() =>
+    {
+        SendMessageHook(new UserProfileComposer(messageThreads[activeThreadIndex].participant.id));
+    }, [ messageThreads, activeThreadIndex ]);
+
+    const getFriend = useCallback((userId: number) =>
+    {
+        return ((friends.find(friend => (friend.id === userId))) || null);
+    }, [ friends ]);
+
+    const visibleThreads = useMemo(() =>
+    {
+        return messageThreads.filter((thread, index) =>
+            {
+                if(hiddenThreadIndexes.indexOf(index) >= 0) return false;
+
+                return true;
+            });
+    }, [ messageThreads, hiddenThreadIndexes ]);
+
+    const getMessageThreadWithIndex = useCallback<(userId: number) => [ number, MessengerThread ]>((userId: number) =>
+    {
+        if(messageThreads.length > 0)
+        {
+            for(let i = 0; i < messageThreads.length; i++)
+            {
+                const thread = messageThreads[i];
+
+                if(thread.participant && (thread.participant.id === userId))
+                {
+                    const hiddenIndex = hiddenThreadIndexes.indexOf(i);
+
+                    if(hiddenIndex >= 0)
+                    {
+                        setHiddenThreadIndexes(prevValue =>
+                            {
+                                const newIndexes = [ ...prevValue ];
+
+                                newIndexes.splice(hiddenIndex, 1);
+
+                                return newIndexes;
+                            });
+                    }
+
+                    return [ i, thread ];
+                }
+            }
+        }
+
+        const friend = getFriend(userId);
+
+        if(!friend) return [ -1, null ];
+
+        const thread = new MessengerThread(friend);
+        const newThreads = [ ...messageThreads, thread ];
+
+        setMessageThreads(newThreads);
+
+        return [ (newThreads.length - 1), thread ];
+    }, [ messageThreads, hiddenThreadIndexes, getFriend ]);
+
+    const onNewConsoleMessageEvent = useCallback((event: NewConsoleMessageEvent) =>
+    {
+        const parser = event.getParser();
+        const [ threadIndex, thread ] = getMessageThreadWithIndex(parser.senderId);
+
+        if((threadIndex === -1) || !thread) return;
+
+        thread.addMessage(parser.senderId, parser.messageText, parser.secondsSinceSent, parser.extraData);
+
+        setMessageThreads(prevValue => [ ...prevValue ]);
+    }, [ getMessageThreadWithIndex ]);
+
+    CreateMessageHook(NewConsoleMessageEvent, onNewConsoleMessageEvent);
+
+    const sendMessage = useCallback(() =>
+    {
+        if(!messageText || !messageText.length) return;
+
+        if(activeThreadIndex === -1) return;
+
+        const thread = messageThreads[activeThreadIndex];
+
+        if(!thread) return;
+
+        SendMessageHook(new SendMessageComposer(thread.participant.id, messageText));
+
+        thread.addMessage(0, messageText, 0, null, MessengerThreadChat.CHAT);
+
+        BatchUpdates(() =>
+        {
+            setMessageThreads(prevValue => [ ...prevValue ]);
+            setMessageText('');
+        });
+    }, [ messageThreads, activeThreadIndex, messageText ]);
+
+    const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) =>
+    {
+        if(event.key !== 'Enter') return;
+
+        sendMessage();
+    }, [ sendMessage ]);
 
     const linkReceived = useCallback((url: string) =>
     {
@@ -43,69 +136,35 @@ export const FriendsMessengerView: FC<{}> = props =>
 
         if(parts.length < 3) return;
 
-        const friendId = parseInt(parts[2]);
-
-        let existingChatIndex = activeChats.findIndex(c => c.friendId === friendId);
-
-        if(existingChatIndex === -1)
+        if(parts[2] === 'open')
         {
-            const clonedActiveChats = Array.from(activeChats);
-            clonedActiveChats.push(new MessengerChat(friendId));
+            setIsVisible(true);
 
-            dispatchFriendsState({
-                type: FriendsActions.SET_ACTIVE_CHATS,
-                payload: {
-                    chats: clonedActiveChats
-                }
-            });
-
-            existingChatIndex = clonedActiveChats.length - 1;
+            return;
         }
 
-        setSelectedChatIndex(existingChatIndex);
-        setIsVisible(true);
-    }, [ activeChats, dispatchFriendsState ]);
+        const [ threadIndex ] = getMessageThreadWithIndex(parseInt(parts[2]));
 
-    const getFriendFigure = useCallback((id: number) =>
-    {
-        const friend = friends.find(f => f.id === id);
+        if(threadIndex === -1) return;
 
-        if(!friend) return null;
-
-        return friend.figure;
-    }, [ friends ]);
-
-    const selectChat = useCallback((index: number) =>
-    {
-        const chat = activeChats[index];
-
-        if(!chat) return;
-
-        dispatchFriendsState({
-            type: FriendsActions.SET_CHAT_READ,
-            payload: {
-                numberValue: chat.friendId
-            }
+        BatchUpdates(() =>
+        {
+            setActiveThreadIndex(threadIndex);
+            setIsVisible(true);
         });
-        
-        setSelectedChatIndex(index);
-    }, [ activeChats, dispatchFriendsState ]);
+    }, [ getMessageThreadWithIndex ]);
 
-    const selectedChat = useMemo(() =>
-    {        
-        return activeChats[selectedChatIndex];
-    }, [ activeChats, selectedChatIndex ]);
-
-    const selectedChatFriend = useMemo(() =>
+    const closeThread = useCallback((threadIndex: number) =>
     {
-        if(!selectedChat) return null;
+        setHiddenThreadIndexes(prevValue =>
+            {
+                const values = [ ...prevValue ];
 
-        const friend = friends.find(f => f.id === selectedChat.friendId);
+                if(values.indexOf(threadIndex) === -1) values.push(threadIndex);
 
-        if(!friend) return null;
-
-        return friend;
-    }, [ friends, selectedChat ]);
+                return values;
+            });
+    }, []);
 
     useEffect(() =>
     {
@@ -121,112 +180,102 @@ export const FriendsMessengerView: FC<{}> = props =>
 
     useEffect(() =>
     {
-        if(!messagesBox || !messagesBox.current) return;
-        
-        messagesBox.current.scrollTop = messagesBox.current.scrollHeight;
+        if(!isVisible) return;
 
-    }, [ selectedChat ]);
+        if(activeThreadIndex === -1) setActiveThreadIndex(0);
+    }, [ isVisible, activeThreadIndex ]);
 
-    const followFriend = useCallback(() =>
+    useEffect(() =>
     {
-        SendMessageHook(new FollowFriendMessageComposer(selectedChatFriend.id));
-    }, [ selectedChatFriend ]);
+        if(hiddenThreadIndexes.indexOf(activeThreadIndex) >= 0) setActiveThreadIndex(0);
+    }, [ activeThreadIndex, hiddenThreadIndexes ]);
 
-    const openProfile = useCallback(() =>
+    useEffect(() =>
     {
-        SendMessageHook(new UserProfileComposer(selectedChatFriend.id));
-    }, [ selectedChatFriend ]);
+        if(!isVisible || (activeThreadIndex === -1)) return;
 
-    const sendMessage = useCallback(() =>
+        const activeThread = messageThreads[activeThreadIndex];
+
+        if(activeThread.unread)
+        {
+            messagesBox.current.scrollTop = messagesBox.current.scrollHeight;
+            activeThread.setRead();
+            setUpdateValue({});
+        }
+    }, [ isVisible, messageThreads, activeThreadIndex ]);
+
+    useEffect(() =>
     {
-        if(message.length === 0) return;
+        if(!visibleThreads.length)
+        {
+            setIsVisible(false);
 
-        SendMessageHook(new SendMessageComposer(selectedChat.friendId, message));
+            dispatchUiEvent(new FriendsMessengerIconEvent(FriendsMessengerIconEvent.UPDATE_ICON, FriendsMessengerIconEvent.HIDE_ICON));
 
-        dispatchFriendsState({
-            type: FriendsActions.ADD_CHAT_MESSAGE,
-            payload: {
-                chatMessage: new MessengerChatMessage(MessengerChatMessage.MESSAGE, 0, message, (new Date().getMilliseconds())),
-                numberValue: selectedChat.friendId,
-                boolValue: false
+            return;
+        }
+
+        let isUnread = false;
+
+        for(const thread of visibleThreads)
+        {
+            if(thread.unread)
+            {
+                isUnread = true;
+
+                break;
             }
-        });
-        setMessage('');
-    }, [ selectedChat, message, dispatchFriendsState ]);
+        }
 
-    const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) =>
-    {
-        if(event.key !== 'Enter') return;
-
-        sendMessage();
-    }, [ sendMessage ]);
+        dispatchUiEvent(new FriendsMessengerIconEvent(FriendsMessengerIconEvent.UPDATE_ICON, isUnread ? FriendsMessengerIconEvent.UNREAD_ICON : FriendsMessengerIconEvent.SHOW_ICON));
+    }, [ visibleThreads, updateValue ]);
 
     if(!isVisible) return null;
 
-    return (<NitroCardView className="nitro-friends-messenger" simple={ true }>
-                <NitroCardHeaderView headerText={ LocalizeText('messenger.window.title', ['OPEN_CHAT_COUNT'], [activeChats.length.toString()]) } onCloseClick={ () => setIsVisible(false) } />
-                <NitroCardContentView>
-                    <div className="d-flex gap-2 overflow-auto pb-1">
-                        { activeChats && activeChats.map((chat, index) =>
+    return (
+        <NitroCardView className="nitro-friends-messenger" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('messenger.window.title', [ 'OPEN_CHAT_COUNT' ], [ visibleThreads.length.toString() ]) } onCloseClick={ event => setIsVisible(false) } />
+            <NitroCardContentView>
+                <div className="d-flex gap-2 overflow-auto pb-1">
+                    { visibleThreads && (visibleThreads.length > 0) && visibleThreads.map((thread, index) =>
                         {
-                            return <div key={ index } className="friend-head rounded flex-shrink-0 cursor-pointer bg-muted" onClick={ () => selectChat(index) }>
-                                { !chat.isRead && <i className="icon icon-friendlist-new-message" /> }
-                                <AvatarImageView figure={ getFriendFigure(chat.friendId) } headOnly={true} direction={3} />
-                            </div>;
+                            const messageThreadIndex = messageThreads.indexOf(thread);
+
+                            return (
+                                <div key={ index } className="friend-head rounded flex-shrink-0 cursor-pointer bg-muted" onClick={ event => setActiveThreadIndex(messageThreadIndex) }>
+                                    { thread.unread && <i className="icon icon-friendlist-new-message" /> }
+                                    <AvatarImageView figure={ thread.participant.figure } headOnly={ true } direction={ 3 } />
+                                </div>
+                            );
                         }) }
-                    </div>
-                    <hr className="bg-dark mt-3 mb-2" />
-                    { selectedChat && selectedChatFriend && <>
-                        <div className="text-black chat-title bg-light pe-2 position-absolute">{ LocalizeText('messenger.window.separator', ['FRIEND_NAME'], [ selectedChatFriend.name ]) }</div>
+                </div>
+                <hr className="bg-dark mt-3 mb-2" />
+                { (activeThreadIndex >= 0) &&
+                    <>
+                        <div className="text-black chat-title bg-light pe-2 position-absolute">
+                            { LocalizeText('messenger.window.separator', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) }
+                        </div>
                         <div className="d-flex gap-2 mb-2">
                             <div className="btn-group">
-                                <button className="btn btn-sm btn-primary" onClick={ followFriend }>
+                                <button className="d-flex justify-content-center align-items-center btn btn-sm btn-primary" onClick={ followFriend }>
                                     <i className="icon icon-friendlist-follow" />
                                 </button>
-                                <button className="btn btn-sm btn-primary" onClick={ openProfile }>
+                                <button className="d-flex justify-content-center align-items-center btn btn-sm btn-primary" onClick={ openProfile }>
                                     <i className="icon icon-user-profile" />
                                 </button>
                             </div>
                             <button className="btn btn-sm btn-danger">{ LocalizeText('messenger.window.button.report') }</button>
-                            <button className="btn btn-sm btn-primary ms-auto"><i className="fas fa-times" /></button>
+                            <button className="btn btn-sm btn-primary ms-auto" onClick={ event => closeThread(activeThreadIndex) }><i className="fas fa-times" /></button>
                         </div>
                         <div ref={ messagesBox } className="bg-muted p-2 rounded chat-messages mb-2 d-flex flex-column">
-                            { selectedChat.messageGroups.map((group, groupIndex) =>
-                            {
-                                return <div key={ groupIndex } className={ 'd-flex gap-2 w-100 justify-content-' + (group.userId === 0 ? 'end' : 'start') }>
-                                    { group.isSystem && <>
-                                        { group.messages.map((message, messageIndex) =>
-                                            {
-                                                return <div key={ messageIndex } className="text-break">
-                                                    { message.type === MessengerChatMessage.SECURITY_ALERT && <div className="bg-light rounded mb-2 d-flex gap-2 px-2 py-1 small text-muted align-items-center">
-                                                        <i className="icon icon-friendlist-warning flex-shrink-0" />
-                                                        <div>{ LocalizeText('messenger.moderationinfo') }</div>
-                                                    </div> }
-                                                </div>
-                                            }) }
-                                    </> }
-                                    { !group.isSystem && <>
-                                        { group.userId !== 0 && <div className="message-avatar flex-shrink-0">
-                                            <AvatarImageView figure={ selectedChatFriend.figure } direction={ 2 } />
-                                        </div> }
-                                        <div className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (group.userId === 0 ? 'right' : 'left') }>
-                                            { group.messages.map((message, messageIndex) =>
-                                            {
-                                                return <div key={ messageIndex } className="text-break">{ message.message }</div>
-                                            }) }
-                                        </div>
-                                        { group.userId === 0 && <div className="message-avatar flex-shrink-0">
-                                            <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
-                                        </div> }
-                                    </> }
-                                </div>;
-                            }) }
+                            <FriendsMessengerThreadView thread={ messageThreads[activeThreadIndex] } />
                         </div>
                         <div className="d-flex gap-2">
-                            <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('messenger.window.input.default', ['FRIEND_NAME'], [ selectedChatFriend.name ]) } value={ message } onChange={ (e) => setMessage(e.target.value) } onKeyDown={ onKeyDown } />
+                            <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('messenger.window.input.default', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) } value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } />
                             <button className="btn btn-sm btn-success" onClick={ sendMessage }>{ LocalizeText('widgets.chatinput.say') }</button>
                         </div>
                     </> }
-                </NitroCardContentView>
-            </NitroCardView>);
-};
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss b/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
index 9bdbcb6b..9337ed85 100644
--- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
+++ b/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
@@ -696,7 +696,6 @@
             justify-content: center;
             height: 100%;
             max-height: 24px;
-            image-rendering: -webkit-optimize-contrast;
             overflow: hidden;
 
             .user-image {
@@ -707,8 +706,9 @@
                 height: 130px;
                 background-repeat: no-repeat;
                 background-position: center;
-                transform: scale(0.5) translateZ(0);
+                transform: scale(0.5);
                 overflow: hidden;
+                image-rendering: -webkit-optimize-contrast;
             }
         }
 
diff --git a/src/views/shared/avatar-image/AvatarImage.scss b/src/views/shared/avatar-image/AvatarImage.scss
index f85ca9c4..a552dbb2 100644
--- a/src/views/shared/avatar-image/AvatarImage.scss
+++ b/src/views/shared/avatar-image/AvatarImage.scss
@@ -6,4 +6,10 @@
     background-position-x: center;
     background-position-y: -8px !important;
     pointer-events: none;
+    image-rendering: pixelated;
+
+    &.scale-0-5,
+    &.scale-0-75 {
+        image-rendering: -webkit-optimize-contrast;
+    }
 }
diff --git a/src/views/shared/avatar-image/AvatarImageView.tsx b/src/views/shared/avatar-image/AvatarImageView.tsx
index 5d2a2a33..d8e96979 100644
--- a/src/views/shared/avatar-image/AvatarImageView.tsx
+++ b/src/views/shared/avatar-image/AvatarImageView.tsx
@@ -1,5 +1,5 @@
 import { AvatarScaleType, AvatarSetType } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useRef, useState } from 'react';
+import { FC, useEffect, useMemo, useRef, useState } from 'react';
 import { GetAvatarRenderManager } from '../../../api';
 import { AvatarImageViewProps } from './AvatarImageView.types';
 
@@ -10,6 +10,13 @@ export const AvatarImageView: FC<AvatarImageViewProps> = props =>
     const [ randomValue, setRandomValue ] = useState(-1);
     const isDisposed = useRef(false);
 
+    const getScaleStyle = useMemo(() =>
+    {
+        if(scale === .5) return '0-5';
+
+        return scale.toString();
+    }, [ scale ]);
+
     useEffect(() =>
     {
         const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, gender, {
@@ -50,5 +57,5 @@ export const AvatarImageView: FC<AvatarImageViewProps> = props =>
 
     const url = `url('${ avatarUrl }')`;
         
-    return <div className={ 'avatar-image scale-' + scale } style={ (avatarUrl && url.length) ? { backgroundImage: url } : {} }></div>;
+    return <div className={ 'avatar-image scale-' + getScaleStyle } style={ (avatarUrl && url.length) ? { backgroundImage: url } : {} }></div>;
 }
diff --git a/src/views/shared/room-previewer/RoomPreviewerView.scss b/src/views/shared/room-previewer/RoomPreviewerView.scss
index 55328299..e6192624 100644
--- a/src/views/shared/room-previewer/RoomPreviewerView.scss
+++ b/src/views/shared/room-previewer/RoomPreviewerView.scss
@@ -12,7 +12,6 @@
         background-color: $light;
         background-repeat: no-repeat;
         background-position: center;
-        image-rendering: auto;
     
         &.border-0 {
             &::after {
diff --git a/src/views/toolbar/ToolbarView.scss b/src/views/toolbar/ToolbarView.scss
index 44abb043..57401e81 100644
--- a/src/views/toolbar/ToolbarView.scss
+++ b/src/views/toolbar/ToolbarView.scss
@@ -29,31 +29,28 @@
                 align-items: center;
                 justify-content: center;
                 cursor: pointer;
-                width: 50px;
-                margin: 0 1px;
+                //margin: 0 1px;
                 position: relative;
 
-                .toolbar-avatar {
-                    height: 50px;
+                &.item-avatar {
+                    width: 50px;
+                    height: 45px;
+                    overflow: hidden;
                     
                     .avatar-image {
                         margin-left: -5px;
-                        margin-top: -30px;
-                    }
-
-                    &:hover, &.active {
-                        height: 53px;
+                        margin-top: 25px;
                     }
                 }
 
                 .icon,
-                .toolbar-avatar {
+                &.item-avatar {
                     position: relative;
-                    transition: transform .2s ease-out;
+                    //transition: transform .2s ease-out;
 
                     &:hover, &.active {
-                        -webkit-transform: translate(0, -3px);
-                        transform: translate(0, -3px);
+                        -webkit-transform: translate(-1px, -1px);
+                        transform: translate(-1px, -1px);
                         filter: drop-shadow(2px 2px 0 rgba($black, 0.8));
                     }
                 }
@@ -68,7 +65,7 @@
 
                 .count {
                     top: 0rem;
-                    right: 5px;
+                    right: 2px;
                     font-size: 10px;
                 }
             }
diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index 3ab96937..4d10456b 100644
--- a/src/views/toolbar/ToolbarView.tsx
+++ b/src/views/toolbar/ToolbarView.tsx
@@ -1,7 +1,7 @@
 import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, Queue, UserInfoDataParser, UserInfoEvent, UserProfileComposer, Wait } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GoToDesktop } from '../../api';
-import { AvatarEditorEvent, CatalogEvent, FriendsEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
+import { GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GoToDesktop, OpenMessengerChat } from '../../api';
+import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
 import { AchievementsUIEvent } from '../../events/achievements';
 import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
@@ -14,6 +14,10 @@ import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
 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;
@@ -21,6 +25,7 @@ export const ToolbarView: FC<ToolbarViewProps> = 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 unseenFriendListCount = 0;
@@ -45,6 +50,13 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
     
     CreateMessageHook(FigureUpdateEvent, onUserFigureEvent);
 
+    const onFriendsMessengerIconEvent = useCallback((event: FriendsMessengerIconEvent) =>
+    {
+        setChatIconType(event.iconType);
+    }, []);
+
+    useUiEvent(FriendsMessengerIconEvent.UPDATE_ICON, onFriendsMessengerIconEvent);
+
     const onUnseenItemTrackerUpdateEvent = useCallback((event: UnseenItemTrackerUpdateEvent) =>
     {
         setUnseenInventoryCount(event.count);
@@ -131,6 +143,9 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                 dispatchUiEvent(new UserSettingsUIEvent(UserSettingsUIEvent.TOGGLE_USER_SETTINGS));
                 setMeExpanded(false);
                 return;
+            case ToolbarViewItems.FRIEND_CHAT_ITEM:
+                OpenMessengerChat();
+                return;
         }
     }, []);
 
@@ -148,20 +163,16 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                 <ToolbarMeView 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 toolbar-left-side">
-                    <div className="navigation-items navigation-avatar pe-1 me-2">
-                        <div className="navigation-item">
-                            <div className={ 'toolbar-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
-                                <AvatarImageView figure={ userFigure } direction={ 2 } />
-                            </div>
+                <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 } />
+                            { (unseenAchievementsCount > 0) &&
+                                <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div> }
                         </div>
-                        { (unseenAchievementsCount > 0) && (
-                            <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div>) }
-                    </div>
-                    <div className="navigation-items">
                         { isInRoom && (
                             <div className="navigation-item" onClick={ visitDesktop }>
-                                <i className="icon icon-hotelview icon-nitro-light"></i>
+                                <i className="icon icon-habbo"></i>
                             </div>) }
                         { !isInRoom && (
                             <div className="navigation-item">
@@ -188,13 +199,20 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                     </div>
                     <div id="toolbar-chat-input-container" className="d-flex align-items-center" />
                 </div>
-                <div className="d-flex toolbar-right-side">
-                    <div className="navigation-items">
+                <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>
                             { (unseenFriendListCount > 0) && (
                                 <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
                         </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" /> }
+                                { (unseenFriendListCount > 0) &&
+                                    <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div> }
+                            </div> }
                     </div>
                     <div id="toolbar-friend-bar-container" />
                 </div>
diff --git a/src/views/toolbar/ToolbarView.types.ts b/src/views/toolbar/ToolbarView.types.ts
index 0670bca7..48a376d1 100644
--- a/src/views/toolbar/ToolbarView.types.ts
+++ b/src/views/toolbar/ToolbarView.types.ts
@@ -9,6 +9,7 @@ export class ToolbarViewItems
     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';
diff --git a/tsconfig.json b/tsconfig.json
index df4dcf04..ac2a9fd7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,6 +24,6 @@
   },
   "include": [
     "src",
-    "node_modules/@nitrots/nitro-renderer/**/*.ts",
+    "node_modules/@nitrots/nitro-renderer/src/**/*.ts",
   ]
 }

From 34ab1e6fd381722f401f86551e2a449ad10c707f Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 22 Sep 2021 15:01:56 -0400
Subject: [PATCH 17/31] Layout updates

---
 src/App.scss                                  |  15 +++
 src/assets/styles/bootstrap/_variables.scss   |   3 +-
 src/assets/styles/utils.scss                  |   8 ++
 src/layout/card/NitroCardView.scss            |   1 +
 .../card/content/NitroCardContentView.scss    |   1 -
 .../card/content/NitroCardContentView.tsx     |   2 +-
 src/layout/card/grid/NitroCardGridView.scss   |   4 +-
 src/layout/card/grid/NitroCardGridView.tsx    |  35 ++++--
 .../card/grid/NitroCardGridView.types.ts      |   7 --
 .../grid/context/NitroCardGridContext.tsx     |  13 --
 .../context/NitroCardGridContext.types.ts     |  11 --
 src/layout/card/grid/context/index.ts         |   2 -
 src/layout/card/grid/index.ts                 |   1 -
 .../card/grid/item/NitroCardGridItemView.scss | 112 ++++++------------
 .../card/grid/item/NitroCardGridItemView.tsx  |  53 ++++++---
 .../grid/item/NitroCardGridItemView.types.ts  |   2 -
 src/views/achievements/AchievementsView.scss  |   8 +-
 src/views/avatar-editor/AvatarEditorView.scss |  39 +++++-
 .../figure-set/AvatarEditorFigureSetView.tsx  |   3 +-
 .../views/model/AvatarEditorModelView.tsx     |   2 +-
 .../AvatarEditorPaletteSetView.tsx            |   3 +-
 .../wardrobe/AvatarEditorWardrobeView.tsx     |   3 +-
 src/views/catalog/CatalogView.scss            |   9 +-
 src/views/inventory/InventoryView.scss        |   9 +-
 .../item/InventoryFurnitureItemView.tsx       |   2 +-
 .../views/trade/InventoryTradeView.tsx        |   6 +-
 src/views/navigator/NavigatorView.scss        |   9 +-
 .../shared/avatar-image/AvatarImage.scss      |   3 +-
 .../shared/avatar-image/AvatarImageView.tsx   |   6 +
 29 files changed, 183 insertions(+), 189 deletions(-)
 delete mode 100644 src/layout/card/grid/context/NitroCardGridContext.tsx
 delete mode 100644 src/layout/card/grid/context/NitroCardGridContext.types.ts
 delete mode 100644 src/layout/card/grid/context/index.ts

diff --git a/src/App.scss b/src/App.scss
index 8d450e5a..474a2f07 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -17,6 +17,21 @@ $grid-active-border-color: $white;
 
 $toolbar-height: 55px;
 
+$achievement-width: 650px;
+$achievement-height: 400px;
+
+$avatar-editor-width: 620px;
+$avatar-editor-height: 374px;
+
+$catalog-width: 620px;
+$catalog-height: 400px;
+
+$inventory-width: 485px;
+$inventory-height: 315px;
+
+$navigator-width: 400px;
+$navigator-height: 420px;
+
 .nitro-app {
     width: 100%;
     height: 100%;
diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss
index 57aa9b7d..feb71255 100644
--- a/src/assets/styles/bootstrap/_variables.scss
+++ b/src/assets/styles/bootstrap/_variables.scss
@@ -85,6 +85,7 @@ $ghost:         #c8cad0 !default;
 $gray-chateau:  #a3a7b1 !default;
 $gable-green:   #1C323F !default;
 $william:       #3d5f6e !default;
+$bluewood:      #304059 !default;
 $success:       $green !default;
 $info:          $cyan !default;
 $warning:       $yellow !default;
@@ -385,7 +386,7 @@ $enable-transitions:          true !default;
 $enable-reduced-motion:       true !default;
 $enable-smooth-scroll:        true !default;
 $enable-grid-classes:         true !default;
-$enable-cssgrid:              false !default;
+$enable-cssgrid:              true !default;
 $enable-button-pointers:      true !default;
 $enable-rfs:                  true !default;
 $enable-validation-icons:     true !default;
diff --git a/src/assets/styles/utils.scss b/src/assets/styles/utils.scss
index 0050c41b..cc44e17f 100644
--- a/src/assets/styles/utils.scss
+++ b/src/assets/styles/utils.scss
@@ -10,6 +10,14 @@
     transform: scale(1) translateZ(0);
 }
 
+.scale-1-25 {
+    transform: scale(1.25) translateZ(0);
+}
+
+.scale-1-50 {
+    transform: scale(1.50) translateZ(0);
+}
+
 .scale-2 {
     transform: scale(2) translateZ(0);
 }
diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss
index cd7bfebf..84390259 100644
--- a/src/layout/card/NitroCardView.scss
+++ b/src/layout/card/NitroCardView.scss
@@ -3,6 +3,7 @@ $nitro-card-tabs-height: 33px;
 
 .nitro-card {
     pointer-events: all;
+    resize: both;
 
     @import './accordion/NitroCardAccordionView';
     @import './content/NitroCardContentView';
diff --git a/src/layout/card/content/NitroCardContentView.scss b/src/layout/card/content/NitroCardContentView.scss
index 4cbe6ee3..c56cad8c 100644
--- a/src/layout/card/content/NitroCardContentView.scss
+++ b/src/layout/card/content/NitroCardContentView.scss
@@ -10,6 +10,5 @@
         height: 100% !important;
         min-height: auto !important;
         max-height: 100% !important;
-        resize: none !important;
     }
 }
diff --git a/src/layout/card/content/NitroCardContentView.tsx b/src/layout/card/content/NitroCardContentView.tsx
index 969069b2..ee3c1a72 100644
--- a/src/layout/card/content/NitroCardContentView.tsx
+++ b/src/layout/card/content/NitroCardContentView.tsx
@@ -8,7 +8,7 @@ export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
     const { simple = false } = useNitroCardContext();
     
     return (
-        <div className={ `container-fluid bg-light content-area ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
+        <div className={ `container-fluid bg-light content-area d-flex flex-column overflow-hidden ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
             { children }
         </div>
     );
diff --git a/src/layout/card/grid/NitroCardGridView.scss b/src/layout/card/grid/NitroCardGridView.scss
index f5794406..71acb2ee 100644
--- a/src/layout/card/grid/NitroCardGridView.scss
+++ b/src/layout/card/grid/NitroCardGridView.scss
@@ -66,6 +66,6 @@
             }
         }
     }
-
-    @import './item/NitroCardGridItemView.scss';
 }
+
+@import './item/NitroCardGridItemView.scss';
diff --git a/src/layout/card/grid/NitroCardGridView.tsx b/src/layout/card/grid/NitroCardGridView.tsx
index a9a85c64..033927a4 100644
--- a/src/layout/card/grid/NitroCardGridView.tsx
+++ b/src/layout/card/grid/NitroCardGridView.tsx
@@ -1,18 +1,31 @@
-import { FC } from 'react';
-import { NitroCardGridContextProvider } from './context/NitroCardGridContext';
-import { NitroCardGridThemes, NitroCardGridViewProps } from './NitroCardGridView.types';
+import { FC, useMemo } from 'react';
+import { NitroCardGridViewProps } from './NitroCardGridView.types';
 
 export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
 {
-    const { columns = 5, theme = NitroCardGridThemes.THEME_DEFAULT, className = '', children = null, ...rest } = props;
+    const { columns = 5, className = '', style = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'grid gap-2 overflow-auto';
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className ]);
+
+    const getStyle = useMemo(() =>
+    {
+        const newStyle = { ...style };
+
+        newStyle['--bs-columns'] = columns.toString();
+
+        return newStyle;
+    }, [ style, columns ]);
 
     return (
-        <NitroCardGridContextProvider value={ { theme } }>
-            <div className={ `h-100 overflow-hidden nitro-card-grid ${ theme } ${ className || '' }` } { ...rest }>
-                <div className={ `row row-cols-${ columns } align-content-start g-0 w-100 h-100 overflow-auto` }>
-                    { children }
-                </div>
-            </div>
-        </NitroCardGridContextProvider>
+        <div className={ getClassName } style={ getStyle } { ...rest }>
+            { children }
+        </div>
     );
 }
diff --git a/src/layout/card/grid/NitroCardGridView.types.ts b/src/layout/card/grid/NitroCardGridView.types.ts
index f3cc6c80..d5dc256d 100644
--- a/src/layout/card/grid/NitroCardGridView.types.ts
+++ b/src/layout/card/grid/NitroCardGridView.types.ts
@@ -3,11 +3,4 @@ import { DetailsHTMLAttributes } from 'react';
 export interface NitroCardGridViewProps extends DetailsHTMLAttributes<HTMLDivElement>
 {
     columns?: number;
-    theme?: string;
-}
-
-export class NitroCardGridThemes
-{
-    public static THEME_DEFAULT: string = 'theme-default';
-    public static THEME_SHADOWED: string = 'theme-shadowed';
 }
diff --git a/src/layout/card/grid/context/NitroCardGridContext.tsx b/src/layout/card/grid/context/NitroCardGridContext.tsx
deleted file mode 100644
index 18661b76..00000000
--- a/src/layout/card/grid/context/NitroCardGridContext.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createContext, FC, useContext } from 'react';
-import { INitroCardGridContext, NitroCardGridContextProps } from './NitroCardGridContext.types';
-
-const NitroCardGridContext = createContext<INitroCardGridContext>({
-    theme: null
-});
-
-export const NitroCardGridContextProvider: FC<NitroCardGridContextProps> = props =>
-{
-    return <NitroCardGridContext.Provider value={ props.value }>{ props.children }</NitroCardGridContext.Provider>
-}
-
-export const useNitroCardGridContext = () => useContext(NitroCardGridContext);
diff --git a/src/layout/card/grid/context/NitroCardGridContext.types.ts b/src/layout/card/grid/context/NitroCardGridContext.types.ts
deleted file mode 100644
index a0f97c95..00000000
--- a/src/layout/card/grid/context/NitroCardGridContext.types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ProviderProps } from 'react';
-
-export interface INitroCardGridContext
-{
-    theme: string;
-}
-
-export interface NitroCardGridContextProps extends ProviderProps<INitroCardGridContext>
-{
-
-}
diff --git a/src/layout/card/grid/context/index.ts b/src/layout/card/grid/context/index.ts
deleted file mode 100644
index 9e3f79e8..00000000
--- a/src/layout/card/grid/context/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './NitroCardGridContext';
-export * from './NitroCardGridContext.types';
diff --git a/src/layout/card/grid/index.ts b/src/layout/card/grid/index.ts
index 4b3dea50..8a191eec 100644
--- a/src/layout/card/grid/index.ts
+++ b/src/layout/card/grid/index.ts
@@ -1,4 +1,3 @@
-export * from './context';
 export * from './item';
 export * from './NitroCardGridView';
 export * from './NitroCardGridView.types';
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.scss b/src/layout/card/grid/item/NitroCardGridItemView.scss
index b2959864..ab6ad600 100644
--- a/src/layout/card/grid/item/NitroCardGridItemView.scss
+++ b/src/layout/card/grid/item/NitroCardGridItemView.scss
@@ -1,86 +1,48 @@
-.grid-item-container {
+.grid-item {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     height: 50px;
     max-height: 50px;
+    width: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: $border-radius;
+    border-color: $grid-border-color !important;
+    background-color: $grid-bg-color;
+    border: nth(map-values($border-widths), 2) solid;
 
-    .grid-item {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        width: 100%;
-        height: 100%;
-        background-position: center;
-        background-repeat: no-repeat;
-        overflow: hidden;
+    &.active {
+        border-color: $grid-active-border-color !important;
+        background-color: $grid-active-bg-color !important;
+    }
 
-        &.theme-default {
-            border-radius: $border-radius;
-            border-color: $grid-border-color !important;
-            background-color: $grid-bg-color;
-            border: nth(map-values($border-widths), 2) solid;
-        }
+    &.unseen {
+        background-color: rgba($success, 0.4);
+    }
 
-        &.theme-shadowed {
-            border-radius: $border-radius;
-            background-color: $light;
+    .badge {
+        top: 2px;
+        right: 2px;
+        font-size: 8px;
+    }
 
-            &::after {
-                position: absolute;
-                content: '';
-                top: 0;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                border-radius: $border-radius;
-                border-bottom: 2px solid white;
-                border-right: 2px solid white;
-                box-shadow: -2px -2px rgba(0, 0, 0, .4), inset 3px 3px rgba(0, 0, 0, .2);
-            }
+    .avatar-image {
+        background-position-y: 10px;
+    }
 
-            &.active {
-                border: nth(map-values($border-widths), 2) solid;
-                border-color: $oslo-gray !important;
-                background-color: #F5F5F5;
+    .trade-button {
+        position: absolute;
+        bottom: 2px;
+        right: 2px;
+        font-size: 5px;
+        padding: 3px;
+        min-height: unset;
 
-                &:after {
-                    content: unset;
-                }
-            }
-        }
-    
-        &.active {
-            border-color: $grid-active-border-color !important;
-            background-color: $grid-active-bg-color !important;
-        }
-
-        &.unseen {
-            background-color: rgba($success, 0.4);
-        }
-    
-        .badge {
-            top: 2px;
-            right: 2px;
-            font-size: 8px;
-        }
-
-        .avatar-image {
-            background-position: center;
-            background-repeat: no-repeat;
-            background-position-y: 12px !important;
-        }
-
-        .trade-button {
-            position: absolute;
-            bottom: 2px;
-            right: 2px;
-            font-size: 5px;
-            padding: 3px;
-            min-height: unset;
-
-            &.left {
-                right: unset;
-                left: 2px;
-            }
+        &.left {
+            right: unset;
+            left: 2px;
         }
     }
 }
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.tsx b/src/layout/card/grid/item/NitroCardGridItemView.tsx
index a1e4b253..3713b490 100644
--- a/src/layout/card/grid/item/NitroCardGridItemView.tsx
+++ b/src/layout/card/grid/item/NitroCardGridItemView.tsx
@@ -1,27 +1,48 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
-import { useNitroCardGridContext } from '../context';
-import { NitroCardGridThemes } from '../NitroCardGridView.types';
 import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
 
 export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
 {
-    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, columns = undefined, className = '', style = {}, children = null, ...rest } = props;
-    const { theme = NitroCardGridThemes.THEME_DEFAULT } = useNitroCardGridContext();
+    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUniqueNumber = 0, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props;
 
-    const imageUrl = `url(${ itemImage })`;
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'grid-item cursor-pointer overflow-hidden';
+
+        if(itemActive) newClassName += ' active';
+
+        if(itemUniqueNumber > 0) newClassName += ' unique-item';
+
+        if(itemUnseen) newClassName += ' unseen';
+
+        if(itemImage === null) newClassName += ' icon loading-icon';
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className, itemActive, itemUniqueNumber, itemUnseen, itemImage ]);
+
+    const getStyle = useMemo(() =>
+    {
+        const newStyle = { ...style };
+
+        if(itemImage) newStyle.backgroundImage = `url(${ itemImage })`;
+
+        if(itemColor) newStyle.backgroundColor = itemColor;
+
+        return newStyle;
+    }, [ style, itemImage, itemColor ]);
 
     return (
-        <div className={ `${ columns === undefined ? 'col' : ('col-' + columns) } pb-1 grid-item-container` }>
-            <div className={ `grid-item ${ theme } cursor-pointer${ itemActive ? ' active' : '' }${ itemUnique ? ' unique-item' : '' }${ itemUnseen ? ' unseen' : ''}${ (itemImage === null ? ' icon loading-icon': '')} ${ className || '' }` } style={ itemImage ? { ...style, backgroundImage: imageUrl } : (itemColor ? { ...style, backgroundColor: itemColor } : style) } { ...rest }>
-                { (itemCount > 1) &&
-                    <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
-                { itemUnique && 
-                    <div className="position-absolute unique-item-counter">
-                        <LimitedEditionStyledNumberView value={ itemUniqueNumber } />
-                    </div> }
-                { children }
-            </div>
+        <div className={ getClassName } style={ getStyle } { ...rest }>
+            { (itemCount > 1) &&
+                <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
+            { (itemUniqueNumber > 0) && 
+                <div className="position-absolute unique-item-counter">
+                    <LimitedEditionStyledNumberView value={ itemUniqueNumber } />
+                </div> }
+            { children }
         </div>
     );
 }
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.types.ts b/src/layout/card/grid/item/NitroCardGridItemView.types.ts
index bf005811..97861569 100644
--- a/src/layout/card/grid/item/NitroCardGridItemView.types.ts
+++ b/src/layout/card/grid/item/NitroCardGridItemView.types.ts
@@ -6,8 +6,6 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes<HTMLDi
     itemColor?: string;
     itemActive?: boolean;
     itemCount?: number;
-    itemUnique?: boolean;
     itemUniqueNumber?: number;
     itemUnseen?: boolean;
-    columns?: number;
 }
diff --git a/src/views/achievements/AchievementsView.scss b/src/views/achievements/AchievementsView.scss
index 00014327..a246ac73 100644
--- a/src/views/achievements/AchievementsView.scss
+++ b/src/views/achievements/AchievementsView.scss
@@ -1,10 +1,6 @@
 .nitro-achievements {
-    width: 650px;
-
-    .content-area {
-        min-height: 376px;
-        height: 376px;
-    }
+    width: $achievement-width;
+    height: $achievement-height;
 
     .score {
         border-color: $grid-border-color !important;
diff --git a/src/views/avatar-editor/AvatarEditorView.scss b/src/views/avatar-editor/AvatarEditorView.scss
index 8c2f6b0d..d0704723 100644
--- a/src/views/avatar-editor/AvatarEditorView.scss
+++ b/src/views/avatar-editor/AvatarEditorView.scss
@@ -1,10 +1,6 @@
 .nitro-avatar-editor {
-    width: 620px;
-
-    .content-area {
-        min-height: 300px;
-        height: 300px;
-    }
+    width: $avatar-editor-width;
+    height: $avatar-editor-height;
 
     .category-item {
         height: 40px;
@@ -82,6 +78,37 @@
 
     .wardrobe-grid {
 
+        .grid-item {
+            height: 140px;
+            max-height: 140px;
+            background-color: $ghost;
+
+            &:after {
+                position: absolute;
+                content: '';
+                top: 75%;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                border-radius: 50%;
+                background-color: $gray-chateau;
+                box-shadow: 0 0 8px 2px rgba($white,.6);
+                transform: scale(2);
+            }
+
+            .avatar-image {
+                position: absolute;
+                bottom: 0;
+                background-position-y: -23px !important;
+                z-index: 4;
+            }
+
+            .figure-button-container {
+                background-color: $gray-chateau;
+                z-index: 3;
+            }
+        }
+
         .grid-item-container {
             height: 142px !important;
             max-height: 142px !important;
diff --git a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx b/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
index c97fffdd..f664453c 100644
--- a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
+++ b/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
@@ -1,6 +1,5 @@
 import { FC, useCallback } from 'react';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
-import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
 import { AvatarEditorGridPartItem } from '../../common/AvatarEditorGridPartItem';
 import { AvatarEditorFigureSetItemView } from '../figure-set-item/AvatarEditorFigureSetItemView';
 import { AvatarEditorFigureSetViewProps } from './AvatarEditorFigureSetView.types';
@@ -23,7 +22,7 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
     }, [ model, category, setMaxPaletteCount ]);
 
     return (
-        <NitroCardGridView columns={ 3 } theme={ NitroCardGridThemes.THEME_SHADOWED }>
+        <NitroCardGridView columns={ 3 }>
             { (category.parts.length > 0) && category.parts.map((item, index) =>
                 {
                     return <AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ selectPart } />;
diff --git a/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx b/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx
index 68e1645b..7bce299c 100644
--- a/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx
+++ b/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx
@@ -71,7 +71,7 @@ export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
             <div className="col-5 d-flex flex-column h-100">
                 <AvatarEditorFigureSetView model={ model } category={ activeCategory } setMaxPaletteCount={ setMaxPaletteCount } />
             </div>
-            <div className="col-5 d-flex flex-column h-100">
+            <div className="col-5 d-flex flex-column h-100 gap-2">
                 { (maxPaletteCount >= 1) &&
                     <AvatarEditorPaletteSetView model={ model } category={ activeCategory } paletteSet={ activeCategory.getPalette(0) } paletteIndex={ 0 } /> }
                 { (maxPaletteCount === 2) &&
diff --git a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx b/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
index 65c2968f..8b32c044 100644
--- a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
+++ b/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
@@ -1,6 +1,5 @@
 import { FC, useCallback } from 'react';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
-import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
 import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem';
 import { AvatarEditorPaletteSetItem } from '../palette-set-item/AvatarEditorPaletteSetItem';
 import { AvatarEditorPaletteSetViewProps } from './AvatarEditorPaletteSetView.types';
@@ -19,7 +18,7 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
     }, [ model, category, paletteSet, paletteIndex ]);
 
     return (
-        <NitroCardGridView columns={ 4 } theme={ NitroCardGridThemes.THEME_SHADOWED } { ...rest }>
+        <NitroCardGridView columns={ 4 } { ...rest }>
             { (paletteSet.length > 0) && paletteSet.map((item, index) =>
                 {
                     return <AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />;
diff --git a/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx b/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
index fd0e756b..f6c4e68d 100644
--- a/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
+++ b/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
@@ -5,7 +5,6 @@ import { GetAvatarRenderManager, GetSessionDataManager } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
 import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
-import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
 import { AvatarEditorWardrobeViewProps } from './AvatarEditorWardrobeView.types';
@@ -68,7 +67,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
     return (
         <div className="row h-100">
             <div className="col-12 d-flex h-100">
-                <NitroCardGridView className="wardrobe-grid" columns={ 5 } theme={ NitroCardGridThemes.THEME_DEFAULT }>
+                <NitroCardGridView className="wardrobe-grid" columns={ 5 }>
                     { figures }
                 </NitroCardGridView>
             </div>
diff --git a/src/views/catalog/CatalogView.scss b/src/views/catalog/CatalogView.scss
index 4061767a..ec71c0ad 100644
--- a/src/views/catalog/CatalogView.scss
+++ b/src/views/catalog/CatalogView.scss
@@ -1,11 +1,6 @@
 .nitro-catalog {
-    width: 620px;
-
-    .content-area {
-        min-height: 350px;
-        height: 350px;
-        resize: vertical;
-    }
+    width: $catalog-width;
+    height: $catalog-height;
 
     font[size="16"] {
         font-size: 20px;
diff --git a/src/views/inventory/InventoryView.scss b/src/views/inventory/InventoryView.scss
index 2da93ac4..8d5953d9 100644
--- a/src/views/inventory/InventoryView.scss
+++ b/src/views/inventory/InventoryView.scss
@@ -1,11 +1,6 @@
 .nitro-inventory {
-    width: 475px;
-
-    .content-area {
-        min-height: 240px;
-        height: 240px;
-        resize: vertical;
-    }
+    width: $inventory-width;
+    height: $inventory-height;
 
     .empty-image {
         background: url('../../assets/images/inventory/empty.png');
diff --git a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx b/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
index 4b49d6a3..a75cf789 100644
--- a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
+++ b/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
@@ -46,5 +46,5 @@ export const InventoryFurnitureItemView: FC<InventoryFurnitureItemViewProps> = p
 
     const count = groupItem.getUnlockedCount();
 
-    return <NitroCardGridItemView className={ !count ? 'opacity-0-5 ' : '' } itemImage={ groupItem.iconUrl } itemCount={ count } itemActive={ isActive } itemUnique={ groupItem.stuffData.isUnique } itemUniqueNumber={ groupItem.stuffData.uniqueNumber } itemUnseen={ groupItem.hasUnseenItems } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } />;
+    return <NitroCardGridItemView className={ !count ? 'opacity-0-5 ' : '' } itemImage={ groupItem.iconUrl } itemCount={ count } itemActive={ isActive } itemUniqueNumber={ groupItem.stuffData.uniqueNumber } itemUnseen={ groupItem.hasUnseenItems } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } />;
 }
diff --git a/src/views/inventory/views/trade/InventoryTradeView.tsx b/src/views/inventory/views/trade/InventoryTradeView.tsx
index 5969daec..c5f9b47d 100644
--- a/src/views/inventory/views/trade/InventoryTradeView.tsx
+++ b/src/views/inventory/views/trade/InventoryTradeView.tsx
@@ -233,7 +233,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                             const count = item.getUnlockedCount();
 
                             return (
-                                <NitroCardGridItemView key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) }>
+                                <NitroCardGridItemView key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) }>
                                     { ((count > 0) && (groupItem === item)) &&
                                         <button className="btn btn-success btn-sm trade-button" onClick={ event => attemptItemOffer(1) }>
                                             <i className="fas fa-chevron-right" />
@@ -255,7 +255,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                 if(!item) return <NitroCardGridItemView key={ i } />;
 
                                 return (
-                                    <NitroCardGridItemView key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
+                                    <NitroCardGridItemView key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
                                         { (ownGroupItem === item) &&
                                             <button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }>
                                                 <i className="fas fa-chevron-left" />
@@ -275,7 +275,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
 
                                 if(!item) return <NitroCardGridItemView key={ i } />;
 
-                                return <NitroCardGridItemView key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
+                                return <NitroCardGridItemView key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
                             }) }
                         <div className="col-12 badge bg-muted w-100">{ otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }</div>
                     </NitroCardGridView>
diff --git a/src/views/navigator/NavigatorView.scss b/src/views/navigator/NavigatorView.scss
index d29e353b..a438267d 100644
--- a/src/views/navigator/NavigatorView.scss
+++ b/src/views/navigator/NavigatorView.scss
@@ -1,11 +1,6 @@
 .nitro-navigator {
-    width: 400px;
-
-    .content-area {
-        min-height: 400px;
-        height: 400px;
-        resize: vertical;
-    }
+    width: $navigator-width;
+    height: $navigator-height;
 }
 
 .nitro-navigator-doorbell {
diff --git a/src/views/shared/avatar-image/AvatarImage.scss b/src/views/shared/avatar-image/AvatarImage.scss
index a552dbb2..07022cae 100644
--- a/src/views/shared/avatar-image/AvatarImage.scss
+++ b/src/views/shared/avatar-image/AvatarImage.scss
@@ -3,8 +3,7 @@
     width: 90px;
     height: 130px;
     background-repeat: no-repeat;
-    background-position-x: center;
-    background-position-y: -8px !important;
+    background-position: center -8px;
     pointer-events: none;
     image-rendering: pixelated;
 
diff --git a/src/views/shared/avatar-image/AvatarImageView.tsx b/src/views/shared/avatar-image/AvatarImageView.tsx
index d8e96979..94ffac65 100644
--- a/src/views/shared/avatar-image/AvatarImageView.tsx
+++ b/src/views/shared/avatar-image/AvatarImageView.tsx
@@ -14,6 +14,12 @@ export const AvatarImageView: FC<AvatarImageViewProps> = props =>
     {
         if(scale === .5) return '0-5';
 
+        if(scale === .75) return '0-75';
+
+        if(scale === 1.25) return '1-25';
+
+        if(scale === 1.50) return '1-50';
+
         return scale.toString();
     }, [ scale ]);
 

From e94977f775e10d4b6307e2058f36d6cb96fc449e Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 22 Sep 2021 22:16:09 -0400
Subject: [PATCH 18/31] Catalog layout updates

---
 src/assets/styles/index.scss                  |  4 +
 .../card/grid/item/NitroCardGridItemView.tsx  |  4 +-
 .../catalog/common/GetProuductIconUrl.ts      | 47 ++++++++++++
 .../page-details/CatalogPageDetailsView.tsx   | 19 +++++
 .../CatalogPageDetailsView.types.ts           |  6 ++
 .../catalog/views/page/CatalogPageView.scss   |  1 -
 .../views/page/layout/CatalogLayout.scss      |  5 --
 .../CatalogLayoutBadgeDisplayView.scss        |  7 --
 .../CatalogLayoutBadgeDisplayView.tsx         | 46 +++++-------
 .../default/CatalogLayoutDefaultView.tsx      | 25 ++-----
 .../page/layout/pets/CatalogLayoutPetView.tsx | 68 +++++++++--------
 .../purchase/CatalogLayoutPetPurchaseView.tsx |  3 +
 .../layout/pets2/CatalogLayoutPets2View.scss  |  2 -
 .../layout/pets2/CatalogLayoutPets2View.tsx   | 19 +----
 .../layout/pets3/CatalogLayoutPets3View.scss  |  2 -
 .../layout/pets3/CatalogLayoutPets3View.tsx   | 22 ++++--
 .../CatalogLayoutSingleBundleView.scss        |  6 --
 .../CatalogLayoutSingleBundleView.tsx         | 18 ++---
 .../spaces-new/CatalogLayoutSpacesView.scss   |  3 -
 .../spaces-new/CatalogLayoutSpacesView.tsx    | 26 ++-----
 .../trophies/CatalogLayoutTrophiesView.scss   |  8 --
 .../trophies/CatalogLayoutTrophiesView.tsx    | 21 ++----
 .../views/page/offer/CatalogPageOfferView.tsx |  3 +-
 .../page/offers/CatalogPageOffersView.tsx     | 23 ++----
 .../offers/CatalogPageOffersView.types.ts     |  3 +-
 .../CatalogProductPreviewView.scss}           |  0
 .../CatalogProductPreviewView.tsx             | 27 +++++++
 .../CatalogProductPreviewView.types.ts        | 10 +++
 .../views/page/product/CatalogProductView.tsx | 73 ++++---------------
 .../page/product/CatalogProductView.types.ts  |  5 +-
 .../CatalogLayoutSearchResultView.tsx         |  2 +-
 .../offer/CatalogSearchResultOfferView.tsx    | 69 ++++--------------
 .../offers/CatalogSearchResultOffersView.tsx  | 11 +--
 .../furniture/InventoryFurnitureView.tsx      |  2 +-
 34 files changed, 263 insertions(+), 327 deletions(-)
 create mode 100644 src/views/catalog/common/GetProuductIconUrl.ts
 create mode 100644 src/views/catalog/views/page-details/CatalogPageDetailsView.tsx
 create mode 100644 src/views/catalog/views/page-details/CatalogPageDetailsView.types.ts
 delete mode 100644 src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.scss
 delete mode 100644 src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss
 delete mode 100644 src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.scss
 delete mode 100644 src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.scss
 delete mode 100644 src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss
 delete mode 100644 src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss
 rename src/views/catalog/views/page/{product/CatalogProductView.scss => product-preview/CatalogProductPreviewView.scss} (100%)
 create mode 100644 src/views/catalog/views/page/product-preview/CatalogProductPreviewView.tsx
 create mode 100644 src/views/catalog/views/page/product-preview/CatalogProductPreviewView.types.ts

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 0c20accd..6e6aa7aa 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -15,6 +15,10 @@
     min-height: 28px;
 }
 
+textarea {
+  resize: none;
+}
+
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.tsx b/src/layout/card/grid/item/NitroCardGridItemView.tsx
index 3713b490..47c39438 100644
--- a/src/layout/card/grid/item/NitroCardGridItemView.tsx
+++ b/src/layout/card/grid/item/NitroCardGridItemView.tsx
@@ -4,7 +4,7 @@ import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
 
 export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
 {
-    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUniqueNumber = 0, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props;
+    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
@@ -12,6 +12,8 @@ export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
 
         if(itemActive) newClassName += ' active';
 
+        if(itemUniqueNumber === -1) newClassName += ' unique-item sold-out';
+
         if(itemUniqueNumber > 0) newClassName += ' unique-item';
 
         if(itemUnseen) newClassName += ' unseen';
diff --git a/src/views/catalog/common/GetProuductIconUrl.ts b/src/views/catalog/common/GetProuductIconUrl.ts
new file mode 100644
index 00000000..c775dd37
--- /dev/null
+++ b/src/views/catalog/common/GetProuductIconUrl.ts
@@ -0,0 +1,47 @@
+import { FurnitureType } from '@nitrots/nitro-renderer';
+import { GetConfiguration, GetRoomEngine, GetSessionDataManager } from '../../../api';
+
+export const GetProductIconUrl = (furniClassId: number, productType: string, customParams: string = null) =>
+{
+    switch(productType.toUpperCase())
+    {
+        case FurnitureType.BADGE:
+            return GetSessionDataManager().getBadgeUrl(customParams);
+        case FurnitureType.ROBOT:
+            return undefined;
+        case FurnitureType.FLOOR:
+            return GetRoomEngine().getFurnitureFloorIconUrl(furniClassId);
+        case FurnitureType.WALL: {
+            const furniData = GetSessionDataManager().getWallItemData(furniClassId);
+            
+            let iconName = '';
+
+            if(furniData)
+            {
+                switch(furniData.className)
+                {
+                    case 'floor':
+                        iconName = [ 'th', furniData.className, customParams ].join('_');
+                        break;
+                    case 'wallpaper':
+                        iconName = [ 'th', 'wall', customParams ].join('_');
+                        break;
+                    case 'landscape':
+                        iconName = [ 'th', furniData.className, customParams.replace('.', '_'), '001' ].join('_');
+                        break;
+                }
+
+                if(iconName !== '')
+                {
+                    const assetUrl = GetConfiguration<string>('catalog.asset.url');
+
+                    return `${ assetUrl }/${ iconName }.png`;
+                }
+            }
+
+            return GetRoomEngine().getFurnitureWallIconUrl(furniClassId, customParams);
+        }
+    }
+
+    return null;
+}
diff --git a/src/views/catalog/views/page-details/CatalogPageDetailsView.tsx b/src/views/catalog/views/page-details/CatalogPageDetailsView.tsx
new file mode 100644
index 00000000..c5269380
--- /dev/null
+++ b/src/views/catalog/views/page-details/CatalogPageDetailsView.tsx
@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { GetCatalogPageImage, GetCatalogPageText } from '../../common/CatalogUtilities';
+import { CatalogPageDetailsViewProps } from './CatalogPageDetailsView.types';
+
+export const CatalogPageDetailsView: FC<CatalogPageDetailsViewProps> = props =>
+{
+    const { pageParser = null } = props;
+
+    if(!pageParser) return null;
+
+    const imageUrl = GetCatalogPageImage(pageParser, 1);
+
+    return (
+        <div className="d-flex flex-column justify-content-center align-items-center gap-2 w-100 h-100">
+            { imageUrl && <img alt="" src={ imageUrl } /> }
+            <div className="d-flex flex-column fs-6 text-center text-black lh-sm" dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 0) } } />
+        </div>
+    );
+}
diff --git a/src/views/catalog/views/page-details/CatalogPageDetailsView.types.ts b/src/views/catalog/views/page-details/CatalogPageDetailsView.types.ts
new file mode 100644
index 00000000..a02c3b6c
--- /dev/null
+++ b/src/views/catalog/views/page-details/CatalogPageDetailsView.types.ts
@@ -0,0 +1,6 @@
+import { CatalogPageMessageParser } from '@nitrots/nitro-renderer';
+
+export interface CatalogPageDetailsViewProps
+{
+    pageParser: CatalogPageMessageParser;
+}
diff --git a/src/views/catalog/views/page/CatalogPageView.scss b/src/views/catalog/views/page/CatalogPageView.scss
index 7a00d29e..2281883f 100644
--- a/src/views/catalog/views/page/CatalogPageView.scss
+++ b/src/views/catalog/views/page/CatalogPageView.scss
@@ -1,6 +1,5 @@
 @import './layout/CatalogLayout';
 @import './offer/CatalogPageOfferView';
 @import './offers/CatalogPageOffersView';
-@import './product/CatalogProductView';
 @import './purchase/CatalogPurchaseView';
 @import './search-result/CatalogLayoutSearchResultView';
diff --git a/src/views/catalog/views/page/layout/CatalogLayout.scss b/src/views/catalog/views/page/layout/CatalogLayout.scss
index ff111f8a..addcc8e6 100644
--- a/src/views/catalog/views/page/layout/CatalogLayout.scss
+++ b/src/views/catalog/views/page/layout/CatalogLayout.scss
@@ -1,10 +1,5 @@
-@import './badge-display/CatalogLayoutBadgeDisplayView';
 @import './default/CatalogLayoutDefaultView';
 @import './frontpage4/CatalogLayoutFrontpage4View';
 @import './pets/CatalogLayoutPetView';
-@import './pets3/CatalogLayoutPets3View';
-@import './single-bundle/CatalogLayoutSingleBundleView';
-@import './spaces-new/CatalogLayoutSpacesView';
-@import './trophies/CatalogLayoutTrophiesView';
 @import './vip-buy/CatalogLayoutVipBuyView';
 @import './info-loyalty/CatalogLayoutInfoLoyaltyView.scss';
diff --git a/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.scss b/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.scss
deleted file mode 100644
index 1229e018..00000000
--- a/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.nitro-catalog-layout-badge-display {
-
-    .inventory-badge-grid {
-        height: 200px;
-        max-height: 200px;
-    }
-}
diff --git a/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx b/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx
index 4cb90755..1826c10a 100644
--- a/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx
+++ b/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx
@@ -1,5 +1,5 @@
 import { StringDataType } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../../../api';
 import { InventoryBadgesUpdatedEvent, SetRoomPreviewerStuffDataEvent } from '../../../../../../events';
 import { InventoryBadgesRequestEvent } from '../../../../../../events/inventory/InventoryBadgesRequestEvent';
@@ -7,11 +7,9 @@ import { dispatchUiEvent, useUiEvent } from '../../../../../../hooks';
 import { NitroCardGridItemView } from '../../../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../../../layout/card/grid/NitroCardGridView';
 import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
-import { GetOfferName } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
-import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
 import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
-import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
+import { CatalogProductPreviewView } from '../../product-preview/CatalogProductPreviewView';
 import { CatalogLayoutBadgeDisplayViewProps } from './CatalogLayoutBadgeDisplayView.types';
 
 export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProps> = props =>
@@ -32,18 +30,6 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
 
     useUiEvent(InventoryBadgesUpdatedEvent.BADGES_UPDATED, onInventoryBadgesUpdatedEvent);
 
-    const badgeElements = useMemo(() =>
-    {
-        return badges.map(code =>
-            {
-                return (
-                    <NitroCardGridItemView key={ code } itemActive={ (currentBadge === code) } onMouseDown={ event => setCurrentBadge(code) }> 
-                        <BadgeImageView badgeCode={ code } />
-                    </NitroCardGridItemView>
-                );
-            });
-    }, [ badges, currentBadge ]);
-
     useEffect(() =>
     {
         dispatchUiEvent(new InventoryBadgesRequestEvent(InventoryBadgesRequestEvent.REQUEST_BADGES));
@@ -67,22 +53,26 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
     }, [ currentBadge, activeOffer, roomPreviewer ]);
 
     return (
-        <div className="row h-100 nitro-catalog-layout-badge-display">
-            <div className="d-flex flex-column col-7 h-100">
-                <CatalogPageOffersView offers={ pageParser.offers } />
-                <div className="d-flex flex-column mt-2">
+        <div className="row h-100">
+            <div className="d-flex flex-column col-7 gap-2 h-100">
+                <CatalogPageOffersView className="flex-shrink-0" offers={ pageParser.offers } />
+                <div className="d-flex flex-column overflow-hidden">
                     <div className="text-black fw-bold">{ LocalizeText('catalog_selectbadge') }</div>
-                    <NitroCardGridView className="inventory-badge-grid">
-                        { badgeElements }
+                    <NitroCardGridView>
+                        { badges && (badges.length > 0) && badges.map(code =>
+                            {
+                                return (
+                                    <NitroCardGridItemView key={ code } itemActive={ (currentBadge === code) } onMouseDown={ event => setCurrentBadge(code) }> 
+                                        <BadgeImageView badgeCode={ code } />
+                                    </NitroCardGridItemView>
+                                );
+                            }) }
                     </NitroCardGridView>
                 </div>
             </div>
-            { product &&
-                <div className="position-relative d-flex flex-column col">
-                    <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                    <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
-                    <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ currentBadge } disabled={ !currentBadge } />
-                </div> }
+            <div className="position-relative d-flex flex-column col-5">
+                <CatalogProductPreviewView pageParser={ pageParser } activeOffer={ activeOffer } roomPreviewer={ roomPreviewer } extra={ currentBadge } disabled={ !currentBadge } />
+            </div>
         </div>
     );
 }
diff --git a/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx b/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx
index db599364..415ac9fa 100644
--- a/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx
+++ b/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx
@@ -1,10 +1,7 @@
 import { FC } from 'react';
-import { LimitedEditionCompletePlateView } from '../../../../../shared/limited-edition/complete-plate/LimitedEditionCompletePlateView';
-import { GetCatalogPageImage, GetCatalogPageText, GetOfferName } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
-import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
 import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
-import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
+import { CatalogProductPreviewView } from '../../product-preview/CatalogProductPreviewView';
 import { CatalogLayoutDefaultViewProps } from './CatalogLayoutDefaultView.types';
 
 export const CatalogLayoutDefaultView: FC<CatalogLayoutDefaultViewProps> = props =>
@@ -17,24 +14,12 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutDefaultViewProps> = props
 
     return (
         <div className="row h-100">
-            <div className="col-7 h-100">
+            <div className="d-flex flex-column col-7 h-100">
                 <CatalogPageOffersView offers={ pageParser.offers } />
             </div>
-            { !product &&
-                <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center overflow-hidden">
-                    <div className="d-block mb-2">
-                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
-                    </div>
-                    <div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
-                </div> }
-            { product &&
-                <div className="position-relative d-flex flex-column col-5">
-                    <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                    { product.uniqueLimitedItem &&
-                        <LimitedEditionCompletePlateView uniqueLimitedItemsLeft={ product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ product.uniqueLimitedSeriesSize } /> }
-                    <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
-                    <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } />
-                </div> }
+            <div className="position-relative d-flex flex-column col-5">
+                <CatalogProductPreviewView pageParser={ pageParser } activeOffer={ activeOffer } roomPreviewer={ roomPreviewer } />
+            </div>
         </div>
     );
 }
diff --git a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
index f70afb5d..edf293c2 100644
--- a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
+++ b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
@@ -2,11 +2,13 @@ import { ColorConverter, GetSellablePetPalettesComposer, SellablePetPaletteData
 import { FC, useEffect, useMemo, useState } from 'react';
 import { GetProductDataForLocalization, LocalizeText } from '../../../../../../api';
 import { SendMessageHook } from '../../../../../../hooks/messages/message-event';
+import { NitroCardGridItemView, NitroCardGridView } from '../../../../../../layout';
 import { PetImageView } from '../../../../../shared/pet-image/PetImageView';
-import { GetCatalogPageImage, GetCatalogPageText, GetPetAvailableColors, GetPetIndexFromLocalization } from '../../../../common/CatalogUtilities';
+import { GetPetAvailableColors, GetPetIndexFromLocalization } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
 import { CatalogActions } from '../../../../reducers/CatalogReducer';
 import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
+import { CatalogPageDetailsView } from '../../../page-details/CatalogPageDetailsView';
 import { CatalogLayoutPetViewProps } from './CatalogLayoutPetView.types';
 import { CatalogLayoutPetPurchaseView } from './purchase/CatalogLayoutPetPurchaseView';
 
@@ -139,44 +141,40 @@ export const CatalogLayoutPetView: FC<CatalogLayoutPetViewProps> = props =>
     if(!activeOffer) return null;
 
     return (
-        <div className="row h-100 nitro-catalog-layout-pets">
-            <div className="col-7 h-100">
-                <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 h-100 overflow-auto catalog-offers-container single-bundle-items-container">
-                    { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) =>
-                        {
-                            return <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">
-                                <div className={ 'position-relative border border-2 rounded catalog-offer-item cursor-pointer ' + ((selectedColorIndex === index) ? 'active ' : '') } style={ { backgroundColor: ColorConverter.int2rgb(colorSet[0]) } } onClick={ event => setSelectedColorIndex(index) }>
-                                </div>
-                            </div>;
-                        })}
+        <div className="row h-100">
+            <div className="d-flex flex-column col-7 h-100">
+                <NitroCardGridView columns={ 5 }>
                     { !colorsShowing && (sellablePalettes.length > 0) && sellablePalettes.map((palette, index) =>
                         {
-                            return <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">
-                                <div className={ 'position-relative border border-2 rounded catalog-offer-item cursor-pointer ' + ((selectedPaletteIndex === index) ? 'active ' : '') } onClick={ event => setSelectedPaletteIndex(index) }>
+                            return (
+                                <NitroCardGridItemView key={ index } itemActive={ (selectedPaletteIndex === index) } onClick={ event => setSelectedPaletteIndex(index) }>
                                     <PetImageView typeId={ petIndex } paletteId={ palette.paletteId } direction={ 2 } headOnly={ true } />
-                                </div>
-                            </div>;
-                        }) }
-                </div>
+                                </NitroCardGridItemView>
+                            );
+                        })}
+                    { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) =>
+                        {
+                            return (
+                                <NitroCardGridItemView key={ index } itemActive={ (selectedColorIndex === index) } itemColor={ ColorConverter.int2rgb(colorSet[0]) } onClick={ event => setSelectedColorIndex(index) } />
+                            );
+                        })}
+                </NitroCardGridView>
+            </div>
+            <div className="position-relative d-flex flex-column col-5">
+                { (petIndex === -1) &&
+                    <CatalogPageDetailsView pageParser={ pageParser } /> }
+                { (petIndex >= 0) &&
+                    <>
+                        <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 }>
+                            { (petIndex > -1 && petIndex <= 7) &&
+                                <button type="button" className= { 'btn btn-primary btn-sm color-button ' + (colorsShowing ? 'active ' : '') } onClick={ event => setColorsShowing(!colorsShowing) }>
+                                    <i className="fas fa-fill-drip" />
+                                </button> }
+                        </CatalogRoomPreviewerView>
+                        <div className="fs-6 text-black mt-1 overflow-hidden">{ petBreedName }</div>
+                        <CatalogLayoutPetPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ petPurchaseString } />
+                    </> }
             </div>
-            { (petIndex === -1) &&
-                <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
-                    <div className="d-block mb-2">
-                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
-                    </div>
-                    <div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
-                </div> }
-            { (petIndex >= 0) &&
-                <div className="position-relative d-flex flex-column col-5">
-                    <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 }>
-                        { (petIndex > -1 && petIndex <= 7) &&
-                            <button type="button" className= { 'btn btn-primary btn-sm color-button ' + (colorsShowing ? 'active ' : '') } onClick={ event => setColorsShowing(!colorsShowing) }>
-                                <i className="fas fa-fill-drip" />
-                            </button> }
-                    </CatalogRoomPreviewerView>
-                    <div className="fs-6 text-black mt-1 overflow-hidden">{ petBreedName }</div>
-                    <CatalogLayoutPetPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ petPurchaseString } />
-                </div> }
         </div>
     );
 }
diff --git a/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.tsx b/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.tsx
index 9f1ebb31..c7b02518 100644
--- a/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.tsx
+++ b/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.tsx
@@ -6,6 +6,7 @@ import { useUiEvent } from '../../../../../../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../../../../../../hooks/messages/message-event';
 import { CurrencyIcon } from '../../../../../../shared/currency-icon/CurrencyIcon';
 import { CatalogPurchaseButtonView } from '../../../purchase/purchase-button/CatalogPurchaseButtonView';
+import { CatalogPurchaseGiftButtonView } from '../../../purchase/purchase-gift-button/CatalogPurchaseGiftButtonView';
 import { CatalogPetNameApprovalView } from '../name-approval/CatalogPetNameApprovalView';
 import { CatalogLayoutPetPurchaseViewProps } from './CatalogLayoutPetPurchaseView.types';
 
@@ -59,6 +60,8 @@ export const CatalogLayoutPetPurchaseView: FC<CatalogLayoutPetPurchaseViewProps>
                 </div>
                 <div className="d-flex flex-column mt-1">
                     <CatalogPurchaseButtonView className="btn-sm w-100" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ 1 } isPurchaseAllowed={ nameApproved } beforePurchase={ beforePurchase } />
+                    { offer.giftable &&
+                        <CatalogPurchaseGiftButtonView className="btn-sm w-100 mt-1" offer={ offer } pageId={ pageId } extra={ extraData } disabled={ nameApproved } /> }
                 </div>
             </div>
         </>
diff --git a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss
deleted file mode 100644
index 1b85077d..00000000
--- a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.nitro-catalog-layout-pets2 {
-}
diff --git a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx
index 3e901711..06dd970c 100644
--- a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx
+++ b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx
@@ -1,23 +1,8 @@
 import { FC } from 'react';
-import { GetCatalogPageImage, GetCatalogPageText } from '../../../../common/CatalogUtilities';
+import { CatalogLayoutPets3View } from '../pets3/CatalogLayoutPets3View';
 import { CatalogLayoutPets2ViewProps } from './CatalogLayoutPets2View.types';
 
 export const CatalogLayoutPets2View: FC<CatalogLayoutPets2ViewProps> = props =>
 {
-    const { pageParser = null } = props;
-    
-    return (
-        <div className="h-100 nitro-catalog-layout-pets3 bg-muted p-1 rounded text-black">
-            <div className="overflow-auto h-100 d-flex flex-column">
-                <div className="d-flex flex-row">
-                    <div className="d-block mb-1 me-1">
-                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
-                    </div>
-                    <h6 className="align-self-center">{ GetCatalogPageText(pageParser, 1) }</h6>
-                </div>
-                <div dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 2) } } />
-                {GetCatalogPageText(pageParser, 3) && <div className="mt-auto bg-secondary text-white rounded p-1 text-center" dangerouslySetInnerHTML={{ __html: GetCatalogPageText(pageParser, 3) }} />}
-            </div>
-        </div>
-    );
+    return <CatalogLayoutPets3View { ...props } />
 }
diff --git a/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.scss b/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.scss
deleted file mode 100644
index 2f2bc31c..00000000
--- a/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.nitro-catalog-layout-pets3 {
-}
diff --git a/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx b/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx
index 23fa4048..94ab0a81 100644
--- a/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx
+++ b/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx
@@ -5,18 +5,24 @@ import { CatalogLayoutPets3ViewProps } from './CatalogLayoutPets3View.types';
 export const CatalogLayoutPets3View: FC<CatalogLayoutPets3ViewProps> = props =>
 {
     const { pageParser = null } = props;
+
+    const imageUrl = GetCatalogPageImage(pageParser, 1);
     
     return (
-        <div className="h-100 nitro-catalog-layout-pets3 bg-muted p-1 rounded text-black">
-            <div className="overflow-auto h-100 d-flex flex-column">
-                <div className="d-flex flex-row">
-                    <div className="d-block mb-1 me-1">
-                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
+        <div className="row h-100">
+            <div className="d-flex flex-column col-12 h-100">
+                <div className="d-flex flex-column bg-muted rounded text-black gap-2 p-2 h-100">
+                    <div className="d-flex flex-row align-items-center gap-2">
+                        { imageUrl && <img alt="" src={ GetCatalogPageImage(pageParser, 1) } /> }
+                        <div className="fs-5" dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 1) } } />
+                    </div>
+                    <div className="d-flex flex-column align-items-center flex-grow-1 overflow-auto">
+                        <div dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 2) } } />
+                    </div>
+                    <div className="d-flex flex-row align-items-center">
+                        <div className="fw-bold" dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 3) } } />
                     </div>
-                    <h6 className="align-self-center">{ GetCatalogPageText(pageParser, 1) }</h6>
                 </div>
-                <div dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 2) } } />
-                {GetCatalogPageText(pageParser, 3) && <div className="mt-auto bg-secondary text-white rounded p-1 text-center" dangerouslySetInnerHTML={{ __html: GetCatalogPageText(pageParser, 3) }} />}
             </div>
         </div>
     );
diff --git a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.scss b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.scss
deleted file mode 100644
index 664041a9..00000000
--- a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.nitro-catalog-layout-single-bundle {
-
-    .single-bundle-items-container {
-        
-    }
-}
diff --git a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
index c85baeae..bab6711f 100644
--- a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
+++ b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
-import { GetCatalogPageImage, GetCatalogPageText } from '../../../../common/CatalogUtilities';
+import { NitroCardGridView } from '../../../../../../layout';
 import { useCatalogContext } from '../../../../context/CatalogContext';
+import { CatalogPageDetailsView } from '../../../page-details/CatalogPageDetailsView';
 import { CatalogProductView } from '../../product/CatalogProductView';
 import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
 import { CatalogLayoutSingleBundleViewProps } from './CatalogLayoutSingleBundleView.types';
@@ -12,20 +13,17 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutSingleBundleViewProp
     const { activeOffer = null } = catalogState;
 
     return (
-        <div className="row h-100 nitro-catalog-layout-single-bundle">
-            <div className="col-7 h-100">
-                <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container single-bundle-items-container h-100 overflow-auto">
+        <div className="row h-100">
+            <div className="d-flex flex-column col-7 h-100">
+                <NitroCardGridView columns={ 5 }>
                     { activeOffer && activeOffer.products && (activeOffer.products.length > 0) && activeOffer.products.map((product, index) =>
                         {
                             return <CatalogProductView key={ index } isActive={ false } product={ product } />
                         }) }
-                </div>
+                </NitroCardGridView>
             </div>
-            <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center h-100 overflow-auto">
-                <div className="d-block mb-2">
-                    <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
-                </div>
-                <div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
+            <div className="position-relative d-flex flex-column col-5">
+                <CatalogPageDetailsView pageParser={ pageParser } />
                 { activeOffer && <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } /> }
             </div>
         </div>
diff --git a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss
deleted file mode 100644
index ce1e1c03..00000000
--- a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.nitro-catalog-layout-spaces {
-
-}
diff --git a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx
index c2c15a26..65da4622 100644
--- a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx
+++ b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx
@@ -1,12 +1,10 @@
 import { CatalogPageMessageOfferData, IFurnitureData } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { GetSessionDataManager, LocalizeText } from '../../../../../../api';
-import { GetCatalogPageImage, GetCatalogPageText, GetOfferName } from '../../../../common/CatalogUtilities';
 import { ProductTypeEnum } from '../../../../common/ProductTypeEnum';
 import { useCatalogContext } from '../../../../context/CatalogContext';
-import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
 import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
-import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
+import { CatalogProductPreviewView } from '../../product-preview/CatalogProductPreviewView';
 import { CatalogLayoutSpacesViewProps } from './CatalogLayoutSpacesView.types';
 
 export const CatalogLayoutSpacesView: FC<CatalogLayoutSpacesViewProps> = props =>
@@ -68,9 +66,9 @@ export const CatalogLayoutSpacesView: FC<CatalogLayoutSpacesViewProps> = props =
     const product = ((activeOffer && activeOffer.products[0]) || null);
 
     return (
-        <div className="row h-100 nitro-catalog-layout-spaces">
-            <div className="d-flex col-7 flex-column h-100 overflow-hidden">
-                <div className="btn-group mx-auto mb-1 w-100">
+        <div className="row h-100">
+            <div className="d-flex flex-column col-7 gap-2 h-100">
+                <div className="btn-group w-100">
                     { groupNames.map((name, index) =>
                         {
                             return <button key={ index } type="button" className={ 'btn btn-primary btn-sm ' + ((activeGroupIndex === index) ? 'active ' : '' )} onClick={ event => setActiveGroupIndex(index) }>{ LocalizeText(`catalog.spaces.tab.${ name }`) }</button>
@@ -78,19 +76,9 @@ export const CatalogLayoutSpacesView: FC<CatalogLayoutSpacesViewProps> = props =
                 </div>
                 <CatalogPageOffersView offers={ groups[activeGroupIndex] } />
             </div>
-            { !product &&
-                <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
-                    <div className="d-block mb-2">
-                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
-                    </div>
-                    <div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
-                </div> }
-            { product &&
-                <div className="position-relative d-flex flex-column col">
-                    <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                    <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
-                    <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } />
-                </div> }
+            <div className="position-relative d-flex flex-column col-5">
+                <CatalogProductPreviewView pageParser={ pageParser } activeOffer={ activeOffer } roomPreviewer={ roomPreviewer } />
+            </div>
         </div>
     );
 }
diff --git a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss
deleted file mode 100644
index 58637ed9..00000000
--- a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.nitro-catalog-layout-trophies {
-
-    textarea {
-        height: 119px;
-        resize: none;
-    }
-
-}
diff --git a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx
index 471001a1..03379cf0 100644
--- a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx
+++ b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx
@@ -1,9 +1,7 @@
 import { FC, useState } from 'react';
-import { GetOfferName } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
-import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
 import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
-import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
+import { CatalogProductPreviewView } from '../../product-preview/CatalogProductPreviewView';
 import { CatalogLayoutTrophiesViewProps } from './CatalogLayoutTrophiesView.types';
 
 export const CatalogLayoutTrophiesView: FC<CatalogLayoutTrophiesViewProps> = props =>
@@ -16,19 +14,14 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutTrophiesViewProps> = pro
     const product = ((activeOffer && activeOffer.products[0]) || null);
 
     return (
-        <div className="row h-100 nitro-catalog-layout-trophies">
-            <div className="d-flex flex-column col-7 h-100">
+        <div className="row h-100">
+            <div className="d-flex flex-column col-7 gap-2 h-100">
                 <CatalogPageOffersView offers={ pageParser.offers } />
-                <div className="d-flex mt-2">
-                    <textarea className="form-control w-100" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) }></textarea>
-                </div>
+                <textarea className="flex-grow-1 form-control w-100" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) } />
+            </div>
+            <div className="position-relative d-flex flex-column col-5">
+                <CatalogProductPreviewView pageParser={ pageParser } activeOffer={ activeOffer } roomPreviewer={ roomPreviewer } extra={ trophyText } />
             </div>
-            { product &&
-                <div className="position-relative d-flex flex-column col">
-                    <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                    <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
-                    <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ trophyText } />
-                </div> }
         </div>
     );
 }
diff --git a/src/views/catalog/views/page/offer/CatalogPageOfferView.tsx b/src/views/catalog/views/page/offer/CatalogPageOfferView.tsx
index 980ee8e7..fb2fae74 100644
--- a/src/views/catalog/views/page/offer/CatalogPageOfferView.tsx
+++ b/src/views/catalog/views/page/offer/CatalogPageOfferView.tsx
@@ -26,7 +26,6 @@ export const CatalogPageOfferView: FC<CatalogPageOfferViewProps> = props =>
                 });
                 return;
             case MouseEventType.MOUSE_DOWN:
-                console.log('ye')
                 setMouseDown(true);
                 return;
             case MouseEventType.MOUSE_UP:
@@ -42,5 +41,5 @@ export const CatalogPageOfferView: FC<CatalogPageOfferViewProps> = props =>
 
     if(!product) return null;
 
-    return <CatalogProductView isActive={ isActive } product={ product } onMouseEvent={ onMouseEvent } />
+    return <CatalogProductView isActive={ isActive } product={ product } onClick={ onMouseEvent } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } />
 }
diff --git a/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx b/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
index 5fd81480..994bb7d7 100644
--- a/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
+++ b/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
@@ -1,32 +1,21 @@
-import { FC, useEffect } from 'react';
+import { FC } from 'react';
+import { NitroCardGridView } from '../../../../../layout';
 import { useCatalogContext } from '../../../context/CatalogContext';
 import { CatalogPageOfferView } from '../offer/CatalogPageOfferView';
 import { CatalogPageOffersViewProps } from './CatalogPageOffersView.types';
 
 export const CatalogPageOffersView: FC<CatalogPageOffersViewProps> = props =>
 {
-    const { offers = [] } = props;
+    const { offers = [], ...rest } = props;
     const { catalogState = null, dispatchCatalogState = null } = useCatalogContext();
     const { activeOffer = null } = catalogState;
 
-    useEffect(() =>
-    {
-        if(!offers || !offers.length) return;
-
-        // dispatchCatalogState({
-        //     type: CatalogActions.SET_CATALOG_ACTIVE_OFFER,
-        //     payload: {
-        //         activeOffer: offers[0]
-        //     }
-        // });
-    }, [ offers, dispatchCatalogState ]);
-
     return (
-        <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100 overflow-auto">
+        <NitroCardGridView columns={ 5 } { ...rest }>
             { offers && (offers.length > 0) && offers.map((offer, index) =>
                 {
                     return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
-            })}
-        </div>
+                })}
+        </NitroCardGridView>
     );
 }
diff --git a/src/views/catalog/views/page/offers/CatalogPageOffersView.types.ts b/src/views/catalog/views/page/offers/CatalogPageOffersView.types.ts
index 9f7945d0..451510cc 100644
--- a/src/views/catalog/views/page/offers/CatalogPageOffersView.types.ts
+++ b/src/views/catalog/views/page/offers/CatalogPageOffersView.types.ts
@@ -1,6 +1,7 @@
 import { CatalogPageMessageOfferData } from '@nitrots/nitro-renderer';
+import { DetailsHTMLAttributes } from 'react';
 
-export interface CatalogPageOffersViewProps
+export interface CatalogPageOffersViewProps extends DetailsHTMLAttributes<HTMLDivElement>
 {
     offers: CatalogPageMessageOfferData[];
 }
diff --git a/src/views/catalog/views/page/product/CatalogProductView.scss b/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.scss
similarity index 100%
rename from src/views/catalog/views/page/product/CatalogProductView.scss
rename to src/views/catalog/views/page/product-preview/CatalogProductPreviewView.scss
diff --git a/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.tsx b/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.tsx
new file mode 100644
index 00000000..3b31ea71
--- /dev/null
+++ b/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.tsx
@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import { LimitedEditionCompletePlateView } from '../../../../shared/limited-edition/complete-plate/LimitedEditionCompletePlateView';
+import { GetOfferName } from '../../../common/CatalogUtilities';
+import { CatalogRoomPreviewerView } from '../../catalog-room-previewer/CatalogRoomPreviewerView';
+import { CatalogPageDetailsView } from '../../page-details/CatalogPageDetailsView';
+import { CatalogPurchaseView } from '../purchase/CatalogPurchaseView';
+import { CatalogProductPreviewViewProps } from './CatalogProductPreviewView.types';
+
+export const CatalogProductPreviewView: FC<CatalogProductPreviewViewProps> = props =>
+{
+    const { pageParser = null, activeOffer = null, roomPreviewer = null, extra = '', disabled = false, children = null } = props;
+
+    const product = ((activeOffer && activeOffer.products[0]) || null);
+
+    if(!product) return <CatalogPageDetailsView pageParser={ pageParser } />;
+
+    return (
+        <>
+            <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+            { product.uniqueLimitedItem &&
+                <LimitedEditionCompletePlateView uniqueLimitedItemsLeft={ product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ product.uniqueLimitedSeriesSize } /> }
+            <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
+            { children }
+            <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ extra } disabled={ disabled } />
+        </>
+    );
+}
diff --git a/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.types.ts b/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.types.ts
new file mode 100644
index 00000000..249d05ff
--- /dev/null
+++ b/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.types.ts
@@ -0,0 +1,10 @@
+import { CatalogPageMessageOfferData, CatalogPageMessageParser, RoomPreviewer } from '@nitrots/nitro-renderer';
+
+export interface CatalogProductPreviewViewProps
+{
+    pageParser: CatalogPageMessageParser;
+    activeOffer: CatalogPageMessageOfferData;
+    roomPreviewer: RoomPreviewer;
+    extra?: string;
+    disabled?: boolean;
+}
diff --git a/src/views/catalog/views/page/product/CatalogProductView.tsx b/src/views/catalog/views/page/product/CatalogProductView.tsx
index 2bb1c543..406f6e21 100644
--- a/src/views/catalog/views/page/product/CatalogProductView.tsx
+++ b/src/views/catalog/views/page/product/CatalogProductView.tsx
@@ -1,79 +1,36 @@
-import { FurnitureType } from '@nitrots/nitro-renderer';
 import { FC, useMemo } from 'react';
-import { GetConfiguration, GetRoomEngine, GetSessionDataManager } from '../../../../../api';
+import { NitroCardGridItemView } from '../../../../../layout';
 import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
-import { LimitedEditionStyledNumberView } from '../../../../shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
+import { GetProductIconUrl } from '../../../common/GetProuductIconUrl';
 import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
 import { CatalogProductViewProps } from './CatalogProductView.types';
 
 export const CatalogProductView: FC<CatalogProductViewProps> = props =>
 {
-    const { isActive = false, product = null, onMouseEvent = null } = props;
+    const { isActive = false, product = null, ...rest } = props;
 
     const iconUrl = useMemo(() =>
     {
         if(!product) return null;
+        
+        return GetProductIconUrl(product.furniClassId, product.productType, product.extraParam);
+    }, [ product ]);
 
-        const productType = product.productType.toUpperCase();
+    const getUniqueNumber = useMemo(() =>
+    {
+        if(!product.uniqueLimitedItem) return 0;
 
-        switch(productType)
-        {
-            case FurnitureType.BADGE:
-                return GetSessionDataManager().getBadgeUrl(product.extraParam);
-            case FurnitureType.ROBOT:
-                return null;
-            case FurnitureType.FLOOR:
-                return GetRoomEngine().getFurnitureFloorIconUrl(product.furniClassId);
-            case FurnitureType.WALL: {
-                const furniData = GetSessionDataManager().getWallItemData(product.furniClassId);
-                
-                let iconName = '';
+        if(!product.uniqueLimitedItemsLeft) return -1;
 
-                if(furniData)
-                {
-                    switch(furniData.className)
-                    {
-                        case 'floor':
-                            iconName = ['th', furniData.className, product.extraParam].join('_');
-                            break;
-                        case 'wallpaper':
-                            iconName = ['th', 'wall', product.extraParam].join('_');
-                            break;
-                        case 'landscape':
-                            iconName = ['th', furniData.className, product.extraParam.replace('.', '_'), '001'].join('_');
-                            break;
-                    }
-
-                    if(iconName !== '')
-                    {
-                        const assetUrl = GetConfiguration<string>('catalog.asset.url');
-
-                        return `${ assetUrl }/${ iconName }.png`;
-                    }
-                }
-
-                return GetRoomEngine().getFurnitureWallIconUrl(product.furniClassId, product.extraParam);
-            }
-        }
-
-        return null;
+        return product.uniqueLimitedSeriesSize;
     }, [ product ]);
 
     if(!product) return null;
 
-    const imageUrl = (iconUrl && iconUrl.length) ? `url(${ iconUrl })` : null;
-
     return (
-        <div className="col pe-1 pb-1 catalog-offer-item-container">
-            <div className={ 'position-relative border border-2 rounded catalog-offer-item cursor-pointer ' + (isActive ? 'active ' : '') + (product.uniqueLimitedItem ? 'unique-item ' : '') + ((product.uniqueLimitedItem && !product.uniqueLimitedItemsLeft) ? 'sold-out ' : '') } style={ { backgroundImage: imageUrl }} onClick={ onMouseEvent } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
-                { !imageUrl && (product.productType === ProductTypeEnum.ROBOT) &&
-                    <AvatarImageView figure={ product.extraParam } direction={ 3 } headOnly={ true } /> }
-                { (product.productCount > 1) && <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ product.productCount }</span> }
-                { product.uniqueLimitedItem && 
-                    <div className="position-absolute unique-item-counter">
-                        <LimitedEditionStyledNumberView value={ product.uniqueLimitedSeriesSize } />
-                    </div> }
-            </div>
-        </div>
+        <NitroCardGridItemView itemImage={ iconUrl } itemActive={ isActive } itemCount={ product.productCount } itemUniqueNumber={ getUniqueNumber } { ...rest }>
+            { (product.productType === ProductTypeEnum.ROBOT) &&
+                <AvatarImageView figure={ product.extraParam } direction={ 3 } headOnly={ true } /> }
+        </NitroCardGridItemView>
     );
 }
diff --git a/src/views/catalog/views/page/product/CatalogProductView.types.ts b/src/views/catalog/views/page/product/CatalogProductView.types.ts
index e059ecf5..b2d94bde 100644
--- a/src/views/catalog/views/page/product/CatalogProductView.types.ts
+++ b/src/views/catalog/views/page/product/CatalogProductView.types.ts
@@ -1,9 +1,8 @@
 import { CatalogPageMessageProductData } from '@nitrots/nitro-renderer';
-import { MouseEventHandler } from 'react';
+import { DetailsHTMLAttributes } from 'react';
 
-export interface CatalogProductViewProps
+export interface CatalogProductViewProps extends DetailsHTMLAttributes<HTMLDivElement>
 {
     isActive: boolean;
     product: CatalogPageMessageProductData;
-    onMouseEvent?: MouseEventHandler<Element>;
 }
diff --git a/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.tsx b/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.tsx
index a234f840..00e30a25 100644
--- a/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.tsx
+++ b/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.tsx
@@ -17,7 +17,7 @@ export const CatalogLayoutSearchResultView: FC<CatalogLayoutSearchResultViewProp
 
     return (
         <div className="row h-100">
-            <div className="col-7 h-100">
+            <div className="d-flex flex-column col-7 h-100">
                 <CatalogSearchResultOffersView offers={ furnitureDatas } />
             </div>
             { product &&
diff --git a/src/views/catalog/views/page/search-result/offer/CatalogSearchResultOfferView.tsx b/src/views/catalog/views/page/search-result/offer/CatalogSearchResultOfferView.tsx
index 28290cf9..b7ff3534 100644
--- a/src/views/catalog/views/page/search-result/offer/CatalogSearchResultOfferView.tsx
+++ b/src/views/catalog/views/page/search-result/offer/CatalogSearchResultOfferView.tsx
@@ -1,7 +1,10 @@
-import { FurnitureType, GetProductOfferComposer, MouseEventType } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, useCallback } from 'react';
-import { GetConfiguration, GetRoomEngine, GetSessionDataManager } from '../../../../../../api';
+import { GetProductOfferComposer, MouseEventType } from '@nitrots/nitro-renderer';
+import { FC, MouseEvent, useCallback, useMemo } from 'react';
 import { SendMessageHook } from '../../../../../../hooks/messages/message-event';
+import { NitroCardGridItemView } from '../../../../../../layout';
+import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
+import { GetProductIconUrl } from '../../../../common/GetProuductIconUrl';
+import { ProductTypeEnum } from '../../../../common/ProductTypeEnum';
 import { CatalogSearchResultOfferViewProps } from './CatalogSearchResultOfferView.types';
 
 export const CatalogSearchResultOfferView: FC<CatalogSearchResultOfferViewProps> = props =>
@@ -15,62 +18,22 @@ export const CatalogSearchResultOfferView: FC<CatalogSearchResultOfferViewProps>
             case MouseEventType.MOUSE_DOWN:
                 SendMessageHook(new GetProductOfferComposer(offer.purchaseOfferId));
                 return;
-            case MouseEventType.MOUSE_UP:
-                return;
-            case MouseEventType.ROLL_OUT:
-                return;
         }
     }, [ offer ]);
 
-    function getIconUrl(): string
+    const iconUrl = useMemo(() =>
     {
-        const productType = offer.type.toUpperCase();
+        if(!offer) return null;
+        
+        return GetProductIconUrl(offer.id, offer.type, offer.customParams);
+    }, [ offer ]);
 
-        switch(productType)
-        {
-            case FurnitureType.BADGE:
-                return GetSessionDataManager().getBadgeUrl(offer.customParams);
-            case FurnitureType.FLOOR:
-                return GetRoomEngine().getFurnitureFloorIconUrl(offer.id);
-            case FurnitureType.WALL:
-                const furniData = GetSessionDataManager().getWallItemData(offer.id);
-                
-                let iconName = '';
-
-                if(furniData)
-                {
-                    switch(furniData.className)
-                    {
-                        case 'floor':
-                            iconName = ['th', furniData.className, offer.customParams ].join('_');
-                            break;
-                        case 'wallpaper':
-                            iconName = ['th', 'wall', offer.customParams ].join('_');
-                            break;
-                        case 'landscape':
-                            iconName = ['th', furniData.className, ((offer.customParams && offer.customParams.replace('.', '_')) || null), '001'].join('_');
-                            break;
-                    }
-
-                    if(iconName !== '')
-                    {
-                        const assetUrl = GetConfiguration<string>('catalog.asset.url');
-
-                        return `${ assetUrl }/${ iconName }.png`;
-                    }
-                }
-
-                return GetRoomEngine().getFurnitureWallIconUrl(offer.id, offer.customParams);
-        }
-
-        return '';
-    }
-
-    const imageUrl = `url(${ getIconUrl() })`;
+    if(!offer) return null;
 
     return (
-        <div className="col pe-1 pb-1 catalog-offer-item-container">
-            <div className={ 'position-relative border border-2 rounded catalog-offer-item cursor-pointer ' + (isActive ? 'active ' : '') } style={ { backgroundImage: imageUrl }} onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } />
-        </div>
+        <NitroCardGridItemView itemImage={ iconUrl } itemActive={ isActive } onMouseDown={ onMouseEvent }>
+            { (offer.type === ProductTypeEnum.ROBOT) &&
+                <AvatarImageView figure={ offer.customParams } direction={ 3 } headOnly={ true } /> }
+        </NitroCardGridItemView>
     );
 }
diff --git a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx b/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx
index ae260892..213aade1 100644
--- a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx
+++ b/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx
@@ -1,14 +1,15 @@
 import { GetProductOfferComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { SendMessageHook } from '../../../../../../hooks/messages/message-event';
+import { NitroCardGridView } from '../../../../../../layout';
 import { useCatalogContext } from '../../../../context/CatalogContext';
 import { CatalogSearchResultOfferView } from '../offer/CatalogSearchResultOfferView';
 import { CatalogSearchResultOffersViewProps } from './CatalogSearchResultOffersView.types';
 
 export const CatalogSearchResultOffersView: FC<CatalogSearchResultOffersViewProps> = props =>
 {
-    const { offers = [] } = props;
-    const { catalogState } = useCatalogContext();
+    const { offers = [], ...rest } = props;
+    const { catalogState = null } = useCatalogContext();
     const { activeOffer = null } = catalogState;
 
     useEffect(() =>
@@ -19,13 +20,13 @@ export const CatalogSearchResultOffersView: FC<CatalogSearchResultOffersViewProp
     }, [ offers ]);
 
     return (
-        <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100">
+        <NitroCardGridView columns={ 5 } { ...rest }>
             { offers && (offers.length > 0) && offers.map((offer, index) =>
                 {
                     const isActive = (activeOffer && (activeOffer.products[0].furniClassId === offer.id));
 
                     return <CatalogSearchResultOfferView key={ index } isActive={ isActive } offer={ offer } />
-                }) }
-        </div>
+                })}
+        </NitroCardGridView>
     );
 }
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
index 67878baa..1df916ef 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -117,7 +117,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
 
     return (
         <div className="row h-100">
-            <div className="col-7 d-flex flex-column h-100">
+            <div className="d-flex flex-column col-7 h-100">
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                 <InventoryFurnitureResultsView groupItems={ filteredGroupItems }  />
             </div>

From 7581d8cdf22685753fd2d4be4cb04b130588447e Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Thu, 23 Sep 2021 03:22:43 -0400
Subject: [PATCH 19/31] More catalog updates

---
 src/layout/card/grid/NitroCardGridView.tsx    |  6 ++--
 .../card/grid/NitroCardGridView.types.ts      |  1 +
 .../card/grid/item/NitroCardGridItemView.tsx  |  2 +-
 src/views/catalog/CatalogView.tsx             |  2 +-
 .../navigation/CatalogNavigationView.scss     | 30 +++++++++++++++----
 .../navigation/CatalogNavigationView.tsx      | 15 ++++++----
 .../item/CatalogNavigationItemView.tsx        | 15 +++++-----
 .../set/CatalogNavigationSetView.tsx          |  4 +--
 .../views/search/CatalogSearchView.tsx        |  2 +-
 9 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/src/layout/card/grid/NitroCardGridView.tsx b/src/layout/card/grid/NitroCardGridView.tsx
index 033927a4..8fd178e0 100644
--- a/src/layout/card/grid/NitroCardGridView.tsx
+++ b/src/layout/card/grid/NitroCardGridView.tsx
@@ -3,16 +3,16 @@ import { NitroCardGridViewProps } from './NitroCardGridView.types';
 
 export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
 {
-    const { columns = 5, className = '', style = null, children = null, ...rest } = props;
+    const { columns = 5, gap = 2, className = '', style = null, children = null, ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
-        let newClassName = 'grid gap-2 overflow-auto';
+        let newClassName = `grid gap-${ gap } overflow-auto`;
 
         if(className && className.length) newClassName += ' ' + className;
 
         return newClassName;
-    }, [ className ]);
+    }, [ className, gap ]);
 
     const getStyle = useMemo(() =>
     {
diff --git a/src/layout/card/grid/NitroCardGridView.types.ts b/src/layout/card/grid/NitroCardGridView.types.ts
index d5dc256d..55b14648 100644
--- a/src/layout/card/grid/NitroCardGridView.types.ts
+++ b/src/layout/card/grid/NitroCardGridView.types.ts
@@ -3,4 +3,5 @@ import { DetailsHTMLAttributes } from 'react';
 export interface NitroCardGridViewProps extends DetailsHTMLAttributes<HTMLDivElement>
 {
     columns?: number;
+    gap?: number;
 }
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.tsx b/src/layout/card/grid/item/NitroCardGridItemView.tsx
index 47c39438..3bc431ef 100644
--- a/src/layout/card/grid/item/NitroCardGridItemView.tsx
+++ b/src/layout/card/grid/item/NitroCardGridItemView.tsx
@@ -8,7 +8,7 @@ export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
 
     const getClassName = useMemo(() =>
     {
-        let newClassName = 'grid-item cursor-pointer overflow-hidden';
+        let newClassName = 'grid-item gap-1 cursor-pointer overflow-hidden';
 
         if(itemActive) newClassName += ' active';
 
diff --git a/src/views/catalog/CatalogView.tsx b/src/views/catalog/CatalogView.tsx
index d69eb842..ec06d572 100644
--- a/src/views/catalog/CatalogView.tsx
+++ b/src/views/catalog/CatalogView.tsx
@@ -205,7 +205,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                     <NitroCardContentView>
                         <div className="row h-100">
                             { currentNavigationPage && !navigationHidden &&
-                                <div className="col-3 d-flex flex-column h-100">
+                                <div className="col-3 h-100">
                                     <CatalogNavigationView page={ currentNavigationPage } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
                                 </div> }
                             <div className="col h-100">
diff --git a/src/views/catalog/views/navigation/CatalogNavigationView.scss b/src/views/catalog/views/navigation/CatalogNavigationView.scss
index e094aaac..e75d5f61 100644
--- a/src/views/catalog/views/navigation/CatalogNavigationView.scss
+++ b/src/views/catalog/views/navigation/CatalogNavigationView.scss
@@ -1,10 +1,30 @@
-.nitro-catalog-navigation {
-    border-color: $grid-border-color !important;
-    background-color: $grid-bg-color !important;
+.nitro-catalog-navigation-grid {
+    border-radius: 0.25rem;
+    border-color: #B6BEC5 !important;
+    background-color: #CDD3D9;
+    border: 2px solid;
 
-    .navigation-container {
-        overflow-y: auto;
+    .grid-item {
+        font-size: $font-size-sm;
+        height: 23px !important;
+        border-color: unset !important;
+        background-color: #CDD3D9;
+        border: 0 !important;
+        padding: 1px 3px;
+
+        i.fas {
+            color: $black;
+            font-size: 10px;
+            padding: 1px;
+        }
     }
+
+    // border-color: $grid-border-color !important;
+    // background-color: $grid-bg-color !important;
+
+    // .navigation-container {
+    //     overflow-y: auto;
+    // }
 }
 
 @import './item/CatalogNavigationItemView';
diff --git a/src/views/catalog/views/navigation/CatalogNavigationView.tsx b/src/views/catalog/views/navigation/CatalogNavigationView.tsx
index ac636961..cb8efe9c 100644
--- a/src/views/catalog/views/navigation/CatalogNavigationView.tsx
+++ b/src/views/catalog/views/navigation/CatalogNavigationView.tsx
@@ -1,5 +1,6 @@
 import { INodeData } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
+import { NitroCardGridView } from '../../../../layout';
 import { CatalogSearchView } from '../search/CatalogSearchView';
 import { CatalogNavigationViewProps } from './CatalogNavigationView.types';
 import { CatalogNavigationSetView } from './set/CatalogNavigationSetView';
@@ -23,13 +24,15 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
     }, [ page ]);
     
     return (
-        <>
-            <CatalogSearchView />
-            <div className="border border-2 rounded overflow-hidden nitro-catalog-navigation p-1 h-100">
-                <div className="navigation-container h-100">
-                    <CatalogNavigationSetView page={ page } isFirstSet={ true } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
+        <div className="row h-100">
+            <div className="d-flex flex-column col gap-2 h-100">
+                <CatalogSearchView />
+                <div className="d-flex flex-column overflow-hidden nitro-catalog-navigation-grid p-1 h-100">
+                    <NitroCardGridView columns={ 1 } gap={ 1 }>
+                        <CatalogNavigationSetView page={ page } isFirstSet={ true } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
+                    </NitroCardGridView>
                 </div>
             </div>
-        </>
+        </div>
     );
 }
diff --git a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx b/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx
index 42344628..f618c0e1 100644
--- a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx
+++ b/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx
@@ -1,6 +1,7 @@
 import { GetCatalogPageComposer, INodeData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { SendMessageHook } from '../../../../../hooks/messages/message-event';
+import { NitroCardGridItemView } from '../../../../../layout';
 import { CatalogMode } from '../../../CatalogView.types';
 import { CatalogIconView } from '../../catalog-icon/CatalogIconView';
 import { ACTIVE_PAGES } from '../CatalogNavigationView';
@@ -70,16 +71,14 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
     }, [ isActive, page ]);
     
     return (
-        <div className="col pb-1 catalog-navigation-item-container">
-            <div className={ 'd-flex align-items-center cursor-pointer catalog-navigation-item ' + (isActive ? 'active ': '') } onClick={ event => select(page) }>
+        <>
+            <NitroCardGridItemView itemActive={ isActive } onClick={ event => select(page) }>
                 <CatalogIconView icon={ page.icon } />
-                <div className="flex-grow-1 text-black text-truncate px-1">{ page.localization }</div>
+                <div className="flex-grow-1 text-black text-truncate">{ page.localization }</div>
                 { (page.children.length > 0) && <i className={ 'fas fa-caret-' + (isExpanded ? 'up' : 'down') } /> }
-            </div>
+            </NitroCardGridItemView>
             { isActive && isExpanded && page.children && (page.children.length > 0) &&
-                <div className="d-flex flex-column mt-1">
-                    <CatalogNavigationSetView page={ page } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
-                </div> }
-        </div>
+                <CatalogNavigationSetView page={ page } pendingTree={ pendingTree } setPendingTree={ setPendingTree } /> }
+        </>
     );
 }
diff --git a/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx b/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
index 966fbfd4..3d6199a1 100644
--- a/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
+++ b/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
@@ -26,13 +26,13 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
     }, [ page, isFirstSet, activeChild, pendingTree ]);
     
     return (
-        <div className="row row-cols-1 g-0 catalog-navigation-set-container w-100">
+        <>
             { page && (page.children.length > 0) && page.children.map((page, index) =>
                 {
                     if(!page.visible) return null;
                     
                     return <CatalogNavigationItemView key={ index } page={ page } isActive={ (activeChild === page) } pendingTree={ pendingTree } setPendingTree={ setPendingTree } setActiveChild={ setActiveChild } />
                 }) }
-        </div>
+        </>
     );
 }
diff --git a/src/views/catalog/views/search/CatalogSearchView.tsx b/src/views/catalog/views/search/CatalogSearchView.tsx
index af6ffb41..ecb9b430 100644
--- a/src/views/catalog/views/search/CatalogSearchView.tsx
+++ b/src/views/catalog/views/search/CatalogSearchView.tsx
@@ -110,7 +110,7 @@ export const CatalogSearchView: FC<CatalogSearchViewProps> = props =>
     }, [ searchValue, processSearch ]);
 
     return (
-        <div className="d-flex mb-1">
+        <div className="d-flex">
             <div className="d-flex flex-grow-1 me-1">
                 <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
             </div>

From 9769dcf8877dc71e324a21d592a66f61af51f269 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Thu, 23 Sep 2021 03:23:17 -0400
Subject: [PATCH 20/31] Update decorate mode

---
 .../RoomWidgetUpdateDecorateModeEvent.ts      |  20 ++++
 src/api/nitro/room/widgets/events/index.ts    |   1 +
 .../avatar-info/AvatarInfoWidgetView.tsx      |  13 ++-
 .../decorate/AvatarInfoWidgetDecorateView.tsx |  15 ++-
 .../AvatarInfoWidgetDecorateView.types.ts     |   2 -
 .../AvatarInfoWidgetOwnAvatarView.tsx         |  10 +-
 .../AvatarInfoWidgetOwnAvatarView.types.ts    |   2 -
 .../FurnitureManipulationMenuView.tsx         | 100 +++++++++++++-----
 8 files changed, 120 insertions(+), 43 deletions(-)
 create mode 100644 src/api/nitro/room/widgets/events/RoomWidgetUpdateDecorateModeEvent.ts

diff --git a/src/api/nitro/room/widgets/events/RoomWidgetUpdateDecorateModeEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetUpdateDecorateModeEvent.ts
new file mode 100644
index 00000000..212e371c
--- /dev/null
+++ b/src/api/nitro/room/widgets/events/RoomWidgetUpdateDecorateModeEvent.ts
@@ -0,0 +1,20 @@
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetUpdateDecorateModeEvent extends RoomWidgetUpdateEvent
+{
+    public static UPDATE_DECORATE: string = 'RWUDME_UPDATE_DECORATE';
+
+    private _isDecorating: boolean;
+
+    constructor(isDecorating: boolean)
+    {
+        super(RoomWidgetUpdateDecorateModeEvent.UPDATE_DECORATE);
+
+        this._isDecorating = isDecorating;
+    }
+
+    public get isDecorating(): boolean
+    {
+        return this._isDecorating;
+    }
+}
diff --git a/src/api/nitro/room/widgets/events/index.ts b/src/api/nitro/room/widgets/events/index.ts
index f612d85b..775d210e 100644
--- a/src/api/nitro/room/widgets/events/index.ts
+++ b/src/api/nitro/room/widgets/events/index.ts
@@ -14,6 +14,7 @@ export * from './RoomWidgetUpdateChatInputContentEvent';
 export * from './RoomWidgetUpdateCreditFurniEvent';
 export * from './RoomWidgetUpdateCustomStackHeightEvent';
 export * from './RoomWidgetUpdateDanceStatusEvent';
+export * from './RoomWidgetUpdateDecorateModeEvent';
 export * from './RoomWidgetUpdateDimmerEvent';
 export * from './RoomWidgetUpdateDimmerStateEvent';
 export * from './RoomWidgetUpdateEvent';
diff --git a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
index d949cfaa..a12d17bc 100644
--- a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
@@ -1,6 +1,6 @@
 import { RoomEnterEffect, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
-import { GetRoomSession, GetSessionDataManager, RoomWidgetObjectNameEvent, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectMessage, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdateDanceStatusEvent, RoomWidgetUpdateInfostandEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRentableBotChatEvent, RoomWidgetUseProductBubbleEvent, UseProductItem } from '../../../../api';
+import { GetRoomSession, GetSessionDataManager, RoomWidgetObjectNameEvent, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectMessage, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdateDanceStatusEvent, RoomWidgetUpdateDecorateModeEvent, RoomWidgetUpdateInfostandEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRentableBotChatEvent, RoomWidgetUseProductBubbleEvent, UseProductItem } from '../../../../api';
 import { CreateEventDispatcherHook } from '../../../../hooks/events/event-dispatcher.base';
 import { useRoomContext } from '../../context/RoomContext';
 import { AvatarInfoWidgetAvatarView } from './views/avatar/AvatarInfoWidgetAvatarView';
@@ -264,6 +264,13 @@ export const AvatarInfoWidgetView: FC<{}> = props =>
 
     // useUiEvent(FriendEnteredRoomEvent.ENTERED, onFriendEnteredRoomEvent);
 
+    const onRoomWidgetUpdateDecorateModeEvent = useCallback((event: RoomWidgetUpdateDecorateModeEvent) =>
+    {
+        setIsDecorating(event.isDecorating);
+    }, []);
+
+    CreateEventDispatcherHook(RoomWidgetUpdateDecorateModeEvent.UPDATE_DECORATE, eventDispatcher, onRoomWidgetUpdateDecorateModeEvent);
+
     const decorateView = useMemo(() =>
     {
         GetRoomSession().isDecorating = isDecorating;
@@ -274,7 +281,7 @@ export const AvatarInfoWidgetView: FC<{}> = props =>
         const userName = GetSessionDataManager().userName;
         const roomIndex = GetRoomSession().ownRoomIndex;
 
-        return <AvatarInfoWidgetDecorateView userId={ userId } userName={ userName } roomIndex={ roomIndex } setIsDecorating={ setIsDecorating } />;
+        return <AvatarInfoWidgetDecorateView userId={ userId } userName={ userName } roomIndex={ roomIndex } />;
     }, [ isDecorating ]);
 
     const currentView = useMemo(() =>
@@ -316,7 +323,7 @@ export const AvatarInfoWidgetView: FC<{}> = props =>
                     {
                         if(RoomEnterEffect.isRunning()) return null;
 
-                        return <AvatarInfoWidgetOwnAvatarView userData={ event } isDancing={ isDancing } setIsDecorating={ setIsDecorating } close={ clearInfoStandEvent } />;
+                        return <AvatarInfoWidgetOwnAvatarView userData={ event } isDancing={ isDancing } close={ clearInfoStandEvent } />;
                     }
 
                     return <AvatarInfoWidgetAvatarView userData={ event } close={ clearInfoStandEvent } />;
diff --git a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx b/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx
index 5a365394..95b752b0 100644
--- a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx
+++ b/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx
@@ -1,6 +1,7 @@
 import { RoomObjectCategory } from '@nitrots/nitro-renderer';
-import { FC } from 'react';
-import { LocalizeText } from '../../../../../../api';
+import { FC, useCallback } from 'react';
+import { LocalizeText, RoomWidgetUpdateDecorateModeEvent } from '../../../../../../api';
+import { useRoomContext } from '../../../../context/RoomContext';
 import { ContextMenuView } from '../../../context-menu/ContextMenuView';
 import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
 import { ContextMenuListView } from '../../../context-menu/views/list/ContextMenuListView';
@@ -8,12 +9,18 @@ import { AvatarInfoWidgetDecorateViewProps } from './AvatarInfoWidgetDecorateVie
 
 export const AvatarInfoWidgetDecorateView: FC<AvatarInfoWidgetDecorateViewProps> = props =>
 {
-    const { userId = -1, userName = '', roomIndex = -1, setIsDecorating = null } = props;
+    const { userId = -1, userName = '', roomIndex = -1 } = props;
+    const { eventDispatcher = null } = useRoomContext();
+
+    const stopDecorating = useCallback(() =>
+    {
+        eventDispatcher.dispatchEvent(new RoomWidgetUpdateDecorateModeEvent(false));
+    }, [ eventDispatcher ]);
     
     return (
         <ContextMenuView objectId={ roomIndex } category={ RoomObjectCategory.UNIT } close={ null }>
             <ContextMenuListView>
-                <ContextMenuListItemView onClick={ event => setIsDecorating(false) }>
+                <ContextMenuListItemView onClick={ stopDecorating }>
                     { LocalizeText('widget.avatar.stop_decorating') }
                 </ContextMenuListItemView>
             </ContextMenuListView>
diff --git a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts b/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts
index 2440f17a..86c19e35 100644
--- a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts
+++ b/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts
@@ -1,9 +1,7 @@
-import { Dispatch, SetStateAction } from 'react';
 
 export interface AvatarInfoWidgetDecorateViewProps
 {
     userId: number;
     userName: string;
     roomIndex: number;
-    setIsDecorating: Dispatch<SetStateAction<boolean>>;
 }
diff --git a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx
index c5555ec3..1fa8c8e0 100644
--- a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx
+++ b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx
@@ -1,6 +1,6 @@
 import { AvatarAction, AvatarExpressionEnum, RoomObjectCategory, UserProfileComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { GetCanStandUp, GetCanUseExpression, GetOwnPosture, HasHabboClub, HasHabboVip, IsRidingHorse, LocalizeText, RoomWidgetAvatarExpressionMessage, RoomWidgetChangePostureMessage, RoomWidgetDanceMessage, RoomWidgetMessage, RoomWidgetUserActionMessage } from '../../../../../../api';
+import { GetCanStandUp, GetCanUseExpression, GetOwnPosture, HasHabboClub, HasHabboVip, IsRidingHorse, LocalizeText, RoomWidgetAvatarExpressionMessage, RoomWidgetChangePostureMessage, RoomWidgetDanceMessage, RoomWidgetMessage, RoomWidgetUpdateDecorateModeEvent, RoomWidgetUserActionMessage } from '../../../../../../api';
 import { AvatarEditorEvent } from '../../../../../../events';
 import { dispatchUiEvent, SendMessageHook } from '../../../../../../hooks';
 import { CurrencyIcon } from '../../../../../shared/currency-icon/CurrencyIcon';
@@ -18,9 +18,9 @@ const MODE_SIGNS = 4;
 
 export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProps> = props =>
 {
-    const { userData = null, isDancing = false, setIsDecorating = null, close = null } = props;
+    const { userData = null, isDancing = false, close = null } = props;
     const [ mode, setMode ] = useState((isDancing && HasHabboClub()) ? MODE_CLUB_DANCES : MODE_NORMAL);
-    const { roomSession = null, widgetHandler = null } = useRoomContext();
+    const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
 
     const processAction = useCallback((name: string) =>
     {
@@ -40,7 +40,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                 switch(name)
                 {
                     case 'decorate':
-                        setIsDecorating(true);
+                        eventDispatcher.dispatchEvent(new RoomWidgetUpdateDecorateModeEvent(true));
                         break;
                     case 'change_looks':
                         dispatchUiEvent(new AvatarEditorEvent(AvatarEditorEvent.SHOW_EDITOR));
@@ -101,7 +101,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
         }
 
         if(hideMenu) close();
-    }, [ roomSession, widgetHandler, userData, setIsDecorating, close ]);
+    }, [ roomSession, eventDispatcher, widgetHandler, userData, close ]);
 
     const openProfile = useCallback(() =>
     {
diff --git a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts
index e462efa6..00db768e 100644
--- a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts
+++ b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts
@@ -1,10 +1,8 @@
-import { Dispatch, SetStateAction } from 'react';
 import { RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
 
 export interface AvatarInfoWidgetOwnAvatarViewProps
 {
     userData: RoomWidgetUpdateInfostandUserEvent;
     isDancing: boolean;
-    setIsDecorating: Dispatch<SetStateAction<boolean>>;
     close: () => void;
 }
diff --git a/src/views/room/widgets/furniture/manipulation-menu/FurnitureManipulationMenuView.tsx b/src/views/room/widgets/furniture/manipulation-menu/FurnitureManipulationMenuView.tsx
index d7b60d69..33752c8f 100644
--- a/src/views/room/widgets/furniture/manipulation-menu/FurnitureManipulationMenuView.tsx
+++ b/src/views/room/widgets/furniture/manipulation-menu/FurnitureManipulationMenuView.tsx
@@ -1,36 +1,17 @@
 import { RoomObjectOperationType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { ProcessRoomObjectOperation, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
+import { ProcessRoomObjectOperation, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdateDecorateModeEvent } from '../../../../../api';
+import { BatchUpdates } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { useRoomContext } from '../../../context/RoomContext';
 import { ObjectLocationView } from '../../object-location/ObjectLocationView';
 
 export const FurnitureManipulationMenuView: FC<{}> = props =>
 {
-    const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const [ isVisible, setIsVisible ] = useState(false);
     const [ objectId, setObjectId ] = useState(-1);
     const [ objectType, setObjectType ] = useState(-1);
-
-    const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) =>
-    {
-        switch(event.type)
-        {
-            case RoomWidgetRoomObjectUpdateEvent.OBJECT_REQUEST_MANIPULATION: {
-                setIsVisible(true);
-                setObjectId(event.id);
-                setObjectType(event.category);
-                return;
-            }
-            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
-                return;
-            }
-            case RoomWidgetRoomObjectUpdateEvent.OBJECT_DESELECTED: {
-                setIsVisible(false);
-                return;
-            }
-        }
-    }, []);
+    const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
 
     const rotateFurniture = useCallback(() =>
     {
@@ -42,22 +23,87 @@ export const FurnitureManipulationMenuView: FC<{}> = props =>
         ProcessRoomObjectOperation(objectId, objectType, RoomObjectOperationType.OBJECT_MOVE);
     }, [ objectId, objectType ]);
 
-    useEffect(() =>
+    const pickupFurniture = useCallback(() =>
     {
-        if(!isVisible) return;
+        ProcessRoomObjectOperation(objectId, objectType, RoomObjectOperationType.OBJECT_PICKUP);
+    }, [ objectId, objectType ]);
 
-        moveFurniture();
-    }, [ isVisible, moveFurniture ]);
+    const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) =>
+    {
+        switch(event.type)
+        {
+            case RoomWidgetRoomObjectUpdateEvent.OBJECT_REQUEST_MANIPULATION: {
+                BatchUpdates(() =>
+                {
+                    setIsVisible(true);
+                    setObjectId(event.id);
+                    setObjectType(event.category);
+                });
+                return;
+            }
+            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
+                if(event.id === objectId)
+                {
+                    BatchUpdates(() =>
+                    {
+                        setIsVisible(false);
+                        setObjectId(-1);
+                        setObjectType(-1);
+                    });
+                }
+                return;
+            }
+            case RoomWidgetRoomObjectUpdateEvent.OBJECT_DESELECTED: {
+                BatchUpdates(() =>
+                {
+                    setIsVisible(false);
+                    setObjectId(-1);
+                    setObjectType(-1);
+                });
+                return;
+            }
+        }
+    }, [ objectId ]);
 
     CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.OBJECT_REQUEST_MANIPULATION, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
     CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.OBJECT_DESELECTED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
 
+    const onRoomWidgetUpdateDecorateModeEvent = useCallback((event: RoomWidgetUpdateDecorateModeEvent) =>
+    {
+        if(event.isDecorating) return;
+
+        moveFurniture();
+
+        BatchUpdates(() =>
+        {
+            setIsVisible(false);
+            setObjectId(-1);
+            setObjectType(-1);
+        });
+    }, [ moveFurniture ]);
+
+    CreateEventDispatcherHook(RoomWidgetUpdateDecorateModeEvent.UPDATE_DECORATE, eventDispatcher, onRoomWidgetUpdateDecorateModeEvent);
+
+    useEffect(() =>
+    {
+        if(!isVisible)
+        {
+            eventDispatcher.dispatchEvent(new RoomWidgetUpdateDecorateModeEvent(false));
+
+            return;
+        }
+
+        eventDispatcher.dispatchEvent(new RoomWidgetUpdateDecorateModeEvent(true));
+
+        moveFurniture();
+    }, [ eventDispatcher, isVisible, moveFurniture ]);
+
     if(!isVisible) return null;
 
     return (
         <ObjectLocationView objectId={ objectId } category={ objectType }>
             <div className="btn-group">
-                <button type="button" className="btn btn-primary btn-sm">
+                <button type="button" className="btn btn-primary btn-sm" onClick={ pickupFurniture }>
                     <i className="fas fa-times" />
                 </button>
                 <button type="button" className="btn btn-primary btn-sm" onClick={ rotateFurniture }>

From a9d97efc9846ad4787ae98a5c82701defe25575f Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Thu, 23 Sep 2021 05:20:15 -0400
Subject: [PATCH 21/31] Inventory layout updates

---
 .../views/badge/InventoryBadgeView.tsx        | 58 +++++++++++++------
 .../inventory/views/bot/InventoryBotView.tsx  | 19 +++---
 .../furniture/InventoryFurnitureView.tsx      | 26 +++++----
 .../inventory/views/pet/InventoryPetView.tsx  | 17 +++---
 4 files changed, 75 insertions(+), 45 deletions(-)

diff --git a/src/views/inventory/views/badge/InventoryBadgeView.tsx b/src/views/inventory/views/badge/InventoryBadgeView.tsx
index 58ce4a56..3bcd03b6 100644
--- a/src/views/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/views/inventory/views/badge/InventoryBadgeView.tsx
@@ -74,33 +74,55 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
     }
 
     return (
-        <>
-            <div className="d-flex flex-column h-100 overflow-hidden">
-                <div className="row inventory-badge-overflow">
-                    <div className="col-7 d-flex flex-column h-100">
-                        <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges }  />
-                    </div>
-                    <div className="col">
+        <div className="d-flex flex-column h-100 overflow-hidden">
+            <div className="row h-100">
+                <div className="d-flex flex-column col-7 h-100">
+                    <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
+                </div>
+                <div className="d-flex flex-column justify-content-between col-5 gap-2 h-100 overflow-hidden">
+                    <div className="d-flex flex-column overflow-hidden">
                         <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
                         <InventoryActiveBadgeResultsView badges={ activeBadges }  />
                     </div>
-                </div>
-                <div className="my-auto">
                     { badge && badge.length &&
-                        <div className="d-flex justify-content-between align-items-center bg-secondary rounded px-2 py-1 mb-1 mt-1">
-                            <div className="d-flex flex-grow-1 current-badge-container">
-                                <BadgeImageView badgeCode={ badge } />
-                                <div className="d-flex flex-column justify-content-center flex-grow-1 ms-2">
-                                    <p className="mb-0">{ LocalizeBadgeName(badge) }</p>
+                        <div className="d-flex flex-column gap-2">
+                            <div className="d-flex justify-content-between align-items-center">
+                                <div className="d-flex flex-grow-1 gap-2 align-items-center current-badge-container overflow-hidden">
+                                    <BadgeImageView badgeCode={ badge } />
+                                    <div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div>
                                 </div>
                             </div>
                             <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
                         </div> }
-                    <div className="d-flex justify-content-center align-items-center bg-primary rounded p-1">
-                        <div className="h6 m-0 text-white">{ LocalizeText('achievements_score_description', [ 'score' ], [ '0' ]) }</div>
-                    </div>
                 </div>
             </div>
-        </>
+        </div>
+    //     <div className="d-flex flex-column h-100 overflow-hidden">
+    //         <div className="row inventory-badge-overflow">
+    //             <div className="col-7 d-flex flex-column h-100">
+    //                 <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges }  />
+    //             </div>
+    //             <div className="col">
+    //                 <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
+    //                 <InventoryActiveBadgeResultsView badges={ activeBadges }  />
+    //             </div>
+    //         </div>
+    //         <div className="my-auto">
+    //             { badge && badge.length &&
+    //                 <div className="d-flex justify-content-between align-items-center bg-secondary rounded px-2 py-1 mb-1 mt-1">
+    //                     <div className="d-flex flex-grow-1 current-badge-container">
+    //                         <BadgeImageView badgeCode={ badge } />
+    //                         <div className="d-flex flex-column justify-content-center flex-grow-1 ms-2">
+    //                             <p className="mb-0">{ LocalizeBadgeName(badge) }</p>
+    //                         </div>
+    //                     </div>
+    //                     <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
+    //                 </div> }
+    //             <div className="d-flex justify-content-center align-items-center bg-primary rounded p-1">
+    //                 <div className="h6 m-0 text-white">{ LocalizeText('achievements_score_description', [ 'score' ], [ '0' ]) }</div>
+    //             </div>
+    //         </div>
+    //     </div>
+    // </>
     );
 }
diff --git a/src/views/inventory/views/bot/InventoryBotView.tsx b/src/views/inventory/views/bot/InventoryBotView.tsx
index 5ea3ef84..d4828b31 100644
--- a/src/views/inventory/views/bot/InventoryBotView.tsx
+++ b/src/views/inventory/views/bot/InventoryBotView.tsx
@@ -81,15 +81,18 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
 
     return (
         <div className="row h-100">
-            <div className="col-7 d-flex flex-column h-100">
-                <InventoryBotResultsView botItems={ botItems }  />
+            <div className="d-flex flex-column col-7 h-100">
+                <InventoryBotResultsView botItems={ botItems } />
             </div>
-            <div className="d-flex flex-column col-5 justify-space-between">
-                <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                { botItem && <div className="d-flex flex-column flex-grow-1">
-                    <p className="flex-grow-1 fs-6 text-black my-2">{ botItem.botData.name }</p>
-                    { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                </div> }
+            <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
+                <div className="position-relative d-flex flex-column overflow-auto h-100">
+                    <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                </div>
+                { botItem &&
+                    <div className="d-flex flex-column gap-2">
+                        <p className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</p>
+                        { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
+                    </div> }
             </div>
         </div>
     );
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
index 1df916ef..0a4f93cc 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -121,19 +121,21 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                 <InventoryFurnitureResultsView groupItems={ filteredGroupItems }  />
             </div>
-            <div className="position-relative d-flex flex-column col-5 justify-space-between">
-                <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                { groupItem && groupItem.stuffData.isUnique &&
-                    <div className="stuffdata-extra-container">
-                        <LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
-                    </div> }
-                { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
-                    <div className="stuffdata-extra-container">
-                        <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
-                    </div> }
+            <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
+                <div className="position-relative d-flex flex-column overflow-auto h-100">
+                    <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                    { groupItem && groupItem.stuffData.isUnique &&
+                        <div className="stuffdata-extra-container">
+                            <LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
+                        </div> }
+                    { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
+                        <div className="stuffdata-extra-container">
+                            <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
+                        </div> }
+                </div>
                 { groupItem &&
-                    <div className="d-flex flex-column flex-grow-1">
-                        <p className="flex-grow-1 fs-6 text-black my-2">{ groupItem.name }</p>
+                    <div className="d-flex flex-column gap-2">
+                        <p className="flex-grow-1 text-black text-truncate">{ groupItem.name }</p>
                         { !!roomSession &&
                             <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
                     </div> }
diff --git a/src/views/inventory/views/pet/InventoryPetView.tsx b/src/views/inventory/views/pet/InventoryPetView.tsx
index 5d8d8d90..a90faef1 100644
--- a/src/views/inventory/views/pet/InventoryPetView.tsx
+++ b/src/views/inventory/views/pet/InventoryPetView.tsx
@@ -81,15 +81,18 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
 
     return (
         <div className="row h-100">
-            <div className="col-7 d-flex flex-column h-100">
+            <div className="d-flex flex-column col-7 h-100">
                 <InventoryPetResultsView petItems={ petItems }  />
             </div>
-            <div className="d-flex flex-column col-5 justify-space-between">
-                <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                { petItem && <div className="d-flex flex-column flex-grow-1">
-                    <p className="flex-grow-1 fs-6 text-black my-2">{ petItem.petData.name }</p>
-                    { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                </div> }
+            <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
+                <div className="position-relative d-flex flex-column overflow-auto h-100">
+                    <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                </div>
+                { petItem &&
+                    <div className="d-flex flex-column gap-2">
+                        <p className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</p>
+                        { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
+                    </div> }
             </div>
         </div>
     );

From c1f73bebd031f719846db64466d1f63a96bd4f04 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 24 Sep 2021 01:38:23 -0400
Subject: [PATCH 22/31] Add layout components

---
 src/assets/styles/bootstrap/_utilities.scss   |  8 +++
 src/assets/styles/grid.scss                   | 44 ------------
 src/assets/styles/index.scss                  |  1 -
 src/assets/styles/scrollbars.scss             | 49 ++++++++++---
 src/layout/card/NitroCardView.scss            | 11 +--
 .../card/content/NitroCardContentView.tsx     |  2 +-
 src/layout/card/grid/NitroCardGridView.scss   | 71 +------------------
 src/layout/card/grid/NitroCardGridView.tsx    |  4 +-
 src/layout/common/NitroLayoutColumns.type.ts  |  1 +
 src/layout/common/NitroLayoutOverflow.type.ts |  1 +
 src/layout/common/NitroLayoutPosition.type.ts |  1 +
 src/layout/common/NitroLayoutSpacing.type.ts  |  1 +
 src/layout/common/index.ts                    |  4 ++
 .../flex-column/NitroLayoutFlexColumn.tsx     | 28 ++++++++
 .../NitroLayoutFlexColumn.types.ts            |  9 +++
 src/layout/grid/NitroLayoutGrid.tsx           | 24 +++++++
 src/layout/grid/NitroLayoutGrid.types.ts      |  7 ++
 .../grid/column/NitroLayoutGridColumn.tsx     | 19 +++++
 .../column/NitroLayoutGridColumn.types.ts     |  8 +++
 19 files changed, 163 insertions(+), 130 deletions(-)
 delete mode 100644 src/assets/styles/grid.scss
 create mode 100644 src/layout/common/NitroLayoutColumns.type.ts
 create mode 100644 src/layout/common/NitroLayoutOverflow.type.ts
 create mode 100644 src/layout/common/NitroLayoutPosition.type.ts
 create mode 100644 src/layout/common/NitroLayoutSpacing.type.ts
 create mode 100644 src/layout/common/index.ts
 create mode 100644 src/layout/flex-column/NitroLayoutFlexColumn.tsx
 create mode 100644 src/layout/flex-column/NitroLayoutFlexColumn.types.ts
 create mode 100644 src/layout/grid/NitroLayoutGrid.tsx
 create mode 100644 src/layout/grid/NitroLayoutGrid.types.ts
 create mode 100644 src/layout/grid/column/NitroLayoutGridColumn.tsx
 create mode 100644 src/layout/grid/column/NitroLayoutGridColumn.types.ts

diff --git a/src/assets/styles/bootstrap/_utilities.scss b/src/assets/styles/bootstrap/_utilities.scss
index 960d6f1a..7c6c7231 100644
--- a/src/assets/styles/bootstrap/_utilities.scss
+++ b/src/assets/styles/bootstrap/_utilities.scss
@@ -42,6 +42,14 @@ $utilities: map-merge(
       property: overflow,
       values: auto hidden visible scroll,
     ),
+    "overflow-x": (
+      property: overflow-x,
+      values: auto hidden visible scroll,
+    ),
+    "overflow-y": (
+      property: overflow-y,
+      values: auto hidden visible scroll,
+    ),
     // scss-docs-end utils-overflow
     // scss-docs-start utils-display
     "display": (
diff --git a/src/assets/styles/grid.scss b/src/assets/styles/grid.scss
deleted file mode 100644
index 3a23cb69..00000000
--- a/src/assets/styles/grid.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-$grid-options: (
-    "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"
-);
-
-.grid-items {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-content: flex-start;
-    width: 100%;
-    margin-top: -3px;
-    overflow: hidden;
-
-    @each $option in $grid-options {
-        &.grid-#{$option} {
-            .grid-item {
-                width: calc(1 / #{$option} * 100% - (1 - 1 / #{$option}) * 3px);
-
-                &:nth-child(#{$option}n) {
-                    margin-right: 0;
-                }
-            }
-        }
-    }
-}
-
-.row-grid {
-    margin: 0 !important;
-    
-    .col {
-        padding: 0 !important;
-    }
-}
-
-@each $option in $grid-options {
-    .row-grid {
-        &.row-cols-#{$option} {
-            .col:nth-child(#{$option}n) {
-                padding-left: 10px !important;
-            }
-        }
-    }
-}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 6e6aa7aa..ee7ae10f 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -7,7 +7,6 @@
 @import '../node_modules/animate.css/animate.min.css';
 @import './scrollbars';
 @import './slider';
-@import './grid';
 @import './icons';
 @import './utils';
 
diff --git a/src/assets/styles/scrollbars.scss b/src/assets/styles/scrollbars.scss
index f4120813..b2d976db 100644
--- a/src/assets/styles/scrollbars.scss
+++ b/src/assets/styles/scrollbars.scss
@@ -1,22 +1,53 @@
 ::-webkit-scrollbar {
     width: 0.5rem;
-    height: 0.5rem;
+
+    &:horizontal {
+        height: 0.5rem;
+    }
+
+    &:not(:horizontal) {
+        width: 0.5rem;
+    }
 }
 
 ::-webkit-scrollbar-track {
-    background-clip: padding-box;
-    border-right: 0.25rem solid rgba($black, .1);
+
+    &:horizontal {
+        border-bottom: 0.25rem solid rgba($black, .1);
+    }
+
+    &:not(:horizontal) {
+        border-right: 0.25rem solid rgba($black, .1);
+    }
 }
 
 ::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
-    border-right: 0.25rem solid rgba($primary, .4);
 
-    &:hover {
-        border-right: 0.25rem solid rgba($primary, .8);
+    &:horizontal {
+        border-bottom: 0.25rem solid rgba($primary, .4);
+
+        &:hover {
+            border-bottom: 0.25rem solid rgba($primary, .8);
+        }
+    
+        &:active {
+            border-bottom: 0.25rem solid $secondary;
+        }
     }
 
-    &:active {
-        border-right: 0.25rem solid $secondary;
+    &:not(:horizontal) {
+        border-right: 0.25rem solid rgba($primary, .4);
+
+        &:hover {
+            border-right: 0.25rem solid rgba($primary, .8);
+        }
+
+        &:active {
+            border-right: 0.25rem solid $secondary;
+        }
     }
 }
+
+::-webkit-scrollbar-corner {
+    background: rgba($black, .1);
+}
diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss
index 84390259..7e82a515 100644
--- a/src/layout/card/NitroCardView.scss
+++ b/src/layout/card/NitroCardView.scss
@@ -36,12 +36,13 @@ $nitro-card-tabs-height: 33px;
         }
     
         .nitro-card {
-            width: 100%;
-            height: 100%;
+            max-width: 75%;
+            max-height: calc(100% - 20px);
+            margin: 10px auto 10px;
     
-            &.rounded {
-                border-radius: 0 !important;
-            }
+            // &.rounded {
+            //     border-radius: 0 !important;
+            // }
         }
     }
 }
diff --git a/src/layout/card/content/NitroCardContentView.tsx b/src/layout/card/content/NitroCardContentView.tsx
index ee3c1a72..8565b3ab 100644
--- a/src/layout/card/content/NitroCardContentView.tsx
+++ b/src/layout/card/content/NitroCardContentView.tsx
@@ -8,7 +8,7 @@ export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
     const { simple = false } = useNitroCardContext();
     
     return (
-        <div className={ `container-fluid bg-light content-area d-flex flex-column overflow-hidden ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
+        <div className={ `container-fluid bg-light content-area d-flex flex-column overflow-auto ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
             { children }
         </div>
     );
diff --git a/src/layout/card/grid/NitroCardGridView.scss b/src/layout/card/grid/NitroCardGridView.scss
index 71acb2ee..948bb63b 100644
--- a/src/layout/card/grid/NitroCardGridView.scss
+++ b/src/layout/card/grid/NitroCardGridView.scss
@@ -1,71 +1,6 @@
-.nitro-card-grid {
-    width: 100%;
-
-    .row-cols-3 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(3n+3) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-4 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(4n+4) {
-                padding-right: 0;
-            }
-        }
-    }
-    
-    .row-cols-5 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(5n+5) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-6 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(6n+6) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-7 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(7n+7) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-8 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(8n+8) {
-                padding-right: 0;
-            }
-        }
-    }
+.nitro-grid {
+    --nitro-grid-column-min-width: 45px;
+    grid-template-columns: repeat(auto-fill, minmax(var(--nitro-grid-column-min-width, 45px), 1fr));
 }
 
 @import './item/NitroCardGridItemView.scss';
diff --git a/src/layout/card/grid/NitroCardGridView.tsx b/src/layout/card/grid/NitroCardGridView.tsx
index 8fd178e0..a9e611bc 100644
--- a/src/layout/card/grid/NitroCardGridView.tsx
+++ b/src/layout/card/grid/NitroCardGridView.tsx
@@ -7,7 +7,7 @@ export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
 
     const getClassName = useMemo(() =>
     {
-        let newClassName = `grid gap-${ gap } overflow-auto`;
+        let newClassName = `grid gap-${ gap } nitro-grid overflow-auto`;
 
         if(className && className.length) newClassName += ' ' + className;
 
@@ -18,7 +18,7 @@ export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
     {
         const newStyle = { ...style };
 
-        newStyle['--bs-columns'] = columns.toString();
+        //newStyle['--bs-columns'] = columns.toString();
 
         return newStyle;
     }, [ style, columns ]);
diff --git a/src/layout/common/NitroLayoutColumns.type.ts b/src/layout/common/NitroLayoutColumns.type.ts
new file mode 100644
index 00000000..242c622d
--- /dev/null
+++ b/src/layout/common/NitroLayoutColumns.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
diff --git a/src/layout/common/NitroLayoutOverflow.type.ts b/src/layout/common/NitroLayoutOverflow.type.ts
new file mode 100644
index 00000000..0ee52c0f
--- /dev/null
+++ b/src/layout/common/NitroLayoutOverflow.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutOverflow = 'hidden' | 'auto';
diff --git a/src/layout/common/NitroLayoutPosition.type.ts b/src/layout/common/NitroLayoutPosition.type.ts
new file mode 100644
index 00000000..41f7dd67
--- /dev/null
+++ b/src/layout/common/NitroLayoutPosition.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutPosition = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky';
diff --git a/src/layout/common/NitroLayoutSpacing.type.ts b/src/layout/common/NitroLayoutSpacing.type.ts
new file mode 100644
index 00000000..96e53311
--- /dev/null
+++ b/src/layout/common/NitroLayoutSpacing.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutSpacing = 1 | 2 | 3 | 4 | 5;
diff --git a/src/layout/common/index.ts b/src/layout/common/index.ts
new file mode 100644
index 00000000..8cdcb281
--- /dev/null
+++ b/src/layout/common/index.ts
@@ -0,0 +1,4 @@
+export * from './NitroLayoutColumns.type';
+export * from './NitroLayoutOverflow.type';
+export * from './NitroLayoutPosition.type';
+export * from './NitroLayoutSpacing.type';
diff --git a/src/layout/flex-column/NitroLayoutFlexColumn.tsx b/src/layout/flex-column/NitroLayoutFlexColumn.tsx
new file mode 100644
index 00000000..73533809
--- /dev/null
+++ b/src/layout/flex-column/NitroLayoutFlexColumn.tsx
@@ -0,0 +1,28 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutFlexColumnProps } from './NitroLayoutFlexColumn.types';
+
+export const NitroLayoutFlexColumn: FC<NitroLayoutFlexColumnProps> = props =>
+{
+    const { className = '', overflow = null, position = null, gap = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'd-flex flex-column';
+
+        if(overflow && overflow.length) newClassName += ` overflow-${ overflow }`;
+
+        if(position && position.length) newClassName += ` position-${ position }`;
+
+        if(gap && gap >= 1) newClassName += ` gap-${ gap }`;
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className, overflow, position, gap ]);
+
+    return (
+        <div className={ getClassName } { ...rest }>
+            { children }
+        </div>
+    );
+}
diff --git a/src/layout/flex-column/NitroLayoutFlexColumn.types.ts b/src/layout/flex-column/NitroLayoutFlexColumn.types.ts
new file mode 100644
index 00000000..14a56589
--- /dev/null
+++ b/src/layout/flex-column/NitroLayoutFlexColumn.types.ts
@@ -0,0 +1,9 @@
+import { DetailsHTMLAttributes } from 'react';
+import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
+
+export interface NitroLayoutFlexColumnProps extends DetailsHTMLAttributes<HTMLDivElement>
+{
+    overflow?: NitroLayoutOverflow;
+    position?: NitroLayoutPosition;
+    gap?: NitroLayoutSpacing;
+}
diff --git a/src/layout/grid/NitroLayoutGrid.tsx b/src/layout/grid/NitroLayoutGrid.tsx
new file mode 100644
index 00000000..f2fb7b3e
--- /dev/null
+++ b/src/layout/grid/NitroLayoutGrid.tsx
@@ -0,0 +1,24 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutGridProps } from './NitroLayoutGrid.types';
+
+export const NitroLayoutGrid: FC<NitroLayoutGridProps> = props =>
+{
+    const { className = '', gap = 3, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'grid h-100';
+
+        if(gap >= 1) newClassName += ` gap-${ gap }`;
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className, gap ]);
+
+    return (
+        <div className={ getClassName } { ...rest }>
+            { children }
+        </div>
+    );
+}
diff --git a/src/layout/grid/NitroLayoutGrid.types.ts b/src/layout/grid/NitroLayoutGrid.types.ts
new file mode 100644
index 00000000..fbd0d24d
--- /dev/null
+++ b/src/layout/grid/NitroLayoutGrid.types.ts
@@ -0,0 +1,7 @@
+import { DetailsHTMLAttributes } from 'react';
+import { NitroLayoutSpacing } from '../common';
+
+export interface NitroLayoutGridProps extends DetailsHTMLAttributes<HTMLDivElement>
+{
+    gap?: NitroLayoutSpacing;
+}
diff --git a/src/layout/grid/column/NitroLayoutGridColumn.tsx b/src/layout/grid/column/NitroLayoutGridColumn.tsx
new file mode 100644
index 00000000..f169ca09
--- /dev/null
+++ b/src/layout/grid/column/NitroLayoutGridColumn.tsx
@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutFlexColumn } from '../../flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumnProps } from './NitroLayoutGridColumn.types';
+
+export const NitroLayoutGridColumn: FC<NitroLayoutGridColumnProps> = props =>
+{
+    const { className = '', size = 12, gap = 3, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = `g-col-${ size }`;
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className, size ]);
+
+    return <NitroLayoutFlexColumn className={ getClassName } gap={ gap } overflow="auto" { ...rest } />
+}
diff --git a/src/layout/grid/column/NitroLayoutGridColumn.types.ts b/src/layout/grid/column/NitroLayoutGridColumn.types.ts
new file mode 100644
index 00000000..c88c3fb0
--- /dev/null
+++ b/src/layout/grid/column/NitroLayoutGridColumn.types.ts
@@ -0,0 +1,8 @@
+import { NitroLayoutColumns, NitroLayoutSpacing } from '../../common';
+import { NitroLayoutFlexColumnProps } from '../../flex-column/NitroLayoutFlexColumn.types';
+
+export interface NitroLayoutGridColumnProps extends NitroLayoutFlexColumnProps
+{
+    size?: NitroLayoutColumns;
+    gap?: NitroLayoutSpacing;
+}

From fa0f8d5e8e1e36b45cdebfda83973c2e8a2acbac Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 24 Sep 2021 01:38:45 -0400
Subject: [PATCH 23/31] Update RoomPreviewerView

---
 .../room-previewer/RoomPreviewerView.tsx      | 32 +++++++------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/views/shared/room-previewer/RoomPreviewerView.tsx b/src/views/shared/room-previewer/RoomPreviewerView.tsx
index d30bdb54..4691fd45 100644
--- a/src/views/shared/room-previewer/RoomPreviewerView.tsx
+++ b/src/views/shared/room-previewer/RoomPreviewerView.tsx
@@ -6,9 +6,7 @@ import { RoomPreviewerViewProps } from './RoomPreviewerView.types';
 export const RoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
 {
     const { roomPreviewer = null, height = 0 } = props;
-
     const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null);
-
     const elementRef = useRef<HTMLDivElement>();
 
     const update = useCallback((time: number) =>
@@ -41,9 +39,6 @@ export const RoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
 
         const canvas = roomPreviewer.getRenderingCanvas();
 
-        elementRef.current.style.width = `${ width }px`;
-        elementRef.current.style.height = `${ height }px`;
-
         setRenderingCanvas(canvas);
 
         canvas.canvasUpdated = true;
@@ -59,34 +54,31 @@ export const RoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
 
         GetNitroInstance().ticker.add(update);
 
-        function resize(): void
-        {
-            if(!roomPreviewer) return;
+        const resizeObserver = new ResizeObserver(() =>
+            {
+                if(!roomPreviewer || !elementRef.current) return;
 
-            const width = elementRef.current.parentElement.offsetWidth;
+                const width = elementRef.current.parentElement.offsetWidth;
 
-            elementRef.current.style.width = `${ width }px`;
-            elementRef.current.style.height = `${ height }px`;
+                roomPreviewer.modifyRoomCanvas(width, height);
 
-            roomPreviewer.modifyRoomCanvas(width, height);
-
-            update(-1);
-        }
-
-        window.addEventListener('resize', resize);
+                update(-1);
+            });
+        
+        resizeObserver.observe(elementRef.current);
 
         return () =>
         {
-            GetNitroInstance().ticker.remove(update);
+            resizeObserver.disconnect();
 
-            window.removeEventListener('resize', resize);
+            GetNitroInstance().ticker.remove(update);
         }
 
     }, [ renderingCanvas, roomPreviewer, elementRef, height, setupPreviewer, update ]);
 
     return (
         <div className="room-preview-container">
-            <div ref={ elementRef } className="room-preview-image" />
+            <div ref={ elementRef } className="room-preview-image" style={ { height } } />
             { props.children }
         </div>
     );

From 1a3e85aa05aefa11837137f5d5c36c99dd774f59 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 24 Sep 2021 01:39:27 -0400
Subject: [PATCH 24/31] Update inventory

---
 src/views/inventory/InventoryView.scss        |  3 -
 src/views/inventory/views/InventoryViews.scss |  2 -
 .../views/badge/InventoryBadgeView.scss       | 13 ----
 .../views/badge/InventoryBadgeView.tsx        | 72 ++++++-------------
 .../badge/item/InventoryBadgeItemView.scss    | 17 -----
 .../inventory/views/bot/InventoryBotView.tsx  | 25 ++++---
 .../furniture/InventoryFurnitureView.scss     |  5 --
 .../furniture/InventoryFurnitureView.tsx      | 29 ++++----
 .../search/InventoryFurnitureSearchView.tsx   |  2 +-
 .../inventory/views/pet/InventoryPetView.tsx  | 25 ++++---
 10 files changed, 68 insertions(+), 125 deletions(-)
 delete mode 100644 src/views/inventory/views/InventoryViews.scss
 delete mode 100644 src/views/inventory/views/badge/InventoryBadgeView.scss
 delete mode 100644 src/views/inventory/views/badge/item/InventoryBadgeItemView.scss
 delete mode 100644 src/views/inventory/views/furniture/InventoryFurnitureView.scss

diff --git a/src/views/inventory/InventoryView.scss b/src/views/inventory/InventoryView.scss
index 8d5953d9..e01335a2 100644
--- a/src/views/inventory/InventoryView.scss
+++ b/src/views/inventory/InventoryView.scss
@@ -8,6 +8,3 @@
         height: 181px;
     }
 }
-
-
-@import './views/InventoryViews';
diff --git a/src/views/inventory/views/InventoryViews.scss b/src/views/inventory/views/InventoryViews.scss
deleted file mode 100644
index cd28a3b0..00000000
--- a/src/views/inventory/views/InventoryViews.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './badge/InventoryBadgeView';
-@import './furniture/InventoryFurnitureView';
diff --git a/src/views/inventory/views/badge/InventoryBadgeView.scss b/src/views/inventory/views/badge/InventoryBadgeView.scss
deleted file mode 100644
index fc975ace..00000000
--- a/src/views/inventory/views/badge/InventoryBadgeView.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.current-badge-container {
-
-    .badge-image {
-        width: 45px;
-        height: 45px;
-    }
-}
-
-.inventory-badge-overflow {
-    height: calc(100% - 91px);
-}
-
-@import './item/InventoryBadgeItemView';
diff --git a/src/views/inventory/views/badge/InventoryBadgeView.tsx b/src/views/inventory/views/badge/InventoryBadgeView.tsx
index 3bcd03b6..1e02c3b0 100644
--- a/src/views/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/views/inventory/views/badge/InventoryBadgeView.tsx
@@ -2,6 +2,9 @@ import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { LocalizeBadgeName, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryBadgeActions } from '../../reducers/InventoryBadgeReducer';
@@ -74,55 +77,26 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
     }
 
     return (
-        <div className="d-flex flex-column h-100 overflow-hidden">
-            <div className="row h-100">
-                <div className="d-flex flex-column col-7 h-100">
-                    <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
-                </div>
-                <div className="d-flex flex-column justify-content-between col-5 gap-2 h-100 overflow-hidden">
-                    <div className="d-flex flex-column overflow-hidden">
-                        <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
-                        <InventoryActiveBadgeResultsView badges={ activeBadges }  />
-                    </div>
-                    { badge && badge.length &&
-                        <div className="d-flex flex-column gap-2">
-                            <div className="d-flex justify-content-between align-items-center">
-                                <div className="d-flex flex-grow-1 gap-2 align-items-center current-badge-container overflow-hidden">
-                                    <BadgeImageView badgeCode={ badge } />
-                                    <div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div>
-                                </div>
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
+                <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn className="justify-content-between" size={ 5 } gap={ 2 } overflow="auto">
+                <NitroLayoutFlexColumn overflow="hidden" gap={ 2 }>
+                    <div className="text-black text-truncate">{ LocalizeText('inventory.badges.activebadges') }</div>
+                    <InventoryActiveBadgeResultsView badges={ activeBadges }  />
+                </NitroLayoutFlexColumn>
+                { badge && (badge.length > 0) &&
+                    <NitroLayoutFlexColumn gap={ 2 }>
+                        <div className="d-flex justify-content-between align-items-center">
+                            <div className="d-flex flex-grow-1 gap-2 align-items-center overflow-hidden">
+                                <BadgeImageView badgeCode={ badge } />
+                                <div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div>
                             </div>
-                            <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
-                        </div> }
-                </div>
-            </div>
-        </div>
-    //     <div className="d-flex flex-column h-100 overflow-hidden">
-    //         <div className="row inventory-badge-overflow">
-    //             <div className="col-7 d-flex flex-column h-100">
-    //                 <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges }  />
-    //             </div>
-    //             <div className="col">
-    //                 <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
-    //                 <InventoryActiveBadgeResultsView badges={ activeBadges }  />
-    //             </div>
-    //         </div>
-    //         <div className="my-auto">
-    //             { badge && badge.length &&
-    //                 <div className="d-flex justify-content-between align-items-center bg-secondary rounded px-2 py-1 mb-1 mt-1">
-    //                     <div className="d-flex flex-grow-1 current-badge-container">
-    //                         <BadgeImageView badgeCode={ badge } />
-    //                         <div className="d-flex flex-column justify-content-center flex-grow-1 ms-2">
-    //                             <p className="mb-0">{ LocalizeBadgeName(badge) }</p>
-    //                         </div>
-    //                     </div>
-    //                     <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
-    //                 </div> }
-    //             <div className="d-flex justify-content-center align-items-center bg-primary rounded p-1">
-    //                 <div className="h6 m-0 text-white">{ LocalizeText('achievements_score_description', [ 'score' ], [ '0' ]) }</div>
-    //             </div>
-    //         </div>
-    //     </div>
-    // </>
+                        </div>
+                        <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
+                    </NitroLayoutFlexColumn> }
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }
diff --git a/src/views/inventory/views/badge/item/InventoryBadgeItemView.scss b/src/views/inventory/views/badge/item/InventoryBadgeItemView.scss
deleted file mode 100644
index d17f5451..00000000
--- a/src/views/inventory/views/badge/item/InventoryBadgeItemView.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.inventory-badge-item-container {
-    height: 48px;
-    max-height: 48px;
-
-    .inventory-badge-item {
-        width: 100%;
-        height: 100%;
-        border-color: $grid-border-color !important;
-        background-color: $grid-bg-color;
-        overflow: hidden;
-    
-        &.active {
-            border-color: $grid-active-border-color !important;
-            background-color: $grid-active-bg-color;
-        }
-    }
-}
diff --git a/src/views/inventory/views/bot/InventoryBotView.tsx b/src/views/inventory/views/bot/InventoryBotView.tsx
index d4828b31..13e985af 100644
--- a/src/views/inventory/views/bot/InventoryBotView.tsx
+++ b/src/views/inventory/views/bot/InventoryBotView.tsx
@@ -2,6 +2,9 @@ import { GetBotInventoryComposer, RoomObjectVariable } from '@nitrots/nitro-rend
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
 import { attemptBotPlacement } from '../../common/BotUtilities';
 import { useInventoryContext } from '../../context/InventoryContext';
@@ -80,20 +83,20 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
     }
 
     return (
-        <div className="row h-100">
-            <div className="d-flex flex-column col-7 h-100">
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
                 <InventoryBotResultsView botItems={ botItems } />
-            </div>
-            <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
-                <div className="position-relative d-flex flex-column overflow-auto h-100">
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={ 5 } gap={ 2 } overflow="auto">
+                <NitroLayoutFlexColumn overflow="hidden" position="relative">
                     <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                </div>
+                </NitroLayoutFlexColumn>
                 { botItem &&
-                    <div className="d-flex flex-column gap-2">
-                        <p className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</p>
+                    <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
+                        <div className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</div>
                         { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                    </div> }
-            </div>
-        </div>
+                    </NitroLayoutFlexColumn> }
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.scss b/src/views/inventory/views/furniture/InventoryFurnitureView.scss
deleted file mode 100644
index 089af5ef..00000000
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.stuffdata-extra-container {
-    position: absolute;
-    top: 5px;
-    right: 15px;
-}
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
index 0a4f93cc..06518c2f 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -2,6 +2,9 @@ import { FurnitureListComposer, RoomObjectVariable, Vector3d } from '@nitrots/ni
 import { FC, useEffect, useState } from 'react';
 import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages';
+import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView';
 import { RarityLevelView } from '../../../shared/rarity-level/RarityLevelView';
 import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
@@ -116,30 +119,30 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
     }
 
     return (
-        <div className="row h-100">
-            <div className="d-flex flex-column col-7 h-100">
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                 <InventoryFurnitureResultsView groupItems={ filteredGroupItems }  />
-            </div>
-            <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
-                <div className="position-relative d-flex flex-column overflow-auto h-100">
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={ 5 } gap={ 2 } overflow="auto">
+                <NitroLayoutFlexColumn overflow="hidden" position="relative">
                     <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                     { groupItem && groupItem.stuffData.isUnique &&
-                        <div className="stuffdata-extra-container">
+                        <div className="position-absolute top-2 end-2">
                             <LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
                         </div> }
                     { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
-                        <div className="stuffdata-extra-container">
+                        <div className="position-absolute top-2 end-2">
                             <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
                         </div> }
-                </div>
+                </NitroLayoutFlexColumn>
                 { groupItem &&
-                    <div className="d-flex flex-column gap-2">
-                        <p className="flex-grow-1 text-black text-truncate">{ groupItem.name }</p>
+                    <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
+                        <div className="flex-grow-1 text-black text-truncate">{ groupItem.name }</div>
                         { !!roomSession &&
                             <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                    </div> }
-            </div>
-        </div>
+                    </NitroLayoutFlexColumn> }
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }
diff --git a/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx b/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
index 599214cd..f7934a19 100644
--- a/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
+++ b/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
@@ -30,7 +30,7 @@ export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps>
     }, [ groupItems, setGroupItems, searchValue ]);
 
     return (
-        <div className="d-flex mb-1">
+        <div className="d-flex">
             <div className="d-flex flex-grow-1 me-1">
                 <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
             </div>
diff --git a/src/views/inventory/views/pet/InventoryPetView.tsx b/src/views/inventory/views/pet/InventoryPetView.tsx
index a90faef1..bcfcc715 100644
--- a/src/views/inventory/views/pet/InventoryPetView.tsx
+++ b/src/views/inventory/views/pet/InventoryPetView.tsx
@@ -2,6 +2,9 @@ import { RequestPetsComposer, RoomObjectVariable } from '@nitrots/nitro-renderer
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
 import { attemptPetPlacement } from '../../common/PetUtilities';
 import { useInventoryContext } from '../../context/InventoryContext';
@@ -80,20 +83,20 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
     }
 
     return (
-        <div className="row h-100">
-            <div className="d-flex flex-column col-7 h-100">
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
                 <InventoryPetResultsView petItems={ petItems }  />
-            </div>
-            <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
-                <div className="position-relative d-flex flex-column overflow-auto h-100">
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={ 5 } gap={ 2 } overflow="auto">
+                <NitroLayoutFlexColumn overflow="hidden" position="relative">
                     <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                </div>
+                </NitroLayoutFlexColumn>
                 { petItem &&
-                    <div className="d-flex flex-column gap-2">
-                        <p className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</p>
+                    <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
+                        <div className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</div>
                         { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                    </div> }
-            </div>
-        </div>
+                    </NitroLayoutFlexColumn> }
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }

From 75d840f25926f7f38db86b623729ff006e4cb05f Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 24 Sep 2021 04:29:09 -0400
Subject: [PATCH 25/31] More base layout updates

---
 src/layout/base/NitroLayoutBase.tsx           | 28 +++++++++++++++++++
 src/layout/base/NitroLayoutBase.types.ts      |  9 ++++++
 src/layout/base/index.ts                      |  2 ++
 src/layout/button/NitroLayoutButton.tsx       | 26 +++++++++++++++++
 src/layout/button/NitroLayoutButton.types.ts  |  8 ++++++
 src/layout/button/index.ts                    |  2 ++
 .../common/NitroLayoutButtonSize.type.ts      |  1 +
 src/layout/common/NitroLayoutVariant.type.ts  |  1 +
 src/layout/common/index.ts                    |  2 ++
 .../flex-column/NitroLayoutFlexColumn.tsx     | 19 ++++---------
 .../NitroLayoutFlexColumn.types.ts            |  9 ++----
 src/layout/flex-column/index.ts               |  2 ++
 src/layout/flex/NitroLayoutFlex.tsx           | 19 +++++++++++++
 src/layout/flex/NitroLayoutFlex.types.ts      |  6 ++++
 src/layout/flex/index.ts                      |  2 ++
 src/layout/grid/NitroLayoutGrid.tsx           | 13 +++------
 src/layout/grid/NitroLayoutGrid.types.ts      |  7 ++---
 src/layout/grid/column/index.ts               |  2 ++
 src/layout/grid/index.ts                      |  3 ++
 src/layout/index.ts                           |  6 ++++
 src/layout/loading-habbos/index.ts            |  1 +
 21 files changed, 135 insertions(+), 33 deletions(-)
 create mode 100644 src/layout/base/NitroLayoutBase.tsx
 create mode 100644 src/layout/base/NitroLayoutBase.types.ts
 create mode 100644 src/layout/base/index.ts
 create mode 100644 src/layout/button/NitroLayoutButton.tsx
 create mode 100644 src/layout/button/NitroLayoutButton.types.ts
 create mode 100644 src/layout/button/index.ts
 create mode 100644 src/layout/common/NitroLayoutButtonSize.type.ts
 create mode 100644 src/layout/common/NitroLayoutVariant.type.ts
 create mode 100644 src/layout/flex-column/index.ts
 create mode 100644 src/layout/flex/NitroLayoutFlex.tsx
 create mode 100644 src/layout/flex/NitroLayoutFlex.types.ts
 create mode 100644 src/layout/flex/index.ts
 create mode 100644 src/layout/grid/column/index.ts
 create mode 100644 src/layout/grid/index.ts
 create mode 100644 src/layout/loading-habbos/index.ts

diff --git a/src/layout/base/NitroLayoutBase.tsx b/src/layout/base/NitroLayoutBase.tsx
new file mode 100644
index 00000000..7007a972
--- /dev/null
+++ b/src/layout/base/NitroLayoutBase.tsx
@@ -0,0 +1,28 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutBaseProps } from './NitroLayoutBase.types';
+
+export const NitroLayoutBase: FC<NitroLayoutBaseProps> = props =>
+{
+    const { className = '', overflow = null, position = null, gap = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = '';
+
+        if(overflow && overflow.length) newClassName += ` overflow-${ overflow }`;
+
+        if(position && position.length) newClassName += ` position-${ position }`;
+
+        if(gap && gap >= 1) newClassName += ` gap-${ gap }`;
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className, overflow, position, gap ]);
+
+    return (
+        <div className={ getClassName } { ...rest }>
+            { children }
+        </div>
+    );
+}
diff --git a/src/layout/base/NitroLayoutBase.types.ts b/src/layout/base/NitroLayoutBase.types.ts
new file mode 100644
index 00000000..fe2219fa
--- /dev/null
+++ b/src/layout/base/NitroLayoutBase.types.ts
@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
+
+export interface NitroLayoutBaseProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>
+{
+    overflow?: NitroLayoutOverflow;
+    position?: NitroLayoutPosition;
+    gap?: NitroLayoutSpacing;
+}
diff --git a/src/layout/base/index.ts b/src/layout/base/index.ts
new file mode 100644
index 00000000..f38bd839
--- /dev/null
+++ b/src/layout/base/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroLayoutBase';
+export * from './NitroLayoutBase.types';
diff --git a/src/layout/button/NitroLayoutButton.tsx b/src/layout/button/NitroLayoutButton.tsx
new file mode 100644
index 00000000..0b66a3d0
--- /dev/null
+++ b/src/layout/button/NitroLayoutButton.tsx
@@ -0,0 +1,26 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutButtonProps } from './NitroLayoutButton.types';
+
+export const NitroLayoutButton: FC<NitroLayoutButtonProps> = props =>
+{
+    const { className = '', variant = 'primary', size = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'btn';
+
+        if(variant && variant.length) newClassName += ` btn-${ variant }`;
+
+        if(size && size.length) newClassName += ` btn-${ size }`;
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className, variant, size ]);
+
+    return (
+        <button type="button" className={ getClassName } { ...rest }>
+            { children }
+        </button>
+    );
+}
diff --git a/src/layout/button/NitroLayoutButton.types.ts b/src/layout/button/NitroLayoutButton.types.ts
new file mode 100644
index 00000000..cc01479d
--- /dev/null
+++ b/src/layout/button/NitroLayoutButton.types.ts
@@ -0,0 +1,8 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { NitroLayoutButtonSize, NitroLayoutVariant } from '../common';
+
+export interface NitroLayoutButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+{
+    variant?: NitroLayoutVariant;
+    size?: NitroLayoutButtonSize;
+}
diff --git a/src/layout/button/index.ts b/src/layout/button/index.ts
new file mode 100644
index 00000000..ccfb06b3
--- /dev/null
+++ b/src/layout/button/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroLayoutButton';
+export * from './NitroLayoutButton.types';
diff --git a/src/layout/common/NitroLayoutButtonSize.type.ts b/src/layout/common/NitroLayoutButtonSize.type.ts
new file mode 100644
index 00000000..06e59028
--- /dev/null
+++ b/src/layout/common/NitroLayoutButtonSize.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutButtonSize = 'sm' | 'lg';
diff --git a/src/layout/common/NitroLayoutVariant.type.ts b/src/layout/common/NitroLayoutVariant.type.ts
new file mode 100644
index 00000000..69c4699a
--- /dev/null
+++ b/src/layout/common/NitroLayoutVariant.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutVariant = 'primary' | 'success' | 'danger';
diff --git a/src/layout/common/index.ts b/src/layout/common/index.ts
index 8cdcb281..d5d007cc 100644
--- a/src/layout/common/index.ts
+++ b/src/layout/common/index.ts
@@ -1,4 +1,6 @@
+export * from './NitroLayoutButtonSize.type';
 export * from './NitroLayoutColumns.type';
 export * from './NitroLayoutOverflow.type';
 export * from './NitroLayoutPosition.type';
 export * from './NitroLayoutSpacing.type';
+export * from './NitroLayoutVariant.type';
diff --git a/src/layout/flex-column/NitroLayoutFlexColumn.tsx b/src/layout/flex-column/NitroLayoutFlexColumn.tsx
index 73533809..7301b619 100644
--- a/src/layout/flex-column/NitroLayoutFlexColumn.tsx
+++ b/src/layout/flex-column/NitroLayoutFlexColumn.tsx
@@ -1,28 +1,19 @@
 import { FC, useMemo } from 'react';
+import { NitroLayoutFlex } from '../flex/NitroLayoutFlex';
 import { NitroLayoutFlexColumnProps } from './NitroLayoutFlexColumn.types';
 
 export const NitroLayoutFlexColumn: FC<NitroLayoutFlexColumnProps> = props =>
 {
-    const { className = '', overflow = null, position = null, gap = null, children = null, ...rest } = props;
+    const { className = '', ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
-        let newClassName = 'd-flex flex-column';
-
-        if(overflow && overflow.length) newClassName += ` overflow-${ overflow }`;
-
-        if(position && position.length) newClassName += ` position-${ position }`;
-
-        if(gap && gap >= 1) newClassName += ` gap-${ gap }`;
+        let newClassName = 'flex-column';
 
         if(className && className.length) newClassName += ` ${ className }`;
 
         return newClassName;
-    }, [ className, overflow, position, gap ]);
+    }, [ className ]);
 
-    return (
-        <div className={ getClassName } { ...rest }>
-            { children }
-        </div>
-    );
+    return <NitroLayoutFlex className={ getClassName } { ...rest } />;
 }
diff --git a/src/layout/flex-column/NitroLayoutFlexColumn.types.ts b/src/layout/flex-column/NitroLayoutFlexColumn.types.ts
index 14a56589..96ab418d 100644
--- a/src/layout/flex-column/NitroLayoutFlexColumn.types.ts
+++ b/src/layout/flex-column/NitroLayoutFlexColumn.types.ts
@@ -1,9 +1,6 @@
-import { DetailsHTMLAttributes } from 'react';
-import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
+import { NitroLayoutFlexProps } from '../flex/NitroLayoutFlex.types';
 
-export interface NitroLayoutFlexColumnProps extends DetailsHTMLAttributes<HTMLDivElement>
+export interface NitroLayoutFlexColumnProps extends NitroLayoutFlexProps
 {
-    overflow?: NitroLayoutOverflow;
-    position?: NitroLayoutPosition;
-    gap?: NitroLayoutSpacing;
+    
 }
diff --git a/src/layout/flex-column/index.ts b/src/layout/flex-column/index.ts
new file mode 100644
index 00000000..4ef3d667
--- /dev/null
+++ b/src/layout/flex-column/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroLayoutFlexColumn';
+export * from './NitroLayoutFlexColumn.types';
diff --git a/src/layout/flex/NitroLayoutFlex.tsx b/src/layout/flex/NitroLayoutFlex.tsx
new file mode 100644
index 00000000..00e83a0a
--- /dev/null
+++ b/src/layout/flex/NitroLayoutFlex.tsx
@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutBase } from '../base/NitroLayoutBase';
+import { NitroLayoutFlexProps } from './NitroLayoutFlex.types';
+
+export const NitroLayoutFlex: FC<NitroLayoutFlexProps> = props =>
+{
+    const { className = '', ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'd-flex';
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className ]);
+
+    return <NitroLayoutBase className={ getClassName } { ...rest } />;
+}
diff --git a/src/layout/flex/NitroLayoutFlex.types.ts b/src/layout/flex/NitroLayoutFlex.types.ts
new file mode 100644
index 00000000..25a3818c
--- /dev/null
+++ b/src/layout/flex/NitroLayoutFlex.types.ts
@@ -0,0 +1,6 @@
+import { NitroLayoutBaseProps } from '../base/NitroLayoutBase.types';
+
+export interface NitroLayoutFlexProps extends NitroLayoutBaseProps
+{
+    
+}
diff --git a/src/layout/flex/index.ts b/src/layout/flex/index.ts
new file mode 100644
index 00000000..9d9dd4c9
--- /dev/null
+++ b/src/layout/flex/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroLayoutFlex';
+export * from './NitroLayoutFlex.types';
diff --git a/src/layout/grid/NitroLayoutGrid.tsx b/src/layout/grid/NitroLayoutGrid.tsx
index f2fb7b3e..531e3b3c 100644
--- a/src/layout/grid/NitroLayoutGrid.tsx
+++ b/src/layout/grid/NitroLayoutGrid.tsx
@@ -1,24 +1,19 @@
 import { FC, useMemo } from 'react';
+import { NitroLayoutBase } from '../base';
 import { NitroLayoutGridProps } from './NitroLayoutGrid.types';
 
 export const NitroLayoutGrid: FC<NitroLayoutGridProps> = props =>
 {
-    const { className = '', gap = 3, children = null, ...rest } = props;
+    const { className = '', gap = 3, ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
         let newClassName = 'grid h-100';
 
-        if(gap >= 1) newClassName += ` gap-${ gap }`;
-
         if(className && className.length) newClassName += ' ' + className;
 
         return newClassName;
-    }, [ className, gap ]);
+    }, [ className ]);
 
-    return (
-        <div className={ getClassName } { ...rest }>
-            { children }
-        </div>
-    );
+    return <NitroLayoutBase className={ getClassName } gap={ gap } { ...rest }  />;
 }
diff --git a/src/layout/grid/NitroLayoutGrid.types.ts b/src/layout/grid/NitroLayoutGrid.types.ts
index fbd0d24d..537d9003 100644
--- a/src/layout/grid/NitroLayoutGrid.types.ts
+++ b/src/layout/grid/NitroLayoutGrid.types.ts
@@ -1,7 +1,6 @@
-import { DetailsHTMLAttributes } from 'react';
-import { NitroLayoutSpacing } from '../common';
+import { NitroLayoutBaseProps } from '../base';
 
-export interface NitroLayoutGridProps extends DetailsHTMLAttributes<HTMLDivElement>
+export interface NitroLayoutGridProps extends NitroLayoutBaseProps
 {
-    gap?: NitroLayoutSpacing;
+    
 }
diff --git a/src/layout/grid/column/index.ts b/src/layout/grid/column/index.ts
new file mode 100644
index 00000000..a613fa34
--- /dev/null
+++ b/src/layout/grid/column/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroLayoutGridColumn';
+export * from './NitroLayoutGridColumn.types';
diff --git a/src/layout/grid/index.ts b/src/layout/grid/index.ts
new file mode 100644
index 00000000..48709bda
--- /dev/null
+++ b/src/layout/grid/index.ts
@@ -0,0 +1,3 @@
+export * from './column';
+export * from './NitroLayoutGrid';
+export * from './NitroLayoutGrid.types';
diff --git a/src/layout/index.ts b/src/layout/index.ts
index 81e87964..2859e2a3 100644
--- a/src/layout/index.ts
+++ b/src/layout/index.ts
@@ -1,6 +1,12 @@
+export * from './button';
 export * from './card';
+export * from './common';
 export * from './draggable-window';
+export * from './flex';
+export * from './flex-column';
 export * from './gift-card';
+export * from './grid';
+export * from './loading-habbos';
 export * from './loading-spinner';
 export * from './mini-camera';
 export * from './notification-alert';
diff --git a/src/layout/loading-habbos/index.ts b/src/layout/loading-habbos/index.ts
new file mode 100644
index 00000000..2b36c9c4
--- /dev/null
+++ b/src/layout/loading-habbos/index.ts
@@ -0,0 +1 @@
+export * from './LoadingHabbosView';

From 867b2652aeac132dafc94871e07d605eec2c0f45 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 24 Sep 2021 04:48:25 -0400
Subject: [PATCH 26/31] More inventory changes

---
 .../views/badge/InventoryBadgeView.tsx        |  16 +--
 .../inventory/views/bot/InventoryBotView.tsx  |  27 ++--
 .../InventoryCategoryEmptyView.tsx            |  21 ++++
 .../InventoryCategoryEmptyView.types.ts       |   7 ++
 .../furniture/InventoryFurnitureView.tsx      |  34 ++---
 .../inventory/views/pet/InventoryPetView.tsx  |  21 +---
 .../views/trade/InventoryTradeView.tsx        | 118 ++++++++++--------
 7 files changed, 130 insertions(+), 114 deletions(-)
 create mode 100644 src/views/inventory/views/category-empty/InventoryCategoryEmptyView.tsx
 create mode 100644 src/views/inventory/views/category-empty/InventoryCategoryEmptyView.types.ts

diff --git a/src/views/inventory/views/badge/InventoryBadgeView.tsx b/src/views/inventory/views/badge/InventoryBadgeView.tsx
index 1e02c3b0..47f2fe62 100644
--- a/src/views/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/views/inventory/views/badge/InventoryBadgeView.tsx
@@ -2,6 +2,8 @@ import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { LocalizeBadgeName, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { NitroLayoutButton, NitroLayoutFlex } from '../../../../layout';
+import { NitroLayoutBase } from '../../../../layout/base';
 import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
 import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
 import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
@@ -83,18 +85,18 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
             </NitroLayoutGridColumn>
             <NitroLayoutGridColumn className="justify-content-between" size={ 5 } gap={ 2 } overflow="auto">
                 <NitroLayoutFlexColumn overflow="hidden" gap={ 2 }>
-                    <div className="text-black text-truncate">{ LocalizeText('inventory.badges.activebadges') }</div>
+                    <NitroLayoutBase className="text-black text-truncate">{ LocalizeText('inventory.badges.activebadges') }</NitroLayoutBase>
                     <InventoryActiveBadgeResultsView badges={ activeBadges }  />
                 </NitroLayoutFlexColumn>
                 { badge && (badge.length > 0) &&
                     <NitroLayoutFlexColumn gap={ 2 }>
-                        <div className="d-flex justify-content-between align-items-center">
-                            <div className="d-flex flex-grow-1 gap-2 align-items-center overflow-hidden">
+                        <NitroLayoutFlex className="justify-content-between align-items-center">
+                            <NitroLayoutFlex className="flex-grow-1 align-items-center" gap={ 2 } overflow="hidden">
                                 <BadgeImageView badgeCode={ badge } />
-                                <div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div>
-                            </div>
-                        </div>
-                        <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
+                                <NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</NitroLayoutBase>
+                            </NitroLayoutFlex>
+                        </NitroLayoutFlex>
+                        <NitroLayoutButton variant={ (isWearingBadge(badge) ? 'danger' : 'success') } size="sm" disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</NitroLayoutButton>
                     </NitroLayoutFlexColumn> }
             </NitroLayoutGridColumn>
         </NitroLayoutGrid>
diff --git a/src/views/inventory/views/bot/InventoryBotView.tsx b/src/views/inventory/views/bot/InventoryBotView.tsx
index 13e985af..59c02571 100644
--- a/src/views/inventory/views/bot/InventoryBotView.tsx
+++ b/src/views/inventory/views/bot/InventoryBotView.tsx
@@ -2,6 +2,8 @@ import { GetBotInventoryComposer, RoomObjectVariable } from '@nitrots/nitro-rend
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { NitroLayoutButton } from '../../../../layout';
+import { NitroLayoutBase } from '../../../../layout/base';
 import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
 import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
 import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
@@ -9,6 +11,7 @@ import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerV
 import { attemptBotPlacement } from '../../common/BotUtilities';
 import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryBotActions } from '../../reducers/InventoryBotReducer';
+import { InventoryCategoryEmptyView } from '../category-empty/InventoryCategoryEmptyView';
 import { InventoryBotViewProps } from './InventoryBotView.types';
 import { InventoryBotResultsView } from './results/InventoryBotResultsView';
 
@@ -65,22 +68,7 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
         roomPreviewer.addAvatarIntoRoom(botData.figure, 0);
     }, [ roomPreviewer, botItem ]);
 
-    if(!botItems || !botItems.length)
-    {
-        return (
-            <div className="row h-100">
-                <div className="col-5 d-flex justify-content-center align-items-center">
-                    <div className="empty-image"></div>
-                </div>
-                <div className="d-flex flex-column col-7 justify-content-center">
-                    <div className="h5 m-0 text-black fw-bold m-0 mb-2">
-                        { LocalizeText('inventory.empty.bots.title') }
-                    </div>
-                    <div className="h6 text-black">{ LocalizeText('inventory.empty.bots.desc') }</div>
-                </div>
-            </div>
-        );
-    }
+    if(!botItems || !botItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.bots.title') } desc={ LocalizeText('inventory.empty.bots.desc') } />;
 
     return (
         <NitroLayoutGrid>
@@ -93,8 +81,11 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
                 </NitroLayoutFlexColumn>
                 { botItem &&
                     <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
-                        <div className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</div>
-                        { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
+                        <NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</NitroLayoutBase>
+                        { !!roomSession &&
+                            <NitroLayoutButton variant="success" size="sm" onClick={ event => attemptBotPlacement(botItem) }>
+                                { LocalizeText('inventory.furni.placetoroom') }
+                            </NitroLayoutButton> }
                     </NitroLayoutFlexColumn> }
             </NitroLayoutGridColumn>
         </NitroLayoutGrid>
diff --git a/src/views/inventory/views/category-empty/InventoryCategoryEmptyView.tsx b/src/views/inventory/views/category-empty/InventoryCategoryEmptyView.tsx
new file mode 100644
index 00000000..2fe5b4aa
--- /dev/null
+++ b/src/views/inventory/views/category-empty/InventoryCategoryEmptyView.tsx
@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../layout';
+import { NitroLayoutBase } from '../../../../layout/base';
+import { InventoryCategoryEmptyViewProps } from './InventoryCategoryEmptyView.types';
+
+export const InventoryCategoryEmptyView: FC<InventoryCategoryEmptyViewProps> = props =>
+{
+    const { title = '', desc = '', ...rest } = props;
+    
+    return (
+        <NitroLayoutGrid { ...rest }>
+            <NitroLayoutGridColumn className="justify-content-center align-items-center" size={ 5 } overflow="hidden">
+                <div className="empty-image" />
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn className="justify-content-center" size={ 7 } overflow="hidden">
+                <NitroLayoutBase className="text-black text-truncate fs-5 fw-bold">{ title }</NitroLayoutBase>
+                <NitroLayoutBase className="text-black" overflow="auto">{ desc }</NitroLayoutBase>
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
+    );
+}
diff --git a/src/views/inventory/views/category-empty/InventoryCategoryEmptyView.types.ts b/src/views/inventory/views/category-empty/InventoryCategoryEmptyView.types.ts
new file mode 100644
index 00000000..0d57173b
--- /dev/null
+++ b/src/views/inventory/views/category-empty/InventoryCategoryEmptyView.types.ts
@@ -0,0 +1,7 @@
+import { NitroLayoutGridProps } from '../../../../layout';
+
+export interface InventoryCategoryEmptyViewProps extends NitroLayoutGridProps
+{
+    title: string;
+    desc: string;
+}
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
index 06518c2f..05e3afb7 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -2,6 +2,8 @@ import { FurnitureListComposer, RoomObjectVariable, Vector3d } from '@nitrots/ni
 import { FC, useEffect, useState } from 'react';
 import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages';
+import { NitroLayoutButton } from '../../../../layout';
+import { NitroLayoutBase } from '../../../../layout/base';
 import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
 import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
 import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
@@ -13,6 +15,7 @@ import { attemptItemPlacement } from '../../common/FurnitureUtilities';
 import { GroupItem } from '../../common/GroupItem';
 import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryFurnitureActions } from '../../reducers/InventoryFurnitureReducer';
+import { InventoryCategoryEmptyView } from '../category-empty/InventoryCategoryEmptyView';
 import { InventoryFurnitureViewProps } from './InventoryFurnitureView.types';
 import { InventoryFurnitureResultsView } from './results/InventoryFurnitureResultsView';
 import { InventoryFurnitureSearchView } from './search/InventoryFurnitureSearchView';
@@ -101,22 +104,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
         }
     }, [ roomPreviewer, groupItem ]);
 
-    if(!groupItems || !groupItems.length)
-    {
-        return (
-            <div className="row h-100">
-                <div className="col-5 d-flex justify-content-center align-items-center">
-                    <div className="empty-image"></div>
-                </div>
-                <div className="d-flex flex-column col-7 justify-content-center">
-                    <div className="h5 m-0 text-black fw-bold m-0 mb-2">
-                        { LocalizeText('inventory.empty.title') }
-                    </div>
-                    <div className="h6 text-black">{ LocalizeText('inventory.empty.desc') }</div>
-                </div>
-            </div>
-        );
-    }
+    if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } />;
 
     return (
         <NitroLayoutGrid>
@@ -128,19 +116,21 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                 <NitroLayoutFlexColumn overflow="hidden" position="relative">
                     <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                     { groupItem && groupItem.stuffData.isUnique &&
-                        <div className="position-absolute top-2 end-2">
+                        <NitroLayoutBase className="top-2 end-2" position="absolute">
                             <LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
-                        </div> }
+                        </NitroLayoutBase> }
                     { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
-                        <div className="position-absolute top-2 end-2">
+                        <NitroLayoutBase className="top-2 end-2" position="absolute">
                             <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
-                        </div> }
+                        </NitroLayoutBase> }
                 </NitroLayoutFlexColumn>
                 { groupItem &&
                     <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
-                        <div className="flex-grow-1 text-black text-truncate">{ groupItem.name }</div>
+                        <NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ groupItem.name }</NitroLayoutBase>
                         { !!roomSession &&
-                            <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
+                            <NitroLayoutButton variant="success" size="sm" onClick={ event => attemptItemPlacement(groupItem) }>
+                                { LocalizeText('inventory.furni.placetoroom') }
+                            </NitroLayoutButton> }
                     </NitroLayoutFlexColumn> }
             </NitroLayoutGridColumn>
         </NitroLayoutGrid>
diff --git a/src/views/inventory/views/pet/InventoryPetView.tsx b/src/views/inventory/views/pet/InventoryPetView.tsx
index bcfcc715..b9949c95 100644
--- a/src/views/inventory/views/pet/InventoryPetView.tsx
+++ b/src/views/inventory/views/pet/InventoryPetView.tsx
@@ -2,6 +2,7 @@ import { RequestPetsComposer, RoomObjectVariable } from '@nitrots/nitro-renderer
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { NitroLayoutBase } from '../../../../layout/base';
 import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
 import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
 import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
@@ -9,6 +10,7 @@ import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerV
 import { attemptPetPlacement } from '../../common/PetUtilities';
 import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryPetActions } from '../../reducers/InventoryPetReducer';
+import { InventoryCategoryEmptyView } from '../category-empty/InventoryCategoryEmptyView';
 import { InventoryPetViewProps } from './InventoryPetView.types';
 import { InventoryPetResultsView } from './results/InventoryPetResultsView';
 
@@ -65,22 +67,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
         roomPreviewer.addPetIntoRoom(petData.figureString);
     }, [ roomPreviewer, petItem ]);
 
-    if(!petItems || !petItems.length)
-    {
-        return (
-            <div className="row h-100">
-                <div className="col-5 d-flex justify-content-center align-items-center">
-                    <div className="empty-image"></div>
-                </div>
-                <div className="d-flex flex-column col-7 justify-content-center">
-                    <div className="h5 m-0 text-black fw-bold m-0 mb-2">
-                        { LocalizeText('inventory.empty.pets.title') }
-                    </div>
-                    <div className="h6 text-black">{ LocalizeText('inventory.empty.pets.desc') }</div>
-                </div>
-            </div>
-        );
-    }
+    if(!petItems || !petItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.pets.title') } desc={ LocalizeText('inventory.empty.pets.desc') } />;
 
     return (
         <NitroLayoutGrid>
@@ -93,7 +80,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
                 </NitroLayoutFlexColumn>
                 { petItem &&
                     <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
-                        <div className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</div>
+                        <NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</NitroLayoutBase>
                         { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
                     </NitroLayoutFlexColumn> }
             </NitroLayoutGridColumn>
diff --git a/src/views/inventory/views/trade/InventoryTradeView.tsx b/src/views/inventory/views/trade/InventoryTradeView.tsx
index c5f9b47d..f376e890 100644
--- a/src/views/inventory/views/trade/InventoryTradeView.tsx
+++ b/src/views/inventory/views/trade/InventoryTradeView.tsx
@@ -2,8 +2,12 @@ import { FurnitureListComposer, IObjectData, TradingAcceptComposer, TradingConfi
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages';
+import { NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
+import { NitroLayoutBase } from '../../../../layout/base';
 import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { FurniCategory } from '../../common/FurniCategory';
 import { GroupItem } from '../../common/GroupItem';
 import { IFurnitureItem } from '../../common/IFurnitureItem';
@@ -224,67 +228,81 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
     }, [ tradeData, dispatchFurnitureState ]);
 
     return (
-        <div className="row h-100">
-            <div className="d-flex flex-column col-4 h-100">
-                <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
-                <NitroCardGridView columns={ 3 }>
-                    { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) =>
-                        {
-                            const count = item.getUnlockedCount();
-
-                            return (
-                                <NitroCardGridItemView key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) }>
-                                    { ((count > 0) && (groupItem === item)) &&
-                                        <button className="btn btn-success btn-sm trade-button" onClick={ event => attemptItemOffer(1) }>
-                                            <i className="fas fa-chevron-right" />
-                                        </button> }
-                                </NitroCardGridItemView>
-                            );
-                        }) }
-                </NitroCardGridView>
-                <div className="col-12 badge bg-muted w-100 mt-1">{ groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }</div>
-            </div>
-            <div className="col-8 row mx-0">
-                <div className="d-flex flex-column col-6">
-                    <span className="d-flex justify-content-between align-items-center text-black small mb-1">{ LocalizeText('inventory.trading.you') } { LocalizeText('inventory.trading.areoffering') }: <i className={ 'small fas ' + (tradeData.ownUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 4 } gap={ 2 }>
+                <NitroLayoutFlexColumn className="h-100" overflow="auto" gap={ 2 }>
+                    <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                     <NitroCardGridView columns={ 3 }>
-                        { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                        { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) =>
                             {
-                                const item = (tradeData.ownUser.items.getWithIndex(i) || null);
-
-                                if(!item) return <NitroCardGridItemView key={ i } />;
+                                const count = item.getUnlockedCount();
 
                                 return (
-                                    <NitroCardGridItemView key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
-                                        { (ownGroupItem === item) &&
-                                            <button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }>
-                                                <i className="fas fa-chevron-left" />
+                                    <NitroCardGridItemView key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) }>
+                                        { ((count > 0) && (groupItem === item)) &&
+                                            <button className="btn btn-success btn-sm trade-button" onClick={ event => attemptItemOffer(1) }>
+                                                <i className="fas fa-chevron-right" />
                                             </button> }
                                     </NitroCardGridItemView>
                                 );
                             }) }
-                        <div className="col-12 badge bg-muted w-100">{ ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }</div>
                     </NitroCardGridView>
-                </div>
-                <div className="d-flex flex-column col-6">
-                    <span className="d-flex justify-content-between align-items-center  text-black small mb-1">{ tradeData.otherUser.userName } { LocalizeText('inventory.trading.isoffering') }: <i className={ 'small fas ' + (tradeData.otherUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
-                    <NitroCardGridView columns={ 3 }>
-                        { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
-                            {
-                                const item = (tradeData.otherUser.items.getWithIndex(i) || null);
+                </NitroLayoutFlexColumn>
+                <NitroLayoutBase className="badge bg-muted w-100">
+                    { groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }
+                </NitroLayoutBase>
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={ 8 } gap={ 2 }>
+                <NitroLayoutGrid overflow="hidden">
+                    <NitroLayoutGridColumn size={ 6 } gap={ 2 }>
+                        <NitroLayoutFlexColumn className="h-100" overflow="auto" gap={ 2 }>
+                            <span className="d-flex justify-content-between align-items-center text-black small mb-1">{ LocalizeText('inventory.trading.you') } { LocalizeText('inventory.trading.areoffering') }: <i className={ 'small fas ' + (tradeData.ownUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
+                            <NitroCardGridView columns={ 3 }>
+                                { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                                    {
+                                        const item = (tradeData.ownUser.items.getWithIndex(i) || null);
 
-                                if(!item) return <NitroCardGridItemView key={ i } />;
+                                        if(!item) return <NitroCardGridItemView key={ i } />;
 
-                                return <NitroCardGridItemView key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
-                            }) }
-                        <div className="col-12 badge bg-muted w-100">{ otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }</div>
-                    </NitroCardGridView>
-                </div>
-                <div className="d-flex col-12 justify-content-between align-items-end w-100">
-                    <button type="button" className="btn btn-danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</button>
+                                        return (
+                                            <NitroCardGridItemView key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
+                                                { (ownGroupItem === item) &&
+                                                    <button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }>
+                                                        <i className="fas fa-chevron-left" />
+                                                    </button> }
+                                            </NitroCardGridItemView>
+                                        );
+                                    }) }
+                            </NitroCardGridView>
+                        </NitroLayoutFlexColumn>
+                        <NitroLayoutBase className="badge bg-muted w-100">
+                            { ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }
+                        </NitroLayoutBase>
+                    </NitroLayoutGridColumn>
+                    <NitroLayoutGridColumn size={ 6 } gap={ 2 }>
+                        <NitroLayoutFlexColumn className="h-100" overflow="auto" gap={ 2 }>
+                            <span className="d-flex justify-content-between align-items-center  text-black small mb-1">{ tradeData.otherUser.userName } { LocalizeText('inventory.trading.isoffering') }: <i className={ 'small fas ' + (tradeData.otherUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
+                            <NitroCardGridView columns={ 3 }>
+                                { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                                    {
+                                        const item = (tradeData.otherUser.items.getWithIndex(i) || null);
+
+                                        if(!item) return <NitroCardGridItemView key={ i } />;
+
+                                        return <NitroCardGridItemView key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
+                                    }) }
+                            </NitroCardGridView>
+                        </NitroLayoutFlexColumn>
+                        <NitroLayoutBase className="badge bg-muted w-100">
+                            { otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }
+                        </NitroLayoutBase>
+                    </NitroLayoutGridColumn>
+                </NitroLayoutGrid>
+                <NitroLayoutFlex className="flex-grow-1 justify-content-between">
+                    <NitroLayoutButton variant="danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</NitroLayoutButton>
                     { getTradeButton }
-                </div>
-            </div>
-        </div>
+                </NitroLayoutFlex>
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }

From 1c879db9d9a7ca0fee786cdc43c05d0a7af84044 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 24 Sep 2021 04:48:59 -0400
Subject: [PATCH 27/31] Catalog updates

---
 src/views/catalog/views/CatalogViews.scss     |  3 +-
 .../catalog/views/gift/CatalogGiftView.scss   |  1 +
 .../navigation/CatalogNavigationView.scss     | 10 ------
 .../item/CatalogNavigationItemView.scss       | 18 ----------
 .../set/CatalogNavigationSetView.scss         | 14 --------
 .../page-details/CatalogPageDetailsView.tsx   |  6 ++--
 .../catalog/views/page/CatalogPageView.scss   |  3 --
 .../views/page/layout/CatalogLayout.scss      |  4 +--
 .../default/CatalogLayoutDefaultView.scss     |  0
 .../default/CatalogLayoutDefaultView.tsx      |  2 +-
 .../layout/pets/CatalogLayoutPetView.scss     | 10 ------
 .../CatalogPetNameApprovalView.scss           |  0
 .../page/offer/CatalogPageOfferView.scss      | 33 -------------------
 .../page/offers/CatalogPageOffersView.scss    |  3 --
 .../CatalogProductPreviewView.scss            |  0
 .../CatalogProductPreviewView.tsx             | 16 +++++----
 .../page/purchase/CatalogPurchaseView.scss    |  2 --
 .../CatalogPurchaseButtonView.scss            |  0
 .../CatalogLayoutSearchResultView.scss        |  2 --
 .../offer/CatalogSearchResultOfferView.scss   |  0
 .../offers/CatalogSearchResultOffersView.scss |  3 --
 .../views/search/CatalogSearchView.scss       |  0
 22 files changed, 17 insertions(+), 113 deletions(-)
 delete mode 100644 src/views/catalog/views/navigation/item/CatalogNavigationItemView.scss
 delete mode 100644 src/views/catalog/views/navigation/set/CatalogNavigationSetView.scss
 delete mode 100644 src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.scss
 delete mode 100644 src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.scss
 delete mode 100644 src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.scss
 delete mode 100644 src/views/catalog/views/page/offer/CatalogPageOfferView.scss
 delete mode 100644 src/views/catalog/views/page/offers/CatalogPageOffersView.scss
 delete mode 100644 src/views/catalog/views/page/product-preview/CatalogProductPreviewView.scss
 delete mode 100644 src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.scss
 delete mode 100644 src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.scss
 delete mode 100644 src/views/catalog/views/page/search-result/offer/CatalogSearchResultOfferView.scss
 delete mode 100644 src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.scss
 delete mode 100644 src/views/catalog/views/search/CatalogSearchView.scss

diff --git a/src/views/catalog/views/CatalogViews.scss b/src/views/catalog/views/CatalogViews.scss
index 0a5f6295..f6973ade 100644
--- a/src/views/catalog/views/CatalogViews.scss
+++ b/src/views/catalog/views/CatalogViews.scss
@@ -1,5 +1,4 @@
 @import './catalog-icon/CatalogIconView';
+@import './gift/CatalogGiftView';
 @import './navigation/CatalogNavigationView';
 @import './page/CatalogPageView';
-@import './search/CatalogSearchView';
-@import './gift/CatalogGiftView';
diff --git a/src/views/catalog/views/gift/CatalogGiftView.scss b/src/views/catalog/views/gift/CatalogGiftView.scss
index 9f43a086..db61d248 100644
--- a/src/views/catalog/views/gift/CatalogGiftView.scss
+++ b/src/views/catalog/views/gift/CatalogGiftView.scss
@@ -1,4 +1,5 @@
 .nitro-catalog-gift {
+    width: 325px;
     
     .gift-preview {
         width: 80px;
diff --git a/src/views/catalog/views/navigation/CatalogNavigationView.scss b/src/views/catalog/views/navigation/CatalogNavigationView.scss
index e75d5f61..cd6cc820 100644
--- a/src/views/catalog/views/navigation/CatalogNavigationView.scss
+++ b/src/views/catalog/views/navigation/CatalogNavigationView.scss
@@ -18,14 +18,4 @@
             padding: 1px;
         }
     }
-
-    // border-color: $grid-border-color !important;
-    // background-color: $grid-bg-color !important;
-
-    // .navigation-container {
-    //     overflow-y: auto;
-    // }
 }
-
-@import './item/CatalogNavigationItemView';
-@import './set/CatalogNavigationSetView';
diff --git a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.scss b/src/views/catalog/views/navigation/item/CatalogNavigationItemView.scss
deleted file mode 100644
index b5adfc1c..00000000
--- a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.catalog-navigation-item-container {
-
-    .catalog-navigation-item {
-        font-size: $font-size-sm;
-        border-radius: $border-radius;
-
-        i.fas {
-            color: $black;
-            font-size: 10px;
-            padding: 1px;
-        }
-
-        &.active {
-            padding: 1px 2px;
-            background-color: $grid-active-bg-color;
-        }
-    }
-}
diff --git a/src/views/catalog/views/navigation/set/CatalogNavigationSetView.scss b/src/views/catalog/views/navigation/set/CatalogNavigationSetView.scss
deleted file mode 100644
index 56d8034c..00000000
--- a/src/views/catalog/views/navigation/set/CatalogNavigationSetView.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.catalog-navigation-set-container {
-
-    .catalog-navigation-set-container {
-        padding-left: 5px;
-
-        .catalog-navigation-item-container {
-            padding-right: 0px !important;
-        }
-    }
-
-    > :last-child {
-        padding-bottom: 0px !important;
-    }
-}
diff --git a/src/views/catalog/views/page-details/CatalogPageDetailsView.tsx b/src/views/catalog/views/page-details/CatalogPageDetailsView.tsx
index c5269380..390aed62 100644
--- a/src/views/catalog/views/page-details/CatalogPageDetailsView.tsx
+++ b/src/views/catalog/views/page-details/CatalogPageDetailsView.tsx
@@ -11,9 +11,9 @@ export const CatalogPageDetailsView: FC<CatalogPageDetailsViewProps> = props =>
     const imageUrl = GetCatalogPageImage(pageParser, 1);
 
     return (
-        <div className="d-flex flex-column justify-content-center align-items-center gap-2 w-100 h-100">
-            { imageUrl && <img alt="" src={ imageUrl } /> }
-            <div className="d-flex flex-column fs-6 text-center text-black lh-sm" dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 0) } } />
+        <div className="d-flex flex-column justify-content-center align-items-center overflow-hidden h-100">
+            { imageUrl && <img className="" alt="" src={ imageUrl } /> }
+            <div className="d-flex flex-column fs-6 text-center text-black lh-sm overflow-auto" dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 0) } } />
         </div>
     );
 }
diff --git a/src/views/catalog/views/page/CatalogPageView.scss b/src/views/catalog/views/page/CatalogPageView.scss
index 2281883f..7a24edf7 100644
--- a/src/views/catalog/views/page/CatalogPageView.scss
+++ b/src/views/catalog/views/page/CatalogPageView.scss
@@ -1,5 +1,2 @@
 @import './layout/CatalogLayout';
-@import './offer/CatalogPageOfferView';
-@import './offers/CatalogPageOffersView';
 @import './purchase/CatalogPurchaseView';
-@import './search-result/CatalogLayoutSearchResultView';
diff --git a/src/views/catalog/views/page/layout/CatalogLayout.scss b/src/views/catalog/views/page/layout/CatalogLayout.scss
index addcc8e6..d71c9f8a 100644
--- a/src/views/catalog/views/page/layout/CatalogLayout.scss
+++ b/src/views/catalog/views/page/layout/CatalogLayout.scss
@@ -1,5 +1,3 @@
-@import './default/CatalogLayoutDefaultView';
 @import './frontpage4/CatalogLayoutFrontpage4View';
-@import './pets/CatalogLayoutPetView';
-@import './vip-buy/CatalogLayoutVipBuyView';
 @import './info-loyalty/CatalogLayoutInfoLoyaltyView.scss';
+@import './vip-buy/CatalogLayoutVipBuyView';
diff --git a/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.scss b/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx b/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx
index 415ac9fa..86d2bd1b 100644
--- a/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx
+++ b/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx
@@ -17,7 +17,7 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutDefaultViewProps> = props
             <div className="d-flex flex-column col-7 h-100">
                 <CatalogPageOffersView offers={ pageParser.offers } />
             </div>
-            <div className="position-relative d-flex flex-column col-5">
+            <div className="position-relative d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
                 <CatalogProductPreviewView pageParser={ pageParser } activeOffer={ activeOffer } roomPreviewer={ roomPreviewer } />
             </div>
         </div>
diff --git a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.scss b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.scss
deleted file mode 100644
index 268769fb..00000000
--- a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.nitro-catalog-layout-pets {
-
-    .color-button {
-        position: absolute;
-        left: 5px;
-        bottom: 5px;
-    }
-
-    @import './name-approval/CatalogPetNameApprovalView';
-}
diff --git a/src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.scss b/src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/catalog/views/page/offer/CatalogPageOfferView.scss b/src/views/catalog/views/page/offer/CatalogPageOfferView.scss
deleted file mode 100644
index 7008f0e2..00000000
--- a/src/views/catalog/views/page/offer/CatalogPageOfferView.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.catalog-offer-item-container {
-    height: 48px;
-    max-height: 48px;
-
-    .catalog-offer-item {
-        width: 100%;
-        height: 100%;
-        border-color: $grid-border-color !important;
-        background-color: $grid-bg-color;
-        background-position: center;
-        background-repeat: no-repeat;
-        overflow: hidden;
-    
-        &.active {
-            border-color: $grid-active-border-color !important;
-            background-color: $grid-active-bg-color;
-        }
-    
-        .badge {
-            top: 2px;
-            right: 2px;
-            font-size: 8px;
-        }
-
-        .avatar-image {
-            width: 100% !important;
-            height: 100% !important;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-position-y: -32px !important;
-        }
-    }
-}
diff --git a/src/views/catalog/views/page/offers/CatalogPageOffersView.scss b/src/views/catalog/views/page/offers/CatalogPageOffersView.scss
deleted file mode 100644
index 28192aa4..00000000
--- a/src/views/catalog/views/page/offers/CatalogPageOffersView.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.catalog-offers-container {
-    overflow-y: auto;
-}
diff --git a/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.scss b/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.tsx b/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.tsx
index 3b31ea71..1e278f58 100644
--- a/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.tsx
+++ b/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.tsx
@@ -16,12 +16,16 @@ export const CatalogProductPreviewView: FC<CatalogProductPreviewViewProps> = pro
 
     return (
         <>
-            <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-            { product.uniqueLimitedItem &&
-                <LimitedEditionCompletePlateView uniqueLimitedItemsLeft={ product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ product.uniqueLimitedSeriesSize } /> }
-            <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
-            { children }
-            <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ extra } disabled={ disabled } />
+            <div className="position-relative d-flex flex-column overflow-auto h-100">
+                <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                { product.uniqueLimitedItem &&
+                    <LimitedEditionCompletePlateView uniqueLimitedItemsLeft={ product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ product.uniqueLimitedSeriesSize } /> }
+            </div>
+            <div className="d-flex flex-column gap-2">
+                <div className="flex-grow-1 text-black text-truncate">{ GetOfferName(activeOffer) }</div>
+                { children }
+                <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ extra } disabled={ disabled } />
+            </div>
         </>
     );
 }
diff --git a/src/views/catalog/views/page/purchase/CatalogPurchaseView.scss b/src/views/catalog/views/page/purchase/CatalogPurchaseView.scss
index 4559e425..e4a2a26f 100644
--- a/src/views/catalog/views/page/purchase/CatalogPurchaseView.scss
+++ b/src/views/catalog/views/page/purchase/CatalogPurchaseView.scss
@@ -4,5 +4,3 @@
     width: 29px;
     padding: 3px 5px;
 }
-
-@import './purchase-button/CatalogPurchaseButtonView';
diff --git a/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.scss b/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.scss b/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.scss
deleted file mode 100644
index ce60508f..00000000
--- a/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './offer/CatalogSearchResultOfferView';
-@import './offers/CatalogSearchResultOffersView';
diff --git a/src/views/catalog/views/page/search-result/offer/CatalogSearchResultOfferView.scss b/src/views/catalog/views/page/search-result/offer/CatalogSearchResultOfferView.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.scss b/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.scss
deleted file mode 100644
index 28192aa4..00000000
--- a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.catalog-offers-container {
-    overflow-y: auto;
-}
diff --git a/src/views/catalog/views/search/CatalogSearchView.scss b/src/views/catalog/views/search/CatalogSearchView.scss
deleted file mode 100644
index e69de29b..00000000

From 27ef76610b8043eb820a343c4e4c408dfd545df2 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 24 Sep 2021 04:49:20 -0400
Subject: [PATCH 28/31] Random updates

---
 src/App.scss                             | 4 ++--
 src/App.tsx                              | 2 +-
 src/api/nitro/room/DispatchMouseEvent.ts | 2 ++
 src/index.scss                           | 4 ++++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 474a2f07..2a93b1ff 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -26,8 +26,8 @@ $avatar-editor-height: 374px;
 $catalog-width: 620px;
 $catalog-height: 400px;
 
-$inventory-width: 485px;
-$inventory-height: 315px;
+$inventory-width: 528px;
+$inventory-height: 320px;
 
 $navigator-width: 400px;
 $navigator-height: 420px;
diff --git a/src/App.tsx b/src/App.tsx
index 439fbc5d..9d050bd9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -125,7 +125,7 @@ export const App: FC<{}> = props =>
     }
     
     return (
-        <div className="nitro-app">
+        <div className="nitro-app overflow-hidden">
             <div id="nitro-alerts-container" />
             { (!isReady || isError) && <LoadingView isError={ isError } message={ message } /> }
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady && !isError) } timeout={ 300 }>
diff --git a/src/api/nitro/room/DispatchMouseEvent.ts b/src/api/nitro/room/DispatchMouseEvent.ts
index 762e0dda..6d18f2e8 100644
--- a/src/api/nitro/room/DispatchMouseEvent.ts
+++ b/src/api/nitro/room/DispatchMouseEvent.ts
@@ -47,6 +47,8 @@ export function DispatchMouseEvent(roomId: number, canvasId: number, event: Mous
             break;
         case MouseEventType.MOUSE_UP:
             break;
+        case MouseEventType.RIGHT_CLICK:
+            break;
         default: return;
     }
 
diff --git a/src/index.scss b/src/index.scss
index cbfa7106..d3842a6a 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -14,4 +14,8 @@ body {
     image-rendering: -moz-crisp-edges;
 }
 
+img {
+    object-fit: none;
+}
+
 @import './App';

From 06f17080ce1606b37d2114919b6350475415f6fd Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 24 Sep 2021 04:49:30 -0400
Subject: [PATCH 29/31] Badge updates

---
 src/views/shared/badge-image/BadgeImage.scss  |  4 +-
 .../badges-container/BadgesContainerView.tsx  | 48 ++++++++++++-------
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/views/shared/badge-image/BadgeImage.scss b/src/views/shared/badge-image/BadgeImage.scss
index d7067045..b08e2de8 100644
--- a/src/views/shared/badge-image/BadgeImage.scss
+++ b/src/views/shared/badge-image/BadgeImage.scss
@@ -1,7 +1,7 @@
 .badge-image {
     position: relative;
-    width: 100%;
-    height: 100%;
+    width: 45px;
+    height: 45px;
     background-repeat: no-repeat;
     background-position: center;
     
diff --git a/src/views/user-profile/views/badges-container/BadgesContainerView.tsx b/src/views/user-profile/views/badges-container/BadgesContainerView.tsx
index cba4e091..13e84199 100644
--- a/src/views/user-profile/views/badges-container/BadgesContainerView.tsx
+++ b/src/views/user-profile/views/badges-container/BadgesContainerView.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { NitroCardGridItemView, NitroCardGridView } from '../../../../layout';
 import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { BadgesContainerViewProps } from './BadgesContainerView.types';
 
@@ -7,21 +8,36 @@ export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
     const { badges = null } = props;
 
     return (
-        <div className="row badge-container d-flex mt-1">
-            <div className="nitro-card-grid theme-default">
-                <div className="row row-cols-5 align-content-start">
-                {
-                    badges.map( (badge, index) => 
-{
-                        return (
-                        <div className="grid-item-container" key={index}>
-                            <BadgeImageView badgeCode={badge}/>
-                        </div>
-                        )
-                    })
-                }
-                </div>
-            </div>
+        <div className="row">
+            <NitroCardGridView columns={ 5 }>
+                { badges && (badges.length > 0) && badges.map((badge, index) =>
+                        {
+                            return (
+                                <NitroCardGridItemView key={ index }>
+                                    <BadgeImageView badgeCode={ badge }/>
+                                </NitroCardGridItemView>
+                            )
+                        }) }
+            </NitroCardGridView>
         </div>
-    );
+    )
+
+//     return (
+//         <div className="row badge-container d-flex mt-1">
+//             <div className="nitro-card-grid theme-default">
+//                 <div className="row row-cols-5 align-content-start">
+//                 {
+//                     badges.map( (badge, index) => 
+// {
+//                         return (
+//                         <div className="grid-item-container" key={index}>
+//                             <BadgeImageView badgeCode={badge}/>
+//                         </div>
+//                         )
+//                     })
+//                 }
+//                 </div>
+//             </div>
+//         </div>
+//     );
 }

From 4e7cbea48caab9a42cca44842224cbf3c9a82a4b Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 24 Sep 2021 04:49:46 -0400
Subject: [PATCH 30/31] Toolbar updates

---
 src/views/toolbar/ToolbarView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index 4d10456b..3dcd3322 100644
--- a/src/views/toolbar/ToolbarView.tsx
+++ b/src/views/toolbar/ToolbarView.tsx
@@ -158,7 +158,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
     }, []);
 
     return (
-        <div className="nitro-toolbar-container">
+        <div className="nitro-toolbar-container overflow-hidden">
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
                 <ToolbarMeView handleToolbarItemClick={ handleToolbarItemClick } />
             </TransitionAnimation>

From 67afaccd2116b0e8aa9b2cbc4c4b70b99e50c46b Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 24 Sep 2021 05:02:24 -0400
Subject: [PATCH 31/31] Layout fixes

---
 src/layout/card/grid/NitroCardGridView.tsx                | 8 ++++++--
 .../views/figure-set/AvatarEditorFigureSetView.tsx        | 2 +-
 .../views/palette-set/AvatarEditorPaletteSetView.tsx      | 2 +-
 .../views/wardrobe/AvatarEditorWardrobeView.tsx           | 2 +-
 .../views/page/layout/pets/CatalogLayoutPetView.tsx       | 2 +-
 .../single-bundle/CatalogLayoutSingleBundleView.tsx       | 2 +-
 .../catalog/views/page/offers/CatalogPageOffersView.tsx   | 2 +-
 .../offers/CatalogSearchResultOffersView.tsx              | 2 +-
 .../active-results/InventoryActiveBadgeResultsView.tsx    | 2 +-
 .../furniture/results/InventoryFurnitureResultsView.tsx   | 2 +-
 src/views/toolbar/ToolbarView.tsx                         | 2 +-
 .../views/badges-container/BadgesContainerView.tsx        | 2 +-
 12 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/layout/card/grid/NitroCardGridView.tsx b/src/layout/card/grid/NitroCardGridView.tsx
index a9e611bc..97c17237 100644
--- a/src/layout/card/grid/NitroCardGridView.tsx
+++ b/src/layout/card/grid/NitroCardGridView.tsx
@@ -3,7 +3,7 @@ import { NitroCardGridViewProps } from './NitroCardGridView.types';
 
 export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
 {
-    const { columns = 5, gap = 2, className = '', style = null, children = null, ...rest } = props;
+    const { columns = 0, gap = 2, className = '', style = null, children = null, ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
@@ -18,7 +18,11 @@ export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
     {
         const newStyle = { ...style };
 
-        //newStyle['--bs-columns'] = columns.toString();
+        if(columns && (columns >= 1))
+        {
+            newStyle['grid-template-columns'] = 'unset';
+            newStyle['--bs-columns'] = columns.toString();
+        }
 
         return newStyle;
     }, [ style, columns ]);
diff --git a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx b/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
index f664453c..28562fe8 100644
--- a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
+++ b/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
@@ -22,7 +22,7 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
     }, [ model, category, setMaxPaletteCount ]);
 
     return (
-        <NitroCardGridView columns={ 3 }>
+        <NitroCardGridView>
             { (category.parts.length > 0) && category.parts.map((item, index) =>
                 {
                     return <AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ selectPart } />;
diff --git a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx b/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
index 8b32c044..31a113c0 100644
--- a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
+++ b/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
@@ -18,7 +18,7 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
     }, [ model, category, paletteSet, paletteIndex ]);
 
     return (
-        <NitroCardGridView columns={ 4 } { ...rest }>
+        <NitroCardGridView { ...rest }>
             { (paletteSet.length > 0) && paletteSet.map((item, index) =>
                 {
                     return <AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />;
diff --git a/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx b/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
index f6c4e68d..840736ce 100644
--- a/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
+++ b/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
@@ -67,7 +67,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
     return (
         <div className="row h-100">
             <div className="col-12 d-flex h-100">
-                <NitroCardGridView className="wardrobe-grid" columns={ 5 }>
+                <NitroCardGridView className="wardrobe-grid">
                     { figures }
                 </NitroCardGridView>
             </div>
diff --git a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
index edf293c2..f68c2c50 100644
--- a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
+++ b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
@@ -143,7 +143,7 @@ export const CatalogLayoutPetView: FC<CatalogLayoutPetViewProps> = props =>
     return (
         <div className="row h-100">
             <div className="d-flex flex-column col-7 h-100">
-                <NitroCardGridView columns={ 5 }>
+                <NitroCardGridView>
                     { !colorsShowing && (sellablePalettes.length > 0) && sellablePalettes.map((palette, index) =>
                         {
                             return (
diff --git a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
index bab6711f..fe5eaf41 100644
--- a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
+++ b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
@@ -15,7 +15,7 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutSingleBundleViewProp
     return (
         <div className="row h-100">
             <div className="d-flex flex-column col-7 h-100">
-                <NitroCardGridView columns={ 5 }>
+                <NitroCardGridView>
                     { activeOffer && activeOffer.products && (activeOffer.products.length > 0) && activeOffer.products.map((product, index) =>
                         {
                             return <CatalogProductView key={ index } isActive={ false } product={ product } />
diff --git a/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx b/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
index 994bb7d7..620cc498 100644
--- a/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
+++ b/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
@@ -11,7 +11,7 @@ export const CatalogPageOffersView: FC<CatalogPageOffersViewProps> = props =>
     const { activeOffer = null } = catalogState;
 
     return (
-        <NitroCardGridView columns={ 5 } { ...rest }>
+        <NitroCardGridView { ...rest }>
             { offers && (offers.length > 0) && offers.map((offer, index) =>
                 {
                     return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
diff --git a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx b/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx
index 213aade1..9781545a 100644
--- a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx
+++ b/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx
@@ -20,7 +20,7 @@ export const CatalogSearchResultOffersView: FC<CatalogSearchResultOffersViewProp
     }, [ offers ]);
 
     return (
-        <NitroCardGridView columns={ 5 } { ...rest }>
+        <NitroCardGridView { ...rest }>
             { offers && (offers.length > 0) && offers.map((offer, index) =>
                 {
                     const isActive = (activeOffer && (activeOffer.products[0].furniClassId === offer.id));
diff --git a/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx b/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx
index 1a62e50a..cc0dc4ea 100644
--- a/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx
+++ b/src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx
@@ -8,7 +8,7 @@ export const InventoryActiveBadgeResultsView: FC<InventoryActiveBadgeResultsView
     const { badges = [] } = props;
     
     return (
-        <NitroCardGridView columns={ 3 }>
+        <NitroCardGridView>
             { badges && (badges.length > 0) && badges.map(code =>
                 {
                     return <InventoryBadgeItemView key={ code } badge={ code } />
diff --git a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
index 0464eb55..34564f89 100644
--- a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
+++ b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
@@ -8,7 +8,7 @@ export const InventoryFurnitureResultsView: FC<InventoryFurnitureResultsViewProp
     const { groupItems = [], columns = 5 } = props;
 
     return (
-        <NitroCardGridView columns={ columns }>
+        <NitroCardGridView>
             { groupItems && (groupItems.length > 0) && groupItems.map((item, index) =>
                 {
                     return <InventoryFurnitureItemView key={ index } groupItem={ item } />
diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index 3dcd3322..4d10456b 100644
--- a/src/views/toolbar/ToolbarView.tsx
+++ b/src/views/toolbar/ToolbarView.tsx
@@ -158,7 +158,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
     }, []);
 
     return (
-        <div className="nitro-toolbar-container overflow-hidden">
+        <div className="nitro-toolbar-container">
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
                 <ToolbarMeView handleToolbarItemClick={ handleToolbarItemClick } />
             </TransitionAnimation>
diff --git a/src/views/user-profile/views/badges-container/BadgesContainerView.tsx b/src/views/user-profile/views/badges-container/BadgesContainerView.tsx
index 13e84199..323e9254 100644
--- a/src/views/user-profile/views/badges-container/BadgesContainerView.tsx
+++ b/src/views/user-profile/views/badges-container/BadgesContainerView.tsx
@@ -9,7 +9,7 @@ export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
 
     return (
         <div className="row">
-            <NitroCardGridView columns={ 5 }>
+            <NitroCardGridView>
                 { badges && (badges.length > 0) && badges.map((badge, index) =>
                         {
                             return (