From 77f2aabda424a07194e48d364e7e3bb695a76f69 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 29 Dec 2023 09:13:43 +1100
Subject: [PATCH] feat(ui): sort model select options with compatible base
 model first

---
 invokeai/frontend/web/public/locales/en.json               | 2 +-
 .../components/InvSelect/useGroupedModelInvSelect.ts       | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 23dd8f9902..62412565b7 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1124,7 +1124,7 @@
             "noControlImageForControlAdapter": "Control Adapter #{{number}} has no control image",
             "noInitialImageSelected": "No initial image selected",
             "noModelForControlAdapter": "Control Adapter #{{number}} has no model selected.",
-            "incompatibleBaseModelForControlAdapter": "Control Adapter #{{number}} model is invalid with main model.",
+            "incompatibleBaseModelForControlAdapter": "Control Adapter #{{number}} model is incompatible with main model.",
             "noModelSelected": "No model selected",
             "noPrompts": "No prompts generated",
             "noNodesInGraph": "No nodes in graph",
diff --git a/invokeai/frontend/web/src/common/components/InvSelect/useGroupedModelInvSelect.ts b/invokeai/frontend/web/src/common/components/InvSelect/useGroupedModelInvSelect.ts
index a2e7b5a365..3cf8445c85 100644
--- a/invokeai/frontend/web/src/common/components/InvSelect/useGroupedModelInvSelect.ts
+++ b/invokeai/frontend/web/src/common/components/InvSelect/useGroupedModelInvSelect.ts
@@ -1,4 +1,5 @@
 import type { EntityState } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
 import type { GroupBase } from 'chakra-react-select';
 import { groupBy, map, reduce } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
@@ -28,6 +29,9 @@ export const useGroupedModelInvSelect = <T extends AnyModelConfigEntity>(
   arg: UseGroupedModelInvSelectArg<T>
 ): UseGroupedModelInvSelectReturn => {
   const { t } = useTranslation();
+  const base_model = useAppSelector(
+    (state) => state.generation.model?.base_model ?? 'sdxl'
+  );
   const { modelEntities, selectedModel, getIsDisabled, onChange, isLoading } =
     arg;
   const options = useMemo(() => {
@@ -51,8 +55,9 @@ export const useGroupedModelInvSelect = <T extends AnyModelConfigEntity>(
       },
       [] as GroupBase<InvSelectOption>[]
     );
+    _options.sort((a) => (a.label === base_model ? -1 : 1));
     return _options;
-  }, [getIsDisabled, modelEntities]);
+  }, [getIsDisabled, modelEntities, base_model]);
 
   const value = useMemo(
     () =>