copy dev frontend code over again

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

@@ -22,27 +22,26 @@ import {
   setSaveIntermediatesInterval,
   setShouldConfirmOnDelete,
   setShouldDisplayGuides,
-  setShouldDisplayInProgress,
-  setShouldDisplayInProgressLatents,
+  setShouldDisplayInProgressType,
   SystemState,
 } from '../systemSlice';
 import ModelList from './ModelList';
-import { SettingsModalItem, SettingsModalSelectItem } from './SettingsModalItem';
 import { IN_PROGRESS_IMAGE_TYPES } from '../../../app/constants';
+import IAISwitch from '../../../common/components/IAISwitch';
+import IAISelect from '../../../common/components/IAISelect';
+import IAINumberInput from '../../../common/components/IAINumberInput';
 
 const systemSelector = createSelector(
   (state: RootState) => state.system,
   (system: SystemState) => {
     const {
-      shouldDisplayInProgress,
-      shouldDisplayInProgressLatents,
+      shouldDisplayInProgressType,
       shouldConfirmOnDelete,
       shouldDisplayGuides,
       model_list,
     } = system;
     return {
-      shouldDisplayInProgress,
-      shouldDisplayInProgressLatents,
+      shouldDisplayInProgressType,
       shouldConfirmOnDelete,
       shouldDisplayGuides,
       models: _.map(model_list, (_model, key) => key),
@@ -86,8 +85,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
   } = useDisclosure();
 
   const {
-    shouldDisplayInProgress,
-    shouldDisplayInProgressLatents,
+    shouldDisplayInProgressType,
     shouldConfirmOnDelete,
     shouldDisplayGuides,
   } = useAppSelector(systemSelector);
@@ -122,21 +120,41 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
           <ModalCloseButton />
           <ModalBody className="settings-modal-content">
             <div className="settings-modal-items">
-              <SettingsModalSelectItem
-                settingTitle="Display In-Progress Images"
-                validValues={IN_PROGRESS_IMAGE_TYPES}
-                defaultValue={shouldDisplayInProgressType}
-                dispatcher={setShouldDisplayInProgressType}
-              />
-
-              <SettingsModalItem
-                settingTitle="Display In-Progress Latents (quick; lo-res)"
-                isChecked={shouldDisplayInProgressLatents}
-                dispatcher={setShouldDisplayInProgressLatents}
-              />
-
-              <SettingsModalItem
-                settingTitle="Confirm on Delete"
+              <div className="settings-modal-item">
+                <ModelList />
+              </div>
+              <div
+                className="settings-modal-item"
+                style={{ gridAutoFlow: 'row', rowGap: '0.5rem' }}
+              >
+                <IAISelect
+                  label={'Display In-Progress Images'}
+                  validValues={IN_PROGRESS_IMAGE_TYPES}
+                  value={shouldDisplayInProgressType}
+                  onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+                    dispatch(
+                      setShouldDisplayInProgressType(
+                        e.target.value as InProgressImageType
+                      )
+                    )
+                  }
+                />
+                {shouldDisplayInProgressType === 'full-res' && (
+                  <IAINumberInput
+                    label="Save images every n steps"
+                    min={1}
+                    max={steps}
+                    step={1}
+                    onChange={handleChangeIntermediateSteps}
+                    value={saveIntermediatesInterval}
+                    width="auto"
+                    textAlign="center"
+                  />
+                )}
+              </div>
+              <IAISwitch
+                styleClass="settings-modal-item"
+                label={'Confirm on Delete'}
                 isChecked={shouldConfirmOnDelete}
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   dispatch(setShouldConfirmOnDelete(e.target.checked))

frontend/src/features/system/systemSlice.ts

@@ -25,8 +25,7 @@ export type InProgressImageType = 'none' | 'full-res' | 'latents';
 export interface SystemState
   extends InvokeAI.SystemStatus,
     InvokeAI.SystemConfig {
-  shouldDisplayInProgress: boolean;
-  shouldDisplayInProgressLatents: boolean;
+  shouldDisplayInProgressType: InProgressImageType;
   log: Array<LogEntry>;
   shouldShowLogViewer: boolean;
   isGFPGANAvailable: boolean;
@@ -52,8 +51,7 @@ const initialSystemState: SystemState = {
   isProcessing: false,
   log: [],
   shouldShowLogViewer: false,
-  shouldDisplayInProgress: false,
-  shouldDisplayInProgressLatents: false,
+  shouldDisplayInProgressType: 'latents',
   shouldDisplayGuides: true,
   isGFPGANAvailable: true,
   isESRGANAvailable: true,
@@ -82,12 +80,12 @@ export const systemSlice = createSlice({
   name: 'system',
   initialState: initialSystemState,
   reducers: {
-    setShouldDisplayInProgressType: (state, action: PayloadAction<string>) => {
+    setShouldDisplayInProgressType: (
+      state,
+      action: PayloadAction<InProgressImageType>
+    ) => {
       state.shouldDisplayInProgressType = action.payload;
     },
-    setShouldDisplayInProgressLatents: (state, action: PayloadAction<boolean>) => {
-      state.shouldDisplayInProgressLatents = action.payload;
-    },
     setIsProcessing: (state, action: PayloadAction<boolean>) => {
       state.isProcessing = action.payload;
     },
@@ -197,8 +195,7 @@ export const systemSlice = createSlice({
 });
 
 export const {
-  setShouldDisplayInProgress,
-  setShouldDisplayInProgressLatents,
+  setShouldDisplayInProgressType,
   setIsProcessing,
   addLogEntry,
   setShouldShowLogViewer,