fix(ui): store customStarUI outside redux

JSX is not serializable, so it cannot be in redux. Non-serializable global state may be put into `nanostores`.

- Use `nanostores` for `customStarUI`
- Use `nanostores` for `headerComponent`
- Re-enable the serializable & immutable check redux middlewares

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

@@ -1,4 +1,6 @@
 import { MenuItem } from '@chakra-ui/react';
+import { useStore } from '@nanostores/react';
+import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   imagesToChangeSelected,
@@ -12,12 +14,11 @@ import {
   useStarImagesMutation,
   useUnstarImagesMutation,
 } from '../../../../services/api/endpoints/images';
-import { uiSelector } from '../../../ui/store/uiSelectors';
 
 const MultipleSelectionMenuItems = () => {
   const dispatch = useAppDispatch();
   const selection = useAppSelector((state) => state.gallery.selection);
-  const { customStarUi } = useAppSelector(uiSelector);
+  const customStarUi = useStore($customStarUI);
 
   const [starImages] = useStarImagesMutation();
   const [unstarImages] = useUnstarImagesMutation();

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

@@ -1,5 +1,7 @@
 import { Flex, MenuItem, Spinner } from '@chakra-ui/react';
+import { useStore } from '@nanostores/react';
 import { useAppToaster } from 'app/components/Toaster';
+import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
 import {
@@ -7,6 +9,7 @@ import {
   isModalOpenChanged,
 } from 'features/changeBoardModal/store/slice';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
+import { workflowLoadRequested } from 'features/nodes/store/actions';
 import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
@@ -32,10 +35,8 @@ import {
   useUnstarImagesMutation,
 } from 'services/api/endpoints/images';
 import { ImageDTO } from 'services/api/types';
-import { sentImageToCanvas, sentImageToImg2Img } from '../../store/actions';
-import { workflowLoadRequested } from 'features/nodes/store/actions';
 import { configSelector } from '../../../system/store/configSelectors';
-import { uiSelector } from '../../../ui/store/uiSelectors';
+import { sentImageToCanvas, sentImageToImg2Img } from '../../store/actions';
 
 type SingleSelectionMenuItemsProps = {
   imageDTO: ImageDTO;
@@ -51,7 +52,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
 
   const isCanvasEnabled = useFeatureStatus('unifiedCanvas').isFeatureEnabled;
   const { shouldFetchMetadataFromApi } = useAppSelector(configSelector);
-  const { customStarUi } = useAppSelector(uiSelector);
+  const customStarUi = useStore($customStarUI);
 
   const { metadata, workflow, isLoading } = useGetImageMetadataFromFileQuery(
     { image: imageDTO, shouldFetchMetadataFromApi },

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

@@ -1,4 +1,6 @@
 import { Box, Flex } from '@chakra-ui/react';
+import { useStore } from '@nanostores/react';
+import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDndImage from 'common/components/IAIDndImage';
 import IAIFillSkeleton from 'common/components/IAIFillSkeleton';
@@ -10,6 +12,7 @@ import {
 } from 'features/dnd/types';
 import { useMultiselect } from 'features/gallery/hooks/useMultiselect';
 import { MouseEvent, memo, useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FaTrash } from 'react-icons/fa';
 import { MdStar, MdStarBorder } from 'react-icons/md';
 import {
@@ -18,8 +21,6 @@ import {
   useUnstarImagesMutation,
 } from 'services/api/endpoints/images';
 import IAIDndImageIcon from '../../../../common/components/IAIDndImageIcon';
-import { uiSelector } from '../../../ui/store/uiSelectors';
-import { useTranslation } from 'react-i18next';
 
 interface HoverableImageProps {
   imageName: string;
@@ -35,7 +36,7 @@ const GalleryImage = (props: HoverableImageProps) => {
   const { handleClick, isSelected, selection, selectionCount } =
     useMultiselect(imageDTO);
 
-  const { customStarUi } = useAppSelector(uiSelector);
+  const customStarUi = useStore($customStarUI);
 
   const handleDelete = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {

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

@@ -4,7 +4,7 @@ import { initialImageChanged } from 'features/parameters/store/generationSlice';
 import { SchedulerParam } from 'features/parameters/types/parameterSchemas';
 import { setActiveTabReducer } from './extraReducers';
 import { InvokeTabName } from './tabMap';
-import { CustomStarUi, UIState } from './uiTypes';
+import { UIState } from './uiTypes';
 
 export const initialUIState: UIState = {
   activeTab: 0,
@@ -19,7 +19,6 @@ export const initialUIState: UIState = {
   favoriteSchedulers: [],
   globalContextMenuCloseTrigger: 0,
   panels: {},
-  customStarUi: undefined,
 };
 
 export const uiSlice = createSlice({
@@ -71,9 +70,6 @@ export const uiSlice = createSlice({
     ) => {
       state.panels[action.payload.name] = action.payload.value;
     },
-    setCustomStarUi: (state, action: PayloadAction<CustomStarUi>) => {
-      state.customStarUi = action.payload;
-    },
   },
   extraReducers(builder) {
     builder.addCase(initialImageChanged, (state) => {
@@ -95,7 +91,6 @@ export const {
   setShouldAutoChangeDimensions,
   contextMenusClosed,
   panelsChanged,
-  setCustomStarUi,
 } = uiSlice.actions;
 
 export default uiSlice.reducer;

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

@@ -1,4 +1,3 @@
-import { MenuItemProps } from '@chakra-ui/react';
 import { SchedulerParam } from 'features/parameters/types/parameterSchemas';
 
 export type Coordinates = {
@@ -13,17 +12,6 @@ export type Dimensions = {
 
 export type Rect = Coordinates & Dimensions;
 
-export type CustomStarUi = {
-  on: {
-    icon: MenuItemProps['icon'];
-    text: string;
-  };
-  off: {
-    icon: MenuItemProps['icon'];
-    text: string;
-  };
-};
-
 export interface UIState {
   activeTab: number;
   shouldShowImageDetails: boolean;
@@ -37,5 +25,4 @@ export interface UIState {
   favoriteSchedulers: SchedulerParam[];
   globalContextMenuCloseTrigger: number;
   panels: Record<string, string>;
-  customStarUi?: CustomStarUi;
 }