Add ability to scroll to current position in table when leaving budgetable

packages/desktop-client/src/components/budget/BudgetCategories.jsx

@@ -30,6 +30,7 @@ export const BudgetCategories = memo(
     onDeleteGroup,
     onReorderCategory,
     onReorderGroup,
+    scrollToPosition,
   }) => {
     const [collapsedGroupIds = [], setCollapsedGroupIdsPref] =
       useLocalPref('budget.collapsed');
@@ -37,7 +38,6 @@ export const BudgetCategories = memo(
     function onCollapse(value) {
       setCollapsedGroupIdsPref(value);
     }
-
     const [isAddingGroup, setIsAddingGroup] = useState(false);
     const [newCategoryForGroup, setNewCategoryForGroup] = useState(null);
     const items = useMemo(() => {
@@ -264,6 +264,7 @@ export const BudgetCategories = memo(
                   onReorder={onReorderCategory}
                   onBudgetAction={onBudgetAction}
                   onShowActivity={onShowActivity}
+                  scrollToPosition={scrollToPosition}
                 />
               );
               break;

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 
 import { useCategories } from '../../hooks/useCategories';
 import { useLocalPref } from '../../hooks/useLocalPref';
@@ -37,6 +37,21 @@ export function BudgetTable(props) {
   const [showHiddenCategories, setShowHiddenCategoriesPef] = useLocalPref(
     'budget.showHiddenCategories',
   );
+
+  const scrollToPosition = () => {
+    localStorage.setItem(
+      'scrollPosition',
+      document.getElementById('scrollableDiv').scrollTop,
+    );
+  };
+
+  useEffect(() => {
+    const savedPosition = parseInt(localStorage.getItem('scrollPosition'), 10);
+    if (savedPosition) {
+      document.getElementById('scrollableDiv').scrollTop = savedPosition;
+    }
+  }, []);
+
   const [editing, setEditing] = useState(null);
 
   const onEditMonth = (id, month) => {
@@ -204,6 +219,7 @@ export function BudgetTable(props) {
         />
         <IntersectionBoundary.Provider value={budgetCategoriesRef}>
           <View
+            id="scrollableDiv"
             style={{
               overflowY: 'scroll',
               overflowAnchor: 'none',
@@ -233,6 +249,7 @@ export function BudgetTable(props) {
                 onReorderGroup={_onReorderGroup}
                 onBudgetAction={onBudgetAction}
                 onShowActivity={onShowActivity}
+                scrollToPosition={scrollToPosition}
               />
             </View>
           </View>

packages/desktop-client/src/components/budget/ExpenseCategory.tsx

@@ -35,6 +35,7 @@ type ExpenseCategoryProps = {
   onBudgetAction: (month: number, action: string, arg: unknown) => void;
   onShowActivity: (id: string, month: string) => void;
   onReorder: OnDropCallback;
+  scrollToPosition: number;
 };
 
 export function ExpenseCategory({
@@ -51,6 +52,7 @@ export function ExpenseCategory({
   onShowActivity,
   onDragChange,
   onReorder,
+  scrollToPosition,
 }: ExpenseCategoryProps) {
   let dragging = dragState && dragState.item === cat;
 
@@ -109,6 +111,7 @@ export function ExpenseCategory({
             onEdit: onEditMonth,
             onBudgetAction,
             onShowActivity,
+            scrollToPosition,
           }}
         />
       </View>

packages/desktop-client/src/components/budget/RenderMonths.tsx

@@ -27,7 +27,6 @@ export function RenderMonths({
   style,
 }: RenderMonthsProps) {
   const { months } = useContext(MonthsContext);
-
   return months.map((month, index) => {
     const editing = editingMonth === month;
 

packages/desktop-client/src/components/budget/report/ReportComponents.tsx

@@ -147,6 +147,7 @@ type CategoryMonthProps = {
   onEdit: (id: string | null, month?: string) => void;
   onBudgetAction: (month: string, action: string, arg: unknown) => void;
   onShowActivity: (id: string, month: string) => void;
+  scrollToPosition: () => void;
 };
 export const CategoryMonth = memo(function CategoryMonth({
   month,
@@ -155,11 +156,18 @@ export const CategoryMonth = memo(function CategoryMonth({
   onEdit,
   onBudgetAction,
   onShowActivity,
+  scrollToPosition,
 }: CategoryMonthProps) {
   const balanceTooltip = useTooltip();
   const [menuOpen, setMenuOpen] = useState(false);
   const [hover, setHover] = useState(false);
 
+  const handleButtonClick = (categoryId: string, month: string) => {
+    scrollToPosition(); // Adjust the scroll position as needed
+    console.log(scrollToPosition);
+    onShowActivity(categoryId, month);
+  };
+
   return (
     <View
       style={{
@@ -300,7 +308,7 @@ export const CategoryMonth = memo(function CategoryMonth({
       <Field name="spent" width="flex" style={{ textAlign: 'right' }}>
         <span
           data-testid="category-month-spent"
-          onClick={() => onShowActivity(category.id, month)}
+          onClick={() => handleButtonClick(category.id, month)}
         >
           <CellValue
             binding={reportBudget.catSumAmount(category.id)}