Added context menu for merge/split in import tx

src/core/buttons.jsx

@@ -16,6 +16,7 @@ const ActionButton = ({ color, startIcon, label, onClick, solo, disabled }) => {
     return !solo && isMobile ? (
         <IconButton
             sx={{ width: size, height: size, backgroundColor: theme.palette[color].dark }}
+            disableRipple
             onClick={onClick}
         >
             { startIcon }

src/transactions/context-menu.jsx

@@ -0,0 +1,51 @@
+import CallMergeIcon from '@mui/icons-material/CallMerge';
+import CallSplitIcon from '@mui/icons-material/CallSplit';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+const ContextMenu = ({ contextMenuPosition, setContextMenuPosition,selectedRowSize, apiRef }) => {
+    const handleSplitTransaction = () => {
+        setContextMenuPosition(null);
+        const tx = apiRef.current.getSelectedRows().values().next().value;
+        console.log(tx);
+    };
+
+    const handleMergeTransaction = () => {
+        setContextMenuPosition(null);
+        const tx = Array.from(apiRef.current.getSelectedRows().values());
+        console.log(tx);
+    };
+
+    return (
+        <Menu
+            open={contextMenuPosition !== null}
+            onClose={() => setContextMenuPosition(null)}
+            anchorReference="anchorPosition"
+            anchorPosition={ contextMenuPosition || undefined }
+            slotProps={{
+                root: {
+                    onContextMenu: (e) => {
+                        e.preventDefault();
+                        setContextMenuPosition(null);
+                    },
+                },
+            }}
+        >
+            <MenuItem
+                onClick={handleSplitTransaction}
+                disabled={selectedRowSize !== 1}
+            >
+                <CallSplitIcon sx={{ marginRight: '.7rem' }} />
+                Split Transaction
+            </MenuItem>
+            <MenuItem
+                onClick={handleMergeTransaction}
+                disabled={selectedRowSize < 2 || selectedRowSize > 3}
+            >
+                <CallMergeIcon sx={{ marginRight: '.7rem' }} />
+                Merge Transactions
+            </MenuItem>
+        </Menu>
+    );
+};
+export default ContextMenu;

src/transactions/transactions-action-buttons.jsx

@@ -67,7 +67,10 @@ const TransactionsActionButtons = ({
 
     const isMobile = useMediaQuery(theme.breakpoints.up('md'));
 
-    return (selectedAccount.id === 0 && selectedLength === 0) ? <></> : (
+    if (selectedAccount.id === 0 && selectedLength === 0) {
+        return <></>;
+    }
+    return (
         <Stack direction="row" spacing={1}>
             { selectedAccount.id > 0 && <AddButton onClick={addTransaction} solo={selectedLength === 0} /> }
             { selectedLength > 0 && <EditButton onClick={editTransaction} />}

src/transactions/transactions-import-grid.jsx

@@ -8,6 +8,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import api from '../core/api';
 import Autocomplete from '@mui/material/Autocomplete';
 import AutoFill from './auto-fill';
+import ContextMenu from './context-menu';
 import dayjs from 'dayjs';
 import state from '../core/state';
 import styled from 'styled-components';
@@ -207,6 +208,15 @@ const ImportGrid = ({ apiRef, transactions, accountType }) => {
 
     const [ selectionModel, setSelectionModel ] = useState(transactions.map(({ id }) => id ));
 
+    const [ contextMenuPosition, setContextMenuPosition ] = useState(null);
+
+    const handleContextMenu = (event) => {
+        event.preventDefault();
+        setContextMenuPosition((old) => old === null ? { left: event.clientX - 2, top: event.clientY - 4 } : null);
+    };
+
+    const selectedRowSize = apiRef.current?.getSelectedRows ? apiRef.current.getSelectedRows().size : 0;
+
     return (
         <ImportGridRoot>
             <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -223,6 +233,18 @@ const ImportGrid = ({ apiRef, transactions, accountType }) => {
                     sx={maxGridSize}
                     rowSelectionModel={selectionModel}
                     onRowSelectionModelChange={(n) => setSelectionModel(n)}
+                    slotProps={{
+                        row: {
+                            onContextMenu: handleContextMenu,
+                            style: { cursor: 'context-menu' },
+                        },
+                    }}
+                />
+                <ContextMenu
+                    contextMenuPosition={contextMenuPosition}
+                    setContextMenuPosition={setContextMenuPosition}
+                    selectedRowSize={selectedRowSize}
+                    apiRef={apiRef}
                 />
             </LocalizationProvider>
         </ImportGridRoot>