Puts model switching into accordion, styling

frontend/src/features/system/SettingsModal/ModelList.scss

@@ -1,9 +1,36 @@
 .model-list {
-  display: flex;
-  flex-direction: column;
-  row-gap: 0.5rem;
+  .chakra-accordion {
+    display: grid;
+    row-gap: 0.5rem;
+  }
 
-  .model-list-header {
+  .chakra-accordion__item {
+    border: none;
+    border-radius: 0.3rem;
+    background-color: var(--tab-hover-color);
+  }
+
+  button {
+    border-radius: 0.3rem !important;
+
+    &[aria-expanded='true'] {
+      background-color: var(--tab-hover-color);
+      border-radius: 0.3rem;
+    }
+  }
+
+  .model-list-button {
+    display: flex;
+    flex-direction: row;
+    row-gap: 0.5rem;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .model-list-header-hint {
+    color: var(--text-color-secondary);
+    font-weight: normal;
   }
 
   .model-list-list {

frontend/src/features/system/SettingsModal/ModelList.tsx

@@ -1,8 +1,19 @@
-import { Button, Tooltip, Spacer, Heading } from '@chakra-ui/react';
+import {
+  Button,
+  Tooltip,
+  Spacer,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+} from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
 import _ from 'lodash';
-import { Model, ModelStatus } from '../../../app/invokeai';
+import { ModelStatus } from '../../../app/invokeai';
 import { requestModelChange } from '../../../app/socketio/actions';
 import { RootState, useAppDispatch, useAppSelector } from '../../../app/store';
+import { SystemState } from '../systemSlice';
 
 type ModelListItemProps = {
   name: string;
@@ -11,6 +22,10 @@ type ModelListItemProps = {
 };
 
 const ModelListItem = (props: ModelListItemProps) => {
+  const { isProcessing, isConnected } = useAppSelector(
+    (state: RootState) => state.system
+  );
+
   const dispatch = useAppDispatch();
   const { name, status, description } = props;
   const handleChangeModel = () => {
@@ -29,7 +44,7 @@ const ModelListItem = (props: ModelListItemProps) => {
         <Button
           size={'sm'}
           onClick={handleChangeModel}
-          isDisabled={status === 'active'}
+          isDisabled={status === 'active' || isProcessing || !isConnected}
         >
           Load
         </Button>
@@ -38,24 +53,50 @@ const ModelListItem = (props: ModelListItemProps) => {
   );
 };
 
+const modelListSelector = createSelector(
+  (state: RootState) => state.system,
+  (system: SystemState) => {
+    const models = _.map(system.model_list, (model, key) => {
+      return { name: key, ...model };
+    });
+
+    const activeModel = models.find((model) => model.status === 'active');
+
+    return {
+      models,
+      activeModel: activeModel,
+    };
+  }
+);
+
 const ModelList = () => {
-  const { model_list } = useAppSelector((state: RootState) => state.system);
+  const { models } = useAppSelector(modelListSelector);
 
   return (
     <div className="model-list">
-      <Heading size={'md'} className="model-list-header">
-        Available Models
-      </Heading>
-      <div className="model-list-list">
-        {_.map(model_list, (model: Model, key) => (
-          <ModelListItem
-            key={key}
-            name={key}
-            status={model.status}
-            description={model.description}
-          />
-        ))}
-      </div>
+      <Accordion allowToggle>
+        <AccordionItem>
+          <AccordionButton>
+            <div className="model-list-button">
+              <h2>Models</h2>
+              <AccordionIcon />
+            </div>
+          </AccordionButton>
+
+          <AccordionPanel>
+            <div className="model-list-list">
+              {models.map((model, i) => (
+                <ModelListItem
+                  key={i}
+                  name={model.name}
+                  status={model.status}
+                  description={model.description}
+                />
+              ))}
+            </div>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
     </div>
   );
 };

frontend/src/features/system/SettingsModal/SettingsModal.scss

@@ -25,8 +25,8 @@
       background-color: var(--background-color);
       padding: 0.4rem 1rem;
       border-radius: 0.5rem;
-      justify-content: space-between;
       align-items: center;
+      width: 100%;
     }
   }
 

frontend/src/features/system/SettingsModal/SettingsModalItem.tsx

@@ -1,6 +1,5 @@
-import { FormControl, FormLabel, Switch } from '@chakra-ui/react';
-import React from 'react';
 import { useAppDispatch } from '../../../app/store';
+import IAISwitch from '../../../common/components/IAISwitch';
 
 export default function SettingsModalItem({
   settingTitle,
@@ -13,12 +12,11 @@ export default function SettingsModalItem({
 }) {
   const dispatch = useAppDispatch();
   return (
-    <FormControl className="settings-modal-item">
-      <FormLabel marginBottom={1}>{settingTitle}</FormLabel>
-      <Switch
-        isChecked={isChecked}
-        onChange={(e) => dispatch(dispatcher(e.target.checked))}
-      />
-    </FormControl>
+    <IAISwitch
+      styleClass="settings-modal-item"
+      label={settingTitle}
+      isChecked={isChecked}
+      onChange={(e) => dispatch(dispatcher(e.target.checked))}
+    />
   );
 }