enhance: context menu on custom reports page

packages/desktop-client/src/components/reports/ReportCard.tsx

@@ -1,11 +1,11 @@
 import React, {
   useRef,
-  useState,
   type ComponentProps,
   type ReactNode,
   type CSSProperties,
 } from 'react';
 
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useIsInViewport } from '../../hooks/useIsInViewport';
 import { useNavigate } from '../../hooks/useNavigate';
 import { theme } from '../../style';
@@ -19,6 +19,7 @@ import { NON_DRAGGABLE_AREA_CLASS_NAME } from './constants';
 
 type ReportCardProps = {
   isEditing?: boolean;
+  disableClick?: boolean;
   to?: string;
   children: ReactNode;
   menuItems?: ComponentProps<typeof Menu>['items'];
@@ -29,6 +30,7 @@ type ReportCardProps = {
 
 export function ReportCard({
   isEditing,
+  disableClick,
   to,
   menuItems,
   onMenuSelect,
@@ -95,7 +97,7 @@ export function ReportCard({
       <Layout {...layoutProps}>
         <View
           role="button"
-          onClick={isEditing ? undefined : () => navigate(to)}
+          onClick={isEditing || disableClick ? undefined : () => navigate(to)}
           style={{
             height: '100%',
             width: '100%',
@@ -119,10 +121,21 @@ type LayoutProps = {
 
 function Layout({ children, isEditing, menuItems, onMenuSelect }: LayoutProps) {
   const triggerRef = useRef(null);
-  const [menuOpen, setMenuOpen] = useState(false);
+  const viewRef = useRef(null);
+
+  const {
+    setMenuOpen,
+    menuOpen,
+    handleContextMenu,
+    resetPosition,
+    position,
+    asContextMenu,
+  } = useContextMenu();
 
   return (
     <View
+      ref={viewRef}
+      onContextMenu={handleContextMenu}
       style={{
         display: 'block',
         height: '100%',
@@ -135,32 +148,46 @@ function Layout({ children, isEditing, menuItems, onMenuSelect }: LayoutProps) {
         },
       }}
     >
-      {menuItems && isEditing && (
-        <View
-          className={[
-            menuOpen ? undefined : 'hover-visible',
-            NON_DRAGGABLE_AREA_CLASS_NAME,
-          ].join(' ')}
-          style={{
-            position: 'absolute',
-            top: 7,
-            right: 3,
-            zIndex: 1,
-          }}
-        >
-          <MenuButton ref={triggerRef} onPress={() => setMenuOpen(true)} />
+      {menuItems && (
+        <>
+          {isEditing && (
+            <View
+              className={[
+                menuOpen ? undefined : 'hover-visible',
+                NON_DRAGGABLE_AREA_CLASS_NAME,
+              ].join(' ')}
+              style={{
+                position: 'absolute',
+                top: 7,
+                right: 3,
+                zIndex: 1,
+              }}
+            >
+              <MenuButton
+                ref={triggerRef}
+                onPress={() => {
+                  resetPosition();
+                  setMenuOpen(true);
+                }}
+              />
+            </View>
+          )}
+
           <Popover
-            triggerRef={triggerRef}
-            isOpen={menuOpen}
+            triggerRef={asContextMenu ? viewRef : triggerRef}
+            isOpen={Boolean(menuOpen)}
             onOpenChange={() => setMenuOpen(false)}
+            isNonModal
+            placement={asContextMenu ? 'bottom start' : 'bottom end'}
+            {...position}
           >
             <Menu
               className={NON_DRAGGABLE_AREA_CLASS_NAME}
               onMenuSelect={onMenuSelect}
               items={menuItems}
             />
           </Popover>
-        </View>
+        </>
       )}
 
       {children}

packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx

@@ -119,6 +119,7 @@ export function CashFlowCard({
   return (
     <ReportCard
       isEditing={isEditing}
+      disableClick={nameMenuOpen}
       to={`/reports/cash-flow/${widgetId}`}
       menuItems={[
         {

packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx

@@ -115,6 +115,7 @@ function CustomReportListCardsInner({
   return (
     <ReportCard
       isEditing={isEditing}
+      disableClick={nameMenuOpen}
       to={`/reports/custom/${report.id}`}
       menuItems={[
         {

packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx

@@ -39,6 +39,7 @@ export function MarkdownCard({
   return (
     <ReportCard
       isEditing={isEditing}
+      disableClick={isVisibleTextArea}
       menuItems={[
         {
           type: Menu.label,

packages/desktop-client/src/components/reports/reports/NetWorthCard.tsx

@@ -65,6 +65,7 @@ export function NetWorthCard({
   return (
     <ReportCard
       isEditing={isEditing}
+      disableClick={nameMenuOpen}
       to={`/reports/net-worth/${widgetId}`}
       menuItems={[
         {

packages/desktop-client/src/components/reports/reports/SpendingCard.tsx

@@ -69,6 +69,7 @@ export function SpendingCard({
   return (
     <ReportCard
       isEditing={isEditing}
+      disableClick={nameMenuOpen}
       to={`/reports/spending/${widgetId}`}
       menuItems={[
         {

packages/desktop-client/src/components/reports/reports/SummaryCard.tsx

@@ -73,6 +73,7 @@ export function SummaryCard({
   return (
     <ReportCard
       isEditing={isEditing}
+      disableClick={nameMenuOpen}
       to={`/reports/summary/${widgetId}`}
       menuItems={[
         {

upcoming-release-notes/3776.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [UnderKoen]
+---
+
+Add context menus to custom reports dashboard