From 82f645c7a1226549a2c65200acee68c987d5121a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 28 Feb 2025 14:46:03 +1000
Subject: [PATCH] feat(ui): add new workflow button to library menu

---
 .../WorkflowListMenuTrigger.tsx               |  2 ++
 .../components/NewWorkflowButton.tsx          | 33 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowButton.tsx

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListMenuTrigger.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListMenuTrigger.tsx
index 5e851242c36..c2fe14669f4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListMenuTrigger.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListMenuTrigger.tsx
@@ -15,6 +15,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { useWorkflowListMenu } from 'features/nodes/store/workflowListMenu';
 import { selectWorkflowName } from 'features/nodes/store/workflowSlice';
+import { NewWorkflowButton } from 'features/workflowLibrary/components/NewWorkflowButton';
 import UploadWorkflowButton from 'features/workflowLibrary/components/UploadWorkflowButton';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -63,6 +64,7 @@ export const WorkflowListMenuTrigger = () => {
                 <WorkflowSearch searchInputRef={searchInputRef} />
                 <WorkflowSortControl />
                 <UploadWorkflowButton />
+                <NewWorkflowButton />
               </Flex>
               <Box position="relative" w="full" h="full">
                 <ScrollableContent>
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowButton.tsx
new file mode 100644
index 00000000000..e51ff78eb29
--- /dev/null
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowButton.tsx
@@ -0,0 +1,33 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useNewWorkflow } from 'features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog';
+import type { MouseEvent } from 'react';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiFilePlusBold } from 'react-icons/pi';
+
+export const NewWorkflowButton = memo(() => {
+  const newWorkflow = useNewWorkflow();
+
+  const { t } = useTranslation();
+
+  const onClickNewWorkflow = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      // We need to stop the event from propagating to the parent element, else the click will open the list menu
+      e.stopPropagation();
+      newWorkflow.createWithDialog();
+    },
+    [newWorkflow]
+  );
+
+  return (
+    <IconButton
+      onClick={onClickNewWorkflow}
+      variant="ghost"
+      aria-label={t('nodes.newWorkflow')}
+      tooltip={t('nodes.newWorkflow')}
+      icon={<PiFilePlusBold />}
+    />
+  );
+});
+
+NewWorkflowButton.displayName = 'NewWorkflowButton';