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 (
-