[Mobile] swipe left or right to move to the next or previous months

packages/desktop-client/package.json

@@ -63,6 +63,7 @@
     "react-simple-pull-to-refresh": "^1.3.3",
     "react-spring": "^9.7.3",
     "react-stately": "^3.33.0",
+    "react-swipeable": "^7.0.2",
     "react-virtualized-auto-sizer": "^1.0.21",
     "recharts": "^2.10.4",
     "remark-gfm": "^3.0.1",

packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx

@@ -1,5 +1,6 @@
-import React, { memo, useCallback, useRef } from 'react';
+import React, { memo, useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSwipeable } from 'react-swipeable';
 
 import { Button } from '@actual-app/components/button';
 import { Card } from '@actual-app/components/card';
@@ -1701,6 +1702,26 @@ export function BudgetTable({
   const { t } = useTranslation();
   const { width } = useResponsive();
   const show3Cols = width >= 360;
+  const [borderStyles, setBorderStyles] = useState({});
+  const swipeHandlers = useSwipeable({
+    onSwipedLeft: onNextMonth,
+    onSwipedRight: onPrevMonth,
+    onSwiping: e => {
+      setBorderStyles({
+        borderLeft:
+          e.dir === 'Right'
+            ? `1px solid ${theme.budgetHeaderCurrentMonth}`
+            : undefined,
+        borderRight:
+          e.dir === 'Left'
+            ? `1px solid ${theme.tableBorderSelected}`
+            : undefined,
+      });
+    },
+    onSwiped: () => {
+      setBorderStyles({});
+    },
+  });
 
   // let editMode = false; // neuter editMode -- sorry, not rewriting drag-n-drop right now
 
@@ -1774,10 +1795,12 @@ export function BudgetTable({
       />
       <PullToRefresh onRefresh={onRefresh}>
         <View
+          {...swipeHandlers}
           data-testid="budget-table"
           style={{
             backgroundColor: theme.pageBackground,
             paddingBottom: MOBILE_NAV_HEIGHT,
+            ...borderStyles,
           }}
         >
           <UncategorizedButton />

yarn.lock

@@ -197,6 +197,7 @@ __metadata:
     react-simple-pull-to-refresh: "npm:^1.3.3"
     react-spring: "npm:^9.7.3"
     react-stately: "npm:^3.33.0"
+    react-swipeable: "npm:^7.0.2"
     react-virtualized-auto-sizer: "npm:^1.0.21"
     recharts: "npm:^2.10.4"
     remark-gfm: "npm:^3.0.1"
@@ -20083,6 +20084,12 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
   checksum: 10/2399088595415f342a1fba01e8a0fafad9f8001d7434c9e62878028f570024e1596112f05df626c05ae5667d24e5afb3d5e8ec46177d5fe93c9dbd186d785c4e
+"react-swipeable@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "react-swipeable@npm:7.0.2"
+  peerDependencies:
+    react: ^16.8.3 || ^17 || ^18 || ^19.0.0 || ^19.0.0-rc
+  checksum: 10/c142190244865c321751b0ca5f14ac186cf8a5d49bd577b16b1d22ea4f673d1e85cd7ad1962736be4575df320a6081c2b2b36799236c777b1a3ffb8682f4993c
   languageName: node
   linkType: hard