workspace for mary and jenn

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

@@ -0,0 +1,10 @@
+import { Box } from '@invoke-ai/ui-library';
+
+//jenn's workspace
+export const ImportModels = () => {
+  return (
+    <Box layerStyle="first" p={2} borderRadius="base" w="full" h="full">
+      Import Models
+    </Box>
+  );
+};

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

@@ -0,0 +1,44 @@
+import {
+  Box,
+  Button,
+  Flex,
+  Heading,
+  IconButton,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Spacer,
+} from '@invoke-ai/ui-library';
+import { t } from 'i18next';
+import { PiXBold } from 'react-icons/pi';
+import { SyncModelsIconButton } from '../../modelManager/components/SyncModels/SyncModelsIconButton';
+
+export const ModelManager = () => {
+  return (
+    <Box layerStyle="first" p={3} borderRadius="base" w="full" h="full">
+      <Flex w="full" p={3} justifyContent="space-between" alignItems="center">
+        <Flex gap={2}>
+          <Heading fontSize="xl">Model Manager</Heading>
+          <SyncModelsIconButton />
+        </Flex>
+        <Flex gap={2}>
+          <Button colorScheme="invokeYellow">Add Model</Button>
+          <Button>Scan for Models</Button>
+        </Flex>
+      </Flex>
+      <Box layerStyle="second" p={3} borderRadius="base" w="full" h="full">
+        <Flex gap={2} alignItems="center" justifyContent="space-between">
+          <Button>All Models</Button>
+          <Spacer />
+          <InputGroup>
+            <Input placeholder={t('boards.searchBoard')} data-testid="board-search-input" />(
+            <InputRightElement h="full" pe={2}>
+              <IconButton size="sm" variant="link" aria-label={t('boards.clearSearch')} icon={<PiXBold />} />
+            </InputRightElement>
+            )
+          </InputGroup>
+        </Flex>
+      </Box>
+    </Box>
+  );
+};

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

@@ -1,65 +1,17 @@
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { Flex, Box } from '@invoke-ai/ui-library';
-import ImportModelsPanel from 'features/modelManager/subpanels/ImportModelsPanel';
+import { memo } from 'react';
-import MergeModelsPanel from 'features/modelManager/subpanels/MergeModelsPanel';
-import ModelManagerPanel from 'features/modelManager/subpanels/ModelManagerPanel';
-import ModelManagerSettingsPanel from 'features/modelManager/subpanels/ModelManagerSettingsPanel';
-import type { ReactNode } from 'react';
-import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-
+import { ImportModels } from '../../../modelManagerV2/subpanels/ImportModels';
-type ModelManagerTabName = 'modelManager' | 'importModels' | 'mergeModels' | 'settings';
+import { ModelManager } from '../../../modelManagerV2/subpanels/ModelManager';
-
-type ModelManagerTabInfo = {
-  id: ModelManagerTabName;
-  label: string;
-  content: ReactNode;
-};
 
 const ModelManagerTab = () => {
-  const { t } = useTranslation();
-
-  const tabs: ModelManagerTabInfo[] = useMemo(
-    () => [
-      {
-        id: 'modelManager',
-        label: t('modelManager.modelManager'),
-        content: <ModelManagerPanel />,
-      },
-      {
-        id: 'importModels',
-        label: t('modelManager.importModels'),
-        content: <ImportModelsPanel />,
-      },
-      {
-        id: 'mergeModels',
-        label: t('modelManager.mergeModels'),
-        content: <MergeModelsPanel />,
-      },
-      {
-        id: 'settings',
-        label: t('modelManager.settings'),
-        content: <ModelManagerSettingsPanel />,
-      },
-    ],
-    [t]
-  );
   return (
-    <Tabs isLazy variant="line" layerStyle="first" w="full" h="full" p={4} gap={4} borderRadius="base">
+    <Box w="full" h="full">
-      <TabList>
+      <Flex w="full" h="full" gap={4}>
-        {tabs.map((tab) => (
+        <ModelManager />
-          <Tab borderTopRadius="base" key={tab.id}>
+        <ImportModels />
-            {tab.label}
+      </Flex>
-          </Tab>
+    </Box>
-        ))}
-      </TabList>
-      <TabPanels w="full" h="full">
-        {tabs.map((tab) => (
-          <TabPanel w="full" h="full" key={tab.id}>
-            {tab.content}
-          </TabPanel>
-        ))}
-      </TabPanels>
-    </Tabs>
   );
 };