[web] Minor drawer related refactoring (#3891)

Non functional
ente-io · Oct 30, 2024 · d4587ab · d4587ab
2 parents 7f3996c + 4e47d85
commit d4587ab
Show file tree

Hide file tree

Showing 17 changed files with 223 additions and 221 deletions.
diff --git a/web/apps/accounts/src/pages/passkeys/index.tsx b/web/apps/accounts/src/pages/passkeys/index.tsx
@@ -1,5 +1,5 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import { errorDialogAttributes } from "@/base/components/utils/dialog";
 import log from "@/base/log";
@@ -283,7 +283,7 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
 
     return (
         <>
-            <EnteDrawer anchor="right" {...{ open, onClose }}>
+            <SidebarDrawer anchor="right" {...{ open, onClose }}>
                 {token && passkey && (
                     <Stack spacing={"4px"} py={"12px"}>
                         <Titlebar
@@ -312,7 +312,7 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
                         </MenuItemGroup>
                     </Stack>
                 )}
-            </EnteDrawer>
+            </SidebarDrawer>
 
             {token && passkey && (
                 <RenamePasskeyDialog

diff --git a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipant.tsx b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipant.tsx
@@ -1,4 +1,4 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import { COLLECTION_ROLE, type Collection } from "@/media/collection";
 import { DialogProps, Stack } from "@mui/material";
@@ -87,38 +87,36 @@ export default function AddParticipant({
     };
 
     return (
-        <>
-            <EnteDrawer anchor="right" open={open} onClose={handleDrawerClose}>
-                <Stack spacing={"4px"} py={"12px"}>
-                    <Titlebar
-                        onClose={onClose}
-                        title={
-                            type === COLLECTION_ROLE.VIEWER
-                                ? t("ADD_VIEWERS")
-                                : t("ADD_COLLABORATORS")
-                        }
-                        onRootClose={handleRootClose}
-                        caption={collection.name}
-                    />
-                    <AddParticipantForm
-                        onClose={onClose}
-                        callback={collectionShare}
-                        optionsList={nonSharedEmails}
-                        placeholder={t("ENTER_EMAIL")}
-                        fieldType="email"
-                        buttonText={
-                            type === COLLECTION_ROLE.VIEWER
-                                ? t("ADD_VIEWERS")
-                                : t("ADD_COLLABORATORS")
-                        }
-                        submitButtonProps={{
-                            size: "large",
-                            sx: { mt: 1, mb: 2 },
-                        }}
-                        disableAutoFocus
-                    />
-                </Stack>
-            </EnteDrawer>
-        </>
+        <SidebarDrawer anchor="right" open={open} onClose={handleDrawerClose}>
+            <Stack spacing={"4px"} py={"12px"}>
+                <Titlebar
+                    onClose={onClose}
+                    title={
+                        type === COLLECTION_ROLE.VIEWER
+                            ? t("ADD_VIEWERS")
+                            : t("ADD_COLLABORATORS")
+                    }
+                    onRootClose={handleRootClose}
+                    caption={collection.name}
+                />
+                <AddParticipantForm
+                    onClose={onClose}
+                    callback={collectionShare}
+                    optionsList={nonSharedEmails}
+                    placeholder={t("ENTER_EMAIL")}
+                    fieldType="email"
+                    buttonText={
+                        type === COLLECTION_ROLE.VIEWER
+                            ? t("ADD_VIEWERS")
+                            : t("ADD_COLLABORATORS")
+                    }
+                    submitButtonProps={{
+                        size: "large",
+                        sx: { mt: 1, mb: 2 },
+                    }}
+                    disableAutoFocus
+                />
+            </Stack>
+        </SidebarDrawer>
     );
 }
diff --git a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageEmailShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageEmailShare.tsx
@@ -1,9 +1,9 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import {
     MenuItemDivider,
     MenuItemGroup,
     MenuSectionTitle,
 } from "@/base/components/Menu";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import {
     COLLECTION_ROLE,
@@ -116,7 +116,11 @@ export default function ManageEmailShare({
 
     return (
         <>
-            <EnteDrawer anchor="right" open={open} onClose={handleDrawerClose}>
+            <SidebarDrawer
+                anchor="right"
+                open={open}
+                onClose={handleDrawerClose}
+            >
                 <Stack spacing={"4px"} py={"12px"}>
                     <Titlebar
                         onClose={onClose}
@@ -210,7 +214,7 @@ export default function ManageEmailShare({
                         </Stack>
                     </Stack>
                 </Stack>
-            </EnteDrawer>
+            </SidebarDrawer>
             <ManageParticipant
                 collectionUnshare={collectionUnshare}
                 open={manageParticipantView}

diff --git a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageParticipant.tsx b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageParticipant.tsx
@@ -1,5 +1,5 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import log from "@/base/log";
 import type { Collection, CollectionUser } from "@/media/collection";
@@ -129,82 +129,81 @@ export default function ManageParticipant({
     }
 
     return (
-        <>
-            <EnteDrawer anchor="right" open={open} onClose={handleDrawerClose}>
-                <Stack spacing={"4px"} py={"12px"}>
-                    <Titlebar
-                        onClose={onClose}
-                        title={t("MANAGE")}
-                        onRootClose={onRootClose}
-                        caption={selectedParticipant.email}
-                    />
-
-                    <Stack py={"20px"} px={"8px"} spacing={"32px"}>
-                        <Stack>
+        <SidebarDrawer anchor="right" open={open} onClose={handleDrawerClose}>
+            <Stack spacing={"4px"} py={"12px"}>
+                <Titlebar
+                    onClose={onClose}
+                    title={t("MANAGE")}
+                    onRootClose={onRootClose}
+                    caption={selectedParticipant.email}
+                />
+
+                <Stack py={"20px"} px={"8px"} spacing={"32px"}>
+                    <Stack>
+                        <Typography
+                            color="text.muted"
+                            variant="small"
+                            padding={1}
+                        >
+                            {t("ADDED_AS")}
+                        </Typography>
+
+                        <MenuItemGroup>
+                            <EnteMenuItem
+                                fontWeight="normal"
+                                onClick={handleRoleChange("COLLABORATOR")}
+                                label={"Collaborator"}
+                                startIcon={<ModeEditIcon />}
+                                endIcon={
+                                    selectedParticipant.role ===
+                                        "COLLABORATOR" && <DoneIcon />
+                                }
+                            />
+                            <MenuItemDivider hasIcon />
+
+                            <EnteMenuItem
+                                fontWeight="normal"
+                                onClick={handleRoleChange("VIEWER")}
+                                label={"Viewer"}
+                                startIcon={<PhotoIcon />}
+                                endIcon={
+                                    selectedParticipant.role === "VIEWER" && (
+                                        <DoneIcon />
+                                    )
+                                }
+                            />
+                        </MenuItemGroup>
+
+                        <Typography
+                            color="text.muted"
+                            variant="small"
+                            padding={1}
+                        >
+                            {t("COLLABORATOR_RIGHTS")}
+                        </Typography>
+
+                        <Stack py={"30px"}>
                             <Typography
                                 color="text.muted"
                                 variant="small"
                                 padding={1}
                             >
-                                {t("ADDED_AS")}
+                                {t("REMOVE_PARTICIPANT_HEAD")}
                             </Typography>
 
                             <MenuItemGroup>
                                 <EnteMenuItem
+                                    color="critical"
                                     fontWeight="normal"
-                                    onClick={handleRoleChange("COLLABORATOR")}
-                                    label={"Collaborator"}
-                                    startIcon={<ModeEditIcon />}
-                                    endIcon={
-                                        selectedParticipant.role ===
-                                            "COLLABORATOR" && <DoneIcon />
-                                    }
-                                />
-                                <MenuItemDivider hasIcon />
-
-                                <EnteMenuItem
-                                    fontWeight="normal"
-                                    onClick={handleRoleChange("VIEWER")}
-                                    label={"Viewer"}
-                                    startIcon={<PhotoIcon />}
-                                    endIcon={
-                                        selectedParticipant.role ===
-                                            "VIEWER" && <DoneIcon />
-                                    }
+                                    onClick={removeParticipant}
+                                    label={"Remove"}
+                                    startIcon={<BlockIcon />}
                                 />
                             </MenuItemGroup>
-
-                            <Typography
-                                color="text.muted"
-                                variant="small"
-                                padding={1}
-                            >
-                                {t("COLLABORATOR_RIGHTS")}
-                            </Typography>
-
-                            <Stack py={"30px"}>
-                                <Typography
-                                    color="text.muted"
-                                    variant="small"
-                                    padding={1}
-                                >
-                                    {t("REMOVE_PARTICIPANT_HEAD")}
-                                </Typography>
-
-                                <MenuItemGroup>
-                                    <EnteMenuItem
-                                        color="critical"
-                                        fontWeight="normal"
-                                        onClick={removeParticipant}
-                                        label={"Remove"}
-                                        startIcon={<BlockIcon />}
-                                    />
-                                </MenuItemGroup>
-                            </Stack>
                         </Stack>
                     </Stack>
                 </Stack>
-            </EnteDrawer>
-        </>
+            </Stack>
+        </SidebarDrawer>
     );
 }
diff --git a/web/apps/photos/src/components/Collections/CollectionShare/index.tsx b/web/apps/photos/src/components/Collections/CollectionShare/index.tsx
@@ -1,4 +1,4 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import type { Collection } from "@/media/collection";
 import type { CollectionSummary } from "@/new/photos/services/collection/ui";
@@ -32,7 +32,7 @@ function CollectionShare({ collectionSummary, ...props }: Props) {
     const { type } = collectionSummary;
 
     return (
-        <EnteDrawer
+        <SidebarDrawer
             anchor="right"
             open={props.open}
             onClose={handleDrawerClose}
@@ -75,7 +75,7 @@ function CollectionShare({ collectionSummary, ...props }: Props) {
                     )}
                 </Stack>
             </Stack>
-        </EnteDrawer>
+        </SidebarDrawer>
     );
 }
 export default CollectionShare;
diff --git a/...apps/photos/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx b/...apps/photos/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx
@@ -1,5 +1,5 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import type {
     Collection,
@@ -68,7 +68,7 @@ export function ManageDeviceLimit({
                 endIcon={<ChevronRight />}
             />
 
-            <EnteDrawer
+            <SidebarDrawer
                 anchor="right"
                 open={isChangeDeviceLimitVisible}
                 onClose={handleDrawerClose}
@@ -100,7 +100,7 @@ export function ManageDeviceLimit({
                         </MenuItemGroup>
                     </Stack>
                 </Stack>
-            </EnteDrawer>
+            </SidebarDrawer>
         </>
     );
 }