feat(ui): change reset canvas button to new session menu

Author: psychedelicious

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

@@ -1676,7 +1676,7 @@
         "mergingLayers": "Merging layers",
         "clearHistory": "Clear History",
         "bboxOverlay": "Show Bbox Overlay",
-        "resetCanvas": "Reset Canvas",
+        "newSession": "New Session",
         "clearCaches": "Clear Caches",
         "recalculateRects": "Recalculate Rects",
         "clipToBbox": "Clip Strokes to Bbox",

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx

@@ -4,8 +4,8 @@ import { CanvasSettingsPopover } from 'features/controlLayers/components/Setting
 import { ToolColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
 import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings';
 import { CanvasToolbarFitBboxToLayersButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton';
+import { CanvasToolbarNewSessionMenuButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarNewSessionMenuButton';
 import { CanvasToolbarRedoButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarRedoButton';
-import { CanvasToolbarResetCanvasButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton';
 import { CanvasToolbarResetViewButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton';
 import { CanvasToolbarSaveToGalleryButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton';
 import { CanvasToolbarScale } from 'features/controlLayers/components/Toolbar/CanvasToolbarScale';
@@ -43,7 +43,7 @@ export const CanvasToolbar = memo(() => {
         <CanvasToolbarSaveToGalleryButton />
         <CanvasToolbarUndoButton />
         <CanvasToolbarRedoButton />
-        <CanvasToolbarResetCanvasButton />
+        <CanvasToolbarNewSessionMenuButton />
         <CanvasSettingsPopover />
       </Flex>
     </Flex>

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarNewSessionMenuButton.tsx

@@ -0,0 +1,35 @@
+import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
+import {
+  useNewCanvasSession,
+  useNewGallerySession,
+} from 'features/controlLayers/components/NewSessionConfirmationAlertDialog';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiFilePlusBold, PiImageBold, PiPaintBrushBold } from 'react-icons/pi';
+
+export const CanvasToolbarNewSessionMenuButton = memo(() => {
+  const { t } = useTranslation();
+  const { newGallerySessionWithDialog } = useNewGallerySession();
+  const { newCanvasSessionWithDialog } = useNewCanvasSession();
+  return (
+    <Menu placement="bottom-end">
+      <MenuButton
+        as={IconButton}
+        aria-label={t('controlLayers.newSession')}
+        icon={<PiFilePlusBold />}
+        variant="link"
+        alignSelf="stretch"
+      />
+      <MenuList>
+        <MenuItem icon={<PiImageBold />} onClick={newGallerySessionWithDialog}>
+          {t('controlLayers.newGallerySession')}
+        </MenuItem>
+        <MenuItem icon={<PiPaintBrushBold />} onClick={newCanvasSessionWithDialog}>
+          {t('controlLayers.newCanvasSession')}
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  );
+});
+
+CanvasToolbarNewSessionMenuButton.displayName = 'CanvasToolbarNewSessionMenuButton';