Fix hiding

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

@@ -550,6 +550,8 @@ const PhotoFrame = ({
                     user={galleryContext.user ?? undefined}
                     files={files}
                     initialIndex={currentIndex}
+                    isInTrashSection={activeCollectionID === TRASH_SECTION}
+                    isInHiddenSection={isInHiddenSection}
                     disableDownload={!enableDownload}
                     onTriggerSyncWithRemote={handleTriggerSyncWithRemote}
                     onSaveEditedImageCopy={handleSaveEditedImageCopy}

web/packages/gallery/components/viewer/FileViewer.tsx

@@ -72,6 +72,14 @@ export type FileViewerProps = ModalVisibilityProps & {
      * provided within the file viewer itself.
      */
     initialIndex: number;
+    /**
+     * `true` when we are viewing files in the Trash.
+     */
+    isInTrashSection?: boolean;
+    /**
+     * `true` when we are viewing files in the hidden section.
+     */
+    isInHiddenSection?: boolean;
     /**
      * If true then the viewer does not show controls for downloading the file.
      */
@@ -125,6 +133,8 @@ const FileViewer: React.FC<FileViewerProps> = ({
     user,
     files,
     initialIndex,
+    isInTrashSection,
+    isInHiddenSection,
     disableDownload,
     favoriteFileIDs,
     fileCollectionIDs,
@@ -173,13 +183,24 @@ const FileViewer: React.FC<FileViewerProps> = ({
             log.debug(() => ["viewer", { action: "annotate", file }]);
             const fileID = file.id;
             const isOwnFile = file.ownerID == user?.id;
-            const isFavorite = favoriteFileIDs?.has(file.id);
-            const isEditableImage = onSaveEditedImageCopy
-                ? fileIsEditableImage(file)
+            const canFavoriteOrEdit =
+                isOwnFile && !isInTrashSection && !isInHiddenSection;
+            const isFavorite = canFavoriteOrEdit
+                ? favoriteFileIDs?.has(file.id)
                 : undefined;
+            const isEditableImage =
+                onSaveEditedImageCopy && canFavoriteOrEdit
+                    ? fileIsEditableImage(file)
+                    : undefined;
             return { fileID, isOwnFile, isFavorite, isEditableImage };
         },
-        [user, favoriteFileIDs, onSaveEditedImageCopy],
+        [
+            user,
+            isInTrashSection,
+            isInHiddenSection,
+            favoriteFileIDs,
+            onSaveEditedImageCopy,
+        ],
     );
 
     const handleToggleFavorite = useMemo(() => {
@@ -282,7 +303,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
         // - Updates to initialIndex can be safely ignored: they don't matter,
         //   only their initial value at the time of open mattered.
         //
-        // - Updates to disableDownload are not expected after open. We could've
+        // - Updates to other properties are not expected after open. We could've
         //   also added it to the dependencies array, not adding it was a more
         //   conservative choice to be on the safer side and trigger too few
         //   instead of too many updates.

web/packages/gallery/components/viewer/icons.tsx

@@ -24,9 +24,11 @@ const paths = {
     // "@mui/icons-material/Edit"
     edit: '<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z" transform="translate(3, 3) scale(0.97)"',
     // "@mui/icons-material/FavoriteBorderRounded"
-    favorite: '<path d="M19.66 3.99c-2.64-1.8-5.9-.96-7.66 1.1-1.76-2.06-5.02-2.91-7.66-1.1-1.4.96-2.28 2.58-2.34 4.29-.14 3.88 3.3 6.99 8.55 11.76l.1.09c.76.69 1.93.69 2.69-.01l.11-.1c5.25-4.76 8.68-7.87 8.55-11.75-.06-1.7-.94-3.32-2.34-4.28M12.1 18.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05" transform="translate(3, 3)"',
+    favorite:
+        '<path d="M19.66 3.99c-2.64-1.8-5.9-.96-7.66 1.1-1.76-2.06-5.02-2.91-7.66-1.1-1.4.96-2.28 2.58-2.34 4.29-.14 3.88 3.3 6.99 8.55 11.76l.1.09c.76.69 1.93.69 2.69-.01l.11-.1c5.25-4.76 8.68-7.87 8.55-11.75-.06-1.7-.94-3.32-2.34-4.28M12.1 18.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05" transform="translate(3, 3)"',
     // "@mui/icons-material/FavoriteRounded"
-    unfavorite: '<path d="M13.35 20.13c-.76.69-1.93.69-2.69-.01l-.11-.1C5.3 15.27 1.87 12.16 2 8.28c.06-1.7.93-3.33 2.34-4.29 2.64-1.8 5.9-.96 7.66 1.1 1.76-2.06 5.02-2.91 7.66-1.1 1.41.96 2.28 2.59 2.34 4.29.14 3.88-3.3 6.99-8.55 11.76z" transform="translate(3, 3)"',
+    unfavorite:
+        '<path d="M13.35 20.13c-.76.69-1.93.69-2.69-.01l-.11-.1C5.3 15.27 1.87 12.16 2 8.28c.06-1.7.93-3.33 2.34-4.29 2.64-1.8 5.9-.96 7.66 1.1 1.76-2.06 5.02-2.91 7.66-1.1 1.41.96 2.28 2.59 2.34 4.29.14 3.88-3.3 6.99-8.55 11.76z" transform="translate(3, 3)"',
 };
 
 /**

web/packages/gallery/components/viewer/photoswipe.ts

@@ -409,8 +409,8 @@ export class FileViewerPhotoSwipe {
 
         const showIf = (element: HTMLElement, condition: boolean) =>
             condition
-                ? element.classList.remove("pswp--ui-visible")
-                : element.classList.add("pswp--ui-visible");
+                ? element.classList.remove("pswp__hidden")
+                : element.classList.add("pswp__hidden");
 
         // Add our custom UI elements to inside the PhotoSwipe dialog.
         //