Merge pull request #946 from ente-io/empty-state

Empty state

.lintstagedrc.js

@@ -9,5 +9,5 @@ const buildPrettierCommand = (filenames) =>
     `yarn prettier --write --ignore-unknown ${filenames.join(' ')}`;
 
 module.exports = {
-    '*.{js,jsx,ts,tsx}': [buildEslintCommand, buildPrettierCommand],
+    'src/**/*.{js,jsx,ts,tsx}': [buildEslintCommand, buildPrettierCommand],
 };

src/components/EmptyScreen.tsx

@@ -1,56 +1,103 @@
 import React, { useContext } from 'react';
-import { Button, styled, Typography } from '@mui/material';
+import { Button, Stack, styled, Typography } from '@mui/material';
 import constants from 'utils/strings/constants';
 import { DeduplicateContext } from 'pages/deduplicate';
-import VerticallyCentered from './Container';
+import VerticallyCentered, { FlexWrapper } from './Container';
+import { Box } from '@mui/material';
 import uploadManager from 'services/upload/uploadManager';
+import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternateOutlined';
+import FolderIcon from '@mui/icons-material/FolderOutlined';
+import { UploadTypeSelectorIntent } from 'types/gallery';
 
-const Wrapper = styled(VerticallyCentered)`
-    & > svg {
-        filter: drop-shadow(3px 3px 5px rgba(45, 194, 98, 0.5));
-    }
+const Wrapper = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+`;
+const NonDraggableImage = styled('img')`
+    pointer-events: none;
 `;
 
 export default function EmptyScreen({ openUploader }) {
     const deduplicateContext = useContext(DeduplicateContext);
-    return (
+    return deduplicateContext.isOnDeduplicatePage ? (
+        <VerticallyCentered>
+            <div
+                style={{
+                    color: '#a6a6a6',
+                    fontSize: '18px',
+                }}>
+                {constants.NO_DUPLICATES_FOUND}
+            </div>
+        </VerticallyCentered>
+    ) : (
         <Wrapper>
-            {deduplicateContext.isOnDeduplicatePage ? (
-                <div
+            <Stack
+                sx={{
+                    flex: 'none',
+                    pt: 1.5,
+                    pb: 1.5,
+                }}>
+                <VerticallyCentered sx={{ flex: 'none' }}>
+                    {constants.WELCOME_TO_ENTE()}
+                </VerticallyCentered>
+                <Typography variant="body1" mt={3.5} color="text.secondary">
+                    {constants.WHERE_YOUR_BEST_PHOTOS_LIVE}
+                </Typography>
+            </Stack>
+            <NonDraggableImage
+                height={287.57}
+                src="/images/empty-state/ente_duck.png"
+                srcSet="/images/empty-state/ente_duck@2x.png,
+                                /images/empty-state/ente_duck@3x.png"
+            />
+
+            <VerticallyCentered paddingTop={1.5} paddingBottom={1.5}>
+                <Button
                     style={{
-                        color: '#a6a6a6',
-                        fontSize: '18px',
+                        cursor:
+                            !uploadManager.shouldAllowNewUpload() &&
+                            'not-allowed',
+                    }}
+                    color="accent"
+                    onClick={() =>
+                        openUploader(UploadTypeSelectorIntent.normalUpload)
+                    }
+                    disabled={!uploadManager.shouldAllowNewUpload()}
+                    sx={{
+                        mt: 1.5,
+                        p: 1,
+                        width: 320,
+                        borderRadius: 0.5,
                     }}>
-                    {constants.NO_DUPLICATES_FOUND}
-                </div>
-            ) : (
-                <>
-                    <img
-                        height={150}
-                        src="/images/gallery-locked/1x.png"
-                        srcSet="/images/gallery-locked/2x.png 2x,
-                                /images/gallery-locked/3x.png 3x"
-                    />
-                    <Typography color="text.secondary" mt={2}>
-                        {constants.UPLOAD_FIRST_PHOTO_DESCRIPTION()}
-                    </Typography>
-
-                    <span
-                        style={{
-                            cursor:
-                                !uploadManager.shouldAllowNewUpload() &&
-                                'not-allowed',
-                        }}>
-                        <Button
-                            color="accent"
-                            onClick={openUploader}
-                            disabled={!uploadManager.shouldAllowNewUpload()}
-                            sx={{ mt: 4 }}>
-                            {constants.UPLOAD_FIRST_PHOTO}
-                        </Button>
-                    </span>
-                </>
-            )}
+                    <FlexWrapper sx={{ gap: 1 }} justifyContent="center">
+                        <AddPhotoAlternateIcon />
+                        {constants.UPLOAD_FIRST_PHOTO}
+                    </FlexWrapper>
+                </Button>
+                <Button
+                    style={{
+                        cursor:
+                            !uploadManager.shouldAllowNewUpload() &&
+                            'not-allowed',
+                    }}
+                    onClick={() =>
+                        openUploader(UploadTypeSelectorIntent.import)
+                    }
+                    disabled={!uploadManager.shouldAllowNewUpload()}
+                    sx={{
+                        mt: 1.5,
+                        p: 1,
+                        width: 320,
+                        borderRadius: 0.5,
+                    }}>
+                    <FlexWrapper sx={{ gap: 1 }} justifyContent="center">
+                        <FolderIcon />
+                        {constants.IMPORT_YOUR_FOLDERS}
+                    </FlexWrapper>
+                </Button>
+            </VerticallyCentered>
         </Wrapper>
     );
 }

src/components/EnteLogo.tsx

@@ -3,6 +3,7 @@ import { styled } from '@mui/material';
 
 const LogoImage = styled('img')`
     margin: 3px 0;
+    pointer-events: none;
 `;
 
 export function EnteLogo(props) {

src/components/PhotoFrame.tsx

@@ -58,6 +58,7 @@ interface Props {
     ) => void;
     selected: SelectedState;
     isFirstLoad?;
+    hasPersonalFiles?;
     openUploader?;
     isInSearchMode?: boolean;
     search?: Search;
@@ -79,6 +80,7 @@ const PhotoFrame = ({
     setSelected,
     selected,
     isFirstLoad,
+    hasPersonalFiles,
     openUploader,
     isInSearchMode,
     search,
@@ -109,7 +111,6 @@ const PhotoFrame = ({
     const updateRequired = useRef(false);
 
     const [filteredData, setFilteredData] = useState<EnteFile[]>([]);
-
     useEffect(() => {
         const user: User = getData(LS_KEYS.USER);
         setUser(user);
@@ -654,7 +655,7 @@ const PhotoFrame = ({
     return (
         <>
             {!isFirstLoad &&
-            files.length === 0 &&
+            !hasPersonalFiles &&
             !isInSearchMode &&
             activeCollection === ALL_SECTION ? (
                 <EmptyScreen openUploader={openUploader} />

src/components/Upload/UploadButton.tsx

@@ -4,6 +4,7 @@ import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined';
 import { Button } from '@mui/material';
 import constants from 'utils/strings/constants';
 import uploadManager from 'services/upload/uploadManager';
+import { UploadTypeSelectorIntent } from 'types/gallery';
 
 const Wrapper = styled('div')<{ $disableShrink: boolean }>`
     display: flex;
@@ -27,7 +28,7 @@ const Wrapper = styled('div')<{ $disableShrink: boolean }>`
 `;
 
 interface Iprops {
-    openUploader: () => void;
+    openUploader: (intent?: UploadTypeSelectorIntent) => void;
     text?: string;
     color?: ButtonProps['color'];
     disableShrink?: boolean;
@@ -40,14 +41,16 @@ function UploadButton({
     disableShrink,
     icon,
 }: Iprops) {
+    const onClickHandler = () => openUploader();
+
     return (
         <Wrapper
             $disableShrink={disableShrink}
             style={{
                 cursor: !uploadManager.shouldAllowNewUpload() && 'not-allowed',
             }}>
             <Button
-                onClick={openUploader}
+                onClick={onClickHandler}
                 disabled={!uploadManager.shouldAllowNewUpload()}
                 className="desktop-button"
                 color={color ?? 'secondary'}
@@ -56,7 +59,7 @@ function UploadButton({
             </Button>
 
             <IconButton
-                onClick={openUploader}
+                onClick={onClickHandler}
                 disabled={!uploadManager.shouldAllowNewUpload()}
                 className="mobile-button">
                 <FileUploadOutlinedIcon />

src/components/Upload/UploadTypeSelector/index.tsx

@@ -10,22 +10,22 @@ import DialogTitleWithCloseButton, {
 import { Box, Dialog, Stack, Typography } from '@mui/material';
 import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
 import { isMobileOrTable } from 'utils/common/deviceDetection';
-
+import { UploadTypeSelectorIntent } from 'types/gallery';
 interface Iprops {
     onClose: () => void;
     show: boolean;
     uploadFiles: () => void;
     uploadFolders: () => void;
     uploadGoogleTakeoutZips: () => void;
-    hideZipUploadOption?: boolean;
+    uploadTypeSelectorIntent: UploadTypeSelectorIntent;
 }
 export default function UploadTypeSelector({
     onClose,
     show,
     uploadFiles,
     uploadFolders,
     uploadGoogleTakeoutZips,
-    hideZipUploadOption,
+    uploadTypeSelectorIntent,
 }: Iprops) {
     const publicCollectionGalleryContext = useContext(
         PublicCollectionGalleryContext
@@ -55,23 +55,31 @@ export default function UploadTypeSelector({
             }}
             onClose={dialogCloseHandler({ onClose })}>
             <DialogTitleWithCloseButton onClose={onClose}>
-                {publicCollectionGalleryContext.accessedThroughSharedURL
+                {uploadTypeSelectorIntent ===
+                UploadTypeSelectorIntent.collectPhotos
                     ? constants.SELECT_PHOTOS
+                    : uploadTypeSelectorIntent ===
+                      UploadTypeSelectorIntent.import
+                    ? constants.IMPORT
                     : constants.UPLOAD}
             </DialogTitleWithCloseButton>
             <Box p={1.5} pt={0.5}>
                 <Stack spacing={0.5}>
-                    <UploadTypeOption
-                        onClick={uploadFiles}
-                        startIcon={<FileUploadIcon />}>
-                        {constants.UPLOAD_FILES}
-                    </UploadTypeOption>
+                    {uploadTypeSelectorIntent !==
+                        UploadTypeSelectorIntent.import && (
+                        <UploadTypeOption
+                            onClick={uploadFiles}
+                            startIcon={<FileUploadIcon />}>
+                            {constants.UPLOAD_FILES}
+                        </UploadTypeOption>
+                    )}
                     <UploadTypeOption
                         onClick={uploadFolders}
                         startIcon={<FolderUploadIcon />}>
                         {constants.UPLOAD_DIRS}
                     </UploadTypeOption>
-                    {!hideZipUploadOption && (
+                    {uploadTypeSelectorIntent !==
+                        UploadTypeSelectorIntent.collectPhotos && (
                         <UploadTypeOption
                             onClick={uploadGoogleTakeoutZips}
                             startIcon={<GoogleIcon />}>

src/components/Upload/Uploader.tsx

@@ -59,7 +59,7 @@ import {
     getPublicCollectionUploaderName,
     savePublicCollectionUploaderName,
 } from 'services/publicCollectionService';
-
+import { UploadTypeSelectorIntent } from 'types/gallery';
 const FIRST_ALBUM_NAME = 'My First Album';
 
 interface Props {
@@ -81,8 +81,8 @@ interface Props {
     webFolderSelectorFiles: File[];
     webFileSelectorFiles: File[];
     dragAndDropFiles: File[];
-    zipUploadDisabled?: boolean;
     uploadCollection?: Collection;
+    uploadTypeSelectorIntent: UploadTypeSelectorIntent;
 }
 
 export default function Uploader(props: Props) {
@@ -752,7 +752,7 @@ export default function Uploader(props: Props) {
                 uploadFiles={handleFileUpload}
                 uploadFolders={handleFolderUpload}
                 uploadGoogleTakeoutZips={handleZipUpload}
-                hideZipUploadOption={props.zipUploadDisabled}
+                uploadTypeSelectorIntent={props.uploadTypeSelectorIntent}
             />
             <UploadProgress
                 open={uploadProgressView}