fix: Model Manager jank / bugs / refinement

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx

@@ -1,7 +1,7 @@
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
 import i18n from 'i18n';
 import { ReactNode, memo } from 'react';
-import AddModelsPanel from './subpanels/AddModelsPanel';
+import ImportModelsPanel from './subpanels/ImportModelsPanel';
 import MergeModelsPanel from './subpanels/MergeModelsPanel';
 import ModelManagerPanel from './subpanels/ModelManagerPanel';
 
@@ -22,7 +22,7 @@ const tabs: ModelManagerTabInfo[] = [
   {
     id: 'importModels',
     label: i18n.t('modelManager.importModels'),
-    content: <AddModelsPanel />,
+    content: <ImportModelsPanel />,
   },
   {
     id: 'mergeModels',

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx

@@ -28,7 +28,9 @@ export default function AdvancedAddCheckpoint(
 
   const advancedAddCheckpointForm = useForm<CheckpointModelConfig>({
     initialValues: {
-      model_name: model_path ? model_path.split('\\').splice(-1)[0] : '',
+      model_name: model_path
+        ? model_path.split('\\').splice(-1)[0].split('.')[0]
+        : '',
       base_model: 'sd-1',
       model_type: 'main',
       path: model_path ? model_path : '',

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/FoundModelsList.tsx

@@ -36,6 +36,7 @@ export default function FoundModelsList() {
 
   const quickAddHandler = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
+      const model_name = e.currentTarget.id.split('\\').splice(-1)[0];
       importMainModel({
         body: {
           location: e.currentTarget.id,
@@ -46,7 +47,7 @@ export default function FoundModelsList() {
           dispatch(
             addToast(
               makeToast({
-                title: 'Added Model',
+                title: `Added Model: ${model_name}`,
                 status: 'success',
               })
             )
@@ -72,7 +73,24 @@ export default function FoundModelsList() {
     if (!searchFolder) return;
 
     if (!foundModels || foundModels.length === 0) {
-      return <Flex>No Models Found</Flex>;
+      return (
+        <Flex
+          sx={{
+            w: 'full',
+            h: 'full',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: 96,
+            userSelect: 'none',
+            bg: 'base.200',
+            _dark: {
+              bg: 'base.900',
+            },
+          }}
+        >
+          <Text variant="subtext">No Models Found</Text>
+        </Flex>
+      );
     }
 
     return (
@@ -81,6 +99,7 @@ export default function FoundModelsList() {
           flexDirection: 'column',
           gap: 2,
           w: '100%',
+          minW: '50%',
         }}
       >
         <Flex p={2} gap={2}>
@@ -114,7 +133,7 @@ export default function FoundModelsList() {
             }}
             key={model}
           >
-            <Flex w="100%" sx={{ flexDirection: 'column' }}>
+            <Flex w="100%" sx={{ flexDirection: 'column', minW: '25%' }}>
               <Text sx={{ fontWeight: 600 }}>
                 {model.split('\\').slice(-1)[0]}
               </Text>

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx

@@ -6,7 +6,7 @@ import IAIIconButton from 'common/components/IAIIconButton';
 import IAIInput from 'common/components/IAIInput';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaSearch, FaTrash } from 'react-icons/fa';
+import { FaSearch, FaSync, FaTrash } from 'react-icons/fa';
 import { setSearchFolder } from '../../store/modelManagerSlice';
 
 type SearchFolderForm = {
@@ -91,7 +91,7 @@ function SearchFolderForm() {
           <IAIIconButton
             aria-label={t('modelManager.scanAgain')}
             tooltip={t('modelManager.scanAgain')}
-            icon={<FaSearch />}
+            icon={!searchFolder ? <FaSearch /> : <FaSync />}
             fontSize={18}
             size="sm"
             type="submit"

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ImportModelsPanel.tsx

@@ -1,4 +1,4 @@
-import { ButtonGroup, Divider, Flex } from '@chakra-ui/react';
+import { ButtonGroup, Flex } from '@chakra-ui/react';
 import IAIButton from 'common/components/IAIButton';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,7 +7,7 @@ import ScanModels from './AddModelsPanel/ScanModels';
 
 type AddModelTabs = 'add' | 'scan';
 
-export default function AddModelsPanel() {
+export default function ImportModelsPanel() {
   const [addModelTab, setAddModelTab] = useState<AddModelTabs>('add');
   const { t } = useTranslation();
 
@@ -32,8 +32,6 @@ export default function AddModelsPanel() {
         </IAIButton>
       </ButtonGroup>
 
-      <Divider />
-
       {addModelTab == 'add' && <AddModels />}
       {addModelTab == 'scan' && <ScanModels />}
     </Flex>