From 4a1a2ab1ce077b5d54e33489ee90dc93d6b18e44 Mon Sep 17 00:00:00 2001
From: Yauheni <HorbachZhenja@yandex.by>
Date: Tue, 13 Feb 2024 12:16:10 +0100
Subject: [PATCH 1/4] Fix bug with Group chat stacked avatars are different in
 Search list and LHN

---
 src/components/SelectionList/BaseListItem.tsx | 140 +++++++++---------
 .../SelectionList/BaseSelectionList.tsx       |   2 +
 src/components/SelectionList/UserListItem.tsx |  37 ++++-
 src/components/SelectionList/types.ts         |  13 ++
 src/pages/SearchPage/index.js                 |   1 +
 5 files changed, 121 insertions(+), 72 deletions(-)

diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
index 71845931ba52..553fee4887db 100644
--- a/src/components/SelectionList/BaseListItem.tsx
+++ b/src/components/SelectionList/BaseListItem.tsx
@@ -25,6 +25,7 @@ function BaseListItem<TItem extends User | RadioItem>({
     onDismissError = () => {},
     rightHandSideComponent,
     keyForList,
+    shouldUseOnySubscriptAvatar = true,
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -63,77 +64,84 @@ function BaseListItem<TItem extends User | RadioItem>({
                 onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
                 nativeID={keyForList}
             >
-                <View
-                    style={[
-                        styles.flex1,
-                        styles.justifyContentBetween,
-                        styles.sidebarLinkInner,
-                        styles.userSelectNone,
-                        isUserItem ? styles.peopleRow : styles.optionRow,
-                        isFocused && styles.sidebarLinkActive,
-                    ]}
-                >
-                    {canSelectMultiple && (
+                {({hovered}) => (
+                    <>
                         <View
-                            role={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                            style={StyleUtils.getCheckboxPressableStyle()}
+                            style={[
+                                styles.flex1,
+                                styles.justifyContentBetween,
+                                styles.sidebarLinkInner,
+                                styles.userSelectNone,
+                                isUserItem ? styles.peopleRow : styles.optionRow,
+                                isFocused && styles.sidebarLinkActive,
+                            ]}
                         >
-                            <View
-                                style={[
-                                    StyleUtils.getCheckboxContainerStyle(20),
-                                    styles.mr3,
-                                    item.isSelected && styles.checkedContainer,
-                                    item.isSelected && styles.borderColorFocus,
-                                    item.isDisabled && styles.cursorDisabled,
-                                    item.isDisabled && styles.buttonOpacityDisabled,
-                                ]}
-                            >
-                                {item.isSelected && (
-                                    <Icon
-                                        src={Expensicons.Checkmark}
-                                        fill={theme.textLight}
-                                        height={14}
-                                        width={14}
-                                    />
-                                )}
-                            </View>
-                        </View>
-                    )}
+                            {canSelectMultiple && (
+                                <View
+                                    role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                    style={StyleUtils.getCheckboxPressableStyle()}
+                                >
+                                    <View
+                                        style={[
+                                            StyleUtils.getCheckboxContainerStyle(20),
+                                            styles.mr3,
+                                            item.isSelected && styles.checkedContainer,
+                                            item.isSelected && styles.borderColorFocus,
+                                            item.isDisabled && styles.cursorDisabled,
+                                            item.isDisabled && styles.buttonOpacityDisabled,
+                                        ]}
+                                    >
+                                        {item.isSelected && (
+                                            <Icon
+                                                src={Expensicons.Checkmark}
+                                                fill={theme.textLight}
+                                                height={14}
+                                                width={14}
+                                            />
+                                        )}
+                                    </View>
+                                </View>
+                            )}
 
-                    <ListItem
-                        item={item}
-                        textStyles={[
-                            styles.optionDisplayName,
-                            isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
-                            styles.sidebarLinkTextBold,
-                            styles.pre,
-                            item.alternateText ? styles.mb1 : null,
-                        ]}
-                        alternateTextStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
-                        isDisabled={isDisabled}
-                        onSelectRow={() => onSelectRow(item)}
-                        showTooltip={showTooltip}
-                    />
+                            <ListItem
+                                item={item}
+                                textStyles={[
+                                    styles.optionDisplayName,
+                                    isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                                    styles.sidebarLinkTextBold,
+                                    styles.pre,
+                                    item.alternateText ? styles.mb1 : null,
+                                ]}
+                                alternateTextStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                                isDisabled={isDisabled}
+                                onSelectRow={() => onSelectRow(item)}
+                                showTooltip={showTooltip}
+                                isFocused={isFocused}
+                                isHovered={hovered}
+                                shouldUseOnySubscriptAvatar={shouldUseOnySubscriptAvatar}
+                            />
 
-                    {!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
-                        <View
-                            style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
-                            accessible={false}
-                        >
-                            <View>
-                                <Icon
-                                    src={Expensicons.Checkmark}
-                                    fill={theme.success}
-                                />
-                            </View>
+                            {!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
+                                <View
+                                    style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
+                                    accessible={false}
+                                >
+                                    <View>
+                                        <Icon
+                                            src={Expensicons.Checkmark}
+                                            fill={theme.success}
+                                        />
+                                    </View>
+                                </View>
+                            )}
+                            {rightHandSideComponentRender()}
                         </View>
-                    )}
-                    {rightHandSideComponentRender()}
-                </View>
-                {isUserItem && item.invitedSecondaryLogin && (
-                    <Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>
-                        {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})}
-                    </Text>
+                        {isUserItem && item.invitedSecondaryLogin && (
+                            <Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>
+                                {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})}
+                            </Text>
+                        )}
+                    </>
                 )}
             </PressableWithFeedback>
         </OfflineWithFeedback>
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index c77e244b4c92..ca9213a0fcaa 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -60,6 +60,7 @@ function BaseSelectionList<TItem extends User | RadioItem>(
         rightHandSideComponent,
         isLoadingNewOptions = false,
         onLayout,
+        shouldUseOnySubscriptAvatar = true,
     }: BaseSelectionListProps<TItem>,
     inputRef: ForwardedRef<RNTextInput>,
 ) {
@@ -300,6 +301,7 @@ function BaseSelectionList<TItem extends User | RadioItem>(
                 shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
                 rightHandSideComponent={rightHandSideComponent}
                 keyForList={item.keyForList}
+																shouldUseOnySubscriptAvatar={shouldUseOnySubscriptAvatar}
             />
         );
     };
diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx
index fede09c1b435..c9fb9a92f9fb 100644
--- a/src/components/SelectionList/UserListItem.tsx
+++ b/src/components/SelectionList/UserListItem.tsx
@@ -1,20 +1,45 @@
 import React from 'react';
 import {View} from 'react-native';
+import MultipleAvatars from '@components/MultipleAvatars';
 import SubscriptAvatar from '@components/SubscriptAvatar';
 import TextWithTooltip from '@components/TextWithTooltip';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {UserListItemProps} from './types';
 
-function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style}: UserListItemProps) {
+function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style, isFocused, isHovered, shouldUseOnySubscriptAvatar = true}: UserListItemProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
+    const StyleUtils = useStyleUtils();
+
+    const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
+    const subscriptAvatarBorderColor = isFocused ? focusedBackgroundColor : theme.sidebar;
+    const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
+
     return (
         <>
             {!!item.icons && (
-                <SubscriptAvatar
-                    mainAvatar={item.icons[0]}
-                    secondaryAvatar={item.icons[1]}
-                    showTooltip={showTooltip}
-                />
+                <>
+                    {item.shouldShowSubscript ?? shouldUseOnySubscriptAvatar ? (
+                        <SubscriptAvatar
+                            mainAvatar={item.icons[0]}
+                            secondaryAvatar={item.icons[1]}
+                            showTooltip={showTooltip}
+                            backgroundColor={isHovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
+                        />
+                    ) : (
+                        <MultipleAvatars
+                            icons={item.icons ?? []}
+                            shouldShowTooltip={showTooltip}
+                            secondAvatarStyle={[
+                                StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
+                                isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
+                                isHovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
+                            ]}
+                        />
+                    )}
+                </>
             )}
             <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
                 <TextWithTooltip
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index be871971ee92..0b9e561e8db2 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -73,6 +73,9 @@ type User = {
 
     /** Represents the index of the option within the section it came from */
     index?: number;
+
+    /** Whether this option should show subscript */
+    shouldShowSubscript?: boolean;
 };
 
 type UserListItemProps = CommonListItemProps<User> & {
@@ -81,6 +84,12 @@ type UserListItemProps = CommonListItemProps<User> & {
 
     /** Additional styles to apply to text */
     style?: StyleProp<TextStyle>;
+
+    /** Is item hovered */
+    isHovered?: boolean;
+
+    /** Whether this item should use only the subscript avatar */
+    shouldUseOnySubscriptAvatar?: boolean;
 };
 
 type RadioItem = {
@@ -115,6 +124,7 @@ type BaseListItemProps<TItem extends User | RadioItem> = CommonListItemProps<TIt
     item: TItem;
     shouldPreventDefaultFocusOnSelectRow?: boolean;
     keyForList?: string;
+    shouldUseOnySubscriptAvatar?: boolean;
 };
 
 type Section<TItem extends User | RadioItem> = {
@@ -239,6 +249,9 @@ type BaseSelectionListProps<TItem extends User | RadioItem> = Partial<ChildrenPr
 
     /** Fired when the list is displayed with the items */
     onLayout?: (event: LayoutChangeEvent) => void;
+				
+    /** Whether this item should use only the subscript avatar */
+    shouldUseOnySubscriptAvatar?: boolean;
 };
 
 type ItemLayout = {
diff --git a/src/pages/SearchPage/index.js b/src/pages/SearchPage/index.js
index 7c472296dfe1..d9cae3ff8496 100644
--- a/src/pages/SearchPage/index.js
+++ b/src/pages/SearchPage/index.js
@@ -164,6 +164,7 @@ function SearchPage({betas, reports, isSearchingForReports}) {
                             showLoadingPlaceholder={!didScreenTransitionEnd || !isOptionsDataReady}
                             footerContent={SearchPageFooterInstance}
                             isLoadingNewOptions={isSearchingForReports}
+                            shouldUseOnySubscriptAvatar={false}
                         />
                     </View>
                 </>

From 4fd550f589ad731b34e6ff7b62f75090dd646b69 Mon Sep 17 00:00:00 2001
From: Yauheni <HorbachZhenja@yandex.by>
Date: Tue, 13 Feb 2024 12:25:28 +0100
Subject: [PATCH 2/4] Fix prettier issues

---
 src/components/SelectionList/BaseSelectionList.tsx | 2 +-
 src/components/SelectionList/types.ts              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index ca9213a0fcaa..3a052bc2be1e 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -301,7 +301,7 @@ function BaseSelectionList<TItem extends User | RadioItem>(
                 shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
                 rightHandSideComponent={rightHandSideComponent}
                 keyForList={item.keyForList}
-																shouldUseOnySubscriptAvatar={shouldUseOnySubscriptAvatar}
+                shouldUseOnySubscriptAvatar={shouldUseOnySubscriptAvatar}
             />
         );
     };
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index 0b9e561e8db2..cbba278292b8 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -249,7 +249,7 @@ type BaseSelectionListProps<TItem extends User | RadioItem> = Partial<ChildrenPr
 
     /** Fired when the list is displayed with the items */
     onLayout?: (event: LayoutChangeEvent) => void;
-				
+
     /** Whether this item should use only the subscript avatar */
     shouldUseOnySubscriptAvatar?: boolean;
 };

From a2663b81cc872df4c5d4eb684d1525e737dd062b Mon Sep 17 00:00:00 2001
From: Yauheni <HorbachZhenja@yandex.by>
Date: Tue, 13 Feb 2024 13:39:05 +0100
Subject: [PATCH 3/4] Update condition for UserListItem icons

---
 src/components/SelectionList/UserListItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx
index c9fb9a92f9fb..3fd61177aa6a 100644
--- a/src/components/SelectionList/UserListItem.tsx
+++ b/src/components/SelectionList/UserListItem.tsx
@@ -21,7 +21,7 @@ function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style
         <>
             {!!item.icons && (
                 <>
-                    {item.shouldShowSubscript ?? shouldUseOnySubscriptAvatar ? (
+                    {shouldUseOnySubscriptAvatar || item.shouldShowSubscript ? (
                         <SubscriptAvatar
                             mainAvatar={item.icons[0]}
                             secondaryAvatar={item.icons[1]}

From 34309fea6afc2973cc92ef6481d9531cc21ac3a7 Mon Sep 17 00:00:00 2001
From: Yauheni <HorbachZhenja@yandex.by>
Date: Tue, 13 Feb 2024 17:08:03 +0100
Subject: [PATCH 4/4] Remove shouldUseOnySubscriptAvatar

---
 src/components/SelectionList/BaseListItem.tsx      | 2 --
 src/components/SelectionList/BaseSelectionList.tsx | 2 --
 src/components/SelectionList/UserListItem.tsx      | 4 ++--
 src/components/SelectionList/types.ts              | 7 -------
 src/pages/SearchPage/index.js                      | 1 -
 5 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
index 553fee4887db..0290d7bfda98 100644
--- a/src/components/SelectionList/BaseListItem.tsx
+++ b/src/components/SelectionList/BaseListItem.tsx
@@ -25,7 +25,6 @@ function BaseListItem<TItem extends User | RadioItem>({
     onDismissError = () => {},
     rightHandSideComponent,
     keyForList,
-    shouldUseOnySubscriptAvatar = true,
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -118,7 +117,6 @@ function BaseListItem<TItem extends User | RadioItem>({
                                 showTooltip={showTooltip}
                                 isFocused={isFocused}
                                 isHovered={hovered}
-                                shouldUseOnySubscriptAvatar={shouldUseOnySubscriptAvatar}
                             />
 
                             {!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index 3a052bc2be1e..c77e244b4c92 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -60,7 +60,6 @@ function BaseSelectionList<TItem extends User | RadioItem>(
         rightHandSideComponent,
         isLoadingNewOptions = false,
         onLayout,
-        shouldUseOnySubscriptAvatar = true,
     }: BaseSelectionListProps<TItem>,
     inputRef: ForwardedRef<RNTextInput>,
 ) {
@@ -301,7 +300,6 @@ function BaseSelectionList<TItem extends User | RadioItem>(
                 shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
                 rightHandSideComponent={rightHandSideComponent}
                 keyForList={item.keyForList}
-                shouldUseOnySubscriptAvatar={shouldUseOnySubscriptAvatar}
             />
         );
     };
diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx
index 3fd61177aa6a..f48f9e04077a 100644
--- a/src/components/SelectionList/UserListItem.tsx
+++ b/src/components/SelectionList/UserListItem.tsx
@@ -8,7 +8,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {UserListItemProps} from './types';
 
-function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style, isFocused, isHovered, shouldUseOnySubscriptAvatar = true}: UserListItemProps) {
+function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style, isFocused, isHovered}: UserListItemProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const StyleUtils = useStyleUtils();
@@ -21,7 +21,7 @@ function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style
         <>
             {!!item.icons && (
                 <>
-                    {shouldUseOnySubscriptAvatar || item.shouldShowSubscript ? (
+                    {item.shouldShowSubscript ? (
                         <SubscriptAvatar
                             mainAvatar={item.icons[0]}
                             secondaryAvatar={item.icons[1]}
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index cbba278292b8..c2aabc7b5057 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -87,9 +87,6 @@ type UserListItemProps = CommonListItemProps<User> & {
 
     /** Is item hovered */
     isHovered?: boolean;
-
-    /** Whether this item should use only the subscript avatar */
-    shouldUseOnySubscriptAvatar?: boolean;
 };
 
 type RadioItem = {
@@ -124,7 +121,6 @@ type BaseListItemProps<TItem extends User | RadioItem> = CommonListItemProps<TIt
     item: TItem;
     shouldPreventDefaultFocusOnSelectRow?: boolean;
     keyForList?: string;
-    shouldUseOnySubscriptAvatar?: boolean;
 };
 
 type Section<TItem extends User | RadioItem> = {
@@ -249,9 +245,6 @@ type BaseSelectionListProps<TItem extends User | RadioItem> = Partial<ChildrenPr
 
     /** Fired when the list is displayed with the items */
     onLayout?: (event: LayoutChangeEvent) => void;
-
-    /** Whether this item should use only the subscript avatar */
-    shouldUseOnySubscriptAvatar?: boolean;
 };
 
 type ItemLayout = {
diff --git a/src/pages/SearchPage/index.js b/src/pages/SearchPage/index.js
index d9cae3ff8496..7c472296dfe1 100644
--- a/src/pages/SearchPage/index.js
+++ b/src/pages/SearchPage/index.js
@@ -164,7 +164,6 @@ function SearchPage({betas, reports, isSearchingForReports}) {
                             showLoadingPlaceholder={!didScreenTransitionEnd || !isOptionsDataReady}
                             footerContent={SearchPageFooterInstance}
                             isLoadingNewOptions={isSearchingForReports}
-                            shouldUseOnySubscriptAvatar={false}
                         />
                     </View>
                 </>