Remove circular dependencies in frontend

frontend/package.json

@@ -8,6 +8,8 @@
     "build": "tsc && vite build",
     "build-dev": "tsc && vite build -m development",
     "preview": "vite preview",
+    "madge": "madge --circular src/main.tsx",
+    "lint": "eslint src/",
     "postinstall": "patch-package"
   },
   "dependencies": {
@@ -58,6 +60,7 @@
     "eslint": "^8.23.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "madge": "^5.0.1",
     "patch-package": "^6.5.0",
     "postinstall-postinstall": "^2.1.0",
     "sass": "^1.55.0",
@@ -67,5 +70,15 @@
     "vite": "^3.0.7",
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "^3.5.2"
+  },
+  "madge": {
+    "detectiveOptions": {
+      "ts": {
+        "skipTypeImports": true
+      },
+      "tsx": {
+        "skipTypeImports": true
+      }
+    }
   }
 }

frontend/src/app/invokeai.d.ts

@@ -12,8 +12,7 @@
  * 'gfpgan'.
  */
 
-import { Category as GalleryCategory } from 'features/gallery/store/gallerySlice';
+import { InvokeTabName } from 'features/tabs/tabMap';
-import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
 import { IRect } from 'konva/lib/types';
 
 /**

frontend/src/app/socketio/actions.ts

@@ -1,6 +1,6 @@
 import { createAction } from '@reduxjs/toolkit';
 import { GalleryCategory } from 'features/gallery/store/gallerySlice';
-import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
+import { InvokeTabName } from 'features/tabs/tabMap';
 import * as InvokeAI from 'app/invokeai';
 
 /**

frontend/src/app/socketio/emitters.ts

@@ -17,9 +17,9 @@ import {
   modelChangeRequested,
   setIsProcessing,
 } from 'features/system/store/systemSlice';
-import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
+import { InvokeTabName } from 'features/tabs/tabMap';
 import * as InvokeAI from 'app/invokeai';
-import { RootState } from 'app/store';
+import type { RootState } from 'app/store';
 
 /**
  * Returns an object containing all functions which use `socketio.emit()`.

frontend/src/app/socketio/listeners.ts

@@ -39,7 +39,7 @@ import {
   requestSystemConfig,
 } from './actions';
 import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
-import { tabMap } from 'features/tabs/components/InvokeTabs';
+import { tabMap } from 'features/tabs/tabMap';
 
 /**
  * Returns an object containing listener callbacks for socketio events.

frontend/src/app/store.ts

@@ -1,6 +1,4 @@
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
-import { useDispatch, useSelector } from 'react-redux';
-import type { TypedUseSelectorHook } from 'react-redux';
 
 import { persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
@@ -101,7 +99,3 @@ export const store = configureStore({
 export type AppGetState = typeof store.getState;
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
-
-// Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppDispatch: () => AppDispatch = useDispatch;
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

frontend/src/app/storeHooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from './store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

frontend/src/common/components/GuidePopover.tsx

@@ -6,7 +6,7 @@ import {
   Box,
 } from '@chakra-ui/react';
 import { SystemState } from 'features/system/store/systemSlice';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import { RootState } from 'app/store';
 import { createSelector } from '@reduxjs/toolkit';
 import { ReactElement } from 'react';

frontend/src/common/components/ImageUploader.tsx

@@ -5,7 +5,7 @@ import {
   useEffect,
   KeyboardEvent,
 } from 'react';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { FileRejection, useDropzone } from 'react-dropzone';
 import { useToast } from '@chakra-ui/react';
 import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';

frontend/src/common/util/parameterTranslation.ts

@@ -4,11 +4,8 @@ import { SystemState } from 'features/system/store/systemSlice';
 
 import { stringToSeedWeightsArray } from './seedWeightPairs';
 import randomInt from './randomInt';
-import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
+import { InvokeTabName } from 'features/tabs/tabMap';
-import {
+import { CanvasState, isCanvasMaskLine } from 'features/canvas/store/canvasTypes';
-  CanvasState,
-  isCanvasMaskLine,
-} from 'features/canvas/store/canvasTypes';
 import generateMask from 'features/canvas/util/generateMask';
 import openBase64ImageInTab from './openBase64ImageInTab';
 import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';

frontend/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx

@@ -1,4 +1,4 @@
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIAlertDialog from 'common/components/IAIAlertDialog';
 import IAIButton from 'common/components/IAIButton';
 import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';

frontend/src/features/canvas/components/IAICanvas.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useRef } from 'react';
 import Konva from 'konva';
 import { Layer, Stage } from 'react-konva';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import {
   canvasSelector,
   isStagingSelector,

frontend/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import _ from 'lodash';
 import { Group, Rect } from 'react-konva';
 import { canvasSelector } from '../store/canvasSelectors';

frontend/src/features/canvas/components/IAICanvasGrid.tsx

@@ -2,7 +2,7 @@
 
 import { useColorMode } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import _ from 'lodash';
 import { ReactNode, useCallback, useLayoutEffect, useState } from 'react';
 import { Group, Line as KonvaLine } from 'react-konva';

frontend/src/features/canvas/components/IAICanvasIntermediateImage.tsx

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import { GalleryState } from 'features/gallery/store/gallerySlice';
 import { ImageConfig } from 'konva/lib/shapes/Image';
 import _ from 'lodash';

frontend/src/features/canvas/components/IAICanvasMaskCompositer.tsx

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import { RectConfig } from 'konva/lib/shapes/Rect';
 import { Rect } from 'react-konva';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';

frontend/src/features/canvas/components/IAICanvasMaskLines.tsx

@@ -1,6 +1,6 @@
 import { GroupConfig } from 'konva/lib/Group';
 import { Group, Line } from 'react-konva';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import { createSelector } from '@reduxjs/toolkit';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { isCanvasMaskLine } from '../store/canvasTypes';

frontend/src/features/canvas/components/IAICanvasObjectRenderer.tsx

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import _ from 'lodash';
 import { Group, Line, Rect } from 'react-konva';
 import {

frontend/src/features/canvas/components/IAICanvasResizer.tsx

@@ -1,6 +1,6 @@
 import { Spinner } from '@chakra-ui/react';
 import { useLayoutEffect, useRef } from 'react';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 import {
   resizeAndScaleCanvas,

frontend/src/features/canvas/components/IAICanvasStagingArea.tsx

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import { GroupConfig } from 'konva/lib/Group';
 import _ from 'lodash';
 import { Group, Rect } from 'react-konva';

frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx

@@ -1,6 +1,6 @@
 import { ButtonGroup, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import _ from 'lodash';
 import { useCallback } from 'react';

frontend/src/features/canvas/components/IAICanvasStatusText.tsx

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import _ from 'lodash';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import IAICanvasStatusTextCursorPos from './IAICanvasStatusText/IAICanvasStatusTextCursorPos';

frontend/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import React from 'react';
 import _ from 'lodash';

frontend/src/features/canvas/components/IAICanvasToolPreview.tsx

@@ -2,7 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { GroupConfig } from 'konva/lib/Group';
 import _ from 'lodash';
 import { Circle, Group } from 'react-konva';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
 import {

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx

@@ -5,7 +5,7 @@ import { Vector2d } from 'konva/lib/types';
 import _ from 'lodash';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Group, Rect, Transformer } from 'react-konva';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import {
   roundDownToMultiple,
   roundToMultiple,

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx

@@ -7,7 +7,7 @@ import {
   setMaskColor,
   setShouldPreserveMaskedArea,
 } from 'features/canvas/store/canvasSlice';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import _ from 'lodash';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { FaMask, FaTrash } from 'react-icons/fa';

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx

@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { FaRedo } from 'react-icons/fa';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx

@@ -10,7 +10,7 @@ import {
   setShouldShowIntermediates,
   setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import _ from 'lodash';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { FaWrench } from 'react-icons/fa';

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

@@ -7,7 +7,7 @@ import {
   setBrushSize,
   setTool,
 } from 'features/canvas/store/canvasSlice';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import _ from 'lodash';
 import IAIIconButton from 'common/components/IAIIconButton';
 import {

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx

@@ -8,7 +8,7 @@ import {
   setLayer,
   setTool,
 } from 'features/canvas/store/canvasSlice';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import _ from 'lodash';
 import IAIIconButton from 'common/components/IAIIconButton';
 import {

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx

@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { FaUndo } from 'react-icons/fa';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 

frontend/src/features/canvas/hooks/useCanvasDragMove.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { KonvaEventObject } from 'konva/lib/Node';
 import _ from 'lodash';
 import { useCallback } from 'react';

frontend/src/features/canvas/hooks/useCanvasHotkeys.ts

@@ -10,7 +10,7 @@ import {
   setShouldSnapToGrid,
   setTool,
 } from 'features/canvas/store/canvasSlice';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { useRef } from 'react';
 import {
   canvasSelector,

frontend/src/features/canvas/hooks/useCanvasMouseDown.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';

frontend/src/features/canvas/hooks/useCanvasMouseMove.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 import Konva from 'konva';
 import { Vector2d } from 'konva/lib/types';

frontend/src/features/canvas/hooks/useCanvasMouseOut.ts

@@ -1,4 +1,4 @@
-import { useAppDispatch } from 'app/store';
+import { useAppDispatch } from 'app/storeHooks';
 import { useCallback } from 'react';
 import { mouseLeftCanvas } from 'features/canvas/store/canvasSlice';
 

frontend/src/features/canvas/hooks/useCanvasMouseUp.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 import Konva from 'konva';
 import _ from 'lodash';

frontend/src/features/canvas/hooks/useCanvasZoom.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
 import _ from 'lodash';

frontend/src/features/canvas/hooks/useColorUnderCursor.ts

@@ -1,4 +1,4 @@
-import { useAppDispatch } from 'app/store';
+import { useAppDispatch } from 'app/storeHooks';
 import Konva from 'konva';
 import _ from 'lodash';
 import {

frontend/src/features/gallery/components/CurrentImageButtons.tsx

@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { isEqual } from 'lodash';
 
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { RootState } from 'app/store';
 import {
   OptionsState,

frontend/src/features/gallery/components/CurrentImageDisplay.tsx

@@ -1,4 +1,5 @@
-import { RootState, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import CurrentImageButtons from './CurrentImageButtons';
 import { MdPhoto } from 'react-icons/md';
 import CurrentImagePreview from './CurrentImagePreview';

frontend/src/features/gallery/components/CurrentImagePreview.tsx

@@ -1,7 +1,8 @@
 import { IconButton, Image } from '@chakra-ui/react';
 import { useState } from 'react';
 import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import {
   GalleryCategory,
   GalleryState,

frontend/src/features/gallery/components/DeleteImageModal.tsx

@@ -14,15 +14,9 @@ import {
   Flex,
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import {
+import { ChangeEvent, ReactElement, SyntheticEvent } from 'react';
-  ChangeEvent,
+import { cloneElement, forwardRef, useRef } from 'react';
-  cloneElement,
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-  forwardRef,
-  ReactElement,
-  SyntheticEvent,
-  useRef,
-} from 'react';
-import { useAppDispatch, useAppSelector } from 'app/store';
 import { deleteImage } from 'app/socketio/actions';
 import { RootState } from 'app/store';
 import {

frontend/src/features/gallery/components/HoverableImage.tsx

@@ -6,7 +6,7 @@ import {
   Tooltip,
   useToast,
 } from '@chakra-ui/react';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import {
   setCurrentImage,
   setShouldHoldGalleryOpen,

frontend/src/features/gallery/components/ImageGallery.tsx

@@ -12,7 +12,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { MdPhotoLibrary } from 'react-icons/md';
 import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
 import { requestImages } from 'app/socketio/actions';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import {
   selectNextImage,
@@ -41,7 +41,7 @@ import IAICheckbox from 'common/components/IAICheckbox';
 import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
 import _ from 'lodash';
 import IAIButton from 'common/components/IAIButton';
-import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
+import { InvokeTabName } from 'features/tabs/tabMap';
 
 const GALLERY_SHOW_BUTTONS_MIN_WIDTH = 320;
 const GALLERY_IMAGE_WIDTH_OFFSET = 40;
@@ -55,6 +55,7 @@ const GALLERY_TAB_WIDTHS: Record<
   unifiedCanvas: { galleryMinWidth: 200, galleryMaxWidth: 200 },
   nodes: { galleryMinWidth: 200, galleryMaxWidth: 500 },
   postprocess: { galleryMinWidth: 200, galleryMaxWidth: 500 },
+  training: { galleryMinWidth: 200, galleryMaxWidth: 500 },
 };
 
 const LIGHTBOX_GALLERY_WIDTH = 400;

frontend/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx

@@ -10,7 +10,7 @@ import {
 import { ExternalLinkIcon } from '@chakra-ui/icons';
 import { memo } from 'react';
 import { IoArrowUndoCircleOutline } from 'react-icons/io5';
-import { useAppDispatch } from 'app/store';
+import { useAppDispatch } from 'app/storeHooks';
 import * as InvokeAI from 'app/invokeai';
 import {
   setCfgScale,

frontend/src/features/gallery/hooks/useGetImageByUuid.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import { gallerySelector } from '../store/gallerySliceSelectors';
 
 const selector = createSelector(gallerySelector, (gallery) => ({

frontend/src/features/gallery/store/gallerySlice.ts

@@ -3,7 +3,7 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 import _, { clamp } from 'lodash';
 import * as InvokeAI from 'app/invokeai';
 import { IRect } from 'konva/lib/types';
-import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
+import { InvokeTabName } from 'features/tabs/tabMap';
 
 export type GalleryCategory = 'user' | 'result';
 

frontend/src/features/lightbox/components/Lightbox.tsx

@@ -1,5 +1,6 @@
 import { IconButton } from '@chakra-ui/react';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import CurrentImageButtons from 'features/gallery/components/CurrentImageButtons';
 import { imagesSelector } from 'features/gallery/components/CurrentImagePreview';

frontend/src/features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings.tsx

@@ -1,6 +1,6 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';

frontend/src/features/options/components/AdvancedOptions/Canvas/InfillAndScalingOptions.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISelect from 'common/components/IAISelect';
 import IAISlider from 'common/components/IAISlider';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';

frontend/src/features/options/components/AdvancedOptions/Canvas/InpaintReplace.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent } from 'react';
-import { useAppDispatch, useAppSelector } from '../../../../../app/store';
+import { useAppDispatch, useAppSelector } from '../../../../../app/storeHooks';
 import _ from 'lodash';
 import { createSelector } from '@reduxjs/toolkit';
 import IAISwitch from '../../../../../common/components/IAISwitch';

frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import { optionsSelector } from 'features/options/store/optionsSelectors';
 import {

frontend/src/features/options/components/AdvancedOptions/FaceRestore/FaceRestoreOptions.tsx

@@ -1,7 +1,7 @@
 import { Flex } from '@chakra-ui/react';
 
 import { RootState } from 'app/store';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 
 import {
   FacetoolType,

frontend/src/features/options/components/AdvancedOptions/FaceRestore/FaceRestoreToggle.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent } from 'react';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISwitch from 'common/components/IAISwitch';
 import { setShouldRunFacetool } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/AdvancedOptions/ImageToImage/ImageFit.tsx

@@ -1,9 +1,6 @@
 import React, { ChangeEvent } from 'react';
-import {
+import { RootState } from 'app/store';
-  RootState,
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-  useAppDispatch,
-  useAppSelector,
-} from 'app/store';
 import IAISwitch from 'common/components/IAISwitch';
 import { setShouldFitToWidthHeight } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/AdvancedOptions/ImageToImage/ImageToImageStrength.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import { setImg2imgStrength } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/AdvancedOptions/Output/HiresOptions.tsx

@@ -1,10 +1,7 @@
 import { Flex } from '@chakra-ui/react';
 import { ChangeEvent } from 'react';
-import {
+import { RootState } from 'app/store';
-  RootState,
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-  useAppDispatch,
-  useAppSelector,
-} from 'app/store';
 import IAISwitch from 'common/components/IAISwitch';
 import { setHiresFix } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/AdvancedOptions/Output/SeamlessOptions.tsx

@@ -1,10 +1,7 @@
 import { Flex } from '@chakra-ui/react';
 import { ChangeEvent } from 'react';
-import {
+import { RootState } from 'app/store';
-  RootState,
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-  useAppDispatch,
-  useAppSelector,
-} from 'app/store';
 import IAISwitch from 'common/components/IAISwitch';
 import { setSeamless } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/AdvancedOptions/Seed/Perlin.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
+import { RootState } from 'app/store';
-  RootState,
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-  useAppDispatch,
-  useAppSelector,
-} from 'app/store';
 import IAINumberInput from 'common/components/IAINumberInput';
 import { setPerlin } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/AdvancedOptions/Seed/RandomizeSeed.tsx

@@ -1,10 +1,8 @@
-import React, { ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
+import React from 'react';
 
-import {
+import { RootState } from 'app/store';
-  RootState,
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-  useAppDispatch,
-  useAppSelector,
-} from 'app/store';
 import IAISwitch from 'common/components/IAISwitch';
 import { setShouldRandomizeSeed } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/AdvancedOptions/Seed/Seed.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
-import {
+import { RootState } from 'app/store';
-  RootState,
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-  useAppDispatch,
-  useAppSelector,
-} from 'app/store';
 import IAINumberInput from 'common/components/IAINumberInput';
 import { setSeed } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/AdvancedOptions/Seed/ShuffleSeed.tsx

@@ -1,7 +1,8 @@
 import { Button } from '@chakra-ui/react';
 import React from 'react';
 import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import randomInt from 'common/util/randomInt';
 import { setSeed } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/AdvancedOptions/Seed/Threshold.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
+import { RootState } from 'app/store';
-  RootState,
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-  useAppDispatch,
-  useAppSelector,
-} from 'app/store';
 import IAINumberInput from 'common/components/IAINumberInput';
 import { setThreshold } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/AdvancedOptions/Upscale/UpscaleOptions.tsx

@@ -1,5 +1,5 @@
 import { RootState } from 'app/store';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 
 import {
   setUpscalingLevel,

frontend/src/features/options/components/AdvancedOptions/Upscale/UpscaleToggle.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent } from 'react';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISwitch from 'common/components/IAISwitch';
 import { setShouldRunESRGAN } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/AdvancedOptions/Variations/GenerateVariations.tsx

@@ -1,9 +1,6 @@
 import React, { ChangeEvent } from 'react';
-import {
+import { RootState } from 'app/store';
-  RootState,
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-  useAppDispatch,
-  useAppSelector,
-} from 'app/store';
 import IAISwitch from 'common/components/IAISwitch';
 import { setShouldGenerateVariations } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/AdvancedOptions/Variations/SeedWeights.tsx

@@ -1,9 +1,6 @@
 import React, { ChangeEvent } from 'react';
-import {
+import { RootState } from 'app/store';
-  RootState,
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-  useAppDispatch,
-  useAppSelector,
-} from 'app/store';
 import IAIInput from 'common/components/IAIInput';
 import { validateSeedWeights } from 'common/util/seedWeightPairs';
 import { setSeedWeights } from 'features/options/store/optionsSlice';

frontend/src/features/options/components/AdvancedOptions/Variations/VariationAmount.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
+import { RootState } from 'app/store';
-  RootState,
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-  useAppDispatch,
-  useAppSelector,
-} from 'app/store';
 import IAINumberInput from 'common/components/IAINumberInput';
 import { setVariationAmount } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/MainOptions/MainAdvancedOptionsCheckbox.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent } from 'react';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAICheckbox from 'common/components/IAICheckbox';
 import { setShowAdvancedOptions } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/MainOptions/MainCFGScale.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAINumberInput from 'common/components/IAINumberInput';
 import { setCfgScale } from 'features/options/store/optionsSlice';
-import { inputWidth } from './MainOptions';
 
 export default function MainCFGScale() {
   const dispatch = useAppDispatch();
@@ -18,7 +18,7 @@ export default function MainCFGScale() {
       max={200}
       onChange={handleChangeCfgScale}
       value={cfgScale}
-      width={inputWidth}
+      width="auto"
       styleClass="main-option-block"
       textAlign="center"
       isInteger={false}

frontend/src/features/options/components/MainOptions/MainHeight.tsx

@@ -1,6 +1,8 @@
-import React, { ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
+import React from 'react';
 import { HEIGHTS } from 'app/constants';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISelect from 'common/components/IAISelect';
 import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 import { setHeight } from 'features/options/store/optionsSlice';

frontend/src/features/options/components/MainOptions/MainIterations.tsx

@@ -1,13 +1,13 @@
 import { createSelector } from '@reduxjs/toolkit';
 import _ from 'lodash';
 import React from 'react';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import type { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAINumberInput from 'common/components/IAINumberInput';
 import {
   OptionsState,
   setIterations,
 } from 'features/options/store/optionsSlice';
-import { inputWidth } from './MainOptions';
 
 const mainIterationsSelector = createSelector(
   [(state: RootState) => state.options],
@@ -39,7 +39,7 @@ export default function MainIterations() {
       max={9999}
       onChange={handleChangeIterations}
       value={iterations}
-      width={inputWidth}
+      width="auto"
       labelFontSize={0.5}
       styleClass="main-option-block"
       textAlign="center"

frontend/src/features/options/components/MainOptions/MainSampler.tsx

@@ -1,6 +1,7 @@
 import React, { ChangeEvent } from 'react';
 import { SAMPLERS } from 'app/constants';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISelect from 'common/components/IAISelect';
 import { setSampler } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/MainOptions/MainSteps.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAINumberInput from 'common/components/IAINumberInput';
 import { setSteps } from 'features/options/store/optionsSlice';
-import { inputWidth } from './MainOptions';
 
 export default function MainSteps() {
   const dispatch = useAppDispatch();
@@ -18,7 +18,7 @@ export default function MainSteps() {
       step={1}
       onChange={handleChangeSteps}
       value={steps}
-      width={inputWidth}
+      width="auto"
       styleClass="main-option-block"
       textAlign="center"
     />

frontend/src/features/options/components/MainOptions/MainWidth.tsx

@@ -1,6 +1,7 @@
 import React, { ChangeEvent } from 'react';
 import { WIDTHS } from 'app/constants';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISelect from 'common/components/IAISelect';
 import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 import { setWidth } from 'features/options/store/optionsSlice';

frontend/src/features/options/components/OptionsAccordion.tsx

@@ -1,5 +1,6 @@
 import { Accordion, ExpandedIndex } from '@chakra-ui/react';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { setOpenAccordions } from 'features/system/store/systemSlice';
 import InvokeAccordionItem, {
   InvokeAccordionItemProps,

frontend/src/features/options/components/ProcessButtons/CancelButton.tsx

@@ -1,6 +1,7 @@
 import { MdCancel } from 'react-icons/md';
 import { cancelProcessing } from 'app/socketio/actions';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton, {
   IAIIconButtonProps,
 } from 'common/components/IAIIconButton';

frontend/src/features/options/components/ProcessButtons/InvokeButton.tsx

@@ -2,7 +2,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { FaPlay } from 'react-icons/fa';
 import { readinessSelector } from 'app/selectors/readinessSelector';
 import { generateImage } from 'app/socketio/actions';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIButton, { IAIButtonProps } from 'common/components/IAIButton';
 import IAIIconButton, {
   IAIIconButtonProps,

frontend/src/features/options/components/ProcessButtons/Loopback.tsx

@@ -1,6 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { FaRecycle } from 'react-icons/fa';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { OptionsState, setShouldLoopback } from 'features/options/store/optionsSlice';
 

frontend/src/features/options/components/ProcessButtons/ProcessButtons.tsx

@@ -1,7 +1,7 @@
 import InvokeButton from './InvokeButton';
 import CancelButton from './CancelButton';
 import LoopbackButton from './Loopback';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 
 /**

frontend/src/features/options/components/PromptInput/PromptInput.tsx

@@ -1,6 +1,7 @@
 import { FormControl, Textarea } from '@chakra-ui/react';
 import { ChangeEvent, KeyboardEvent, useRef } from 'react';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { generateImage } from 'app/socketio/actions';
 
 import { OptionsState, setPrompt } from 'features/options/store/optionsSlice';

frontend/src/features/options/store/optionsSelectors.ts

@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import _ from 'lodash';
 import { RootState } from 'app/store';
-import { tabMap } from 'features/tabs/components/InvokeTabs';
+import { tabMap } from 'features/tabs/tabMap';
 import { OptionsState } from './optionsSlice';
 
 export const activeTabNameSelector = createSelector(

frontend/src/features/options/store/optionsSlice.ts

@@ -4,7 +4,7 @@ import * as InvokeAI from 'app/invokeai';
 import promptToString from 'common/util/promptToString';
 import { seedWeightsToString } from 'common/util/seedWeightPairs';
 import { FACETOOL_TYPES } from 'app/constants';
-import { InvokeTabName, tabMap } from 'features/tabs/components/InvokeTabs';
+import { InvokeTabName, tabMap } from 'features/tabs/tabMap';
 
 export type UpscalingLevel = 2 | 4;
 

frontend/src/features/system/components/ClearTempFolderButtonModal.tsx

@@ -1,5 +1,5 @@
 import { emptyTempFolder } from 'app/socketio/actions';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIAlertDialog from 'common/components/IAIAlertDialog';
 import IAIButton from 'common/components/IAIButton';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';

frontend/src/features/system/components/Console.tsx

@@ -1,5 +1,5 @@
 import { IconButton, Tooltip } from '@chakra-ui/react';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { RootState } from 'app/store';
 import { errorSeen, setShouldShowLogViewer, SystemState } from 'features/system/store/systemSlice';
 import { useLayoutEffect, useRef, useState } from 'react';

frontend/src/features/system/components/ModelSelect.tsx

@@ -1,7 +1,7 @@
 import { Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { requestModelChange } from 'app/socketio/actions';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISelect from 'common/components/IAISelect';
 import _ from 'lodash';
 import { ChangeEvent } from 'react';

frontend/src/features/system/components/ProgressBar.tsx

@@ -1,7 +1,7 @@
 import { Progress } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { isEqual } from 'lodash';
-import { useAppSelector } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import { RootState } from 'app/store';
 import { SystemState } from 'features/system/store/systemSlice';
 

frontend/src/features/system/components/SettingsModal/ModelList.tsx

@@ -12,7 +12,8 @@ import { createSelector } from '@reduxjs/toolkit';
 import _ from 'lodash';
 import { ModelStatus } from 'app/invokeai';
 import { requestModelChange } from 'app/socketio/actions';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { SystemState } from 'features/system/store/systemSlice';
 
 type ModelListItemProps = {

frontend/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -15,8 +15,9 @@ import {
 import { createSelector } from '@reduxjs/toolkit';
 import _, { isEqual } from 'lodash';
 import { ChangeEvent, cloneElement, ReactElement } from 'react';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
-import { persistor } from 'main';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { persistor } from 'persistor';
 import {
   InProgressImageType,
   setEnableImageDebugging,

frontend/src/features/system/components/StatusIndicator.tsx

@@ -1,7 +1,8 @@
 import { Text, Tooltip } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { isEqual } from 'lodash';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { errorSeen, SystemState } from 'features/system/store/systemSlice';
 
 const systemSelector = createSelector(

frontend/src/features/system/components/ThemeChanger.tsx

@@ -1,5 +1,6 @@
 import { useColorMode, VStack } from '@chakra-ui/react';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { setCurrentTheme } from 'features/options/store/optionsSlice';
 import IAIPopover from 'common/components/IAIPopover';
 import IAIIconButton from 'common/components/IAIIconButton';

frontend/src/features/system/hooks/useToastWatcher.ts

@@ -1,5 +1,5 @@
 import { useToast } from '@chakra-ui/react';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { useEffect } from 'react';
 import { toastQueueSelector } from 'features/system/store/systemSelectors';
 import { clearToastQueue } from 'features/system/store/systemSlice';

frontend/src/features/tabs/components/FloatingGalleryButton.tsx

@@ -1,5 +1,5 @@
 import { MdPhotoLibrary } from 'react-icons/md';
-import { useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { setShouldShowGallery } from 'features/gallery/store/gallerySlice';
 import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';

frontend/src/features/tabs/components/FloatingOptionsPanelButtons.tsx

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import {
   OptionsState,

frontend/src/features/tabs/components/ImageToImage/ImageToImageDisplay.tsx

@@ -1,4 +1,5 @@
-import { RootState, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 import ImageUploadButton from 'common/components/ImageUploaderButton';
 import CurrentImageDisplay from 'features/gallery/components/CurrentImageDisplay';
 import InitImagePreview from './InitImagePreview';

frontend/src/features/tabs/components/ImageToImage/InitImagePreview.tsx

@@ -1,5 +1,6 @@
 import { Image, useToast } from '@chakra-ui/react';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import ImageUploaderIconButton from 'common/components/ImageUploaderIconButton';
 import { clearInitialImage } from 'features/options/store/optionsSlice';
 

frontend/src/features/tabs/components/ImageToImage/InitialImageOverlay.tsx

@@ -1,6 +1,7 @@
 import { Image } from '@chakra-ui/react';
 import React from 'react';
-import { RootState, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppSelector } from 'app/storeHooks';
 
 export default function InitialImageOverlay() {
   const initialImage = useAppSelector(

frontend/src/features/tabs/components/InvokeOptionsPanel.tsx

@@ -5,7 +5,8 @@ import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
 import { CSSTransition } from 'react-transition-group';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import {
   OptionsState,
   setOptionsPanelScrollPosition,

frontend/src/features/tabs/components/InvokeTabs.tsx

@@ -2,7 +2,8 @@ import { Tab, TabPanel, TabPanels, Tabs, Tooltip } from '@chakra-ui/react';
 import _ from 'lodash';
 import React, { ReactElement } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import NodesWIP from 'common/components/WorkInProgress/NodesWIP';
 import { PostProcessingWIP } from 'common/components/WorkInProgress/PostProcessingWIP';
 import ImageToImageIcon from 'common/icons/ImageToImageIcon';
@@ -20,8 +21,15 @@ import UnifiedCanvasWorkarea from './UnifiedCanvas/UnifiedCanvasWorkarea';
 import UnifiedCanvasIcon from 'common/icons/UnifiedCanvasIcon';
 import TrainingWIP from 'common/components/WorkInProgress/Training';
 import TrainingIcon from 'common/icons/TrainingIcon';
+import { InvokeTabName } from 'features/tabs/tabMap';
 
-export const tabDict = {
+export interface InvokeTabInfo {
+  title: ReactElement;
+  workarea: ReactElement;
+  tooltip: string;
+}
+
+export const tabDict: Record<InvokeTabName, InvokeTabInfo> = {
   txt2img: {
     title: <TextToImageIcon fill={'black'} boxSize={'2.5rem'} />,
     workarea: <TextToImageWorkarea />,
@@ -54,13 +62,6 @@ export const tabDict = {
   },
 };
 
-// Array where index maps to the key of tabDict
-export const tabMap = _.map(tabDict, (tab, key) => key);
-
-// Use tabMap to generate a union type of tab names
-const tabMapTypes = [...tabMap] as const;
-export type InvokeTabName = typeof tabMapTypes[number];
-
 export default function InvokeTabs() {
   const activeTab = useAppSelector(
     (state: RootState) => state.options.activeTab