feat(ui): make DeleteBoardModal a singleton

invokeai/frontend/web/src/app/components/App.tsx

@@ -13,6 +13,7 @@ import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal';
 import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageModal';
 import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal';
+import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
 import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast';
 import { ClearQueueConfirmationsAlertDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { StylePresetModal } from 'features/stylePresets/components/StylePresetForm/StylePresetModal';
@@ -139,6 +140,7 @@ const App = ({
       <PreselectedImage selectedImage={selectedImage} />
       <SettingsModal />
       <RefreshAfterResetModal />
+      <DeleteBoardModal />
     </ErrorBoundary>
   );
 };

invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx

@@ -2,27 +2,25 @@ import type { ContextMenuProps } from '@invoke-ai/ui-library';
 import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { $boardToDelete } from 'features/gallery/components/Boards/DeleteBoardModal';
 import { selectAutoAddBoardId, selectAutoAssignBoardOnClick } from 'features/gallery/store/gallerySelectors';
 import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { toast } from 'features/toast/toast';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiArchiveBold, PiArchiveFill, PiDownloadBold, PiPlusBold } from 'react-icons/pi';
+import { PiArchiveBold, PiArchiveFill, PiDownloadBold, PiPlusBold, PiTrashSimpleBold } from 'react-icons/pi';
 import { useUpdateBoardMutation } from 'services/api/endpoints/boards';
 import { useBulkDownloadImagesMutation } from 'services/api/endpoints/images';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 import type { BoardDTO } from 'services/api/types';
 
-import GalleryBoardContextMenuItems from './GalleryBoardContextMenuItems';
-
 type Props = {
   board: BoardDTO;
   children: ContextMenuProps<HTMLDivElement>['children'];
-  setBoardToDelete: (board?: BoardDTO) => void;
 };
 
-const BoardContextMenu = ({ board, setBoardToDelete, children }: Props) => {
+const BoardContextMenu = ({ board, children }: Props) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const autoAssignBoardOnClick = useAppSelector(selectAutoAssignBoardOnClick);
@@ -68,6 +66,10 @@ const BoardContextMenu = ({ board, setBoardToDelete, children }: Props) => {
     });
   }, [board.board_id, updateBoard]);
 
+  const setAsBoardToDelete = useCallback(() => {
+    $boardToDelete.set(board);
+  }, [board]);
+
   const renderMenuFunc = useCallback(
     () => (
       <MenuList visibility="visible">
@@ -95,22 +97,24 @@ const BoardContextMenu = ({ board, setBoardToDelete, children }: Props) => {
             </MenuItem>
           )}
 
-          <GalleryBoardContextMenuItems board={board} setBoardToDelete={setBoardToDelete} />
+          <MenuItem color="error.300" icon={<PiTrashSimpleBold />} onClick={setAsBoardToDelete} isDestructive>
+            {t('boards.deleteBoard')}
+          </MenuItem>
         </MenuGroup>
       </MenuList>
     ),
     [
-      autoAssignBoardOnClick,
-      board,
       boardName,
-      handleBulkDownload,
-      handleSetAutoAdd,
-      isBulkDownloadEnabled,
+      autoAssignBoardOnClick,
       isSelectedForAutoAdd,
-      setBoardToDelete,
+      handleSetAutoAdd,
       t,
-      handleArchive,
+      isBulkDownloadEnabled,
+      handleBulkDownload,
+      board.archived,
       handleUnarchive,
+      handleArchive,
+      setAsBoardToDelete,
     ]
   );
 

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx

@@ -11,7 +11,6 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCaretDownBold } from 'react-icons/pi';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
-import type { BoardDTO } from 'services/api/types';
 
 import AddBoardButton from './AddBoardButton';
 import GalleryBoard from './GalleryBoard';
@@ -19,10 +18,9 @@ import NoBoardBoard from './NoBoardBoard';
 
 type Props = {
   isPrivate: boolean;
-  setBoardToDelete: (board?: BoardDTO) => void;
 };
 
-export const BoardsList = ({ isPrivate, setBoardToDelete }: Props) => {
+export const BoardsList = ({ isPrivate }: Props) => {
   const { t } = useTranslation();
   const selectedBoardId = useAppSelector(selectSelectedBoardId);
   const boardSearchText = useAppSelector(selectBoardSearchText);
@@ -57,17 +55,12 @@ export const BoardsList = ({ isPrivate, setBoardToDelete }: Props) => {
 
     filteredBoards.forEach((board) => {
       elements.push(
-        <GalleryBoard
-          board={board}
-          isSelected={selectedBoardId === board.board_id}
-          setBoardToDelete={setBoardToDelete}
-          key={board.board_id}
-        />
+        <GalleryBoard board={board} isSelected={selectedBoardId === board.board_id} key={board.board_id} />
       );
     });
 
     return elements;
-  }, [allowPrivateBoards, isPrivate, boardSearchText.length, filteredBoards, selectedBoardId, setBoardToDelete]);
+  }, [allowPrivateBoards, isPrivate, boardSearchText.length, filteredBoards, selectedBoardId]);
 
   const boardListTitle = useMemo(() => {
     if (allowPrivateBoards) {

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsListWrapper.tsx

@@ -1,12 +1,10 @@
 import { Box } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
-import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
 import { selectAllowPrivateBoards } from 'features/system/store/configSelectors';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
-import { memo, useState } from 'react';
-import type { BoardDTO } from 'services/api/types';
+import { memo } from 'react';
 
 import { BoardsList } from './BoardsList';
 
@@ -17,20 +15,16 @@ const overlayScrollbarsStyles: CSSProperties = {
 
 const BoardsListWrapper = () => {
   const allowPrivateBoards = useAppSelector(selectAllowPrivateBoards);
-  const [boardToDelete, setBoardToDelete] = useState<BoardDTO>();
 
   return (
-    <>
-      <Box position="relative" w="full" h="full">
-        <Box position="absolute" top={0} right={0} bottom={0} left={0}>
-          <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
-            {allowPrivateBoards && <BoardsList isPrivate={true} setBoardToDelete={setBoardToDelete} />}
-            <BoardsList isPrivate={false} setBoardToDelete={setBoardToDelete} />
-          </OverlayScrollbarsComponent>
-        </Box>
+    <Box position="relative" w="full" h="full">
+      <Box position="absolute" top={0} right={0} bottom={0} left={0}>
+        <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
+          {allowPrivateBoards && <BoardsList isPrivate={true} />}
+          <BoardsList isPrivate={false} />
+        </OverlayScrollbarsComponent>
       </Box>
-      <DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
-    </>
+    </Box>
   );
 };
 export default memo(BoardsListWrapper);

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx

@@ -48,10 +48,9 @@ const _hover: SystemStyleObject = {
 interface GalleryBoardProps {
   board: BoardDTO;
   isSelected: boolean;
-  setBoardToDelete: (board?: BoardDTO) => void;
 }
 
-const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps) => {
+const GalleryBoard = ({ board, isSelected }: GalleryBoardProps) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
@@ -118,7 +117,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
   }, []);
 
   return (
-    <BoardContextMenu board={board} setBoardToDelete={setBoardToDelete}>
+    <BoardContextMenu board={board}>
       {(ref) => (
         <Tooltip label={<BoardTooltip board={board} />} openDelay={1000} placement="left" closeOnScroll p={2}>
           <Flex

invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx

@@ -10,6 +10,7 @@ import {
   Skeleton,
   Text,
 } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
@@ -19,19 +20,17 @@ import { getImageUsage } from 'features/deleteImageModal/store/selectors';
 import type { ImageUsage } from 'features/deleteImageModal/store/types';
 import { selectNodesSlice } from 'features/nodes/store/selectors';
 import { some } from 'lodash-es';
+import { atom } from 'nanostores';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useListAllImageNamesForBoardQuery } from 'services/api/endpoints/boards';
 import { useDeleteBoardAndImagesMutation, useDeleteBoardMutation } from 'services/api/endpoints/images';
 import type { BoardDTO } from 'services/api/types';
 
-type Props = {
-  boardToDelete?: BoardDTO;
-  setBoardToDelete: (board?: BoardDTO) => void;
-};
+export const $boardToDelete = atom<BoardDTO | null>(null);
 
-const DeleteBoardModal = (props: Props) => {
-  const { boardToDelete, setBoardToDelete } = props;
+const DeleteBoardModal = () => {
+  const boardToDelete = useStore($boardToDelete);
   const { t } = useTranslation();
   const { currentData: boardImageNames, isFetching: isFetchingBoardNames } = useListAllImageNamesForBoardQuery(
     boardToDelete?.board_id ?? skipToken
@@ -65,20 +64,20 @@ const DeleteBoardModal = (props: Props) => {
       return;
     }
     deleteBoardOnly(boardToDelete.board_id);
-    setBoardToDelete(undefined);
-  }, [boardToDelete, deleteBoardOnly, setBoardToDelete]);
+    $boardToDelete.set(null);
+  }, [boardToDelete, deleteBoardOnly]);
 
   const handleDeleteBoardAndImages = useCallback(() => {
     if (!boardToDelete) {
       return;
     }
     deleteBoardAndImages(boardToDelete.board_id);
-    setBoardToDelete(undefined);
-  }, [boardToDelete, deleteBoardAndImages, setBoardToDelete]);
+    $boardToDelete.set(null);
+  }, [boardToDelete, deleteBoardAndImages]);
 
   const handleClose = useCallback(() => {
-    setBoardToDelete(undefined);
-  }, [setBoardToDelete]);
+    $boardToDelete.set(null);
+  }, []);
 
   const cancelRef = useRef<HTMLButtonElement>(null);
 

invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx

@@ -1,30 +0,0 @@
-import { MenuItem } from '@invoke-ai/ui-library';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiTrashSimpleBold } from 'react-icons/pi';
-import type { BoardDTO } from 'services/api/types';
-
-type Props = {
-  board: BoardDTO;
-  setBoardToDelete?: (board?: BoardDTO) => void;
-};
-
-const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => {
-  const { t } = useTranslation();
-  const handleDelete = useCallback(() => {
-    if (!setBoardToDelete) {
-      return;
-    }
-    setBoardToDelete(board);
-  }, [board, setBoardToDelete]);
-
-  return (
-    <>
-      <MenuItem color="error.300" icon={<PiTrashSimpleBold />} onClick={handleDelete}>
-        {t('boards.deleteBoard')}
-      </MenuItem>
-    </>
-  );
-};
-
-export default memo(GalleryBoardContextMenuItems);