Inline

web/apps/photos/src/components/WatchFolder/mappingEntry/entryHeading.tsx

@@ -1,23 +0,0 @@
-import { FlexWrapper } from "@ente/shared/components/Container";
-import { CircularProgress, Typography } from "@mui/material";
-import { AppContext } from "pages/_app";
-import { useContext } from "react";
-import watchFolderService from "services/watchFolder/watchFolderService";
-import { WatchMapping } from "types/watchFolder";
-
-interface Iprops {
-    mapping: WatchMapping;
-}
-
-export function EntryHeading({ mapping }: Iprops) {
-    const appContext = useContext(AppContext);
-    return (
-        <FlexWrapper gap={1}>
-            <Typography>{mapping.rootFolderName}</Typography>
-            {appContext.isFolderSyncRunning &&
-                watchFolderService.isMappingSyncInProgress(mapping) && (
-                    <CircularProgress size={12} />
-                )}
-        </FlexWrapper>
-    );
-}

web/apps/photos/src/components/WatchFolder/mappingEntry/index.tsx

@@ -1,26 +1,34 @@
 import {
+    FlexWrapper,
     HorizontalFlex,
     SpaceBetweenFlex,
 } from "@ente/shared/components/Container";
+import OverflowMenu from "@ente/shared/components/OverflowMenu/menu";
+import { OverflowMenuOption } from "@ente/shared/components/OverflowMenu/option";
+import DoNotDisturbOutlinedIcon from "@mui/icons-material/DoNotDisturbOutlined";
 import FolderCopyOutlinedIcon from "@mui/icons-material/FolderCopyOutlined";
 import FolderOpenIcon from "@mui/icons-material/FolderOpen";
-import { Tooltip, Typography } from "@mui/material";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import { CircularProgress, Tooltip, Typography } from "@mui/material";
+import { UPLOAD_STRATEGY } from "constants/upload";
 import { t } from "i18next";
 import { AppContext } from "pages/_app";
-import React from "react";
+import React, { useContext } from "react";
+import watchFolderService from "services/watchFolder/watchFolderService";
 import { WatchMapping } from "types/watchFolder";
 import { EntryContainer } from "../styledComponents";
-
-import { UPLOAD_STRATEGY } from "constants/upload";
 import { EntryHeading } from "./entryHeading";
 import MappingEntryOptions from "./mappingEntryOptions";
 
-interface Iprops {
+interface MappingEntryProps {
     mapping: WatchMapping;
     handleRemoveMapping: (mapping: WatchMapping) => void;
 }
 
-export function MappingEntry({ mapping, handleRemoveMapping }: Iprops) {
+export function MappingEntry({
+    mapping,
+    handleRemoveMapping,
+}: MappingEntryProps) {
     const appContext = React.useContext(AppContext);
 
     const stopWatching = () => {
@@ -67,3 +75,49 @@ export function MappingEntry({ mapping, handleRemoveMapping }: Iprops) {
         </SpaceBetweenFlex>
     );
 }
+
+interface EntryHeadingProps {
+    mapping: WatchMapping;
+}
+
+export function EntryHeading({ mapping }: EntryHeadingProps) {
+    const appContext = useContext(AppContext);
+    return (
+        <FlexWrapper gap={1}>
+            <Typography>{mapping.rootFolderName}</Typography>
+            {appContext.isFolderSyncRunning &&
+                watchFolderService.isMappingSyncInProgress(mapping) && (
+                    <CircularProgress size={12} />
+                )}
+        </FlexWrapper>
+    );
+}
+
+interface MappingEntryOptionsProps {
+    confirmStopWatching: () => void;
+}
+
+export default function MappingEntryOptions({
+    confirmStopWatching,
+}: MappingEntryOptionsProps) {
+    return (
+        <OverflowMenu
+            menuPaperProps={{
+                sx: {
+                    backgroundColor: (theme) =>
+                        theme.colors.background.elevated2,
+                },
+            }}
+            ariaControls={"watch-mapping-option"}
+            triggerButtonIcon={<MoreHorizIcon />}
+        >
+            <OverflowMenuOption
+                color="critical"
+                onClick={confirmStopWatching}
+                startIcon={<DoNotDisturbOutlinedIcon />}
+            >
+                {t("STOP_WATCHING")}
+            </OverflowMenuOption>
+        </OverflowMenu>
+    );
+}

web/apps/photos/src/components/WatchFolder/mappingEntry/mappingEntryOptions.tsx

@@ -1,33 +0,0 @@
-import { t } from "i18next";
-
-import OverflowMenu from "@ente/shared/components/OverflowMenu/menu";
-import { OverflowMenuOption } from "@ente/shared/components/OverflowMenu/option";
-import DoNotDisturbOutlinedIcon from "@mui/icons-material/DoNotDisturbOutlined";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-
-interface Iprops {
-    confirmStopWatching: () => void;
-}
-
-export default function MappingEntryOptions({ confirmStopWatching }: Iprops) {
-    return (
-        <OverflowMenu
-            menuPaperProps={{
-                sx: {
-                    backgroundColor: (theme) =>
-                        theme.colors.background.elevated2,
-                },
-            }}
-            ariaControls={"watch-mapping-option"}
-            triggerButtonIcon={<MoreHorizIcon />}
-        >
-            <OverflowMenuOption
-                color="critical"
-                onClick={confirmStopWatching}
-                startIcon={<DoNotDisturbOutlinedIcon />}
-            >
-                {t("STOP_WATCHING")}
-            </OverflowMenuOption>
-        </OverflowMenu>
-    );
-}

web/apps/photos/src/components/WatchFolder/mappingList/index.tsx

@@ -1,13 +1,22 @@
+import { FlexWrapper } from "@ente/shared/components/Container";
+import CheckIcon from "@mui/icons-material/Check";
+import { Stack, Typography } from "@mui/material";
+import { t } from "i18next";
 import { WatchMapping } from "types/watchFolder";
+import { NoMappingsContainer } from "../../styledComponents";
 import { MappingEntry } from "../mappingEntry";
 import { MappingsContainer } from "../styledComponents";
 import { NoMappingsContent } from "./noMappingsContent/noMappingsContent";
-interface Iprops {
+
+interface MappingListProps {
     mappings: WatchMapping[];
     handleRemoveWatchMapping: (value: WatchMapping) => void;
 }
 
-export function MappingList({ mappings, handleRemoveWatchMapping }: Iprops) {
+export function MappingList({
+    mappings,
+    handleRemoveWatchMapping,
+}: MappingListProps) {
     return mappings.length === 0 ? (
         <NoMappingsContent />
     ) : (
@@ -24,3 +33,44 @@ export function MappingList({ mappings, handleRemoveWatchMapping }: Iprops) {
         </MappingsContainer>
     );
 }
+
+export function NoMappingsContent() {
+    return (
+        <NoMappingsContainer>
+            <Stack spacing={1}>
+                <Typography variant="large" fontWeight={"bold"}>
+                    {t("NO_FOLDERS_ADDED")}
+                </Typography>
+                <Typography py={0.5} variant={"small"} color="text.muted">
+                    {t("FOLDERS_AUTOMATICALLY_MONITORED")}
+                </Typography>
+                <Typography variant={"small"} color="text.muted">
+                    <FlexWrapper gap={1}>
+                        <CheckmarkIcon />
+                        {t("UPLOAD_NEW_FILES_TO_ENTE")}
+                    </FlexWrapper>
+                </Typography>
+                <Typography variant={"small"} color="text.muted">
+                    <FlexWrapper gap={1}>
+                        <CheckmarkIcon />
+                        {t("REMOVE_DELETED_FILES_FROM_ENTE")}
+                    </FlexWrapper>
+                </Typography>
+            </Stack>
+        </NoMappingsContainer>
+    );
+}
+
+export function CheckmarkIcon() {
+    return (
+        <CheckIcon
+            fontSize="small"
+            sx={{
+                display: "inline",
+                fontSize: "15px",
+
+                color: (theme) => theme.palette.secondary.main,
+            }}
+        />
+    );
+}

web/apps/photos/src/components/WatchFolder/mappingList/noMappingsContent/checkmarkIcon.tsx

@@ -1,15 +0,0 @@
-import CheckIcon from "@mui/icons-material/Check";
-
-export function CheckmarkIcon() {
-    return (
-        <CheckIcon
-            fontSize="small"
-            sx={{
-                display: "inline",
-                fontSize: "15px",
-
-                color: (theme) => theme.palette.secondary.main,
-            }}
-        />
-    );
-}

web/apps/photos/src/components/WatchFolder/mappingList/noMappingsContent/noMappingsContent.tsx

@@ -1,33 +0,0 @@
-import { Stack, Typography } from "@mui/material";
-import { t } from "i18next";
-
-import { FlexWrapper } from "@ente/shared/components/Container";
-import { NoMappingsContainer } from "../../styledComponents";
-import { CheckmarkIcon } from "./checkmarkIcon";
-
-export function NoMappingsContent() {
-    return (
-        <NoMappingsContainer>
-            <Stack spacing={1}>
-                <Typography variant="large" fontWeight={"bold"}>
-                    {t("NO_FOLDERS_ADDED")}
-                </Typography>
-                <Typography py={0.5} variant={"small"} color="text.muted">
-                    {t("FOLDERS_AUTOMATICALLY_MONITORED")}
-                </Typography>
-                <Typography variant={"small"} color="text.muted">
-                    <FlexWrapper gap={1}>
-                        <CheckmarkIcon />
-                        {t("UPLOAD_NEW_FILES_TO_ENTE")}
-                    </FlexWrapper>
-                </Typography>
-                <Typography variant={"small"} color="text.muted">
-                    <FlexWrapper gap={1}>
-                        <CheckmarkIcon />
-                        {t("REMOVE_DELETED_FILES_FROM_ENTE")}
-                    </FlexWrapper>
-                </Typography>
-            </Stack>
-        </NoMappingsContainer>
-    );
-}