feat(ui): extract mantine component styles to hook, add less opinionated mantine components

IAIMantineSelect and IAIMantineMultiSelect have a bit of extra logic that prevents simple select functionality from working as expected.

- extract the styles into hooks
- rename those two components to IAIMantineSearchableSelect and IAIMantineSearchableMultiSelect
- Create IAIMantineSelect (which is just a dropdown) and use it in model manager and a few other places

When we only have a few options to present and searching is not efficient, we should use this instead.

invokeai/frontend/web/src/features/nodes/components/AddNodeMenu.tsx

@@ -3,7 +3,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppToaster } from 'app/components/Toaster';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import { map } from 'lodash-es';
 import { forwardRef, useCallback } from 'react';
 import 'reactflow/dist/style.css';
@@ -77,7 +77,7 @@ const AddNodeMenu = () => {
 
   return (
     <Flex sx={{ gap: 2, alignItems: 'center' }}>
-      <IAIMantineSelect
+      <IAIMantineSearchableSelect
         selectOnBlur={false}
         placeholder="Add Node"
         value={null}

invokeai/frontend/web/src/features/nodes/components/fields/LoRAModelInputFieldComponent.tsx

@@ -1,7 +1,7 @@
 import { Flex, Text } from '@chakra-ui/react';
 import { SelectItem } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectItemWithTooltip';
 import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
 import {
@@ -89,7 +89,7 @@ const LoRAModelInputFieldComponent = (
   }
 
   return (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       value={selectedLoRAModel?.id ?? null}
       label={
         selectedLoRAModel?.base_model &&

invokeai/frontend/web/src/features/nodes/components/fields/ModelInputFieldComponent.tsx

@@ -6,7 +6,7 @@ import {
 } from 'features/nodes/types/types';
 
 import { SelectItem } from '@mantine/core';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { modelIdToMainModelParam } from 'features/parameters/util/modelIdToMainModelParam';
 import { forEach } from 'lodash-es';
@@ -81,14 +81,14 @@ const ModelInputFieldComponent = (
   );
 
   return isLoading ? (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       label={t('modelManager.model')}
       placeholder="Loading..."
       disabled={true}
       data={[]}
     />
   ) : (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       tooltip={selectedModel?.description}
       label={
         selectedModel?.base_model && MODEL_TYPE_MAP[selectedModel?.base_model]

invokeai/frontend/web/src/features/nodes/components/fields/VaeModelInputFieldComponent.tsx

@@ -1,6 +1,6 @@
 import { SelectItem } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectItemWithTooltip';
 import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
 import {
@@ -86,7 +86,7 @@ const VaeModelInputFieldComponent = (
   );
 
   return (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       itemComponent={IAIMantineSelectItemWithTooltip}
       tooltip={selectedVaeModel?.description}
       label={