feat: Show the Workspace name beside the room name in Search results

src/components/Search/SearchAutocompleteList.tsx

@@ -50,6 +50,7 @@ import type {SearchQueryItem, SearchQueryListItemProps} from './SearchList/ListI
 import type {SubstitutionMap} from './SearchRouter/getQueryWithSubstitutions';
 import type {UserFriendlyKey} from './types';
 
+import AvatarWithTextCell from './SearchList/ListItem/AvatarWithTextCell';
 import SearchQueryListItem, {isSearchQueryItem} from './SearchList/ListItem/SearchQueryListItem';
 import {getSubstitutionMapKey} from './SearchRouter/getQueryWithSubstitutions';
 
@@ -589,7 +590,7 @@ function SearchAutocompleteList({
         }
 
         if (autocompleteSuggestions.length > 0) {
-            const autocompleteData: AutocompleteListItem[] = autocompleteSuggestions.map(({filterKey, text, autocompleteID, mapKey}) => {
+            const autocompleteData: AutocompleteListItem[] = autocompleteSuggestions.map(({filterKey, text, autocompleteID, mapKey, workspaceIcon}) => {
                 return {
                     text: getAutocompleteDisplayText(filterKey, text),
                     mapKey: mapKey ? getSubstitutionMapKey(mapKey, text) : undefined,
@@ -598,6 +599,15 @@ function SearchAutocompleteList({
                     autocompleteID,
                     keyForList: autocompleteID ?? text, // in case we have a unique identifier then use it because text might not be unique
                     searchItemType: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.AUTOCOMPLETE_SUGGESTION,
+                    // For report-backed `in:` suggestions, show the owning workspace on the right of the row so identically
+                    // named rooms (e.g. #admins) in different workspaces can be told apart.
+                    rightElement: workspaceIcon ? (
+                        <AvatarWithTextCell
+                            reportName={workspaceIcon.name}
+                            icon={workspaceIcon}
+                            textStyle={styles.textLabelSupporting}
+                        />
+                    ) : undefined,
                 };
             });
 

src/components/Search/SearchList/ListItem/AvatarWithTextCell.tsx

@@ -6,16 +6,19 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
 
+import type {StyleProp, TextStyle} from 'react-native';
+
 import React from 'react';
 import {View} from 'react-native';
 
 type AvatarWithTextCellProps = {
     reportName?: string;
     icon?: Icon;
     isLargeScreenWidth?: boolean;
+    textStyle?: StyleProp<TextStyle>;
 };
 
-function AvatarWithTextCell({reportName, icon, isLargeScreenWidth}: AvatarWithTextCellProps) {
+function AvatarWithTextCell({reportName, icon, isLargeScreenWidth, textStyle}: AvatarWithTextCellProps) {
     const styles = useThemeStyles();
 
     if (!reportName || !icon) {
@@ -39,7 +42,7 @@ function AvatarWithTextCell({reportName, icon, isLargeScreenWidth}: AvatarWithTe
             {!!reportName && (
                 <Text
                     numberOfLines={1}
-                    style={[isLargeScreenWidth ? styles.themeTextColor : styles.textMicroBold, styles.flexShrink1]}
+                    style={[textStyle ?? (isLargeScreenWidth ? styles.themeTextColor : styles.textMicroBold), styles.flexShrink1]}
                 >
                     {reportName}
                 </Text>

src/components/Search/SearchList/ListItem/SearchQueryListItem.tsx

@@ -96,6 +96,7 @@ function SearchQueryListItem({item, isFocused, showTooltip, onSelectRow, onFocus
                         />
                     )}
                 </View>
+                {!!item.rightElement && <View style={[styles.ml2, styles.flexShrink1, styles.mw50]}>{item.rightElement}</View>}
             </>
         </BaseListItem>
     );

src/hooks/useAutocompleteSuggestions.ts

@@ -25,6 +25,7 @@ import CONST, {CONTINUATION_DETECTION_SEARCH_FILTER_KEYS} from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Beta, CardFeeds, CardList, PersonalDetailsList, Policy} from '@src/types/onyx';
 import type {VisibleReportActionsDerivedValue} from '@src/types/onyx/DerivedValues';
+import type {Icon} from '@src/types/onyx/OnyxCommon';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
@@ -45,6 +46,8 @@ type AutocompleteItemData = {
     text: string;
     autocompleteID?: string;
     mapKey?: SearchFilterKey;
+    /** Workspace avatar/name that owns the report. Only set for report-backed `in:` suggestions so the row can show which workspace the room belongs to. */
+    workspaceIcon?: Icon;
 };
 
 type UseAutocompleteSuggestionsParams = {
@@ -304,12 +307,19 @@ function useAutocompleteSuggestions({
                 return !alreadyAutocompletedKeys.has(chat.text.toLowerCase());
             });
 
-            return filteredReports.map((chat) => ({
-                filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.IN,
-                text: chat.text ?? '',
-                autocompleteID: chat.reportID,
-                mapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.IN,
-            }));
+            return filteredReports.map((chat) => {
+                // For reports owned by a workspace (rooms, policy expense chats, etc.) the first icon is the workspace
+                // avatar. We surface it on the row so identically named rooms (e.g. #admins) in different workspaces can
+                // be told apart. DMs/groups have an avatar-type first icon, so they naturally get no workspace icon.
+                const firstIcon = chat.icons?.at(0);
+                return {
+                    filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.IN,
+                    text: chat.text ?? '',
+                    autocompleteID: chat.reportID,
+                    mapKey: CONST.SEARCH.SYNTAX_FILTER_KEYS.IN,
+                    workspaceIcon: firstIcon?.type === CONST.ICON_TYPE_WORKSPACE ? firstIcon : undefined,
+                };
+            });
         }
         case CONST.SEARCH.SYNTAX_ROOT_KEYS.TYPE: {
             const filteredTypes = DATA_TYPE_VALUES.filter((type) => type.toLowerCase().includes(autocompleteValue.toLowerCase()) && !alreadyAutocompletedKeys.has(type.toLowerCase())).sort();