QoL: Persist selected board and most recent image across browser sessions (invoke-ai#8920)

* Persist selected board and auto-select most recent image across browser sessions (#92)

* Persist selectedBoardId across browser sessions

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

* fix(frontend): make appStarted listener async so image auto-selection works on startup

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

* chore(frontend): remove unwanted package-lock.json

---------

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

Author: lstein

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

@@ -12,27 +12,12 @@ export const appStarted = createAction('app/appStarted');
 export const addAppStartedListener = (startAppListening: AppStartListening) => {
   startAppListening({
     actionCreator: appStarted,
-    effect: (action, { unsubscribe, cancelActiveListeners, take, getState, dispatch }) => {
+    effect: async (action, { unsubscribe, cancelActiveListeners, take, getState, dispatch }) => {
       // this should only run once
       cancelActiveListeners();
       unsubscribe();
 
-      // ensure an image is selected when we load the first board
-      take(imagesApi.endpoints.getImageNames.matchFulfilled).then((firstImageLoad) => {
-        if (firstImageLoad === null) {
-          // timeout or cancelled
-          return;
-        }
-        const [{ payload }] = firstImageLoad;
-        const selectedImage = selectLastSelectedItem(getState());
-        if (selectedImage) {
-          return;
-        }
-        if (payload.image_names[0]) {
-          dispatch(imageSelected(payload.image_names[0]));
-        }
-      });
-
+      // Fire patchmatch check without blocking the image-selection logic below
       dispatch(appInfoApi.endpoints.getPatchmatchStatus.initiate())
         .unwrap()
         .then((isPatchmatchAvailable) => {
@@ -43,6 +28,24 @@ export const addAppStartedListener = (startAppListening: AppStartListening) => {
           }
         })
         .catch(noop);
+
+      // ensure an image is selected when we load the first board.
+      // The effect must be async and await take() so that RTK keeps the listener's AbortController
+      // alive until the query resolves; a synchronous effect causes the controller to be aborted
+      // immediately after the effect returns, before any network response arrives.
+      const firstImageLoad = await take(imagesApi.endpoints.getImageNames.matchFulfilled, 5000);
+      if (firstImageLoad === null) {
+        // timeout or cancelled
+        return;
+      }
+      const [{ payload }] = firstImageLoad;
+      const selectedImage = selectLastSelectedItem(getState());
+      if (selectedImage) {
+        return;
+      }
+      if (payload.image_names[0]) {
+        dispatch(imageSelected(payload.image_names[0]));
+      }
     },
   });
 };

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -191,6 +191,6 @@ export const gallerySliceConfig: SliceConfig<typeof slice> = {
       }
       return zGalleryState.parse(state);
     },
-    persistDenylist: ['selection', 'selectedBoardId', 'galleryView', 'imageToCompare'],
+    persistDenylist: ['selection', 'galleryView', 'imageToCompare'],
   },
 };