feat: Add Setting Switch Component (#3847)

invokeai/frontend/web/public/locales/en.json

@@ -547,7 +547,8 @@
         "saveSteps": "Save images every n steps",
         "confirmOnDelete": "Confirm On Delete",
         "displayHelpIcons": "Display Help Icons",
-        "useCanvasBeta": "Use Canvas Beta Layout",
+        "alternateCanvasLayout": "Alternate Canvas Layout",
+        "enableNodesEditor": "Enable Nodes Editor",
         "enableImageDebugging": "Enable Image Debugging",
         "useSlidersForAll": "Use Sliders For All Options",
         "showProgressInViewer": "Show Progress Images in Viewer",
@@ -564,7 +565,9 @@
         "ui": "User Interface",
         "favoriteSchedulers": "Favorite Schedulers",
         "favoriteSchedulersPlaceholder": "No schedulers favorited",
-        "showAdvancedOptions": "Show Advanced Options"
+        "showAdvancedOptions": "Show Advanced Options",
+        "experimental": "Experimental",
+        "beta": "Beta"
     },
     "toast": {
         "serverError": "Server Error",

invokeai/frontend/web/src/common/components/IAISwitch.tsx

@@ -9,7 +9,7 @@ import {
 } from '@chakra-ui/react';
 import { memo } from 'react';
 
-interface Props extends SwitchProps {
+export interface IAISwitchProps extends SwitchProps {
   label?: string;
   width?: string | number;
   formControlProps?: FormControlProps;
@@ -20,7 +20,7 @@ interface Props extends SwitchProps {
 /**
  * Customized Chakra FormControl + Switch multi-part component.
  */
-const IAISwitch = (props: Props) => {
+const IAISwitch = (props: IAISwitchProps) => {
   const {
     label,
     isDisabled = false,

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

@@ -0,0 +1,57 @@
+import { Badge, BadgeProps, Flex, Text, TextProps } from '@chakra-ui/react';
+import IAISwitch, { IAISwitchProps } from 'common/components/IAISwitch';
+import { useTranslation } from 'react-i18next';
+
+type SettingSwitchProps = IAISwitchProps & {
+  label: string;
+  useBadge?: boolean;
+  badgeLabel?: string;
+  textProps?: TextProps;
+  badgeProps?: BadgeProps;
+};
+
+export default function SettingSwitch(props: SettingSwitchProps) {
+  const { t } = useTranslation();
+
+  const {
+    label,
+    textProps,
+    useBadge = false,
+    badgeLabel = t('settings.experimental'),
+    badgeProps,
+    ...rest
+  } = props;
+
+  return (
+    <Flex justifyContent="space-between" py={1}>
+      <Flex gap={2} alignItems="center">
+        <Text
+          sx={{
+            fontSize: 14,
+            _dark: {
+              color: 'base.300',
+            },
+          }}
+          {...textProps}
+        >
+          {label}
+        </Text>
+        {useBadge && (
+          <Badge
+            size="xs"
+            sx={{
+              px: 2,
+              color: 'base.700',
+              bg: 'accent.200',
+              _dark: { bg: 'accent.500', color: 'base.200' },
+            }}
+            {...badgeProps}
+          >
+            {badgeLabel}
+          </Badge>
+        )}
+      </Flex>
+      <IAISwitch {...rest} />
+    </Flex>
+  );
+}

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

@@ -11,13 +11,12 @@ import {
   Text,
   useDisclosure,
 } from '@chakra-ui/react';
-import { createSelector, current } from '@reduxjs/toolkit';
+import { createSelector } from '@reduxjs/toolkit';
 import { VALID_LOG_LEVELS } from 'app/logging/useLogger';
 import { LOCALSTORAGE_KEYS, LOCALSTORAGE_PREFIX } from 'app/store/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import IAISwitch from 'common/components/IAISwitch';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import {
   SystemState,
@@ -48,8 +47,9 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LogLevelName } from 'roarr';
-import SettingsSchedulers from './SettingsSchedulers';
+import SettingSwitch from './SettingSwitch';
 import SettingsClearIntermediates from './SettingsClearIntermediates';
+import SettingsSchedulers from './SettingsSchedulers';
 
 const selector = createSelector(
   [systemSelector, uiSelector],
@@ -206,7 +206,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
             <Flex sx={{ gap: 4, flexDirection: 'column' }}>
               <StyledFlex>
                 <Heading size="sm">{t('settings.general')}</Heading>
-                <IAISwitch
+                <SettingSwitch
                   label={t('settings.confirmOnDelete')}
                   isChecked={shouldConfirmOnDelete}
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
@@ -214,7 +214,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                   }
                 />
                 {shouldShowAdvancedOptionsSettings && (
-                  <IAISwitch
+                  <SettingSwitch
                     label={t('settings.showAdvancedOptions')}
                     isChecked={shouldShowAdvancedOptions}
                     onChange={(e: ChangeEvent<HTMLInputElement>) =>
@@ -231,37 +231,29 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
 
               <StyledFlex>
                 <Heading size="sm">{t('settings.ui')}</Heading>
-                <IAISwitch
+                <SettingSwitch
                   label={t('settings.displayHelpIcons')}
                   isChecked={shouldDisplayGuides}
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
                     dispatch(setShouldDisplayGuides(e.target.checked))
                   }
                 />
-                {shouldShowBetaLayout && (
+
-                  <IAISwitch
+                <SettingSwitch
-                    label={t('settings.useCanvasBeta')}
-                    isChecked={shouldUseCanvasBetaLayout}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                      dispatch(setShouldUseCanvasBetaLayout(e.target.checked))
-                    }
-                  />
-                )}
-                <IAISwitch
                   label={t('settings.useSlidersForAll')}
                   isChecked={shouldUseSliders}
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
                     dispatch(setShouldUseSliders(e.target.checked))
                   }
                 />
-                <IAISwitch
+                <SettingSwitch
                   label={t('settings.showProgressInViewer')}
                   isChecked={shouldShowProgressInViewer}
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
                     dispatch(setShouldShowProgressInViewer(e.target.checked))
                   }
                 />
-                <IAISwitch
+                <SettingSwitch
                   label={t('settings.antialiasProgressImages')}
                   isChecked={shouldAntialiasProgressImage}
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
@@ -270,9 +262,21 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     )
                   }
                 />
+                {shouldShowBetaLayout && (
+                  <SettingSwitch
+                    label={t('settings.alternateCanvasLayout')}
+                    useBadge
+                    badgeLabel={t('settings.beta')}
+                    isChecked={shouldUseCanvasBetaLayout}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                      dispatch(setShouldUseCanvasBetaLayout(e.target.checked))
+                    }
+                  />
+                )}
                 {shouldShowNodesToggle && (
-                  <IAISwitch
+                  <SettingSwitch
-                    label="Enable Nodes Editor (Experimental)"
+                    label={t('settings.enableNodesEditor')}
+                    useBadge
                     isChecked={isNodesEnabled}
                     onChange={handleToggleNodes}
                   />
@@ -282,7 +286,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
               {shouldShowDeveloperSettings && (
                 <StyledFlex>
                   <Heading size="sm">{t('settings.developer')}</Heading>
-                  <IAISwitch
+                  <SettingSwitch
                     label={t('settings.shouldLogToConsole')}
                     isChecked={shouldLogToConsole}
                     onChange={handleLogToConsoleChanged}
@@ -294,7 +298,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     value={consoleLogLevel}
                     data={VALID_LOG_LEVELS.concat()}
                   />
-                  <IAISwitch
+                  <SettingSwitch
                     label={t('settings.enableImageDebugging')}
                     isChecked={enableImageDebugging}
                     onChange={(e: ChangeEvent<HTMLInputElement>) =>