github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

tidy(ui): split browse workflows button into own component

Browse Source
This commit is contained in:
psychedelicious
2025-03-20 14:32:56 +10:00
committed by Mary Hipp Rogers
parent ed21d0b57e
commit f1889b259d
1 changed files with 35 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibrarySideNav.tsx
View File

@@ -39,11 +39,6 @@ export const WorkflowLibrarySideNav = () => {
const { t } = useTranslation();
const categoryOptions = useStore($workflowLibraryCategoriesOptions);
const view = useAppSelector(selectWorkflowLibraryView);
const dispatch = useAppDispatch();
const selectedTags = useAppSelector(selectWorkflowLibrarySelectedTags);
const resetTags = useCallback(() => {
dispatch(workflowLibraryTagsReset());
}, [dispatch]);
return (
<Flex h="full" minH={0} overflow="hidden" flexDir="column" w={64} gap={0}>
@@ -67,26 +62,7 @@ export const WorkflowLibrarySideNav = () => {
)}
</Flex>
<Flex h="full" minH={0} overflow="hidden" flexDir="column">
{view === 'defaults' && selectedTags.length > 0 ? (
<ButtonGroup>
<WorkflowLibraryViewButton view="defaults" w="auto">
{t('workflows.browseWorkflows')}
</WorkflowLibraryViewButton>
<Tooltip label={t('workflows.deselectAll')}>
<IconButton
onClick={resetTags}
size="md"
aria-label={t('workflows.deselectAll')}
icon={<PiArrowCounterClockwiseBold size={12} />}
variant="ghost"
bg="base.700"
color="base.50"
/>
</Tooltip>
</ButtonGroup>
) : (
<WorkflowLibraryViewButton view="defaults">{t('workflows.browseWorkflows')}</WorkflowLibraryViewButton>
)}
<BrowseWorkflowsButton />
<DefaultsViewCheckboxesCollapsible />
</Flex>
<Spacer />
@@ -96,6 +72,40 @@ export const WorkflowLibrarySideNav = () => {
);
};
const BrowseWorkflowsButton = memo(() => {
const { t } = useTranslation();
const view = useAppSelector(selectWorkflowLibraryView);
const dispatch = useAppDispatch();
const selectedTags = useAppSelector(selectWorkflowLibrarySelectedTags);
const resetTags = useCallback(() => {
dispatch(workflowLibraryTagsReset());
}, [dispatch]);
if (view === 'defaults' && selectedTags.length > 0) {
return (
<ButtonGroup>
<WorkflowLibraryViewButton view="defaults" w="auto">
{t('workflows.browseWorkflows')}
</WorkflowLibraryViewButton>
<Tooltip label={t('workflows.deselectAll')}>
<IconButton
onClick={resetTags}
size="md"
aria-label={t('workflows.deselectAll')}
icon={<PiArrowCounterClockwiseBold size={12} />}
variant="ghost"
bg="base.700"
color="base.50"
/>
</Tooltip>
</ButtonGroup>
);
}
return <WorkflowLibraryViewButton view="defaults">{t('workflows.browseWorkflows')}</WorkflowLibraryViewButton>;
});
BrowseWorkflowsButton.displayName = 'BrowseWorkflowsButton';
const overlayscrollbarsOptions = getOverlayScrollbarsParams({ visibility: 'visible' }).options;
const DefaultsViewCheckboxesCollapsible = memo(() => {