feat(ui): restore context menu for entity list

invokeai/frontend/web/src/features/controlLayers/components/CanvasPanelContent.tsx

@@ -1,21 +1,37 @@
-import { Divider, Flex } from '@invoke-ai/ui-library';
+import { Box, ContextMenu, Divider, Flex, MenuList } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { CanvasAddEntityButtons } from 'features/controlLayers/components/CanvasAddEntityButtons';
 import { CanvasEntityList } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityList';
 import { EntityListActionBar } from 'features/controlLayers/components/CanvasEntityList/EntityListActionBar';
+import { CanvasEntityListMenuItems } from 'features/controlLayers/components/CanvasEntityList/EntityListActionBarAddLayerMenuItems';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { selectHasEntities } from 'features/controlLayers/store/selectors';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 
 export const CanvasPanelContent = memo(() => {
   const hasEntities = useAppSelector(selectHasEntities);
+  const renderMenu = useCallback(
+    () => (
+      <MenuList>
+        <CanvasEntityListMenuItems />
+      </MenuList>
+    ),
+    []
+  );
+
   return (
     <CanvasManagerProviderGate>
       <Flex flexDir="column" gap={2} w="full" h="full">
         <EntityListActionBar />
         <Divider py={0} />
-        {!hasEntities && <CanvasAddEntityButtons />}
+        <ContextMenu<HTMLDivElement> renderMenu={renderMenu} stopImmediatePropagation stopPropagation>
-        {hasEntities && <CanvasEntityList />}
+          {(ref) => (
+            <Box ref={ref} w="full" h="full">
+              {!hasEntities && <CanvasAddEntityButtons />}
+              {hasEntities && <CanvasEntityList />}
+            </Box>
+          )}
+        </ContextMenu>
       </Flex>
     </CanvasManagerProviderGate>
   );