diff --git a/apps/photos/src/components/Chip.tsx b/apps/photos/src/components/Chip.tsx
index 3982333d2..c7e269558 100644
--- a/apps/photos/src/components/Chip.tsx
+++ b/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) => (
+
+))(({ theme }) => ({
...(theme.typography.small as CSSProperties),
- padding: '8px 12px',
- borderRadius: '4px',
- backgroundColor: theme.colors.fill.faint,
- fontWeight: 'bold',
+ padding: '8px',
}));
diff --git a/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx b/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
index cff2289e8..634897557 100644
--- a/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
+++ b/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) => (
@@ -53,6 +53,7 @@ interface Iprops {
fileToCollectionsMap?: Map;
collectionNameMap?: Map;
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>();
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 (
@@ -264,13 +272,18 @@ export function FileInfo({
collectionNameMap.has(collectionID)
)
?.map((collectionID) => (
-
+
+ onCollectionChipClick(collectionID)
+ }>
{collectionNameMap.get(collectionID)}
))}
)}
+
{appContext.mlSearchEnabled && (
<>
>
);
diff --git a/apps/photos/src/pages/gallery/index.tsx b/apps/photos/src/pages/gallery/index.tsx
index 08cf29b89..39adfaa49 100644
--- a/apps/photos/src/pages/gallery/index.tsx
+++ b/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(() => {