Add context menu's

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>

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 })

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 => {

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 => {

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>
   );
 }

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}

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>
     </>
   );