Mobile payees and rules pages

packages/desktop-client/src/components/FinancesApp.tsx

@@ -247,6 +247,8 @@ function FinancesAppWithoutContext() {
               <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>

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';
@@ -241,6 +242,8 @@ function ManageRulesContent({
     setHoveredRule(id);
   }, []);
 
+  const { isNarrowWidth } = useResponsive();
+
   return (
     <SelectedProvider instance={selectedInst}>
       <View>
@@ -250,14 +253,16 @@ function ManageRulesContent({
             alignItems: 'center',
             padding: isModal ? '0 13px 15px' : '0 0 15px',
             flexShrink: 0,
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
           }}
         >
           <View
             style={{
               color: theme.pageTextLight,
               flexDirection: 'row',
               alignItems: 'center',
-              width: '50%',
+              justifySelf: 'flex-start',
             }}
           >
             <Text>
@@ -270,11 +275,14 @@ function ManageRulesContent({
               </ExternalLink>
             </Text>
           </View>
-          <View style={{ flex: 1 }} />
           <Search
             placeholder="Filter rules..."
             value={filter}
             onChange={onSearchChange}
+            style={{
+              justifySelf: 'flex-end',
+              ...(isNarrowWidth && { flexBasis: '100%', marginTop: 10 }),
+            }}
           />
         </View>
         <View style={{ flex: 1 }}>

packages/desktop-client/src/components/common/Search.tsx

@@ -1,7 +1,7 @@
 import { type ChangeEvent, type Ref } from 'react';
 
 import { SvgRemove, SvgSearchAlternate } from '../../icons/v2';
-import { theme } from '../../style';
+import { type CSSProperties, theme } from '../../style';
 
 import { Button } from './Button';
 import { InputWithContent } from './InputWithContent';
@@ -12,25 +12,28 @@ type SearchProps = {
   onChange: (value: string) => unknown;
   placeholder: string;
   isInModal?: boolean;
-  width?: number;
+  style?: CSSProperties;
 };
 
+const DEFAULT_WIDTH = 250;
+
 export 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

packages/desktop-client/src/components/mobile/MobileNavTabs.tsx

@@ -58,14 +58,14 @@ export function MobileNavTabs() {
       Icon: SvgCalendar,
     },
     {
-      name: 'Payees (Soon)',
-      path: '/payees/soon',
+      name: 'Payees',
+      path: '/payees',
       style: navTabStyle,
       Icon: SvgStoreFront,
     },
     {
-      name: 'Rules (Soon)',
-      path: '/rules/soon',
+      name: 'Rules',
+      path: '/rules',
       style: navTabStyle,
       Icon: SvgTuning,
     },

packages/desktop-client/src/components/modals/EditRule.jsx

@@ -272,7 +272,7 @@ function ScheduleDescription({ id }) {
 
   return (
     <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
-      <View style={{ marginRight: 15, flexDirection: 'row' }}>
+      <View style={{ marginRight: 15, flexWrap: 'wrap', flexDirection: 'row' }}>
         <Text
           style={{
             whiteSpace: 'nowrap',
@@ -288,13 +288,9 @@ function ScheduleDescription({ id }) {
           />
         </Text>
         <Text style={{ margin: '0 5px' }}> — </Text>
-        <Text style={{ flexShrink: 0 }}>
-          Amount: {formatAmount(schedule._amount)}
-        </Text>
+        <Text>Amount: {formatAmount(schedule._amount)}</Text>
         <Text style={{ margin: '0 5px' }}> — </Text>
-        <Text style={{ flexShrink: 0 }}>
-          Next: {monthUtils.format(schedule.next_date, dateFormat)}
-        </Text>
+        <Text>Next: {monthUtils.format(schedule.next_date, dateFormat)}</Text>
       </View>
       <StatusBadge status={status} />
     </View>

packages/desktop-client/src/components/payees/ManagePayees.jsx

@@ -21,6 +21,7 @@ import {
 } from '../../hooks/useSelected';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import { SvgExpandArrow } from '../../icons/v0';
+import { useResponsive } from '../../ResponsiveProvider';
 import { theme } from '../../style';
 import { Button } from '../common/Button';
 import { Search } from '../common/Search';
@@ -219,8 +220,8 @@ export const ManagePayees = forwardRef(
     );
 
     const payeesById = getPayeesById(payees);
-
     const [menuOpen, setMenuOpen] = useState(false);
+    const { isNarrowWidth } = useResponsive();
 
     return (
       <View style={{ height: '100%' }}>
@@ -229,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 }}
@@ -254,12 +262,6 @@ export const ManagePayees = forwardRef(
                 onMerge={onMerge}
               />
             )}
-          </View>
-          <View
-            style={{
-              flexShrink: 0,
-            }}
-          >
             {(orphanedOnly ||
               (orphanedPayees && orphanedPayees.length > 0)) && (
               <Button
@@ -281,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>
 

packages/desktop-client/src/components/schedules/ScheduleLink.tsx

@@ -64,7 +64,9 @@ export function ScheduleLink({
         <Search
           inputRef={searchInput}
           isInModal
-          width={300}
+          style={{
+            width: 300,
+          }}
           placeholder="Filter schedules…"
           value={filter}
           onChange={setFilter}

upcoming-release-notes/2037.md

@@ -0,0 +1,6 @@
+---
+category: Features
+authors: [joel-jeremy]
+---
+
+Mobile payees and rules pages