feat(ui): statusindicator changes

We are now using the lefthand vertical strip for the settings menu button. This is a good place for the status indicator.

Really, we only need to display something *if there is a problem*. If the app is processing, the progress bar indicates that.

For the case where the panels are collapsed, I'll add the floating buttons back in some form, and we'll indicate via those if the app is processing something.

invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx

@@ -28,6 +28,7 @@ const selector = createMemoizedSelector([stateSelector], (state) => {
   const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
     state.config.sd.iterations;
   const { iterations } = state.generation;
+  const isLoadingDynamicPrompts = state.dynamicPrompts.isLoading;
 
   return {
     iterations,
@@ -37,15 +38,14 @@ const selector = createMemoizedSelector([stateSelector], (state) => {
     inputMax,
     step: coarseStep,
     fineStep,
+    isLoadingDynamicPrompts,
   };
 });
 
 export const InvokeQueueBackButton = memo(() => {
-  const isLoadingDynamicPrompts = useAppSelector(
-    (state) => state.dynamicPrompts.isLoading
-  );
   const { queueBack, isLoading, isDisabled } = useQueueBack();
-  const { iterations, step, fineStep } = useAppSelector(selector);
+  const { iterations, step, fineStep, isLoadingDynamicPrompts } =
+    useAppSelector(selector);
   const dispatch = useAppDispatch();
   const handleChange = useCallback(
     (v: number) => {

invokeai/frontend/web/src/features/queue/components/QueueControls.tsx

@@ -3,7 +3,6 @@ import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup'
 import ClearQueueButton from 'features/queue/components/ClearQueueButton';
 import QueueFrontButton from 'features/queue/components/QueueFrontButton';
 import ProgressBar from 'features/system/components/ProgressBar';
-import StatusIndicator from 'features/system/components/StatusIndicator';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 
@@ -31,10 +30,7 @@ const QueueControls = () => {
         {isPauseEnabled && <PauseProcessorButton asIconButton />} */}
         <ClearQueueButton asIconButton />
       </InvButtonGroup>
-      <Flex h={5} w="full" alignItems="center">
-        <StatusIndicator />
-        <ProgressBar height={2} />
-      </Flex>
+      <ProgressBar />
     </Flex>
   );
 };