Changed to remove sessionStorage

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

@@ -30,7 +30,6 @@ export const BudgetCategories = memo(
     onDeleteGroup,
     onReorderCategory,
     onReorderGroup,
-    setScrollPosition,
   }) => {
     const [collapsedGroupIds = [], setCollapsedGroupIdsPref] =
       useLocalPref('budget.collapsed');
@@ -264,7 +263,6 @@ export const BudgetCategories = memo(
                   onReorder={onReorderCategory}
                   onBudgetAction={onBudgetAction}
                   onShowActivity={onShowActivity}
-                  setScrollPosition={setScrollPosition}
                 />
               );
               break;

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

@@ -1,4 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import { useCategories } from '../../hooks/useCategories';
 import { useLocalPref } from '../../hooks/useLocalPref';
@@ -30,6 +31,8 @@ export function BudgetTable(props) {
   } = props;
 
   const budgetCategoriesRef = useRef();
+  const scrollableDivRef = useRef();
+  const location = useLocation();
   const { grouped: categoryGroups } = useCategories();
   const [collapsedGroupIds = [], setCollapsedGroupIdsPref] =
     useLocalPref('budget.collapsed');
@@ -37,27 +40,27 @@ export function BudgetTable(props) {
     'budget.showHiddenCategories',
   );
 
-  const setScrollPosition = () => {
-    sessionStorage.setItem(
-      'scrollPosition',
-      document.getElementById('scrollableDiv').scrollTop,
-    );
-    sessionStorage.setItem('scrollPositionSetBySpentColumn', true);
+  const getCurrentScrollPosition = () => {
+    return scrollableDivRef.current?.scrollTop || 0;
+  };
+
+  const onShowActivityWithScroll = (categoryId, month) => {
+    const scrollPosition = getCurrentScrollPosition();
+    onShowActivity(categoryId, month, scrollPosition);
   };
 
   useEffect(() => {
-    const savedPosition = parseInt(
-      sessionStorage.getItem('scrollPosition'),
-      10,
-    );
-    const scrollPositionSetBySpentColumn = sessionStorage.getItem(
-      'scrollPositionSetBySpentColumn',
-    );
-    if (savedPosition && scrollPositionSetBySpentColumn) {
-      document.getElementById('scrollableDiv').scrollTop = savedPosition;
-      sessionStorage.removeItem('scrollPositionSetBySpentColumn');
+    const savedScrollPosition = location.state?.scrollPosition;
+    
+    if (savedScrollPosition && scrollableDivRef.current) {
+      // Use requestAnimationFrame to ensure the DOM is ready
+      requestAnimationFrame(() => {
+        if (scrollableDivRef.current) {
+          scrollableDivRef.current.scrollTop = savedScrollPosition;
+        }
+      });
     }
-  }, []);
+  }, [location.state?.scrollPosition]);
 
   const [editing, setEditing] = useState(null);
 
@@ -233,7 +236,7 @@ export function BudgetTable(props) {
             paddingLeft: 5,
             paddingRight: 5,
           }}
-          innerRef={budgetCategoriesRef}
+          innerRef={scrollableDivRef}
         >
           <View
             style={{
@@ -254,8 +257,7 @@ export function BudgetTable(props) {
               onReorderCategory={_onReorderCategory}
               onReorderGroup={_onReorderGroup}
               onBudgetAction={onBudgetAction}
-              onShowActivity={onShowActivity}
-              setScrollPosition={setScrollPosition}
+              onShowActivity={onShowActivityWithScroll}
             />
           </View>
         </View>

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

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

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

@@ -276,7 +276,7 @@ function BudgetInner(props: BudgetInnerProps) {
     dispatch(applyBudgetAction(month, type, args));
   };
 
-  const onShowActivity = (categoryId, month) => {
+  const onShowActivity = (categoryId, month, scrollPosition) => {
     const conditions = [
       { field: 'category', op: 'is', value: categoryId, type: 'id' },
       {
@@ -287,6 +287,12 @@ function BudgetInner(props: BudgetInnerProps) {
         type: 'date',
       },
     ];
+    
+    navigate('/budget', {
+      replace: true,
+      state: { scrollPosition }
+    });
+    
     navigate('/accounts', {
       state: {
         goBack: true,

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

@@ -147,7 +147,6 @@ type CategoryMonthProps = {
   onEdit: (id: string | null, month?: string) => void;
   onBudgetAction: (month: string, action: string, arg: unknown) => void;
   onShowActivity: (id: string, month: string) => void;
-  setScrollPosition: () => void;
 };
 export const CategoryMonth = memo(function CategoryMonth({
   month,
@@ -156,7 +155,6 @@ export const CategoryMonth = memo(function CategoryMonth({
   onEdit,
   onBudgetAction,
   onShowActivity,
-  setScrollPosition,
 }: CategoryMonthProps) {
   const [menuOpen, setMenuOpen] = useState(false);
   const [hover, setHover] = useState(false);
@@ -305,7 +303,6 @@ export const CategoryMonth = memo(function CategoryMonth({
         <span
           data-testid="category-month-spent"
           onClick={() => {
-            setScrollPosition();
             onShowActivity(category.id, month);
           }}
         >

packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx

@@ -143,7 +143,6 @@ type ExpenseCategoryMonthProps = {
   onEdit: (id: string | null, month?: string) => void;
   onBudgetAction: (month: string, action: string, arg?: unknown) => void;
   onShowActivity: (id: string, month: string) => void;
-  setScrollPosition: () => void;
 };
 export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
   month,
@@ -152,7 +151,6 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
   onEdit,
   onBudgetAction,
   onShowActivity,
-  setScrollPosition,
 }: ExpenseCategoryMonthProps) {
   const budgetMenuTriggerRef = useRef(null);
   const balanceMenuTriggerRef = useRef(null);
@@ -298,7 +296,6 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
         <span
           data-testid="category-month-spent"
           onClick={() => {
-            setScrollPosition();
             onShowActivity(category.id, month);
           }}
         >

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

@@ -1,5 +1,6 @@
 import React, { memo, useRef, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 
 import { AutoTextSize } from 'auto-text-size';
 import memoizeOne from 'memoize-one';
@@ -329,6 +330,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
   show3Cols,
   showBudgetedCol,
   setScrollPosition,
+  onShowActivityWithScroll,
 }) {
   const opacity = blank ? 0 : 1;
 
@@ -397,10 +399,6 @@ const ExpenseCategory = memo(function ExpenseCategory({
 
   const listItemRef = useRef();
   const format = useFormat();
-  const navigate = useNavigate();
-  const onShowActivity = () => {
-    navigate(`/categories/${category.id}?month=${month}`);
-  };
 
   const sidebarColumnWidth = getColumnWidth({ show3Cols, isSidebar: true });
   const columnWidth = getColumnWidth({ show3Cols });
@@ -519,8 +517,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
             getStyle={makeAmountGrey}
             type="financial"
             onClick={() => {
-              setScrollPosition();
-              onShowActivity();
+              onShowActivityWithScroll(category.id, month);
             }}
             formatter={value => (
               <Button
@@ -1240,6 +1237,7 @@ const ExpenseGroup = memo(function ExpenseGroup({
   collapsed,
   onToggleCollapse,
   setScrollPosition,
+  onShowActivityWithScroll,
 }) {
   function editable(content) {
     if (!editMode) {
@@ -1353,6 +1351,7 @@ const ExpenseGroup = memo(function ExpenseGroup({
               // onReorder={onReorderCategory}
               onBudgetAction={onBudgetAction}
               setScrollPosition={setScrollPosition}
+              onShowActivityWithScroll={onShowActivityWithScroll}
             />
           );
         })}
@@ -1465,6 +1464,7 @@ function BudgetGroups({
   show3Cols,
   showHiddenCategories,
   setScrollPosition,
+  onShowActivityWithScroll,
 }) {
   const separateGroups = memoizeOne(groups => {
     return {
@@ -1515,6 +1515,7 @@ function BudgetGroups({
               collapsed={collapsedGroupIds.includes(group.id)}
               onToggleCollapse={onToggleCollapse}
               setScrollPosition={setScrollPosition}
+              onShowActivityWithScroll={onShowActivityWithScroll}
             />
           );
         })}
@@ -1565,6 +1566,8 @@ export function BudgetTable({
 }) {
   const { width } = useResponsive();
   const show3Cols = width >= 360;
+  const location = useLocation();
+  const navigate = useNavigate();
 
   // let editMode = false; // neuter editMode -- sorry, not rewriting drag-n-drop right now
 
@@ -1572,27 +1575,43 @@ export function BudgetTable({
     'mobile.showSpentColumn',
   );
 
+  const getCurrentScrollPosition = () => {
+    const scrollableDiv = document.getElementById('scrollableDiv');
+    return scrollableDiv?.scrollTop || 0;
+  };
+
   const setScrollPosition = () => {
-    sessionStorage.setItem(
-      'scrollPosition',
-      document.getElementById('scrollableDiv').scrollTop,
-    );
-    sessionStorage.setItem('scrollPositionSetBySpentColumn', true);
+    const scrollPosition = getCurrentScrollPosition();
+    
+    navigate('/budget', {
+      replace: true,
+      state: { scrollPosition }
+    });
+  };
+
+  const onShowActivityWithScroll = (categoryId, month) => {
+    const scrollPosition = getCurrentScrollPosition();
+    
+    navigate('/budget', {
+      replace: true,
+      state: { scrollPosition }
+    });
+    
+    navigate(`/categories/${categoryId}?month=${month}`);
   };
 
   useEffect(() => {
-    const savedPosition = parseInt(
-      sessionStorage.getItem('scrollPosition'),
-      10,
-    );
-    const scrollPositionSetBySpentColumn = sessionStorage.getItem(
-      'scrollPositionSetBySpentColumn',
-    );
-    if (savedPosition && scrollPositionSetBySpentColumn) {
-      document.getElementById('scrollableDiv').scrollTop = savedPosition;
-      sessionStorage.removeItem('scrollPositionSetBySpentColumn');
+    const savedScrollPosition = location.state?.scrollPosition;
+    
+    if (savedScrollPosition) {
+      const scrollableDiv = document.getElementById('scrollableDiv');
+      if (scrollableDiv) {
+        requestAnimationFrame(() => {
+          scrollableDiv.scrollTop = savedScrollPosition;
+        });
+      }
     }
-  }, []);
+  }, [location.state?.scrollPosition]);
 
   function toggleSpentColumn() {
     setShowSpentColumnPref(!showSpentColumn);
@@ -1681,6 +1700,7 @@ export function BudgetTable({
             onReorderGroup={onReorderGroup}
             onBudgetAction={onBudgetAction}
             setScrollPosition={setScrollPosition}
+            onShowActivityWithScroll={onShowActivityWithScroll}
           />
         </View>
       </PullToRefresh>