add listener to update selection list with change in star status

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -80,6 +80,8 @@ import { addUserInvokedCanvasListener } from './listeners/userInvokedCanvas';
 import { addUserInvokedImageToImageListener } from './listeners/userInvokedImageToImage';
 import { addUserInvokedNodesListener } from './listeners/userInvokedNodes';
 import { addUserInvokedTextToImageListener } from './listeners/userInvokedTextToImage';
+import { addImagesStarredListener } from './listeners/imagesStarred';
+import { addImagesUnstarredListener } from './listeners/imagesUnstarred';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -121,6 +123,10 @@ addImageDeletedRejectedListener();
 addDeleteBoardAndImagesFulfilledListener();
 addImageToDeleteSelectedListener();
 
+// Image starred
+addImagesStarredListener();
+addImagesUnstarredListener();
+
 // User Invoked
 addUserInvokedCanvasListener();
 addUserInvokedNodesListener();

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imagesStarred.ts

@@ -0,0 +1,30 @@
+import { imagesApi } from 'services/api/endpoints/images';
+import { startAppListening } from '..';
+import { selectionChanged } from '../../../../../features/gallery/store/gallerySlice';
+import { ImageDTO } from '../../../../../services/api/types';
+
+export const addImagesStarredListener = () => {
+  startAppListening({
+    matcher: imagesApi.endpoints.starImages.matchFulfilled,
+    effect: async (action, { dispatch, getState }) => {
+      const { images: starredImages } = action.payload;
+
+      const state = getState();
+
+      const { selection } = state.gallery;
+      const updatedSelection: ImageDTO[] = [];
+
+      selection.forEach((selectedImageDTO) => {
+        if (starredImages.includes(selectedImageDTO.image_name)) {
+          updatedSelection.push({
+            ...selectedImageDTO,
+            starred: true,
+          });
+        } else {
+          updatedSelection.push(selectedImageDTO);
+        }
+      });
+      dispatch(selectionChanged(updatedSelection));
+    },
+  });
+};

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imagesUnstarred.ts

@@ -0,0 +1,30 @@
+import { imagesApi } from 'services/api/endpoints/images';
+import { startAppListening } from '..';
+import { selectionChanged } from '../../../../../features/gallery/store/gallerySlice';
+import { ImageDTO } from '../../../../../services/api/types';
+
+export const addImagesUnstarredListener = () => {
+  startAppListening({
+    matcher: imagesApi.endpoints.unstarImages.matchFulfilled,
+    effect: async (action, { dispatch, getState }) => {
+      const { images: unstarredImages } = action.payload;
+
+      const state = getState();
+
+      const { selection } = state.gallery;
+      const updatedSelection: ImageDTO[] = [];
+
+      selection.forEach((selectedImageDTO) => {
+        if (unstarredImages.includes(selectedImageDTO.image_name)) {
+          updatedSelection.push({
+            ...selectedImageDTO,
+            starred: false,
+          });
+        } else {
+          updatedSelection.push(selectedImageDTO);
+        }
+      });
+      dispatch(selectionChanged(updatedSelection));
+    },
+  });
+};

invokeai/frontend/web/src/services/api/endpoints/images.ts

@@ -391,7 +391,7 @@ export const imagesApi = api.injectEndpoints({
      * Star a list of images.
      */
     starImages: build.mutation<
-      void,
+      { images: string[] },
       { images: ImageDTO[] }
     >({
       query: ({ images }) => ({
@@ -498,7 +498,7 @@ export const imagesApi = api.injectEndpoints({
      * Unstar a list of images.
      */
     unstarImages: build.mutation<
-      void,
+      { images: string[] },
       { images: ImageDTO[] }
     >({
       query: ({ images }) => ({