feat(ui): make toast/hotkey into logical components

invokeai/frontend/web/src/common/components/ImageUploader.tsx

@@ -1,4 +1,4 @@
-import { Box, useToast } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import useImageUploader from 'common/hooks/useImageUploader';
@@ -16,6 +16,7 @@ import { FileRejection, useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { imageUploaded } from 'services/thunks/image';
 import ImageUploadOverlay from './ImageUploadOverlay';
+import { useAppToaster } from 'app/components/Toaster';
 
 type ImageUploaderProps = {
   children: ReactNode;
@@ -25,7 +26,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
   const { children } = props;
   const dispatch = useAppDispatch();
   const activeTabName = useAppSelector(activeTabNameSelector);
-  const toast = useToast({});
+  const toaster = useAppToaster();
   const { t } = useTranslation();
   const [isHandlingUpload, setIsHandlingUpload] = useState<boolean>(false);
   const { setOpenUploader } = useImageUploader();
@@ -37,14 +38,14 @@ const ImageUploader = (props: ImageUploaderProps) => {
         (acc: string, cur: { message: string }) => `${acc}\n${cur.message}`,
         ''
       );
-      toast({
+      toaster({
         title: t('toast.uploadFailed'),
         description: msg,
         status: 'error',
         isClosable: true,
       });
     },
-    [t, toast]
+    [t, toaster]
   );
 
   const fileAcceptedCallback = useCallback(
@@ -105,7 +106,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
       e.stopImmediatePropagation();
 
       if (imageItems.length > 1) {
-        toast({
+        toaster({
           description: t('toast.uploadFailedMultipleImagesDesc'),
           status: 'error',
           isClosable: true,
@@ -116,7 +117,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
       const file = imageItems[0].getAsFile();
 
       if (!file) {
-        toast({
+        toaster({
           description: t('toast.uploadFailedUnableToLoadDesc'),
           status: 'error',
           isClosable: true,
@@ -130,7 +131,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
     return () => {
       document.removeEventListener('paste', pasteImageListener);
     };
-  }, [t, dispatch, toast, activeTabName]);
+  }, [t, dispatch, toaster, activeTabName]);
 
   const overlaySecondaryText = ['img2img', 'unifiedCanvas'].includes(
     activeTabName

invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts

@@ -1,78 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
-import {
-  setActiveTab,
-  toggleGalleryPanel,
-  toggleParametersPanel,
-  togglePinGalleryPanel,
-  togglePinParametersPanel,
-} from 'features/ui/store/uiSlice';
-import { isEqual } from 'lodash-es';
-import { isHotkeyPressed, useHotkeys } from 'react-hotkeys-hook';
-
-const globalHotkeysSelector = createSelector(
-  (state: RootState) => state.hotkeys,
-  (hotkeys) => {
-    const { shift } = hotkeys;
-    return { shift };
-  },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: isEqual,
-    },
-  }
-);
-
-// TODO: Does not catch keypresses while focused in an input. Maybe there is a way?
-
-export const useGlobalHotkeys = () => {
-  const dispatch = useAppDispatch();
-  const { shift } = useAppSelector(globalHotkeysSelector);
-
-  useHotkeys(
-    '*',
-    () => {
-      if (isHotkeyPressed('shift')) {
-        !shift && dispatch(shiftKeyPressed(true));
-      } else {
-        shift && dispatch(shiftKeyPressed(false));
-      }
-    },
-    { keyup: true, keydown: true },
-    [shift]
-  );
-
-  useHotkeys('o', () => {
-    dispatch(toggleParametersPanel());
-  });
-
-  useHotkeys(['shift+o'], () => {
-    dispatch(togglePinParametersPanel());
-  });
-
-  useHotkeys('g', () => {
-    dispatch(toggleGalleryPanel());
-  });
-
-  useHotkeys(['shift+g'], () => {
-    dispatch(togglePinGalleryPanel());
-  });
-
-  useHotkeys('1', () => {
-    dispatch(setActiveTab('txt2img'));
-  });
-
-  useHotkeys('2', () => {
-    dispatch(setActiveTab('img2img'));
-  });
-
-  useHotkeys('3', () => {
-    dispatch(setActiveTab('unifiedCanvas'));
-  });
-
-  useHotkeys('4', () => {
-    dispatch(setActiveTab('nodes'));
-  });
-};