From 9939e9082859fa89f47a4c777af000ac8541e26a Mon Sep 17 00:00:00 2001 From: duckietm Date: Fri, 27 Feb 2026 13:56:33 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=86=99=20Fixed=20the=20friends=20componen?= =?UTF-8?q?ts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../avatar/AvatarEditorThumbnailsHelper.ts | 1 - .../views/friends-bar/FriendBarItemView.tsx | 39 ++-- .../views/messenger/FriendsMessengerView.tsx | 56 ++--- .../FriendsMessengerThreadGroup.tsx | 3 +- src/css/friends/FriendsView.css | 198 ++++++++++++++++++ src/hooks/friends/useFriends.ts | 2 +- 6 files changed, 252 insertions(+), 47 deletions(-) create mode 100644 src/css/friends/FriendsView.css diff --git a/src/api/avatar/AvatarEditorThumbnailsHelper.ts b/src/api/avatar/AvatarEditorThumbnailsHelper.ts index 88a7906..2c21ebd 100644 --- a/src/api/avatar/AvatarEditorThumbnailsHelper.ts +++ b/src/api/avatar/AvatarEditorThumbnailsHelper.ts @@ -84,7 +84,6 @@ export class AvatarEditorThumbnailsHelper if(!hasAsset) { - console.log(`${ AvatarFigurePartType.SCALE }_${ AvatarFigurePartType.STD }_${ part.type }_${ part.id }`); continue; } diff --git a/src/components/friends/views/friends-bar/FriendBarItemView.tsx b/src/components/friends/views/friends-bar/FriendBarItemView.tsx index 7e4a5a4..d646344 100644 --- a/src/components/friends/views/friends-bar/FriendBarItemView.tsx +++ b/src/components/friends/views/friends-bar/FriendBarItemView.tsx @@ -1,6 +1,6 @@ -import { MouseEventType } from '@nitrots/nitro-renderer'; +import { FindNewFriendsMessageComposer, MouseEventType } from '@nitrots/nitro-renderer'; import { FC, useEffect, useRef, useState } from 'react'; -import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat } from '../../../../api'; +import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat, SendMessageComposer } from '../../../../api'; import { Button, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common'; import { useFriends } from '../../../../hooks'; @@ -33,27 +33,34 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => if(!friend) { return ( - +
setVisible(prev => !prev) }> +
+
{ LocalizeText('friend.bar.find.title') }
+ { isVisible && +
+
{ LocalizeText('friend.bar.find.text') }
+ +
} +
); } return ( - +
); }; diff --git a/src/components/friends/views/messenger/FriendsMessengerView.tsx b/src/components/friends/views/messenger/FriendsMessengerView.tsx index 354ddd5..bbb5222 100644 --- a/src/components/friends/views/messenger/FriendsMessengerView.tsx +++ b/src/components/friends/views/messenger/FriendsMessengerView.tsx @@ -2,7 +2,7 @@ import { AddLinkEventTracker, FollowFriendMessageComposer, GetSessionDataManager import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react'; import { FaTimes } from 'react-icons/fa'; import { GetUserProfile, LocalizeText, ReportType, SendMessageComposer } from '../../../../api'; -import { Button, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, LayoutGridItem, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common'; +import { Button, Column, Flex, Grid, LayoutAvatarImageView, LayoutGridItem, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common'; import { useHelp, useMessenger } from '../../../../hooks'; import { NitroInput } from '../../../../layout'; import { FriendsMessengerThreadView } from './messenger-thread/FriendsMessengerThreadView'; @@ -107,33 +107,32 @@ export const FriendsMessengerView: FC<{}> = props => if(!isVisible) return null; return ( - + setIsVisible(false) } /> { LocalizeText('toolbar.icon.label.messenger') } -
+ { visibleThreads && (visibleThreads.length > 0) && visibleThreads.map(thread => { return ( - setActiveThreadId(thread.threadId) }> - { thread.unread && - } -
-
- { (thread.participant.id > 0) && - } - { (thread.participant.id <= 0) && - } -
- { thread.participant.name } -
+ setActiveThreadId(thread.threadId) } className="py-1 px-2"> + { thread.unread && } + + 0 ? thread.participant.figure : thread.participant.figure === 'ADM' ? 'ha-3409-1413-70.lg-285-89.ch-3032-1334-109.sh-3016-110.hd-185-1359.ca-3225-110-62.wa-3264-62-62.fa-1206-90.hr-3322-1403' : thread.participant.figure } + headOnly={ true } + direction={ thread.participant.id > 0 ? 2 : 3 } + style={{ width: '50px', height: '80px', backgroundPosition: 'center 45%', flexShrink: 0, alignSelf: 'flex-end' }} + /> + { thread.participant.name } + ); }) } -
+ @@ -141,19 +140,20 @@ export const FriendsMessengerView: FC<{}> = props => <> { LocalizeText('messenger.window.separator', [ 'FRIEND_NAME' ], [ activeThread.participant.name ]) } -
-
- + +
+ - -
- - + } diff --git a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx index 6827fb1..b9ace6c 100644 --- a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx +++ b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx @@ -58,7 +58,8 @@ export const FriendsMessengerThreadGroup: FC<{ thread: MessengerThread, group: M } - + + { group.chats[0].date.toLocaleTimeString() } { isOwnChat && GetSessionDataManager().userName } { !isOwnChat && (groupChatData ? groupChatData.username : thread.participant.name) } diff --git a/src/css/friends/FriendsView.css b/src/css/friends/FriendsView.css new file mode 100644 index 0000000..aad4844 --- /dev/null +++ b/src/css/friends/FriendsView.css @@ -0,0 +1,198 @@ +/* ── Friends spritesheet icons ── */ +.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; + } +} + +.messenger-notification-icon { + background: url('@/assets/images/friends/messenger_notification_icon.png') transparent no-repeat; + width: 25px; + height: 25px; +} + +.nitro-friends { + width: 250px; + height: 300px; + + & .search-input { + border: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + } +} + +.nitro-friends-room-invite { + width: 250px; +} + +.nitro-friends-remove-confirmation { + width: 250px; +} + +.friend-bar { + & .friend-bar-item { + pointer-events: all; + + &.friend-bar-search-item-active { + background-color: #b69b83; + border: 2px solid #e2c1a3; + + & .search-content { + font-size: 12px; + } + } + + & .friend-bar-item-head { + pointer-events: none; + } + } +} + +.nitro-friends-messenger { + & .layout-grid-item { + min-height: 50px; + } + + & .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 #DFDFDF; + 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 #DFDFDF; + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; + top: 10px; + right: -8px; + } + } + } +} diff --git a/src/hooks/friends/useFriends.ts b/src/hooks/friends/useFriends.ts index aa4d49f..319fead 100644 --- a/src/hooks/friends/useFriends.ts +++ b/src/hooks/friends/useFriends.ts @@ -193,7 +193,7 @@ const useFriendsState = () => { const index = newValue.findIndex(existing => (existing.requesterUserId === request.requesterUserId)); - if(index > 0) + if(index !== -1) { newValue[index] = CloneObject(newValue[index]); newValue[index].populate(request);