Updates

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 { 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,31 @@ export function BudgetTable({
   const { t } = useTranslation();
   const { width } = useResponsive();
   const show3Cols = width >= 360;
+  const swipeHandlers = useSwipeable({
+    onSwipedLeft: onNextMonth,
+    onSwipedRight: onPrevMonth,
+    onSwiping: e => {
+      if (
+        e.event.currentTarget.style.borderLeft !== 'none' ||
+        e.event.currentTarget.style.borderRight !== 'none'
+      ) {
+        return;
+      }
+
+      e.event.currentTarget.style.borderLeft =
+        e.dir === 'Right'
+          ? `1px solid ${theme.tableBorderSelected}`
+          : undefined;
+
+      e.event.currentTarget.style.borderRight =
+        e.dir === 'Left' ? `1px solid ${theme.tableBorderSelected}` : undefined;
+    },
+    onSwiped: e => {
+      e.event.currentTarget.style.borderLeft = 'none';
+      e.event.currentTarget.style.borderRight = 'none';
+    },
+    preventScrollOnSwipe: true,
+  });
 
   // let editMode = false; // neuter editMode -- sorry, not rewriting drag-n-drop right now
 
@@ -1774,6 +1800,7 @@ export function BudgetTable({
       />
       <PullToRefresh onRefresh={onRefresh}>
         <View
+          {...swipeHandlers}
           data-testid="budget-table"
           style={{
             backgroundColor: theme.pageBackground,