Reorganises internal state

`options` slice was huge and managed a mix of generation parameters and general app settings. It has been split up:

- Generation parameters are now in `generationSlice`.
- Postprocessing parameters are now in `postprocessingSlice`
- UI related things are now in `uiSlice`

There is probably more to be done, like `gallerySlice` perhaps should only manage internal gallery state, and not if the gallery is displayed.

Full-slice selectors have been made for each slice.

Other organisational tweaks.

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

@@ -10,7 +10,7 @@ import {
 } from 'features/gallery/store/gallerySlice';
 import ImageGallery from 'features/gallery/components/ImageGallery';
 import ImageMetadataViewer from 'features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer';
-import { setIsLightBoxOpen } from 'features/options/store/optionsSlice';
+import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
 import React, { useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { BiExit } from 'react-icons/bi';
@@ -20,7 +20,7 @@ import ReactPanZoom from './ReactPanZoom';
 export default function Lightbox() {
   const dispatch = useAppDispatch();
   const isLightBoxOpen = useAppSelector(
-    (state: RootState) => state.options.isLightBoxOpen
+    (state: RootState) => state.lightbox.isLightboxOpen
   );
 
   const {
@@ -52,7 +52,7 @@ export default function Lightbox() {
   useHotkeys(
     'Esc',
     () => {
-      if (isLightBoxOpen) dispatch(setIsLightBoxOpen(false));
+      if (isLightBoxOpen) dispatch(setIsLightboxOpen(false));
     },
     [isLightBoxOpen]
   );
@@ -64,7 +64,7 @@ export default function Lightbox() {
         aria-label="Exit Viewer"
         className="lightbox-close-btn"
         onClick={() => {
-          dispatch(setIsLightBoxOpen(false));
+          dispatch(setIsLightboxOpen(false));
         }}
         fontSize={20}
       />

invokeai/frontend/src/features/lightbox/store/lightboxSelectors.ts

@@ -0,0 +1,13 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { RootState } from 'app/store';
+import _ from 'lodash';
+
+export const lightboxSelector = createSelector(
+  (state: RootState) => state.lightbox,
+  (lightbox) => lightbox,
+  {
+    memoizeOptions: {
+      equalityCheck: _.isEqual,
+    },
+  }
+);

invokeai/frontend/src/features/lightbox/store/lightboxSlice.ts

@@ -0,0 +1,26 @@
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+
+export interface LightboxState {
+  isLightboxOpen: boolean;
+}
+
+const initialLightboxState: LightboxState = {
+  isLightboxOpen: false,
+};
+
+const initialState: LightboxState = initialLightboxState;
+
+export const lightboxSlice = createSlice({
+  name: 'lightbox',
+  initialState,
+  reducers: {
+    setIsLightboxOpen: (state, action: PayloadAction<boolean>) => {
+      state.isLightboxOpen = action.payload;
+    },
+  },
+});
+
+export const { setIsLightboxOpen } = lightboxSlice.actions;
+
+export default lightboxSlice.reducer;