feat(ui): update queue actions menu (wip)

invokeai/frontend/web/public/locales/en.json

@@ -1674,6 +1674,8 @@
         "negativePrompt": "Negative Prompt",
         "beginEndStepPercentShort": "Begin/End %",
         "weight": "Weight",
+        "newGallerySession": "New Gallery Session",
+        "newCanvasSession": "New Canvas Session",
         "controlMode": {
             "controlMode": "Control Mode",
             "balanced": "Balanced",

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

@@ -1,4 +1,4 @@
-import { IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@invoke-ai/ui-library';
+import { IconButton, Menu, MenuButton, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useClearQueue } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { QueueCountBadge } from 'features/queue/components/QueueCountBadge';
@@ -8,7 +8,16 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiListBold, PiPauseFill, PiPlayFill, PiQueueBold, PiTrashSimpleBold } from 'react-icons/pi';
+import {
+  PiImageBold,
+  PiListBold,
+  PiPaintBrushBold,
+  PiPauseFill,
+  PiPlayFill,
+  PiQueueBold,
+  PiTrashSimpleBold,
+  PiXBold,
+} from 'react-icons/pi';
 
 export const QueueActionsMenuButton = memo(() => {
   const ref = useRef<HTMLDivElement>(null);
@@ -36,39 +45,57 @@ export const QueueActionsMenuButton = memo(() => {
       <Menu placement="bottom-end">
         <MenuButton ref={ref} as={IconButton} size="lg" aria-label="Queue Actions Menu" icon={<PiListBold />} />
         <MenuList>
-          <MenuItem
-            isDestructive
-            icon={<PiTrashSimpleBold />}
-            onClick={clearQueue.openDialog}
-            isLoading={clearQueue.isLoading}
-            isDisabled={clearQueue.isDisabled}
-          >
-            {t('queue.clearTooltip')}
-          </MenuItem>
-          {isResumeEnabled && (
-            <MenuItem
-              icon={<PiPlayFill />}
-              onClick={resumeProcessor}
-              isLoading={isLoadingResumeProcessor}
-              isDisabled={isDisabledResumeProcessor}
-            >
-              {t('queue.resumeTooltip')}
+          <MenuGroup title={t('common.new')}>
+            <MenuItem icon={<PiImageBold />} onClick={resumeProcessor} isLoading={isLoadingResumeProcessor}>
+              {t('controlLayers.newGallerySession')}
             </MenuItem>
-          )}
-          {isPauseEnabled && (
-            <MenuItem
-              icon={<PiPauseFill />}
-              onClick={pauseProcessor}
-              isLoading={isLoadingPauseProcessor}
-              isDisabled={isDisabledPauseProcessor}
-            >
-              {t('queue.pauseTooltip')}
+            <MenuItem icon={<PiPaintBrushBold />} onClick={resumeProcessor} isLoading={isLoadingResumeProcessor}>
+              {t('controlLayers.newCanvasSession')}
             </MenuItem>
-          )}
-          <MenuDivider />
-          <MenuItem icon={<PiQueueBold />} onClick={openQueue}>
-            {t('queue.openQueue')}
-          </MenuItem>
+          </MenuGroup>
+          <MenuGroup title={t('queue.queue')}>
+            <MenuItem
+              isDestructive
+              icon={<PiXBold />}
+              onClick={clearQueue.openDialog}
+              isLoading={clearQueue.isLoading}
+              isDisabled={clearQueue.isDisabled}
+            >
+              {t('queue.cancelTooltip')}
+            </MenuItem>
+            <MenuItem
+              isDestructive
+              icon={<PiTrashSimpleBold />}
+              onClick={clearQueue.openDialog}
+              isLoading={clearQueue.isLoading}
+              isDisabled={clearQueue.isDisabled}
+            >
+              {t('queue.clearTooltip')}
+            </MenuItem>
+            {isResumeEnabled && (
+              <MenuItem
+                icon={<PiPlayFill />}
+                onClick={resumeProcessor}
+                isLoading={isLoadingResumeProcessor}
+                isDisabled={isDisabledResumeProcessor}
+              >
+                {t('queue.resumeTooltip')}
+              </MenuItem>
+            )}
+            {isPauseEnabled && (
+              <MenuItem
+                icon={<PiPauseFill />}
+                onClick={pauseProcessor}
+                isLoading={isLoadingPauseProcessor}
+                isDisabled={isDisabledPauseProcessor}
+              >
+                {t('queue.pauseTooltip')}
+              </MenuItem>
+            )}
+            <MenuItem icon={<PiQueueBold />} onClick={openQueue}>
+              {t('queue.openQueue')}
+            </MenuItem>
+          </MenuGroup>
         </MenuList>
       </Menu>
       {/* The badge is dynamically positioned, needs a ref to the target element */}