From 41d59226358c00e968f4dd97e2c7fdff1fc8fc9f Mon Sep 17 00:00:00 2001
From: Koen van Staveren <koenvanstaveren@hotmail.com>
Date: Sun, 3 Nov 2024 20:26:53 +0100
Subject: [PATCH 1/2] Add context menu's (#3381)

* feat: context menu on transactions

* feat: context menu's on budget page

* chore: release note

* fix: losing focus on context menu

* feat: schedules context menu

* feat: payees context menu

* feat: rules context menu

* chore: update release note

* chore: lint

* fix: broken balance movement menu

* fix: placement on context menu to be closer to cursor

* feat: context menu on budget field

* chore: lint

* Update packages/desktop-client/src/components/transactions/TransactionsTable.jsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* chore: fix merge

* fix: e2e test

* fix: moving of the popover in the sidebar

* chore: lint

* chore: add feature flag

* chore: fix tsc

* chore: fix test

* Update packages/desktop-client/src/components/settings/Experimental.tsx

Co-authored-by: Julian Dominguez-Schatz <julian.dominguezschatz@gmail.com>

* fix: to budget button

next steps didn't work

* chore: lint

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Julian Dominguez-Schatz <julian.dominguezschatz@gmail.com>
---
 .../src/components/ManageRules.tsx            |   8 +
 .../src/components/accounts/Account.tsx       |   9 +
 .../src/components/budget/SidebarCategory.tsx |  12 +-
 .../src/components/budget/SidebarGroup.tsx    |  12 +-
 .../budget/envelope/BalanceMovementMenu.tsx   |  18 +-
 .../envelope/EnvelopeBudgetComponents.tsx     |  15 ++
 .../envelope/budgetsummary/ToBudget.tsx       | 112 +++++----
 .../envelope/budgetsummary/ToBudgetAmount.tsx |   5 +-
 .../src/components/common/Popover.tsx         |  23 +-
 .../src/components/payees/ManagePayees.tsx    |   9 +-
 .../src/components/payees/PayeeTable.tsx      |  96 ++++----
 .../src/components/payees/PayeeTableRow.tsx   |  70 +++++-
 .../src/components/rules/RuleRow.tsx          |  66 ++++-
 .../src/components/rules/RulesList.tsx        |   3 +
 .../components/schedules/SchedulesTable.tsx   | 226 +++++++++++-------
 .../src/components/settings/Experimental.tsx  |   6 +
 .../transactions/TransactionList.jsx          |  14 ++
 .../transactions/TransactionMenu.tsx          | 139 +++++++++++
 .../transactions/TransactionsTable.jsx        |  84 +++++++
 .../transactions/TransactionsTable.test.jsx   |   3 +
 .../src/hooks/useFeatureFlag.ts               |   1 +
 packages/loot-core/src/types/prefs.d.ts       |   3 +-
 upcoming-release-notes/3381.md                |   6 +
 23 files changed, 742 insertions(+), 198 deletions(-)
 create mode 100644 packages/desktop-client/src/components/transactions/TransactionMenu.tsx
 create mode 100644 upcoming-release-notes/3381.md

diff --git a/packages/desktop-client/src/components/ManageRules.tsx b/packages/desktop-client/src/components/ManageRules.tsx
index f3eb583005a..bb9ce717ae5 100644
--- a/packages/desktop-client/src/components/ManageRules.tsx
+++ b/packages/desktop-client/src/components/ManageRules.tsx
@@ -204,6 +204,13 @@ export function ManageRules({
     setLoading(false);
   }
 
+  async function onDeleteRule(id: string) {
+    setLoading(true);
+    await send('rule-delete', id);
+    await loadRules();
+    setLoading(false);
+  }
+
   const onEditRule = useCallback(rule => {
     dispatch(
       pushModal('edit-rule', {
@@ -306,6 +313,7 @@ export function ManageRules({
                 hoveredRule={hoveredRule}
                 onHover={onHover}
                 onEditRule={onEditRule}
+                onDeleteRule={rule => onDeleteRule(rule.id)}
               />
             )}
           </SimpleTable>
diff --git a/packages/desktop-client/src/components/accounts/Account.tsx b/packages/desktop-client/src/components/accounts/Account.tsx
index 1a8009db0b5..37936e10c7d 100644
--- a/packages/desktop-client/src/components/accounts/Account.tsx
+++ b/packages/desktop-client/src/components/accounts/Account.tsx
@@ -1803,6 +1803,15 @@ class AccountInternal extends PureComponent<
                   sortField={this.state.sort?.field}
                   ascDesc={this.state.sort?.ascDesc}
                   onChange={this.onTransactionsChange}
+                  onBatchDelete={this.onBatchDelete}
+                  onBatchDuplicate={this.onBatchDuplicate}
+                  onBatchLinkSchedule={this.onBatchLinkSchedule}
+                  onBatchUnlinkSchedule={this.onBatchUnlinkSchedule}
+                  onCreateRule={this.onCreateRule}
+                  onScheduleAction={this.onScheduleAction}
+                  onMakeAsNonSplitTransactions={
+                    this.onMakeAsNonSplitTransactions
+                  }
                   onRefetch={this.refetchTransactions}
                   onCloseAddTransaction={() =>
                     this.setState({ isAdding: false })
diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
index 7e20348176b..4d3b53e7a04 100644
--- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -7,6 +7,7 @@ import {
   type CategoryEntity,
 } from 'loot-core/src/types/models';
 
+import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgCheveronDown } from '../../icons/v1';
 import { theme } from '../../style';
 import { Button } from '../common/Button2';
@@ -51,6 +52,7 @@ export function SidebarCategory({
   const temporary = category.id === 'new';
   const [menuOpen, setMenuOpen] = useState(false);
   const triggerRef = useRef(null);
+  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   const displayed = (
     <View
@@ -61,6 +63,13 @@ export function SidebarCategory({
         WebkitUserSelect: 'none',
         opacity: category.hidden || categoryGroup?.hidden ? 0.33 : undefined,
         backgroundColor: 'transparent',
+        height: 20,
+      }}
+      ref={triggerRef}
+      onContextMenu={e => {
+        if (!contextMenusEnabled) return;
+        e.preventDefault();
+        setMenuOpen(true);
       }}
     >
       <div
@@ -74,7 +83,7 @@ export function SidebarCategory({
       >
         {category.name}
       </div>
-      <View style={{ flexShrink: 0, marginLeft: 5 }} ref={triggerRef}>
+      <View style={{ flexShrink: 0, marginLeft: 5 }}>
         <Button
           variant="bare"
           className="hover-visible"
@@ -94,6 +103,7 @@ export function SidebarCategory({
           isOpen={menuOpen}
           onOpenChange={() => setMenuOpen(false)}
           style={{ width: 200 }}
+          isNonModal
         >
           <Menu
             onMenuSelect={type => {
diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
index eb342f79fa6..530c8f334a5 100644
--- a/packages/desktop-client/src/components/budget/SidebarGroup.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -3,6 +3,7 @@ import React, { type CSSProperties, useRef, useState } from 'react';
 import { type ConnectDragSource } from 'react-dnd';
 import { useTranslation } from 'react-i18next';
 
+import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgExpandArrow } from '../../icons/v0';
 import { SvgCheveronDown } from '../../icons/v1';
 import { theme } from '../../style';
@@ -56,6 +57,7 @@ export function SidebarGroup({
   const temporary = group.id === 'new';
   const [menuOpen, setMenuOpen] = useState(false);
   const triggerRef = useRef(null);
+  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   const displayed = (
     <View
@@ -64,10 +66,17 @@ export function SidebarGroup({
         alignItems: 'center',
         userSelect: 'none',
         WebkitUserSelect: 'none',
+        height: 20,
       }}
+      ref={triggerRef}
       onClick={() => {
         onToggleCollapse(group.id);
       }}
+      onContextMenu={e => {
+        if (!contextMenusEnabled) return;
+        e.preventDefault();
+        setMenuOpen(true);
+      }}
     >
       {!dragPreview && (
         <SvgExpandArrow
@@ -95,7 +104,7 @@ export function SidebarGroup({
       </div>
       {!dragPreview && (
         <>
-          <View style={{ marginLeft: 5, flexShrink: 0 }} ref={triggerRef}>
+          <View style={{ marginLeft: 5, flexShrink: 0 }}>
             <Button
               variant="bare"
               className="hover-visible"
@@ -111,6 +120,7 @@ export function SidebarGroup({
               isOpen={menuOpen}
               onOpenChange={() => setMenuOpen(false)}
               style={{ width: 200 }}
+              isNonModal
             >
               <Menu
                 onMenuSelect={type => {
diff --git a/packages/desktop-client/src/components/budget/envelope/BalanceMovementMenu.tsx b/packages/desktop-client/src/components/budget/envelope/BalanceMovementMenu.tsx
index eed672b2acf..f83ce9f2d63 100644
--- a/packages/desktop-client/src/components/budget/envelope/BalanceMovementMenu.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/BalanceMovementMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 
@@ -23,10 +23,20 @@ export function BalanceMovementMenu({
   const catBalance = useEnvelopeSheetValue(
     envelopeBudget.catBalance(categoryId),
   );
-  const [menu, setMenu] = useState('menu');
+  const [menu, _setMenu] = useState('menu');
+
+  const ref = useRef<HTMLSpanElement>(null);
+  // Keep focus inside the popover on menu change
+  const setMenu = useCallback(
+    (menu: string) => {
+      ref.current?.focus();
+      _setMenu(menu);
+    },
+    [ref],
+  );
 
   return (
-    <>
+    <span tabIndex={-1} ref={ref}>
       {menu === 'menu' && (
         <BalanceMenu
           categoryId={categoryId}
@@ -70,6 +80,6 @@ export function BalanceMovementMenu({
           }}
         />
       )}
-    </>
+    </span>
   );
 }
diff --git a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
index b51f4f51993..78a42e0fd8d 100644
--- a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
@@ -14,6 +14,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 { useUndo } from '../../../hooks/useUndo';
 import { SvgCheveronDown } from '../../../icons/v1';
 import { styles, theme } from '../../../style';
@@ -215,6 +216,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
   };
 
   const { showUndoNotification } = useUndo();
+  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   return (
     <View
@@ -238,6 +240,12 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           flex: 1,
           flexDirection: 'row',
         }}
+        onContextMenu={e => {
+          if (!contextMenusEnabled) return;
+          if (editing) return;
+          e.preventDefault();
+          setBudgetMenuOpen(true);
+        }}
       >
         {!editing && (
           <View
@@ -274,6 +282,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
               isOpen={budgetMenuOpen}
               onOpenChange={() => setBudgetMenuOpen(false)}
               style={{ width: 200 }}
+              isNonModal
             >
               <BudgetMenu
                 onCopyLastMonthAverage={() => {
@@ -390,6 +399,11 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
         <span
           ref={balanceMenuTriggerRef}
           onClick={() => setBalanceMenuOpen(true)}
+          onContextMenu={e => {
+            if (!contextMenusEnabled) return;
+            e.preventDefault();
+            setBalanceMenuOpen(true);
+          }}
         >
           <BalanceWithCarryover
             carryover={envelopeBudget.catCarryover(category.id)}
@@ -406,6 +420,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           isOpen={balanceMenuOpen}
           onOpenChange={() => setBalanceMenuOpen(false)}
           style={{ width: 200 }}
+          isNonModal
         >
           <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 e9a6ad3be96..09316daae98 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,13 @@
-import React, { useRef, useState, type CSSProperties } from 'react';
+import React, {
+  useRef,
+  useState,
+  type CSSProperties,
+  useCallback,
+} from 'react';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 
+import { useFeatureFlag } from '../../../../hooks/useFeatureFlag';
 import { Popover } from '../../../common/Popover';
 import { View } from '../../../common/View';
 import { CoverMenu } from '../CoverMenu';
@@ -28,8 +34,17 @@ export function ToBudget({
   amountStyle,
   isCollapsed = false,
 }: ToBudgetProps) {
-  const [menuOpen, setMenuOpen] = useState<string | null>(null);
+  const [menuOpen, _setMenuOpen] = useState<string | null>(null);
   const triggerRef = useRef(null);
+
+  const ref = useRef<HTMLSpanElement>(null);
+  const setMenuOpen = useCallback(
+    (menu: string | null) => {
+      if (menu) ref.current?.focus();
+      _setMenuOpen(menu);
+    },
+    [ref],
+  );
   const sheetValue = useEnvelopeSheetValue({
     name: envelopeBudget.toBudget,
     value: 0,
@@ -41,6 +56,7 @@ export function ToBudget({
     );
   }
   const isMenuOpen = Boolean(menuOpen);
+  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   return (
     <>
@@ -51,6 +67,11 @@ export function ToBudget({
           style={style}
           amountStyle={amountStyle}
           isTotalsListTooltipDisabled={!isCollapsed || isMenuOpen}
+          onContextMenu={e => {
+            if (!contextMenusEnabled) return;
+            e.preventDefault();
+            setMenuOpen('actions');
+          }}
         />
       </View>
 
@@ -60,49 +81,52 @@ export function ToBudget({
         isOpen={isMenuOpen}
         onOpenChange={() => setMenuOpen(null)}
         style={{ width: 200 }}
+        isNonModal
       >
-        {menuOpen === 'actions' && (
-          <ToBudgetMenu
-            onTransfer={() => setMenuOpen('transfer')}
-            onCover={() => setMenuOpen('cover')}
-            onHoldBuffer={() => setMenuOpen('buffer')}
-            onResetHoldBuffer={() => {
-              onBudgetAction(month, 'reset-hold');
-              setMenuOpen(null);
-            }}
-          />
-        )}
-        {menuOpen === 'buffer' && (
-          <HoldMenu
-            onClose={() => setMenuOpen(null)}
-            onSubmit={amount => {
-              onBudgetAction(month, 'hold', { amount });
-            }}
-          />
-        )}
-        {menuOpen === 'transfer' && (
-          <TransferMenu
-            initialAmount={availableValue ?? undefined}
-            onClose={() => setMenuOpen(null)}
-            onSubmit={(amount, categoryId) => {
-              onBudgetAction(month, 'transfer-available', {
-                amount,
-                category: categoryId,
-              });
-            }}
-          />
-        )}
-        {menuOpen === 'cover' && (
-          <CoverMenu
-            showToBeBudgeted={false}
-            onClose={() => setMenuOpen(null)}
-            onSubmit={categoryId => {
-              onBudgetAction(month, 'cover-overbudgeted', {
-                category: categoryId,
-              });
-            }}
-          />
-        )}
+        <span tabIndex={-1} ref={ref}>
+          {menuOpen === 'actions' && (
+            <ToBudgetMenu
+              onTransfer={() => setMenuOpen('transfer')}
+              onCover={() => setMenuOpen('cover')}
+              onHoldBuffer={() => setMenuOpen('buffer')}
+              onResetHoldBuffer={() => {
+                onBudgetAction(month, 'reset-hold');
+                setMenuOpen(null);
+              }}
+            />
+          )}
+          {menuOpen === 'buffer' && (
+            <HoldMenu
+              onClose={() => setMenuOpen(null)}
+              onSubmit={amount => {
+                onBudgetAction(month, 'hold', { amount });
+              }}
+            />
+          )}
+          {menuOpen === 'transfer' && (
+            <TransferMenu
+              initialAmount={availableValue ?? undefined}
+              onClose={() => setMenuOpen(null)}
+              onSubmit={(amount, categoryId) => {
+                onBudgetAction(month, 'transfer-available', {
+                  amount,
+                  category: categoryId,
+                });
+              }}
+            />
+          )}
+          {menuOpen === 'cover' && (
+            <CoverMenu
+              showToBeBudgeted={false}
+              onClose={() => setMenuOpen(null)}
+              onSubmit={categoryId => {
+                onBudgetAction(month, 'cover-overbudgeted', {
+                  category: categoryId,
+                });
+              }}
+            />
+          )}
+        </span>
       </Popover>
     </>
   );
diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx
index 37929d8c444..5eecae65278 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx
@@ -1,4 +1,4 @@
-import React, { type CSSProperties } from 'react';
+import React, { type CSSProperties, type MouseEventHandler } from 'react';
 
 import { css } from '@emotion/css';
 
@@ -22,6 +22,7 @@ type ToBudgetAmountProps = {
   style?: CSSProperties;
   amountStyle?: CSSProperties;
   onClick: () => void;
+  onContextMenu?: MouseEventHandler;
   isTotalsListTooltipDisabled?: boolean;
 };
 
@@ -31,6 +32,7 @@ export function ToBudgetAmount({
   amountStyle,
   onClick,
   isTotalsListTooltipDisabled = false,
+  onContextMenu,
 }: ToBudgetAmountProps) {
   const sheetName = useEnvelopeSheetName(envelopeBudget.toBudget);
   const sheetValue = useEnvelopeSheetValue({
@@ -71,6 +73,7 @@ export function ToBudgetAmount({
           >
             <Block
               onClick={onClick}
+              onContextMenu={onContextMenu}
               data-cellname={sheetName}
               className={css([
                 styles.veryLargeText,
diff --git a/packages/desktop-client/src/components/common/Popover.tsx b/packages/desktop-client/src/components/common/Popover.tsx
index dd2c61522bb..79fe2e3f8f0 100644
--- a/packages/desktop-client/src/components/common/Popover.tsx
+++ b/packages/desktop-client/src/components/common/Popover.tsx
@@ -1,4 +1,4 @@
-import { type ComponentProps } from 'react';
+import { type ComponentProps, useCallback, useEffect, useRef } from 'react';
 import { Popover as ReactAriaPopover } from 'react-aria-components';
 
 import { css } from '@emotion/css';
@@ -12,8 +12,29 @@ export const Popover = ({
   shouldCloseOnInteractOutside,
   ...props
 }: PopoverProps) => {
+  const ref = useRef<HTMLElement>(null);
+
+  const handleFocus = useCallback(
+    (e: FocusEvent) => {
+      if (!ref.current?.contains(e.relatedTarget as Node)) {
+        props.onOpenChange?.(false);
+      }
+    },
+    [props],
+  );
+
+  useEffect(() => {
+    if (!props.isNonModal) return;
+    if (props.isOpen) {
+      ref.current?.addEventListener('focusout', handleFocus);
+    } else {
+      ref.current?.removeEventListener('focusout', handleFocus);
+    }
+  }, [handleFocus, props.isNonModal, props.isOpen]);
+
   return (
     <ReactAriaPopover
+      ref={ref}
       placement="bottom end"
       offset={1}
       className={css({
diff --git a/packages/desktop-client/src/components/payees/ManagePayees.tsx b/packages/desktop-client/src/components/payees/ManagePayees.tsx
index effb205269c..3144531d8cd 100644
--- a/packages/desktop-client/src/components/payees/ManagePayees.tsx
+++ b/packages/desktop-client/src/components/payees/ManagePayees.tsx
@@ -138,9 +138,11 @@ export const ManagePayees = ({
     );
   }, [filteredPayees]);
 
-  function onDelete() {
-    onBatchChange({ deleted: [...selected.items].map(id => ({ id })) });
-    selected.dispatch({ type: 'select-none' });
+  function onDelete(ids?: { id: string }[]) {
+    onBatchChange({
+      deleted: ids ?? [...selected.items].map(id => ({ id })),
+    });
+    if (!ids) selected.dispatch({ type: 'select-none' });
   }
 
   function onFavorite() {
@@ -276,6 +278,7 @@ export const ManagePayees = ({
               onUpdate={onUpdate}
               onViewRules={onViewRules}
               onCreateRule={onCreateRule}
+              onDelete={id => onDelete([{ id }])}
             />
           )}
         </View>
diff --git a/packages/desktop-client/src/components/payees/PayeeTable.tsx b/packages/desktop-client/src/components/payees/PayeeTable.tsx
index b23cdbf490a..db7da88555c 100644
--- a/packages/desktop-client/src/components/payees/PayeeTable.tsx
+++ b/packages/desktop-client/src/components/payees/PayeeTable.tsx
@@ -25,59 +25,65 @@ type PayeeTableProps = {
   ruleCounts: Map<PayeeWithId['id'], number>;
 } & Pick<
   ComponentProps<typeof PayeeTableRow>,
-  'onUpdate' | 'onViewRules' | 'onCreateRule'
+  'onUpdate' | 'onDelete' | 'onViewRules' | 'onCreateRule'
 >;
 
 export const PayeeTable = forwardRef<
   ComponentRef<typeof Table<PayeeWithId>>,
   PayeeTableProps
->(({ payees, ruleCounts, onUpdate, onViewRules, onCreateRule }, ref) => {
-  const [hovered, setHovered] = useState(null);
-  const selectedItems = useSelectedItems();
+>(
+  (
+    { payees, ruleCounts, onUpdate, onDelete, onViewRules, onCreateRule },
+    ref,
+  ) => {
+    const [hovered, setHovered] = useState(null);
+    const selectedItems = useSelectedItems();
 
-  useLayoutEffect(() => {
-    const firstSelected = [...selectedItems][0] as string;
-    if (typeof ref !== 'function') {
-      ref.current.scrollTo(firstSelected, 'center');
-    }
-  }, []);
+    useLayoutEffect(() => {
+      const firstSelected = [...selectedItems][0] as string;
+      if (typeof ref !== 'function') {
+        ref.current.scrollTo(firstSelected, 'center');
+      }
+    }, []);
 
-  const onHover = useCallback(id => {
-    setHovered(id);
-  }, []);
+    const onHover = useCallback(id => {
+      setHovered(id);
+    }, []);
 
-  const tableNavigator = useTableNavigator(payees, item =>
-    item.transfer_acct == null
-      ? ['select', 'name', 'rule-count']
-      : ['rule-count'],
-  );
+    const tableNavigator = useTableNavigator(payees, item =>
+      item.transfer_acct == null
+        ? ['select', 'name', 'rule-count']
+        : ['rule-count'],
+    );
 
-  return (
-    <View style={{ flex: 1 }} onMouseLeave={() => setHovered(null)}>
-      <Table
-        navigator={tableNavigator}
-        ref={ref}
-        items={payees}
-        renderItem={({ item, editing, focusedField, onEdit }) => {
-          return (
-            <PayeeTableRow
-              payee={item}
-              ruleCount={ruleCounts.get(item.id) || 0}
-              selected={selectedItems.has(item.id)}
-              editing={editing}
-              focusedField={focusedField}
-              hovered={hovered === item.id}
-              onHover={onHover}
-              onEdit={onEdit}
-              onUpdate={onUpdate}
-              onViewRules={onViewRules}
-              onCreateRule={onCreateRule}
-            />
-          );
-        }}
-      />
-    </View>
-  );
-});
+    return (
+      <View style={{ flex: 1 }} onMouseLeave={() => setHovered(null)}>
+        <Table
+          navigator={tableNavigator}
+          ref={ref}
+          items={payees}
+          renderItem={({ item, editing, focusedField, onEdit }) => {
+            return (
+              <PayeeTableRow
+                payee={item}
+                ruleCount={ruleCounts.get(item.id) || 0}
+                selected={selectedItems.has(item.id)}
+                editing={editing}
+                focusedField={focusedField}
+                hovered={hovered === item.id}
+                onHover={onHover}
+                onEdit={onEdit}
+                onUpdate={onUpdate}
+                onDelete={onDelete}
+                onViewRules={onViewRules}
+                onCreateRule={onCreateRule}
+              />
+            );
+          }}
+        />
+      </View>
+    );
+  },
+);
 
 PayeeTable.displayName = 'PayeeTable';
diff --git a/packages/desktop-client/src/components/payees/PayeeTableRow.tsx b/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
index b0464a2bc9d..dce345a3da8 100644
--- a/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
+++ b/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
@@ -1,12 +1,15 @@
 // @ts-strict-ignore
-import { memo, type CSSProperties } from 'react';
+import { memo, useRef, useState, 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 { useSelectedDispatch } from '../../hooks/useSelected';
 import { SvgArrowThinRight, SvgBookmark } from '../../icons/v1';
 import { theme } from '../../style';
+import { Menu } from '../common/Menu';
+import { Popover } from '../common/Popover';
 import { Text } from '../common/Text';
 import {
   Cell,
@@ -76,6 +79,7 @@ type PayeeTableRowProps = {
     field: T,
     value: PayeeEntity[T],
   ) => void;
+  onDelete: (id: PayeeEntity['id']) => void;
   onViewRules: (id: PayeeEntity['id']) => void;
   onCreateRule: (id: PayeeEntity['id']) => void;
   style?: CSSProperties;
@@ -92,12 +96,11 @@ export const PayeeTableRow = memo(
     onViewRules,
     onCreateRule,
     onHover,
+    onDelete,
     onEdit,
     onUpdate,
     style,
   }: PayeeTableRowProps) => {
-    const { t } = useTranslation();
-
     const { id } = payee;
     const dispatchSelected = useSelectedDispatch();
     const borderColor = selected
@@ -105,8 +108,17 @@ export const PayeeTableRow = memo(
       : theme.tableBorder;
     const backgroundFocus = hovered || focusedField === 'select';
 
+    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');
+
     return (
       <Row
+        ref={triggerRef}
         style={{
           alignItems: 'stretch',
           ...style,
@@ -125,7 +137,59 @@ 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);
+        }}
       >
+        <Popover
+          triggerRef={triggerRef}
+          placement="bottom start"
+          isOpen={menuOpen}
+          onOpenChange={() => setMenuOpen(false)}
+          crossOffset={crossOffset}
+          offset={offset}
+          style={{ width: 200, margin: 1 }}
+          isNonModal
+        >
+          <Menu
+            items={[
+              payee.transfer_acct == null && {
+                name: 'delete',
+                text: t('Delete'),
+              },
+              payee.transfer_acct == null && {
+                name: 'favorite',
+                text: payee.favorite ? t('Unfavorite') : t('Favorite'),
+              },
+              ruleCount > 0 && { name: 'view-rules', text: t('View rules') },
+              { name: 'create-rule', text: t('Create rule') },
+            ]}
+            onMenuSelect={name => {
+              switch (name) {
+                case 'delete':
+                  onDelete(id);
+                  break;
+                case 'favorite':
+                  onUpdate(id, 'favorite', payee.favorite ? 0 : 1);
+                  break;
+                case 'view-rules':
+                  onViewRules(id);
+                  break;
+                case 'create-rule':
+                  onCreateRule(id);
+                  break;
+                default:
+                  throw new Error(`Unrecognized menu option: ${name}`);
+              }
+              setMenuOpen(false);
+            }}
+          />
+        </Popover>
         <SelectCell
           exposed={
             payee.transfer_acct == null && (hovered || selected || editing)
diff --git a/packages/desktop-client/src/components/rules/RuleRow.tsx b/packages/desktop-client/src/components/rules/RuleRow.tsx
index c5c17a5106a..84ac48f182d 100644
--- a/packages/desktop-client/src/components/rules/RuleRow.tsx
+++ b/packages/desktop-client/src/components/rules/RuleRow.tsx
@@ -1,15 +1,19 @@
 // @ts-strict-ignore
-import React, { memo } from 'react';
+import React, { memo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 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 { useSelectedDispatch } from '../../hooks/useSelected';
 import { SvgRightArrow2 } from '../../icons/v0';
 import { styles, theme } from '../../style';
 import { Button } from '../common/Button2';
+import { Menu } from '../common/Menu';
+import { Popover } from '../common/Popover';
 import { Stack } from '../common/Stack';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
@@ -24,10 +28,18 @@ type RuleRowProps = {
   selected?: boolean;
   onHover?: (id: string | null) => void;
   onEditRule?: (rule: RuleEntity) => void;
+  onDeleteRule?: (rule: RuleEntity) => void;
 };
 
 export const RuleRow = memo(
-  ({ rule, hovered, selected, onHover, onEditRule }: RuleRowProps) => {
+  ({
+    rule,
+    hovered,
+    selected,
+    onHover,
+    onEditRule,
+    onDeleteRule,
+  }: RuleRowProps) => {
     const dispatchSelected = useSelectedDispatch();
     const borderColor = selected ? theme.tableBorderSelected : 'none';
     const backgroundFocus = hovered;
@@ -43,8 +55,19 @@ export const RuleRow = memo(
     );
     const hasSplits = actionSplits.length > 1;
 
+    const hasSchedule = rule.actions.some(({ op }) => op === 'link-schedule');
+
+    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');
+
     return (
       <Row
+        ref={triggerRef}
         height="auto"
         style={{
           fontSize: 13,
@@ -59,7 +82,46 @@ 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);
+        }}
       >
+        <Popover
+          triggerRef={triggerRef}
+          placement="bottom start"
+          isOpen={menuOpen}
+          onOpenChange={() => setMenuOpen(false)}
+          crossOffset={crossOffset}
+          offset={offset}
+          style={{ width: 200, margin: 1 }}
+          isNonModal
+        >
+          <Menu
+            items={[
+              onEditRule && { name: 'edit', text: t('Edit') },
+              onDeleteRule &&
+                !hasSchedule && { name: 'delete', text: t('Delete') },
+            ]}
+            onMenuSelect={name => {
+              switch (name) {
+                case 'delete':
+                  onDeleteRule(rule);
+                  break;
+                case 'edit':
+                  onEditRule(rule);
+                  break;
+                default:
+                  throw new Error(`Unrecognized menu option: ${name}`);
+              }
+              setMenuOpen(false);
+            }}
+          />
+        </Popover>
         <SelectCell
           exposed={hovered || selected}
           focused={true}
diff --git a/packages/desktop-client/src/components/rules/RulesList.tsx b/packages/desktop-client/src/components/rules/RulesList.tsx
index 424c50dee1a..0be3150080e 100644
--- a/packages/desktop-client/src/components/rules/RulesList.tsx
+++ b/packages/desktop-client/src/components/rules/RulesList.tsx
@@ -13,6 +13,7 @@ type RulesListProps = {
   hoveredRule?: string;
   onHover?: (id: string | null) => void;
   onEditRule?: (rule: RuleEntity) => void;
+  onDeleteRule?: (rule: RuleEntity) => void;
 };
 
 export function RulesList({
@@ -21,6 +22,7 @@ export function RulesList({
   hoveredRule,
   onHover,
   onEditRule,
+  onDeleteRule,
 }: RulesListProps) {
   if (rules.length === 0) {
     return null;
@@ -40,6 +42,7 @@ export function RulesList({
             selected={selected}
             onHover={onHover}
             onEditRule={onEditRule}
+            onDeleteRule={onDeleteRule}
           />
         );
       })}
diff --git a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
index dbeab7ef2ab..fe5380710c7 100644
--- a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
+++ b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
@@ -14,6 +14,7 @@ import { type ScheduleEntity } from 'loot-core/src/types/models';
 
 import { useAccounts } from '../../hooks/useAccounts';
 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';
@@ -64,9 +65,6 @@ function OverflowMenu({
 }) {
   const { t } = useTranslation();
 
-  const triggerRef = useRef(null);
-  const [open, setOpen] = useState(false);
-
   const getMenuItems = () => {
     const menuItems: { name: ScheduleItemAction; text: string }[] = [];
 
@@ -99,36 +97,12 @@ function OverflowMenu({
   };
 
   return (
-    <View>
-      <Button
-        ref={triggerRef}
-        variant="bare"
-        aria-label={t('Menu')}
-        onPress={() => {
-          setOpen(true);
-        }}
-      >
-        <SvgDotsHorizontalTriple
-          width={15}
-          height={15}
-          style={{ transform: 'rotateZ(90deg)' }}
-        />
-      </Button>
-
-      <Popover
-        triggerRef={triggerRef}
-        isOpen={open}
-        onOpenChange={() => setOpen(false)}
-      >
-        <Menu
-          onMenuSelect={name => {
-            onAction(name, schedule.id);
-            setOpen(false);
-          }}
-          items={getMenuItems()}
-        />
-      </Popover>
-    </View>
+    <Menu
+      onMenuSelect={name => {
+        onAction(name, schedule.id);
+      }}
+      items={getMenuItems()}
+    />
   );
 }
 
@@ -196,6 +170,127 @@ export function ScheduleAmountCell({
   );
 }
 
+function ScheduleRow({
+  schedule,
+  onAction,
+  onSelect,
+  minimal,
+  statuses,
+  dateFormat,
+}: { schedule: ScheduleEntity; dateFormat: string } & Pick<
+  SchedulesTableProps,
+  'onSelect' | 'onAction' | 'minimal' | 'statuses'
+>) {
+  const { t } = useTranslation();
+
+  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');
+
+  return (
+    <Row
+      ref={rowRef}
+      height={ROW_HEIGHT}
+      inset={15}
+      onClick={() => onSelect(schedule.id)}
+      style={{
+        cursor: 'pointer',
+        backgroundColor: theme.tableBackground,
+        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');
+      }}
+    >
+      {!minimal && (
+        <Popover
+          triggerRef={open === 'contextMenu' ? rowRef : buttonRef}
+          isOpen={!!open}
+          onOpenChange={() => setOpen(false)}
+          isNonModal
+          placement="bottom start"
+          crossOffset={open === 'contextMenu' ? crossOffset : 0}
+          offset={open === 'contextMenu' ? offset : 0}
+          style={{ margin: 1 }}
+        >
+          <OverflowMenu
+            schedule={schedule}
+            status={statuses.get(schedule.id)}
+            onAction={(action, id) => {
+              onAction(action, id);
+              setOpen(false);
+            }}
+          />
+        </Popover>
+      )}
+      <Field width="flex" name="name">
+        <Text
+          style={
+            schedule.name == null
+              ? { color: theme.buttonNormalDisabledText }
+              : null
+          }
+          title={schedule.name ? schedule.name : ''}
+        >
+          {schedule.name ? schedule.name : t('None')}
+        </Text>
+      </Field>
+      <Field width="flex" name="payee">
+        <DisplayId type="payees" id={schedule._payee} />
+      </Field>
+      <Field width="flex" name="account">
+        <DisplayId type="accounts" id={schedule._account} />
+      </Field>
+      <Field width={110} name="date">
+        {schedule.next_date
+          ? monthUtilFormat(schedule.next_date, dateFormat)
+          : null}
+      </Field>
+      <Field width={120} name="status" style={{ alignItems: 'flex-start' }}>
+        <StatusBadge status={statuses.get(schedule.id)} />
+      </Field>
+      <ScheduleAmountCell amount={schedule._amount} op={schedule._amountOp} />
+      {!minimal && (
+        <Field width={80} style={{ textAlign: 'center' }}>
+          {schedule._date && schedule._date.frequency && (
+            <SvgCheck style={{ width: 13, height: 13 }} />
+          )}
+        </Field>
+      )}
+      {!minimal && (
+        <Field width={40} name="actions">
+          <View>
+            <Button
+              ref={buttonRef}
+              variant="bare"
+              aria-label={t('Menu')}
+              onPress={() => {
+                setOpen('button');
+              }}
+            >
+              <SvgDotsHorizontalTriple
+                width={15}
+                height={15}
+                style={{ transform: 'rotateZ(90deg)' }}
+              />
+            </Button>
+          </View>
+        </Field>
+      )}
+    </Row>
+  );
+}
+
 export function SchedulesTable({
   schedules,
   statuses,
@@ -267,64 +362,6 @@ export function SchedulesTable({
     return [...unCompletedSchedules, { id: 'show-completed' }];
   }, [filteredSchedules, showCompleted, allowCompleted]);
 
-  function renderSchedule({ schedule }: { schedule: ScheduleEntity }) {
-    return (
-      <Row
-        height={ROW_HEIGHT}
-        inset={15}
-        onClick={() => onSelect(schedule.id)}
-        style={{
-          cursor: 'pointer',
-          backgroundColor: theme.tableBackground,
-          color: theme.tableText,
-          ':hover': { backgroundColor: theme.tableRowBackgroundHover },
-        }}
-      >
-        <Field width="flex" name="name">
-          <Text
-            style={
-              !schedule.name ? { color: theme.buttonNormalDisabledText } : null
-            }
-            title={schedule.name ? schedule.name : ''}
-          >
-            {schedule.name ? schedule.name : t('None')}
-          </Text>
-        </Field>
-        <Field width="flex" name="payee">
-          <DisplayId type="payees" id={schedule._payee} />
-        </Field>
-        <Field width="flex" name="account">
-          <DisplayId type="accounts" id={schedule._account} />
-        </Field>
-        <Field width={110} name="date">
-          {schedule.next_date
-            ? monthUtilFormat(schedule.next_date, dateFormat)
-            : null}
-        </Field>
-        <Field width={120} name="status" style={{ alignItems: 'flex-start' }}>
-          <StatusBadge status={statuses.get(schedule.id)} />
-        </Field>
-        <ScheduleAmountCell amount={schedule._amount} op={schedule._amountOp} />
-        {!minimal && (
-          <Field width={80} style={{ textAlign: 'center' }}>
-            {schedule._date && schedule._date.frequency && (
-              <SvgCheck style={{ width: 13, height: 13 }} />
-            )}
-          </Field>
-        )}
-        {!minimal && (
-          <Field width={40} name="actions">
-            <OverflowMenu
-              schedule={schedule}
-              status={statuses.get(schedule.id)}
-              onAction={onAction}
-            />
-          </Field>
-        )}
-      </Row>
-    );
-  }
-
   function renderItem({ item }: { item: SchedulesTableItem }) {
     if (item.id === 'show-completed') {
       return (
@@ -351,7 +388,12 @@ export function SchedulesTable({
         </Row>
       );
     }
-    return renderSchedule({ schedule: item as ScheduleEntity });
+    return (
+      <ScheduleRow
+        schedule={item as ScheduleEntity}
+        {...{ statuses, dateFormat, onSelect, onAction, minimal }}
+      />
+    );
   }
 
   return (
diff --git a/packages/desktop-client/src/components/settings/Experimental.tsx b/packages/desktop-client/src/components/settings/Experimental.tsx
index 6e57567032b..d60e50b844b 100644
--- a/packages/desktop-client/src/components/settings/Experimental.tsx
+++ b/packages/desktop-client/src/components/settings/Experimental.tsx
@@ -115,6 +115,12 @@ export function ExperimentalFeatures() {
             >
               <Trans>Scheduled transaction upcoming length adjustment</Trans>
             </FeatureToggle>
+            <FeatureToggle
+              flag="contextMenus"
+              feedbackLink="https://github.com/actualbudget/actual/issues/3706"
+            >
+              <Trans>Context menus</Trans>
+            </FeatureToggle>
           </View>
         ) : (
           <Link
diff --git a/packages/desktop-client/src/components/transactions/TransactionList.jsx b/packages/desktop-client/src/components/transactions/TransactionList.jsx
index abd0cb2f030..41b4be1c0e4 100644
--- a/packages/desktop-client/src/components/transactions/TransactionList.jsx
+++ b/packages/desktop-client/src/components/transactions/TransactionList.jsx
@@ -88,6 +88,13 @@ export function TransactionList({
   onCloseAddTransaction,
   onCreatePayee,
   onApplyFilter,
+  onBatchDelete,
+  onBatchDuplicate,
+  onBatchLinkSchedule,
+  onBatchUnlinkSchedule,
+  onCreateRule,
+  onScheduleAction,
+  onMakeAsNonSplitTransactions,
 }) {
   const dispatch = useDispatch();
   const transactionsLatest = useRef();
@@ -237,6 +244,13 @@ export function TransactionList({
       onSort={onSort}
       sortField={sortField}
       ascDesc={ascDesc}
+      onBatchDelete={onBatchDelete}
+      onBatchDuplicate={onBatchDuplicate}
+      onBatchLinkSchedule={onBatchLinkSchedule}
+      onBatchUnlinkSchedule={onBatchUnlinkSchedule}
+      onCreateRule={onCreateRule}
+      onScheduleAction={onScheduleAction}
+      onMakeAsNonSplitTransactions={onMakeAsNonSplitTransactions}
     />
   );
 }
diff --git a/packages/desktop-client/src/components/transactions/TransactionMenu.tsx b/packages/desktop-client/src/components/transactions/TransactionMenu.tsx
new file mode 100644
index 00000000000..e2723014d8f
--- /dev/null
+++ b/packages/desktop-client/src/components/transactions/TransactionMenu.tsx
@@ -0,0 +1,139 @@
+import React, { type ComponentPropsWithoutRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+
+import { pushModal } from 'loot-core/client/actions';
+import { isPreviewId } from 'loot-core/shared/transactions';
+import { type TransactionEntity } from 'loot-core/types/models';
+
+import { Menu } from '../common/Menu';
+
+type BalanceMenuProps = Omit<
+  ComponentPropsWithoutRef<typeof Menu>,
+  'onMenuSelect' | 'items'
+> & {
+  transaction: TransactionEntity;
+  onDuplicate: (id: string) => void;
+  onDelete: (id: string) => void;
+  onLinkSchedule: (id: string) => void;
+  onUnlinkSchedule: (id: string) => void;
+  onCreateRule: (id: string) => void;
+  onScheduleAction: (action: string, id: string) => void;
+  onMakeAsNonSplitTransactions: (id: string) => void;
+  closeMenu: () => void;
+};
+
+export function TransactionMenu({
+  transaction,
+  onDuplicate,
+  onDelete,
+  onLinkSchedule,
+  onUnlinkSchedule,
+  onCreateRule,
+  onScheduleAction,
+  onMakeAsNonSplitTransactions,
+  closeMenu,
+  ...props
+}: BalanceMenuProps) {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const isPreview = isPreviewId(transaction.id);
+  const linked = !!transaction.schedule;
+  const canUnsplitTransactions =
+    !transaction.reconciled && (transaction.is_parent || transaction.is_child);
+
+  function onViewSchedule() {
+    const firstId = transaction.id;
+    let scheduleId;
+    if (isPreviewId(firstId)) {
+      const parts = firstId.split('/');
+      scheduleId = parts[1];
+    } else {
+      scheduleId = transaction.schedule;
+    }
+
+    if (scheduleId) {
+      dispatch(pushModal('schedule-edit', { id: scheduleId }));
+    }
+  }
+
+  return (
+    <Menu
+      {...props}
+      onMenuSelect={name => {
+        switch (name) {
+          case 'duplicate':
+            onDuplicate(transaction.id);
+            break;
+          case 'delete':
+            onDelete(transaction.id);
+            break;
+          case 'unsplit-transactions':
+            onMakeAsNonSplitTransactions(transaction.id);
+            break;
+          case 'post-transaction':
+          case 'skip':
+            onScheduleAction(name, transaction.id);
+            break;
+          case 'view-schedule':
+            onViewSchedule();
+            break;
+          case 'link-schedule':
+            onLinkSchedule(transaction.id);
+            break;
+          case 'unlink-schedule':
+            onUnlinkSchedule(transaction.id);
+            break;
+          case 'create-rule':
+            onCreateRule(transaction.id);
+            break;
+          default:
+            throw new Error(`Unrecognized menu option: ${name}`);
+        }
+        closeMenu();
+      }}
+      items={
+        isPreview
+          ? [
+              { name: 'view-schedule', text: t('View schedule') },
+              { name: 'post-transaction', text: t('Post transaction') },
+              { name: 'skip', text: t('Skip scheduled date') },
+            ]
+          : [
+              {
+                name: 'duplicate',
+                text: t('Duplicate'),
+              },
+              { name: 'delete', text: t('Delete') },
+              ...(linked
+                ? [
+                    {
+                      name: 'view-schedule',
+                      text: t('View schedule'),
+                    },
+                    { name: 'unlink-schedule', text: t('Unlink schedule') },
+                  ]
+                : [
+                    {
+                      name: 'link-schedule',
+                      text: t('Link schedule'),
+                    },
+                    {
+                      name: 'create-rule',
+                      text: t('Create rule'),
+                    },
+                  ]),
+              ...(canUnsplitTransactions
+                ? [
+                    {
+                      name: 'unsplit-transactions',
+                      text: t('Unsplit transaction'),
+                    },
+                  ]
+                : []),
+            ]
+      }
+    />
+  );
+}
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
index d9a7dd7099b..136aad20691 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
@@ -47,6 +47,7 @@ import {
   titleFirst,
 } from 'loot-core/src/shared/util';
 
+import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { useMergedRefs } from '../../hooks/useMergedRefs';
 import { usePrevious } from '../../hooks/usePrevious';
 import { useSelectedDispatch, useSelectedItems } from '../../hooks/useSelected';
@@ -84,6 +85,8 @@ import {
   UnexposedCellContent,
 } from '../table';
 
+import { TransactionMenu } from './TransactionMenu';
+
 function getDisplayValue(obj, name) {
   return obj ? obj[name] : '';
 }
@@ -845,6 +848,12 @@ const Transaction = memo(function Transaction({
   onSave,
   onEdit,
   onDelete,
+  onDuplicate,
+  onLinkSchedule,
+  onUnlinkSchedule,
+  onCreateRule,
+  onScheduleAction,
+  onMakeAsNonSplitTransactions,
   onSplit,
   onManagePayees,
   onCreatePayee,
@@ -1039,6 +1048,11 @@ 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');
+
   return (
     <Row
       ref={triggerRef}
@@ -1067,7 +1081,43 @@ 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);
+      }}
     >
+      <Popover
+        triggerRef={triggerRef}
+        placement="bottom start"
+        isOpen={menuOpen}
+        onOpenChange={() => setMenuOpen(false)}
+        crossOffset={crossOffset}
+        offset={offset}
+        style={{ width: 200, margin: 1 }}
+        isNonModal
+      >
+        <TransactionMenu
+          transaction={transaction}
+          onDelete={() => onDelete?.(transaction.id)}
+          onDuplicate={() => onDuplicate?.(transaction.id)}
+          onLinkSchedule={() => onLinkSchedule?.(transaction.id)}
+          onUnlinkSchedule={() => onUnlinkSchedule?.(transaction.id)}
+          onCreateRule={() => onCreateRule?.(transaction.id)}
+          onScheduleAction={action =>
+            onScheduleAction?.(action, transaction.id)
+          }
+          onMakeAsNonSplitTransactions={() =>
+            onMakeAsNonSplitTransactions?.(transaction.id)
+          }
+          closeMenu={() => setMenuOpen(false)}
+        />
+      </Popover>
+
       {splitError && listContainerRef.current && (
         <Popover
           arrowSize={updateId}
@@ -1889,6 +1939,12 @@ function TransactionTableInner({
         onEdit={tableNavigator.onEdit}
         onSave={props.onSave}
         onDelete={props.onDelete}
+        onDuplicate={props.onDuplicate}
+        onLinkSchedule={props.onLinkSchedule}
+        onUnlinkSchedule={props.onUnlinkSchedule}
+        onCreateRule={props.onCreateRule}
+        onScheduleAction={props.onScheduleAction}
+        onMakeAsNonSplitTransactions={props.onMakeAsNonSplitTransactions}
         onSplit={props.onSplit}
         onManagePayees={props.onManagePayees}
         onCreatePayee={props.onCreatePayee}
@@ -2343,9 +2399,31 @@ export const TransactionTable = forwardRef((props, ref) => {
       }
 
       setNewTransactions(deleteTransaction(newTrans, id).data);
+    } else {
+      props.onBatchDelete([id]);
     }
   }, []);
 
+  const onDuplicate = useCallback(id => {
+    props.onBatchDuplicate([id]);
+  }, []);
+
+  const onLinkSchedule = useCallback(id => {
+    props.onBatchLinkSchedule([id]);
+  }, []);
+  const onUnlinkSchedule = useCallback(id => {
+    props.onBatchUnlinkSchedule([id]);
+  }, []);
+  const onCreateRule = useCallback(id => {
+    props.onCreateRule([id]);
+  }, []);
+  const onScheduleAction = useCallback((action, id) => {
+    props.onScheduleAction(action, [id]);
+  }, []);
+  const onMakeAsNonSplitTransactions = useCallback(id => {
+    props.onMakeAsNonSplitTransactions([id]);
+  }, []);
+
   const onSplit = useMemo(() => {
     return id => {
       if (isTemporaryId(id)) {
@@ -2489,6 +2567,12 @@ export const TransactionTable = forwardRef((props, ref) => {
       isExpanded={splitsExpanded.expanded}
       onSave={onSave}
       onDelete={onDelete}
+      onDuplicate={onDuplicate}
+      onLinkSchedule={onLinkSchedule}
+      onUnlinkSchedule={onUnlinkSchedule}
+      onCreateRule={onCreateRule}
+      onScheduleAction={onScheduleAction}
+      onMakeAsNonSplitTransactions={onMakeAsNonSplitTransactions}
       onSplit={onSplit}
       onCheckNewEnter={onCheckNewEnter}
       onCheckEnter={onCheckEnter}
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx
index d8d58265f83..4b41db75aa9 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx
@@ -34,6 +34,9 @@ vi.mock('../../hooks/useFeatureFlag', () => ({
 vi.mock('../../hooks/useSyncedPref', () => ({
   useSyncedPref: vi.fn().mockReturnValue([undefined, vi.fn()]),
 }));
+vi.mock('../../hooks/useFeatureFlag', () => ({
+  useFeatureFlag: () => false,
+}));
 
 const accounts = [generateAccount('Bank of America')];
 const payees = [
diff --git a/packages/desktop-client/src/hooks/useFeatureFlag.ts b/packages/desktop-client/src/hooks/useFeatureFlag.ts
index fb4e205b2e7..062a54cd6d8 100644
--- a/packages/desktop-client/src/hooks/useFeatureFlag.ts
+++ b/packages/desktop-client/src/hooks/useFeatureFlag.ts
@@ -8,6 +8,7 @@ const DEFAULT_FEATURE_FLAG_STATE: Record<FeatureFlag, boolean> = {
   dashboards: false,
   actionTemplating: false,
   upcomingLengthAdjustment: false,
+  contextMenus: false,
 };
 
 export function useFeatureFlag(name: FeatureFlag): boolean {
diff --git a/packages/loot-core/src/types/prefs.d.ts b/packages/loot-core/src/types/prefs.d.ts
index 5d695db083f..0c6f7ea498d 100644
--- a/packages/loot-core/src/types/prefs.d.ts
+++ b/packages/loot-core/src/types/prefs.d.ts
@@ -3,7 +3,8 @@ export type FeatureFlag =
   | 'reportBudget'
   | 'goalTemplatesEnabled'
   | 'actionTemplating'
-  | 'upcomingLengthAdjustment';
+  | 'upcomingLengthAdjustment'
+  | 'contextMenus';
 
 /**
  * Cross-device preferences. These sync across devices when they are changed.
diff --git a/upcoming-release-notes/3381.md b/upcoming-release-notes/3381.md
new file mode 100644
index 00000000000..473ac8dc30c
--- /dev/null
+++ b/upcoming-release-notes/3381.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [UnderKoen]
+---
+
+Context menu's for transactions, budget, schedules, payees and rules pages

From e078ed21bafc33d228d41ebc1d63165c905b91ed Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Sun, 3 Nov 2024 13:04:43 -0800
Subject: [PATCH 2/2] [Typescript migration] Migrate AccountSyncCheck to ts
 (#3757)

* Migrate AccountSyncCheck to ts

* Release notes

* Fix lint
---
 ...ountSyncCheck.jsx => AccountSyncCheck.tsx} | 50 ++++++++++++-------
 .../src/components/budget/util.ts             |  2 +-
 upcoming-release-notes/3757.md                |  6 +++
 3 files changed, 40 insertions(+), 18 deletions(-)
 rename packages/desktop-client/src/components/accounts/{AccountSyncCheck.jsx => AccountSyncCheck.tsx} (84%)
 create mode 100644 upcoming-release-notes/3757.md

diff --git a/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx b/packages/desktop-client/src/components/accounts/AccountSyncCheck.tsx
similarity index 84%
rename from packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx
rename to packages/desktop-client/src/components/accounts/AccountSyncCheck.tsx
index 29da40e1357..04c59a44ace 100644
--- a/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx
+++ b/packages/desktop-client/src/components/accounts/AccountSyncCheck.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { Trans } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
@@ -6,6 +6,7 @@ import { useParams } from 'react-router-dom';
 import { t } from 'i18next';
 
 import { unlinkAccount } from 'loot-core/client/actions';
+import { type AccountEntity } from 'loot-core/types/models';
 
 import { authorizeBank } from '../../gocardless';
 import { useAccounts } from '../../hooks/useAccounts';
@@ -16,7 +17,7 @@ import { Link } from '../common/Link';
 import { Popover } from '../common/Popover';
 import { View } from '../common/View';
 
-function getErrorMessage(type, code) {
+function getErrorMessage(type: string, code: string) {
   switch (type.toUpperCase()) {
     case 'ITEM_ERROR':
       switch (code.toUpperCase()) {
@@ -81,7 +82,29 @@ export function AccountSyncCheck() {
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
 
-  if (!failedAccounts) {
+  const reauth = useCallback(
+    (acc: AccountEntity) => {
+      setOpen(false);
+
+      if (acc.account_id) {
+        authorizeBank(dispatch, { upgradingAccountId: acc.account_id });
+      }
+    },
+    [dispatch],
+  );
+
+  const unlink = useCallback(
+    (acc: AccountEntity) => {
+      if (acc.id) {
+        dispatch(unlinkAccount(acc.id));
+      }
+
+      setOpen(false);
+    },
+    [dispatch],
+  );
+
+  if (!failedAccounts || !id) {
     return null;
   }
 
@@ -91,22 +114,15 @@ export function AccountSyncCheck() {
   }
 
   const account = accounts.find(account => account.id === id);
+  if (!account) {
+    return null;
+  }
+
   const { type, code } = error;
   const showAuth =
     (type === 'ITEM_ERROR' && code === 'ITEM_LOGIN_REQUIRED') ||
     (type === 'INVALID_INPUT' && code === 'INVALID_ACCESS_TOKEN');
 
-  function reauth() {
-    setOpen(false);
-
-    authorizeBank(dispatch, { upgradingAccountId: account.account_id });
-  }
-
-  async function unlink() {
-    dispatch(unlinkAccount(account.id));
-    setOpen(false);
-  }
-
   return (
     <View>
       <Button
@@ -148,20 +164,20 @@ export function AccountSyncCheck() {
         <View style={{ justifyContent: 'flex-end', flexDirection: 'row' }}>
           {showAuth ? (
             <>
-              <Button onPress={unlink}>
+              <Button onPress={() => unlink(account)}>
                 <Trans>Unlink</Trans>
               </Button>
               <Button
                 variant="primary"
                 autoFocus
-                onPress={reauth}
+                onPress={() => reauth(account)}
                 style={{ marginLeft: 5 }}
               >
                 <Trans>Reauthorize</Trans>
               </Button>
             </>
           ) : (
-            <Button onPress={unlink}>
+            <Button onPress={() => unlink(account)}>
               <Trans>Unlink account</Trans>
             </Button>
           )}
diff --git a/packages/desktop-client/src/components/budget/util.ts b/packages/desktop-client/src/components/budget/util.ts
index 97a51a08ba2..2996e1db68e 100644
--- a/packages/desktop-client/src/components/budget/util.ts
+++ b/packages/desktop-client/src/components/budget/util.ts
@@ -60,7 +60,7 @@ export function separateGroups(categoryGroups: CategoryGroupEntity[]) {
   return [
     categoryGroups.filter(g => !g.is_income),
     categoryGroups.find(g => g.is_income),
-  ];
+  ] as const;
 }
 
 export function makeAmountGrey(value: number | string): CSSProperties {
diff --git a/upcoming-release-notes/3757.md b/upcoming-release-notes/3757.md
new file mode 100644
index 00000000000..078e427ca13
--- /dev/null
+++ b/upcoming-release-notes/3757.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Migrate AccountSyncCheck.jsx file to typescript