From f9e6f45f8cae65bbe617c9c6c897ab0fba42ccde Mon Sep 17 00:00:00 2001
From: UnderKoen <koenvanstaveren@hotmail.com>
Date: Sun, 3 Nov 2024 22:10:08 +0100
Subject: [PATCH 1/6] enhance: context menu budget page positioning fix: make
 popover non selectable

---
 .../src/components/budget/SidebarCategory.tsx | 16 +++++++--
 .../src/components/budget/SidebarGroup.tsx    | 16 +++++++--
 .../envelope/EnvelopeBudgetComponents.tsx     | 33 +++++++++++++++----
 .../envelope/budgetsummary/ToBudget.tsx       | 30 ++++++++++++-----
 .../src/components/common/Popover.tsx         |  1 +
 5 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
index 4d3b53e7a04..c125cedb71d 100644
--- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -54,6 +54,9 @@ export function SidebarCategory({
   const triggerRef = useRef(null);
   const contextMenusEnabled = useFeatureFlag('contextMenus');
 
+  const [crossOffset, setCrossOffset] = useState(0);
+  const [offset, setOffset] = useState(0);
+
   const displayed = (
     <View
       style={{
@@ -70,6 +73,9 @@ export function SidebarCategory({
         if (!contextMenusEnabled) return;
         e.preventDefault();
         setMenuOpen(true);
+        const rect = e.currentTarget.getBoundingClientRect();
+        setCrossOffset(e.clientX - rect.left);
+        setOffset(e.clientY - rect.bottom);
       }}
     >
       <div
@@ -88,7 +94,11 @@ export function SidebarCategory({
           variant="bare"
           className="hover-visible"
           style={{ color: 'currentColor', padding: 3 }}
-          onPress={() => setMenuOpen(true)}
+          onPress={() => {
+            setOffset(0);
+            setCrossOffset(0);
+            setMenuOpen(true);
+          }}
         >
           <SvgCheveronDown
             width={14}
@@ -102,8 +112,10 @@ export function SidebarCategory({
           placement="bottom start"
           isOpen={menuOpen}
           onOpenChange={() => setMenuOpen(false)}
-          style={{ width: 200 }}
+          style={{ width: 200, margin: 1 }}
           isNonModal
+          offset={offset}
+          crossOffset={crossOffset}
         >
           <Menu
             onMenuSelect={type => {
diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
index 530c8f334a5..0c4b5823778 100644
--- a/packages/desktop-client/src/components/budget/SidebarGroup.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -59,6 +59,9 @@ export function SidebarGroup({
   const triggerRef = useRef(null);
   const contextMenusEnabled = useFeatureFlag('contextMenus');
 
+  const [crossOffset, setCrossOffset] = useState(0);
+  const [offset, setOffset] = useState(0);
+
   const displayed = (
     <View
       style={{
@@ -76,6 +79,9 @@ export function SidebarGroup({
         if (!contextMenusEnabled) return;
         e.preventDefault();
         setMenuOpen(true);
+        const rect = e.currentTarget.getBoundingClientRect();
+        setCrossOffset(e.clientX - rect.left);
+        setOffset(e.clientY - rect.bottom);
       }}
     >
       {!dragPreview && (
@@ -108,7 +114,11 @@ export function SidebarGroup({
             <Button
               variant="bare"
               className="hover-visible"
-              onPress={() => setMenuOpen(true)}
+              onPress={() => {
+                setOffset(0);
+                setCrossOffset(0);
+                setMenuOpen(true);
+              }}
               style={{ padding: 3 }}
             >
               <SvgCheveronDown width={14} height={14} />
@@ -119,8 +129,10 @@ export function SidebarGroup({
               placement="bottom start"
               isOpen={menuOpen}
               onOpenChange={() => setMenuOpen(false)}
-              style={{ width: 200 }}
+              style={{ width: 200, margin: 1 }}
               isNonModal
+              offset={offset}
+              crossOffset={crossOffset}
             >
               <Menu
                 onMenuSelect={type => {
diff --git a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
index 78a42e0fd8d..af42b00212d 100644
--- a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
@@ -218,6 +218,9 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
   const { showUndoNotification } = useUndo();
   const contextMenusEnabled = useFeatureFlag('contextMenus');
 
+  const [crossOffset, setCrossOffset] = useState(0);
+  const [offset, setOffset] = useState(0);
+
   return (
     <View
       style={{
@@ -236,6 +239,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
       }}
     >
       <View
+        ref={budgetMenuTriggerRef}
         style={{
           flex: 1,
           flexDirection: 'row',
@@ -245,6 +249,9 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           if (editing) return;
           e.preventDefault();
           setBudgetMenuOpen(true);
+          const rect = e.currentTarget.getBoundingClientRect();
+          setCrossOffset(e.clientX - rect.left);
+          setOffset(e.clientY - rect.bottom);
         }}
       >
         {!editing && (
@@ -261,9 +268,12 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             }}
           >
             <Button
-              ref={budgetMenuTriggerRef}
               variant="bare"
-              onPress={() => setBudgetMenuOpen(true)}
+              onPress={() => {
+                setOffset(-4);
+                setCrossOffset(2);
+                setBudgetMenuOpen(true);
+              }}
               style={{
                 padding: 3,
               }}
@@ -278,11 +288,13 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
 
             <Popover
               triggerRef={budgetMenuTriggerRef}
-              placement="bottom start"
+              placement="bottom left"
               isOpen={budgetMenuOpen}
               onOpenChange={() => setBudgetMenuOpen(false)}
               style={{ width: 200 }}
               isNonModal
+              offset={offset}
+              crossOffset={crossOffset}
             >
               <BudgetMenu
                 onCopyLastMonthAverage={() => {
@@ -392,17 +404,24 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
         </span>
       </Field>
       <Field
+        ref={balanceMenuTriggerRef}
         name="balance"
         width="flex"
         style={{ paddingRight: styles.monthRightPadding, textAlign: 'right' }}
       >
         <span
-          ref={balanceMenuTriggerRef}
-          onClick={() => setBalanceMenuOpen(true)}
+          onClick={() => {
+            setOffset(-4);
+            setCrossOffset(-6);
+            setBalanceMenuOpen(true);
+          }}
           onContextMenu={e => {
             if (!contextMenusEnabled) return;
             e.preventDefault();
             setBalanceMenuOpen(true);
+            const rect = e.currentTarget.getBoundingClientRect();
+            setCrossOffset(e.clientX - rect.right + 200 - 8);
+            setOffset(e.clientY - rect.bottom - 8);
           }}
         >
           <BalanceWithCarryover
@@ -419,8 +438,10 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           placement="bottom end"
           isOpen={balanceMenuOpen}
           onOpenChange={() => setBalanceMenuOpen(false)}
-          style={{ width: 200 }}
+          style={{ width: 200, margin: 1 }}
           isNonModal
+          offset={offset}
+          crossOffset={crossOffset}
         >
           <BalanceMovementMenu
             categoryId={category.id}
diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
index 09316daae98..e91f17fe061 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
@@ -1,8 +1,8 @@
 import React, {
-  useRef,
-  useState,
   type CSSProperties,
   useCallback,
+  useRef,
+  useState,
 } from 'react';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
@@ -43,13 +43,12 @@ export function ToBudget({
       if (menu) ref.current?.focus();
       _setMenuOpen(menu);
     },
-    [ref],
+    [ref, _setMenuOpen],
   );
-  const sheetValue = useEnvelopeSheetValue({
+  const availableValue = useEnvelopeSheetValue({
     name: envelopeBudget.toBudget,
     value: 0,
   });
-  const availableValue = sheetValue;
   if (typeof availableValue !== 'number' && availableValue !== null) {
     throw new Error(
       'Expected availableValue to be a number but got ' + availableValue,
@@ -58,11 +57,20 @@ export function ToBudget({
   const isMenuOpen = Boolean(menuOpen);
   const contextMenusEnabled = useFeatureFlag('contextMenus');
 
+  const [crossOffset, setCrossOffset] = useState(0);
+  const [offset, setOffset] = useState(0);
+  const [contextMenuOpen, setContextMenuOpen] = useState(false);
+
   return (
     <>
       <View ref={triggerRef}>
         <ToBudgetAmount
-          onClick={() => setMenuOpen('actions')}
+          onClick={() => {
+            setOffset(0);
+            setCrossOffset(0);
+            setContextMenuOpen(false);
+            setMenuOpen('actions');
+          }}
           prevMonthName={prevMonthName}
           style={style}
           amountStyle={amountStyle}
@@ -71,17 +79,23 @@ export function ToBudget({
             if (!contextMenusEnabled) return;
             e.preventDefault();
             setMenuOpen('actions');
+            const rect = e.currentTarget.getBoundingClientRect();
+            setCrossOffset(e.clientX - rect.left);
+            setOffset(e.clientY - rect.bottom);
+            setContextMenuOpen(true);
           }}
         />
       </View>
 
       <Popover
         triggerRef={triggerRef}
-        placement="bottom"
+        placement={contextMenuOpen ? 'bottom start' : 'bottom'}
         isOpen={isMenuOpen}
         onOpenChange={() => setMenuOpen(null)}
-        style={{ width: 200 }}
+        style={{ width: 200, margin: 1 }}
         isNonModal
+        crossOffset={crossOffset}
+        offset={offset}
       >
         <span tabIndex={-1} ref={ref}>
           {menuOpen === 'actions' && (
diff --git a/packages/desktop-client/src/components/common/Popover.tsx b/packages/desktop-client/src/components/common/Popover.tsx
index 79fe2e3f8f0..c844c5b9c9b 100644
--- a/packages/desktop-client/src/components/common/Popover.tsx
+++ b/packages/desktop-client/src/components/common/Popover.tsx
@@ -41,6 +41,7 @@ export const Popover = ({
         ...styles.tooltip,
         ...styles.lightScrollbar,
         padding: 0,
+        userSelect: 'none',
         ...style,
       })}
       shouldCloseOnInteractOutside={element => {

From 4c62cc2da042b76bffd0ac63c9764454256fa2e2 Mon Sep 17 00:00:00 2001
From: UnderKoen <koenvanstaveren@hotmail.com>
Date: Sun, 3 Nov 2024 22:12:27 +0100
Subject: [PATCH 2/6] chore: release note

---
 upcoming-release-notes/3775.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 upcoming-release-notes/3775.md

diff --git a/upcoming-release-notes/3775.md b/upcoming-release-notes/3775.md
new file mode 100644
index 00000000000..ee123342044
--- /dev/null
+++ b/upcoming-release-notes/3775.md
@@ -0,0 +1,7 @@
+---
+category: Enhancements
+authors: [UnderKoen]
+---
+
+Position context menu's on the to budget page to the cursor.
+And make popovers non selectable.

From 31d29838186814c9e290a7ba8ed73bf6d37fcb94 Mon Sep 17 00:00:00 2001
From: Koen van Staveren <koenvanstaveren@hotmail.com>
Date: Sun, 3 Nov 2024 22:24:57 +0100
Subject: [PATCH 3/6] Update upcoming-release-notes/3775.md

---
 upcoming-release-notes/3775.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/upcoming-release-notes/3775.md b/upcoming-release-notes/3775.md
index ee123342044..818c200b147 100644
--- a/upcoming-release-notes/3775.md
+++ b/upcoming-release-notes/3775.md
@@ -3,5 +3,4 @@ category: Enhancements
 authors: [UnderKoen]
 ---
 
-Position context menu's on the to budget page to the cursor.
-And make popovers non selectable.
+Position context menu's on the to budget page to the cursor, and make popovers non selectable.

From 554df658ee8b1018f55a0b1b389c2eae055b6404 Mon Sep 17 00:00:00 2001
From: UnderKoen <koenvanstaveren@hotmail.com>
Date: Tue, 26 Nov 2024 21:06:27 +0100
Subject: [PATCH 4/6] chore: improve spelling

---
 upcoming-release-notes/3775.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/upcoming-release-notes/3775.md b/upcoming-release-notes/3775.md
index 818c200b147..dc711646600 100644
--- a/upcoming-release-notes/3775.md
+++ b/upcoming-release-notes/3775.md
@@ -3,4 +3,4 @@ category: Enhancements
 authors: [UnderKoen]
 ---
 
-Position context menu's on the to budget page to the cursor, and make popovers non selectable.
+Position context menus on the to budget page to the cursor, and make popovers non selectable.

From 864251db927a45fe7cdf31a7e54afb888a11dbfd Mon Sep 17 00:00:00 2001
From: UnderKoen <koenvanstaveren@hotmail.com>
Date: Tue, 26 Nov 2024 22:02:36 +0100
Subject: [PATCH 5/6] feat: useContextMenu hook for context menus

---
 .../src/components/budget/SidebarCategory.tsx | 26 ++-----
 .../src/components/budget/SidebarGroup.tsx    | 25 ++----
 .../envelope/EnvelopeBudgetComponents.tsx     | 53 +++++++------
 .../envelope/budgetsummary/ToBudget.tsx       | 78 +++++++++----------
 .../src/components/payees/PayeeTableRow.tsx   | 22 ++----
 .../src/components/rules/RuleRow.tsx          | 22 ++----
 .../components/schedules/SchedulesTable.tsx   | 38 +++++----
 .../transactions/TransactionsTable.jsx        | 21 ++---
 .../src/hooks/useContextMenu.ts               | 40 ++++++++++
 9 files changed, 152 insertions(+), 173 deletions(-)
 create mode 100644 packages/desktop-client/src/hooks/useContextMenu.ts

diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
index c125cedb71d..bdd3f55a54d 100644
--- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { type CSSProperties, type Ref, useRef, useState } from 'react';
+import React, { type CSSProperties, type Ref, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -7,7 +7,7 @@ import {
   type CategoryEntity,
 } from 'loot-core/src/types/models';
 
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { SvgCheveronDown } from '../../icons/v1';
 import { theme } from '../../style';
 import { Button } from '../common/Button2';
@@ -50,12 +50,9 @@ export function SidebarCategory({
   const { t } = useTranslation();
 
   const temporary = category.id === 'new';
-  const [menuOpen, setMenuOpen] = useState(false);
+  const { setMenuOpen, menuOpen, handleContextMenu, resetPosition, position } =
+    useContextMenu();
   const triggerRef = useRef(null);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
-
-  const [crossOffset, setCrossOffset] = useState(0);
-  const [offset, setOffset] = useState(0);
 
   const displayed = (
     <View
@@ -69,14 +66,7 @@ export function SidebarCategory({
         height: 20,
       }}
       ref={triggerRef}
-      onContextMenu={e => {
-        if (!contextMenusEnabled) return;
-        e.preventDefault();
-        setMenuOpen(true);
-        const rect = e.currentTarget.getBoundingClientRect();
-        setCrossOffset(e.clientX - rect.left);
-        setOffset(e.clientY - rect.bottom);
-      }}
+      onContextMenu={handleContextMenu}
     >
       <div
         data-testid="category-name"
@@ -95,8 +85,7 @@ export function SidebarCategory({
           className="hover-visible"
           style={{ color: 'currentColor', padding: 3 }}
           onPress={() => {
-            setOffset(0);
-            setCrossOffset(0);
+            resetPosition();
             setMenuOpen(true);
           }}
         >
@@ -114,8 +103,7 @@ export function SidebarCategory({
           onOpenChange={() => setMenuOpen(false)}
           style={{ width: 200, margin: 1 }}
           isNonModal
-          offset={offset}
-          crossOffset={crossOffset}
+          {...position}
         >
           <Menu
             onMenuSelect={type => {
diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
index 7e2e0ebaf72..87e6eaad4d2 100644
--- a/packages/desktop-client/src/components/budget/SidebarGroup.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -1,8 +1,9 @@
 // @ts-strict-ignore
-import React, { type CSSProperties, useRef, useState } from 'react';
+import React, { type CSSProperties, useRef } from 'react';
 import { type ConnectDragSource } from 'react-dnd';
 import { useTranslation } from 'react-i18next';
 
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgExpandArrow } from '../../icons/v0';
 import { SvgCheveronDown } from '../../icons/v1';
@@ -58,12 +59,9 @@ export function SidebarGroup({
   const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
 
   const temporary = group.id === 'new';
-  const [menuOpen, setMenuOpen] = useState(false);
+  const { setMenuOpen, menuOpen, handleContextMenu, resetPosition, position } =
+    useContextMenu();
   const triggerRef = useRef(null);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
-
-  const [crossOffset, setCrossOffset] = useState(0);
-  const [offset, setOffset] = useState(0);
 
   const displayed = (
     <View
@@ -78,14 +76,7 @@ export function SidebarGroup({
       onClick={() => {
         onToggleCollapse(group.id);
       }}
-      onContextMenu={e => {
-        if (!contextMenusEnabled) return;
-        e.preventDefault();
-        setMenuOpen(true);
-        const rect = e.currentTarget.getBoundingClientRect();
-        setCrossOffset(e.clientX - rect.left);
-        setOffset(e.clientY - rect.bottom);
-      }}
+      onContextMenu={handleContextMenu}
     >
       {!dragPreview && (
         <SvgExpandArrow
@@ -118,8 +109,7 @@ export function SidebarGroup({
               variant="bare"
               className="hover-visible"
               onPress={() => {
-                setOffset(0);
-                setCrossOffset(0);
+                resetPosition();
                 setMenuOpen(true);
               }}
               style={{ padding: 3 }}
@@ -134,8 +124,7 @@ export function SidebarGroup({
               onOpenChange={() => setMenuOpen(false)}
               style={{ width: 200, margin: 1 }}
               isNonModal
-              offset={offset}
-              crossOffset={crossOffset}
+              {...position}
             >
               <Menu
                 onMenuSelect={type => {
diff --git a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
index af42b00212d..0bb0491a2d8 100644
--- a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
@@ -3,7 +3,6 @@ import React, {
   type CSSProperties,
   memo,
   useRef,
-  useState,
 } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
@@ -14,7 +13,7 @@ import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
 import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
-import { useFeatureFlag } from '../../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../../hooks/useContextMenu';
 import { useUndo } from '../../../hooks/useUndo';
 import { SvgCheveronDown } from '../../../icons/v1';
 import { styles, theme } from '../../../style';
@@ -207,8 +206,20 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
 
   const budgetMenuTriggerRef = useRef(null);
   const balanceMenuTriggerRef = useRef(null);
-  const [budgetMenuOpen, setBudgetMenuOpen] = useState(false);
-  const [balanceMenuOpen, setBalanceMenuOpen] = useState(false);
+  const {
+    setMenuOpen: setBudgetMenuOpen,
+    menuOpen: budgetMenuOpen,
+    handleContextMenu: handleBudgetContextMenu,
+    resetPosition: resetBudgetPosition,
+    position: budgetPosition,
+  } = useContextMenu();
+  const {
+    setMenuOpen: setBalanceMenuOpen,
+    menuOpen: balanceMenuOpen,
+    handleContextMenu: handleBalanceContextMenu,
+    resetPosition: resetBalancePosition,
+    position: balancePosition,
+  } = useContextMenu();
 
   const onMenuAction = (...args: Parameters<typeof onBudgetAction>) => {
     onBudgetAction(...args);
@@ -216,10 +227,6 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
   };
 
   const { showUndoNotification } = useUndo();
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
-
-  const [crossOffset, setCrossOffset] = useState(0);
-  const [offset, setOffset] = useState(0);
 
   return (
     <View
@@ -245,13 +252,8 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           flexDirection: 'row',
         }}
         onContextMenu={e => {
-          if (!contextMenusEnabled) return;
           if (editing) return;
-          e.preventDefault();
-          setBudgetMenuOpen(true);
-          const rect = e.currentTarget.getBoundingClientRect();
-          setCrossOffset(e.clientX - rect.left);
-          setOffset(e.clientY - rect.bottom);
+          handleBudgetContextMenu(e);
         }}
       >
         {!editing && (
@@ -270,8 +272,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             <Button
               variant="bare"
               onPress={() => {
-                setOffset(-4);
-                setCrossOffset(2);
+                resetBudgetPosition(2, -4);
                 setBudgetMenuOpen(true);
               }}
               style={{
@@ -293,8 +294,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
               onOpenChange={() => setBudgetMenuOpen(false)}
               style={{ width: 200 }}
               isNonModal
-              offset={offset}
-              crossOffset={crossOffset}
+              {...budgetPosition}
             >
               <BudgetMenu
                 onCopyLastMonthAverage={() => {
@@ -411,17 +411,17 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
       >
         <span
           onClick={() => {
-            setOffset(-4);
-            setCrossOffset(-6);
+            resetBalancePosition(-6, -4);
             setBalanceMenuOpen(true);
           }}
           onContextMenu={e => {
-            if (!contextMenusEnabled) return;
-            e.preventDefault();
-            setBalanceMenuOpen(true);
+            handleBalanceContextMenu(e);
+            // We need to calculate differently from the hook ue to being aligned to the right
             const rect = e.currentTarget.getBoundingClientRect();
-            setCrossOffset(e.clientX - rect.right + 200 - 8);
-            setOffset(e.clientY - rect.bottom - 8);
+            resetBalancePosition(
+              e.clientX - rect.right + 200 - 8,
+              e.clientY - rect.bottom - 8,
+            );
           }}
         >
           <BalanceWithCarryover
@@ -440,8 +440,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           onOpenChange={() => setBalanceMenuOpen(false)}
           style={{ width: 200, margin: 1 }}
           isNonModal
-          offset={offset}
-          crossOffset={crossOffset}
+          {...balancePosition}
         >
           <BalanceMovementMenu
             categoryId={category.id}
diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
index e91f17fe061..c068f148553 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
@@ -1,13 +1,14 @@
 import React, {
   type CSSProperties,
   useCallback,
+  useEffect,
   useRef,
   useState,
 } from 'react';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 
-import { useFeatureFlag } from '../../../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../../../hooks/useContextMenu';
 import { Popover } from '../../../common/Popover';
 import { View } from '../../../common/View';
 import { CoverMenu } from '../CoverMenu';
@@ -34,16 +35,16 @@ export function ToBudget({
   amountStyle,
   isCollapsed = false,
 }: ToBudgetProps) {
-  const [menuOpen, _setMenuOpen] = useState<string | null>(null);
+  const [menuStep, _setMenuStep] = useState<string>('actions');
   const triggerRef = useRef(null);
 
   const ref = useRef<HTMLSpanElement>(null);
-  const setMenuOpen = useCallback(
-    (menu: string | null) => {
+  const setMenuStep = useCallback(
+    (menu: string) => {
       if (menu) ref.current?.focus();
-      _setMenuOpen(menu);
+      _setMenuStep(menu);
     },
-    [ref, _setMenuOpen],
+    [ref, _setMenuStep],
   );
   const availableValue = useEnvelopeSheetValue({
     name: envelopeBudget.toBudget,
@@ -54,73 +55,68 @@ export function ToBudget({
       'Expected availableValue to be a number but got ' + availableValue,
     );
   }
-  const isMenuOpen = Boolean(menuOpen);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
-  const [crossOffset, setCrossOffset] = useState(0);
-  const [offset, setOffset] = useState(0);
-  const [contextMenuOpen, setContextMenuOpen] = useState(false);
+  const {
+    setMenuOpen,
+    menuOpen,
+    handleContextMenu,
+    resetPosition,
+    position,
+    asContextMenu,
+  } = useContextMenu();
 
   return (
     <>
       <View ref={triggerRef}>
         <ToBudgetAmount
           onClick={() => {
-            setOffset(0);
-            setCrossOffset(0);
-            setContextMenuOpen(false);
-            setMenuOpen('actions');
+            resetPosition();
+            setMenuOpen(true);
           }}
           prevMonthName={prevMonthName}
           style={style}
           amountStyle={amountStyle}
-          isTotalsListTooltipDisabled={!isCollapsed || isMenuOpen}
-          onContextMenu={e => {
-            if (!contextMenusEnabled) return;
-            e.preventDefault();
-            setMenuOpen('actions');
-            const rect = e.currentTarget.getBoundingClientRect();
-            setCrossOffset(e.clientX - rect.left);
-            setOffset(e.clientY - rect.bottom);
-            setContextMenuOpen(true);
-          }}
+          isTotalsListTooltipDisabled={!isCollapsed || asContextMenu}
+          onContextMenu={handleContextMenu}
         />
       </View>
 
       <Popover
         triggerRef={triggerRef}
-        placement={contextMenuOpen ? 'bottom start' : 'bottom'}
-        isOpen={isMenuOpen}
-        onOpenChange={() => setMenuOpen(null)}
+        placement={asContextMenu ? 'bottom start' : 'bottom'}
+        isOpen={menuOpen}
+        onOpenChange={() => {
+          setMenuStep('actions');
+          setMenuOpen(false);
+        }}
         style={{ width: 200, margin: 1 }}
         isNonModal
-        crossOffset={crossOffset}
-        offset={offset}
+        {...position}
       >
         <span tabIndex={-1} ref={ref}>
-          {menuOpen === 'actions' && (
+          {menuStep === 'actions' && (
             <ToBudgetMenu
-              onTransfer={() => setMenuOpen('transfer')}
-              onCover={() => setMenuOpen('cover')}
-              onHoldBuffer={() => setMenuOpen('buffer')}
+              onTransfer={() => setMenuStep('transfer')}
+              onCover={() => setMenuStep('cover')}
+              onHoldBuffer={() => setMenuStep('buffer')}
               onResetHoldBuffer={() => {
                 onBudgetAction(month, 'reset-hold');
-                setMenuOpen(null);
+                setMenuOpen(false);
               }}
             />
           )}
-          {menuOpen === 'buffer' && (
+          {menuStep === 'buffer' && (
             <HoldMenu
-              onClose={() => setMenuOpen(null)}
+              onClose={() => setMenuOpen(false)}
               onSubmit={amount => {
                 onBudgetAction(month, 'hold', { amount });
               }}
             />
           )}
-          {menuOpen === 'transfer' && (
+          {menuStep === 'transfer' && (
             <TransferMenu
               initialAmount={availableValue ?? undefined}
-              onClose={() => setMenuOpen(null)}
+              onClose={() => setMenuOpen(false)}
               onSubmit={(amount, categoryId) => {
                 onBudgetAction(month, 'transfer-available', {
                   amount,
@@ -129,10 +125,10 @@ export function ToBudget({
               }}
             />
           )}
-          {menuOpen === 'cover' && (
+          {menuStep === 'cover' && (
             <CoverMenu
               showToBeBudgeted={false}
-              onClose={() => setMenuOpen(null)}
+              onClose={() => setMenuOpen(false)}
               onSubmit={categoryId => {
                 onBudgetAction(month, 'cover-overbudgeted', {
                   category: categoryId,
diff --git a/packages/desktop-client/src/components/payees/PayeeTableRow.tsx b/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
index dce345a3da8..5392c1a435e 100644
--- a/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
+++ b/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
@@ -1,10 +1,10 @@
 // @ts-strict-ignore
-import { memo, useRef, useState, type CSSProperties } from 'react';
+import { memo, useRef, type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { type PayeeEntity } from 'loot-core/src/types/models';
 
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useSelectedDispatch } from '../../hooks/useSelected';
 import { SvgArrowThinRight, SvgBookmark } from '../../icons/v1';
 import { theme } from '../../style';
@@ -111,10 +111,8 @@ export const PayeeTableRow = memo(
     const { t } = useTranslation();
 
     const triggerRef = useRef(null);
-    const [menuOpen, setMenuOpen] = useState(false);
-    const [crossOffset, setCrossOffset] = useState(0);
-    const [offset, setOffset] = useState(0);
-    const contextMenusEnabled = useFeatureFlag('contextMenus');
+    const { setMenuOpen, menuOpen, handleContextMenu, position } =
+      useContextMenu();
 
     return (
       <Row
@@ -137,22 +135,14 @@ export const PayeeTableRow = memo(
         }}
         data-focus-key={payee.id}
         onMouseEnter={() => onHover && onHover(payee.id)}
-        onContextMenu={e => {
-          if (!contextMenusEnabled) return;
-          e.preventDefault();
-          setMenuOpen(true);
-          const rect = e.currentTarget.getBoundingClientRect();
-          setCrossOffset(e.clientX - rect.left);
-          setOffset(e.clientY - rect.bottom);
-        }}
+        onContextMenu={handleContextMenu}
       >
         <Popover
           triggerRef={triggerRef}
           placement="bottom start"
           isOpen={menuOpen}
           onOpenChange={() => setMenuOpen(false)}
-          crossOffset={crossOffset}
-          offset={offset}
+          {...position}
           style={{ width: 200, margin: 1 }}
           isNonModal
         >
diff --git a/packages/desktop-client/src/components/rules/RuleRow.tsx b/packages/desktop-client/src/components/rules/RuleRow.tsx
index 2c59dcac267..10b67f30320 100644
--- a/packages/desktop-client/src/components/rules/RuleRow.tsx
+++ b/packages/desktop-client/src/components/rules/RuleRow.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { memo, useRef, useState } from 'react';
+import React, { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { v4 as uuid } from 'uuid';
@@ -7,7 +7,7 @@ import { v4 as uuid } from 'uuid';
 import { friendlyOp } from 'loot-core/src/shared/rules';
 import { type RuleEntity } from 'loot-core/src/types/models';
 
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useSelectedDispatch } from '../../hooks/useSelected';
 import { SvgRightArrow2 } from '../../icons/v0';
 import { styles, theme } from '../../style';
@@ -60,10 +60,8 @@ export const RuleRow = memo(
     const { t } = useTranslation();
 
     const triggerRef = useRef(null);
-    const [menuOpen, setMenuOpen] = useState(false);
-    const [crossOffset, setCrossOffset] = useState(0);
-    const [offset, setOffset] = useState(0);
-    const contextMenusEnabled = useFeatureFlag('contextMenus');
+    const { setMenuOpen, menuOpen, handleContextMenu, position } =
+      useContextMenu();
 
     return (
       <Row
@@ -82,22 +80,14 @@ export const RuleRow = memo(
         collapsed={true}
         onMouseEnter={() => onHover && onHover(rule.id)}
         onMouseLeave={() => onHover && onHover(null)}
-        onContextMenu={e => {
-          if (!contextMenusEnabled) return;
-          e.preventDefault();
-          setMenuOpen(true);
-          const rect = triggerRef.current.getBoundingClientRect();
-          setCrossOffset(e.clientX - rect.left);
-          setOffset(e.clientY - rect.bottom);
-        }}
+        onContextMenu={handleContextMenu}
       >
         <Popover
           triggerRef={triggerRef}
           placement="bottom start"
           isOpen={menuOpen}
           onOpenChange={() => setMenuOpen(false)}
-          crossOffset={crossOffset}
-          offset={offset}
+          {...position}
           style={{ width: 200, margin: 1 }}
           isNonModal
         >
diff --git a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
index 2d65f595667..fdaf1492302 100644
--- a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
+++ b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
@@ -13,6 +13,7 @@ import { integerToCurrency } from 'loot-core/src/shared/util';
 import { type ScheduleEntity } from 'loot-core/src/types/models';
 
 import { useAccounts } from '../../hooks/useAccounts';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useDateFormat } from '../../hooks/useDateFormat';
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { usePayees } from '../../hooks/usePayees';
@@ -186,10 +187,14 @@ function ScheduleRow({
 
   const rowRef = useRef(null);
   const buttonRef = useRef(null);
-  const [open, setOpen] = useState<false | 'contextMenu' | 'button'>(false);
-  const [crossOffset, setCrossOffset] = useState(0);
-  const [offset, setOffset] = useState(0);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
+  const {
+    setMenuOpen,
+    menuOpen,
+    handleContextMenu,
+    resetPosition,
+    position,
+    asContextMenu,
+  } = useContextMenu();
 
   return (
     <Row
@@ -203,25 +208,16 @@ function ScheduleRow({
         color: theme.tableText,
         ':hover': { backgroundColor: theme.tableRowBackgroundHover },
       }}
-      onContextMenu={e => {
-        if (!contextMenusEnabled) return;
-        if (minimal) return;
-        e.preventDefault();
-        const rect = e.currentTarget.getBoundingClientRect();
-        setCrossOffset(e.clientX - rect.left);
-        setOffset(e.clientY - rect.bottom);
-        setOpen('contextMenu');
-      }}
+      onContextMenu={handleContextMenu}
     >
       {!minimal && (
         <Popover
-          triggerRef={open === 'contextMenu' ? rowRef : buttonRef}
-          isOpen={!!open}
-          onOpenChange={() => setOpen(false)}
+          triggerRef={asContextMenu ? rowRef : buttonRef}
+          isOpen={menuOpen}
+          onOpenChange={() => setMenuOpen(false)}
           isNonModal
           placement="bottom start"
-          crossOffset={open === 'contextMenu' ? crossOffset : 0}
-          offset={open === 'contextMenu' ? offset : 0}
+          {...position}
           style={{ margin: 1 }}
         >
           <OverflowMenu
@@ -229,7 +225,8 @@ function ScheduleRow({
             status={statuses.get(schedule.id)}
             onAction={(action, id) => {
               onAction(action, id);
-              setOpen(false);
+              resetPosition();
+              setMenuOpen(false);
             }}
           />
         </Popover>
@@ -276,7 +273,8 @@ function ScheduleRow({
               variant="bare"
               aria-label={t('Menu')}
               onPress={() => {
-                setOpen('button');
+                resetPosition();
+                setMenuOpen(true);
               }}
             >
               <SvgDotsHorizontalTriple
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
index 152bed07a88..cfd0267543d 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
@@ -47,7 +47,7 @@ import {
   titleFirst,
 } from 'loot-core/src/shared/util';
 
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useMergedRefs } from '../../hooks/useMergedRefs';
 import { usePrevious } from '../../hooks/usePrevious';
 import { useProperFocus } from '../../hooks/useProperFocus';
@@ -1048,10 +1048,8 @@ const Transaction = memo(function Transaction({
     }, 1);
   }, [splitError, allTransactions]);
 
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [crossOffset, setCrossOffset] = useState(0);
-  const [offset, setOffset] = useState(0);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
+  const { setMenuOpen, menuOpen, handleContextMenu, position } =
+    useContextMenu();
 
   return (
     <Row
@@ -1081,23 +1079,14 @@ const Transaction = memo(function Transaction({
         }),
         ...(_unmatched && { opacity: 0.5 }),
       }}
-      onContextMenu={e => {
-        if (!contextMenusEnabled) return;
-        if (transaction.id === 'temp') return;
-        e.preventDefault();
-        const rect = e.currentTarget.getBoundingClientRect();
-        setCrossOffset(e.clientX - rect.left);
-        setOffset(e.clientY - rect.bottom);
-        setMenuOpen(true);
-      }}
+      onContextMenu={handleContextMenu}
     >
       <Popover
         triggerRef={triggerRef}
         placement="bottom start"
         isOpen={menuOpen}
         onOpenChange={() => setMenuOpen(false)}
-        crossOffset={crossOffset}
-        offset={offset}
+        {...position}
         style={{ width: 200, margin: 1 }}
         isNonModal
       >
diff --git a/packages/desktop-client/src/hooks/useContextMenu.ts b/packages/desktop-client/src/hooks/useContextMenu.ts
new file mode 100644
index 00000000000..69bbd0bd8ce
--- /dev/null
+++ b/packages/desktop-client/src/hooks/useContextMenu.ts
@@ -0,0 +1,40 @@
+import { type MouseEventHandler, useState } from 'react';
+
+import { useFeatureFlag } from './useFeatureFlag';
+
+export function useContextMenu() {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [asContextMenu, setAsContextMenu] = useState(false);
+  const [position, setPosition] = useState({ crossOffset: 0, offset: 0 });
+  const contextMenusEnabled = useFeatureFlag('contextMenus');
+
+  const handleContextMenu: MouseEventHandler<HTMLElement> = e => {
+    if (!contextMenusEnabled) return;
+
+    e.preventDefault();
+    setAsContextMenu(true);
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    setPosition({
+      crossOffset: e.clientX - rect.left,
+      offset: e.clientY - rect.bottom,
+    });
+    setMenuOpen(true);
+  };
+
+  const resetPosition = (crossOffset = 0, offset = 0) => {
+    setPosition({ crossOffset, offset });
+  };
+
+  return {
+    menuOpen,
+    setMenuOpen: (open: boolean) => {
+      setMenuOpen(open);
+      setAsContextMenu(false);
+    },
+    position,
+    handleContextMenu,
+    resetPosition,
+    asContextMenu,
+  };
+}

From 02b95787d3946e2fa09441d5dd0935b4d12efe06 Mon Sep 17 00:00:00 2001
From: UnderKoen <koenvanstaveren@hotmail.com>
Date: Mon, 9 Dec 2024 20:15:09 +0100
Subject: [PATCH 6/6] fix: linting

---
 .../src/components/budget/envelope/budgetsummary/ToBudget.tsx    | 1 -
 .../desktop-client/src/components/schedules/SchedulesTable.tsx   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
index c068f148553..343de06d6ba 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
@@ -1,7 +1,6 @@
 import React, {
   type CSSProperties,
   useCallback,
-  useEffect,
   useRef,
   useState,
 } from 'react';
diff --git a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
index fdaf1492302..e3a1782db6d 100644
--- a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
+++ b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
@@ -15,7 +15,6 @@ import { type ScheduleEntity } from 'loot-core/src/types/models';
 import { useAccounts } from '../../hooks/useAccounts';
 import { useContextMenu } from '../../hooks/useContextMenu';
 import { useDateFormat } from '../../hooks/useDateFormat';
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { usePayees } from '../../hooks/usePayees';
 import { SvgDotsHorizontalTriple } from '../../icons/v1';
 import { SvgCheck } from '../../icons/v2';