Move friends component

src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts

@@ -1,10 +1,10 @@
 import { IFurnitureData, NitroEvent, ObjectDataFactory, PetFigureData, PetRespectComposer, PetSupplementComposer, PetType, RoomControllerLevel, RoomModerationSettings, RoomObjectCategory, RoomObjectOperationType, RoomObjectType, RoomObjectVariable, RoomSessionPetInfoUpdateEvent, RoomSessionUserBadgesEvent, RoomSessionUserFigureUpdateEvent, RoomTradingLevelEnum, RoomUnitDropHandItemComposer, RoomUnitGiveHandItemComposer, RoomUnitGiveHandItemPetComposer, RoomUserData, RoomWidgetEnum, RoomWidgetEnumItemExtradataParameter, Vector3d } from '@nitrots/nitro-renderer';
 import { SendMessageComposer } from '../../..';
 import { GetNitroInstance, GetRoomEngine, GetSessionDataManager, IsOwnerOfFurniture } from '../../../..';
+import { FriendsHelper } from '../../../../../components/friends/common/FriendsHelper';
 import { PetSupplementEnum } from '../../../../../components/room/widgets/avatar-info/common/PetSupplementEnum';
 import { FriendsSendFriendRequestEvent, HelpReportUserEvent, InventoryTradeRequestEvent, WiredSelectObjectEvent } from '../../../../../events';
 import { DispatchUiEvent } from '../../../../../hooks';
-import { FriendsHelper } from '../../../../../views/friends/common/FriendsHelper';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { RoomWidgetObjectNameEvent, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent } from '../events';
 import { RoomWidgetChangeMottoMessage, RoomWidgetFurniActionMessage, RoomWidgetMessage, RoomWidgetRoomObjectMessage, RoomWidgetUserActionMessage } from '../messages';

src/components/friends/FriendsView.scss

@@ -0,0 +1,239 @@
+.nitro-friends-spritesheet {
+    background: url('../../assets/images/friends/friends-spritesheet.png') transparent no-repeat;
+
+    &.icon-friendbar-visit {
+        width: 21px; height: 21px;
+        background-position: -38px -5px;
+    }
+    
+    &.icon-heart {
+        width: 16px; height: 14px;
+        background-position: -5px -67px;
+    }
+    
+    &.icon-new-message {
+        width: 14px; height: 14px;
+        background-position: -96px -53px;
+    }
+    
+    &.icon-none {
+        width: 16px; height: 14px;
+        background-position: -31px -67px;
+    }
+    
+    &.icon-profile {
+        width: 21px; height: 21px;
+        background-position: -5px -36px;
+    }
+    
+    &.icon-profile-sm {
+        width: 13px; height: 11px;
+        background-position: -51px -91px;
+
+        &:hover {
+            width: 13px; height: 11px;
+            background-position: -74px -91px;
+        }
+    }
+    
+    &.icon-smile {
+        width: 16px; height: 14px;
+        background-position: -57px -67px;
+    }
+    
+    &.icon-warning {
+        width: 23px; height: 21px;
+        background-position: -5px -5px;
+    }
+    
+    &.icon-accept {
+        width: 13px; height: 14px;
+        background-position: -5px -91px;
+    }
+    
+    &.icon-add {
+        width: 16px; height: 15px;
+        background-position: -69px -31px;
+    }
+    
+    &.icon-bobba {
+        width: 16px; height: 14px;
+        background-position: -96px -5px;
+    }
+    
+    &.icon-chat {
+        width: 17px; height: 16px;
+        background-position: -69px -5px;
+    }
+    
+    &.icon-deny {
+        width: 13px; height: 14px;
+        background-position: -28px -91px;
+    }
+    
+    &.icon-follow {
+        width: 16px; height: 14px;
+        background-position: -96px -29px;
+    }
+    
+    &.icon-friendbar-chat {
+        width: 20px; height: 21px;
+        background-position: -36px -36px;
+    }
+}
+
+.nitro-friends {
+    width: $friends-list-width;
+    height: $friends-list-height;
+
+    .search-input {
+        border: 0;
+        border-bottom: 1px solid rgba($black, 0.2);
+    }
+}
+
+.nitro-friends-room-invite {
+    width: $friends-list-width;
+}
+
+.nitro-friends-remove-confirmation {
+    width: $friends-list-width;
+}
+
+.friend-bar {
+
+    .friend-bar-button {
+        z-index: 2;
+    }
+
+    .friend-bar-item {
+        width: 130px;
+        margin: 0 3px;
+        z-index: 0;
+        position: relative;
+        padding-left:38px;
+        text-align: left;
+    
+        &.friend-bar-item-active {
+            margin-bottom:21px;
+        }
+    
+        .friend-bar-item-head {
+            &.avatar {
+                top: -30px;
+                left: -30px;
+            }
+            &.group {
+                top: -5px;
+                left: -5px;
+            }
+    
+            pointer-events: none;
+        }
+    
+        &.friend-bar-search {
+            .friend-bar-item-head {
+                top: -3px;
+                left: 5px;
+                width: 31px;
+                height: 34px;
+                background-image: url('../../assets/images/toolbar/friend-search.png');
+            } 
+        }
+    }
+}
+
+.nitro-friends-messenger {
+    width: $messenger-width;
+    height: $messenger-height;
+
+    .layout-grid-item {
+        height: 50px;
+    }
+
+    .friend-head {
+        width: 50px;
+        height: 45px;
+        overflow: hidden;
+
+        .avatar-image {
+            margin-top: 90px;
+        }
+    }
+
+    .open-chat-entry {
+        position: relative;
+        border: 2px solid;
+        border-color: $light;
+
+        &.active {
+            border-color: #fffde9;
+            background-color: #ececec
+        }
+
+        .friend-head {
+            width: 45px;
+            height: 45px;
+            overflow: hidden;
+    
+            .avatar-image {
+                position: absolute;
+                margin-left: -27px;
+                margin-top: -27px;
+            }
+        }
+    }
+
+    .chat-title {
+        margin-top: -21px;
+    }
+
+    .chat-messages {
+        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;
+            }
+        }
+    }
+}

src/components/index.scss

@@ -5,6 +5,7 @@
 @import './catalog/CatalogView';
 @import './chat-history/ChatHistoryView';
 @import './floorplan-editor/FloorplanEditorView';
+@import './friends/FriendsView';
 @import './groups/GroupView';
 @import './guide-tool/GuideToolView';
 @import './help/HelpView';

src/components/main/MainView.tsx

@@ -3,7 +3,6 @@ import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetCommunication, RemoveLinkEventTracker } from '../../api';
 import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { UseRoomSessionManagerEvent } from '../../hooks';
-import { FriendsView } from '../../views/friends/FriendsView';
 import { HcCenterView } from '../../views/hc-center/HcCenterView';
 import { HotelView } from '../../views/hotel-view/HotelView';
 import { NitropediaView } from '../../views/nitropedia/NitropediaView';
@@ -14,6 +13,7 @@ import { CampaignView } from '../campaign/CampaignView';
 import { CatalogView } from '../catalog/CatalogView';
 import { ChatHistoryView } from '../chat-history/ChatHistoryView';
 import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
+import { FriendsView } from '../friends/FriendsView';
 import { GroupsView } from '../groups/GroupsView';
 import { GuideToolView } from '../guide-tool/GuideToolView';
 import { HelpView } from '../help/HelpView';

src/events/friends/FriendListContentEvent.ts

@@ -1,5 +1,5 @@
 import { NitroEvent } from '@nitrots/nitro-renderer';
-import { MessengerFriend } from '../../views/friends/common/MessengerFriend';
+import { MessengerFriend } from '../../components/friends/common/MessengerFriend';
 
 export class FriendListContentEvent extends NitroEvent
 {

src/views/Styles.scss

@@ -1,5 +1,4 @@
 @import "./shared/Shared";
-@import "./friends/FriendsView";
 @import "./hotel-view/HotelView";
 @import "./notification-center/NotificationCenterView";
 @import "./nitropedia/NitropediaView";

src/views/friends/FriendsView.scss

@@ -1,104 +0,0 @@
-.nitro-friends-spritesheet {
-    background: url('../../assets/images/friends/friends-spritesheet.png') transparent no-repeat;
-
-    &.icon-friendbar-visit {
-        width: 21px; height: 21px;
-        background-position: -38px -5px;
-    }
-    
-    &.icon-heart {
-        width: 16px; height: 14px;
-        background-position: -5px -67px;
-    }
-    
-    &.icon-new-message {
-        width: 14px; height: 14px;
-        background-position: -96px -53px;
-    }
-    
-    &.icon-none {
-        width: 16px; height: 14px;
-        background-position: -31px -67px;
-    }
-    
-    &.icon-profile {
-        width: 21px; height: 21px;
-        background-position: -5px -36px;
-    }
-    
-    &.icon-profile-sm {
-        width: 13px; height: 11px;
-        background-position: -51px -91px;
-
-        &:hover {
-            width: 13px; height: 11px;
-            background-position: -74px -91px;
-        }
-    }
-    
-    &.icon-smile {
-        width: 16px; height: 14px;
-        background-position: -57px -67px;
-    }
-    
-    &.icon-warning {
-        width: 23px; height: 21px;
-        background-position: -5px -5px;
-    }
-    
-    &.icon-accept {
-        width: 13px; height: 14px;
-        background-position: -5px -91px;
-    }
-    
-    &.icon-add {
-        width: 16px; height: 15px;
-        background-position: -69px -31px;
-    }
-    
-    &.icon-bobba {
-        width: 16px; height: 14px;
-        background-position: -96px -5px;
-    }
-    
-    &.icon-chat {
-        width: 17px; height: 16px;
-        background-position: -69px -5px;
-    }
-    
-    &.icon-deny {
-        width: 13px; height: 14px;
-        background-position: -28px -91px;
-    }
-    
-    &.icon-follow {
-        width: 16px; height: 14px;
-        background-position: -96px -29px;
-    }
-    
-    &.icon-friendbar-chat {
-        width: 20px; height: 21px;
-        background-position: -36px -36px;
-    }
-}
-
-.nitro-friends {
-    width: $friends-list-width;
-    height: $friends-list-height;
-
-    .search-input {
-        border: 0;
-        border-bottom: 1px solid rgba($black, 0.2);
-    }
-}
-
-.nitro-friends-room-invite {
-    width: $friends-list-width;
-}
-
-.nitro-friends-remove-confirmation {
-    width: $friends-list-width;
-}
-
-@import "./views/friend-bar/FriendBarView";
-@import "./views/messenger/FriendsMessengerView";

src/views/friends/views/friend-bar/FriendBarView.scss

@@ -1,42 +0,0 @@
-.friend-bar {
-
-    .friend-bar-button {
-        z-index: 2;
-    }
-
-    .friend-bar-item {
-        width: 130px;
-        margin: 0 3px;
-        z-index: 0;
-        position: relative;
-        padding-left:38px;
-        text-align: left;
-    
-        &.friend-bar-item-active {
-            margin-bottom:21px;
-        }
-    
-        .friend-bar-item-head {
-            &.avatar {
-                top: -30px;
-                left: -30px;
-            }
-            &.group {
-                top: -5px;
-                left: -5px;
-            }
-    
-            pointer-events: none;
-        }
-    
-        &.friend-bar-search {
-            .friend-bar-item-head {
-                top: -3px;
-                left: 5px;
-                width: 31px;
-                height: 34px;
-                background-image: url('../../../../assets/images/toolbar/friend-search.png');
-            } 
-        }
-    }
-}

src/views/friends/views/messenger/FriendsMessengerView.scss

@@ -1,94 +0,0 @@
-.nitro-friends-messenger {
-    width: $messenger-width;
-    height: $messenger-height;
-
-    .layout-grid-item {
-        height: 50px;
-    }
-
-    .friend-head {
-        width: 50px;
-        height: 45px;
-        overflow: hidden;
-
-        .avatar-image {
-            margin-top: 90px;
-        }
-    }
-
-    .open-chat-entry {
-        position: relative;
-        border: 2px solid;
-        border-color: $light;
-
-        &.active {
-            border-color: #fffde9;
-            background-color: #ececec
-        }
-
-        .friend-head {
-            width: 45px;
-            height: 45px;
-            overflow: hidden;
-    
-            .avatar-image {
-                position: absolute;
-                margin-left: -27px;
-                margin-top: -27px;
-            }
-        }
-    }
-
-    .chat-title {
-        margin-top: -21px;
-    }
-
-    .chat-messages {
-        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;
-            }
-        }
-    }
-}