feat(ui): add button to go to model manager next to all model combobox

invokeai/frontend/web/package.json

@@ -65,7 +65,7 @@
     "@xyflow/react": "^12.5.3",
     "async-mutex": "^0.5.0",
     "chakra-react-select": "^4.9.2",
-    "cmdk": "^1.0.0",
+    "cmdk": "^1.1.1",
     "compare-versions": "^6.1.1",
     "filesize": "^10.1.6",
     "fracturedjsonjs": "^4.0.2",

invokeai/frontend/web/public/locales/en.json

@@ -871,7 +871,8 @@
         "installingXModels_one": "Installing {{count}} model",
         "installingXModels_other": "Installing {{count}} models",
         "skippingXDuplicates_one": ", skipping {{count}} duplicate",
-        "skippingXDuplicates_other": ", skipping {{count}} duplicates"
+        "skippingXDuplicates_other": ", skipping {{count}} duplicates",
+        "manageModels": "Manage Models"
     },
     "models": {
         "addLora": "Add LoRA",

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -12,6 +12,7 @@ import type { CustomStarUi } from 'app/store/nanostores/customStarUI';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { $isDebugging } from 'app/store/nanostores/isDebugging';
 import { $logo } from 'app/store/nanostores/logo';
+import { $onClickGoToModelManager } from 'app/store/nanostores/onClickGoToModelManager';
 import { $openAPISchemaUrl } from 'app/store/nanostores/openAPISchemaUrl';
 import { $projectId, $projectName, $projectUrl } from 'app/store/nanostores/projectId';
 import { $queueId, DEFAULT_QUEUE_ID } from 'app/store/nanostores/queueId';
@@ -59,6 +60,10 @@ interface Props extends PropsWithChildren {
   workflowTagCategories?: WorkflowTagCategory[];
   workflowSortOptions?: WorkflowSortOption[];
   loggingOverrides?: LoggingOverrides;
+  /**
+   * If provided, overrides in-app navigation to the model manager
+   */
+  onClickGoToModelManager?: () => void;
 }
 
 const InvokeAIUI = ({
@@ -81,6 +86,7 @@ const InvokeAIUI = ({
   workflowTagCategories,
   workflowSortOptions,
   loggingOverrides,
+  onClickGoToModelManager,
 }: Props) => {
   useLayoutEffect(() => {
     /*
@@ -205,6 +211,16 @@ const InvokeAIUI = ({
     };
   }, [logo]);
 
+  useEffect(() => {
+    if (onClickGoToModelManager) {
+      $onClickGoToModelManager.set(onClickGoToModelManager);
+    }
+
+    return () => {
+      $onClickGoToModelManager.set(undefined);
+    };
+  }, [onClickGoToModelManager]);
+
   useEffect(() => {
     if (workflowCategories) {
       $workflowLibraryCategoriesOptions.set(workflowCategories);

invokeai/frontend/web/src/app/store/nanostores/onClickGoToModelManager.ts

@@ -0,0 +1,3 @@
+import { atom } from 'nanostores';
+
+export const $onClickGoToModelManager = atom<(() => void) | undefined>(undefined);

invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx

@@ -7,7 +7,7 @@ import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/
 import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-react';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties, PropsWithChildren } from 'react';
-import { memo, useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useRef } from 'react';
 
 type Props = PropsWithChildren & {
   maxHeight?: ChakraProps['maxHeight'];
@@ -22,9 +22,9 @@ const ScrollableContent = ({ children, maxHeight, overflowX = 'hidden', overflow
     () => getOverlayScrollbarsParams({ overflowX, overflowY }).options,
     [overflowX, overflowY]
   );
-  const [os, osRef] = useState<OverlayScrollbarsComponentRef | null>(null);
+  const os = useRef<OverlayScrollbarsComponentRef>(null);
   useEffect(() => {
-    const osInstance = os?.osInstance();
+    const osInstance = os.current?.osInstance();
 
     if (!osInstance) {
       return;
@@ -46,7 +46,7 @@ const ScrollableContent = ({ children, maxHeight, overflowX = 'hidden', overflow
   return (
     <Flex w="full" h="full" maxHeight={maxHeight} position="relative">
       <Box position="absolute" top={0} left={0} right={0} bottom={0}>
-        <OverlayScrollbarsComponent ref={osRef} style={styles} options={overlayscrollbarsOptions}>
+        <OverlayScrollbarsComponent ref={os} style={styles} options={overlayscrollbarsOptions} defer>
           {children}
         </OverlayScrollbarsComponent>
       </Box>