redesigned watch modal

src/components/WatchModal.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import React, { useEffect, useState } from 'react';
 import {
     Button,
@@ -6,26 +5,30 @@ import {
     Dialog,
     Icon,
     IconButton,
+    Menu,
+    MenuItem,
 } from '@mui/material';
 import watchService from 'services/watchService';
-import { MdDelete } from 'react-icons/md';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Close from '@mui/icons-material/Close';
 import { CenteredFlex, SpaceBetweenFlex } from 'components/Container';
 import { WatchMapping } from 'types/watch';
 import { AppContext } from 'pages/_app';
 import CheckIcon from '@mui/icons-material/Check';
-import FolderIcon from '@mui/icons-material/Folder';
+import FolderOpenIcon from '@mui/icons-material/FolderOpen';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import DoNotDisturbOutlinedIcon from '@mui/icons-material/DoNotDisturbOutlined';
 import { default as MuiStyled } from '@mui/styled-engine';
 import { Box } from '@mui/system';
+import DialogBox from './DialogBox';
 
 const ModalHeading = MuiStyled('h3')({
     fontSize: '28px',
     marginBottom: '24px',
-    fontWeight: 'bold',
+    fontWeight: 600,
 });
 
-const FullWidthButton = MuiStyled(Button)({
+const FullWidthButtonWithTopMargin = MuiStyled(Button)({
+    marginTop: '16px',
     width: '100%',
     borderRadius: '4px',
 });
@@ -42,22 +45,74 @@ const FixedHeightContainer = MuiStyled(Box)({
     alignItems: 'space-between',
 });
 
-const VerticallyCentered = MuiStyled(Box)({
+const FullHeightVerticallyCentered = MuiStyled(Box)({
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'center',
+    height: '100%',
+    overflowY: 'auto',
+    margin: 0,
+    padding: 0,
+    listStyle: 'none',
+    '&::-webkit-scrollbar': {
+        width: '6px',
+    },
+    '&::-webkit-scrollbar-thumb': {
+        backgroundColor: 'slategrey',
+    },
 });
 
 const NoFoldersTitleText = MuiStyled('h4')({
     fontSize: '24px',
     marginBottom: '16px',
-    fontWeight: 'bold',
+    fontWeight: 600,
 });
 
 const BottomMarginSpacer = MuiStyled(Box)({
     marginBottom: '10px',
 });
 
+const HorizontalFlex = MuiStyled(Box)({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+});
+
+const VerticalFlex = MuiStyled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+});
+
+const MappingEntryTitle = MuiStyled(Box)({
+    fontSize: '16px',
+    fontWeight: 500,
+    marginLeft: '12px',
+    marginRight: '6px',
+});
+
+const MappingEntryFolder = MuiStyled(Box)({
+    fontSize: '14px',
+    fontWeight: 500,
+    marginTop: '2px',
+    marginLeft: '12px',
+    marginRight: '6px',
+    marginBottom: '6px',
+    lineHeight: '18px',
+});
+
+const DialogBoxHeading = MuiStyled('h4')({
+    fontSize: '24px',
+    marginBottom: '16px',
+    fontWeight: 600,
+});
+
+const DialogBoxText = MuiStyled('p')({
+    fontWeight: 500,
+});
+
+const DialogBoxButton = MuiStyled(Button)({
+    width: '140px',
+});
+
 function CheckmarkIcon() {
     return (
         <Icon
@@ -79,25 +134,26 @@ function WatchModal({
     setWatchModalView: (watchModalView: boolean) => void;
 }) {
     const [mappings, setMappings] = useState<WatchMapping[]>([]);
-    const [inputFolderPath, setInputFolderPath] = useState('');
-    const appContext = React.useContext(AppContext);
 
     useEffect(() => {
         setMappings(watchService.getWatchMappings());
     }, []);
 
-    const handleFolderSelection = async () => {
-        const folderPath = await watchService.selectFolder();
-        setInputFolderPath(folderPath);
+    const handleAddFolderClick = async () => {
+        await handleFolderSelection();
     };
 
-    const handleAddWatchMapping = async () => {
-        if (inputFolderPath.length > 0) {
+    const handleFolderSelection = async () => {
+        const folderPath = await watchService.selectFolder();
+        await handleAddWatchMapping(folderPath);
+    };
+
+    const handleAddWatchMapping = async (inputFolderPath: string) => {
+        if (inputFolderPath?.length > 0) {
             await watchService.addWatchMapping(
                 inputFolderPath.substring(inputFolderPath.lastIndexOf('/') + 1),
                 inputFolderPath
             );
-            setInputFolderPath('');
             setMappings(watchService.getWatchMappings());
         }
     };
@@ -107,11 +163,11 @@ function WatchModal({
         setMappings(watchService.getWatchMappings());
     };
 
-    const handleSyncProgressClick = () => {
-        if (watchService.isUploadRunning()) {
-            watchService.showProgressView();
-        }
-    };
+    // const handleSyncProgressClick = () => {
+    //     if (watchService.isUploadRunning()) {
+    //         watchService.showProgressView();
+    //     }
+    // };
 
     const handleClose = () => {
         setWatchModalView(false);
@@ -137,9 +193,9 @@ function WatchModal({
                     </SpaceBetweenFlex>
 
                     {mappings.length === 0 ? (
-                        <VerticallyCentered
+                        <FullHeightVerticallyCentered
                             sx={{
-                                height: '100%',
+                                justifyContent: 'center',
                             }}>
                             <NoFoldersTitleText>
                                 No folders added yet!
@@ -153,18 +209,34 @@ function WatchModal({
                             <span>
                                 <CheckmarkIcon /> Remove deleted files from ente
                             </span>
-                        </VerticallyCentered>
-                    ) : null}
+                        </FullHeightVerticallyCentered>
+                    ) : (
+                        <FullHeightVerticallyCentered>
+                            {mappings.map((mapping: WatchMapping) => {
+                                return (
+                                    <MappingEntry
+                                        key={mapping.collectionName}
+                                        mapping={mapping}
+                                        handleRemoveMapping={
+                                            handleRemoveWatchMapping
+                                        }
+                                    />
+                                );
+                            })}
+                        </FullHeightVerticallyCentered>
+                    )}
 
                     <CenteredFlex>
-                        <FullWidthButton color="accent">
+                        <FullWidthButtonWithTopMargin
+                            color="accent"
+                            onClick={handleAddFolderClick}>
                             +
                             <span
                                 style={{
                                     marginLeft: '8px',
                                 }}></span>
                             Add folder
-                        </FullWidthButton>
+                        </FullWidthButtonWithTopMargin>
                     </CenteredFlex>
                 </FixedHeightContainer>
             </PaddedContainer>
@@ -172,4 +244,120 @@ function WatchModal({
     );
 }
 
+function MappingEntry({
+    mapping,
+    handleRemoveMapping,
+}: {
+    mapping: WatchMapping;
+    handleRemoveMapping: (mapping: WatchMapping) => void;
+}) {
+    const appContext = React.useContext(AppContext);
+
+    useEffect(() => {
+        console.log(appContext.watchServiceIsRunning);
+    }, [appContext.watchServiceIsRunning]);
+
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [dialogBoxOpen, setDialogBoxOpen] = useState(false);
+    const open = Boolean(anchorEl);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            <SpaceBetweenFlex>
+                <HorizontalFlex>
+                    <FolderOpenIcon />
+                    <VerticalFlex>
+                        <MappingEntryTitle>
+                            {mapping.collectionName}
+                            {appContext.watchServiceIsRunning &&
+                                watchService.currentEvent?.collectionName ===
+                                    mapping.collectionName && (
+                                    <CircularProgress
+                                        size={12}
+                                        sx={{
+                                            marginLeft: '6px',
+                                        }}
+                                    />
+                                )}
+                        </MappingEntryTitle>
+                        <MappingEntryFolder
+                            sx={{
+                                color: (theme) => theme.palette.grey[500],
+                            }}>
+                            {mapping.folderPath}
+                        </MappingEntryFolder>
+                    </VerticalFlex>
+                </HorizontalFlex>
+                <IconButton onClick={handleClick}>
+                    <MoreHorizIcon />
+                </IconButton>
+            </SpaceBetweenFlex>
+            <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                MenuListProps={{
+                    'aria-labelledby': 'basic-button',
+                }}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+                transformOrigin={{
+                    vertical: 'center',
+                    horizontal: 'center',
+                }}>
+                <MenuItem
+                    onClick={() => setDialogBoxOpen(true)}
+                    sx={{
+                        fontWeight: 600,
+                        color: (theme) => theme.palette.danger.main,
+                    }}>
+                    <span
+                        style={{
+                            marginRight: '6px',
+                        }}>
+                        <DoNotDisturbOutlinedIcon />
+                    </span>{' '}
+                    Stop watching
+                </MenuItem>
+            </Menu>
+            <DialogBox
+                size="xs"
+                PaperProps={{
+                    style: {
+                        width: '350px',
+                    },
+                }}
+                open={dialogBoxOpen}
+                onClose={() => setDialogBoxOpen(false)}
+                attributes={{}}>
+                <DialogBoxHeading>Stop watching folder?</DialogBoxHeading>
+                <DialogBoxText>
+                    Your existing files will not be deleted, but ente will stop
+                    automatically updating the linked ente album on changes in
+                    this folder.
+                </DialogBoxText>
+                <HorizontalFlex>
+                    <DialogBoxButton onClick={() => setDialogBoxOpen(false)}>
+                        Cancel
+                    </DialogBoxButton>
+                    <DialogBoxButton
+                        color="danger"
+                        onClick={() => handleRemoveMapping(mapping)}>
+                        Yes, stop
+                    </DialogBoxButton>
+                </HorizontalFlex>
+            </DialogBox>
+        </>
+    );
+}
+
 export default WatchModal;

src/themes/darkThemeOptions.tsx

@@ -149,6 +149,7 @@ const darkThemeOptions = createTheme({
             A100: '#ccc',
             A200: 'rgba(256, 256, 256, 0.24)',
             A400: '#434343',
+            500: 'rgba(256, 256, 256, 0.5)',
         },
         divider: 'rgba(256, 256, 256, 0.12)',
     },