fix(ui): fix all circular dependencies

invokeai/frontend/web/src/features/system/components/LanguagePicker.tsx

@@ -7,32 +7,13 @@ import {
   MenuOptionGroup,
   Tooltip,
 } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import i18n from 'i18n';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { map } from 'lodash-es';
+import { useTranslation } from 'react-i18next';
+import { IoLanguage } from 'react-icons/io5';
+import { LANGUAGES } from '../store/constants';
 import { languageSelector } from '../store/systemSelectors';
 import { languageChanged } from '../store/systemSlice';
-import { map } from 'lodash-es';
-import { IoLanguage } from 'react-icons/io5';
-
-export const LANGUAGES = {
-  ar: i18n.t('common.langArabic', { lng: 'ar' }),
-  nl: i18n.t('common.langDutch', { lng: 'nl' }),
-  en: i18n.t('common.langEnglish', { lng: 'en' }),
-  fr: i18n.t('common.langFrench', { lng: 'fr' }),
-  de: i18n.t('common.langGerman', { lng: 'de' }),
-  he: i18n.t('common.langHebrew', { lng: 'he' }),
-  it: i18n.t('common.langItalian', { lng: 'it' }),
-  ja: i18n.t('common.langJapanese', { lng: 'ja' }),
-  ko: i18n.t('common.langKorean', { lng: 'ko' }),
-  pl: i18n.t('common.langPolish', { lng: 'pl' }),
-  pt_BR: i18n.t('common.langBrPortuguese', { lng: 'pt_BR' }),
-  pt: i18n.t('common.langPortuguese', { lng: 'pt' }),
-  ru: i18n.t('common.langRussian', { lng: 'ru' }),
-  zh_CN: i18n.t('common.langSimplifiedChinese', { lng: 'zh_CN' }),
-  es: i18n.t('common.langSpanish', { lng: 'es' }),
-  uk: i18n.t('common.langUkranian', { lng: 'ua' }),
-};
 
 export default function LanguagePicker() {
   const { t } = useTranslation();

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsClearIntermediates.tsx

@@ -1,5 +1,6 @@
 import { Heading, Text } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { controlNetReset } from 'features/controlNet/store/controlNetSlice';
 import { useCallback, useEffect } from 'react';
 import IAIButton from '../../../../common/components/IAIButton';
 import {
@@ -8,8 +9,7 @@ import {
 } from '../../../../services/api/endpoints/images';
 import { resetCanvas } from '../../../canvas/store/canvasSlice';
 import { addToast } from '../../store/systemSlice';
-import { StyledFlex } from './SettingsModal';
-import { controlNetReset } from 'features/controlNet/store/controlNetSlice';
+import StyledFlex from './StyledFlex';
 
 export default function SettingsClearIntermediates() {
   const dispatch = useAppDispatch();

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -14,12 +14,12 @@ import {
 import { createSelector } from '@reduxjs/toolkit';
 import { VALID_LOG_LEVELS } from 'app/logging/logger';
 import { LOCALSTORAGE_KEYS, LOCALSTORAGE_PREFIX } from 'app/store/constants';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { systemSelector } from 'features/system/store/systemSelectors';
+import { setShouldShowAdvancedOptions } from 'features/parameters/store/generationSlice';
 import {
-  SystemState,
   consoleLogLevelChanged,
   setEnableImageDebugging,
   setIsNodesEnabled,
@@ -27,18 +27,14 @@ import {
   shouldAntialiasProgressImageChanged,
   shouldLogToConsoleChanged,
 } from 'features/system/store/systemSlice';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import {
-  setShouldShowAdvancedOptions,
   setShouldShowProgressInViewer,
   setShouldUseCanvasBetaLayout,
   setShouldUseSliders,
 } from 'features/ui/store/uiSlice';
-import { UIState } from 'features/ui/store/uiTypes';
 import { isEqual } from 'lodash-es';
 import {
   ChangeEvent,
-  PropsWithChildren,
   ReactElement,
   cloneElement,
   useCallback,
@@ -49,10 +45,11 @@ import { LogLevelName } from 'roarr';
 import SettingSwitch from './SettingSwitch';
 import SettingsClearIntermediates from './SettingsClearIntermediates';
 import SettingsSchedulers from './SettingsSchedulers';
+import StyledFlex from './StyledFlex';
 
 const selector = createSelector(
-  [systemSelector, uiSelector],
-  (system: SystemState, ui: UIState) => {
+  [stateSelector],
+  ({ system, ui, generation }) => {
     const {
       shouldConfirmOnDelete,
       enableImageDebugging,
@@ -66,9 +63,10 @@ const selector = createSelector(
       shouldUseCanvasBetaLayout,
       shouldUseSliders,
       shouldShowProgressInViewer,
-      shouldShowAdvancedOptions,
     } = ui;
 
+    const { shouldShowAdvancedOptions } = generation;
+
     return {
       shouldConfirmOnDelete,
       enableImageDebugging,
@@ -349,22 +347,3 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
 };
 
 export default SettingsModal;
-
-export const StyledFlex = (props: PropsWithChildren) => {
-  return (
-    <Flex
-      sx={{
-        flexDirection: 'column',
-        gap: 2,
-        p: 4,
-        borderRadius: 'base',
-        bg: 'base.100',
-        _dark: {
-          bg: 'base.900',
-        },
-      }}
-    >
-      {props.children}
-    </Flex>
-  );
-};

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsSchedulers.tsx

@@ -1,16 +1,18 @@
-import { SCHEDULER_LABEL_MAP, SCHEDULER_NAMES } from 'app/constants';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIMantineMultiSelect from 'common/components/IAIMantineMultiSelect';
-import { SchedulerParam } from 'features/parameters/types/parameterSchemas';
+import {
+  SCHEDULER_LABEL_MAP,
+  SchedulerParam,
+} from 'features/parameters/types/parameterSchemas';
 import { favoriteSchedulersChanged } from 'features/ui/store/uiSlice';
 import { map } from 'lodash-es';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const data = map(SCHEDULER_NAMES, (s) => ({
-  value: s,
-  label: SCHEDULER_LABEL_MAP[s],
+const data = map(SCHEDULER_LABEL_MAP, (value, label) => ({
+  value,
+  label,
 })).sort((a, b) => a.label.localeCompare(b.label));
 
 export default function SettingsSchedulers() {

invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx

@@ -0,0 +1,23 @@
+import { Flex } from '@chakra-ui/react';
+import { PropsWithChildren } from 'react';
+
+const StyledFlex = (props: PropsWithChildren) => {
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        gap: 2,
+        p: 4,
+        borderRadius: 'base',
+        bg: 'base.100',
+        _dark: {
+          bg: 'base.900',
+        },
+      }}
+    >
+      {props.children}
+    </Flex>
+  );
+};
+
+export default StyledFlex;