fix(ui): fix all circular dependencies

invokeai/frontend/web/scripts/typegen.ts

@@ -10,7 +10,7 @@ async function main() {
   );
   const types = await openapiTS(OPENAPI_URL, {
     exportType: true,
-    transform: (schemaObject, metadata) => {
+    transform: (schemaObject) => {
       if ('format' in schemaObject && schemaObject.format === 'binary') {
         return schemaObject.nullable ? 'Blob | null' : 'Blob';
       }

invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx

@@ -39,7 +39,6 @@ const ImageDndContext = (props: ImageDndContextProps) => {
   const handleDragEnd = useCallback(
     (event: DragEndEvent) => {
       console.log('dragEnd', event.active.data.current);
-      const activeData = event.active.data.current;
       const overData = event.over?.data.current;
       if (!activeDragData || !overData) {
         return;

invokeai/frontend/web/src/app/components/ImageDnd/typesafeDnd.tsx

@@ -11,7 +11,7 @@ import {
   useDraggable as useOriginalDraggable,
   useDroppable as useOriginalDroppable,
 } from '@dnd-kit/core';
-import { BoardId } from 'features/gallery/store/gallerySlice';
+import { BoardId } from 'features/gallery/store/types';
 import { ImageDTO } from 'services/api/types';
 
 type BaseDropData = {

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

@@ -1,28 +1,10 @@
-import { useToast, UseToastOptions } from '@chakra-ui/react';
+import { useToast } 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 { MakeToastArg, makeToast } from 'features/system/util/makeToast';
 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

invokeai/frontend/web/src/app/constants.ts

@@ -1,66 +1,2 @@
-// zod needs the array to be `as const` to infer the type correctly
-
-import { SchedulerParam } from 'features/parameters/types/parameterSchemas';
-
-// this is the source of the `SchedulerParam` type, which is generated by zod
-export const SCHEDULER_NAMES_AS_CONST = [
-  'euler',
-  'deis',
-  'ddim',
-  'ddpm',
-  'dpmpp_2s',
-  'dpmpp_2m',
-  'dpmpp_2m_sde',
-  'dpmpp_sde',
-  'heun',
-  'kdpm_2',
-  'lms',
-  'pndm',
-  'unipc',
-  'euler_k',
-  'dpmpp_2s_k',
-  'dpmpp_2m_k',
-  'dpmpp_2m_sde_k',
-  'dpmpp_sde_k',
-  'heun_k',
-  'lms_k',
-  'euler_a',
-  'kdpm_2_a',
-] as const;
-
-export const DEFAULT_SCHEDULER_NAME = 'euler';
-
-export const SCHEDULER_NAMES: SchedulerParam[] = [...SCHEDULER_NAMES_AS_CONST];
-
-export const SCHEDULER_LABEL_MAP: Record<SchedulerParam, string> = {
-  euler: 'Euler',
-  deis: 'DEIS',
-  ddim: 'DDIM',
-  ddpm: 'DDPM',
-  dpmpp_sde: 'DPM++ SDE',
-  dpmpp_2s: 'DPM++ 2S',
-  dpmpp_2m: 'DPM++ 2M',
-  dpmpp_2m_sde: 'DPM++ 2M SDE',
-  heun: 'Heun',
-  kdpm_2: 'KDPM 2',
-  lms: 'LMS',
-  pndm: 'PNDM',
-  unipc: 'UniPC',
-  euler_k: 'Euler Karras',
-  dpmpp_sde_k: 'DPM++ SDE Karras',
-  dpmpp_2s_k: 'DPM++ 2S Karras',
-  dpmpp_2m_k: 'DPM++ 2M Karras',
-  dpmpp_2m_sde_k: 'DPM++ 2M SDE Karras',
-  heun_k: 'Heun Karras',
-  lms_k: 'LMS Karras',
-  euler_a: 'Euler Ancestral',
-  kdpm_2_a: 'KDPM 2 Ancestral',
-};
-
-export type Scheduler = (typeof SCHEDULER_NAMES)[number];
-
 export const NUMPY_RAND_MIN = 0;
-
 export const NUMPY_RAND_MAX = 2147483647;
-
-export const NODE_MIN_WIDTH = 250;

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

@@ -1,8 +1,6 @@
 import { createAction } from '@reduxjs/toolkit';
-import {
+import { imageSelected } from 'features/gallery/store/gallerySlice';
-  IMAGE_CATEGORIES,
+import { IMAGE_CATEGORIES } from 'features/gallery/store/types';
-  imageSelected,
-} from 'features/gallery/store/gallerySlice';
 import {
   ImageCache,
   getListImagesUrl,

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

@@ -1,6 +1,6 @@
 import { resetCanvas } from 'features/canvas/store/canvasSlice';
 import { controlNetReset } from 'features/controlNet/store/controlNetSlice';
-import { getImageUsage } from 'features/imageDeletion/store/imageDeletionSlice';
+import { getImageUsage } from 'features/imageDeletion/store/imageDeletionSelectors';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { clearInitialImage } from 'features/parameters/store/generationSlice';
 import { startAppListening } from '..';

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

@@ -1,11 +1,13 @@
 import { isAnyOf } from '@reduxjs/toolkit';
 import {
-  ASSETS_CATEGORIES,
-  IMAGE_CATEGORIES,
   boardIdSelected,
   galleryViewChanged,
   imageSelected,
 } from 'features/gallery/store/gallerySlice';
+import {
+  ASSETS_CATEGORIES,
+  IMAGE_CATEGORIES,
+} from 'features/gallery/store/types';
 import { imagesApi } from 'services/api/endpoints/images';
 import { startAppListening } from '..';
 

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

@@ -3,10 +3,8 @@ import { resetCanvas } from 'features/canvas/store/canvasSlice';
 import { controlNetReset } from 'features/controlNet/store/controlNetSlice';
 import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
 import { imageSelected } from 'features/gallery/store/gallerySlice';
-import {
+import { imageDeletionConfirmed } from 'features/imageDeletion/store/actions';
-  imageDeletionConfirmed,
+import { isModalOpenChanged } from 'features/imageDeletion/store/imageDeletionSlice';
-  isModalOpenChanged,
-} from 'features/imageDeletion/store/imageDeletionSlice';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { clearInitialImage } from 'features/parameters/store/generationSlice';
 import { clamp } from 'lodash-es';

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

@@ -1,8 +1,8 @@
+import { imageDeletionConfirmed } from 'features/imageDeletion/store/actions';
+import { selectImageUsage } from 'features/imageDeletion/store/imageDeletionSelectors';
 import {
-  imageDeletionConfirmed,
   imageToDeleteSelected,
   isModalOpenChanged,
-  selectImageUsage,
 } from 'features/imageDeletion/store/imageDeletionSlice';
 import { startAppListening } from '..';
 

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

@@ -1,7 +1,7 @@
-import { makeToast } from 'app/components/Toaster';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { initialImageChanged } from 'features/parameters/store/generationSlice';
 import { addToast } from 'features/system/store/systemSlice';
+import { makeToast } from 'features/system/util/makeToast';
 import { t } from 'i18next';
 import { startAppListening } from '..';
 

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

@@ -1,5 +1,5 @@
-import { makeToast } from 'app/components/Toaster';
+import { logger } from 'app/logging/logger';
-import { $logger, logger } from 'app/logging/logger';
+import { controlNetRemoved } from 'features/controlNet/store/controlNetSlice';
 import { loraRemoved } from 'features/lora/store/loraSlice';
 import { modelSelected } from 'features/parameters/store/actions';
 import {
@@ -8,9 +8,9 @@ import {
 } from 'features/parameters/store/generationSlice';
 import { zMainModel } from 'features/parameters/types/parameterSchemas';
 import { addToast } from 'features/system/store/systemSlice';
+import { makeToast } from 'features/system/util/makeToast';
 import { forEach } from 'lodash-es';
 import { startAppListening } from '..';
-import { controlNetRemoved } from 'features/controlNet/store/controlNetSlice';
 
 export const addModelSelectedListener = () => {
   startAppListening({

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

@@ -2,11 +2,11 @@ import { logger } from 'app/logging/logger';
 import { parseify } from 'common/util/serialize';
 import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
 import {
-  IMAGE_CATEGORIES,
   boardIdSelected,
   galleryViewChanged,
   imageSelected,
 } from 'features/gallery/store/gallerySlice';
+import { IMAGE_CATEGORIES } from 'features/gallery/store/types';
 import { progressImageSet } from 'features/system/store/systemSlice';
 import { imagesAdapter, imagesApi } from 'services/api/endpoints/images';
 import { isImageOutput } from 'services/api/guards';

invokeai/frontend/web/src/app/store/store.ts

@@ -4,14 +4,11 @@ import {
   autoBatchEnhancer,
   combineReducers,
   configureStore,
+  createAsyncThunk,
 } from '@reduxjs/toolkit';
-
-import dynamicMiddlewares from 'redux-dynamic-middlewares';
-import { rememberEnhancer, rememberReducer } from 'redux-remember';
-
 import canvasReducer from 'features/canvas/store/canvasSlice';
 import controlNetReducer from 'features/controlNet/store/controlNetSlice';
-import dynamicPromptsReducer from 'features/dynamicPrompts/store/slice';
+import dynamicPromptsReducer from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import boardsReducer from 'features/gallery/store/boardSlice';
 import galleryReducer from 'features/gallery/store/gallerySlice';
 import imageDeletionReducer from 'features/imageDeletion/store/imageDeletionSlice';
@@ -24,9 +21,8 @@ import systemReducer from 'features/system/store/systemSlice';
 import modelmanagerReducer from 'features/ui/components/tabs/ModelManager/store/modelManagerSlice';
 import hotkeysReducer from 'features/ui/store/hotkeysSlice';
 import uiReducer from 'features/ui/store/uiSlice';
-
+import dynamicMiddlewares from 'redux-dynamic-middlewares';
-import { listenerMiddleware } from './middleware/listenerMiddleware';
+import { rememberEnhancer, rememberReducer } from 'redux-remember';
-
 import { api } from 'services/api';
 import { LOCALSTORAGE_PREFIX } from './constants';
 import { serialize } from './enhancers/reduxRemember/serialize';
@@ -34,6 +30,7 @@ import { unserialize } from './enhancers/reduxRemember/unserialize';
 import { actionSanitizer } from './middleware/devtools/actionSanitizer';
 import { actionsDenylist } from './middleware/devtools/actionsDenylist';
 import { stateSanitizer } from './middleware/devtools/stateSanitizer';
+import { listenerMiddleware } from './middleware/listenerMiddleware';
 
 const allReducers = {
   canvas: canvasReducer,

invokeai/frontend/web/src/app/store/storeUtils.ts

@@ -1,8 +0,0 @@
-import { createAsyncThunk } from '@reduxjs/toolkit';
-import { AppDispatch, RootState } from 'app/store/store';
-
-// https://redux-toolkit.js.org/usage/usage-with-typescript#defining-a-pre-typed-createasyncthunk
-export const createAppAsyncThunk = createAsyncThunk.withTypes<{
-  state: RootState;
-  dispatch: AppDispatch;
-}>();

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

@@ -1,10 +1,10 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   roundDownToMultiple,
   roundToMultiple,
 } from 'common/util/roundDownToMultiple';
-import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import {
   setBoundingBoxCoordinates,
   setBoundingBoxDimensions,
@@ -13,7 +13,6 @@ import {
   setIsTransformingBoundingBox,
   setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import Konva from 'konva';
 import { GroupConfig } from 'konva/lib/Group';
 import { KonvaEventObject } from 'konva/lib/Node';
@@ -25,8 +24,8 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { Group, Rect, Transformer } from 'react-konva';
 
 const boundingBoxPreviewSelector = createSelector(
-  [canvasSelector, uiSelector],
+  [stateSelector],
-  (canvas, ui) => {
+  ({ canvas, generation }) => {
     const {
       boundingBoxCoordinates,
       boundingBoxDimensions,
@@ -38,7 +37,7 @@ const boundingBoxPreviewSelector = createSelector(
       shouldSnapToGrid,
     } = canvas;
 
-    const { aspectRatio } = ui;
+    const { aspectRatio } = generation;
 
     return {
       boundingBoxCoordinates,

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -4,14 +4,13 @@ import {
   roundDownToMultiple,
   roundToMultiple,
 } from 'common/util/roundDownToMultiple';
-import { IRect, Vector2d } from 'konva/lib/types';
+import { setAspectRatio } from 'features/parameters/store/generationSlice';
-import { clamp, cloneDeep } from 'lodash-es';
-//
 import {
   setActiveTab,
-  setAspectRatio,
   setShouldUseCanvasBetaLayout,
 } from 'features/ui/store/uiSlice';
+import { IRect, Vector2d } from 'konva/lib/types';
+import { clamp, cloneDeep } from 'lodash-es';
 import { RgbaColor } from 'react-colorful';
 import { sessionCanceled } from 'services/api/thunks/session';
 import { ImageDTO } from 'services/api/types';

invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts

@@ -1,5 +1,4 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
 import { ControlNetModelParam } from 'features/parameters/types/parameterSchemas';
 import { cloneDeep, forEach } from 'lodash-es';
 import { imagesApi } from 'services/api/endpoints/images';
@@ -365,5 +364,3 @@ export const {
 } = controlNetSlice.actions;
 
 export default controlNetSlice.reducer;
-
-export const controlNetSelector = (state: RootState) => state.controlNet;

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx

@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISwitch from 'common/components/IAISwitch';
 import { useCallback } from 'react';
-import { combinatorialToggled } from '../store/slice';
+import { combinatorialToggled } from '../store/dynamicPromptsSlice';
 
 const selector = createSelector(
   stateSelector,

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsEnabled.tsx

@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISwitch from 'common/components/IAISwitch';
 import { useCallback } from 'react';
-import { isEnabledToggled } from '../store/slice';
+import { isEnabledToggled } from '../store/dynamicPromptsSlice';
 
 const selector = createSelector(
   stateSelector,

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx

@@ -4,7 +4,10 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISlider from 'common/components/IAISlider';
 import { useCallback } from 'react';
-import { maxPromptsChanged, maxPromptsReset } from '../store/slice';
+import {
+  maxPromptsChanged,
+  maxPromptsReset,
+} from '../store/dynamicPromptsSlice';
 
 const selector = createSelector(
   stateSelector,

invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts

@@ -1,5 +1,4 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
 
 export interface DynamicPromptsState {
   isEnabled: boolean;
@@ -32,9 +31,6 @@ export const dynamicPromptsSlice = createSlice({
       state.isEnabled = !state.isEnabled;
     },
   },
-  extraReducers: (builder) => {
-    //
-  },
 });
 
 export const {
@@ -45,6 +41,3 @@ export const {
 } = dynamicPromptsSlice.actions;
 
 export default dynamicPromptsSlice.reducer;
-
-export const dynamicPromptsSelector = (state: RootState) =>
-  state.dynamicPrompts;

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GenericBoard.tsx

@@ -2,7 +2,7 @@ import { As, Badge, Flex } from '@chakra-ui/react';
 import { TypesafeDroppableData } from 'app/components/ImageDnd/typesafeDnd';
 import IAIDroppable from 'common/components/IAIDroppable';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import { BoardId } from 'features/gallery/store/gallerySlice';
+import { BoardId } from 'features/gallery/store/types';
 import { ReactNode } from 'react';
 import BoardContextMenu from '../BoardContextMenu';
 

invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx

@@ -11,14 +11,12 @@ import {
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { skipToken } from '@reduxjs/toolkit/dist/query';
+import { ImageUsage } from 'app/contexts/AddImageToBoardContext';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import ImageUsageMessage from 'features/imageDeletion/components/ImageUsageMessage';
-import {
+import { getImageUsage } from 'features/imageDeletion/store/imageDeletionSelectors';
-  ImageUsage,
-  getImageUsage,
-} from 'features/imageDeletion/store/imageDeletionSlice';
 import { some } from 'lodash-es';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx

@@ -2,8 +2,8 @@ import { Box, Flex } from '@chakra-ui/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import { IMAGE_LIMIT } from 'features/gallery//store/gallerySlice';
 import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
+import { IMAGE_LIMIT } from 'features/gallery/store/types';
 import {
   UseOverlayScrollbarsParams,
   useOverlayScrollbars,

invokeai/frontend/web/src/features/gallery/hooks/useNextPrevImage.ts

@@ -1,10 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
+import { imageSelected } from 'features/gallery/store/gallerySlice';
-  IMAGE_LIMIT,
-  imageSelected,
-} from 'features/gallery/store/gallerySlice';
 import { clamp, isEqual } from 'lodash-es';
 import { useCallback } from 'react';
 import {
@@ -14,6 +11,7 @@ import {
   useLazyListImagesQuery,
 } from 'services/api/endpoints/images';
 import { selectListImagesBaseQueryArgs } from '../store/gallerySelectors';
+import { IMAGE_LIMIT } from '../store/types';
 
 export const nextPrevImageButtonsSelector = createSelector(
   [stateSelector, selectListImagesBaseQueryArgs],

invokeai/frontend/web/src/features/gallery/store/boardSlice.ts

@@ -1,5 +1,4 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
 
 type BoardsState = {
   searchText: string;
@@ -27,6 +26,4 @@ const boardsSlice = createSlice({
 export const { setBoardSearchText, setUpdateBoardModalOpen } =
   boardsSlice.actions;
 
-export const boardsSelector = (state: RootState) => state.boards;
-
 export default boardsSlice.reducer;

invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts

@@ -6,7 +6,7 @@ import {
   ASSETS_CATEGORIES,
   IMAGE_CATEGORIES,
   INITIAL_IMAGE_LIMIT,
-} from './gallerySlice';
+} from './types';
 
 export const gallerySelector = (state: RootState) => state.gallery;
 

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

@@ -2,32 +2,7 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice, isAnyOf } from '@reduxjs/toolkit';
 import { uniq } from 'lodash-es';
 import { boardsApi } from 'services/api/endpoints/boards';
-import { ImageCategory } from 'services/api/types';
+import { BoardId, GalleryState, GalleryView } from './types';
-
-export const IMAGE_CATEGORIES: ImageCategory[] = ['general'];
-export const ASSETS_CATEGORIES: ImageCategory[] = [
-  'control',
-  'mask',
-  'user',
-  'other',
-];
-export const INITIAL_IMAGE_LIMIT = 100;
-export const IMAGE_LIMIT = 20;
-
-export type GalleryView = 'images' | 'assets';
-// export type BoardId = 'no_board' | (string & Record<never, never>);
-export type BoardId = string | undefined;
-
-type GalleryState = {
-  selection: string[];
-  shouldAutoSwitch: boolean;
-  autoAddBoardId: string | undefined;
-  galleryImageMinimumWidth: number;
-  selectedBoardId: BoardId;
-  galleryView: GalleryView;
-  batchImageNames: string[];
-  isBatchEnabled: boolean;
-};
 
 export const initialGalleryState: GalleryState = {
   selection: [],

invokeai/frontend/web/src/features/gallery/store/types.ts

@@ -0,0 +1,26 @@
+import { ImageCategory } from 'services/api/types';
+
+export const IMAGE_CATEGORIES: ImageCategory[] = ['general'];
+export const ASSETS_CATEGORIES: ImageCategory[] = [
+  'control',
+  'mask',
+  'user',
+  'other',
+];
+export const INITIAL_IMAGE_LIMIT = 100;
+export const IMAGE_LIMIT = 20;
+
+export type GalleryView = 'images' | 'assets';
+// export type BoardId = 'no_board' | (string & Record<never, never>);
+export type BoardId = string | undefined;
+
+export type GalleryState = {
+  selection: string[];
+  shouldAutoSwitch: boolean;
+  autoAddBoardId: string | undefined;
+  galleryImageMinimumWidth: number;
+  selectedBoardId: BoardId;
+  galleryView: GalleryView;
+  batchImageNames: string[];
+  isBatchEnabled: boolean;
+};

invokeai/frontend/web/src/features/gallery/store/util.ts

@@ -1,55 +0,0 @@
-import { isEqual } from 'lodash-es';
-import { ImageCategory, ImageDTO } from 'services/api/types';
-import { ASSETS_CATEGORIES, BoardId, IMAGE_CATEGORIES } from './gallerySlice';
-
-export const getCategoriesQueryParamForBoard = (
-  board_id: BoardId
-): ImageCategory[] | undefined => {
-  if (board_id === 'assets') {
-    return ASSETS_CATEGORIES;
-  }
-
-  if (board_id === 'images') {
-    return IMAGE_CATEGORIES;
-  }
-
-  // 'no_board' board, 'batch' board, user boards
-  return undefined;
-};
-
-export const getBoardIdQueryParamForBoard = (
-  board_id: BoardId
-): string | null => {
-  if (board_id === undefined) {
-    return 'none';
-  }
-
-  // user boards
-  return board_id;
-};
-
-export const getBoardIdFromBoardAndCategoriesQueryParam = (
-  board_id: string | undefined,
-  categories: ImageCategory[] | undefined
-): BoardId => {
-  if (board_id === undefined && isEqual(categories, IMAGE_CATEGORIES)) {
-    return 'images';
-  }
-
-  if (board_id === undefined && isEqual(categories, ASSETS_CATEGORIES)) {
-    return 'assets';
-  }
-
-  if (board_id === 'none') {
-    return 'no_board';
-  }
-
-  return board_id ?? 'UNKNOWN_BOARD';
-};
-
-export const getCategories = (imageDTO: ImageDTO) => {
-  if (IMAGE_CATEGORIES.includes(imageDTO.image_category)) {
-    return IMAGE_CATEGORIES;
-  }
-  return ASSETS_CATEGORIES;
-};

invokeai/frontend/web/src/features/imageDeletion/components/DeleteImageModal.tsx

@@ -16,16 +16,16 @@ import IAIButton from 'common/components/IAIButton';
 import IAISwitch from 'common/components/IAISwitch';
 import { setShouldConfirmOnDelete } from 'features/system/store/systemSlice';
 
+import { stateSelector } from 'app/store/store';
 import { ChangeEvent, memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import ImageUsageMessage from './ImageUsageMessage';
+import { imageDeletionConfirmed } from '../store/actions';
-import { stateSelector } from 'app/store/store';
+import { selectImageUsage } from '../store/imageDeletionSelectors';
 import {
-  imageDeletionConfirmed,
   imageToDeleteCleared,
   isModalOpenChanged,
-  selectImageUsage,
 } from '../store/imageDeletionSlice';
+import ImageUsageMessage from './ImageUsageMessage';
 
 const selector = createSelector(
   [stateSelector, selectImageUsage],

invokeai/frontend/web/src/features/imageDeletion/components/ImageUsageMessage.tsx

@@ -1,7 +1,7 @@
+import { ListItem, Text, UnorderedList } from '@chakra-ui/react';
 import { some } from 'lodash-es';
 import { memo } from 'react';
-import { ImageUsage } from '../store/imageDeletionSlice';
+import { ImageUsage } from '../store/types';
-import { ListItem, Text, UnorderedList } from '@chakra-ui/react';
 type Props = {
   imageUsage?: ImageUsage;
   topMessage?: string;

invokeai/frontend/web/src/features/imageDeletion/store/actions.ts

@@ -0,0 +1,8 @@
+import { createAction } from '@reduxjs/toolkit';
+import { ImageDTO } from 'services/api/types';
+import { ImageUsage } from './types';
+
+export const imageDeletionConfirmed = createAction<{
+  imageDTO: ImageDTO;
+  imageUsage: ImageUsage;
+}>('imageDeletion/imageDeletionConfirmed');

invokeai/frontend/web/src/features/imageDeletion/store/imageDeletionSelectors.ts

@@ -0,0 +1,55 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { RootState } from 'app/store/store';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import { some } from 'lodash-es';
+import { ImageUsage } from './types';
+
+export const getImageUsage = (state: RootState, image_name: string) => {
+  const { generation, canvas, nodes, controlNet } = state;
+  const isInitialImage = generation.initialImage?.imageName === image_name;
+
+  const isCanvasImage = canvas.layerState.objects.some(
+    (obj) => obj.kind === 'image' && obj.imageName === image_name
+  );
+
+  const isNodesImage = nodes.nodes.some((node) => {
+    return some(
+      node.data.inputs,
+      (input) =>
+        input.type === 'image' && input.value?.image_name === image_name
+    );
+  });
+
+  const isControlNetImage = some(
+    controlNet.controlNets,
+    (c) =>
+      c.controlImage === image_name || c.processedControlImage === image_name
+  );
+
+  const imageUsage: ImageUsage = {
+    isInitialImage,
+    isCanvasImage,
+    isNodesImage,
+    isControlNetImage,
+  };
+
+  return imageUsage;
+};
+
+export const selectImageUsage = createSelector(
+  [(state: RootState) => state],
+  (state) => {
+    const { imageToDelete } = state.imageDeletion;
+
+    if (!imageToDelete) {
+      return;
+    }
+
+    const { image_name } = imageToDelete;
+
+    const imageUsage = getImageUsage(state, image_name);
+
+    return imageUsage;
+  },
+  defaultSelectorOptions
+);

invokeai/frontend/web/src/features/imageDeletion/store/imageDeletionSlice.ts

@@ -1,12 +1,4 @@
-import {
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
-  PayloadAction,
-  createAction,
-  createSelector,
-  createSlice,
-} from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { some } from 'lodash-es';
 import { ImageDTO } from 'services/api/types';
 
 type DeleteImageState = {
@@ -43,65 +35,3 @@ export const {
 } = imageDeletion.actions;
 
 export default imageDeletion.reducer;
-
-export type ImageUsage = {
-  isInitialImage: boolean;
-  isCanvasImage: boolean;
-  isNodesImage: boolean;
-  isControlNetImage: boolean;
-};
-
-export const getImageUsage = (state: RootState, image_name: string) => {
-  const { generation, canvas, nodes, controlNet } = state;
-  const isInitialImage = generation.initialImage?.imageName === image_name;
-
-  const isCanvasImage = canvas.layerState.objects.some(
-    (obj) => obj.kind === 'image' && obj.imageName === image_name
-  );
-
-  const isNodesImage = nodes.nodes.some((node) => {
-    return some(
-      node.data.inputs,
-      (input) =>
-        input.type === 'image' && input.value?.image_name === image_name
-    );
-  });
-
-  const isControlNetImage = some(
-    controlNet.controlNets,
-    (c) =>
-      c.controlImage === image_name || c.processedControlImage === image_name
-  );
-
-  const imageUsage: ImageUsage = {
-    isInitialImage,
-    isCanvasImage,
-    isNodesImage,
-    isControlNetImage,
-  };
-
-  return imageUsage;
-};
-
-export const selectImageUsage = createSelector(
-  [(state: RootState) => state],
-  (state) => {
-    const { imageToDelete } = state.imageDeletion;
-
-    if (!imageToDelete) {
-      return;
-    }
-
-    const { image_name } = imageToDelete;
-
-    const imageUsage = getImageUsage(state, image_name);
-
-    return imageUsage;
-  },
-  defaultSelectorOptions
-);
-
-export const imageDeletionConfirmed = createAction<{
-  imageDTO: ImageDTO;
-  imageUsage: ImageUsage;
-}>('imageDeletion/imageDeletionConfirmed');

invokeai/frontend/web/src/features/imageDeletion/store/types.ts

@@ -0,0 +1,6 @@
+export type ImageUsage = {
+  isInitialImage: boolean;
+  isCanvasImage: boolean;
+  isNodesImage: boolean;
+  isControlNetImage: boolean;
+};

invokeai/frontend/web/src/features/nodes/components/AddNodeMenu.tsx

@@ -1,6 +1,7 @@
 import { Flex, Text } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppToaster } from 'app/components/Toaster';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
@@ -9,7 +10,7 @@ import { forwardRef, useCallback } from 'react';
 import 'reactflow/dist/style.css';
 import { AnyInvocationType } from 'services/events/types';
 import { useBuildInvocation } from '../hooks/useBuildInvocation';
-import { nodeAdded, nodesSelector } from '../store/nodesSlice';
+import { nodeAdded } from '../store/nodesSlice';
 
 type NodeTemplate = {
   label: string;
@@ -18,8 +19,8 @@ type NodeTemplate = {
 };
 
 const selector = createSelector(
-  nodesSelector,
+  [stateSelector],
-  (nodes) => {
+  ({ nodes }) => {
     const data: NodeTemplate[] = map(nodes.invocationTemplates, (template) => {
       return {
         label: template.title,

invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeResizer.tsx

@@ -1,4 +1,4 @@
-import { NODE_MIN_WIDTH } from 'app/constants';
+import { NODE_MIN_WIDTH } from 'features/nodes/types/constants';
 import { memo } from 'react';
 import { NodeResizeControl, NodeResizerProps } from 'reactflow';
 

invokeai/frontend/web/src/features/nodes/components/NodeWrapper.tsx

@@ -1,9 +1,8 @@
 import { Box, useToken } from '@chakra-ui/react';
-import { NODE_MIN_WIDTH } from 'app/constants';
-
 import { useAppSelector } from 'app/store/storeHooks';
 import { PropsWithChildren } from 'react';
 import { DRAG_HANDLE_CLASSNAME } from '../hooks/useBuildInvocation';
+import { NODE_MIN_WIDTH } from '../types/constants';
 
 type NodeWrapperProps = PropsWithChildren & {
   selected: boolean;

invokeai/frontend/web/src/features/nodes/components/ui/ClearNodesButton.tsx

@@ -9,7 +9,7 @@ import {
   Text,
   useDisclosure,
 } from '@chakra-ui/react';
-import { makeToast } from 'app/components/Toaster';
+import { makeToast } from 'features/system/util/makeToast';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';

invokeai/frontend/web/src/features/nodes/components/ui/LoadNodesButton.tsx

@@ -1,5 +1,5 @@
 import { FileButton } from '@mantine/core';
-import { makeToast } from 'app/components/Toaster';
+import { makeToast } from 'features/system/util/makeToast';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { loadFileEdges, loadFileNodes } from 'features/nodes/store/nodesSlice';

invokeai/frontend/web/src/features/nodes/store/nodesPersistDenylist.ts

@@ -1,4 +1,4 @@
-import { NodesState } from './nodesSlice';
+import { NodesState } from './types';
 
 /**
  * Nodes slice persist denylist

invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts

@@ -1,5 +1,4 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
 import {
   ControlNetModelParam,
   LoRAModelParam,
@@ -7,7 +6,6 @@ import {
   VaeModelParam,
 } from 'features/parameters/types/parameterSchemas';
 import { cloneDeep, uniqBy } from 'lodash-es';
-import { OpenAPIV3 } from 'openapi-types';
 import { RgbaColor } from 'react-colorful';
 import {
   addEdge,
@@ -19,24 +17,11 @@ import {
   Node,
   NodeChange,
   OnConnectStartParams,
-  ReactFlowInstance,
 } from 'reactflow';
 import { receivedOpenAPISchema } from 'services/api/thunks/schema';
 import { ImageField } from 'services/api/types';
 import { InvocationTemplate, InvocationValue } from '../types/types';
-
+import { NodesState } from './types';
-export type NodesState = {
-  nodes: Node<InvocationValue>[];
-  edges: Edge[];
-  schema: OpenAPIV3.Document | null;
-  invocationTemplates: Record<string, InvocationTemplate>;
-  connectionStartParams: OnConnectStartParams | null;
-  shouldShowGraphOverlay: boolean;
-  shouldShowFieldTypeLegend: boolean;
-  shouldShowMinimapPanel: boolean;
-  editorInstance: ReactFlowInstance | undefined;
-  progressNodeSize: { width: number; height: number };
-};
 
 export const initialNodesState: NodesState = {
   nodes: [],
@@ -194,5 +179,3 @@ export const {
 } = nodesSlice.actions;
 
 export default nodesSlice.reducer;
-
-export const nodesSelector = (state: RootState) => state.nodes;

invokeai/frontend/web/src/features/nodes/store/types.ts

@@ -0,0 +1,16 @@
+import { OpenAPIV3 } from 'openapi-types';
+import { Edge, Node, OnConnectStartParams, ReactFlowInstance } from 'reactflow';
+import { InvocationTemplate, InvocationValue } from '../types/types';
+
+export type NodesState = {
+  nodes: Node<InvocationValue>[];
+  edges: Edge[];
+  schema: OpenAPIV3.Document | null;
+  invocationTemplates: Record<string, InvocationTemplate>;
+  connectionStartParams: OnConnectStartParams | null;
+  shouldShowGraphOverlay: boolean;
+  shouldShowFieldTypeLegend: boolean;
+  shouldShowMinimapPanel: boolean;
+  editorInstance: ReactFlowInstance | undefined;
+  progressNodeSize: { width: number; height: number };
+};

invokeai/frontend/web/src/features/nodes/types/constants.ts

@@ -157,3 +157,5 @@ export const FIELDS: Record<FieldType, FieldUIConfig> = {
     description: 'A RGBA color.',
   },
 };
+
+export const NODE_MIN_WIDTH = 250;

invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx

@@ -20,7 +20,7 @@ const selector = createSelector(
 export default function ParamAdvancedCollapse() {
   const { activeLabel } = useAppSelector(selector);
   const shouldShowAdvancedOptions = useAppSelector(
-    (state: RootState) => state.ui.shouldShowAdvancedOptions
+    (state: RootState) => state.generation.shouldShowAdvancedOptions
   );
 
   if (!shouldShowAdvancedOptions) {

invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamClipSkip.tsx

@@ -2,28 +2,10 @@ import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAISlider from 'common/components/IAISlider';
 import { setClipSkip } from 'features/parameters/store/generationSlice';
+import { clipSkipMap } from 'features/parameters/types/constants';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export const clipSkipMap = {
-  'sd-1': {
-    maxClip: 12,
-    markers: [0, 1, 2, 3, 4, 8, 12],
-  },
-  'sd-2': {
-    maxClip: 24,
-    markers: [0, 1, 2, 3, 5, 10, 15, 20, 24],
-  },
-  sdxl: {
-    maxClip: 24,
-    markers: [0, 1, 2, 3, 5, 10, 15, 20, 24],
-  },
-  'sdxl-refiner': {
-    maxClip: 24,
-    markers: [0, 1, 2, 3, 5, 10, 15, 20, 24],
-  },
-};
-
 export default function ParamClipSkip() {
   const clipSkip = useAppSelector(
     (state: RootState) => state.generation.clipSkip

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx

@@ -1,23 +1,20 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISlider from 'common/components/IAISlider';
 import { roundToMultiple } from 'common/util/roundDownToMultiple';
-import {
+import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-  canvasSelector,
-  isStagingSelector,
-} from 'features/canvas/store/canvasSelectors';
 import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import { memo } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
-  [canvasSelector, isStagingSelector, uiSelector],
+  [stateSelector, isStagingSelector],
-  (canvas, isStaging, ui) => {
+  ({ canvas, generation }, isStaging) => {
     const { boundingBoxDimensions } = canvas;
-    const { aspectRatio } = ui;
+    const { aspectRatio } = generation;
     return {
       boundingBoxDimensions,
       isStaging,

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx

@@ -1,23 +1,20 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISlider from 'common/components/IAISlider';
 import { roundToMultiple } from 'common/util/roundDownToMultiple';
-import {
+import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-  canvasSelector,
-  isStagingSelector,
-} from 'features/canvas/store/canvasSelectors';
 import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import { memo } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
-  [canvasSelector, isStagingSelector, uiSelector],
+  [stateSelector, isStagingSelector],
-  (canvas, isStaging, ui) => {
+  ({ canvas, generation }, isStaging) => {
     const { boundingBoxDimensions } = canvas;
-    const { aspectRatio } = ui;
+    const { aspectRatio } = generation;
     return {
       boundingBoxDimensions,
       isStaging,

invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx

@@ -1,5 +1,6 @@
 import { Divider, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAICollapse from 'common/components/IAICollapse';
@@ -9,7 +10,6 @@ import ParamControlNetFeatureToggle from 'features/controlNet/components/paramet
 import {
   controlNetAdded,
   controlNetModelChanged,
-  controlNetSelector,
 } from 'features/controlNet/store/controlNetSlice';
 import { getValidControlNets } from 'features/controlNet/util/getValidControlNets';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
@@ -21,8 +21,8 @@ import { useGetControlNetModelsQuery } from 'services/api/endpoints/models';
 import { v4 as uuidv4 } from 'uuid';
 
 const selector = createSelector(
-  controlNetSelector,
+  [stateSelector],
-  (controlNet) => {
+  ({ controlNet }) => {
     const { controlNets, isEnabled } = controlNet;
 
     const validControlNets = getValidControlNets(controlNets);

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx

@@ -2,7 +2,7 @@ import { ButtonGroup, Flex } from '@chakra-ui/react';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
-import { setAspectRatio } from 'features/ui/store/uiSlice';
+import { setAspectRatio } from 'features/parameters/store/generationSlice';
 import { activeTabNameSelector } from '../../../../ui/store/uiSelectors';
 
 const aspectRatios = [
@@ -14,7 +14,7 @@ const aspectRatios = [
 
 export default function ParamAspectRatio() {
   const aspectRatio = useAppSelector(
-    (state: RootState) => state.ui.aspectRatio
+    (state: RootState) => state.generation.aspectRatio
   );
 
   const dispatch = useAppDispatch();

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamCFGScale.tsx

@@ -1,19 +1,16 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAINumberInput from 'common/components/IAINumberInput';
 import IAISlider from 'common/components/IAISlider';
-import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setCfgScale } from 'features/parameters/store/generationSlice';
-import { configSelector } from 'features/system/store/configSelectors';
-import { hotkeysSelector } from 'features/ui/store/hotkeysSlice';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
-  [generationSelector, configSelector, uiSelector, hotkeysSelector],
+  [stateSelector],
-  (generation, config, ui, hotkeys) => {
+  ({ generation, config, ui, hotkeys }) => {
     const { initial, min, sliderMax, inputMax } = config.sd.guidance;
     const { cfgScale } = generation;
     const { shouldUseSliders } = ui;

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamHeight.tsx

@@ -1,23 +1,20 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISlider, { IAIFullSliderProps } from 'common/components/IAISlider';
 import { roundToMultiple } from 'common/util/roundDownToMultiple';
-import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setHeight, setWidth } from 'features/parameters/store/generationSlice';
-import { configSelector } from 'features/system/store/configSelectors';
-import { hotkeysSelector } from 'features/ui/store/hotkeysSlice';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
-  [generationSelector, hotkeysSelector, configSelector, uiSelector],
+  [stateSelector],
-  (generation, hotkeys, config, ui) => {
+  ({ generation, hotkeys, config }) => {
     const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
       config.sd.height;
     const { height } = generation;
-    const { aspectRatio } = ui;
+    const { aspectRatio } = generation;
 
     const step = hotkeys.shift ? fineStep : coarseStep;
 

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx

@@ -1,12 +1,15 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { SCHEDULER_LABEL_MAP, SCHEDULER_NAMES } from 'app/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setScheduler } from 'features/parameters/store/generationSlice';
-import { SchedulerParam } from 'features/parameters/types/parameterSchemas';
+import {
+  SCHEDULER_LABEL_MAP,
+  SchedulerParam,
+} from 'features/parameters/types/parameterSchemas';
 import { uiSelector } from 'features/ui/store/uiSelectors';
+import { map } from 'lodash-es';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -16,10 +19,10 @@ const selector = createSelector(
     const { scheduler } = generation;
     const { favoriteSchedulers: enabledSchedulers } = ui;
 
-    const data = SCHEDULER_NAMES.map((schedulerName) => ({
+    const data = map(SCHEDULER_LABEL_MAP, (label, name) => ({
-      value: schedulerName,
+      value: name,
-      label: SCHEDULER_LABEL_MAP[schedulerName as SchedulerParam],
+      label: label,
-      group: enabledSchedulers.includes(schedulerName)
+      group: enabledSchedulers.includes(name as SchedulerParam)
         ? 'Favorites'
         : undefined,
     })).sort((a, b) => a.label.localeCompare(b.label));

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSteps.tsx

@@ -1,23 +1,20 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAINumberInput from 'common/components/IAINumberInput';
 
 import IAISlider from 'common/components/IAISlider';
-import { generationSelector } from 'features/parameters/store/generationSelectors';
 import {
   clampSymmetrySteps,
   setSteps,
 } from 'features/parameters/store/generationSlice';
-import { configSelector } from 'features/system/store/configSelectors';
-import { hotkeysSelector } from 'features/ui/store/hotkeysSlice';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
-  [generationSelector, configSelector, uiSelector, hotkeysSelector],
+  [stateSelector],
-  (generation, config, ui, hotkeys) => {
+  ({ generation, config, ui, hotkeys }) => {
     const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
       config.sd.steps;
     const { steps } = generation;

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamWidth.tsx

@@ -1,23 +1,19 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISlider, { IAIFullSliderProps } from 'common/components/IAISlider';
 import { roundToMultiple } from 'common/util/roundDownToMultiple';
-import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setHeight, setWidth } from 'features/parameters/store/generationSlice';
-import { configSelector } from 'features/system/store/configSelectors';
-import { hotkeysSelector } from 'features/ui/store/hotkeysSlice';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
-  [generationSelector, hotkeysSelector, configSelector, uiSelector],
+  [stateSelector],
-  (generation, hotkeys, config, ui) => {
+  ({ generation, hotkeys, config, ui }) => {
     const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
       config.sd.width;
-    const { width } = generation;
+    const { width, aspectRatio } = generation;
-    const { aspectRatio } = ui;
 
     const step = hotkeys.shift ? fineStep : coarseStep;
 

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageStrength.tsx

@@ -1,17 +1,15 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISlider from 'common/components/IAISlider';
-import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setImg2imgStrength } from 'features/parameters/store/generationSlice';
-import { configSelector } from 'features/system/store/configSelectors';
-import { hotkeysSelector } from 'features/ui/store/hotkeysSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
-  [generationSelector, hotkeysSelector, configSelector],
+  [stateSelector],
-  (generation, hotkeys, config) => {
+  ({ generation, hotkeys, config }) => {
     const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
       config.sd.img2imgStrength;
     const { img2imgStrength } = generation;

invokeai/frontend/web/src/features/parameters/store/generationSlice.ts

@@ -1,15 +1,10 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
-import { DEFAULT_SCHEDULER_NAME } from 'app/constants';
 import { roundToMultiple } from 'common/util/roundDownToMultiple';
 import { configChanged } from 'features/system/store/configSlice';
-import {
-  setAspectRatio,
-  setShouldShowAdvancedOptions,
-} from 'features/ui/store/uiSlice';
 import { clamp } from 'lodash-es';
 import { ImageDTO, MainModelField } from 'services/api/types';
-import { clipSkipMap } from '../components/Parameters/Advanced/ParamClipSkip';
+import { clipSkipMap } from '../types/constants';
 import {
   CfgScaleParam,
   HeightParam,
@@ -60,6 +55,8 @@ export interface GenerationState {
   seamlessYAxis: boolean;
   clipSkip: number;
   shouldUseCpuNoise: boolean;
+  shouldShowAdvancedOptions: boolean;
+  aspectRatio: number | null;
 }
 
 export const initialGenerationState: GenerationState = {
@@ -71,7 +68,7 @@ export const initialGenerationState: GenerationState = {
   perlin: 0,
   positivePrompt: '',
   negativePrompt: '',
-  scheduler: DEFAULT_SCHEDULER_NAME,
+  scheduler: 'euler',
   seamBlur: 16,
   seamSize: 96,
   seamSteps: 30,
@@ -96,6 +93,8 @@ export const initialGenerationState: GenerationState = {
   seamlessYAxis: false,
   clipSkip: 0,
   shouldUseCpuNoise: true,
+  shouldShowAdvancedOptions: false,
+  aspectRatio: null,
 };
 
 const initialState: GenerationState = initialGenerationState;
@@ -248,6 +247,19 @@ export const generationSlice = createSlice({
     shouldUseCpuNoiseChanged: (state, action: PayloadAction<boolean>) => {
       state.shouldUseCpuNoise = action.payload;
     },
+    setShouldShowAdvancedOptions: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowAdvancedOptions = action.payload;
+      if (!action.payload) {
+        state.clipSkip = 0;
+      }
+    },
+    setAspectRatio: (state, action: PayloadAction<number | null>) => {
+      const newAspectRatio = action.payload;
+      state.aspectRatio = newAspectRatio;
+      if (newAspectRatio) {
+        state.height = roundToMultiple(state.width / newAspectRatio, 8);
+      }
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(configChanged, (state, action) => {
@@ -270,12 +282,6 @@ export const generationSlice = createSlice({
       const advancedOptionsStatus = action.payload;
       if (!advancedOptionsStatus) state.clipSkip = 0;
     });
-    builder.addCase(setAspectRatio, (state, action) => {
-      const ratio = action.payload;
-      if (ratio) {
-        state.height = roundToMultiple(state.width / ratio, 8);
-      }
-    });
   },
 });
 
@@ -319,6 +325,8 @@ export const {
   setSeamlessYAxis,
   setClipSkip,
   shouldUseCpuNoiseChanged,
+  setShouldShowAdvancedOptions,
+  setAspectRatio,
 } = generationSlice.actions;
 
 export default generationSlice.reducer;

invokeai/frontend/web/src/features/parameters/types/constants.ts

@@ -4,3 +4,22 @@ export const MODEL_TYPE_MAP = {
   sdxl: 'Stable Diffusion XL',
   'sdxl-refiner': 'Stable Diffusion XL Refiner',
 };
+
+export const clipSkipMap = {
+  'sd-1': {
+    maxClip: 12,
+    markers: [0, 1, 2, 3, 4, 8, 12],
+  },
+  'sd-2': {
+    maxClip: 24,
+    markers: [0, 1, 2, 3, 5, 10, 15, 20, 24],
+  },
+  sdxl: {
+    maxClip: 24,
+    markers: [0, 1, 2, 3, 5, 10, 15, 20, 24],
+  },
+  'sdxl-refiner': {
+    maxClip: 24,
+    markers: [0, 1, 2, 3, 5, 10, 15, 20, 24],
+  },
+};

invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts

@@ -1,4 +1,4 @@
-import { NUMPY_RAND_MAX, SCHEDULER_NAMES_AS_CONST } from 'app/constants';
+import { NUMPY_RAND_MAX } from 'app/constants';
 import { z } from 'zod';
 
 /**
@@ -73,7 +73,30 @@ export const isValidCfgScale = (val: unknown): val is CfgScaleParam =>
 /**
  * Zod schema for scheduler parameter
  */
-export const zScheduler = z.enum(SCHEDULER_NAMES_AS_CONST);
+export const zScheduler = z.enum([
+  'euler',
+  'deis',
+  'ddim',
+  'ddpm',
+  'dpmpp_2s',
+  'dpmpp_2m',
+  'dpmpp_2m_sde',
+  'dpmpp_sde',
+  'heun',
+  'kdpm_2',
+  'lms',
+  'pndm',
+  'unipc',
+  'euler_k',
+  'dpmpp_2s_k',
+  'dpmpp_2m_k',
+  'dpmpp_2m_sde_k',
+  'dpmpp_sde_k',
+  'heun_k',
+  'lms_k',
+  'euler_a',
+  'kdpm_2_a',
+]);
 /**
  * Type alias for scheduler parameter, inferred from its zod schema
  */
@@ -84,6 +107,31 @@ export type SchedulerParam = z.infer<typeof zScheduler>;
 export const isValidScheduler = (val: unknown): val is SchedulerParam =>
   zScheduler.safeParse(val).success;
 
+export const SCHEDULER_LABEL_MAP: Record<SchedulerParam, string> = {
+  euler: 'Euler',
+  deis: 'DEIS',
+  ddim: 'DDIM',
+  ddpm: 'DDPM',
+  dpmpp_sde: 'DPM++ SDE',
+  dpmpp_2s: 'DPM++ 2S',
+  dpmpp_2m: 'DPM++ 2M',
+  dpmpp_2m_sde: 'DPM++ 2M SDE',
+  heun: 'Heun',
+  kdpm_2: 'KDPM 2',
+  lms: 'LMS',
+  pndm: 'PNDM',
+  unipc: 'UniPC',
+  euler_k: 'Euler Karras',
+  dpmpp_sde_k: 'DPM++ SDE Karras',
+  dpmpp_2s_k: 'DPM++ 2S Karras',
+  dpmpp_2m_k: 'DPM++ 2M Karras',
+  dpmpp_2m_sde_k: 'DPM++ 2M SDE Karras',
+  heun_k: 'Heun Karras',
+  lms_k: 'LMS Karras',
+  euler_a: 'Euler Ancestral',
+  kdpm_2_a: 'KDPM 2 Ancestral',
+};
+
 /**
  * Zod schema for seed parameter
  */

invokeai/frontend/web/src/features/system/components/LanguagePicker.tsx

@@ -7,32 +7,13 @@ import {
   MenuOptionGroup,
   Tooltip,
 } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import i18n from 'i18n';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { map } from 'lodash-es';
+import { useTranslation } from 'react-i18next';
+import { IoLanguage } from 'react-icons/io5';
+import { LANGUAGES } from '../store/constants';
 import { languageSelector } from '../store/systemSelectors';
 import { languageChanged } from '../store/systemSlice';
-import { map } from 'lodash-es';
-import { IoLanguage } from 'react-icons/io5';
-
-export const LANGUAGES = {
-  ar: i18n.t('common.langArabic', { lng: 'ar' }),
-  nl: i18n.t('common.langDutch', { lng: 'nl' }),
-  en: i18n.t('common.langEnglish', { lng: 'en' }),
-  fr: i18n.t('common.langFrench', { lng: 'fr' }),
-  de: i18n.t('common.langGerman', { lng: 'de' }),
-  he: i18n.t('common.langHebrew', { lng: 'he' }),
-  it: i18n.t('common.langItalian', { lng: 'it' }),
-  ja: i18n.t('common.langJapanese', { lng: 'ja' }),
-  ko: i18n.t('common.langKorean', { lng: 'ko' }),
-  pl: i18n.t('common.langPolish', { lng: 'pl' }),
-  pt_BR: i18n.t('common.langBrPortuguese', { lng: 'pt_BR' }),
-  pt: i18n.t('common.langPortuguese', { lng: 'pt' }),
-  ru: i18n.t('common.langRussian', { lng: 'ru' }),
-  zh_CN: i18n.t('common.langSimplifiedChinese', { lng: 'zh_CN' }),
-  es: i18n.t('common.langSpanish', { lng: 'es' }),
-  uk: i18n.t('common.langUkranian', { lng: 'ua' }),
-};
 
 export default function LanguagePicker() {
   const { t } = useTranslation();

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsClearIntermediates.tsx

@@ -1,5 +1,6 @@
 import { Heading, Text } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { controlNetReset } from 'features/controlNet/store/controlNetSlice';
 import { useCallback, useEffect } from 'react';
 import IAIButton from '../../../../common/components/IAIButton';
 import {
@@ -8,8 +9,7 @@ import {
 } from '../../../../services/api/endpoints/images';
 import { resetCanvas } from '../../../canvas/store/canvasSlice';
 import { addToast } from '../../store/systemSlice';
-import { StyledFlex } from './SettingsModal';
+import StyledFlex from './StyledFlex';
-import { controlNetReset } from 'features/controlNet/store/controlNetSlice';
 
 export default function SettingsClearIntermediates() {
   const dispatch = useAppDispatch();

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

@@ -14,12 +14,12 @@ import {
 import { createSelector } from '@reduxjs/toolkit';
 import { VALID_LOG_LEVELS } from 'app/logging/logger';
 import { LOCALSTORAGE_KEYS, LOCALSTORAGE_PREFIX } from 'app/store/constants';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { systemSelector } from 'features/system/store/systemSelectors';
+import { setShouldShowAdvancedOptions } from 'features/parameters/store/generationSlice';
 import {
-  SystemState,
   consoleLogLevelChanged,
   setEnableImageDebugging,
   setIsNodesEnabled,
@@ -27,18 +27,14 @@ import {
   shouldAntialiasProgressImageChanged,
   shouldLogToConsoleChanged,
 } from 'features/system/store/systemSlice';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import {
-  setShouldShowAdvancedOptions,
   setShouldShowProgressInViewer,
   setShouldUseCanvasBetaLayout,
   setShouldUseSliders,
 } from 'features/ui/store/uiSlice';
-import { UIState } from 'features/ui/store/uiTypes';
 import { isEqual } from 'lodash-es';
 import {
   ChangeEvent,
-  PropsWithChildren,
   ReactElement,
   cloneElement,
   useCallback,
@@ -49,10 +45,11 @@ import { LogLevelName } from 'roarr';
 import SettingSwitch from './SettingSwitch';
 import SettingsClearIntermediates from './SettingsClearIntermediates';
 import SettingsSchedulers from './SettingsSchedulers';
+import StyledFlex from './StyledFlex';
 
 const selector = createSelector(
-  [systemSelector, uiSelector],
+  [stateSelector],
-  (system: SystemState, ui: UIState) => {
+  ({ system, ui, generation }) => {
     const {
       shouldConfirmOnDelete,
       enableImageDebugging,
@@ -66,9 +63,10 @@ const selector = createSelector(
       shouldUseCanvasBetaLayout,
       shouldUseSliders,
       shouldShowProgressInViewer,
-      shouldShowAdvancedOptions,
     } = ui;
 
+    const { shouldShowAdvancedOptions } = generation;
+
     return {
       shouldConfirmOnDelete,
       enableImageDebugging,
@@ -349,22 +347,3 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
 };
 
 export default SettingsModal;
-
-export const StyledFlex = (props: PropsWithChildren) => {
-  return (
-    <Flex
-      sx={{
-        flexDirection: 'column',
-        gap: 2,
-        p: 4,
-        borderRadius: 'base',
-        bg: 'base.100',
-        _dark: {
-          bg: 'base.900',
-        },
-      }}
-    >
-      {props.children}
-    </Flex>
-  );
-};

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsSchedulers.tsx

@@ -1,16 +1,18 @@
-import { SCHEDULER_LABEL_MAP, SCHEDULER_NAMES } from 'app/constants';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIMantineMultiSelect from 'common/components/IAIMantineMultiSelect';
-import { SchedulerParam } from 'features/parameters/types/parameterSchemas';
+import {
+  SCHEDULER_LABEL_MAP,
+  SchedulerParam,
+} from 'features/parameters/types/parameterSchemas';
 import { favoriteSchedulersChanged } from 'features/ui/store/uiSlice';
 import { map } from 'lodash-es';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const data = map(SCHEDULER_NAMES, (s) => ({
+const data = map(SCHEDULER_LABEL_MAP, (value, label) => ({
-  value: s,
+  value,
-  label: SCHEDULER_LABEL_MAP[s],
+  label,
 })).sort((a, b) => a.label.localeCompare(b.label));
 
 export default function SettingsSchedulers() {

invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx

@@ -0,0 +1,23 @@
+import { Flex } from '@chakra-ui/react';
+import { PropsWithChildren } from 'react';
+
+const StyledFlex = (props: PropsWithChildren) => {
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        gap: 2,
+        p: 4,
+        borderRadius: 'base',
+        bg: 'base.100',
+        _dark: {
+          bg: 'base.900',
+        },
+      }}
+    >
+      {props.children}
+    </Flex>
+  );
+};
+
+export default StyledFlex;

invokeai/frontend/web/src/features/system/store/constants.ts

@@ -0,0 +1,20 @@
+import i18n from 'i18n';
+
+export const LANGUAGES = {
+  ar: i18n.t('common.langArabic', { lng: 'ar' }),
+  nl: i18n.t('common.langDutch', { lng: 'nl' }),
+  en: i18n.t('common.langEnglish', { lng: 'en' }),
+  fr: i18n.t('common.langFrench', { lng: 'fr' }),
+  de: i18n.t('common.langGerman', { lng: 'de' }),
+  he: i18n.t('common.langHebrew', { lng: 'he' }),
+  it: i18n.t('common.langItalian', { lng: 'it' }),
+  ja: i18n.t('common.langJapanese', { lng: 'ja' }),
+  ko: i18n.t('common.langKorean', { lng: 'ko' }),
+  pl: i18n.t('common.langPolish', { lng: 'pl' }),
+  pt_BR: i18n.t('common.langBrPortuguese', { lng: 'pt_BR' }),
+  pt: i18n.t('common.langPortuguese', { lng: 'pt' }),
+  ru: i18n.t('common.langRussian', { lng: 'ru' }),
+  zh_CN: i18n.t('common.langSimplifiedChinese', { lng: 'zh_CN' }),
+  es: i18n.t('common.langSpanish', { lng: 'es' }),
+  uk: i18n.t('common.langUkranian', { lng: 'ua' }),
+};

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -1,6 +1,5 @@
 import { UseToastOptions } from '@chakra-ui/react';
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
-
 import { InvokeLogLevel } from 'app/logging/logger';
 import { userInvoked } from 'app/store/actions';
 import { nodeTemplatesBuilt } from 'features/nodes/store/nodesSlice';
@@ -22,8 +21,8 @@ import {
   appSocketUnsubscribed,
 } from 'services/events/actions';
 import { ProgressImage } from 'services/events/types';
-import { makeToast } from '../../../app/components/Toaster';
+import { makeToast } from '../util/makeToast';
-import { LANGUAGES } from '../components/LanguagePicker';
+import { LANGUAGES } from './constants';
 
 export type CancelStrategy = 'immediate' | 'scheduled';
 

invokeai/frontend/web/src/features/system/util/makeToast.ts

@@ -0,0 +1,20 @@
+import { UseToastOptions } from '@chakra-ui/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 };
+};

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 import { useForm } from '@mantine/form';
-import { makeToast } from 'app/components/Toaster';
+import { makeToast } from 'features/system/util/makeToast';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIMantineTextInput from 'common/components/IAIMantineInput';

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 import { useForm } from '@mantine/form';
-import { makeToast } from 'app/components/Toaster';
+import { makeToast } from 'features/system/util/makeToast';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIMantineTextInput from 'common/components/IAIMantineInput';

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/FoundModelsList.tsx

@@ -1,5 +1,5 @@
 import { Flex, Text } from '@chakra-ui/react';
-import { makeToast } from 'app/components/Toaster';
+import { makeToast } from 'features/system/util/makeToast';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { SelectItem } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { makeToast } from 'app/components/Toaster';
+import { makeToast } from 'features/system/util/makeToast';
 import { RootState } from 'app/store/store';
 import IAIButton from 'common/components/IAIButton';
 import IAIMantineTextInput from 'common/components/IAIMantineInput';

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/MergeModelsPanel.tsx

@@ -1,5 +1,5 @@
 import { Flex, Radio, RadioGroup, Text, Tooltip } from '@chakra-ui/react';
-import { makeToast } from 'app/components/Toaster';
+import { makeToast } from 'features/system/util/makeToast';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIInput from 'common/components/IAIInput';

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx

@@ -1,6 +1,6 @@
 import { Badge, Divider, Flex, Text } from '@chakra-ui/react';
 import { useForm } from '@mantine/form';
-import { makeToast } from 'app/components/Toaster';
+import { makeToast } from 'features/system/util/makeToast';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIMantineTextInput from 'common/components/IAIMantineInput';

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx

@@ -1,6 +1,6 @@
 import { Divider, Flex, Text } from '@chakra-ui/react';
 import { useForm } from '@mantine/form';
-import { makeToast } from 'app/components/Toaster';
+import { makeToast } from 'features/system/util/makeToast';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIMantineTextInput from 'common/components/IAIMantineInput';

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelConvert.tsx

@@ -7,7 +7,7 @@ import {
   Tooltip,
   UnorderedList,
 } from '@chakra-ui/react';
-import { makeToast } from 'app/components/Toaster';
+import { makeToast } from 'features/system/util/makeToast';
 // import { convertToDiffusers } from 'app/socketio/actions';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIAlertDialog from 'common/components/IAIAlertDialog';

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx

@@ -1,6 +1,6 @@
 import { DeleteIcon } from '@chakra-ui/icons';
 import { Badge, Flex, Text, Tooltip } from '@chakra-ui/react';
-import { makeToast } from 'app/components/Toaster';
+import { makeToast } from 'features/system/util/makeToast';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIAlertDialog from 'common/components/IAIAlertDialog';
 import IAIButton from 'common/components/IAIButton';

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton.tsx

@@ -1,4 +1,4 @@
-import { makeToast } from 'app/components/Toaster';
+import { makeToast } from 'features/system/util/makeToast';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIIconButton from 'common/components/IAIIconButton';

invokeai/frontend/web/src/features/ui/store/hotkeysSlice.ts

@@ -1,6 +1,5 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
 
 type HotkeysState = {
   shift: boolean;
@@ -23,5 +22,3 @@ export const hotkeysSlice = createSlice({
 export const { shiftKeyPressed } = hotkeysSlice.actions;
 
 export default hotkeysSlice.reducer;
-
-export const hotkeysSelector = (state: RootState) => state.hotkeys;

invokeai/frontend/web/src/features/ui/store/uiSlice.ts

@@ -19,8 +19,6 @@ export const initialUIState: UIState = {
   shouldHidePreview: false,
   shouldShowProgressInViewer: true,
   shouldShowEmbeddingPicker: false,
-  shouldShowAdvancedOptions: false,
-  aspectRatio: null,
   favoriteSchedulers: [],
 };
 
@@ -98,12 +96,6 @@ export const uiSlice = createSlice({
     toggleEmbeddingPicker: (state) => {
       state.shouldShowEmbeddingPicker = !state.shouldShowEmbeddingPicker;
     },
-    setShouldShowAdvancedOptions: (state, action: PayloadAction<boolean>) => {
-      state.shouldShowAdvancedOptions = action.payload;
-    },
-    setAspectRatio: (state, action: PayloadAction<number | null>) => {
-      state.aspectRatio = action.payload;
-    },
   },
   extraReducers(builder) {
     builder.addCase(initialImageChanged, (state) => {
@@ -130,8 +122,6 @@ export const {
   setShouldShowProgressInViewer,
   favoriteSchedulersChanged,
   toggleEmbeddingPicker,
-  setShouldShowAdvancedOptions,
-  setAspectRatio,
 } = uiSlice.actions;
 
 export default uiSlice.reducer;

invokeai/frontend/web/src/features/ui/store/uiTypes.ts

@@ -25,7 +25,5 @@ export interface UIState {
   shouldShowGallery: boolean;
   shouldShowProgressInViewer: boolean;
   shouldShowEmbeddingPicker: boolean;
-  shouldShowAdvancedOptions: boolean;
-  aspectRatio: number | null;
   favoriteSchedulers: SchedulerParam[];
 }

invokeai/frontend/web/src/services/api/endpoints/boards.ts

@@ -2,8 +2,7 @@ import { Update } from '@reduxjs/toolkit';
 import {
   ASSETS_CATEGORIES,
   IMAGE_CATEGORIES,
-  boardIdSelected,
+} from 'features/gallery/store/types';
-} from 'features/gallery/store/gallerySlice';
 import {
   BoardDTO,
   ImageDTO,

invokeai/frontend/web/src/services/api/endpoints/images.ts

@@ -5,8 +5,7 @@ import {
   ASSETS_CATEGORIES,
   BoardId,
   IMAGE_CATEGORIES,
-} from 'features/gallery/store/gallerySlice';
+} from 'features/gallery/store/types';
-import { getCategories } from 'features/gallery/store/util';
 import queryString from 'query-string';
 import { ApiFullTagDescription, api } from '..';
 import { components, paths } from '../schema';
@@ -16,7 +15,37 @@ import {
   OffsetPaginatedResults_ImageDTO_,
   PostUploadAction,
 } from '../types';
-import { getIsImageInDateRange } from './util';
+
+const getIsImageInDateRange = (
+  data: ImageCache | undefined,
+  imageDTO: ImageDTO
+) => {
+  if (!data) {
+    return false;
+  }
+  const cacheImageDTOS = imagesSelectors.selectAll(data);
+
+  if (cacheImageDTOS.length > 1) {
+    // Images are sorted by `created_at` DESC
+    // check if the image is newer than the oldest image in the cache
+    const createdDate = new Date(imageDTO.created_at);
+    const oldestDate = new Date(
+      cacheImageDTOS[cacheImageDTOS.length - 1].created_at
+    );
+    return createdDate >= oldestDate;
+  } else if ([0, 1].includes(cacheImageDTOS.length)) {
+    // if there are only 1 or 0 images in the cache, we consider the image to be in the date range
+    return true;
+  }
+  return false;
+};
+
+const getCategories = (imageDTO: ImageDTO) => {
+  if (IMAGE_CATEGORIES.includes(imageDTO.image_category)) {
+    return IMAGE_CATEGORIES;
+  }
+  return ASSETS_CATEGORIES;
+};
 
 export type ListImagesArgs = NonNullable<
   paths['/api/v1/images/']['get']['parameters']['query']

invokeai/frontend/web/src/services/api/endpoints/util.ts

@@ -1,51 +0,0 @@
-import { ImageDTO } from '../types';
-import { ImageCache, imagesSelectors } from './images';
-
-export const getIsImageInDateRange = (
-  data: ImageCache | undefined,
-  imageDTO: ImageDTO
-) => {
-  if (!data) {
-    return false;
-  }
-  const cacheImageDTOS = imagesSelectors.selectAll(data);
-
-  if (cacheImageDTOS.length > 1) {
-    // Images are sorted by `created_at` DESC
-    // check if the image is newer than the oldest image in the cache
-    const createdDate = new Date(imageDTO.created_at);
-    const oldestDate = new Date(
-      cacheImageDTOS[cacheImageDTOS.length - 1].created_at
-    );
-    return createdDate >= oldestDate;
-  } else if ([0, 1].includes(cacheImageDTOS.length)) {
-    // if there are only 1 or 0 images in the cache, we consider the image to be in the date range
-    return true;
-  }
-  return false;
-};
-
-// /**
-//  * Determines the action we should take when an image may need to be added or updated in a cache.
-//  */
-// export const getCacheAction = (
-//   data: ImageCache | undefined,
-//   imageDTO: ImageDTO
-// ): 'add' | 'update' | 'none' => {
-//   const isInDateRange = getIsImageInDateRange(data, imageDTO);
-//   const isCacheFullyPopulated = data && data.total === data.ids.length;
-//   const shouldUpdateCache =
-//     Boolean(isInDateRange) || Boolean(isCacheFullyPopulated);
-
-//   const isImageInCache = data && data.ids.includes(imageDTO.image_name);
-
-//   if (shouldUpdateCache && isImageInCache) {
-//     return 'update';
-//   }
-
-//   if (shouldUpdateCache && !isImageInCache) {
-//     return 'add';
-//   }
-
-//   return 'none';
-// };

invokeai/frontend/web/src/services/api/hooks/useBoardName.ts

@@ -1,4 +1,4 @@
-import { BoardId } from 'features/gallery/store/gallerySlice';
+import { BoardId } from 'features/gallery/store/types';
 import { useListAllBoardsQuery } from '../endpoints/boards';
 
 export const useBoardName = (board_id: BoardId | null | undefined) => {

invokeai/frontend/web/src/services/api/hooks/useBoardTotal.ts

@@ -1,5 +1,5 @@
 import { useAppSelector } from 'app/store/storeHooks';
-import { BoardId } from 'features/gallery/store/gallerySlice';
+import { BoardId } from 'features/gallery/store/types';
 import { useMemo } from 'react';
 import {
   useGetBoardAssetsTotalQuery,

invokeai/frontend/web/src/services/api/thunks/session.ts

@@ -1,5 +1,4 @@
-import { isAnyOf } from '@reduxjs/toolkit';
+import { createAsyncThunk, isAnyOf } from '@reduxjs/toolkit';
-import { createAppAsyncThunk } from 'app/store/storeUtils';
 import { isObject } from 'lodash-es';
 import { $client } from 'services/api/client';
 import { paths } from 'services/api/schema';
@@ -25,7 +24,7 @@ type CreateSessionThunkConfig = {
 /**
  * `SessionsService.createSession()` thunk
  */
-export const sessionCreated = createAppAsyncThunk<
+export const sessionCreated = createAsyncThunk<
   CreateSessionResponse,
   CreateSessionArg,
   CreateSessionThunkConfig
@@ -63,7 +62,7 @@ const isErrorWithStatus = (error: unknown): error is { status: number } =>
 /**
  * `SessionsService.invokeSession()` thunk
  */
-export const sessionInvoked = createAppAsyncThunk<
+export const sessionInvoked = createAsyncThunk<
   InvokedSessionResponse,
   InvokedSessionArg,
   InvokedSessionThunkConfig
@@ -101,7 +100,7 @@ type CancelSessionThunkConfig = {
 /**
  * `SessionsService.cancelSession()` thunk
  */
-export const sessionCanceled = createAppAsyncThunk<
+export const sessionCanceled = createAsyncThunk<
   CancelSessionResponse,
   CancelSessionArg,
   CancelSessionThunkConfig
@@ -141,7 +140,7 @@ type ListSessionsThunkConfig = {
 /**
  * `SessionsService.listSessions()` thunk
  */
-export const listedSessions = createAppAsyncThunk<
+export const listedSessions = createAsyncThunk<
   ListSessionsResponse,
   ListSessionsArg,
   ListSessionsThunkConfig

invokeai/frontend/web/src/services/events/util/setEventListeners.ts

@@ -1,9 +1,9 @@
 import { MiddlewareAPI } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import { AppDispatch, RootState } from 'app/store/store';
+import { addToast } from 'features/system/store/systemSlice';
+import { makeToast } from 'features/system/util/makeToast';
 import { Socket } from 'socket.io-client';
-import { makeToast } from '../../../app/components/Toaster';
-import { addToast } from '../../../features/system/store/systemSlice';
 import {
   socketConnected,
   socketDisconnected,