diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/UploadWorkflowButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/UploadWorkflowButton.tsx
index 17f2b52825..5c42d028be 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 { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadWorkflowFromFile';
+import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
import { memo, useCallback, useRef } from 'react';
import { useDropzone } from 'react-dropzone';
import { useTranslation } from 'react-i18next';
@@ -9,9 +9,11 @@ import { PiUploadSimpleBold } from 'react-icons/pi';
const UploadWorkflowButton = () => {
const { t } = useTranslation();
const resetRef = useRef<() => void>(null);
- const { onClose } = useWorkflowLibraryModalContext();
- const loadWorkflowFromFile = useLoadWorkflowFromFile({ resetRef, onSuccess: onClose });
+ const onClose = useCallback(() => {
+ $isWorkflowLibraryModalOpen.set(false);
+ }, []);
+ const loadWorkflowFromFile = useLoadWorkflowFromFile({ resetRef, onSuccess: onClose });
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 09a484f1e5..ccbbd19a03 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, useDisclosure } from '@invoke-ai/ui-library';
-import { WorkflowLibraryModalContext } from 'features/workflowLibrary/context/WorkflowLibraryModalContext';
-import { memo } from 'react';
+import { IconButton } from '@invoke-ai/ui-library';
+import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiFolderOpenBold } from 'react-icons/pi';
@@ -8,19 +8,22 @@ import WorkflowLibraryModal from './WorkflowLibraryModal';
const WorkflowLibraryButton = () => {
const { t } = useTranslation();
- const disclosure = useDisclosure();
+
+ const onClick = useCallback(() => {
+ $isWorkflowLibraryModalOpen.set(true);
+ }, []);
return (
-
+ <>
}
- onClick={disclosure.onOpen}
+ onClick={onClick}
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 fcb63f07ae..027b2d445b 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
@@ -3,9 +3,9 @@ import { EMPTY_OBJECT } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks';
import dateFormat, { masks } from 'dateformat';
import { selectWorkflowId } from 'features/nodes/store/workflowSlice';
-import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
import { useDeleteLibraryWorkflow } from 'features/workflowLibrary/hooks/useDeleteLibraryWorkflow';
import { useGetAndLoadLibraryWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow';
+import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import type { WorkflowRecordListItemDTO } from 'services/api/types';
@@ -17,7 +17,9 @@ type Props = {
const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
const { t } = useTranslation();
const workflowId = useAppSelector(selectWorkflowId);
- const { onClose } = useWorkflowLibraryModalContext();
+ const onClose = useCallback(() => {
+ $isWorkflowLibraryModalOpen.set(false);
+ }, []);
const { deleteWorkflow, deleteWorkflowResult } = useDeleteLibraryWorkflow(EMPTY_OBJECT);
const { getAndLoadWorkflow, getAndLoadWorkflowResult } = useGetAndLoadLibraryWorkflow({ onSuccess: onClose });
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
index ca3148d9cb..16aeb69353 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
@@ -7,16 +7,22 @@ import {
ModalHeader,
ModalOverlay,
} from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
import WorkflowLibraryContent from 'features/workflowLibrary/components/WorkflowLibraryContent';
-import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
-import { memo } from 'react';
+import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const WorkflowLibraryModal = () => {
const { t } = useTranslation();
- const { isOpen, onClose } = useWorkflowLibraryModalContext();
+ const isWorkflowLibraryModalOpen = useStore($isWorkflowLibraryModalOpen);
+
+ const onClose = useCallback(() => {
+ $isWorkflowLibraryModalOpen.set(false);
+ }, []);
+
return (
-
+
{t('workflows.workflowLibrary')}
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts b/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts
deleted file mode 100644
index 1da2fbee9c..0000000000
--- a/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import type { UseDisclosureReturn } from '@invoke-ai/ui-library';
-import { createContext } from 'react';
-
-export const WorkflowLibraryModalContext = createContext(null);
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/context/useWorkflowLibraryModalContext.ts b/invokeai/frontend/web/src/features/workflowLibrary/context/useWorkflowLibraryModalContext.ts
deleted file mode 100644
index 27987834c8..0000000000
--- a/invokeai/frontend/web/src/features/workflowLibrary/context/useWorkflowLibraryModalContext.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { WorkflowLibraryModalContext } from 'features/workflowLibrary/context/WorkflowLibraryModalContext';
-import { useContext } from 'react';
-
-export const useWorkflowLibraryModalContext = () => {
- const context = useContext(WorkflowLibraryModalContext);
- if (!context) {
- throw new Error('useWorkflowLibraryContext must be used within a WorkflowLibraryContext.Provider');
- }
- return context;
-};
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/store/isWorkflowLibraryModalOpen.ts b/invokeai/frontend/web/src/features/workflowLibrary/store/isWorkflowLibraryModalOpen.ts
new file mode 100644
index 0000000000..ea0d2487f4
--- /dev/null
+++ b/invokeai/frontend/web/src/features/workflowLibrary/store/isWorkflowLibraryModalOpen.ts
@@ -0,0 +1,6 @@
+import { atom } from 'nanostores';
+
+/**
+ * Tracks whether or not the workflow library modal is open.
+ */
+export const $isWorkflowLibraryModalOpen = atom(false);