Add canned searches

src/CONST.ts

@@ -3476,6 +3476,9 @@ const CONST = {
     },
     TAB_SEARCH: {
         ALL: 'all',
+        SHARED: 'shared',
+        DRAFTS: 'drafts',
+        FINISHED: 'finished',
     },
     STATUS_TEXT_MAX_LENGTH: 100,
 

src/components/Icon/Expensicons.ts

@@ -35,6 +35,7 @@ import ChatBubbleReply from '@assets/images/chatbubble-reply.svg';
 import ChatBubbleUnread from '@assets/images/chatbubble-unread.svg';
 import ChatBubble from '@assets/images/chatbubble.svg';
 import ChatBubbles from '@assets/images/chatbubbles.svg';
+import CheckCircle from '@assets/images/check-circle.svg';
 import Checkmark from '@assets/images/checkmark.svg';
 import Close from '@assets/images/close.svg';
 import ClosedSign from '@assets/images/closed-sign.svg';
@@ -340,4 +341,5 @@ export {
     Lightbulb,
     DocumentPlus,
     Clear,
+    CheckCircle,
 };

src/components/Icon/Illustrations.ts

@@ -40,6 +40,7 @@ import Binoculars from '@assets/images/simple-illustrations/simple-illustration_
 import CarIce from '@assets/images/simple-illustrations/simple-illustration__car-ice.svg';
 import Car from '@assets/images/simple-illustrations/simple-illustration__car.svg';
 import ChatBubbles from '@assets/images/simple-illustrations/simple-illustration__chatbubbles.svg';
+import CheckmarkCircle from '@assets/images/simple-illustrations/simple-illustration__checkmarkcircle.svg';
 import CoffeeMug from '@assets/images/simple-illustrations/simple-illustration__coffeemug.svg';
 import Coins from '@assets/images/simple-illustrations/simple-illustration__coins.svg';
 import CommentBubbles from '@assets/images/simple-illustrations/simple-illustration__commentbubbles.svg';
@@ -75,6 +76,7 @@ import ReceiptEnvelope from '@assets/images/simple-illustrations/simple-illustra
 import ReceiptWrangler from '@assets/images/simple-illustrations/simple-illustration__receipt-wrangler.svg';
 import ReceiptUpload from '@assets/images/simple-illustrations/simple-illustration__receiptupload.svg';
 import SanFrancisco from '@assets/images/simple-illustrations/simple-illustration__sanfrancisco.svg';
+import SendMoney from '@assets/images/simple-illustrations/simple-illustration__sendmoney.svg';
 import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg';
 import SmallRocket from '@assets/images/simple-illustrations/simple-illustration__smallrocket.svg';
 import SplitBill from '@assets/images/simple-illustrations/simple-illustration__splitbill.svg';
@@ -176,4 +178,6 @@ export {
     Tag,
     CarIce,
     Lightbulb,
+    SendMoney,
+    CheckmarkCircle,
 };

src/languages/en.ts

@@ -334,6 +334,9 @@ export default {
         action: 'Action',
         expenses: 'Expenses',
         tax: 'Tax',
+        shared: 'Shared',
+        drafts: 'Drafts',
+        finished: 'Finished',
     },
     location: {
         useCurrent: 'Use current location',

src/languages/es.ts

@@ -324,6 +324,9 @@ export default {
         action: 'Acción',
         expenses: 'Gastos',
         tax: 'Impuesto',
+        shared: 'Compartido',
+        drafts: 'Borradores',
+        finished: 'Finalizado',
     },
     connectionComplete: {
         title: 'Conexión Completa',

src/pages/Search/SearchFilters.tsx

@@ -12,6 +12,7 @@ import CONST from '@src/CONST';
 import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
 import type IconAsset from '@src/types/utils/IconAsset';
+import SearchFiltersNarrow from './SearchFiltersNarrow';
 
 type SearchFiltersProps = {
     query: string;
@@ -37,13 +38,34 @@ function SearchFilters({query}: SearchFiltersProps) {
             icon: Expensicons.Receipt,
             route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL),
         },
+        {
+            title: translate('common.shared'),
+            query: CONST.TAB_SEARCH.SHARED,
+            icon: Expensicons.Send,
+            route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.SHARED),
+        },
+        {
+            title: translate('common.drafts'),
+            query: CONST.TAB_SEARCH.DRAFTS,
+            icon: Expensicons.Pencil,
+            route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.DRAFTS),
+        },
+        {
+            title: translate('common.finished'),
+            query: CONST.TAB_SEARCH.FINISHED,
+            icon: Expensicons.CheckCircle,
+            route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.FINISHED),
+        },
     ];
     const activeItemIndex = filterItems.findIndex((item) => item.query === query);
 
-    // We're not showing the filters on mobile yet since there's only one search option.
-    // We'll introduce the filters as part of https://github.com/Expensify/App/issues/39878
     if (isSmallScreenWidth) {
-        return;
+        return (
+            <SearchFiltersNarrow
+                filterItems={filterItems}
+                activeItemIndex={activeItemIndex}
+            />
+        );
     }
 
     return (
@@ -58,8 +80,8 @@ function SearchFilters({query}: SearchFiltersProps) {
                         interactive
                         title={item.title}
                         icon={item.icon}
-                        iconWidth={variables.iconSizeLarge}
-                        iconHeight={variables.iconSizeLarge}
+                        iconWidth={variables.iconSizeNormal}
+                        iconHeight={variables.iconSizeNormal}
                         wrapperStyle={styles.sectionMenuItem}
                         focused={index === activeItemIndex}
                         hoverAndPressStyle={styles.hoveredComponentBG}

src/pages/Search/SearchPage.tsx

@@ -28,6 +28,9 @@ function SearchPage({route}: SearchPageProps) {
 
     const headerContent: {[key in SearchQuery]: {icon: IconAsset; title: string}} = {
         all: {icon: Illustrations.MoneyReceipts, title: translate('common.expenses')},
+        shared: {icon: Illustrations.SendMoney, title: translate('common.shared')},
+        drafts: {icon: Illustrations.Pencil, title: translate('common.drafts')},
+        finished: {icon: Illustrations.CheckmarkCircle, title: translate('common.finished')},
     };
 
     const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL));