Merge branch 'main' into fix-select-not-available-for-shared-albums

apps/photos/public/locales/nl/translation.json

@@ -85,9 +85,9 @@
     "ZOOM_IN_OUT": "In/uitzoomen",
     "PREVIOUS": "Vorige (←)",
     "NEXT": "Volgende (→)",
-    "TITLE_PHOTOS": "",
-    "TITLE_ALBUMS": "",
-    "TITLE_AUTH": "",
+    "TITLE_PHOTOS": "Ente Foto's",
+    "TITLE_ALBUMS": "Ente Foto's",
+    "TITLE_AUTH": "Ente Auth",
     "UPLOAD_FIRST_PHOTO": "Je eerste foto uploaden",
     "IMPORT_YOUR_FOLDERS": "Importeer uw mappen",
     "UPLOAD_DROPZONE_MESSAGE": "Sleep om een back-up van je bestanden te maken",
@@ -622,7 +622,7 @@
     "PHOTO_EDITOR": "Fotobewerker",
     "FASTER_UPLOAD": "Snellere uploads",
     "FASTER_UPLOAD_DESCRIPTION": "Uploaden door nabije servers",
-    "MAGIC_SEARCH_STATUS": "",
+    "MAGIC_SEARCH_STATUS": "Magische Zoekfunctie Status",
     "INDEXED_ITEMS": "Geïndexeerde bestanden",
     "CACHE_DIRECTORY": "Cache map"
 }

apps/photos/src/components/Collections/CollectionSelector/index.tsx

@@ -140,8 +140,8 @@ function CollectionSelector({
                     ? t('UNHIDE_TO_COLLECTION')
                     : t('SELECT_COLLECTION')}
             </DialogTitleWithCloseButton>
-            <DialogContent>
-                <FlexWrapper flexWrap="wrap" gap={0.5}>
+            <DialogContent sx={{ '&&&': { padding: 0 } }}>
+                <FlexWrapper flexWrap="wrap" gap={'4px'} padding={'16px'}>
                     <AddCollectionButton
                         showNextModal={attributes.showNextModal}
                     />

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

@@ -192,6 +192,12 @@ function PhotoViewer(props: Iprops) {
                 case 'L':
                     onFavClick(photoSwipe?.currItem as EnteFile);
                     break;
+                case 'ArrowLeft':
+                    handleArrowClick(event, 'left');
+                    break;
+                case 'ArrowRight':
+                    handleArrowClick(event, 'right');
+                    break;
                 default:
                     break;
             }
@@ -352,6 +358,7 @@ function PhotoViewer(props: Iprops) {
             maxSpreadZoom: 5,
             index: currentIndex,
             showHideOpacity: true,
+            arrowKeys: false,
             getDoubleTapZoom(isMouseClick, item) {
                 if (isMouseClick) {
                     return 2.5;
@@ -505,6 +512,24 @@ function PhotoViewer(props: Iprops) {
         appContext.setDialogMessage(getTrashFileMessage(() => trashFile(file)));
     };
 
+    const handleArrowClick = (
+        e: KeyboardEvent,
+        direction: 'left' | 'right'
+    ) => {
+        // ignore arrow clicks if the user is typing in a text field
+        if (
+            e.target instanceof HTMLInputElement ||
+            e.target instanceof HTMLTextAreaElement
+        ) {
+            return;
+        }
+        if (direction === 'left') {
+            photoSwipe.prev();
+        } else {
+            photoSwipe.next();
+        }
+    };
+
     const updateItems = (items: EnteFile[]) => {
         try {
             if (photoSwipe) {

apps/photos/src/components/Upload/UploadProgress/inProgressSection.tsx

@@ -12,6 +12,7 @@ import UploadProgressContext from 'contexts/uploadProgress';
 import { t } from 'i18next';
 
 import { UPLOAD_STAGES } from 'constants/upload';
+import { CaptionedText } from 'components/CaptionedText';
 
 export const InProgressSection = () => {
     const { inProgressUploads, hasLivePhotos, uploadFileNames, uploadStage } =
@@ -44,9 +45,14 @@ export const InProgressSection = () => {
     return (
         <UploadProgressSection>
             <UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
-                {uploadStage === UPLOAD_STAGES.EXTRACTING_METADATA
-                    ? t('INPROGRESS_METADATA_EXTRACTION')
-                    : t('INPROGRESS_UPLOADS')}
+                <CaptionedText
+                    mainText={
+                        uploadStage === UPLOAD_STAGES.EXTRACTING_METADATA
+                            ? t('INPROGRESS_METADATA_EXTRACTION')
+                            : t('INPROGRESS_UPLOADS')
+                    }
+                    subText={String(inProgressUploads?.length ?? 0)}
+                />
             </UploadProgressSectionTitle>
             <UploadProgressSectionContent>
                 {hasLivePhotos && (

apps/photos/src/components/Upload/UploadProgress/resultSection.tsx

@@ -1,6 +1,5 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import ItemList from 'components/ItemList';
-import { Typography } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { ResultItemContainer } from './styledComponents';
 import { UPLOAD_RESULT } from 'constants/upload';
@@ -11,6 +10,7 @@ import {
     UploadProgressSectionTitle,
 } from './section';
 import UploadProgressContext from 'contexts/uploadProgress';
+import { CaptionedText } from 'components/CaptionedText';
 
 export interface ResultSectionProps {
     uploadResult: UPLOAD_RESULT;
@@ -46,7 +46,10 @@ export const ResultSection = (props: ResultSectionProps) => {
     return (
         <UploadProgressSection>
             <UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
-                <Typography> {props.sectionTitle}</Typography>
+                <CaptionedText
+                    mainText={props.sectionTitle}
+                    subText={String(fileList?.length ?? 0)}
+                />
             </UploadProgressSectionTitle>
             <UploadProgressSectionContent>
                 {props.sectionInfo && (

apps/photos/src/components/pages/gallery/PreviewCard.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { EnteFile } from 'types/file';
-import { styled } from '@mui/material';
+import { Tooltip, styled } from '@mui/material';
 import PlayCircleOutlineOutlinedIcon from '@mui/icons-material/PlayCircleOutlineOutlined';
 import DownloadManager from 'services/download';
 import useLongPress from '@ente/shared/hooks/useLongPress';
@@ -298,7 +298,7 @@ export default function PreviewCard(props: IProps) {
         }
     };
 
-    return (
+    const renderFn = () => (
         <Cont
             key={`thumb-${file.id}}`}
             onClick={handleClick}
@@ -360,4 +360,22 @@ export default function PreviewCard(props: IProps) {
             )}
         </Cont>
     );
+
+    if (deduplicateContext.isOnDeduplicatePage) {
+        return (
+            <Tooltip
+                placement="bottom-start"
+                enterDelay={300}
+                enterNextDelay={100}
+                title={`${
+                    file.metadata.title
+                } - ${deduplicateContext.collectionNameMap.get(
+                    file.collectionID
+                )}`}>
+                {renderFn()}
+            </Tooltip>
+        );
+    } else {
+        return renderFn();
+    }
 }