convert progress display to a drop-down

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

@@ -26,10 +26,8 @@ import {
   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,
@@ -120,41 +118,15 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
           <ModalCloseButton />
           <ModalBody className="settings-modal-content">
             <div className="settings-modal-items">
-              <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'}
+              <SettingsModalSelectItem
+                settingTitle="Display In-Progress Images"
+                validValues={IN_PROGRESS_IMAGE_TYPES}
+                defaultValue={shouldDisplayInProgressType}
+                dispatcher={setShouldDisplayInProgressType}
+              />
+
+              <SettingsModalItem
+                settingTitle="Confirm on Delete"
                 isChecked={shouldConfirmOnDelete}
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   dispatch(setShouldConfirmOnDelete(e.target.checked))

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

@@ -0,0 +1,50 @@
+import { useAppDispatch } from '../../../app/store';
+import IAISelect from '../../../common/components/IAISelect';
+import IAISwitch from '../../../common/components/IAISwitch';
+
+export function SettingsModalItem({
+  settingTitle,
+  isChecked,
+  dispatcher,
+}: {
+  settingTitle: string;
+  isChecked: boolean;
+  dispatcher: any;
+}) {
+  const dispatch = useAppDispatch();
+  return (
+    <IAISwitch
+      styleClass="settings-modal-item"
+      label={settingTitle}
+      isChecked={isChecked}
+      onChange={(e) => dispatch(dispatcher(e.target.checked))}
+    />
+  );
+}
+
+
+export function SettingsModalSelectItem({
+  settingTitle,
+  validValues,
+  defaultValue,
+  dispatcher,
+}: {
+  settingTitle: string;
+  validValues: 
+      Array<number | string>
+    | Array<{ key: string; value: string | number }>;
+  defaultValue: string;
+  dispatcher: any;
+}) {
+  const dispatch = useAppDispatch();
+  return (
+    <IAISelect
+      styleClass="settings-modal-item"
+      label={settingTitle}
+      validValues={validValues}
+      defaultValue={defaultValue}
+      onChange={(e) => dispatch(dispatcher(e.target.value))}
+    />
+  );
+}
+

frontend/src/features/system/systemSlice.ts

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