add board dropdown to use instead of whichever board theyre viewing

invokeai/frontend/web/src/features/parameters/components/BoardSelect.tsx

@@ -0,0 +1,55 @@
+import { Flex, Text, Box } from '@chakra-ui/react';
+import IAIMantineSelect from '../../../common/components/IAIMantineSelect';
+import { useCallback } from 'react';
+import { useAppDispatch, useAppSelector } from '../../../app/store/storeHooks';
+import { useListAllBoardsQuery } from '../../../services/api/endpoints/boards';
+import { setBoardIdToAddTo } from '../../system/store/systemSlice';
+import { RootState } from '../../../app/store/store';
+
+const BoardSelect = () => {
+  const { data: boards, isFetching } = useListAllBoardsQuery();
+  const dispatch = useAppDispatch();
+
+  const boardIdToAddTo = useAppSelector(
+    (state: RootState) => state.system.boardIdToAddTo
+  );
+
+  const handleChange = useCallback(
+    (v: string | '') => {
+      if (v === '') {
+        dispatch(setBoardIdToAddTo(undefined));
+      } else {
+        dispatch(setBoardIdToAddTo(v));
+      }
+    },
+    [dispatch]
+  );
+
+  return (
+    <Flex gap={2} alignItems="center">
+      <Box>
+        <Text
+          sx={{
+            color: 'base.400',
+            fontSize: 'sm',
+          }}
+        >
+          Add to board:
+        </Text>
+      </Box>
+      <IAIMantineSelect
+        style={{ flexGrow: 1 }}
+        clearable={true}
+        placeholder="None"
+        onChange={handleChange}
+        value={boardIdToAddTo}
+        data={(boards ?? []).map((board) => ({
+          label: board.board_name,
+          value: board.board_id,
+        }))}
+      />
+    </Flex>
+  );
+};
+
+export default BoardSelect;

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -219,6 +219,9 @@ export const systemSlice = createSlice({
     progressImageSet(state, action: PayloadAction<ProgressImage | null>) {
       state.progressImage = action.payload;
     },
+    setBoardIdToAddTo(state, action: PayloadAction<string | undefined>) {
+      state.boardIdToAddTo = action.payload;
+    },
   },
   extraReducers(builder) {
     /**
@@ -226,7 +229,7 @@ export const systemSlice = createSlice({
      */
     builder.addCase(appSocketSubscribed, (state, action) => {
       state.sessionId = action.payload.sessionId;
-      state.boardIdToAddTo = action.payload.boardId;
+      // state.boardIdToAddTo = action.payload.boardId;
       state.canceledSession = '';
     });
 
@@ -235,7 +238,7 @@ export const systemSlice = createSlice({
      */
     builder.addCase(appSocketUnsubscribed, (state) => {
       state.sessionId = null;
-      state.boardIdToAddTo = undefined;
+      // state.boardIdToAddTo = undefined;
     });
 
     /**
@@ -451,6 +454,7 @@ export const {
   shouldAntialiasProgressImageChanged,
   languageChanged,
   progressImageSet,
+  setBoardIdToAddTo,
 } = systemSlice.actions;
 
 export default systemSlice.reducer;

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx

@@ -11,12 +11,14 @@ import ParamVariationCollapse from 'features/parameters/components/Parameters/Va
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import { memo } from 'react';
 import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
+import BoardSelect from '../../../../parameters/components/BoardSelect';
 
 const ImageToImageTabParameters = () => {
   return (
     <>
       <ParamPositiveConditioning />
       <ParamNegativeConditioning />
+      <BoardSelect />
       <ProcessButtons />
       <ImageToImageTabCoreParameters />
       <ParamLoraCollapse />

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx

@@ -12,12 +12,14 @@ import ParamVariationCollapse from 'features/parameters/components/Parameters/Va
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import { memo } from 'react';
 import TextToImageTabCoreParameters from './TextToImageTabCoreParameters';
+import BoardSelect from '../../../../parameters/components/BoardSelect';
 
 const TextToImageTabParameters = () => {
   return (
     <>
       <ParamPositiveConditioning />
       <ParamNegativeConditioning />
+      <BoardSelect />
       <ProcessButtons />
       <TextToImageTabCoreParameters />
       <ParamLoraCollapse />