From 1fd12e69d28e0ee8698f92e2e891a34a1e5363f0 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Wed, 10 Apr 2024 06:44:10 +0200
Subject: [PATCH] Feat: Redone Friend-Bar

---
 src/components/friends/FriendsView.scss       | 29 +++++++++++++++----
 .../views/friends-bar/FriendBarItemView.tsx   | 23 ++++++++++-----
 .../views/friends-list/FriendsListView.tsx    |  6 +++-
 3 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/components/friends/FriendsView.scss b/src/components/friends/FriendsView.scss
index 2396400..b4f69e1 100644
--- a/src/components/friends/FriendsView.scss
+++ b/src/components/friends/FriendsView.scss
@@ -128,20 +128,39 @@
         &.friend-bar-item-active {
             margin-bottom:21px;
         }
+		
+		&.friend-bar-search-item-active {
+            margin-bottom:10.5em;
+			background-color: #b69b83;
+			border: 2px solid #e2c1a3;
+        }
 
         .friend-bar-item-head {
             &.avatar {
-                top: -30px;
-                left: -30px;
+                top: -31px;
+                left: -25px;
             }
             &.group {
-                top: -5px;
-                left: -5px;
+                top: -31px;
+                left: -25px;
             }
 
             pointer-events: none;
         }
 		
+		.friend-bar-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        //    white-space: nowrap;
+            font-size: 13px;
+            line-height: 1;
+            color: #fff;
+        }
+		
+		.font-size-friend {
+				font-size: 12px;
+			}
+		
 		.avatar-image {
                 max-height: 80px;
             }
@@ -251,4 +270,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/components/friends/views/friends-bar/FriendBarItemView.tsx b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
index fe8624f..4d0f485 100644
--- a/src/components/friends/views/friends-bar/FriendBarItemView.tsx
+++ b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
@@ -1,7 +1,7 @@
-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 { Base, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
+import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat, SendMessageComposer } from '../../../../api';
+import { Base, Button, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
 import { useFriends } from '../../../../hooks';
 
 export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
@@ -32,10 +32,16 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
 
     if(!friend)
     {
-        return (
-            <div ref={ elementRef } className="btn btn-friendsgen friend-bar-item friend-bar-search">
+		return (
+            <div ref={ elementRef } className={ 'btn btn-friendsgen friend-bar-item friend-bar-search ' + (isVisible ? 'friend-bar-search-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
                 <div className="friend-bar-item-head position-absolute"/>
-                <div className="text-truncate">{ LocalizeText('friend.bar.find.title') }</div>
+                <div className="friend-bar-text">{ LocalizeText('friend.bar.find.title') }</div>
+                { isVisible &&
+                    <div className="search-content mt-3">
+						<div className="bg-white text-black px-1 py-1 font-size-friend">{ LocalizeText('friend.bar.find.text') }</div>
+                        <Button className="mt-2 mb-4" variant="white" onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) }>{ LocalizeText('friend.bar.find.button') }</Button>
+                    </div>
+                }
             </div>
         );
     }
@@ -44,8 +50,11 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
         <div ref={ elementRef } className={ 'btn btn-friendsgensuccess friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
             <div className={ `friend-bar-item-head position-absolute ${ friend.id > 0 ? 'avatar': 'group' }` }>
                 { (friend.id > 0) && <LayoutAvatarImageView headOnly={ !isVisible } figure={ friend.figure } direction={ 2 } /> }
-                { (friend.id <= 0) && <LayoutBadgeImageView isGroup={ true } badgeCode={ friend.figure } /> } 
+                <LayoutAvatarImageView headOnly={true} figure={
+					friend.id > 0 ? friend.figure : (friend.id <= 0 && friend.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' : friend.figure
+					} isgroup={friend.id <= 0 ? 1 : 0} direction={friend.id > 0 ? 2 : 3} />
             </div>
+			
             <div className="text-truncate">{ friend.name }</div>
             { isVisible &&
             <div className="d-flex justify-content-between">
diff --git a/src/components/friends/views/friends-list/FriendsListView.tsx b/src/components/friends/views/friends-list/FriendsListView.tsx
index d98e93a..6d991d1 100644
--- a/src/components/friends/views/friends-list/FriendsListView.tsx
+++ b/src/components/friends/views/friends-list/FriendsListView.tsx
@@ -11,6 +11,7 @@ import { FriendsSearchView } from './FriendsListSearchView';
 
 export const FriendsListView: FC<{}> = props =>
 {
+	const [ isFromSearchToolbar, setIsFromSearchToolbar ] = useState<boolean>(false);
     const [ isVisible, setIsVisible ] = useState(false);
     const [ selectedFriendsIds, setSelectedFriendsIds ] = useState<number[]>([]);
     const [ showRoomInvite, setShowRoomInvite ] = useState<boolean>(false);
@@ -96,12 +97,15 @@ export const FriendsListView: FC<{}> = props =>
                 {
                     case 'show':
                         setIsVisible(true);
+						setIsFromSearchToolbar(false);
                         return;
                     case 'hide':
                         setIsVisible(false);
+						setIsFromSearchToolbar(false);
                         return;
                     case 'toggle':
                         setIsVisible(prevValue => !prevValue);
+						setIsFromSearchToolbar(true);
                         return;
                     case 'request':
                         if(parts.length < 4) return;
@@ -147,4 +151,4 @@ export const FriendsListView: FC<{}> = props =>
                 <FriendsRemoveConfirmationView selectedFriendsIds={ selectedFriendsIds } removeFriendsText={ removeFriendsText } onCloseClick={ () => setShowRemoveFriendsConfirmation(false) } removeSelectedFriends={ removeSelectedFriends } /> }
         </>
     );
-};
+};
\ No newline at end of file