From 0daa3df4d31702a44105233ab57bd34cbb766f8d Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Wed, 4 Jun 2025 12:22:58 +0700
Subject: [PATCH 1/4] feat: add search bar to Workspace list page

---
 src/pages/workspace/WorkspacesListPage.tsx | 94 +++++++++++++---------
 1 file changed, 55 insertions(+), 39 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index e09a780f7ec0..b41ce3a50696 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/src/pages/workspace/WorkspacesListPage.tsx
@@ -21,6 +21,8 @@ import type {PopoverMenuItem} from '@components/PopoverMenu';
 import {PressableWithoutFeedback} from '@components/Pressable';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
+import SearchBar from '@components/SearchBar';
+import type {ListItem} from '@components/SelectionList/types';
 import SupportalActionRestrictedModal from '@components/SupportalActionRestrictedModal';
 import Text from '@components/Text';
 import useCardFeeds from '@hooks/useCardFeeds';
@@ -29,6 +31,7 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePayAndDowngrade from '@hooks/usePayAndDowngrade';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useSearchResults from '@hooks/useSearchResults';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isConnectionInProgress} from '@libs/actions/connections';
@@ -54,7 +57,8 @@ import type {PolicyDetailsForNonMembers} from '@src/types/onyx/Policy';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import WorkspacesListRow from './WorkspacesListRow';
 
-type WorkspaceItem = Required<Pick<MenuItemProps, 'title' | 'disabled'>> &
+type WorkspaceItem = ListItem &
+    Required<Pick<MenuItemProps, 'title' | 'disabled'>> &
     Pick<MenuItemProps, 'brickRoadIndicator' | 'iconFill' | 'fallbackIcon'> &
     Pick<OfflineWithFeedbackProps, 'errors' | 'pendingAction'> &
     Pick<PolicyType, 'role' | 'type' | 'ownerAccountID' | 'employeeList'> & {
@@ -316,42 +320,6 @@ function WorkspacesListPage() {
         ],
     );
 
-    const listHeaderComponent = useCallback(() => {
-        if (isLessThanMediumScreen) {
-            return <View style={styles.mt3} />;
-        }
-
-        return (
-            <View style={[styles.flexRow, styles.gap5, styles.pt2, styles.pb3, styles.pr5, styles.pl10, styles.appBG]}>
-                <View style={[styles.flexRow, styles.flex2]}>
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.flexGrow1, styles.textLabelSupporting]}
-                    >
-                        {translate('workspace.common.workspaceName')}
-                    </Text>
-                </View>
-                <View style={[styles.flexRow, styles.flex1, styles.workspaceOwnerSectionTitle, styles.workspaceOwnerSectionMinWidth]}>
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.flexGrow1, styles.textLabelSupporting]}
-                    >
-                        {translate('workspace.common.workspaceOwner')}
-                    </Text>
-                </View>
-                <View style={[styles.flexRow, styles.flex1, styles.workspaceTypeSectionTitle]}>
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.flexGrow1, styles.textLabelSupporting]}
-                    >
-                        {translate('workspace.common.workspaceType')}
-                    </Text>
-                </View>
-                <View style={[styles.workspaceRightColumn, styles.mr2]} />
-            </View>
-        );
-    }, [isLessThanMediumScreen, styles, translate]);
-
     const policyRooms = useMemo(() => {
         if (!reports || isEmptyObject(reports)) {
             return;
@@ -422,7 +390,7 @@ function WorkspacesListPage() {
                         fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
                         policyID: id,
                         role: CONST.POLICY.ROLE.USER,
-                        errors: null,
+                        errors: undefined,
                         action: () => null,
                         dismissError: () => null,
                         isJoinRequestPending: true,
@@ -458,6 +426,46 @@ function WorkspacesListPage() {
             .sort((a, b) => localeCompare(a.title, b.title));
     }, [reimbursementAccount?.errors, policies, isOffline, session?.email, allConnectionSyncProgresses, theme.textLight, policyRooms, navigateToWorkspace]);
 
+    const filterWorkspace = useCallback((workspace: WorkspaceItem, inputValue: string) => workspace.title.toLowerCase().includes(inputValue), []);
+    const sortWorkspace = useCallback((workspaceItems: WorkspaceItem[]) => workspaceItems, []);
+    const [inputValue, setInputValue, filteredWorkspaces] = useSearchResults(workspaces, filterWorkspace, sortWorkspace);
+
+    const listHeaderComponent = useCallback(() => {
+        if (isLessThanMediumScreen) {
+            return <View style={styles.mt3} />;
+        }
+
+        return (
+            <View style={[styles.flexRow, styles.gap5, styles.pt2, styles.pb3, styles.pr5, styles.pl10, styles.appBG]}>
+                <View style={[styles.flexRow, styles.flex2]}>
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.flexGrow1, styles.textLabelSupporting]}
+                    >
+                        {translate('workspace.common.workspaceName')}
+                    </Text>
+                </View>
+                <View style={[styles.flexRow, styles.flex1, styles.workspaceOwnerSectionTitle, styles.workspaceOwnerSectionMinWidth]}>
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.flexGrow1, styles.textLabelSupporting]}
+                    >
+                        {translate('workspace.common.workspaceOwner')}
+                    </Text>
+                </View>
+                <View style={[styles.flexRow, styles.flex1, styles.workspaceTypeSectionTitle]}>
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.flexGrow1, styles.textLabelSupporting]}
+                    >
+                        {translate('workspace.common.workspaceType')}
+                    </Text>
+                </View>
+                <View style={[styles.workspaceRightColumn, styles.mr2]} />
+            </View>
+        );
+    }, [isLessThanMediumScreen, styles, translate]);
+
     const getHeaderButton = () => (
         <Button
             accessibilityLabel={translate('workspace.new.newWorkspace')}
@@ -525,8 +533,16 @@ function WorkspacesListPage() {
             <View style={styles.flex1}>
                 <TopBar breadcrumbLabel={translate('common.workspaces')}>{!shouldUseNarrowLayout && <View style={[styles.pr2]}>{getHeaderButton()}</View>}</TopBar>
                 {shouldUseNarrowLayout && <View style={[styles.ph5]}>{getHeaderButton()}</View>}
+                {workspaces.length > CONST.SEARCH_ITEM_LIMIT - 15 && (
+                    <SearchBar
+                        label="Find workspace"
+                        inputValue={inputValue}
+                        onChangeText={setInputValue}
+                        shouldShowEmptyState={filteredWorkspaces.length === 0 && inputValue.length > 0}
+                    />
+                )}
                 <FlatList
-                    data={workspaces}
+                    data={filteredWorkspaces}
                     renderItem={getMenuItem}
                     ListHeaderComponent={listHeaderComponent}
                     stickyHeaderIndices={stickyHeaderIndices}

From b487ed1d81290ce1fbca9f136f3e2e8031a0c45c Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Wed, 4 Jun 2025 12:27:28 +0700
Subject: [PATCH 2/4] fix: hide header on empty search

---
 src/pages/workspace/WorkspacesListPage.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index b41ce3a50696..bd125097df5f 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/src/pages/workspace/WorkspacesListPage.tsx
@@ -435,6 +435,10 @@ function WorkspacesListPage() {
             return <View style={styles.mt3} />;
         }
 
+        if (filteredWorkspaces.length === 0) {
+            return null;
+        }
+
         return (
             <View style={[styles.flexRow, styles.gap5, styles.pt2, styles.pb3, styles.pr5, styles.pl10, styles.appBG]}>
                 <View style={[styles.flexRow, styles.flex2]}>
@@ -464,7 +468,7 @@ function WorkspacesListPage() {
                 <View style={[styles.workspaceRightColumn, styles.mr2]} />
             </View>
         );
-    }, [isLessThanMediumScreen, styles, translate]);
+    }, [isLessThanMediumScreen, styles, filteredWorkspaces, translate]);
 
     const getHeaderButton = () => (
         <Button

From 921a1bf869310f38e02553caca993bae4756c34e Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Thu, 5 Jun 2025 12:50:46 +0700
Subject: [PATCH 3/4] feat: apply suggestions

---
 src/pages/workspace/WorkspacesListPage.tsx | 90 ++++++++++------------
 1 file changed, 41 insertions(+), 49 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index 19d0ab6f1324..d87e20aa705a 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/src/pages/workspace/WorkspacesListPage.tsx
@@ -114,8 +114,6 @@ function dismissWorkspaceError(policyID: string, pendingAction: OnyxCommon.Pendi
     clearErrors(policyID);
 }
 
-const stickyHeaderIndices = [0];
-
 function WorkspacesListPage() {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -430,45 +428,48 @@ function WorkspacesListPage() {
     const sortWorkspace = useCallback((workspaceItems: WorkspaceItem[]) => workspaceItems, []);
     const [inputValue, setInputValue, filteredWorkspaces] = useSearchResults(workspaces, filterWorkspace, sortWorkspace);
 
-    const listHeaderComponent = useCallback(() => {
-        if (isLessThanMediumScreen) {
-            return <View style={styles.mt3} />;
-        }
-
-        if (filteredWorkspaces.length === 0) {
-            return null;
-        }
-
-        return (
-            <View style={[styles.flexRow, styles.gap5, styles.pt2, styles.pb3, styles.pr5, styles.pl10, styles.appBG]}>
-                <View style={[styles.flexRow, styles.flex2]}>
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.flexGrow1, styles.textLabelSupporting]}
-                    >
-                        {translate('workspace.common.workspaceName')}
-                    </Text>
-                </View>
-                <View style={[styles.flexRow, styles.flex1, styles.workspaceOwnerSectionTitle, styles.workspaceOwnerSectionMinWidth]}>
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.flexGrow1, styles.textLabelSupporting]}
-                    >
-                        {translate('workspace.common.workspaceOwner')}
-                    </Text>
-                </View>
-                <View style={[styles.flexRow, styles.flex1, styles.workspaceTypeSectionTitle]}>
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.flexGrow1, styles.textLabelSupporting]}
-                    >
-                        {translate('workspace.common.workspaceType')}
-                    </Text>
+    const listHeaderComponent = (
+        <>
+            {isLessThanMediumScreen && <View style={styles.mt3} />}
+            {workspaces.length > CONST.SEARCH_ITEM_LIMIT && (
+                <SearchBar
+                    label="Find workspace"
+                    inputValue={inputValue}
+                    onChangeText={setInputValue}
+                    shouldShowEmptyState={filteredWorkspaces.length === 0 && inputValue.length > 0}
+                />
+            )}
+            {!isLessThanMediumScreen && filteredWorkspaces.length > 0 && (
+                <View style={[styles.flexRow, styles.gap5, styles.pt2, styles.pb3, styles.pr5, styles.pl10, styles.appBG]}>
+                    <View style={[styles.flexRow, styles.flex2]}>
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.flexGrow1, styles.textLabelSupporting]}
+                        >
+                            {translate('workspace.common.workspaceName')}
+                        </Text>
+                    </View>
+                    <View style={[styles.flexRow, styles.flex1, styles.workspaceOwnerSectionTitle, styles.workspaceOwnerSectionMinWidth]}>
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.flexGrow1, styles.textLabelSupporting]}
+                        >
+                            {translate('workspace.common.workspaceOwner')}
+                        </Text>
+                    </View>
+                    <View style={[styles.flexRow, styles.flex1, styles.workspaceTypeSectionTitle]}>
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.flexGrow1, styles.textLabelSupporting]}
+                        >
+                            {translate('workspace.common.workspaceType')}
+                        </Text>
+                    </View>
+                    <View style={[styles.workspaceRightColumn, styles.mr2]} />
                 </View>
-                <View style={[styles.workspaceRightColumn, styles.mr2]} />
-            </View>
-        );
-    }, [isLessThanMediumScreen, styles, filteredWorkspaces, translate]);
+            )}
+        </>
+    );
 
     const getHeaderButton = () => (
         <Button
@@ -537,19 +538,10 @@ function WorkspacesListPage() {
             <View style={styles.flex1}>
                 <TopBar breadcrumbLabel={translate('common.workspaces')}>{!shouldUseNarrowLayout && <View style={[styles.pr2]}>{getHeaderButton()}</View>}</TopBar>
                 {shouldUseNarrowLayout && <View style={[styles.ph5, styles.pt2]}>{getHeaderButton()}</View>}
-                {workspaces.length > CONST.SEARCH_ITEM_LIMIT - 15 && (
-                    <SearchBar
-                        label="Find workspace"
-                        inputValue={inputValue}
-                        onChangeText={setInputValue}
-                        shouldShowEmptyState={filteredWorkspaces.length === 0 && inputValue.length > 0}
-                    />
-                )}
                 <FlatList
                     data={filteredWorkspaces}
                     renderItem={getMenuItem}
                     ListHeaderComponent={listHeaderComponent}
-                    stickyHeaderIndices={stickyHeaderIndices}
                 />
             </View>
             <ConfirmModal

From d591cf9e59252445d4caf8f9685e6cd8a5e8c66e Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Thu, 5 Jun 2025 12:52:58 +0700
Subject: [PATCH 4/4] fix: sort function

---
 src/pages/workspace/WorkspacesListPage.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index d87e20aa705a..d626db93d1f8 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/src/pages/workspace/WorkspacesListPage.tsx
@@ -420,12 +420,11 @@ function WorkspacesListPage() {
                     type: policy.type,
                     employeeList: policy.employeeList,
                 };
-            })
-            .sort((a, b) => localeCompare(a.title, b.title));
+            });
     }, [reimbursementAccount?.errors, policies, isOffline, session?.email, allConnectionSyncProgresses, theme.textLight, policyRooms, navigateToWorkspace]);
 
     const filterWorkspace = useCallback((workspace: WorkspaceItem, inputValue: string) => workspace.title.toLowerCase().includes(inputValue), []);
-    const sortWorkspace = useCallback((workspaceItems: WorkspaceItem[]) => workspaceItems, []);
+    const sortWorkspace = useCallback((workspaceItems: WorkspaceItem[]) => workspaceItems.sort((a, b) => localeCompare(a.title, b.title)), []);
     const [inputValue, setInputValue, filteredWorkspaces] = useSearchResults(workspaces, filterWorkspace, sortWorkspace);
 
     const listHeaderComponent = (