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

feat(ui): accept callback to override navigate to model manager functionality

Browse Source 
If provided, `<NavigateToModelManagerButton />` will render, even if `disabledTabs` includes "models". If provided, `<NavigateToModelManagerButton />` will run the callback instead of switching tabs within the studio.

The button's tooltip is now just "Manage Models" and its icon is the same as the model manager tab's icon ([CUBE!](https://www.youtube.com/watch?v=4aGDCE6Nrz0)).
This commit is contained in:
psychedelicious
2025-04-09 15:39:52 +10:00
parent 298444f2bc
commit 9cc13556aa
4 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
invokeai/frontend/web/src/features/parameters/components/MainModel/NavigateToModelManagerButton.tsx
View File

@@ -1,31 +1,35 @@
import type { IconButtonProps } from '@invoke-ai/ui-library';
import { IconButton } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { $onClickGoToModelManager } from 'app/store/nanostores/onClickGoToModelManager';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { selectIsModelsTabDisabled } from 'features/system/store/configSlice';
import { setActiveTab } from 'features/ui/store/uiSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiGearSixFill } from 'react-icons/pi';
import { PiCubeBold } from 'react-icons/pi';
export const NavigateToModelManagerButton = memo((props: Omit<IconButtonProps, 'aria-label'>) => {
const isModelsTabDisabled = useAppSelector(selectIsModelsTabDisabled);
const onClickGoToModelManager = useStore($onClickGoToModelManager);
const { t } = useTranslation();
const dispatch = useAppDispatch();
const isModelsTabDisabled = useAppSelector(selectIsModelsTabDisabled);
const handleClick = useCallback(() => {
const onClick = useCallback(() => {
dispatch(setActiveTab('models'));
}, [dispatch]);
if (isModelsTabDisabled) {
if (isModelsTabDisabled && !onClickGoToModelManager) {
return null;
}
return (
<IconButton
icon={<PiGearSixFill />}
tooltip={`${t('common.goTo')} ${t('ui.tabs.modelsTab')}`}
aria-label={`${t('common.goTo')} ${t('ui.tabs.modelsTab')}`}
onClick={handleClick}
icon={<PiCubeBold />}
tooltip={`${t('modelManager.manageModels')}`}
aria-label={`${t('modelManager.manageModels')}`}
onClick={onClickGoToModelManager ?? onClick}
size="sm"
variant="ghost"
{...props}