Navigation-to-corresponding-album--FileInfo (#1185)

apps/photos/src/components/Chip.tsx

@@ -1,10 +1,9 @@
-import { Box, styled } from '@mui/material';
+import { Button, ButtonProps, styled } from '@mui/material';
 import { CSSProperties } from '@mui/material/styles/createTypography';
 
-export const Chip = styled(Box)(({ theme }) => ({
+export const Chip = styled((props: ButtonProps) => (
+    <Button color="secondary" {...props} />
+))(({ theme }) => ({
     ...(theme.typography.small as CSSProperties),
-    padding: '8px 12px',
-    borderRadius: '4px',
-    backgroundColor: theme.colors.fill.faint,
-    fontWeight: 'bold',
+    padding: '8px',
 }));

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

@@ -4,7 +4,6 @@ import { RenderCreationTime } from './RenderCreationTime';
 import { Box, DialogProps, Link, Stack, styled } from '@mui/material';
 import { getEXIFLocation } from 'services/upload/exifService';
 import { RenderCaption } from './RenderCaption';
-
 import CopyButton from 'components/CodeBlock/CopyButton';
 import { formatDate, formatTime } from 'utils/time/format';
 import Titlebar from 'components/Titlebar';
@@ -32,6 +31,7 @@ import { ObjectLabelList } from 'components/MachineLearning/ObjectList';
 // import MLServiceFileInfoButton from 'components/MachineLearning/MLServiceFileInfoButton';
 import { AppContext } from 'pages/_app';
 import { t } from 'i18next';
+import { GalleryContext } from 'pages/gallery';
 
 export const FileInfoSidebar = styled((props: DialogProps) => (
     <EnteDrawer {...props} anchor="right" />
@@ -53,6 +53,7 @@ interface Iprops {
     fileToCollectionsMap?: Map<number, number[]>;
     collectionNameMap?: Map<number, string>;
     showCollectionChips: boolean;
+    closePhotoViewer: () => void;
 }
 
 function BasicDeviceCamera({
@@ -87,8 +88,11 @@ export function FileInfo({
     fileToCollectionsMap,
     collectionNameMap,
     showCollectionChips,
+    closePhotoViewer,
 }: Iprops) {
     const appContext = useContext(AppContext);
+    const galleryContext = useContext(GalleryContext);
+
     const [parsedExifData, setParsedExifData] = useState<Record<string, any>>();
     const [showExif, setShowExif] = useState(false);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -164,6 +168,10 @@ export function FileInfo({
     if (!file) {
         return <></>;
     }
+    const onCollectionChipClick = (collectionID) => {
+        galleryContext.setActiveCollection(collectionID);
+        closePhotoViewer();
+    };
 
     return (
         <FileInfoSidebar open={showInfo} onClose={handleCloseInfo}>
@@ -264,13 +272,18 @@ export function FileInfo({
                                     collectionNameMap.has(collectionID)
                                 )
                                 ?.map((collectionID) => (
-                                    <Chip key={collectionID}>
+                                    <Chip
+                                        key={collectionID}
+                                        onClick={() =>
+                                            onCollectionChipClick(collectionID)
+                                        }>
                                         {collectionNameMap.get(collectionID)}
                                     </Chip>
                                 ))}
                         </Box>
                     </InfoItem>
                 )}
+
                 {appContext.mlSearchEnabled && (
                     <>
                         <PhotoPeopleList

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

@@ -692,6 +692,7 @@ function PhotoViewer(props: Iprops) {
                 refreshPhotoswipe={refreshPhotoswipe}
                 fileToCollectionsMap={props.fileToCollectionsMap}
                 collectionNameMap={props.collectionNameMap}
+                closePhotoViewer={handleClose}
             />
         </>
     );

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

@@ -343,7 +343,13 @@ export default function Gallery() {
             }
         }
         const href = `/gallery${collectionURL}`;
-        router.push(href, undefined, { shallow: true });
+        const delayRouteChange = () => {
+            setTimeout(() => {
+                router.push(href, undefined, { shallow: true });
+            }, 1000);
+        };
+
+        delayRouteChange();
     }, [activeCollection]);
 
     useEffect(() => {