tidy(ui): move viewerMode to uiSlice

Don't need a whole slice for this.

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

@@ -26,7 +26,6 @@ import { sdxlPersistConfig, sdxlSlice } from 'features/sdxl/store/sdxlSlice';
 import { configSlice } from 'features/system/store/configSlice';
 import { systemPersistConfig, systemSlice } from 'features/system/store/systemSlice';
 import { uiPersistConfig, uiSlice } from 'features/ui/store/uiSlice';
-import { viewerPersistConfig, viewerSlice } from 'features/viewer/store/viewerSlice';
 import { diff } from 'jsondiffpatch';
 import { defaultsDeep, keys, omit, pick } from 'lodash-es';
 import dynamicMiddlewares from 'redux-dynamic-middlewares';
@@ -63,7 +62,6 @@ const allReducers = {
   [queueSlice.name]: queueSlice.reducer,
   [workflowSlice.name]: workflowSlice.reducer,
   [hrfSlice.name]: hrfSlice.reducer,
-  [viewerSlice.name]: viewerSlice.reducer,
   [progressSlice.name]: progressSlice.reducer,
   [api.reducerPath]: api.reducer,
 };
@@ -109,7 +107,6 @@ const persistConfigs: { [key in keyof typeof allReducers]?: PersistConfig } = {
   [loraPersistConfig.name]: loraPersistConfig,
   [modelManagerPersistConfig.name]: modelManagerPersistConfig,
   [hrfPersistConfig.name]: hrfPersistConfig,
-  [viewerPersistConfig.name]: viewerPersistConfig,
   [progressPersistConfig.name]: progressPersistConfig,
 };
 

invokeai/frontend/web/src/features/dnd/types/index.ts

@@ -12,7 +12,7 @@ import type {
 } from '@dnd-kit/core';
 import type { BoardId } from 'features/gallery/store/types';
 import type { FieldInputInstance, FieldInputTemplate } from 'features/nodes/types/field';
-import type { ViewerMode } from 'features/viewer/store/viewerSlice';
+import type { ViewerMode } from 'features/ui/store/uiTypes';
 import type { ImageDTO } from 'services/api/types';
 
 type BaseDropData = {

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

@@ -4,7 +4,7 @@ import type { PersistConfig, RootState } from 'app/store/store';
 import { initialImageChanged } from 'features/parameters/store/generationSlice';
 
 import type { InvokeTabName } from './tabMap';
-import type { UIState } from './uiTypes';
+import type { UIState, ViewerMode } from './uiTypes';
 
 export const initialUIState: UIState = {
   _version: 1,
@@ -14,6 +14,7 @@ export const initialUIState: UIState = {
   panels: {},
   accordions: {},
   expanders: {},
+  viewerMode: 'image',
 };
 
 export const uiSlice = createSlice({
@@ -40,6 +41,9 @@ export const uiSlice = createSlice({
       const { id, isOpen } = action.payload;
       state.expanders[id] = isOpen;
     },
+    viewerModeChanged: (state, action: PayloadAction<ViewerMode>) => {
+      state.viewerMode = action.payload;
+    },
   },
   extraReducers(builder) {
     builder.addCase(initialImageChanged, (state) => {
@@ -55,6 +59,7 @@ export const {
   panelsChanged,
   accordionStateChanged,
   expanderStateChanged,
+  viewerModeChanged,
 } = uiSlice.actions;
 
 export const selectUiSlice = (state: RootState) => state.ui;

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

@@ -29,4 +29,10 @@ export interface UIState {
    * The state of expanders. The key is the id of the expander, and the value is a boolean representing the open state.
    */
   expanders: Record<string, boolean>;
+  /**
+   * The currently-selected viewer mode.
+   */
+  viewerMode: ViewerMode;
 }
+
+export type ViewerMode = 'image' | 'info' | 'progress';

invokeai/frontend/web/src/features/viewer/components/Viewer.tsx

@@ -8,7 +8,7 @@ import { ViewerToolbar } from 'features/viewer/components/ViewerToolbar';
 import { memo } from 'react';
 
 export const Viewer = memo(() => {
-  const viewerMode = useAppSelector((s) => s.viewer.viewerMode);
+  const viewerMode = useAppSelector((s) => s.ui.viewerMode);
 
   return (
     <Flex position="relative" flexDirection="column" height="full" width="full" gap={4}>

invokeai/frontend/web/src/features/viewer/components/ViewerDroppable.tsx

@@ -14,7 +14,7 @@ const selectLastSelectedImageName = createSelector(
 export const ViewerDroppable = memo(() => {
   const { t } = useTranslation();
   const currentImageName = useAppSelector(selectLastSelectedImageName);
-  const viewerMode = useAppSelector((s) => s.viewer.viewerMode);
+  const viewerMode = useAppSelector((s) => s.ui.viewerMode);
   const viewerDropData = useMemo<ViewerImageDropData>(
     () => ({
       id: 'viewer-image',

invokeai/frontend/web/src/features/viewer/components/ViewerToolbarModeButtons.tsx

@@ -2,7 +2,7 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { ButtonGroup, IconButton, spinAnimation } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useIsProcessing } from 'features/queue/hooks/useIsProcessing';
-import { viewerModeChanged } from 'features/viewer/store/viewerSlice';
+import { viewerModeChanged } from 'features/ui/store/uiSlice';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -15,7 +15,7 @@ const loadingStyles: SystemStyleObject = {
 export const ViewerToolbarModeButtons = memo(() => {
   const dispatch = useAppDispatch();
   const isProcessing = useIsProcessing();
-  const viewerMode = useAppSelector((s) => s.viewer.viewerMode);
+  const viewerMode = useAppSelector((s) => s.ui.viewerMode);
   const { t } = useTranslation();
 
   const handleSelectViewerImage = useCallback(() => {

invokeai/frontend/web/src/features/viewer/hooks/useCurrentImageDTO.ts

@@ -10,7 +10,7 @@ import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 export const useCurrentImageDTO = () => {
   const latestImageName = useAppSelector(selectLatestImageName);
   const lastSelectedImage = useAppSelector(selectLastSelectedImage);
-  const viewerMode = useAppSelector((s) => s.viewer.viewerMode);
+  const viewerMode = useAppSelector((s) => s.ui.viewerMode);
   const { currentData: imageDTO } = useGetImageDTOQuery(
     (viewerMode === 'progress' ? latestImageName : lastSelectedImage?.image_name) ?? skipToken
   );

invokeai/frontend/web/src/features/viewer/store/viewerSlice.ts

@@ -1,57 +0,0 @@
-import type { PayloadAction } from '@reduxjs/toolkit';
-import { createSlice } from '@reduxjs/toolkit';
-import type { PersistConfig, RootState } from 'app/store/store';
-import { galleryImageClicked } from 'features/gallery/store/gallerySlice';
-
-export type ViewerMode = 'image' | 'info' | 'progress';
-
-export type ViewerState = {
-  _version: 1;
-  /**
-   * The currently-selected viewer mode.
-   */
-  viewerMode: ViewerMode;
-};
-
-export const initialViewerState: ViewerState = {
-  _version: 1,
-  viewerMode: 'image',
-};
-
-export const viewerSlice = createSlice({
-  name: 'viewer',
-  initialState: initialViewerState,
-  reducers: {
-    viewerModeChanged: (state, action: PayloadAction<ViewerMode>) => {
-      state.viewerMode = action.payload;
-    },
-  },
-  extraReducers: (builder) => {
-    builder.addCase(galleryImageClicked, (state) => {
-      // When a gallery image is clicked and we are in progress mode, switch to image mode.
-      // This is not the same as the gallery _selection_ being changed.
-      if (state.viewerMode === 'progress') {
-        state.viewerMode = 'image';
-      }
-    });
-  },
-});
-
-export const { viewerModeChanged } = viewerSlice.actions;
-
-export const selectViewerSlice = (state: RootState) => state.viewer;
-
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-export const migrateViewerState = (state: any): any => {
-  if (!('_version' in state)) {
-    state._version = 1;
-  }
-  return state;
-};
-
-export const viewerPersistConfig: PersistConfig<ViewerState> = {
-  name: viewerSlice.name,
-  initialState: initialViewerState,
-  migrate: migrateViewerState,
-  persistDenylist: [],
-};