feat(ui): reorg workflow menu buttons

invoke-ai · Feb 28, 2025 · cc36cfb · cc36cfb
1 parent ded8a84
commit cc36cfb
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 64 deletions.
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
@@ -1,16 +1,21 @@
-import { Flex, Spacer } from '@invoke-ai/ui-library';
+import { Flex, IconButton, Spacer } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import AddNodeButton from 'features/nodes/components/flow/panels/TopPanel/AddNodeButton';
 import ClearFlowButton from 'features/nodes/components/flow/panels/TopPanel/ClearFlowButton';
 import SaveWorkflowButton from 'features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton';
 import UpdateNodesButton from 'features/nodes/components/flow/panels/TopPanel/UpdateNodesButton';
+import { useWorkflowEditorSettingsModal } from 'features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings';
 import { WorkflowName } from 'features/nodes/components/sidePanel/WorkflowName';
 import { selectWorkflowName } from 'features/nodes/store/workflowSlice';
-import WorkflowLibraryMenu from 'features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiGearSixFill } from 'react-icons/pi';
 
 const TopCenterPanel = () => {
   const name = useAppSelector(selectWorkflowName);
+  const modal = useWorkflowEditorSettingsModal();
+
+  const { t } = useTranslation();
   return (
     <Flex gap={2} top={2} left={2} right={2} position="absolute" alignItems="flex-start" pointerEvents="none">
       <Flex gap="2">
@@ -22,7 +27,12 @@ const TopCenterPanel = () => {
       <Spacer />
       <ClearFlowButton />
       <SaveWorkflowButton />
-      <WorkflowLibraryMenu />
+      <IconButton
+        pointerEvents="auto"
+        aria-label={t('workflows.workflowEditorMenu')}
+        icon={<PiGearSixFill />}
+        onClick={modal.setTrue}
+      />
     </Flex>
   );
 };

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NewWorkflowButton.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NewWorkflowButton.tsx
diff --git a/...src/features/nodes/components/sidePanel/WorkflowListMenu/ActiveWorkflowNameAndActions.tsx b/...src/features/nodes/components/sidePanel/WorkflowListMenu/ActiveWorkflowNameAndActions.tsx
@@ -1,9 +1,9 @@
 import { Flex, Spacer } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { NewWorkflowButton } from 'features/nodes/components/sidePanel/NewWorkflowButton';
 import { WorkflowListMenuTrigger } from 'features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListMenuTrigger';
 import { WorkflowViewEditToggleButton } from 'features/nodes/components/sidePanel/WorkflowViewEditToggleButton';
 import { selectWorkflowMode } from 'features/nodes/store/workflowSlice';
+import { WorkflowLibraryMenu } from 'features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu';
 import { memo } from 'react';
 
 import SaveWorkflowButton from './SaveWorkflowButton';
@@ -17,7 +17,7 @@ export const ActiveWorkflowNameAndActions = memo(() => {
       <Spacer />
       {mode === 'edit' && <SaveWorkflowButton />}
       <WorkflowViewEditToggleButton />
-      <NewWorkflowButton />
+      <WorkflowLibraryMenu />
     </Flex>
   );
 });

diff --git a/...tend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem.tsx b/...tend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem.tsx
diff --git a/...d/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx b/...d/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx
@@ -13,13 +13,12 @@ import LoadWorkflowFromGraphMenuItem from 'features/workflowLibrary/components/W
 import { NewWorkflowMenuItem } from 'features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem';
 import SaveWorkflowAsMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem';
 import SaveWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem';
-import SettingsMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem';
 import UploadWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/UploadWorkflowMenuItem';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiDotsThreeOutlineFill } from 'react-icons/pi';
 
-const WorkflowLibraryMenu = () => {
+export const WorkflowLibraryMenu = memo(() => {
   const { t } = useTranslation();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const shift = useShiftModifier();
@@ -31,6 +30,8 @@ const WorkflowLibraryMenu = () => {
         aria-label={t('workflows.workflowEditorMenu')}
         icon={<PiDotsThreeOutlineFill />}
         pointerEvents="auto"
+        size="sm"
+        variant="ghost"
       />
       <MenuList pointerEvents="auto">
         <NewWorkflowMenuItem />
@@ -39,13 +40,10 @@ const WorkflowLibraryMenu = () => {
         <SaveWorkflowMenuItem />
         <SaveWorkflowAsMenuItem />
         <DownloadWorkflowMenuItem />
-        <MenuDivider />
-        <SettingsMenuItem />
         {shift && <MenuDivider />}
         {shift && <LoadWorkflowFromGraphMenuItem />}
       </MenuList>
     </Menu>
   );
-};
-
-export default memo(WorkflowLibraryMenu);
+});
+WorkflowLibraryMenu.displayName = 'WorkflowLibraryMenu';