change messenger styling

package.json

@@ -14,7 +14,7 @@
     "@nitrots/nitro-renderer": "file:../nitro-renderer",
     "animate.css": "^4.1.1",
     "classnames": "^2.3.1",
-    "node-sass": "^5.0.0",
+    "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.0-alpha.2",
     "react-dom": "^17.0.2",

public/renderer-config.json

@@ -101,20 +101,7 @@
         "elephants"
     ],
     "preload.assets.urls": [
-        "${images.url}/additions/user_blowkiss.png",
+        "${asset.url}/bundled/generic/avatar_additions.nitro",
-        "${images.url}/additions/user_idle_left_1.png",
-        "${images.url}/additions/user_idle_left_2.png",
-        "${images.url}/additions/user_idle_right_1.png",
-        "${images.url}/additions/user_idle_right_2.png",
-        "${images.url}/additions/user_muted.png",
-        "${images.url}/additions/user_muted_small.png",
-        "${images.url}/additions/user_typing.png",
-        "${images.url}/additions/number_1.png",
-        "${images.url}/additions/number_2.png",
-        "${images.url}/additions/number_3.png",
-        "${images.url}/additions/number_4.png",
-        "${images.url}/additions/number_5.png",
-        "${images.url}/additions/pet_experience_bubble.png",
         "${images.url}/loading_icon.png",
         "${images.url}/clear_icon.png",
         "${images.url}/big_arrow.png"

src/App.scss

@@ -56,6 +56,9 @@ $help-height: 450px;
 $nitropedia-width: 400px;
 $nitropedia-height: 400px;
 
+$messenger-width: 500px;
+$messenger-height: 370px;
+
 .nitro-app {
     width: 100%;
     height: 100%;

src/views/friends/common/MessengerThread.ts

@@ -12,20 +12,20 @@ export class MessengerThread
     private _participant: MessengerFriend;
     private _groups: MessengerThreadChatGroup[];
     private _lastUpdated: Date;
-    private _unread: boolean;
+    private _unreadCount: number;
 
     constructor(participant: MessengerFriend, isNew: boolean = true)
     {
         this._participant = participant;
         this._groups = [];
         this._lastUpdated = new Date();
-        this._unread = false;
+        this._unreadCount = 0;
 
         if(isNew)
         {
             this.addMessage(null, LocalizeText('messenger.moderationinfo'), 0, null, MessengerThreadChat.SECURITY_NOTIFICATION);
 
-            this._unread = false;
+            this._unreadCount = 0;
         }
     }
 
@@ -45,7 +45,7 @@ export class MessengerThread
         group.addChat(chat);
 
         this._lastUpdated = new Date();
-        this._unread = true;
+        this._unreadCount++;
 
         return chat;
     }
@@ -65,7 +65,7 @@ export class MessengerThread
 
     public setRead(): void
     {
-        this._unread = false;
+        this._unreadCount = 0;
     }
 
     public get participant(): MessengerFriend
@@ -83,8 +83,13 @@ export class MessengerThread
         return this._lastUpdated;
     }
 
+    public get unreadCount(): number
+    {
+        return this._unreadCount;
+    }
+
     public get unread(): boolean
     {
-        return this._unread;
+        return this._unreadCount > 0;
     }
 }

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

@@ -1,34 +1,35 @@
 .nitro-friends-messenger {
-    width: 280px;
+    width: $messenger-width;
-    resize: both;
+    height: $messenger-height;
+
+    .open-chat-entry {
+        position: relative;
+        border: 2px solid;
+        border-color: $light;
+
+        &.active {
+            border-color: #fffde9;
+            background-color: #ececec
+        }
 
         .friend-head {
-        position: relative;
+            width: 45px;
-        width: 40px;
+            height: 45px;
-        height: 40px;
             overflow: hidden;
     
-        .icon {
-            position: absolute;
-            top: 1px;
-            right: 1px;
-            z-index: 10;
-        }
-
             .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 {

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

@@ -4,10 +4,11 @@ import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeTex
 import { MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound } from '../../../../api/utils/PlaySound';
 import { FriendsMessengerIconEvent } from '../../../../events';
 import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutButtonGroup, NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutButtonGroup, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../layout';
 import { NitroLayoutBase } from '../../../../layout/base';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
+import { ItemCountView } from '../../../shared/item-count/ItemCountView';
 import { MessengerThread } from '../../common/MessengerThread';
 import { MessengerThreadChat } from '../../common/MessengerThreadChat';
 import { useFriendsContext } from '../../context/FriendsContext';
@@ -223,7 +224,7 @@ export const FriendsMessengerView: FC<{}> = props =>
 
         for(const thread of visibleThreads)
         {
-            if(thread.unread)
+            if(thread.unreadCount > 0)
             {
                 isUnread = true;
 
@@ -242,31 +243,35 @@ export const FriendsMessengerView: FC<{}> = props =>
         <NitroCardView className="nitro-friends-messenger" uniqueKey="nitro-friends-messenger" simple={true}>
             <NitroCardHeaderView headerText={LocalizeText('messenger.window.title', ['OPEN_CHAT_COUNT'], [visibleThreads.length.toString()])} onCloseClick={event => setIsVisible(false)} />
             <NitroCardContentView>
-                <NitroLayoutFlex gap={ 2 } overflow="auto">
+            <NitroLayoutGrid>
+                <NitroLayoutGridColumn size={ 4 }>
+                        <NitroLayoutBase className='text-black fw-bold fs-5'>{LocalizeText('toolbar.icon.label.messenger')}</NitroLayoutBase>
+                        <NitroLayoutFlexColumn className='h-100 overflow-auto'>
                         {visibleThreads && (visibleThreads.length > 0) && visibleThreads.map((thread, index) =>
                         {
                             const messageThreadIndex = messageThreads.indexOf(thread);
 
                             return (
-                                <div key={ index } className="position-relative friend-head rounded flex-shrink-0 cursor-pointer bg-muted" onClick={ event => setActiveThreadIndex(messageThreadIndex) }>
+                                <NitroLayoutFlex key={index} className={`open-chat-entry p-1 cursor-pointer rounded ${activeThreadIndex === messageThreadIndex ? 'active' : ''}`} onClick={event => setActiveThreadIndex(messageThreadIndex)}>
                                     {thread.unread &&
-                                        <NitroLayoutBase className="position-absolute nitro-friends-spritesheet icon-new-message top-1 end-1 z-index-1" /> }
+                                            <ItemCountView count={ thread.unreadCount }/>
+                                    }
+                                    <div className="friend-head rounded flex-shrink-0">
+                                        
                                         {thread.participant.id > 0 && <AvatarImageView figure={thread.participant.figure} headOnly={true} direction={3} />}
                                         {thread.participant.id <= 0 && <BadgeImageView isGroup={true} badgeCode={thread.participant.figure} />}
 
                                     </div>
+                                    <NitroLayoutBase className='d-flex text-truncate text-black ms-1 align-items-center'>{thread.participant.name}</NitroLayoutBase>
+                                </NitroLayoutFlex>
                             );
                         })}
-                </NitroLayoutFlex>
+                        </NitroLayoutFlexColumn>
-                <NitroLayoutFlex className="align-items-center my-1" position="relative">
+                    </NitroLayoutGridColumn>
-                    { (activeThreadIndex >= 0) &&
+                    <NitroLayoutGridColumn size={ 8 }>
-                        <NitroLayoutBase className="text-black bg-light pe-2 flex-none">
-                            { LocalizeText('messenger.window.separator', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) }
-                        </NitroLayoutBase> }
-                    <hr className="bg-dark m-0 w-100" />
-                </NitroLayoutFlex>
                         {(activeThreadIndex >= 0) &&
                             <>
+                                <NitroLayoutBase className='mb-2 text-black text-center fw-bold fs-6'>{LocalizeText('messenger.window.separator', ['FRIEND_NAME'], [messageThreads[activeThreadIndex].participant.name])}</NitroLayoutBase>
                                 <NitroLayoutFlex className="mb-2" gap={2}>
                                     <NitroLayoutButtonGroup>
                                         <NitroLayoutButton variant="primary" size="sm" onClick={followFriend}>
@@ -283,7 +288,7 @@ export const FriendsMessengerView: FC<{}> = props =>
                                         <NitroLayoutBase className="fas fa-times" />
                                     </NitroLayoutButton>
                                 </NitroLayoutFlex>
-                        <NitroLayoutFlexColumn innerRef={ messagesBox } className="bg-muted p-2 rounded chat-messages mb-2">
+                                <NitroLayoutFlexColumn innerRef={messagesBox} className="bg-muted p-2 rounded chat-messages mb-2 h-100 w-100">
                                     <FriendsMessengerThreadView thread={messageThreads[activeThreadIndex]} />
                                 </NitroLayoutFlexColumn>
                                 <NitroLayoutFlex gap={2}>
@@ -293,6 +298,8 @@ export const FriendsMessengerView: FC<{}> = props =>
                                     </NitroLayoutButton>
                                 </NitroLayoutFlex>
                             </>}
+                    </NitroLayoutGridColumn>
+                </NitroLayoutGrid>
             </NitroCardContentView>
         </NitroCardView>
     );