ft

web/apps/photos/src/components/PhotoFrame.tsx

@@ -76,13 +76,13 @@ export interface PhotoFrameProps {
      */
     favoriteFileIDs?: Set<number>;
     /**
-     * Callback to invoke when the in-memory favorite status of a file is
-     * changed. For more details, see {@link unsyncedFavoriteUpdates} in the
-     * gallery reducer's documentation.
+     * Callback to invoke when the in-memory, unsynced, favorite status of a
+     * file is changed. For more details, see {@link unsyncedFavoriteUpdates} in
+     * the gallery reducer's documentation.
      *
      * Not set in the context of the shared albums app.
      */
-    addUnsyncedFavoriteUpdate?: (fileID: number, isFavorite: boolean) => void;
+    markUnsyncedFavoriteUpdate?: (fileID: number, isFavorite: boolean) => void;
     markTempDeleted?: (tempDeletedFiles: EnteFile[]) => void;
     /** This will be set if mode is not "people". */
     activeCollectionID: number;
@@ -107,7 +107,7 @@ const PhotoFrame = ({
     setSelected,
     selected,
     favoriteFileIDs,
-    addUnsyncedFavoriteUpdate,
+    markUnsyncedFavoriteUpdate,
     markTempDeleted,
     activeCollectionID,
     activePersonID,
@@ -509,7 +509,7 @@ const PhotoFrame = ({
                     setFilesDownloadProgressAttributesCreator
                 }
                 onSelectPerson={onSelectPerson}
-                {...{ favoriteFileIDs, addUnsyncedFavoriteUpdate }}
+                {...{ favoriteFileIDs, markUnsyncedFavoriteUpdate }}
             />
         </Container>
     );

web/apps/photos/src/components/PhotoViewer/index.tsx

@@ -116,7 +116,7 @@ const CaptionContainer = styled("div")(({ theme }) => ({
 
 export type PhotoViewerProps = Pick<
     PhotoFrameProps,
-    "favoriteFileIDs" | "addUnsyncedFavoriteUpdate"
+    "favoriteFileIDs" | "markUnsyncedFavoriteUpdate"
 > & {
     isOpen: boolean;
     items: any[];
@@ -136,8 +136,12 @@ export type PhotoViewerProps = Pick<
 };
 
 function PhotoViewer(props: PhotoViewerProps) {
-    const { id, forceConvertItem, favoriteFileIDs, addUnsyncedFavoriteUpdate } =
-        props;
+    const {
+        id,
+        forceConvertItem,
+        favoriteFileIDs,
+        markUnsyncedFavoriteUpdate,
+    } = props;
 
     const galleryContext = useContext(GalleryContext);
     const { showLoadingBar, hideLoadingBar, showMiniDialog } =
@@ -523,16 +527,16 @@ function PhotoViewer(props: PhotoViewerProps) {
             // Whe get here when we're showing the favorites scaffolding, and so
             // we can assert the presence of the favoriteFileIDs.
             if (favoriteFileIDs!.has(file.id)) {
-                addUnsyncedFavoriteUpdate(file.id, true);
+                markUnsyncedFavoriteUpdate(file.id, true);
                 void addToFavorites(file).catch((e: unknown) => {
                     log.error("Failed to add favorite", e);
-                    addUnsyncedFavoriteUpdate(file.id, undefined);
+                    markUnsyncedFavoriteUpdate(file.id, undefined);
                 });
             } else {
-                addUnsyncedFavoriteUpdate(file.id, false);
+                markUnsyncedFavoriteUpdate(file.id, false);
                 void removeFromFavorites(file).catch((e: unknown) => {
                     log.error("Failed to remove favorite", e);
-                    addUnsyncedFavoriteUpdate(file.id, undefined);
+                    markUnsyncedFavoriteUpdate(file.id, undefined);
                 });
             }
             needUpdate.current = true;

web/apps/photos/src/pages/gallery.tsx

@@ -622,6 +622,7 @@ export default function Gallery() {
         } finally {
             dispatch({ type: "clearTempDeleted" });
             dispatch({ type: "clearTempHidden" });
+            dispatch({ type: "clearUnsyncedFavoriteUpdates" });
             !silent && hideLoadingBar();
         }
         syncInProgress.current = false;
@@ -1036,9 +1037,9 @@ export default function Gallery() {
                         setSelected={setSelected}
                         selected={selected}
                         favoriteFileIDs={state.favoriteFileIDs}
-                        addUnsyncedFavoriteUpdate={(fileID, isFavorite) =>
+                        markUnsyncedFavoriteUpdate={(fileID, isFavorite) =>
                             dispatch({
-                                type: "addUnsyncedFavoriteUpdate",
+                                type: "markUnsyncedFavoriteUpdate",
                                 fileID,
                                 isFavorite,
                             })

web/packages/new/photos/components/gallery/reducer.ts

@@ -363,7 +363,13 @@ export type GalleryAction =
     | { type: "clearTempDeleted" }
     | { type: "markTempHidden"; files: EnteFile[] }
     | { type: "clearTempHidden" }
-    | { type: "addUnsyncedFavoriteUpdate"; fileID: number; isFavorite: boolean }
+    | {
+          type: "markUnsyncedFavoriteUpdate";
+          fileID: number;
+          // Passing undefined clears any existing entry, concrete values add or
+          // update one.
+          isFavorite: boolean | undefined;
+      }
     | { type: "clearUnsyncedFavoriteUpdates" }
     | { type: "showAll" }
     | { type: "showHidden" }
@@ -768,11 +774,15 @@ const galleryReducer: React.Reducer<GalleryState, GalleryAction> = (
                 tempHiddenFileIDs: new Set(),
             });
 
-        case "addUnsyncedFavoriteUpdate": {
+        case "markUnsyncedFavoriteUpdate": {
             const unsyncedFavoriteUpdates = new Map(
                 state.unsyncedFavoriteUpdates,
             );
-            unsyncedFavoriteUpdates.set(action.fileID, action.isFavorite);
+            if (action.isFavorite === undefined) {
+                unsyncedFavoriteUpdates.delete(action.fileID);
+            } else {
+                unsyncedFavoriteUpdates.set(action.fileID, action.isFavorite);
+            }
             // Skipping a call to stateByUpdatingFilteredFiles since it
             // currently doesn't depend on favorites.
             return {