diff --git a/invokeai/frontend/web/src/app/hooks/useHandleStudioDestination.ts b/invokeai/frontend/web/src/app/hooks/useHandleStudioDestination.ts
index 47c5afd24a..76ddd70425 100644
--- a/invokeai/frontend/web/src/app/hooks/useHandleStudioDestination.ts
+++ b/invokeai/frontend/web/src/app/hooks/useHandleStudioDestination.ts
@@ -3,7 +3,7 @@ import { settingsSendToCanvasChanged } from 'features/controlLayers/store/canvas
import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
import { $isMenuOpen } from 'features/stylePresets/store/isMenuOpen';
import { setActiveTab } from 'features/ui/store/uiSlice';
-import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { useWorkflowLibraryModal } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
import { useCallback } from 'react';
export type StudioDestination =
@@ -18,6 +18,8 @@ export const useHandleStudioDestination = () => {
const dispatch = useAppDispatch();
const imageViewer = useImageViewer();
+ const workflowLibraryModal = useWorkflowLibraryModal();
+
const handleStudioDestination = useCallback(
(destination: StudioDestination) => {
switch (destination) {
@@ -39,7 +41,7 @@ export const useHandleStudioDestination = () => {
break;
case 'viewAllWorkflows':
dispatch(setActiveTab('workflows'));
- $isWorkflowLibraryModalOpen.set(true);
+ workflowLibraryModal.setFalse();
break;
case 'viewAllStylePresets':
dispatch(setActiveTab('canvas'));
@@ -50,7 +52,7 @@ export const useHandleStudioDestination = () => {
break;
}
},
- [dispatch, imageViewer]
+ [dispatch, imageViewer, workflowLibraryModal]
);
return handleStudioDestination;
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/UploadWorkflowButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/UploadWorkflowButton.tsx
index 5c42d028be..d6dcb1eafb 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/UploadWorkflowButton.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/UploadWorkflowButton.tsx
@@ -1,6 +1,6 @@
import { Button } from '@invoke-ai/ui-library';
import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadWorkflowFromFile';
-import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { useWorkflowLibraryModal } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
import { memo, useCallback, useRef } from 'react';
import { useDropzone } from 'react-dropzone';
import { useTranslation } from 'react-i18next';
@@ -9,11 +9,9 @@ import { PiUploadSimpleBold } from 'react-icons/pi';
const UploadWorkflowButton = () => {
const { t } = useTranslation();
const resetRef = useRef<() => void>(null);
- const onClose = useCallback(() => {
- $isWorkflowLibraryModalOpen.set(false);
- }, []);
+ const workflowLibraryModal = useWorkflowLibraryModal();
- const loadWorkflowFromFile = useLoadWorkflowFromFile({ resetRef, onSuccess: onClose });
+ const loadWorkflowFromFile = useLoadWorkflowFromFile({ resetRef, onSuccess: workflowLibraryModal.setFalse });
const onDropAccepted = useCallback(
(files: File[]) => {
if (!files[0]) {
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
index ccbbd19a03..dcc347f905 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
@@ -1,6 +1,6 @@
import { IconButton } from '@invoke-ai/ui-library';
-import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
-import { memo, useCallback } from 'react';
+import { useWorkflowLibraryModal } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiFolderOpenBold } from 'react-icons/pi';
@@ -9,9 +9,7 @@ import WorkflowLibraryModal from './WorkflowLibraryModal';
const WorkflowLibraryButton = () => {
const { t } = useTranslation();
- const onClick = useCallback(() => {
- $isWorkflowLibraryModalOpen.set(true);
- }, []);
+ const workflowLibraryModal = useWorkflowLibraryModal();
return (
<>
@@ -19,7 +17,7 @@ const WorkflowLibraryButton = () => {
aria-label={t('workflows.workflowLibrary')}
tooltip={t('workflows.workflowLibrary')}
icon={}
- onClick={onClick}
+ onClick={workflowLibraryModal.setTrue}
pointerEvents="auto"
/>
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
index 027b2d445b..1af42ea73f 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
@@ -5,7 +5,7 @@ import dateFormat, { masks } from 'dateformat';
import { selectWorkflowId } from 'features/nodes/store/workflowSlice';
import { useDeleteLibraryWorkflow } from 'features/workflowLibrary/hooks/useDeleteLibraryWorkflow';
import { useGetAndLoadLibraryWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow';
-import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { useWorkflowLibraryModal } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import type { WorkflowRecordListItemDTO } from 'services/api/types';
@@ -17,11 +17,12 @@ type Props = {
const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
const { t } = useTranslation();
const workflowId = useAppSelector(selectWorkflowId);
- const onClose = useCallback(() => {
- $isWorkflowLibraryModalOpen.set(false);
- }, []);
+ const workflowLibraryModal = useWorkflowLibraryModal();
+
const { deleteWorkflow, deleteWorkflowResult } = useDeleteLibraryWorkflow(EMPTY_OBJECT);
- const { getAndLoadWorkflow, getAndLoadWorkflowResult } = useGetAndLoadLibraryWorkflow({ onSuccess: onClose });
+ const { getAndLoadWorkflow, getAndLoadWorkflowResult } = useGetAndLoadLibraryWorkflow({
+ onSuccess: workflowLibraryModal.setFalse,
+ });
const handleDeleteWorkflow = useCallback(() => {
deleteWorkflow(workflowDTO.workflow_id);
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
index 16aeb69353..4ef806204e 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
@@ -7,22 +7,17 @@ import {
ModalHeader,
ModalOverlay,
} from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
import WorkflowLibraryContent from 'features/workflowLibrary/components/WorkflowLibraryContent';
-import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
-import { memo, useCallback } from 'react';
+import { useWorkflowLibraryModal } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const WorkflowLibraryModal = () => {
const { t } = useTranslation();
- const isWorkflowLibraryModalOpen = useStore($isWorkflowLibraryModalOpen);
-
- const onClose = useCallback(() => {
- $isWorkflowLibraryModalOpen.set(false);
- }, []);
+ const workflowLibraryModal = useWorkflowLibraryModal();
return (
-
+
{t('workflows.workflowLibrary')}
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/store/isWorkflowLibraryModalOpen.ts b/invokeai/frontend/web/src/features/workflowLibrary/store/isWorkflowLibraryModalOpen.ts
index ea0d2487f4..da49523760 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/store/isWorkflowLibraryModalOpen.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/store/isWorkflowLibraryModalOpen.ts
@@ -1,6 +1,3 @@
-import { atom } from 'nanostores';
+import { buildUseBoolean } from 'common/hooks/useBoolean';
-/**
- * Tracks whether or not the workflow library modal is open.
- */
-export const $isWorkflowLibraryModalOpen = atom(false);
+export const [useWorkflowLibraryModal] = buildUseBoolean(false);