diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueue.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueue.tsx index f124462e8b..c2443dde6b 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueue.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueue.tsx @@ -55,9 +55,7 @@ export const ModelInstallQueue = memo(() => { - {data?.map((model) => ( - - ))} + {data?.map((model) => )} diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetList.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetList.tsx index b54069b7c5..252939837f 100644 --- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetList.tsx +++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetList.tsx @@ -1,8 +1,13 @@ -import { Button, Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library'; -import { useAppSelector } from 'app/store/storeHooks'; +import { Button, Collapse, Flex, Icon, Text } from '@invoke-ai/ui-library'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; import { fixTooltipCloseOnScrollStyles } from 'common/util/fixTooltipCloseOnScrollStyles'; -import { selectStylePresetSearchTerm } from 'features/stylePresets/store/stylePresetSlice'; +import { + collapsedSectionToggled, + selectCollapsedSections, + selectStylePresetSearchTerm, +} from 'features/stylePresets/store/stylePresetSlice'; +import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { PiCaretDownBold } from 'react-icons/pi'; import type { StylePresetRecordWithImage } from 'services/api/endpoints/stylePresets'; @@ -11,12 +16,37 @@ import { StylePresetListItem } from './StylePresetListItem'; export const StylePresetList = ({ title, data }: { title: string; data: StylePresetRecordWithImage[] }) => { const { t } = useTranslation(); - const { onToggle, isOpen } = useDisclosure({ defaultIsOpen: true }); + const dispatch = useAppDispatch(); const searchTerm = useAppSelector(selectStylePresetSearchTerm); + const collapsedSections = useAppSelector(selectCollapsedSections); + + // Determine which section this is based on the title + const getSectionKey = useCallback( + (title: string) => { + if (title === t('stylePresets.myTemplates')) { + return 'myTemplates'; + } + if (title === t('stylePresets.sharedTemplates')) { + return 'sharedTemplates'; + } + if (title === t('stylePresets.defaultTemplates')) { + return 'defaultTemplates'; + } + return 'myTemplates'; // fallback + }, + [t] + ); + + const sectionKey = getSectionKey(title); + const isOpen = !collapsedSections[sectionKey]; + + const handleToggle = useCallback(() => { + dispatch(collapsedSectionToggled(sectionKey)); + }, [dispatch, sectionKey]); return ( -