From 2455d345533d70451c762b98a33365ad49472c40 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 13:56:58 +0530 Subject: [PATCH 01/14] Simplify --- .../Collections/CollectionShare.tsx | 29 +++++++------------ web/apps/photos/src/pages/gallery.tsx | 8 ++--- 2 files changed, 14 insertions(+), 23 deletions(-) diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx index 3d3fe1ed87..414d96d092 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx @@ -49,7 +49,6 @@ import { PublicLinkCreated } from "ente-new/photos/components/share/PublicLinkCr import { avatarTextColor } from "ente-new/photos/services/avatar"; import type { CollectionSummary } from "ente-new/photos/services/collection/ui"; import { usePhotosAppContext } from "ente-new/photos/types/context"; -import { FlexWrapper } from "ente-shared/components/Container"; import SingleInputForm, { type SingleInputFormProps, } from "ente-shared/components/SingleInputForm"; @@ -697,23 +696,17 @@ const AddParticipantForm: React.FC = (props) => { )} - - - - {props.buttonText} - - - + + + {props.buttonText} + + )} diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index f777aaea92..586787bc46 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -101,7 +101,6 @@ import { verifyStripeSubscription, } from "ente-new/photos/services/user-details"; import { usePhotosAppContext } from "ente-new/photos/types/context"; -import { FlexWrapper } from "ente-shared/components/Container"; import { getData } from "ente-shared/storage/localStorage"; import { getToken, @@ -1250,16 +1249,15 @@ const HiddenSectionNavbarContents: React.FC< direction="row" sx={(theme) => ({ gap: "24px", - width: "100%", + flex: 1, + alignItems: "center", background: theme.vars.palette.background.default, })} > - - {t("section_hidden")} - + {t("section_hidden")} ); From 68aaedc2d9137d3941bbf51491a10449991c1c18 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 14:13:07 +0530 Subject: [PATCH 02/14] abstraction --- web/apps/photos/src/components/Sidebar.tsx | 373 ++++++++---------- .../base/components/mui/SidebarDrawer.tsx | 22 ++ .../photos/components/sidebar/MLSettings.tsx | 31 +- .../components/sidebar/TwoFactorSettings.tsx | 26 +- 4 files changed, 214 insertions(+), 238 deletions(-) diff --git a/web/apps/photos/src/components/Sidebar.tsx b/web/apps/photos/src/components/Sidebar.tsx index 075aec2b8b..d82cacc3c7 100644 --- a/web/apps/photos/src/components/Sidebar.tsx +++ b/web/apps/photos/src/components/Sidebar.tsx @@ -41,9 +41,8 @@ import { ActivityIndicator } from "ente-base/components/mui/ActivityIndicator"; import { DialogCloseIconButton } from "ente-base/components/mui/DialogCloseIconButton"; import { FocusVisibleButton } from "ente-base/components/mui/FocusVisibleButton"; import { - NestedSidebarDrawer, SidebarDrawer, - SidebarDrawerTitlebar, + TitledNestedSidebarDrawer, type NestedSidebarDrawerVisibilityProps, } from "ente-base/components/mui/SidebarDrawer"; import { useIsSmallWidth } from "ente-base/components/utils/hooks"; @@ -658,6 +657,7 @@ const InfoSection: React.FC = () => { type AccountProps = NestedSidebarDrawerVisibilityProps & Pick; + const Account: React.FC = ({ open, onClose, @@ -689,55 +689,49 @@ const Account: React.FC = ({ }; return ( - - - - - - - } - label={t("recovery_key")} - onClick={showRecoveryKey} - /> - - - - - - - - - - - - - - - + + + + + } + label={t("recovery_key")} + onClick={showRecoveryKey} + /> + + + + + + + + + + + + + + = ({ {...deleteAccountVisibilityProps} {...{ onAuthenticateUser }} /> - + ); }; @@ -782,51 +776,48 @@ const Preferences: React.FC = ({ }; return ( - - - + + + + + {isMLSupported && ( + + } + label={t("ml_search")} + onClick={showMLSettings} + /> + + )} + } + label={t("map")} + onClick={showMapSettings} /> - - - - - {isMLSupported && ( + } + label={t("advanced")} + onClick={showAdvancedSettings} + /> + {isHLSGenerationSupported && ( + + }> + {t("labs")} + - } - label={t("ml_search")} - onClick={showMLSettings} + void toggleHLSGeneration()} /> - )} - } - label={t("map")} - onClick={showMapSettings} - /> - } - label={t("advanced")} - onClick={showAdvancedSettings} - /> - {isHLSGenerationSupported && ( - - }> - {t("labs")} - - - void toggleHLSGeneration()} - /> - - - )} - + + )} = ({ {...mlSettingsVisibilityProps} onRootClose={handleRootClose} /> - + ); }; @@ -974,28 +965,21 @@ const MapSettings: React.FC = ({ }; return ( - - - - - - - - - + + + + - + ); }; @@ -1032,41 +1016,35 @@ const AdvancedSettings: React.FC = ({ void electron?.toggleAutoLaunch().then(refreshAutoLaunchEnabled); return ( - - - - - - - - - - {t("faster_upload_description")} - - - {electron && ( - - - - )} + + + + + + + {t("faster_upload_description")} + + {electron && ( + + + + )} - + ); }; @@ -1106,71 +1084,68 @@ const Help: React.FC = ({ }; return ( - - - + + + } + label={t("ente_help")} + onClick={handleHelp} + /> + + + } + label={t("blog")} + onClick={handleBlog} + /> + + } + label={t("request_feature")} + onClick={handleRequestFeature} + /> + + + } + label={ + + + {t("support")} + + + } + onClick={handleSupport} + /> + + + + + {t("view_logs")} + + } + onClick={confirmViewLogs} /> - - - } - label={t("ente_help")} - onClick={handleHelp} - /> - - - } - label={t("blog")} - onClick={handleBlog} - /> - - } - label={t("request_feature")} - onClick={handleRequestFeature} - /> - - - } - label={ - - - {t("support")} - - - } - onClick={handleSupport} - /> - - - + {isDevBuildAndUser() && ( - {t("view_logs")} + {ut("Test upload")} } - onClick={confirmViewLogs} + onClick={testUpload} /> - {isDevBuildAndUser() && ( - - {ut("Test upload")} - - } - onClick={testUpload} - /> - )} - + )} - + ); }; diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx index 73b86d9869..c3ac89d176 100644 --- a/web/packages/base/components/mui/SidebarDrawer.tsx +++ b/web/packages/base/components/mui/SidebarDrawer.tsx @@ -179,3 +179,25 @@ export const SidebarDrawerTitlebar: React.FC = ({ ); + +/** + * A variant of {@link NestedSidebarDrawer} that additionally shows a title. + * + * {@link NestedSidebarDrawer} is for second level, nested drawers that are + * shown atop an already visible {@link SidebarDrawer}. This component combines + * the {@link NestedSidebarDrawer} with a {@link SidebarDrawerTitlebar} and some + * standard spacing, so that the caller can just provide the content as the + * children. + */ +export const TitledNestedSidebarDrawer: React.FC< + React.PropsWithChildren< + NestedSidebarDrawerVisibilityProps & SidebarDrawerTitlebarProps + > +> = ({ open, onClose, onRootClose, children, ...rest }) => ( + + + + {children} + + +); diff --git a/web/packages/new/photos/components/sidebar/MLSettings.tsx b/web/packages/new/photos/components/sidebar/MLSettings.tsx index 98b3319d96..9951fafad3 100644 --- a/web/packages/new/photos/components/sidebar/MLSettings.tsx +++ b/web/packages/new/photos/components/sidebar/MLSettings.tsx @@ -13,8 +13,7 @@ import { RowButtonGroup, RowSwitch } from "ente-base/components/RowButton"; import { ActivityIndicator } from "ente-base/components/mui/ActivityIndicator"; import { FocusVisibleButton } from "ente-base/components/mui/FocusVisibleButton"; import { - NestedSidebarDrawer, - SidebarDrawerTitlebar, + TitledNestedSidebarDrawer, type NestedSidebarDrawerVisibilityProps, } from "ente-base/components/mui/SidebarDrawer"; import { useBaseContext } from "ente-base/context"; @@ -66,19 +65,13 @@ export const MLSettings: React.FC = ({ return ( <> - - - - {component} - - + {component} + = ({ }; return ( - - - - - - + + ); }; diff --git a/web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx b/web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx index 5338951cae..3e88743ece 100644 --- a/web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx +++ b/web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx @@ -8,8 +8,7 @@ import { } from "ente-base/components/RowButton"; import { FocusVisibleButton } from "ente-base/components/mui/FocusVisibleButton"; import { - NestedSidebarDrawer, - SidebarDrawerTitlebar, + TitledNestedSidebarDrawer, type NestedSidebarDrawerVisibilityProps, } from "ente-base/components/mui/SidebarDrawer"; import { useBaseContext } from "ente-base/context"; @@ -52,24 +51,17 @@ export const TwoFactorSettings: React.FC< }; return ( - - - - - {isTwoFactorEnabled ? ( - - ) : ( - - )} - - + {isTwoFactorEnabled ? ( + + ) : ( + + )} + ); }; From 79f5d6763c9cb48813f073ce6e00c360bad81169 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 15:15:33 +0530 Subject: [PATCH 03/14] Use --- .../base/components/mui/SidebarDrawer.tsx | 24 +++++++++++++++++++ web/packages/gallery/components/FileInfo.tsx | 13 ++++++---- 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx index c3ac89d176..8760920d86 100644 --- a/web/packages/base/components/mui/SidebarDrawer.tsx +++ b/web/packages/base/components/mui/SidebarDrawer.tsx @@ -180,6 +180,30 @@ export const SidebarDrawerTitlebar: React.FC = ({ ); +/** + * A variant of {@link SidebarDrawerTitlebar} with a close button where the back + * button is, and none of the other whistles. + * + * This is currently only used by the top level "File info" screen; the reason + * for keeping this here so that it also gets modified when we modify the + * spacing etc for {@link SidebarDrawerTitlebar} so that they both look visually + * similar (apart from the obvious icon differences). + */ +export const SidebarDrawerTitlebarClose: React.FC< + Pick +> = ({ title, onClose }) => ( + + + + + + + + {title} + + +); + /** * A variant of {@link NestedSidebarDrawer} that additionally shows a title. * diff --git a/web/packages/gallery/components/FileInfo.tsx b/web/packages/gallery/components/FileInfo.tsx index 379633112c..5f32c37bdb 100644 --- a/web/packages/gallery/components/FileInfo.tsx +++ b/web/packages/gallery/components/FileInfo.tsx @@ -38,9 +38,12 @@ import { isDesktop } from "ente-base/app"; import { LinkButtonUndecorated } from "ente-base/components/LinkButton"; import { type ButtonishProps } from "ente-base/components/mui"; import { ActivityIndicator } from "ente-base/components/mui/ActivityIndicator"; -import { SidebarDrawer } from "ente-base/components/mui/SidebarDrawer"; +import { + SidebarDrawer, + SidebarDrawerTitlebar, + SidebarDrawerTitlebarClose, +} from "ente-base/components/mui/SidebarDrawer"; import { SingleInputForm } from "ente-base/components/SingleInputForm"; -import { Titlebar } from "ente-base/components/Titlebar"; import { EllipsizedTypography } from "ente-base/components/Typography"; import { useModalVisibility, @@ -264,7 +267,7 @@ export const FileInfo: React.FC = ({ return ( - + = ({ return ( - } From 13ed68c79e18ad4544b5b098e0836660879739a6 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 15:20:08 +0530 Subject: [PATCH 04/14] Use right --- .../Collections/CollectionShare.tsx | 37 +++++++------------ .../base/components/mui/SidebarDrawer.tsx | 8 ++-- 2 files changed, 18 insertions(+), 27 deletions(-) diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx index 414d96d092..6e81c7d905 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx @@ -20,6 +20,7 @@ import { LoadingButton } from "ente-base/components/mui/LoadingButton"; import { NestedSidebarDrawer, SidebarDrawer, + TitledNestedSidebarDrawer, } from "ente-base/components/mui/SidebarDrawer"; import { RowButton, @@ -485,6 +486,8 @@ const AddParticipant: React.FC = ({ onRootClose(); }; + const title = type == "VIEWER" ? t("add_viewers") : t("add_collaborators"); + const collectionShare: AddParticipantFormProps["callback"] = async ({ email, emails, @@ -524,34 +527,20 @@ const AddParticipant: React.FC = ({ }; return ( - - - - - - + + ); }; diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx index 8760920d86..5baa666d45 100644 --- a/web/packages/base/components/mui/SidebarDrawer.tsx +++ b/web/packages/base/components/mui/SidebarDrawer.tsx @@ -215,10 +215,12 @@ export const SidebarDrawerTitlebarClose: React.FC< */ export const TitledNestedSidebarDrawer: React.FC< React.PropsWithChildren< - NestedSidebarDrawerVisibilityProps & SidebarDrawerTitlebarProps + NestedSidebarDrawerVisibilityProps & + Pick & + SidebarDrawerTitlebarProps > -> = ({ open, onClose, onRootClose, children, ...rest }) => ( - +> = ({ open, onClose, onRootClose, anchor, children, ...rest }) => ( + {children} From d47c96aa3f149da46adc247ce6db4dcf1153a9ab Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 15:22:23 +0530 Subject: [PATCH 05/14] Use --- .../Collections/CollectionShare.tsx | 44 ++++++++----------- 1 file changed, 19 insertions(+), 25 deletions(-) diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx index 6e81c7d905..10169a117b 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx @@ -1452,38 +1452,32 @@ const ManageLinkExpiry: React.FC = ({ } /> - - - - - - {shareExpireOption.map((item, index) => ( - - - {index !== shareExpireOption.length - 1 && ( - + + + {shareExpireOption.map((item, index) => ( + + - ))} - - + label={item.label} + /> + {index !== shareExpireOption.length - 1 && ( + + )} + + ))} + - + ); }; From 923a2a60fe17ad5be6c740867c91ca0d5977fa78 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 15:28:36 +0530 Subject: [PATCH 06/14] re --- .../Collections/CollectionShare.tsx | 34 ++++++------------- 1 file changed, 11 insertions(+), 23 deletions(-) diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx index 10169a117b..b7c40968e7 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx @@ -1402,6 +1402,11 @@ const ManageLinkExpiry: React.FC = ({ updatePublicShareURLHelper, onRootClose, }) => { + const { show: showExpiryOptions, props: expiryOptionsVisibilityProps } = + useModalVisibility(); + + const options = useMemo(() => shareExpiryOptions(), []); + const updateDeviceExpiry = async (optionFn) => { return updatePublicShareURLHelper({ collectionID: collection.id, @@ -1409,33 +1414,17 @@ const ManageLinkExpiry: React.FC = ({ }); }; - const [shareExpiryOptionsModalView, setShareExpiryOptionsModalView] = - useState(false); - - const shareExpireOption = useMemo(() => shareExpiryOptions(), []); - - const closeShareExpiryOptionsModalView = () => - setShareExpiryOptionsModalView(false); - - const openShareExpiryOptionsModalView = () => - setShareExpiryOptionsModalView(true); - const changeShareExpiryValue = (value: number) => async () => { await updateDeviceExpiry(value); publicShareProp.validTill = value; - setShareExpiryOptionsModalView(false); - }; - - const handleRootClose = () => { - closeShareExpiryOptionsModalView(); - onRootClose(); + expiryOptionsVisibilityProps.onClose(); }; return ( <> } label={t("link_expiry")} color={ @@ -1454,14 +1443,13 @@ const ManageLinkExpiry: React.FC = ({ - {shareExpireOption.map((item, index) => ( + {options.map((item, index) => ( = ({ )} label={item.label} /> - {index !== shareExpireOption.length - 1 && ( + {index !== options.length - 1 && ( )} From d5a75707f39c1569a241db6129867bedbd394de5 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 15:47:57 +0530 Subject: [PATCH 07/14] Update --- .../Collections/CollectionShare.tsx | 86 +++++++------------ 1 file changed, 33 insertions(+), 53 deletions(-) diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx index b7c40968e7..a206346f7e 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx @@ -1449,16 +1449,14 @@ const ManageLinkExpiry: React.FC = ({ > - {options.map((item, index) => ( - + {options.map(({ label, value }, index) => ( + - {index !== options.length - 1 && ( + {index != options.length - 1 && ( )} @@ -1470,7 +1468,7 @@ const ManageLinkExpiry: React.FC = ({ ); }; -export const shareExpiryOptions = () => [ +const shareExpiryOptions = () => [ { label: t("never"), value: () => 0 }, { label: t("after_time.hour"), value: () => microsecsAfter("hour") }, { label: t("after_time.day"), value: () => microsecsAfter("day") }, @@ -1514,29 +1512,21 @@ const ManageDeviceLimit: React.FC = ({ updatePublicShareURLHelper, onRootClose, }) => { + const { show: showDeviceOptions, props: deviceOptionsVisibilityProps } = + useModalVisibility(); + + const options = useMemo(() => getDeviceLimitOptions(), []); + const updateDeviceLimit = async (newLimit: number) => { return updatePublicShareURLHelper({ collectionID: collection.id, deviceLimit: newLimit, }); }; - const [isChangeDeviceLimitVisible, setIsChangeDeviceLimitVisible] = - useState(false); - const deviceLimitOptions = useMemo(() => getDeviceLimitOptions(), []); - - const closeDeviceLimitChangeModal = () => - setIsChangeDeviceLimitVisible(false); - const openDeviceLimitChangeModalView = () => - setIsChangeDeviceLimitVisible(true); const changeDeviceLimitValue = (value: number) => async () => { await updateDeviceLimit(value); - setIsChangeDeviceLimitVisible(false); - }; - - const handleRootClose = () => { - closeDeviceLimitChangeModal(); - onRootClose(); + deviceOptionsVisibilityProps.onClose(); }; return ( @@ -1548,42 +1538,32 @@ const ManageDeviceLimit: React.FC = ({ ? t("none") : publicShareProp.deviceLimit.toString() } - onClick={openDeviceLimitChangeModalView} + onClick={showDeviceOptions} endIcon={} /> - - - - - - {deviceLimitOptions.map((item, index) => ( - - - {index !== - deviceLimitOptions.length - 1 && ( - - )} - - ))} - - + + + {options.map(({ label, value }, index) => ( + + + {index != options.length - 1 && ( + + )} + + ))} + - + ); }; From 1afc2e31bf5a8a95bb522720b7358f191bd5062a Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 15:51:07 +0530 Subject: [PATCH 08/14] Inline --- .../src/components/Collections/CollectionShare.tsx | 9 +++++++-- web/apps/photos/src/utils/collection.ts | 9 --------- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx index a206346f7e..7070835a07 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx @@ -66,7 +66,6 @@ import { unshareCollection, updateShareableURL, } from "services/collectionService"; -import { getDeviceLimitOptions } from "utils/collection"; import * as Yup from "yup"; interface CollectionShareProps { @@ -1515,7 +1514,7 @@ const ManageDeviceLimit: React.FC = ({ const { show: showDeviceOptions, props: deviceOptionsVisibilityProps } = useModalVisibility(); - const options = useMemo(() => getDeviceLimitOptions(), []); + const options = useMemo(() => deviceLimitOptions(), []); const updateDeviceLimit = async (newLimit: number) => { return updatePublicShareURLHelper({ @@ -1568,6 +1567,12 @@ const ManageDeviceLimit: React.FC = ({ ); }; +const deviceLimitOptions = () => + [0, 2, 5, 10, 25, 50].map((i) => ({ + label: i == 0 ? t("none") : i.toString(), + value: i, + })); + interface ManageDownloadAccessProps { publicShareProp: PublicURL; collection: Collection; diff --git a/web/apps/photos/src/utils/collection.ts b/web/apps/photos/src/utils/collection.ts index 5e1b46681c..ca9518abdd 100644 --- a/web/apps/photos/src/utils/collection.ts +++ b/web/apps/photos/src/utils/collection.ts @@ -183,15 +183,6 @@ async function createCollectionDownloadFolder( return collectionDownloadPath; } -const _intSelectOption = (i: number) => { - const label = i === 0 ? t("none") : i.toString(); - return { label, value: i }; -}; - -export function getDeviceLimitOptions() { - return [0, 2, 5, 10, 25, 50].map((i) => _intSelectOption(i)); -} - export const changeCollectionVisibility = async ( collection: Collection, visibility: ItemVisibility, From 76d7f039ea3f965153be1d926cf377c3079971d3 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 15:54:20 +0530 Subject: [PATCH 09/14] Swap --- .../Collections/CollectionShare.tsx | 400 ++++++++---------- web/apps/photos/src/utils/collection.ts | 1 - 2 files changed, 186 insertions(+), 215 deletions(-) diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx index 7070835a07..28e9bd656b 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx @@ -18,7 +18,6 @@ import TextField from "@mui/material/TextField"; import Avatar from "components/pages/gallery/Avatar"; import { LoadingButton } from "ente-base/components/mui/LoadingButton"; import { - NestedSidebarDrawer, SidebarDrawer, TitledNestedSidebarDrawer, } from "ente-base/components/mui/SidebarDrawer"; @@ -776,104 +775,95 @@ const ManageEmailShare: React.FC = ({ ); setManageParticipantView(true); }; + const closeManageParticipant = () => { setManageParticipantView(false); }; return ( <> - - - - - - } - > - {t("owner")} - - - } - label={isOwner ? t("you") : ownerEmail} - /> - - - - }> - {t("collaborators")} - - - {collaborators.map((item) => ( - - - openManageParticipant(item) - } - label={item} - startIcon={} - endIcon={} - /> - - - ))} + + + }> + {t("owner")} + + + } + label={isOwner ? t("you") : ownerEmail} + /> + + + + }> + {t("collaborators")} + + + {collaborators.map((item) => ( + + + openManageParticipant(item) + } + label={item} + startIcon={} + endIcon={} + /> + + + ))} - } - onClick={openAddCollab} - label={ - collaborators?.length - ? t("add_more") - : t("add_collaborators") - } - /> - - - - }> - {t("viewers")} - - - {viewers.map((item) => ( - - - openManageParticipant(item) - } - label={item} - startIcon={} - endIcon={} - /> - - - ))} - } - onClick={openAddViewer} - label={ - viewers?.length - ? t("add_more") - : t("add_viewers") - } - /> - - + } + onClick={openAddCollab} + label={ + collaborators?.length + ? t("add_more") + : t("add_collaborators") + } + /> + + + + }> + {t("viewers")} + + + {viewers.map((item) => ( + + + openManageParticipant(item) + } + label={item} + startIcon={} + endIcon={} + /> + + + ))} + } + onClick={openAddViewer} + label={ + viewers?.length + ? t("add_more") + : t("add_viewers") + } + /> + - + = ({ } return ( - - - + + + + {t("added_as")} + - - + + } + endIcon={ + selectedParticipant.role === "COLLABORATOR" && ( + + ) + } + /> + + + } + endIcon={ + selectedParticipant.role == "VIEWER" && ( + + ) + } + /> + + + + {t("collaborator_hint")} + + + - {t("added_as")} + {t("remove_participant")} } - endIcon={ - selectedParticipant.role === - "COLLABORATOR" && - } - /> - - - } - endIcon={ - selectedParticipant.role == "VIEWER" && ( - - ) - } + onClick={removeParticipant} + label={"Remove"} + startIcon={} /> - - - {t("collaborator_hint")} - - - - - {t("remove_participant")} - - - - } - /> - - - + ); }; @@ -1270,87 +1254,75 @@ const ManagePublicShareOptions: React.FC = ({ }; return ( - - - + - - - + + - - - - - - - - - - ) : ( - - ) - } - onClick={handleCopyLink} - label={t("copy_link")} - /> - - - } - onClick={disablePublicSharing} - label={t("remove_link")} - /> - - {sharableLinkError && ( - - {sharableLinkError} - - )} - + + + + + + + + ) : ( + + ) + } + onClick={handleCopyLink} + label={t("copy_link")} + /> + + + } + onClick={disablePublicSharing} + label={t("remove_link")} + /> + + {sharableLinkError && ( + + {sharableLinkError} + + )} - + ); }; diff --git a/web/apps/photos/src/utils/collection.ts b/web/apps/photos/src/utils/collection.ts index ca9518abdd..7ce407387d 100644 --- a/web/apps/photos/src/utils/collection.ts +++ b/web/apps/photos/src/utils/collection.ts @@ -31,7 +31,6 @@ import { import { safeDirectoryName } from "ente-new/photos/utils/native-fs"; import { getData } from "ente-shared/storage/localStorage"; import type { User } from "ente-shared/user/types"; -import { t } from "i18next"; import { createAlbum, removeFromCollection, From 27d0c8a838bceaffd55289a82f52f916d02e7213 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 16:09:09 +0530 Subject: [PATCH 10/14] Pattern --- .../Collections/CollectionShare.tsx | 39 ++++++++----------- 1 file changed, 17 insertions(+), 22 deletions(-) diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx index 28e9bd656b..92fbd85a25 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx @@ -718,11 +718,12 @@ const ManageEmailShare: React.FC = ({ const { showLoadingBar, hideLoadingBar } = usePhotosAppContext(); const galleryContext = useContext(GalleryContext); - const [addParticipantView, setAddParticipantView] = useState(false); - const [manageParticipantView, setManageParticipantView] = useState(false); - - const closeAddParticipant = () => setAddParticipantView(false); - const openAddParticipant = () => setAddParticipantView(true); + const { show: showAddParticipant, props: addParticipantVisibilityProps } = + useModalVisibility(); + const { + show: showManageParticipant, + props: manageParticipantVisibilityProps, + } = useModalVisibility(); const participantType = useRef<"COLLABORATOR" | "VIEWER">(null); @@ -730,12 +731,12 @@ const ManageEmailShare: React.FC = ({ const openAddCollab = () => { participantType.current = "COLLABORATOR"; - openAddParticipant(); + showAddParticipant(); }; const openAddViewer = () => { participantType.current = "VIEWER"; - openAddParticipant(); + showAddParticipant(); }; const handleRootClose = () => { @@ -773,11 +774,7 @@ const ManageEmailShare: React.FC = ({ selectedParticipant.current = collection.sharees.find( (sharee) => sharee.email === email, ); - setManageParticipantView(true); - }; - - const closeManageParticipant = () => { - setManageParticipantView(false); + showManageParticipant(); }; return ( @@ -864,21 +861,19 @@ const ManageEmailShare: React.FC = ({ - + ); }; From 5171518d9bf461f4215b70ef2a0177a77beba721 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 16:14:59 +0530 Subject: [PATCH 11/14] Replace --- .../Collections/CollectionShare.tsx | 59 ++++++++----------- 1 file changed, 23 insertions(+), 36 deletions(-) diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx index 92fbd85a25..b12eacb9d7 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx @@ -12,13 +12,14 @@ import Photo, { default as PhotoIcon } from "@mui/icons-material/Photo"; import PublicIcon from "@mui/icons-material/Public"; import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline"; import WorkspacesIcon from "@mui/icons-material/Workspaces"; -import { Dialog, DialogProps, Stack, styled, Typography } from "@mui/material"; +import { Dialog, Stack, styled, Typography } from "@mui/material"; import NumberAvatar from "@mui/material/Avatar"; import TextField from "@mui/material/TextField"; import Avatar from "components/pages/gallery/Avatar"; import { LoadingButton } from "ente-base/components/mui/LoadingButton"; import { SidebarDrawer, + SidebarDrawerTitlebar, TitledNestedSidebarDrawer, } from "ente-base/components/mui/SidebarDrawer"; import { @@ -30,9 +31,11 @@ import { RowLabel, RowSwitch, } from "ente-base/components/RowButton"; -import { Titlebar } from "ente-base/components/Titlebar"; import { useClipboardCopy } from "ente-base/components/utils/hooks"; -import { useModalVisibility } from "ente-base/components/utils/modal"; +import { + useModalVisibility, + type ModalVisibilityProps, +} from "ente-base/components/utils/modal"; import { useBaseContext } from "ente-base/context"; import { sharedCryptoWorker } from "ente-base/crypto"; import { isHTTP4xxError } from "ente-base/http"; @@ -67,66 +70,50 @@ import { } from "services/collectionService"; import * as Yup from "yup"; -interface CollectionShareProps { - open: boolean; - onClose: () => void; +type CollectionShareProps = ModalVisibilityProps & { collection: Collection; collectionSummary: CollectionSummary; -} +}; export const CollectionShare: React.FC = ({ + open, + onClose, + collection, collectionSummary, - ...props }) => { - const handleRootClose = () => { - props.onClose(); - }; - const handleDrawerClose: DialogProps["onClose"] = (_, reason) => { - if (reason == "backdropClick") { - handleRootClose(); - } else { - props.onClose(); - } - }; - if (!props.collection || !collectionSummary) { + if (!collection || !collectionSummary) { return <>; } + const { type } = collectionSummary; return ( - + - {type == "incomingShareCollaborator" || type == "incomingShareViewer" ? ( - + ) : ( <> )} From da0d9dfdab41474d4c05cfebe54839ba8abd6d3f Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 16:19:02 +0530 Subject: [PATCH 12/14] Tweak visually --- web/packages/base/components/mui/SidebarDrawer.tsx | 5 +++-- web/packages/gallery/components/FileInfo.tsx | 4 +++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx index 5baa666d45..d77950ebde 100644 --- a/web/packages/base/components/mui/SidebarDrawer.tsx +++ b/web/packages/base/components/mui/SidebarDrawer.tsx @@ -164,19 +164,20 @@ export const SidebarDrawerTitlebar: React.FC = ({ - + {title} {caption} - + ); diff --git a/web/packages/gallery/components/FileInfo.tsx b/web/packages/gallery/components/FileInfo.tsx index 5f32c37bdb..1ac6f85612 100644 --- a/web/packages/gallery/components/FileInfo.tsx +++ b/web/packages/gallery/components/FileInfo.tsx @@ -599,7 +599,9 @@ const Caption: React.FC = ({ const { values, errors, handleChange, handleSubmit, resetForm } = formik; if (!caption.length && !allowEdits) { - return <>; + // Visually take up some space, otherwise the info panel for the shared + // photos without a caption looks squished at the top. + return ; } return ( From bcc0403eb6c5a5d9941f786e38735f474649eafa Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 17:18:59 +0530 Subject: [PATCH 13/14] Last one --- .../accounts/src/pages/passkeys/index.tsx | 10 +-- web/packages/base/components/Titlebar.tsx | 63 ------------------- 2 files changed, 6 insertions(+), 67 deletions(-) delete mode 100644 web/packages/base/components/Titlebar.tsx diff --git a/web/apps/accounts/src/pages/passkeys/index.tsx b/web/apps/accounts/src/pages/passkeys/index.tsx index 671ea54876..f99d9aacaa 100644 --- a/web/apps/accounts/src/pages/passkeys/index.tsx +++ b/web/apps/accounts/src/pages/passkeys/index.tsx @@ -5,7 +5,10 @@ import EditIcon from "@mui/icons-material/Edit"; import KeyIcon from "@mui/icons-material/Key"; import { Box, Paper, Stack, Typography, styled } from "@mui/material"; import { EnteLogo } from "ente-base/components/EnteLogo"; -import { SidebarDrawer } from "ente-base/components/mui/SidebarDrawer"; +import { + SidebarDrawer, + SidebarDrawerTitlebar, +} from "ente-base/components/mui/SidebarDrawer"; import { NavbarBase } from "ente-base/components/Navbar"; import { RowButton, @@ -13,7 +16,6 @@ import { RowButtonGroup, } from "ente-base/components/RowButton"; import { SingleInputDialog } from "ente-base/components/SingleInputDialog"; -import { Titlebar } from "ente-base/components/Titlebar"; import { errorDialogAttributes } from "ente-base/components/utils/dialog"; import { useModalVisibility } from "ente-base/components/utils/modal"; import { useBaseContext } from "ente-base/context"; @@ -287,7 +289,7 @@ const ManagePasskeyDrawer: React.FC = ({ {token && passkey && ( - = ({ {formattedDateTime(passkey.createdAt)} - + } label={t("rename_passkey")} diff --git a/web/packages/base/components/Titlebar.tsx b/web/packages/base/components/Titlebar.tsx deleted file mode 100644 index 9a1f7cc6ed..0000000000 --- a/web/packages/base/components/Titlebar.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import ArrowBackIcon from "@mui/icons-material/ArrowBack"; -import CloseIcon from "@mui/icons-material/Close"; -import { Box, IconButton, Stack, Typography } from "@mui/material"; -import { FlexWrapper } from "ente-shared/components/Container"; -import React from "react"; - -interface TitlebarProps { - title: string; - caption?: string; - onClose: () => void; - backIsClose?: boolean; - onRootClose?: () => void; - actionButton?: React.JSX.Element; -} - -// TODO: Deprecated in favor of SidebarDrawerTitlebarProps where possible (will -// revisit the remaining use cases once those have migrated). -export const Titlebar: React.FC = ({ - title, - caption, - onClose, - backIsClose, - actionButton, - onRootClose, -}) => { - return ( - <> - - - {backIsClose ? : } - - - {actionButton && actionButton} - {!backIsClose && ( - - - - )} - - - - {title} - - {caption} - - - - ); -}; From 2764256a023dd31fdd6618856994634cdfd6b0c6 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 17:23:58 +0530 Subject: [PATCH 14/14] Conv --- web/apps/photos/src/components/FileList.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/web/apps/photos/src/components/FileList.tsx b/web/apps/photos/src/components/FileList.tsx index a763483f2e..20de949231 100644 --- a/web/apps/photos/src/components/FileList.tsx +++ b/web/apps/photos/src/components/FileList.tsx @@ -26,7 +26,6 @@ import { } from "ente-new/photos/components/PlaceholderThumbnails"; import { TileBottomTextOverlay } from "ente-new/photos/components/Tiles"; import { TRASH_SECTION } from "ente-new/photos/services/collection"; -import { FlexWrapper } from "ente-shared/components/Container"; import { t } from "i18next"; import memoize from "memoize-one"; import { GalleryContext } from "pages/gallery"; @@ -1019,12 +1018,16 @@ const ListContainer = styled(Box, { } `; -const ListItemContainer = styled(FlexWrapper)<{ span: number }>` +const ListItemContainer = styled("div")<{ span: number }>` grid-column: span ${(props) => props.span}; + display: flex; + align-items: center; `; -const FullSpanListItemContainer = styled(FlexWrapper)` +const FullSpanListItemContainer = styled("div")` grid-column: 1 / -1; + display: flex; + align-items: center; `; const asFullSpanListItem = ({ item, ...rest }: TimeStampListItem) => ({