feat(ui): add new workflow button to library menu

Author: psychedelicious

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>

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';