feat(ui): revise generation mode logic

- Canvas generation mode is replace with a boolean `sendToCanvas` flag. When off, images generated on the canvas go to the gallery. When on, they get added to the staging area.
- When an image result is received, if its destination is the canvas, staging is automatically started.
- Updated queue list to show the destination column.
- Added `IconSwitch` component to represent binary choices, used for the new `sendToCanvas` flag and image viewer toggle.
- Remove the queue actions menu in `QueueControls`. Move the queue count badge to the cancel button.
- Redo layout of `QueueControls` to prevent duplicate queue count badges.
- Fix issue where gallery and options panels could show thru transparent regions of queue tab.
- Disable panel hotkeys when on mm/queue tabs.

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

@@ -1,25 +1,27 @@
-import { ButtonGroup, Flex, Spacer } from '@invoke-ai/ui-library';
+import { Flex, Spacer } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { CanvasSendToToggle } from 'features/controlLayers/components/CanvasSendToToggle';
 import { ClearQueueIconButton } from 'features/queue/components/ClearQueueIconButton';
 import QueueFrontButton from 'features/queue/components/QueueFrontButton';
 import ProgressBar from 'features/system/components/ProgressBar';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import { memo, useRef } from 'react';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import { memo } from 'react';
 
 import { InvokeQueueBackButton } from './InvokeQueueBackButton';
-import { QueueActionsMenuButton } from './QueueActionsMenuButton';
 
 const QueueControls = () => {
   const isPrependEnabled = useFeatureStatus('prependQueue');
-  const containerRef = useRef<HTMLDivElement>(null);
+  const tab = useAppSelector(selectActiveTab);
   return (
-    <Flex ref={containerRef} w="full" position="relative" borderRadius="base" gap={2} flexDir="column">
-      <ButtonGroup size="lg" isAttached={false}>
+    <Flex w="full" position="relative" borderRadius="base" gap={2} flexDir="column">
+      <Flex gap={2}>
         {isPrependEnabled && <QueueFrontButton />}
         <InvokeQueueBackButton />
         <Spacer />
-        <QueueActionsMenuButton containerRef={containerRef} />
+        {tab === 'generation' && <CanvasSendToToggle />}
         <ClearQueueIconButton />
-      </ButtonGroup>
+      </Flex>
       <ProgressBar />
     </Flex>
   );