update directory and init ui

src/components/ExportModal.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import exportService from 'services/exportService';
 import { ExportProgress, ExportStats } from 'types/export';
 import { getLocalFiles } from 'services/fileService';
-import { User } from 'types/user';
+import { User, UserDetails } from 'types/user';
 import {
     Button,
     Dialog,
@@ -11,6 +11,7 @@ import {
     Divider,
     Stack,
     styled,
+    Tooltip,
 } from '@mui/material';
 import { sleep } from 'utils/common';
 import { getExportRecordFileUID } from 'utils/export';
@@ -25,18 +26,11 @@ import FolderIcon from '@mui/icons-material/Folder';
 import { ExportStage, ExportType } from 'constants/export';
 import EnteSpinner from './EnteSpinner';
 import DialogTitleWithCloseButton from './DialogBox/TitleWithCloseButton';
-
+import MoreHoriz from '@mui/icons-material/MoreHoriz';
-const FolderIconWrapper = styled('div')`
+import OverflowMenu from './OverflowMenu/menu';
-    width: 15%;
+import { OverflowMenuOption } from './OverflowMenu/option';
-    margin-left: 10px;
+import { useLocalState } from 'hooks/useLocalState';
-    cursor: pointer;
+import { convertBytesToHumanReadable } from 'utils/billing';
-    padding: 3px;
-    border: 1px solid #444;
-    border-radius: 15%;
-    &:hover {
-        background-color: #444;
-    }
-`;
 
 const ExportFolderPathContainer = styled('span')`
     white-space: nowrap;
@@ -52,9 +46,9 @@ const ExportFolderPathContainer = styled('span')`
 interface Props {
     show: boolean;
     onHide: () => void;
-    usage: string;
 }
 export default function ExportModal(props: Props) {
+    const [userDetails] = useLocalState<UserDetails>(LS_KEYS.USER_DETAILS);
     const [exportStage, setExportStage] = useState(ExportStage.INIT);
     const [exportFolder, setExportFolder] = useState('');
     const [exportSize, setExportSize] = useState('');
@@ -152,8 +146,8 @@ export default function ExportModal(props: Props) {
     }, [props.show]);
 
     useEffect(() => {
-        setExportSize(props.usage);
+        setExportSize(convertBytesToHumanReadable(userDetails?.usage));
-    }, [props.usage]);
+    }, [userDetails]);
 
     // =============
     // STATE UPDATERS
@@ -324,39 +318,12 @@ export default function ExportModal(props: Props) {
             </DialogTitleWithCloseButton>
             <DialogContent>
                 <Stack spacing={2} mb={4}>
-                    <FlexWrapper>
+                    <ExportDirectory
-                        <Label width="35%">{constants.DESTINATION}</Label>
+                        exportFolder={exportFolder}
-                        <Value width="65%">
+                        selectExportDirectory={selectExportDirectory}
-                            {!exportFolder ? (
+                        exportStage={exportStage}
-                                <Button
+                    />
-                                    color={'accent'}
+                    <ExportSize exportSize={exportSize} />
-                                    onClick={selectExportDirectory}>
-                                    {constants.SELECT_FOLDER}
-                                </Button>
-                            ) : (
-                                <>
-                                    <ExportFolderPathContainer>
-                                        {exportFolder}
-                                    </ExportFolderPathContainer>
-                                    {(exportStage === ExportStage.FINISHED ||
-                                        exportStage === ExportStage.INIT) && (
-                                        <FolderIconWrapper
-                                            onClick={selectExportDirectory}>
-                                            <FolderIcon />
-                                        </FolderIconWrapper>
-                                    )}
-                                </>
-                            )}
-                        </Value>
-                    </FlexWrapper>
-                    <FlexWrapper>
-                        <Label width="40%">
-                            {constants.TOTAL_EXPORT_SIZE}{' '}
-                        </Label>
-                        <Value width="60%">
-                            {exportSize ? `${exportSize}` : <EnteSpinner />}
-                        </Value>
-                    </FlexWrapper>
                 </Stack>
                 <Divider />
                 <ExportDynamicContent />
@@ -364,3 +331,62 @@ export default function ExportModal(props: Props) {
         </Dialog>
     );
 }
+
+function ExportDirectory({ exportFolder, selectExportDirectory, exportStage }) {
+    return (
+        <FlexWrapper>
+            <Label width="35%">{constants.DESTINATION}</Label>
+            <Value width="65%">
+                {!exportFolder ? (
+                    <Button color={'accent'} onClick={selectExportDirectory}>
+                        {constants.SELECT_FOLDER}
+                    </Button>
+                ) : (
+                    <>
+                        <Tooltip title={exportFolder}>
+                            <ExportFolderPathContainer>
+                                {exportFolder}
+                            </ExportFolderPathContainer>
+                        </Tooltip>
+                        {(exportStage === ExportStage.FINISHED ||
+                            exportStage === ExportStage.INIT) && (
+                            <ExportDirectoryOption
+                                selectExportDirectory={selectExportDirectory}
+                            />
+                        )}
+                    </>
+                )}
+            </Value>
+        </FlexWrapper>
+    );
+}
+
+function ExportSize({ exportSize }) {
+    return (
+        <FlexWrapper>
+            <Label width="40%">{constants.EXPORT_SIZE} </Label>
+            <Value width="60%">
+                {exportSize ? `${exportSize}` : <EnteSpinner />}
+            </Value>
+        </FlexWrapper>
+    );
+}
+
+function ExportDirectoryOption({ selectExportDirectory }) {
+    return (
+        <OverflowMenu
+            triggerButtonProps={{
+                sx: {
+                    ml: 1,
+                },
+            }}
+            ariaControls={'export-option'}
+            triggerButtonIcon={<MoreHoriz />}>
+            <OverflowMenuOption
+                onClick={selectExportDirectory}
+                startIcon={<FolderIcon />}>
+                {constants.CHANGE_FOLDER}
+            </OverflowMenuOption>
+        </OverflowMenu>
+    );
+}

src/components/Sidebar/HelpSection.tsx

@@ -3,20 +3,15 @@ import SidebarButton from './Button';
 import constants from 'utils/strings/constants';
 import ExportModal from 'components/ExportModal';
 import exportService from 'services/exportService';
-import { convertBytesToHumanReadable } from 'utils/billing';
 import { getEndpoint } from 'utils/common/apiUtil';
 import { getToken } from 'utils/common/key';
 import isElectron from 'is-electron';
 import { downloadApp, initiateEmail } from 'utils/common';
 import { AppContext } from 'pages/_app';
-import { useLocalState } from 'hooks/useLocalState';
-import { LS_KEYS } from 'utils/storage/localStorage';
-import { UserDetails } from 'types/user';
 import EnteSpinner from 'components/EnteSpinner';
 
 export default function HelpSection() {
-    const [userDetails] = useLocalState<UserDetails>(LS_KEYS.USER_DETAILS);
+    const [exportModalView, setExportModalView] = useState(true);
-    const [exportModalView, setExportModalView] = useState(false);
 
     const { setDialogMessage } = useContext(AppContext);
 
@@ -72,7 +67,6 @@ export default function HelpSection() {
             <ExportModal
                 show={exportModalView}
                 onHide={() => setExportModalView(false)}
-                usage={convertBytesToHumanReadable(userDetails?.usage ?? 0)}
             />
         </>
     );

src/pages/gallery/index.tsx

@@ -200,7 +200,7 @@ export default function Gallery() {
     const [electronFiles, setElectronFiles] = useState<ElectronFile[]>(null);
     const [uploadTypeSelectorView, setUploadTypeSelectorView] = useState(false);
 
-    const [sidebarView, setSidebarView] = useState(false);
+    const [sidebarView, setSidebarView] = useState(true);
 
     const closeSidebar = () => setSidebarView(false);
     const openSidebar = () => setSidebarView(true);

src/utils/strings/englishConstants.tsx

@@ -475,7 +475,7 @@ const englishConstants = {
     EXPORT_DATA: 'Export data',
     SELECT_FOLDER: 'Select folder',
     DESTINATION: 'Destination',
-    TOTAL_EXPORT_SIZE: 'Total export size',
+    EXPORT_SIZE: 'Export size',
     START: 'Start',
     EXPORT_IN_PROGRESS: 'Export in progress...',
     PAUSE: 'Pause',
@@ -754,6 +754,7 @@ const englishConstants = {
             </p>
         </>
     ),
+    CHANGE_FOLDER: 'Change Folder',
 };
 
 export default englishConstants;