[Search v2] [App] Create search results page

src/components/Header.tsx

@@ -21,9 +21,12 @@ type HeaderProps = {
 
     /** Additional header container styles */
     containerStyles?: StyleProp<ViewStyle>;
+
+    /** Whether the subtitle should be displayed above the title */
+    showSubtitleAboveTitle?: boolean;
 };
 
-function Header({title = '', subtitle = '', textStyles = [], containerStyles = [], shouldShowEnvironmentBadge = false}: HeaderProps) {
+function Header({title = '', subtitle = '', textStyles = [], containerStyles = [], shouldShowEnvironmentBadge = false, showSubtitleAboveTitle = false}: HeaderProps) {
     const styles = useThemeStyles();
     const renderedSubtitle = useMemo(
         () => (
@@ -46,6 +49,7 @@ function Header({title = '', subtitle = '', textStyles = [], containerStyles = [
     return (
         <View style={[styles.flex1, styles.flexRow, containerStyles]}>
             <View style={styles.mw100}>
+                {showSubtitleAboveTitle && renderedSubtitle}
                 {typeof title === 'string'
                     ? !!title && (
                           <Text
@@ -56,7 +60,7 @@ function Header({title = '', subtitle = '', textStyles = [], containerStyles = [
                           </Text>
                       )
                     : title}
-                {renderedSubtitle}
+                {!showSubtitleAboveTitle && renderedSubtitle}
             </View>
             {shouldShowEnvironmentBadge && <EnvironmentBadge />}
         </View>

src/components/HeaderWithBackButton/index.tsx

@@ -60,6 +60,8 @@ function HeaderWithBackButton({
     shouldNavigateToTopMostReport = false,
     progressBarPercentage,
     style,
+    showSubtitleAboveTitle = false,
+    shouldUseBaseFontWithIcon = false,
 }: HeaderWithBackButtonProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -102,7 +104,8 @@ function HeaderWithBackButton({
             <Header
                 title={title}
                 subtitle={stepCounter ? translate('stepCounter', stepCounter) : subtitle}
-                textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, isCentralPaneSettings && styles.textHeadlineH2]}
+                textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, isCentralPaneSettings && !shouldUseBaseFontWithIcon && styles.textHeadlineH2]}
+                showSubtitleAboveTitle={showSubtitleAboveTitle}
             />
         );
     }, [
@@ -123,6 +126,8 @@ function HeaderWithBackButton({
         title,
         titleColor,
         translate,
+        showSubtitleAboveTitle,
+        shouldUseBaseFontWithIcon,
     ]);
 
     return (

src/components/HeaderWithBackButton/types.ts

@@ -130,6 +130,12 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
 
     /** Additional styles to add to the component */
     style?: StyleProp<ViewStyle>;
+
+    /** Whether the subtitle should be displayed above the title */
+    showSubtitleAboveTitle?: boolean;
+
+    /** Whether the title should have the base font with the displayed icon */
+    shouldUseBaseFontWithIcon?: boolean;
 };
 
 export type {ThreeDotsMenuItem};

src/components/Icon/Expensicons.ts

@@ -82,6 +82,7 @@ import ExpensifyLogoNew from '@assets/images/expensify-logo-new.svg';
 import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg';
 import EyeDisabled from '@assets/images/eye-disabled.svg';
 import Eye from '@assets/images/eye.svg';
+import Filters from '@assets/images/filters.svg';
 import Flag from '@assets/images/flag.svg';
 import FlagLevelOne from '@assets/images/flag_level_01.svg';
 import FlagLevelTwo from '@assets/images/flag_level_02.svg';
@@ -373,5 +374,6 @@ export {
     CheckCircle,
     CheckmarkCircle,
     NetSuiteSquare,
+    Filters,
     CalendarSolid,
 };

src/components/Icon/Illustrations.ts

@@ -56,6 +56,7 @@ import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustrat
 import CreditCardEyes from '@assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg';
 import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
 import EmptyState from '@assets/images/simple-illustrations/simple-illustration__empty-state.svg';
+import Filters from '@assets/images/simple-illustrations/simple-illustration__filters.svg';
 import FolderOpen from '@assets/images/simple-illustrations/simple-illustration__folder-open.svg';
 import Gears from '@assets/images/simple-illustrations/simple-illustration__gears.svg';
 import HandCard from '@assets/images/simple-illustrations/simple-illustration__handcard.svg';
@@ -210,4 +211,5 @@ export {
     FolderWithPapers,
     VirtualCard,
     Tire,
+    Filters,
 };

src/components/Search/SearchListWithHeader.tsx

@@ -14,15 +14,16 @@ import * as SearchUtils from '@libs/SearchUtils';
 import CONST from '@src/CONST';
 import type {SearchDataTypes, SearchReport} from '@src/types/onyx/SearchResults';
 import SearchPageHeader from './SearchPageHeader';
-import type {SearchStatus, SelectedTransactionInfo, SelectedTransactions} from './types';
+import type {SearchQueryJSON, SelectedTransactionInfo, SelectedTransactions} from './types';
 
 type SearchListWithHeaderProps = Omit<BaseSelectionListProps<ReportListItemType | TransactionListItemType>, 'onSelectAll' | 'onCheckboxPress' | 'sections'> & {
-    status: SearchStatus;
+    queryJSON: SearchQueryJSON;
     hash: number;
     data: TransactionListItemType[] | ReportListItemType[];
     searchType: SearchDataTypes;
     isMobileSelectionModeActive?: boolean;
     setIsMobileSelectionModeActive?: (isMobileSelectionModeActive: boolean) => void;
+    isSearchResultsMode?: boolean;
 };
 
 function mapTransactionItemToSelectedEntry(item: TransactionListItemType): [string, SelectedTransactionInfo] {
@@ -44,7 +45,7 @@ function mapToItemWithSelectionInfo(item: TransactionListItemType | ReportListIt
 }
 
 function SearchListWithHeader(
-    {ListItem, onSelectRow, status, hash, data, searchType, isMobileSelectionModeActive, setIsMobileSelectionModeActive, ...props}: SearchListWithHeaderProps,
+    {ListItem, onSelectRow, queryJSON, hash, data, searchType, isMobileSelectionModeActive, setIsMobileSelectionModeActive, isSearchResultsMode = false, ...props}: SearchListWithHeaderProps,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -188,11 +189,12 @@ function SearchListWithHeader(
             <SearchPageHeader
                 selectedTransactions={selectedTransactions}
                 clearSelectedItems={clearSelectedItems}
-                status={status}
+                queryJSON={queryJSON}
                 hash={hash}
                 onSelectDeleteOption={handleOnSelectDeleteOption}
                 isMobileSelectionModeActive={isMobileSelectionModeActive}
                 setIsMobileSelectionModeActive={setIsMobileSelectionModeActive}
+                isSearchResultsMode={isSearchResultsMode}
                 selectedReports={selectedReports}
                 setOfflineModalOpen={() => setOfflineModalVisible(true)}
                 setDownloadErrorModalOpen={() => setDownloadErrorModalVisible(true)}