feat(ui): style settings modal

invokeai/frontend/web/src/common/components/InvModal/theme.ts

@@ -16,6 +16,7 @@ export const baseStyle = definePartsStyle(() => ({
   header: {
     fontWeight: 'semibold',
     fontSize: 'lg',
+    color: 'base.300'
   },
   closeButton: {
     opacity: 0.5,

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

@@ -7,7 +7,6 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import { InvHeading } from 'common/components/InvHeading/wrapper';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import { InvInput } from 'common/components/InvInput/InvInput';
 import {
@@ -22,6 +21,7 @@ import {
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import type { HotkeyGroup } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { useHotkeyData } from 'features/system/components/HotkeysModal/useHotkeyData';
+import { StickyScrollable } from 'features/system/components/StickyScrollable';
 import type { ChangeEventHandler, ReactElement } from 'react';
 import {
   cloneElement,
@@ -121,26 +121,9 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
             </InputGroup>
 
             <ScrollableContent>
+              <Flex flexDir="column" gap={4}>
                 {filteredHotkeyGroups.map((group) => (
-                <Flex key={group.title} pb={4} flexDir="column">
+                  <StickyScrollable key={group.title} title={group.title}>
-                  <Flex
-                    ps={2}
-                    pb={4}
-                    position="sticky"
-                    zIndex={1}
-                    top={0}
-                    bg="base.800"
-                  >
-                    <InvHeading size="sm">{group.title}</InvHeading>
-                  </Flex>
-                  <Flex
-                    key={group.title}
-                    p={4}
-                    borderRadius="base"
-                    bg="base.750"
-                    flexDir="column"
-                    gap={4}
-                  >
                     {group.hotkeyListItems.map((hotkey, i) => (
                       <Fragment key={i}>
                         <HotkeyListItem
@@ -151,8 +134,7 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
                         {i < group.hotkeyListItems.length - 1 && <Divider />}
                       </Fragment>
                     ))}
-                  </Flex>
+                  </StickyScrollable>
-                </Flex>
                 ))}
                 {!filteredHotkeyGroups.length && (
                   <IAINoContentFallback
@@ -160,6 +142,7 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
                     icon={null}
                   />
                 )}
+              </Flex>
             </ScrollableContent>
           </InvModalBody>
           <InvModalFooter />

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

@@ -1,93 +0,0 @@
-import { Heading } from '@chakra-ui/react';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { InvButton } from 'common/components/InvButton/InvButton';
-import { InvText } from 'common/components/InvText/wrapper';
-import { resetCanvas } from 'features/canvas/store/canvasSlice';
-import { controlAdaptersReset } from 'features/controlAdapters/store/controlAdaptersSlice';
-import { addToast } from 'features/system/store/systemSlice';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  useClearIntermediatesMutation,
-  useGetIntermediatesCountQuery,
-} from 'services/api/endpoints/images';
-import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
-
-import StyledFlex from './StyledFlex';
-
-const SettingsClearIntermediates = () => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-
-  const { data: intermediatesCount } = useGetIntermediatesCountQuery(
-    undefined,
-    {
-      refetchOnMountOrArgChange: true,
-    }
-  );
-
-  const [clearIntermediates, { isLoading: isLoadingClearIntermediates }] =
-    useClearIntermediatesMutation();
-
-  const { data: queueStatus } = useGetQueueStatusQuery();
-  const hasPendingItems =
-    queueStatus &&
-    (queueStatus.queue.in_progress > 0 || queueStatus.queue.pending > 0);
-
-  const handleClickClearIntermediates = useCallback(() => {
-    if (hasPendingItems) {
-      return;
-    }
-
-    clearIntermediates()
-      .unwrap()
-      .then((clearedCount) => {
-        dispatch(controlAdaptersReset());
-        dispatch(resetCanvas());
-        dispatch(
-          addToast({
-            title: t('settings.intermediatesCleared', { count: clearedCount }),
-            status: 'info',
-          })
-        );
-      })
-      .catch(() => {
-        dispatch(
-          addToast({
-            title: t('settings.intermediatesClearedFailed'),
-            status: 'error',
-          })
-        );
-      });
-  }, [t, clearIntermediates, dispatch, hasPendingItems]);
-
-  return (
-    <StyledFlex>
-      <Heading size="sm">{t('settings.clearIntermediates')}</Heading>
-      <InvButton
-        tooltip={
-          hasPendingItems ? t('settings.clearIntermediatesDisabled') : undefined
-        }
-        colorScheme="warning"
-        onClick={handleClickClearIntermediates}
-        isLoading={isLoadingClearIntermediates}
-        isDisabled={!intermediatesCount || hasPendingItems}
-      >
-        {t('settings.clearIntermediatesWithCount', {
-          count: intermediatesCount ?? 0,
-        })}
-      </InvButton>
-      <InvText fontWeight="bold">
-        {t('settings.clearIntermediatesDesc1')}
-      </InvText>
-      <InvText variant="subtext">
-        {t('settings.clearIntermediatesDesc2')}
-      </InvText>
-      <InvText variant="subtext">
-        {t('settings.clearIntermediatesDesc3')}
-      </InvText>
-    </StyledFlex>
-  );
-};
-
-export default memo(SettingsClearIntermediates);

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

@@ -4,7 +4,6 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvButton } from 'common/components/InvButton/InvButton';
 import { InvControl } from 'common/components/InvControl/InvControl';
-import { InvHeading } from 'common/components/InvHeading/wrapper';
 import {
   InvModal,
   InvModalBody,
@@ -16,8 +15,11 @@ import {
 } from 'common/components/InvModal/wrapper';
 import { InvSwitch } from 'common/components/InvSwitch/wrapper';
 import { InvText } from 'common/components/InvText/wrapper';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { useClearStorage } from 'common/hooks/useClearStorage';
 import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
+import { useClearIntermediates } from 'features/system/components/SettingsModal/useClearIntermediates';
+import { StickyScrollable } from 'features/system/components/StickyScrollable';
 import {
   setEnableImageDebugging,
   setShouldConfirmOnDelete,
@@ -33,10 +35,8 @@ import { cloneElement, memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useGetAppConfigQuery } from 'services/api/endpoints/appInfo';
 
-import SettingsClearIntermediates from './SettingsClearIntermediates';
 import { SettingsLanguageSelect } from './SettingsLanguageSelect';
 import { SettingsLogLevelSelect } from './SettingsLogLevelSelect';
-import StyledFlex from './StyledFlex';
 
 const selector = createMemoizedSelector(
   [stateSelector],
@@ -110,6 +110,13 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
       }),
     });
 
+  const {
+    clearIntermediates,
+    hasPendingItems,
+    intermediatesCount,
+    isLoading: isLoadingClearIntermediates,
+  } = useClearIntermediates();
+
   const {
     isOpen: isSettingsModalOpen,
     onOpen: onSettingsModalOpen,
@@ -218,23 +225,22 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
         isCentered
       >
         <InvModalOverlay />
-        <InvModalContent>
+        <InvModalContent maxH="80vh" h="80vh">
           <InvModalHeader bg="none">{t('common.settingsLabel')}</InvModalHeader>
           <InvModalCloseButton />
-          <InvModalBody>
+          <InvModalBody display="flex" flexDir="column" gap={4}>
-            <Flex gap={4} flexDir="column">
+            <ScrollableContent>
-              <StyledFlex>
+              <Flex flexDir="column" gap={4}>
-                <InvHeading size="sm">{t('settings.general')}</InvHeading>
+                <StickyScrollable title={t('settings.general')}>
                   <InvControl label={t('settings.confirmOnDelete')}>
                     <InvSwitch
                       isChecked={shouldConfirmOnDelete}
                       onChange={handleChangeShouldConfirmOnDelete}
                     />
                   </InvControl>
-              </StyledFlex>
+                </StickyScrollable>
 
-              <StyledFlex>
+                <StickyScrollable title={t('settings.generation')}>
-                <InvHeading size="sm">{t('settings.generation')}</InvHeading>
                   <InvControl
                     label={t('settings.enableNSFWChecker')}
                     isDisabled={!isNSFWCheckerAvailable}
@@ -253,10 +259,9 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                       onChange={handleChangeShouldUseWatermarker}
                     />
                   </InvControl>
-              </StyledFlex>
+                </StickyScrollable>
 
-              <StyledFlex>
+                <StickyScrollable title={t('settings.ui')}>
-                <InvHeading size="sm">{t('settings.ui')}</InvHeading>
                   <InvControl label={t('settings.showProgressInViewer')}>
                     <InvSwitch
                       isChecked={shouldShowProgressInViewer}
@@ -285,11 +290,10 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                       onChange={handleChangeShouldEnableInformationalPopovers}
                     />
                   </InvControl>
-              </StyledFlex>
+                </StickyScrollable>
 
                 {shouldShowDeveloperSettings && (
-                <StyledFlex>
+                  <StickyScrollable title={t('settings.developer')}>
-                  <InvHeading size="sm">{t('settings.developer')}</InvHeading>
                     <InvControl label={t('settings.shouldLogToConsole')}>
                       <InvSwitch
                         isChecked={shouldLogToConsole}
@@ -303,14 +307,43 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                         onChange={handleChangeEnableImageDebugging}
                       />
                     </InvControl>
-                </StyledFlex>
+                  </StickyScrollable>
                 )}
 
-              {shouldShowClearIntermediates && <SettingsClearIntermediates />}
+                {shouldShowClearIntermediates && (
+                  <StickyScrollable title={t('settings.clearIntermediates')}>
+                    <InvButton
+                      tooltip={
+                        hasPendingItems
+                          ? t('settings.clearIntermediatesDisabled')
+                          : undefined
+                      }
+                      colorScheme="warning"
+                      onClick={clearIntermediates}
+                      isLoading={isLoadingClearIntermediates}
+                      isDisabled={!intermediatesCount || hasPendingItems}
+                    >
+                      {t('settings.clearIntermediatesWithCount', {
+                        count: intermediatesCount ?? 0,
+                      })}
+                    </InvButton>
+                    <InvText fontWeight="bold">
+                      {t('settings.clearIntermediatesDesc1')}
+                    </InvText>
+                    <InvText variant="subtext">
+                      {t('settings.clearIntermediatesDesc2')}
+                    </InvText>
+                    <InvText variant="subtext">
+                      {t('settings.clearIntermediatesDesc3')}
+                    </InvText>
+                  </StickyScrollable>
+                )}
 
-              <StyledFlex>
+                <StickyScrollable title={t('settings.resetWebUI')}>
-                <InvHeading size="sm">{t('settings.resetWebUI')}</InvHeading>
+                  <InvButton
-                <InvButton colorScheme="error" onClick={handleClickResetWebUI}>
+                    colorScheme="error"
+                    onClick={handleClickResetWebUI}
+                  >
                     {t('settings.resetWebUI')}
                   </InvButton>
                   {shouldShowResetWebUiText && (
@@ -323,15 +356,12 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                       </InvText>
                     </>
                   )}
-              </StyledFlex>
+                </StickyScrollable>
               </Flex>
+            </ScrollableContent>
           </InvModalBody>
 
-          <InvModalFooter>
+          <InvModalFooter />
-            <InvButton onClick={onSettingsModalClose}>
-              {t('common.close')}
-            </InvButton>
-          </InvModalFooter>
         </InvModalContent>
       </InvModal>
 

invokeai/frontend/web/src/features/system/components/SettingsModal/useClearIntermediates.ts

@@ -0,0 +1,71 @@
+import { useAppDispatch } from 'app/store/storeHooks';
+import { resetCanvas } from 'features/canvas/store/canvasSlice';
+import { controlAdaptersReset } from 'features/controlAdapters/store/controlAdaptersSlice';
+import { addToast } from 'features/system/store/systemSlice';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  useClearIntermediatesMutation,
+  useGetIntermediatesCountQuery,
+} from 'services/api/endpoints/images';
+import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
+
+export type UseClearIntermediatesReturn = {
+  intermediatesCount: number | undefined;
+  clearIntermediates: () => void;
+  isLoading: boolean;
+  hasPendingItems: boolean;
+};
+
+export const useClearIntermediates = (): UseClearIntermediatesReturn => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const { data: intermediatesCount } = useGetIntermediatesCountQuery(
+    undefined,
+    {
+      refetchOnMountOrArgChange: true,
+    }
+  );
+
+  const [_clearIntermediates, { isLoading }] = useClearIntermediatesMutation();
+
+  const { data: queueStatus } = useGetQueueStatusQuery();
+  const hasPendingItems = useMemo(
+    () =>
+      Boolean(
+        queueStatus &&
+          (queueStatus.queue.in_progress > 0 || queueStatus.queue.pending > 0)
+      ),
+    [queueStatus]
+  );
+
+  const clearIntermediates = useCallback(() => {
+    if (hasPendingItems) {
+      return;
+    }
+
+    _clearIntermediates()
+      .unwrap()
+      .then((clearedCount) => {
+        dispatch(controlAdaptersReset());
+        dispatch(resetCanvas());
+        dispatch(
+          addToast({
+            title: t('settings.intermediatesCleared', { count: clearedCount }),
+            status: 'info',
+          })
+        );
+      })
+      .catch(() => {
+        dispatch(
+          addToast({
+            title: t('settings.intermediatesClearedFailed'),
+            status: 'error',
+          })
+        );
+      });
+  }, [t, _clearIntermediates, dispatch, hasPendingItems]);
+
+  return { intermediatesCount, clearIntermediates, isLoading, hasPendingItems };
+};

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

@@ -0,0 +1,49 @@
+import { Flex } from '@chakra-ui/layout';
+import { InvHeading } from 'common/components/InvHeading/wrapper';
+import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
+
+export type StickyScrollableHeadingProps = {
+  title: string;
+};
+
+export const StickyScrollableHeading = memo(
+  (props: StickyScrollableHeadingProps) => {
+    return (
+      <Flex ps={2} pb={4} position="sticky" zIndex={1} top={0} bg="base.800">
+        <InvHeading size="sm">{props.title}</InvHeading>
+      </Flex>
+    );
+  }
+);
+
+StickyScrollableHeading.displayName = 'StickyScrollableHeading';
+
+export type StickyScrollableContentProps = PropsWithChildren;
+
+export const StickyScrollableContent = memo(
+  (props: StickyScrollableContentProps) => {
+    return (
+      <Flex p={4} borderRadius="base" bg="base.750" flexDir="column" gap={4}>
+        {props.children}
+      </Flex>
+    );
+  }
+);
+
+StickyScrollableContent.displayName = 'StickyScrollableContent';
+
+export type StickyScrollableProps = PropsWithChildren<{
+  title: string;
+}>;
+
+export const StickyScrollable = memo((props: StickyScrollableProps) => {
+  return (
+    <Flex key={props.title} flexDir="column">
+      <StickyScrollableHeading title={props.title} />
+      <StickyScrollableContent>{props.children}</StickyScrollableContent>
+    </Flex>
+  );
+});
+
+StickyScrollable.displayName = 'StickyScrollable';