add counter to upload sections

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 && (