From b793328edddc40b67e37fe23606c8760fa46c8a1 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 30 Sep 2024 20:15:53 +1000
Subject: [PATCH] feat(ui): update queue actions menu (wip)

---
 invokeai/frontend/web/public/locales/en.json  |  2 +
 .../controlLayers/hooks/newSession.ts         |  0
 .../components/QueueActionsMenuButton.tsx     | 93 ++++++++++++-------
 3 files changed, 62 insertions(+), 33 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/hooks/newSession.ts

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index adf7b7f99a..64bb99696c 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/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",
diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/newSession.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/newSession.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx b/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
index a1f9777ef9..35d17454b2 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
+++ b/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 */}