feat(model manager): 💄 refactor model manager ui

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/LaunchpadForm/LaunchpadForm.tsx

@@ -35,7 +35,7 @@ export const LaunchpadForm = memo(() => {
   return (
     <Flex flexDir="column" height="100%" gap={3}>
       <ScrollableContent>
-        <Flex flexDir="column" gap={6} p={3}>
+        <Flex flexDir="column" gap={6} py={2}>
           {/* Welcome Section */}
           <Flex flexDir="column" gap={2} alignItems="flex-start">
             <Heading size="md">{t('modelManager.launchpad.welcome')}</Heading>

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelResultItemActions.tsx

@@ -0,0 +1,45 @@
+import { Badge, Button, Flex } from '@invoke-ai/ui-library';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiCheckBold, PiPlusBold } from 'react-icons/pi';
+
+type Props = {
+  handleInstall: () => void;
+  isInstalled: boolean;
+};
+
+export const ModelResultItemActions = memo(({ handleInstall, isInstalled }: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex gap={2} shrink={0} pt={1}>
+      {isInstalled ? (
+        // TODO: Add a link button to navigate to model
+        <Badge
+          variant="subtle"
+          colorScheme="green"
+          display="flex"
+          gap={1}
+          alignItems="center"
+          borderRadius="base"
+          h="24px"
+        >
+          <PiCheckBold size="14px" />
+        </Badge>
+      ) : (
+        <Button
+          onClick={handleInstall}
+          rightIcon={<PiPlusBold size="14px" />}
+          textTransform="uppercase"
+          letterSpacing="wider"
+          fontSize="9px"
+          size="sm"
+        >
+          {t('modelManager.install')}
+        </Button>
+      )}
+    </Flex>
+  );
+});
+
+ModelResultItemActions.displayName = 'ModelResultItemActions';

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanFolder/ScanFolderResultItem.tsx

@@ -1,33 +1,56 @@
-import { Badge, Box, Flex, IconButton, Text } from '@invoke-ai/ui-library';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiPlusBold } from 'react-icons/pi';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { ModelResultItemActions } from 'features/modelManagerV2/subpanels/AddModelPanel/ModelResultItemActions';
+import { memo, useCallback, useMemo } from 'react';
 import type { ScanFolderResponse } from 'services/api/endpoints/models';
 
 type Props = {
   result: ScanFolderResponse[number];
   installModel: (source: string) => void;
 };
-export const ScanModelResultItem = memo(({ result, installModel }: Props) => {
-  const { t } = useTranslation();
 
+const scanFolderResultItemSx: SystemStyleObject = {
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  w: '100%',
+  py: 2,
+  px: 1,
+  gap: 3,
+  borderBottomWidth: '1px',
+  borderColor: 'base.700',
+};
+
+export const ScanModelResultItem = memo(({ result, installModel }: Props) => {
   const handleInstall = useCallback(() => {
     installModel(result.path);
   }, [installModel, result]);
 
+  const modelDisplayName = useMemo(() => {
+    const normalizedPath = result.path.replace(/\\/g, '/').replace(/\/+$/, '');
+
+    // Extract filename/folder name from path
+    const lastSlashIndex = normalizedPath.lastIndexOf('/');
+    return lastSlashIndex === -1 ? normalizedPath : normalizedPath.slice(lastSlashIndex + 1);
+  }, [result.path]);
+
+  const modelPathParts = result.path.split(/[/\\]/);
+
   return (
-    <Flex alignItems="center" justifyContent="space-between" w="100%" gap={3}>
+    <Flex sx={scanFolderResultItemSx}>
       <Flex fontSize="sm" flexDir="column">
-        <Text fontWeight="semibold">{result.path.split('\\').slice(-1)[0]}</Text>
-        <Text variant="subtext">{result.path}</Text>
+        {/* Model Title */}
+        <Text fontWeight="semibold">{modelDisplayName}</Text>
+        {/* Model Path */}
+        <Flex flexWrap="wrap" color="base.200">
+          {modelPathParts.map((part, index) => (
+            <Text key={index} variant="subtext">
+              {part}
+              {index < modelPathParts.length - 1 && '/'}
+            </Text>
+          ))}
+        </Flex>
       </Flex>
-      <Box>
-        {result.is_installed ? (
-          <Badge>{t('common.installed')}</Badge>
-        ) : (
-          <IconButton aria-label={t('modelManager.install')} icon={<PiPlusBold />} onClick={handleInstall} size="sm" />
-        )}
-      </Box>
+      <ModelResultItemActions handleInstall={handleInstall} isInstalled={result.is_installed} />
     </Flex>
   );
 });

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanFolder/ScanFolderResults.tsx

@@ -113,9 +113,9 @@ export const ScanModelsResults = memo(({ results }: ScanModelResultsProps) => {
             </InputGroup>
           </Flex>
         </Flex>
-        <Flex height="100%" layerStyle="third" borderRadius="base" p={3}>
+        <Flex height="100%" layerStyle="second" borderRadius="base" px={2}>
           <ScrollableContent>
-            <Flex flexDir="column" gap={3}>
+            <Flex flexDir="column">
               {filteredResults.map((result) => (
                 <ScanModelResultItem key={result.path} result={result} installModel={handleInstallOne} />
               ))}

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterBundleButton.tsx

@@ -13,6 +13,7 @@ import { useStarterBundleInstallStatus } from 'features/modelManagerV2/hooks/use
 import { t } from 'i18next';
 import type { MouseEvent } from 'react';
 import { useCallback } from 'react';
+import { PiDownloadSimpleBold } from 'react-icons/pi';
 import type { S } from 'services/api/types';
 
 export const StarterBundleButton = ({ bundle, ...rest }: { bundle: S['StarterModelBundle'] } & ButtonProps) => {
@@ -33,8 +34,16 @@ export const StarterBundleButton = ({ bundle, ...rest }: { bundle: S['StarterMod
 
   return (
     <>
-      <Button onClick={onClickBundle} isDisabled={install.length === 0} {...rest}>
-        {bundle.name}
+      <Button
+        display="flex"
+        justifyContent="space-between"
+        gap={2}
+        onClick={onClickBundle}
+        isDisabled={install.length === 0}
+        {...rest}
+      >
+        <span>{bundle.name}</span>
+        <PiDownloadSimpleBold size="16px" />
       </Button>
       <ConfirmationAlertDialog
         isOpen={isOpen}

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsResultItem.tsx

@@ -1,17 +1,30 @@
-import { Badge, Box, Flex, IconButton, Text } from '@invoke-ai/ui-library';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Badge, Flex, Text } from '@invoke-ai/ui-library';
 import { negate } from 'es-toolkit/compat';
 import { flattenStarterModel, useBuildModelInstallArg } from 'features/modelManagerV2/hooks/useBuildModelsToInstall';
 import { useInstallModel } from 'features/modelManagerV2/hooks/useInstallModel';
+import { ModelResultItemActions } from 'features/modelManagerV2/subpanels/AddModelPanel/ModelResultItemActions';
 import ModelBaseBadge from 'features/modelManagerV2/subpanels/ModelManagerPanel/ModelBaseBadge';
 import { toast } from 'features/toast/toast';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiPlusBold } from 'react-icons/pi';
 import type { StarterModel } from 'services/api/types';
 
+const starterModelResultItemSx: SystemStyleObject = {
+  alignItems: 'start',
+  justifyContent: 'space-between',
+  w: '100%',
+  py: 2,
+  px: 1,
+  gap: 2,
+  borderBottomWidth: '1px',
+  borderColor: 'base.700',
+};
+
 type Props = {
   starterModel: StarterModel;
 };
+
 export const StarterModelsResultItem = memo(({ starterModel }: Props) => {
   const { t } = useTranslation();
   const { getIsInstalled, buildModelInstallArg } = useBuildModelInstallArg();
@@ -40,22 +53,16 @@ export const StarterModelsResultItem = memo(({ starterModel }: Props) => {
   }, [modelsToInstall, installModel, t]);
 
   return (
-    <Flex alignItems="center" justifyContent="space-between" w="100%" gap={3}>
+    <Flex sx={starterModelResultItemSx}>
       <Flex fontSize="sm" flexDir="column">
-        <Flex gap={3}>
+        <Text fontWeight="semibold">{starterModel.name}</Text>
+        <Text variant="subtext">{starterModel.description}</Text>
+        <Flex gap={1} py={1} alignItems="center">
           <Badge h="min-content">{starterModel.type.replaceAll('_', ' ')}</Badge>
           <ModelBaseBadge base={starterModel.base} />
-          <Text fontWeight="semibold">{starterModel.name}</Text>
         </Flex>
-        <Text variant="subtext">{starterModel.description}</Text>
       </Flex>
-      <Box>
-        {isInstalled ? (
-          <Badge>{t('common.installed')}</Badge>
-        ) : (
-          <IconButton aria-label={t('modelManager.install')} icon={<PiPlusBold />} onClick={onClick} size="sm" />
-        )}
-      </Box>
+      <ModelResultItemActions handleInstall={onClick} isInstalled={isInstalled} />
     </Flex>
   );
 });

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsResults.tsx

@@ -48,9 +48,9 @@ export const StarterModelsResults = memo(({ results }: StarterModelsResultsProps
 
   return (
     <Flex flexDir="column" gap={3} height="100%">
-      <Flex justifyContent="space-between" alignItems="center">
+      <Flex gap={3} direction="column">
         {size(results.starter_bundles) > 0 && (
-          <Flex gap={4} alignItems="center">
+          <Flex gap={4} alignItems="center" justifyContent="space-between" p={4} borderWidth="1px" rounded="base">
             <Flex gap={2} alignItems="center">
               <Text color="base.200" fontWeight="semibold">
                 {t('modelManager.starterBundles')}
@@ -73,7 +73,8 @@ export const StarterModelsResults = memo(({ results }: StarterModelsResultsProps
             </Flex>
           </Flex>
         )}
-        <InputGroup w={64} size="xs">
+
+        <InputGroup w="100%" size="xs">
           <Input
             placeholder={t('modelManager.search')}
             value={searchTerm}
@@ -96,9 +97,10 @@ export const StarterModelsResults = memo(({ results }: StarterModelsResultsProps
           )}
         </InputGroup>
       </Flex>
-      <Flex height="100%" layerStyle="third" borderRadius="base" p={3}>
+
+      <Flex height="100%" layerStyle="second" borderRadius="base" px={2}>
         <ScrollableContent>
-          <Flex flexDir="column" gap={3}>
+          <Flex flexDir="column">
             {filteredResults.map((result) => (
               <StarterModelsResultItem key={result.source} starterModel={result} />
             ))}

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

@@ -1,17 +1,25 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Box, Button, Flex, Heading, Tab, TabList, TabPanel, TabPanels, Tabs, Text } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $installModelsTabIndex } from 'features/modelManagerV2/store/installModelsStore';
 import { StarterModelsForm } from 'features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsForm';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiInfoBold } from 'react-icons/pi';
+import { PiCubeBold, PiFolderOpenBold, PiInfoBold, PiLinkSimpleBold, PiShootingStarBold } from 'react-icons/pi';
+import { SiHuggingface } from 'react-icons/si';
 
 import { HuggingFaceForm } from './AddModelPanel/HuggingFaceFolder/HuggingFaceForm';
 import { InstallModelForm } from './AddModelPanel/InstallModelForm';
 import { LaunchpadForm } from './AddModelPanel/LaunchpadForm/LaunchpadForm';
 import { ModelInstallQueue } from './AddModelPanel/ModelInstallQueue/ModelInstallQueue';
 import { ScanModelsForm } from './AddModelPanel/ScanFolder/ScanFolderForm';
 
+const installModelsTabSx: SystemStyleObject = {
+  display: 'flex',
+  gap: 2,
+  px: 2,
+};
+
 export const InstallModels = memo(() => {
   const { t } = useTranslation();
   const tabIndex = useStore($installModelsTabIndex);
@@ -29,21 +37,36 @@ export const InstallModels = memo(() => {
         </Button>
       </Flex>
       <Tabs
-        variant="collapse"
-        height="50%"
+        variant="line"
+        height="100%"
         display="flex"
         flexDir="column"
         index={tabIndex}
         onChange={$installModelsTabIndex.set}
       >
         <TabList>
-          <Tab>{t('modelManager.launchpadTab')}</Tab>
-          <Tab>{t('modelManager.urlOrLocalPath')}</Tab>
-          <Tab>{t('modelManager.huggingFace')}</Tab>
-          <Tab>{t('modelManager.scanFolder')}</Tab>
-          <Tab>{t('modelManager.starterModels')}</Tab>
+          <Tab sx={installModelsTabSx}>
+            <PiCubeBold />
+            {t('modelManager.launchpadTab')}
+          </Tab>
+          <Tab sx={installModelsTabSx}>
+            <PiLinkSimpleBold />
+            {t('modelManager.urlOrLocalPath')}
+          </Tab>
+          <Tab sx={installModelsTabSx}>
+            <SiHuggingface />
+            {t('modelManager.huggingFace')}
+          </Tab>
+          <Tab sx={installModelsTabSx}>
+            <PiFolderOpenBold />
+            {t('modelManager.scanFolder')}
+          </Tab>
+          <Tab sx={installModelsTabSx}>
+            <PiShootingStarBold />
+            {t('modelManager.starterModels')}
+          </Tab>
         </TabList>
-        <TabPanels p={3} height="100%">
+        <TabPanels height="100%">
           <TabPanel height="100%">
             <LaunchpadForm />
           </TabPanel>

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

@@ -1,3 +1,4 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Button, Flex, Heading } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { selectSelectedModelKey, setSelectedModelKey } from 'features/modelManagerV2/store/modelManagerV2Slice';
@@ -8,6 +9,16 @@ import { PiPlusBold } from 'react-icons/pi';
 import ModelList from './ModelManagerPanel/ModelList';
 import { ModelListNavigation } from './ModelManagerPanel/ModelListNavigation';
 
+const modelManagerSx: SystemStyleObject = {
+  flexDir: 'column',
+  p: 4,
+  gap: 4,
+  borderRadius: 'base',
+  w: '50%',
+  minWidth: '360px',
+  h: 'full',
+};
+
 export const ModelManager = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
@@ -17,7 +28,7 @@ export const ModelManager = memo(() => {
   const selectedModelKey = useAppSelector(selectSelectedModelKey);
 
   return (
-    <Flex flexDir="column" layerStyle="first" p={4} gap={4} borderRadius="base" w="50%" h="full">
+    <Flex sx={modelManagerSx}>
       <Flex w="full" gap={4} justifyContent="space-between" alignItems="center">
         <Heading fontSize="xl" py={1}>
           {t('common.modelManager')}
@@ -28,7 +39,7 @@ export const ModelManager = memo(() => {
           </Button>
         )}
       </Flex>
-      <Flex flexDir="column" layerStyle="second" p={4} gap={4} borderRadius="base" w="full" h="full">
+      <Flex flexDir="column" gap={4} w="full" h="full">
         <ModelListNavigation />
         <ModelList />
       </Flex>