feat(ui): consolidate imagecontextmenu and send to menu

Both support the same actions:
- Open in new tab
- Copy image (if supported by browser)
- Use prompt
- Use seed
- Use all
- Send to img2img
- Send to canvas
- Change board
- Download image
- Delete

invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx

@@ -1,7 +1,16 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { isEqual } from 'lodash-es';
 
-import { ButtonGroup, Flex, FlexProps, Link } from '@chakra-ui/react';
+import {
+  ButtonGroup,
+  Flex,
+  FlexProps,
+  Link,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+} from '@chakra-ui/react';
 // import { runESRGAN, runFacetool } from 'app/socketio/actions';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
@@ -49,6 +58,8 @@ import {
 } from 'services/api/endpoints/images';
 import { useDebounce } from 'use-debounce';
 import { sentImageToCanvas, sentImageToImg2Img } from '../../store/actions';
+import { menuListMotionProps } from 'theme/components/menu';
+import SingleSelectionMenuItems from '../ImageContextMenu/SingleSelectionMenuItems';
 
 const currentImageButtonsSelector = createSelector(
   [stateSelector, activeTabNameSelector],
@@ -345,65 +356,18 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
         {...props}
       >
         <ButtonGroup isAttached={true} isDisabled={shouldDisableToolbarButtons}>
-          <IAIPopover
-            triggerComponent={
-              <IAIIconButton
-                aria-label={`${t('parameters.sendTo')}...`}
-                tooltip={`${t('parameters.sendTo')}...`}
-                isDisabled={!imageDTO}
-                icon={<FaShareAlt />}
-              />
-            }
-          >
-            <Flex
-              sx={{
-                flexDirection: 'column',
-                rowGap: 2,
-              }}
-            >
-              <IAIButton
-                size="sm"
-                onClick={handleSendToImageToImage}
-                leftIcon={<FaShare />}
-                id="send-to-img2img"
-              >
-                {t('parameters.sendToImg2Img')}
-              </IAIButton>
-              {isCanvasEnabled && (
-                <IAIButton
-                  size="sm"
-                  onClick={handleSendToCanvas}
-                  leftIcon={<FaShare />}
-                  id="send-to-canvas"
-                >
-                  {t('parameters.sendToUnifiedCanvas')}
-                </IAIButton>
-              )}
-
-              {isClipboardAPIAvailable && (
-                <IAIButton
-                  size="sm"
-                  onClick={handleCopyImage}
-                  leftIcon={<FaCopy />}
-                >
-                  {t('parameters.copyImage')}
-                </IAIButton>
-              )}
-              <IAIButton
-                size="sm"
-                onClick={handleCopyImageLink}
-                leftIcon={<FaCopy />}
-              >
-                {t('parameters.copyImageToLink')}
-              </IAIButton>
-
-              <Link download={true} href={imageDTO?.image_url} target="_blank">
-                <IAIButton leftIcon={<FaDownload />} size="sm" w="100%">
-                  {t('parameters.downloadImage')}
-                </IAIButton>
-              </Link>
-            </Flex>
-          </IAIPopover>
+          <Menu>
+            <MenuButton
+              as={IAIIconButton}
+              aria-label={`${t('parameters.sendTo')}...`}
+              tooltip={`${t('parameters.sendTo')}...`}
+              isDisabled={!imageDTO}
+              icon={<FaShareAlt />}
+            />
+            <MenuList motionProps={menuListMotionProps}>
+              {imageDTO && <SingleSelectionMenuItems imageDTO={imageDTO} />}
+            </MenuList>
+          </Menu>
         </ButtonGroup>
 
         <ButtonGroup isAttached={true} isDisabled={shouldDisableToolbarButtons}>

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx

@@ -6,40 +6,15 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { ContextMenu, ContextMenuProps } from 'chakra-ui-contextmenu';
 import { MouseEvent, memo, useCallback, useMemo } from 'react';
 import { ImageDTO } from 'services/api/types';
+import { menuListMotionProps } from 'theme/components/menu';
 import MultipleSelectionMenuItems from './MultipleSelectionMenuItems';
 import SingleSelectionMenuItems from './SingleSelectionMenuItems';
-import { MotionProps } from 'framer-motion';
 
 type Props = {
   imageDTO: ImageDTO | undefined;
   children: ContextMenuProps<HTMLDivElement>['children'];
 };
 
-const motionProps: MotionProps = {
-  variants: {
-    enter: {
-      visibility: 'visible',
-      opacity: 1,
-      scale: 1,
-      transition: {
-        duration: 0.07,
-        ease: [0.4, 0, 0.2, 1],
-      },
-    },
-    exit: {
-      transitionEnd: {
-        visibility: 'hidden',
-      },
-      opacity: 0,
-      scale: 0.8,
-      transition: {
-        duration: 0.07,
-        easings: 'easeOut',
-      },
-    },
-  },
-};
-
 const ImageContextMenu = ({ imageDTO, children }: Props) => {
   const selector = useMemo(
     () =>
@@ -72,7 +47,7 @@ const ImageContextMenu = ({ imageDTO, children }: Props) => {
         imageDTO ? (
           <MenuList
             sx={{ visibility: 'visible !important' }}
-            motionProps={motionProps}
+            motionProps={menuListMotionProps}
             onContextMenu={handleContextMenu}
           >
             {selectionCount === 1 ? (

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx

@@ -1,5 +1,4 @@
-import { ExternalLinkIcon } from '@chakra-ui/icons';
-import { MenuItem } from '@chakra-ui/react';
+import { Link, MenuItem } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppToaster } from 'app/components/Toaster';
 import { stateSelector } from 'app/store/store';
@@ -18,8 +17,17 @@ import { useCopyImageToClipboard } from 'features/ui/hooks/useCopyImageToClipboa
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { memo, useCallback, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaCopy, FaFolder, FaShare, FaTrash } from 'react-icons/fa';
-import { IoArrowUndoCircleOutline } from 'react-icons/io5';
+import {
+  FaAsterisk,
+  FaCopy,
+  FaDownload,
+  FaExternalLinkAlt,
+  FaFolder,
+  FaQuoteRight,
+  FaSeedling,
+  FaShare,
+  FaTrash,
+} from 'react-icons/fa';
 import { useRemoveImageFromBoardMutation } from 'services/api/endpoints/boardImages';
 import { useGetImageMetadataQuery } from 'services/api/endpoints/images';
 import { ImageDTO } from 'services/api/types';
@@ -140,16 +148,21 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
 
   return (
     <>
-      <MenuItem icon={<ExternalLinkIcon />} onClickCapture={handleOpenInNewTab}>
-        {t('common.openInNewTab')}
-      </MenuItem>
+      <Link href={imageDTO.image_url} target="_blank">
+        <MenuItem
+          icon={<FaExternalLinkAlt />}
+          onClickCapture={handleOpenInNewTab}
+        >
+          {t('common.openInNewTab')}
+        </MenuItem>
+      </Link>
       {isClipboardAPIAvailable && (
         <MenuItem icon={<FaCopy />} onClickCapture={handleCopyImage}>
           {t('parameters.copyImage')}
         </MenuItem>
       )}
       <MenuItem
-        icon={<IoArrowUndoCircleOutline />}
+        icon={<FaQuoteRight />}
         onClickCapture={handleRecallPrompt}
         isDisabled={
           metadata?.positive_prompt === undefined &&
@@ -160,14 +173,14 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
       </MenuItem>
 
       <MenuItem
-        icon={<IoArrowUndoCircleOutline />}
+        icon={<FaSeedling />}
         onClickCapture={handleRecallSeed}
         isDisabled={metadata?.seed === undefined}
       >
         {t('parameters.useSeed')}
       </MenuItem>
       <MenuItem
-        icon={<IoArrowUndoCircleOutline />}
+        icon={<FaAsterisk />}
         onClickCapture={handleUseAllParameters}
         isDisabled={!metadata}
       >
@@ -206,6 +219,11 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
           Remove from Board
         </MenuItem>
       )}
+      <Link download={true} href={imageDTO.image_url} target="_blank">
+        <MenuItem icon={<FaDownload />} w="100%">
+          {t('parameters.downloadImage')}
+        </MenuItem>
+      </Link>
       <MenuItem
         sx={{ color: 'error.600', _dark: { color: 'error.300' } }}
         icon={<FaTrash />}

invokeai/frontend/web/src/theme/components/menu.ts

@@ -1,6 +1,7 @@
 import { menuAnatomy } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
 import { mode } from '@chakra-ui/theme-tools';
+import { MotionProps } from 'framer-motion';
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(menuAnatomy.keys);
@@ -21,6 +22,7 @@ const invokeAI = definePartsStyle((props) => ({
   },
   list: {
     zIndex: 9999,
+    color: mode('base.900', 'base.150')(props),
     bg: mode('base.200', 'base.800')(props),
     shadow: 'dark-lg',
     border: 'none',
@@ -35,6 +37,9 @@ const invokeAI = definePartsStyle((props) => ({
     _focus: {
       bg: mode('base.400', 'base.600')(props),
     },
+    svg: {
+      opacity: 0.5,
+    },
   },
 }));
 
@@ -46,3 +51,28 @@ export const menuTheme = defineMultiStyleConfig({
     variant: 'invokeAI',
   },
 });
+
+export const menuListMotionProps: MotionProps = {
+  variants: {
+    enter: {
+      visibility: 'visible',
+      opacity: 1,
+      scale: 1,
+      transition: {
+        duration: 0.07,
+        ease: [0.4, 0, 0.2, 1],
+      },
+    },
+    exit: {
+      transitionEnd: {
+        visibility: 'hidden',
+      },
+      opacity: 0,
+      scale: 0.8,
+      transition: {
+        duration: 0.07,
+        easings: 'easeOut',
+      },
+    },
+  },
+};