feat(ui): make model install tab controlled

This lets us navigate directly to eg the Starter Models tab

Author: psychedelicious

invokeai/frontend/web/src/features/modelManagerV2/hooks/useStarterModelsToast.tsx

@@ -1,5 +1,6 @@
 import { Button, Text, useToast } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { $installModelsTab } from 'features/modelManagerV2/subpanels/InstallModels';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { useCallback, useEffect, useState } from 'react';
@@ -44,6 +45,7 @@ const ToastDescription = () => {
 
   const onClick = useCallback(() => {
     dispatch(setActiveTab('models'));
+    $installModelsTab.set(3)
     toast.close(TOAST_ID);
   }, [dispatch, toast]);
 

invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx

@@ -1,28 +1,28 @@
 import { Box, Flex, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { StarterModelsForm } from 'features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsForm';
-import { useMemo } from 'react';
+import { atom } from 'nanostores';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useMainModels } from 'services/api/hooks/modelsByType';
 
 import { HuggingFaceForm } from './AddModelPanel/HuggingFaceFolder/HuggingFaceForm';
 import { InstallModelForm } from './AddModelPanel/InstallModelForm';
 import { ModelInstallQueue } from './AddModelPanel/ModelInstallQueue/ModelInstallQueue';
 import { ScanModelsForm } from './AddModelPanel/ScanFolder/ScanFolderForm';
 
+export const $installModelsTab = atom(0);
+
 export const InstallModels = () => {
   const { t } = useTranslation();
-  const [mainModels, { data }] = useMainModels();
-  const defaultIndex = useMemo(() => {
-    if (data && mainModels.length) {
-      return 0;
-    }
-    return 3;
-  }, [data, mainModels.length]);
+  const index = useStore($installModelsTab);
+  const onChange = useCallback((index: number) => {
+    $installModelsTab.set(index);
+  }, []);
 
   return (
     <Flex layerStyle="first" borderRadius="base" w="full" h="full" flexDir="column" gap={4}>
       <Heading fontSize="xl">{t('modelManager.addModel')}</Heading>
-      <Tabs variant="collapse" height="50%" display="flex" flexDir="column" defaultIndex={defaultIndex}>
+      <Tabs variant="collapse" height="50%" display="flex" flexDir="column" index={index} onChange={onChange}>
         <TabList>
           <Tab>{t('modelManager.urlOrLocalPath')}</Tab>
           <Tab>{t('modelManager.huggingFace')}</Tab>