From 2bb4c56fab31826d9b55f4aa623695340f9b7403 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Tue, 5 Dec 2023 11:17:18 -0800
Subject: [PATCH] Mobile payees and rules pages

---
 .../src/components/FinancesApp.tsx            |  2 ++
 .../src/components/ManageRules.tsx            | 12 ++++++++--
 .../src/components/ManageRulesPage.tsx        | 14 +++++++++++-
 .../src/components/common/Search.tsx          | 11 ++++++----
 .../src/components/mobile/MobileNavTabs.tsx   |  8 +++----
 .../src/components/payees/ManagePayees.js     | 22 ++++++++++++-------
 .../src/components/payees/ManagePayeesPage.js | 13 ++++++++++-
 .../src/components/schedules/LinkSchedule.tsx |  4 +++-
 8 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx
index 58792c219c6..11ab135bec5 100644
--- a/packages/desktop-client/src/components/FinancesApp.tsx
+++ b/packages/desktop-client/src/components/FinancesApp.tsx
@@ -241,6 +241,8 @@ function FinancesApp() {
               <Route path="/budget" element={<MobileNavTabs />} />
               <Route path="/accounts" element={<MobileNavTabs />} />
               <Route path="/settings" element={<MobileNavTabs />} />
+              <Route path="/payees" element={<MobileNavTabs />} />
+              <Route path="/rules" element={<MobileNavTabs />} />
               <Route path="*" element={null} />
             </Routes>
           </View>
diff --git a/packages/desktop-client/src/components/ManageRules.tsx b/packages/desktop-client/src/components/ManageRules.tsx
index 1d6ea7d0a76..d5dcc0102fd 100644
--- a/packages/desktop-client/src/components/ManageRules.tsx
+++ b/packages/desktop-client/src/components/ManageRules.tsx
@@ -18,6 +18,7 @@ import { type RuleEntity } from 'loot-core/src/types/models';
 
 import useCategories from '../hooks/useCategories';
 import useSelected, { SelectedProvider } from '../hooks/useSelected';
+import { useResponsive } from '../ResponsiveProvider';
 import { theme } from '../style';
 
 import Button from './common/Button';
@@ -253,6 +254,8 @@ function ManageRulesContent({
     setHoveredRule(id);
   }, []);
 
+  const { isNarrowWidth } = useResponsive();
+
   if (rules === null) {
     return null;
   }
@@ -266,6 +269,8 @@ function ManageRulesContent({
             alignItems: 'center',
             padding: isModal ? '0 13px 15px' : '0 0 15px',
             flexShrink: 0,
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
           }}
         >
           <View
@@ -273,7 +278,7 @@ function ManageRulesContent({
               color: theme.pageTextLight,
               flexDirection: 'row',
               alignItems: 'center',
-              width: '50%',
+              justifySelf: 'flex-start',
             }}
           >
             <Text>
@@ -286,11 +291,14 @@ function ManageRulesContent({
               </ExternalLink>
             </Text>
           </View>
-          <View style={{ flex: 1 }} />
           <Search
             placeholder="Filter rules..."
             value={filter}
             onChange={setFilter}
+            style={{
+              justifySelf: 'flex-end',
+              ...(isNarrowWidth && { flexBasis: '100%', marginTop: 10 }),
+            }}
           />
         </View>
         <View style={{ flex: 1 }}>
diff --git a/packages/desktop-client/src/components/ManageRulesPage.tsx b/packages/desktop-client/src/components/ManageRulesPage.tsx
index e64f57e8788..d1c8c5800e8 100644
--- a/packages/desktop-client/src/components/ManageRulesPage.tsx
+++ b/packages/desktop-client/src/components/ManageRulesPage.tsx
@@ -1,11 +1,23 @@
 import React from 'react';
 
+import { useResponsive } from '../ResponsiveProvider';
+import { theme } from '../style';
+
 import ManageRules from './ManageRules';
 import { Page } from './Page';
 
 export function ManageRulesPage() {
+  const { isNarrowWidth } = useResponsive();
   return (
-    <Page title="Rules">
+    <Page
+      title="Rules"
+      titleStyle={{
+        ...(isNarrowWidth && {
+          backgroundColor: theme.mobileHeaderBackground,
+          color: theme.mobileHeaderText,
+        }),
+      }}
+    >
       <ManageRules isModal={false} payeeId={null} />
     </Page>
   );
diff --git a/packages/desktop-client/src/components/common/Search.tsx b/packages/desktop-client/src/components/common/Search.tsx
index 9281d75d57d..3574f2f66ce 100644
--- a/packages/desktop-client/src/components/common/Search.tsx
+++ b/packages/desktop-client/src/components/common/Search.tsx
@@ -2,7 +2,7 @@ import { type ChangeEvent, type Ref } from 'react';
 
 import SvgRemove from '../../icons/v2/Remove';
 import SearchAlternate from '../../icons/v2/SearchAlternate';
-import { theme } from '../../style';
+import { type CSSProperties, theme } from '../../style';
 
 import Button from './Button';
 import InputWithContent from './InputWithContent';
@@ -13,25 +13,28 @@ type SearchProps = {
   onChange: (value: string) => unknown;
   placeholder: string;
   isInModal?: boolean;
-  width?: number;
+  style?: CSSProperties;
 };
 
+const DEFAULT_WIDTH = 250;
+
 export default function Search({
   inputRef,
   value,
   onChange,
   placeholder,
   isInModal = false,
-  width = 250,
+  style,
 }: SearchProps) {
   return (
     <InputWithContent
       inputRef={inputRef}
       style={{
-        width,
+        width: style?.width || DEFAULT_WIDTH,
         flex: '',
         borderColor: isInModal ? null : 'transparent',
         backgroundColor: isInModal ? null : theme.formInputBackground,
+        ...style,
       }}
       focusStyle={
         isInModal
diff --git a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
index aa7a68792ed..2ece889daac 100644
--- a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
+++ b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
@@ -56,14 +56,14 @@ export default function MobileNavTabs() {
       Icon: Calendar,
     },
     {
-      name: 'Payees (Soon)',
-      path: '/payees/soon',
+      name: 'Payees',
+      path: '/payees',
       style: navTabStyle,
       Icon: StoreFront,
     },
     {
-      name: 'Rules (Soon)',
-      path: '/rules/soon',
+      name: 'Rules',
+      path: '/rules',
       style: navTabStyle,
       Icon: Tuning,
     },
diff --git a/packages/desktop-client/src/components/payees/ManagePayees.js b/packages/desktop-client/src/components/payees/ManagePayees.js
index 0f8f968555b..b49ce389e45 100644
--- a/packages/desktop-client/src/components/payees/ManagePayees.js
+++ b/packages/desktop-client/src/components/payees/ManagePayees.js
@@ -20,6 +20,7 @@ import useSelected, {
 } from '../../hooks/useSelected';
 import useStableCallback from '../../hooks/useStableCallback';
 import ExpandArrow from '../../icons/v0/ExpandArrow';
+import { useResponsive } from '../../ResponsiveProvider';
 import { theme } from '../../style';
 import Button from '../common/Button';
 import Search from '../common/Search';
@@ -220,6 +221,7 @@ export const ManagePayees = forwardRef(
     let payeesById = getPayeesById(payees);
 
     let [menuOpen, setMenuOpen] = useState(false);
+    const { isNarrowWidth } = useResponsive();
 
     return (
       <View style={{ height: '100%' }}>
@@ -228,9 +230,16 @@ export const ManagePayees = forwardRef(
             flexDirection: 'row',
             alignItems: 'center',
             padding: '0 0 15px',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap-reverse',
           }}
         >
-          <View style={{ flexShrink: 0 }}>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifySelf: 'flex-start',
+            }}
+          >
             <Button
               type="bare"
               style={{ marginRight: 10 }}
@@ -253,12 +262,6 @@ export const ManagePayees = forwardRef(
                 onMerge={onMerge}
               />
             )}
-          </View>
-          <View
-            style={{
-              flexShrink: 0,
-            }}
-          >
             {(orphanedOnly ||
               (orphanedPayees && orphanedPayees.length > 0)) && (
               <Button
@@ -280,12 +283,15 @@ export const ManagePayees = forwardRef(
               </Button>
             )}
           </View>
-          <View style={{ flex: 1 }} />
           <Search
             id="filter-input"
             placeholder="Filter payees..."
             value={filter}
             onChange={applyFilter}
+            style={{
+              justifySelf: 'flex-end',
+              ...(isNarrowWidth && { flexBasis: '100%', marginBottom: 10 }),
+            }}
           />
         </View>
 
diff --git a/packages/desktop-client/src/components/payees/ManagePayeesPage.js b/packages/desktop-client/src/components/payees/ManagePayeesPage.js
index 2d707f39131..746807f36de 100644
--- a/packages/desktop-client/src/components/payees/ManagePayeesPage.js
+++ b/packages/desktop-client/src/components/payees/ManagePayeesPage.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
 
+import { useResponsive } from '../../ResponsiveProvider';
+import { theme } from '../../style';
 import { Page } from '../Page';
 
 import ManagePayeesWithData from './ManagePayeesWithData';
 
 export function ManagePayeesPage() {
   let location = useLocation();
+  const { isNarrowWidth } = useResponsive();
   return (
-    <Page title="Payees">
+    <Page
+      title="Payees"
+      titleStyle={{
+        ...(isNarrowWidth && {
+          backgroundColor: theme.mobileHeaderBackground,
+          color: theme.mobileHeaderText,
+        }),
+      }}
+    >
       <ManagePayeesWithData
         initialSelectedIds={
           location.state && location.state.selectedPayee
diff --git a/packages/desktop-client/src/components/schedules/LinkSchedule.tsx b/packages/desktop-client/src/components/schedules/LinkSchedule.tsx
index 2a9554ab768..4245c871773 100644
--- a/packages/desktop-client/src/components/schedules/LinkSchedule.tsx
+++ b/packages/desktop-client/src/components/schedules/LinkSchedule.tsx
@@ -64,7 +64,9 @@ export default function ScheduleLink({
         <Search
           inputRef={searchInput}
           isInModal
-          width={300}
+          style={{
+            width: 300,
+          }}
           placeholder="Filter schedules…"
           value={filter}
           onChange={setFilter}