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

invokeai/frontend/web/src/app/components/App.tsx

@@ -2,9 +2,6 @@ import ImageUploader from 'common/components/ImageUploader';
 import SiteHeader from 'features/system/components/SiteHeader';
 import ProgressBar from 'features/system/components/ProgressBar';
 import InvokeTabs from 'features/ui/components/InvokeTabs';
-
-import useToastWatcher from 'features/system/hooks/useToastWatcher';
-
 import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
 import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
 import { Box, Flex, Grid, Portal } from '@chakra-ui/react';
@@ -17,13 +14,14 @@ import { motion, AnimatePresence } from 'framer-motion';
 import Loading from 'common/components/Loading/Loading';
 import { useIsApplicationReady } from 'features/system/hooks/useIsApplicationReady';
 import { PartialAppConfig } from 'app/types/invokeai';
-import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import { configChanged } from 'features/system/store/configSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useLogger } from 'app/logging/useLogger';
 import ParametersDrawer from 'features/ui/components/ParametersDrawer';
 import { languageSelector } from 'features/system/store/systemSelectors';
 import i18n from 'i18n';
+import Toaster from './Toaster';
+import GlobalHotkeys from './GlobalHotkeys';
 
 const DEFAULT_CONFIG = {};
 
@@ -38,9 +36,6 @@ const App = ({
   headerComponent,
   setIsReady,
 }: Props) => {
-  useToastWatcher();
-  useGlobalHotkeys();
-
   const language = useAppSelector(languageSelector);
 
   const log = useLogger();
@@ -77,65 +72,69 @@ const App = ({
   }, [isApplicationReady, setIsReady]);
 
   return (
-    <Grid w="100vw" h="100vh" position="relative" overflow="hidden">
-      {isLightboxEnabled && <Lightbox />}
-      <ImageUploader>
-        <ProgressBar />
-        <Grid
-          gap={4}
-          p={4}
-          gridAutoRows="min-content auto"
-          w={APP_WIDTH}
-          h={APP_HEIGHT}
-        >
-          {headerComponent || <SiteHeader />}
-          <Flex
+    <>
+      <Grid w="100vw" h="100vh" position="relative" overflow="hidden">
+        {isLightboxEnabled && <Lightbox />}
+        <ImageUploader>
+          <ProgressBar />
+          <Grid
             gap={4}
-            w={{ base: '100vw', xl: 'full' }}
-            h="full"
-            flexDir={{ base: 'column', xl: 'row' }}
+            p={4}
+            gridAutoRows="min-content auto"
+            w={APP_WIDTH}
+            h={APP_HEIGHT}
           >
-            <InvokeTabs />
-          </Flex>
-        </Grid>
-      </ImageUploader>
+            {headerComponent || <SiteHeader />}
+            <Flex
+              gap={4}
+              w={{ base: '100vw', xl: 'full' }}
+              h="full"
+              flexDir={{ base: 'column', xl: 'row' }}
+            >
+              <InvokeTabs />
+            </Flex>
+          </Grid>
+        </ImageUploader>
 
-      <GalleryDrawer />
-      <ParametersDrawer />
+        <GalleryDrawer />
+        <ParametersDrawer />
 
-      <AnimatePresence>
-        {!isApplicationReady && !loadingOverridden && (
-          <motion.div
-            key="loading"
-            initial={{ opacity: 1 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.3 }}
-            style={{ zIndex: 3 }}
-          >
-            <Box position="absolute" top={0} left={0} w="100vw" h="100vh">
-              <Loading />
-            </Box>
-            <Box
-              onClick={handleOverrideClicked}
-              position="absolute"
-              top={0}
-              right={0}
-              cursor="pointer"
-              w="2rem"
-              h="2rem"
-            />
-          </motion.div>
-        )}
-      </AnimatePresence>
+        <AnimatePresence>
+          {!isApplicationReady && !loadingOverridden && (
+            <motion.div
+              key="loading"
+              initial={{ opacity: 1 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.3 }}
+              style={{ zIndex: 3 }}
+            >
+              <Box position="absolute" top={0} left={0} w="100vw" h="100vh">
+                <Loading />
+              </Box>
+              <Box
+                onClick={handleOverrideClicked}
+                position="absolute"
+                top={0}
+                right={0}
+                cursor="pointer"
+                w="2rem"
+                h="2rem"
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
 
-      <Portal>
-        <FloatingParametersPanelButtons />
-      </Portal>
-      <Portal>
-        <FloatingGalleryButton />
-      </Portal>
-    </Grid>
+        <Portal>
+          <FloatingParametersPanelButtons />
+        </Portal>
+        <Portal>
+          <FloatingGalleryButton />
+        </Portal>
+      </Grid>
+      <Toaster />
+      <GlobalHotkeys />
+    </>
   );
 };
 

invokeai/frontend/web/src/app/components/GlobalHotkeys.ts

@@ -0,0 +1,87 @@
+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 React, { memo } from 'react';
+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?
+
+/**
+ * Logical component. Handles app-level global hotkeys.
+ * @returns null
+ */
+const GlobalHotkeys: React.FC = () => {
+  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'));
+  });
+
+  return null;
+};
+
+export default memo(GlobalHotkeys);

invokeai/frontend/web/src/app/components/Toaster.ts

@@ -0,0 +1,65 @@
+import { useToast, UseToastOptions } from '@chakra-ui/react';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { toastQueueSelector } from 'features/system/store/systemSelectors';
+import { addToast, clearToastQueue } from 'features/system/store/systemSlice';
+import { useCallback, useEffect } from 'react';
+
+export type MakeToastArg = string | UseToastOptions;
+
+/**
+ * Makes a toast from a string or a UseToastOptions object.
+ * If a string is passed, the toast will have the status 'info' and will be closable with a duration of 2500ms.
+ */
+export const makeToast = (arg: MakeToastArg): UseToastOptions => {
+  if (typeof arg === 'string') {
+    return {
+      title: arg,
+      status: 'info',
+      isClosable: true,
+      duration: 2500,
+    };
+  }
+
+  return { status: 'info', isClosable: true, duration: 2500, ...arg };
+};
+
+/**
+ * Logical component. Watches the toast queue and makes toasts when the queue is not empty.
+ * @returns null
+ */
+const Toaster = () => {
+  const dispatch = useAppDispatch();
+  const toastQueue = useAppSelector(toastQueueSelector);
+  const toast = useToast();
+  useEffect(() => {
+    toastQueue.forEach((t) => {
+      toast(t);
+    });
+    toastQueue.length > 0 && dispatch(clearToastQueue());
+  }, [dispatch, toast, toastQueue]);
+
+  return null;
+};
+
+/**
+ * Returns a function that can be used to make a toast.
+ * @example
+ * const toaster = useAppToaster();
+ * toaster('Hello world!');
+ * toaster({ title: 'Hello world!', status: 'success' });
+ * @returns A function that can be used to make a toast.
+ * @see makeToast
+ * @see MakeToastArg
+ * @see UseToastOptions
+ */
+export const useAppToaster = () => {
+  const dispatch = useAppDispatch();
+  const toaster = useCallback(
+    (arg: MakeToastArg) => dispatch(addToast(makeToast(arg))),
+    [dispatch]
+  );
+
+  return toaster;
+};
+
+export default Toaster;

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/initialImageSelected.ts

@@ -2,11 +2,11 @@ import { initialImageChanged } from 'features/parameters/store/generationSlice';
 import { Image, isInvokeAIImage } from 'app/types/invokeai';
 import { selectResultsById } from 'features/gallery/store/resultsSlice';
 import { selectUploadsById } from 'features/gallery/store/uploadsSlice';
-import { makeToast } from 'features/system/hooks/useToastWatcher';
 import { t } from 'i18next';
 import { addToast } from 'features/system/store/systemSlice';
 import { startAppListening } from '..';
 import { initialImageSelected } from 'features/parameters/store/actions';
+import { makeToast } from 'app/components/Toaster';
 
 export const addInitialImageSelectedListener = () => {
   startAppListening({