feat(ui): rework queue controls

- Remove queue front button. Hold shift while clicking `Invoke` button to queue front.
- Restore queue menu actions w/ the reclaimed space.
- Simplify queue interaction hooks.

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

@@ -1,29 +1,30 @@
-import { Button, Flex, Spacer } from '@invoke-ai/ui-library';
+import { Button, Flex, Spacer, useShiftModifier } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectDynamicPromptsIsLoading } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { QueueIterationsNumberInput } from 'features/queue/components/QueueIterationsNumberInput';
-import { useQueueBack } from 'features/queue/hooks/useQueueBack';
+import { useInvoke } from 'features/queue/hooks/useInvoke';
 import { memo } from 'react';
-import { PiSparkleFill } from 'react-icons/pi';
+import { PiLightningFill, PiSparkleFill } from 'react-icons/pi';
 
 import { QueueButtonTooltip } from './QueueButtonTooltip';
 
 const invoke = 'Invoke';
 
-export const InvokeQueueBackButton = memo(() => {
-  const { queueBack, isLoading, isDisabled } = useQueueBack();
+export const InvokeButton = memo(() => {
+  const queue = useInvoke();
+  const shift = useShiftModifier();
   const isLoadingDynamicPrompts = useAppSelector(selectDynamicPromptsIsLoading);
 
   return (
     <Flex pos="relative" w="200px">
       <QueueIterationsNumberInput />
-      <QueueButtonTooltip>
+      <QueueButtonTooltip prepend={shift}>
         <Button
-          onClick={queueBack}
-          isLoading={isLoading || isLoadingDynamicPrompts}
+          onClick={shift ? queue.queueFront : queue.queueBack}
+          isLoading={queue.isLoading || isLoadingDynamicPrompts}
           loadingText={invoke}
-          isDisabled={isDisabled}
-          rightIcon={<PiSparkleFill />}
+          isDisabled={queue.isDisabled}
+          rightIcon={shift ? <PiLightningFill /> : <PiSparkleFill />}
           variant="solid"
           colorScheme="invokeYellow"
           size="lg"
@@ -40,4 +41,4 @@ export const InvokeQueueBackButton = memo(() => {
   );
 });
 
-InvokeQueueBackButton.displayName = 'InvokeQueueBackButton';
+InvokeButton.displayName = 'InvokeQueueBackButton';