From b47c027cbdf1225fa89eaef241fb48a96d16b9ea Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 14:08:50 +0530 Subject: [PATCH 01/23] rename --- .../photos/src/components/Collections/CollectionHeader.tsx | 6 +++--- web/apps/photos/src/pages/shared-albums.tsx | 6 +++--- web/packages/new/photos/components/mui-custom.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/web/apps/photos/src/components/Collections/CollectionHeader.tsx b/web/apps/photos/src/components/Collections/CollectionHeader.tsx index b9f3c459c4..8654701a61 100644 --- a/web/apps/photos/src/components/Collections/CollectionHeader.tsx +++ b/web/apps/photos/src/components/Collections/CollectionHeader.tsx @@ -6,7 +6,7 @@ import { GalleryItemsHeaderAdapter, GalleryItemsSummary, } from "@/new/photos/components/Gallery/ListHeader"; -import { SpaceBetweenBox } from "@/new/photos/components/mui-custom"; +import { SpaceBetweenFlex } from "@/new/photos/components/mui-custom"; import type { CollectionSummary, CollectionSummaryType, @@ -101,7 +101,7 @@ export const CollectionHeader: React.FC = ({ return ( - + = ({ {shouldShowOptions(type) && ( )} - + ); }; diff --git a/web/apps/photos/src/pages/shared-albums.tsx b/web/apps/photos/src/pages/shared-albums.tsx index 1baa2146b6..5d54327925 100644 --- a/web/apps/photos/src/pages/shared-albums.tsx +++ b/web/apps/photos/src/pages/shared-albums.tsx @@ -7,7 +7,7 @@ import { GalleryItemsHeaderAdapter, GalleryItemsSummary, } from "@/new/photos/components/Gallery/ListHeader"; -import { SpaceBetweenBox } from "@/new/photos/components/mui-custom"; +import { SpaceBetweenFlex } from "@/new/photos/components/mui-custom"; import downloadManager from "@/new/photos/services/download"; import { EnteFile } from "@/new/photos/types/file"; import { mergeMetadata } from "@/new/photos/utils/file"; @@ -307,7 +307,7 @@ export default function PublicCollectionGallery() { setPhotoListHeader({ item: ( - + )} - + ), itemType: ITEM_TYPE.HEADER, diff --git a/web/packages/new/photos/components/mui-custom.tsx b/web/packages/new/photos/components/mui-custom.tsx index ce378f198a..ceed61ea91 100644 --- a/web/packages/new/photos/components/mui-custom.tsx +++ b/web/packages/new/photos/components/mui-custom.tsx @@ -40,7 +40,7 @@ export const UnstyledButton = styled("button")` * and its uses moved to this one when possible (so that we can then see where * the width: 100% is essential). */ -export const SpaceBetweenBox = styled(Box)` +export const SpaceBetweenFlex = styled(Box)` display: flex; justify-content: space-between; align-items: center; From 47e2d2f91521466e0e672fce2d186cde34f412a2 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 14:15:56 +0530 Subject: [PATCH 02/23] tweak --- web/apps/photos/src/pages/gallery.tsx | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index 96913963d4..c26c6a3827 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -183,6 +183,19 @@ export const GalleryContext = createContext( defaultGalleryContext, ); +/** + * The default view for logged in users. + * + * I heard you like ascii art. + * + * Navbar / Search ^ + * --------------------- | + * Gallery Bar sticky + * --------------------- ---/--- + * Photo List Header scrollable + * --------------------- | + * Photo List v + */ export default function Gallery() { const router = useRouter(); const [user, setUser] = useState(null); @@ -297,8 +310,6 @@ export default function Gallery() { const closeSidebar = () => setSidebarView(false); const openSidebar = () => setSidebarView(true); - const [photoListHeader, setPhotoListHeader] = - useState(null); const [exportModalView, setExportModalView] = useState(false); @@ -322,7 +333,7 @@ export default function Gallery() { SearchOption | undefined >(); - // If visible, what should the gallery bar show. + // If visible, what should the (sticky) gallery bar show. const [barMode, setBarMode] = useState("albums"); // The currently selected person in the gallery bar (if any). @@ -330,14 +341,18 @@ export default function Gallery() { const people = useSyncExternalStore(peopleSubscribe, peopleSnapshot); + const [isClipSearchResult, setIsClipSearchResult] = + useState(false); + + // The (non-sticky) header shown at the top of the gallery items. + const [photoListHeader, setPhotoListHeader] = + useState(null); + const [ filesDownloadProgressAttributesList, setFilesDownloadProgressAttributesList, ] = useState([]); - const [isClipSearchResult, setIsClipSearchResult] = - useState(false); - // Ensure that the keys in local storage are not malformed by verifying that // the recoveryKey can be decrypted with the masterKey. // Note: This is not bullet-proof. From be4536ac30c4b84cdef309a9cc4e950298b4a231 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 14:26:49 +0530 Subject: [PATCH 03/23] extract --- web/apps/photos/src/pages/shared-albums.tsx | 108 +++++++++++--------- 1 file changed, 62 insertions(+), 46 deletions(-) diff --git a/web/apps/photos/src/pages/shared-albums.tsx b/web/apps/photos/src/pages/shared-albums.tsx index 5d54327925..5680a796bb 100644 --- a/web/apps/photos/src/pages/shared-albums.tsx +++ b/web/apps/photos/src/pages/shared-albums.tsx @@ -275,58 +275,21 @@ export default function PublicCollectionGallery() { main(); }, []); - const downloadEnabled = useMemo( - () => publicCollection?.publicURLs?.[0]?.enableDownload ?? true, - [publicCollection], - ); - - const downloadAllFiles = async () => { - try { - if (!downloadEnabled) { - return; - } - const setFilesDownloadProgressAttributes = - setFilesDownloadProgressAttributesCreator( - publicCollection.name, - publicCollection.id, - isHiddenCollection(publicCollection), - ); - await downloadCollectionFiles( - publicCollection.name, - publicFiles, - setFilesDownloadProgressAttributes, - ); - } catch (e) { - log.error("failed to downloads shared album all files", e); - } - }; + const downloadEnabled = + publicCollection?.publicURLs?.[0]?.enableDownload ?? true; useEffect(() => { publicCollection && publicFiles && setPhotoListHeader({ item: ( - - - - {downloadEnabled && ( - } - > - } - onClick={downloadAllFiles} - > - {t("download_album")} - - - )} - - + ), itemType: ITEM_TYPE.HEADER, height: 68, @@ -733,3 +696,56 @@ const SelectedFileOptions: React.FC = ({ ); }; + +interface ListHeaderProps { + publicCollection: Collection; + publicFiles: EnteFile[]; + setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator; +} + +const ListHeader: React.FC = ({ + publicCollection, + publicFiles, + setFilesDownloadProgressAttributesCreator, +}) => { + const downloadEnabled = + publicCollection.publicURLs?.[0]?.enableDownload ?? true; + + const downloadAllFiles = async () => { + const setFilesDownloadProgressAttributes = + setFilesDownloadProgressAttributesCreator( + publicCollection.name, + publicCollection.id, + isHiddenCollection(publicCollection), + ); + await downloadCollectionFiles( + publicCollection.name, + publicFiles, + setFilesDownloadProgressAttributes, + ); + }; + + return ( + + + + {downloadEnabled && ( + } + > + } + onClick={downloadAllFiles} + > + {t("download_album")} + + + )} + + + ); +}; From be7bb8e4b67c4b9f21534bf5899d1b92e5b86e95 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 14:34:29 +0530 Subject: [PATCH 04/23] temp move --- web/apps/photos/src/pages/gallery.tsx | 23 +------------- .../new/photos/components/Gallery/index.tsx | 30 +++++++++++++++++++ 2 files changed, 31 insertions(+), 22 deletions(-) create mode 100644 web/packages/new/photos/components/Gallery/index.tsx diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index c26c6a3827..4053c45939 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -3,11 +3,8 @@ import { NavbarBase } from "@/base/components/Navbar"; import { useIsMobileWidth } from "@/base/hooks"; import log from "@/base/log"; import type { Collection } from "@/media/collection"; +import { SearchResultsHeader } from "@/new/photos/components/Gallery"; import type { GalleryBarMode } from "@/new/photos/components/Gallery/BarImpl"; -import { - GalleryItemsHeaderAdapter, - GalleryItemsSummary, -} from "@/new/photos/components/Gallery/ListHeader"; import { SearchBar, type SearchBarProps, @@ -1380,21 +1377,3 @@ const HiddenSectionNavbarContents: React.FC< ); - -interface SearchResultsHeaderProps { - selectedOption: SearchOption; -} - -const SearchResultsHeader: React.FC = ({ - selectedOption, -}) => ( - - - {t("search_results")} - - - -); diff --git a/web/packages/new/photos/components/Gallery/index.tsx b/web/packages/new/photos/components/Gallery/index.tsx new file mode 100644 index 0000000000..928f1c3da0 --- /dev/null +++ b/web/packages/new/photos/components/Gallery/index.tsx @@ -0,0 +1,30 @@ +/** + * @file code that really belongs to pages/gallery.tsx itself, but written here + * in a separate file so that we can write in this package that has TypeScript + * strict mode enabled. Once the original gallery.tsx is strict mode, this code + * can be inlined back there. + */ + +import type { SearchOption } from "@/new/photos/services/search/types"; +import { Typography } from "@mui/material"; +import { t } from "i18next"; +import React from "react"; +import { GalleryItemsHeaderAdapter, GalleryItemsSummary } from "./ListHeader"; + +interface SearchResultsHeaderProps { + selectedOption: SearchOption; +} + +export const SearchResultsHeader: React.FC = ({ + selectedOption, +}) => ( + + + {t("search_results")} + + + +); From 9ac05bc8731a16aa9a838e0abc794bdd1364933d Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 15:03:19 +0530 Subject: [PATCH 05/23] header 1 --- .../photos/components/Gallery/PersonList.tsx | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 web/packages/new/photos/components/Gallery/PersonList.tsx diff --git a/web/packages/new/photos/components/Gallery/PersonList.tsx b/web/packages/new/photos/components/Gallery/PersonList.tsx new file mode 100644 index 0000000000..c659ce292c --- /dev/null +++ b/web/packages/new/photos/components/Gallery/PersonList.tsx @@ -0,0 +1,42 @@ +import type { Person } from "@/new/photos/services/ml/cgroups"; +import OverflowMenu from "@ente/shared/components/OverflowMenu/menu"; +import { OverflowMenuOption } from "@ente/shared/components/OverflowMenu/option"; +import EditIcon from "@mui/icons-material/Edit"; +import MoreHoriz from "@mui/icons-material/MoreHoriz"; +import { t } from "i18next"; +import React from "react"; +import { SpaceBetweenFlex } from "../mui-custom"; +import { GalleryItemsHeaderAdapter, GalleryItemsSummary } from "./ListHeader"; + +interface PeopleListHeaderProps { + person: Person; +} + +export const PersonListHeader: React.FC = ({ + person, +}) => { + const hasOptions = process.env.NEXT_PUBLIC_ENTE_WIP_CL; + return ( + + + + {hasOptions && ( + } + > + } + onClick={() => console.log("test")} + > + {t("download_album")} + + + )} + + + ); +}; From be2b01f722dfdb15dc61ab19246288b0390a90ee Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 15:13:24 +0530 Subject: [PATCH 06/23] unused --- web/apps/photos/src/components/Collections/index.tsx | 3 ++- .../src/components/Collections/styledComponents.ts | 9 --------- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/web/apps/photos/src/components/Collections/index.tsx b/web/apps/photos/src/components/Collections/index.tsx index 8152d061e4..f00ca653f6 100644 --- a/web/apps/photos/src/components/Collections/index.tsx +++ b/web/apps/photos/src/components/Collections/index.tsx @@ -65,7 +65,8 @@ type CollectionsProps = Omit< * and state for any associated dialogs that might be triggered by actions on * the bar. */ -// TODO-Cluster Rename me to GalleryBar and subsume GalleryBarImpl +// TODO-Cluster - Rename me to GalleryBar and subsume GalleryBarImpl - Or rename +// to GalleryBarAndHeader. export const Collections: React.FC = ({ shouldHide, mode, diff --git a/web/apps/photos/src/components/Collections/styledComponents.ts b/web/apps/photos/src/components/Collections/styledComponents.ts index d6b7e1e9c0..8621f8fd4f 100644 --- a/web/apps/photos/src/components/Collections/styledComponents.ts +++ b/web/apps/photos/src/components/Collections/styledComponents.ts @@ -1,15 +1,6 @@ import { Overlay } from "@ente/shared/components/Container"; import { styled } from "@mui/material"; -export const ScrollContainer = styled("div")` - width: 100%; - height: 120px; - overflow: auto; - scroll-behavior: smooth; - display: flex; - gap: 4px; -`; - export const AllCollectionTileText = styled(Overlay)` padding: 8px; background: linear-gradient( From d3ab7f530c43641a2bed69f39cca756f5b9966da Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 15:18:03 +0530 Subject: [PATCH 07/23] overlay --- .../new/photos/components/Gallery/BarImpl.tsx | 15 ++-------- .../new/photos/components/ItemCards.tsx | 30 +++++++++++++++++++ 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/web/packages/new/photos/components/Gallery/BarImpl.tsx b/web/packages/new/photos/components/Gallery/BarImpl.tsx index 2b0bcf7f58..e1a0a48929 100644 --- a/web/packages/new/photos/components/Gallery/BarImpl.tsx +++ b/web/packages/new/photos/components/Gallery/BarImpl.tsx @@ -1,6 +1,6 @@ import { useIsMobileWidth } from "@/base/hooks"; import { CollectionsSortOptions } from "@/new/photos/components/CollectionsSortOptions"; -import { BarItemTile, ItemCard } from "@/new/photos/components/ItemCards"; +import { BarItemTile, ItemCard, TileTextOverlay } from "@/new/photos/components/ItemCards"; import { FilledIconButton, UnstyledButton, @@ -498,20 +498,11 @@ interface CardTextProps { } const CardText: React.FC = ({ text }) => ( - + - + ); -const CardText_ = styled(Overlay)` - padding: 4px; - background: linear-gradient( - 0deg, - rgba(0, 0, 0, 0.1) 0%, - rgba(0, 0, 0, 0.5) 86.46% - ); -`; - const TruncatedText: React.FC = ({ text }) => ( diff --git a/web/packages/new/photos/components/ItemCards.tsx b/web/packages/new/photos/components/ItemCards.tsx index f16ca95777..a14e2b243f 100644 --- a/web/packages/new/photos/components/ItemCards.tsx +++ b/web/packages/new/photos/components/ItemCards.tsx @@ -63,9 +63,13 @@ export const ItemCard: React.FC> = ({ /** * A generic "base" tile, meant to be used (after setting dimensions) as the * {@link TileComponent} provided to an {@link ItemCard}. + * + * Use {@link ItemTileOverlay} (usually via one of its presets) to overlay + * content on top of the tile. */ export const ItemTile = styled("div")` display: flex; + /* Act as container for the absolutely positioned ItemTileOverlays. */ position: relative; border-radius: 4px; overflow: hidden; @@ -104,3 +108,29 @@ export const AllCollectionTile = styled(ItemTile)` width: 150px; height: 150px; `; + +/** + * An empty overlay on top of the nearest relative positioned ancestor. + * + * This is meant to be used in tandem with {@link ItemTile}. + */ +export const ItemTileOverlay = styled("div")` + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +`; + +/** + * An {@link ItemTileOverlay} suitable for hosting textual content for small and + * medium sized tiles. + */ +export const TileTextOverlay = styled(ItemTileOverlay)` + padding: 4px; + background: linear-gradient( + 0deg, + rgba(0, 0, 0, 0.1) 0%, + rgba(0, 0, 0, 0.5) 86.46% + ); +`; From c71c3e7ef87846ed6232f282ecbaf30f1186ddcd Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 15:25:11 +0530 Subject: [PATCH 08/23] use newer --- .../Collections/AllCollections/collectionCard.tsx | 10 ++++++---- .../CollectionSelector/CollectionCard.tsx | 10 ++++++---- .../src/components/Collections/styledComponents.ts | 11 ----------- web/packages/new/photos/components/ItemCards.tsx | 13 +++++++++++++ 4 files changed, 25 insertions(+), 19 deletions(-) delete mode 100644 web/apps/photos/src/components/Collections/styledComponents.ts diff --git a/web/apps/photos/src/components/Collections/AllCollections/collectionCard.tsx b/web/apps/photos/src/components/Collections/AllCollections/collectionCard.tsx index 8d8939350d..0976c385b4 100644 --- a/web/apps/photos/src/components/Collections/AllCollections/collectionCard.tsx +++ b/web/apps/photos/src/components/Collections/AllCollections/collectionCard.tsx @@ -1,9 +1,11 @@ -import { AllCollectionTile } from "@/new/photos/components/ItemCards"; +import { + AllCollectionTile, + LargeTileTextOverlay, +} from "@/new/photos/components/ItemCards"; import type { CollectionSummary } from "@/new/photos/types/collection"; import { Typography } from "@mui/material"; import { t } from "i18next"; import CollectionCard from "../CollectionCard"; -import { AllCollectionTileText } from "../styledComponents"; interface Iprops { collectionSummary: CollectionSummary; @@ -23,12 +25,12 @@ export default function AllCollectionCard({ onClick={() => onCollectionClick(collectionSummary.id)} isScrolling={isScrolling} > - + {collectionSummary.name} {t("photos_count", { count: collectionSummary.fileCount })} - + ); } diff --git a/web/apps/photos/src/components/Collections/CollectionSelector/CollectionCard.tsx b/web/apps/photos/src/components/Collections/CollectionSelector/CollectionCard.tsx index 5299703ecb..c65994509e 100644 --- a/web/apps/photos/src/components/Collections/CollectionSelector/CollectionCard.tsx +++ b/web/apps/photos/src/components/Collections/CollectionSelector/CollectionCard.tsx @@ -1,8 +1,10 @@ -import { AllCollectionTile } from "@/new/photos/components/ItemCards"; +import { + AllCollectionTile, + LargeTileTextOverlay, +} from "@/new/photos/components/ItemCards"; import type { CollectionSummary } from "@/new/photos/types/collection"; import { Typography } from "@mui/material"; import CollectionCard from "../CollectionCard"; -import { AllCollectionTileText } from "../styledComponents"; interface Iprops { collectionSummary: CollectionSummary; @@ -19,9 +21,9 @@ export default function CollectionSelectorCard({ coverFile={collectionSummary.coverFile} onClick={() => onCollectionClick(collectionSummary.id)} > - + {collectionSummary.name} - + ); } diff --git a/web/apps/photos/src/components/Collections/styledComponents.ts b/web/apps/photos/src/components/Collections/styledComponents.ts deleted file mode 100644 index 8621f8fd4f..0000000000 --- a/web/apps/photos/src/components/Collections/styledComponents.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Overlay } from "@ente/shared/components/Container"; -import { styled } from "@mui/material"; - -export const AllCollectionTileText = styled(Overlay)` - padding: 8px; - background: linear-gradient( - 0deg, - rgba(0, 0, 0, 0.1) 0%, - rgba(0, 0, 0, 0.5) 86.46% - ); -`; diff --git a/web/packages/new/photos/components/ItemCards.tsx b/web/packages/new/photos/components/ItemCards.tsx index a14e2b243f..fa86e11fcc 100644 --- a/web/packages/new/photos/components/ItemCards.tsx +++ b/web/packages/new/photos/components/ItemCards.tsx @@ -134,3 +134,16 @@ export const TileTextOverlay = styled(ItemTileOverlay)` rgba(0, 0, 0, 0.5) 86.46% ); `; + +/** + * A variation of {@link TileTextOverlay} for use with larger tiles like the + * {@link AllCollectionTile}. + */ +export const LargeTileTextOverlay = styled(ItemTileOverlay)` + padding: 8px; + background: linear-gradient( + 0deg, + rgba(0, 0, 0, 0.1) 0%, + rgba(0, 0, 0, 0.5) 86.46% + ); +`; From 35f7ce07f1a97627f255ba92213f30bc050d3a7c Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 15:30:20 +0530 Subject: [PATCH 09/23] use newer --- .../AllCollections/collectionCard.tsx | 36 ------------------- .../Collections/AllCollections/content.tsx | 35 ++++++++++++++++-- 2 files changed, 33 insertions(+), 38 deletions(-) delete mode 100644 web/apps/photos/src/components/Collections/AllCollections/collectionCard.tsx diff --git a/web/apps/photos/src/components/Collections/AllCollections/collectionCard.tsx b/web/apps/photos/src/components/Collections/AllCollections/collectionCard.tsx deleted file mode 100644 index 0976c385b4..0000000000 --- a/web/apps/photos/src/components/Collections/AllCollections/collectionCard.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { - AllCollectionTile, - LargeTileTextOverlay, -} from "@/new/photos/components/ItemCards"; -import type { CollectionSummary } from "@/new/photos/types/collection"; -import { Typography } from "@mui/material"; -import { t } from "i18next"; -import CollectionCard from "../CollectionCard"; - -interface Iprops { - collectionSummary: CollectionSummary; - onCollectionClick: (collectionID: number) => void; - isScrolling?: boolean; -} - -export default function AllCollectionCard({ - onCollectionClick, - collectionSummary, - isScrolling, -}: Iprops) { - return ( - onCollectionClick(collectionSummary.id)} - isScrolling={isScrolling} - > - - {collectionSummary.name} - - {t("photos_count", { count: collectionSummary.fileCount })} - - - - ); -} diff --git a/web/apps/photos/src/components/Collections/AllCollections/content.tsx b/web/apps/photos/src/components/Collections/AllCollections/content.tsx index e2fdd8355b..5f4ea2c160 100644 --- a/web/apps/photos/src/components/Collections/AllCollections/content.tsx +++ b/web/apps/photos/src/components/Collections/AllCollections/content.tsx @@ -1,7 +1,12 @@ +import { + ItemCard, + LargeTileTextOverlay, +} from "@/new/photos/components/ItemCards"; import type { CollectionSummary } from "@/new/photos/types/collection"; import { FlexWrapper } from "@ente/shared/components/Container"; import useWindowSize from "@ente/shared/hooks/useWindowSize"; -import { DialogContent } from "@mui/material"; +import { DialogContent, Typography } from "@mui/material"; +import { t } from "i18next"; import memoize from "memoize-one"; import React, { useEffect, useRef, useState } from "react"; import { @@ -9,13 +14,13 @@ import { ListChildComponentProps, areEqual, } from "react-window"; -import AllCollectionCard from "./collectionCard"; import { AllCollectionMobileBreakpoint } from "./dialog"; const MobileColumns = 2; const DesktopColumns = 3; const CollectionRowItemSize = 154; + const getCollectionRowListHeight = ( collectionRowList: CollectionSummary[][], windowSize: { height: number; width: number }, @@ -147,3 +152,29 @@ export default function AllCollectionContent({ ); } + +interface AllCollectionCardProps { + collectionSummary: CollectionSummary; + onCollectionClick: (collectionID: number) => void; + isScrolling?: boolean; +} + +const AllCollectionCard: React.FC = ({ + onCollectionClick, + collectionSummary, + isScrolling, +}) => ( + onCollectionClick(collectionSummary.id)} + isScrolling={isScrolling} + > + + {collectionSummary.name} + + {t("photos_count", { count: collectionSummary.fileCount })} + + + +); From 25386d194bc04e74163af178ab1f7426c15ee101 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 15:33:38 +0530 Subject: [PATCH 10/23] use newer --- .../Collections/AllCollections/content.tsx | 1 + .../CollectionSelector/CollectionCard.tsx | 29 ----------------- .../Collections/CollectionSelector/index.tsx | 32 ++++++++++++++++--- 3 files changed, 29 insertions(+), 33 deletions(-) delete mode 100644 web/apps/photos/src/components/Collections/CollectionSelector/CollectionCard.tsx diff --git a/web/apps/photos/src/components/Collections/AllCollections/content.tsx b/web/apps/photos/src/components/Collections/AllCollections/content.tsx index 5f4ea2c160..d2a34aed6f 100644 --- a/web/apps/photos/src/components/Collections/AllCollections/content.tsx +++ b/web/apps/photos/src/components/Collections/AllCollections/content.tsx @@ -1,4 +1,5 @@ import { + AllCollectionTile, ItemCard, LargeTileTextOverlay, } from "@/new/photos/components/ItemCards"; diff --git a/web/apps/photos/src/components/Collections/CollectionSelector/CollectionCard.tsx b/web/apps/photos/src/components/Collections/CollectionSelector/CollectionCard.tsx deleted file mode 100644 index c65994509e..0000000000 --- a/web/apps/photos/src/components/Collections/CollectionSelector/CollectionCard.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { - AllCollectionTile, - LargeTileTextOverlay, -} from "@/new/photos/components/ItemCards"; -import type { CollectionSummary } from "@/new/photos/types/collection"; -import { Typography } from "@mui/material"; -import CollectionCard from "../CollectionCard"; - -interface Iprops { - collectionSummary: CollectionSummary; - onCollectionClick: (collectionID: number) => void; -} - -export default function CollectionSelectorCard({ - onCollectionClick, - collectionSummary, -}: Iprops) { - return ( - onCollectionClick(collectionSummary.id)} - > - - {collectionSummary.name} - - - ); -} diff --git a/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx b/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx index 00e584620c..e7c6756383 100644 --- a/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx +++ b/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx @@ -1,11 +1,16 @@ import type { Collection } from "@/media/collection"; +import { + AllCollectionTile, + ItemCard, + LargeTileTextOverlay, +} from "@/new/photos/components/ItemCards"; import type { CollectionSummaries, CollectionSummary, } from "@/new/photos/types/collection"; import { FlexWrapper } from "@ente/shared/components/Container"; import DialogTitleWithCloseButton from "@ente/shared/components/DialogBox/TitleWithCloseButton"; -import { DialogContent, useMediaQuery } from "@mui/material"; +import { DialogContent, Typography, useMediaQuery } from "@mui/material"; import { AllCollectionDialog } from "components/Collections/AllCollections/dialog"; import { t } from "i18next"; import { useEffect, useState } from "react"; @@ -18,7 +23,6 @@ import { isMoveToAllowedCollection, } from "utils/collection"; import AddCollectionButton from "./AddCollectionButton"; -import CollectionSelectorCard from "./CollectionCard"; export interface CollectionSelectorAttributes { callback: (collection: Collection) => void; @@ -146,9 +150,9 @@ function CollectionSelector({ /> {collectionsToShow.map((collectionSummary) => ( ))} @@ -158,3 +162,23 @@ function CollectionSelector({ } export default CollectionSelector; + +interface CollectionSelectorCardProps { + collectionSummary: CollectionSummary; + onCollectionClick: (collectionID: number) => void; +} + +const CollectionSelectorCard: React.FC = ({ + collectionSummary, + onCollectionClick, +}) => ( + onCollectionClick(collectionSummary.id)} + > + + {collectionSummary.name} + + +); From f856db2cb7869bac6515c49d9d812f0f70b1b08b Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 15:35:18 +0530 Subject: [PATCH 11/23] use newer --- .../AddCollectionButton.tsx | 30 -------------- .../Collections/CollectionSelector/index.tsx | 39 +++++++++++++++++-- 2 files changed, 36 insertions(+), 33 deletions(-) delete mode 100644 web/apps/photos/src/components/Collections/CollectionSelector/AddCollectionButton.tsx diff --git a/web/apps/photos/src/components/Collections/CollectionSelector/AddCollectionButton.tsx b/web/apps/photos/src/components/Collections/CollectionSelector/AddCollectionButton.tsx deleted file mode 100644 index 1037b7031e..0000000000 --- a/web/apps/photos/src/components/Collections/CollectionSelector/AddCollectionButton.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { AllCollectionTile } from "@/new/photos/components/ItemCards"; -import { CenteredFlex, Overlay } from "@ente/shared/components/Container"; -import { styled } from "@mui/material"; -import CollectionCard from "components/Collections/CollectionCard"; -import { AllCollectionTileText } from "components/Collections/styledComponents"; -import { t } from "i18next"; - -const ImageContainer = styled(Overlay)` - display: flex; - font-size: 42px; -`; - -interface Iprops { - showNextModal: () => void; -} - -export default function AddCollectionButton({ showNextModal }: Iprops) { - return ( - showNextModal()} - coverFile={null} - > - {t("create_albums")} - - + - - - ); -} diff --git a/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx b/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx index e7c6756383..8857a907ce 100644 --- a/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx +++ b/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx @@ -8,10 +8,20 @@ import type { CollectionSummaries, CollectionSummary, } from "@/new/photos/types/collection"; -import { FlexWrapper } from "@ente/shared/components/Container"; +import { + CenteredFlex, + FlexWrapper, + Overlay, +} from "@ente/shared/components/Container"; import DialogTitleWithCloseButton from "@ente/shared/components/DialogBox/TitleWithCloseButton"; -import { DialogContent, Typography, useMediaQuery } from "@mui/material"; +import { + DialogContent, + styled, + Typography, + useMediaQuery, +} from "@mui/material"; import { AllCollectionDialog } from "components/Collections/AllCollections/dialog"; +import CollectionCard from "components/Collections/CollectionCard"; import { t } from "i18next"; import { useEffect, useState } from "react"; import { createUnCategorizedCollection } from "services/collectionService"; @@ -22,7 +32,6 @@ import { isAddToAllowedCollection, isMoveToAllowedCollection, } from "utils/collection"; -import AddCollectionButton from "./AddCollectionButton"; export interface CollectionSelectorAttributes { callback: (collection: Collection) => void; @@ -182,3 +191,27 @@ const CollectionSelectorCard: React.FC = ({ ); + +interface AddCollectionButtonProps { + showNextModal: () => void; +} + +export const AddCollectionButton: React.FC = ({ + showNextModal, +}) => ( + showNextModal()} + coverFile={null} + > + {t("create_albums")} + + + + + +); + +const ImageContainer = styled(Overlay)` + display: flex; + font-size: 42px; +`; From d2fe71f478bc8a695c78df798bc493ec280a33bc Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 15:37:36 +0530 Subject: [PATCH 12/23] unnest --- .../index.tsx => CollectionSelector.tsx} | 13 ++++++------- web/apps/photos/src/pages/gallery.tsx | 3 ++- 2 files changed, 8 insertions(+), 8 deletions(-) rename web/apps/photos/src/components/Collections/{CollectionSelector/index.tsx => CollectionSelector.tsx} (97%) diff --git a/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx b/web/apps/photos/src/components/Collections/CollectionSelector.tsx similarity index 97% rename from web/apps/photos/src/components/Collections/CollectionSelector/index.tsx rename to web/apps/photos/src/components/Collections/CollectionSelector.tsx index 8857a907ce..b1ad39cf59 100644 --- a/web/apps/photos/src/components/Collections/CollectionSelector/index.tsx +++ b/web/apps/photos/src/components/Collections/CollectionSelector.tsx @@ -41,19 +41,20 @@ export interface CollectionSelectorAttributes { onCancel?: () => void; } -interface Props { +interface CollectionSelectorProps { open: boolean; onClose: () => void; attributes: CollectionSelectorAttributes; collections: Collection[]; collectionSummaries: CollectionSummaries; } -function CollectionSelector({ + +export const CollectionSelector: React.FC = ({ attributes, collectionSummaries, collections, ...props -}: Props) { +}) => { const isMobile = useMediaQuery("(max-width: 428px)"); const [collectionsToShow, setCollectionsToShow] = useState< @@ -168,9 +169,7 @@ function CollectionSelector({ ); -} - -export default CollectionSelector; +}; interface CollectionSelectorCardProps { collectionSummary: CollectionSummary; @@ -196,7 +195,7 @@ interface AddCollectionButtonProps { showNextModal: () => void; } -export const AddCollectionButton: React.FC = ({ +const AddCollectionButton: React.FC = ({ showNextModal, }) => ( Date: Tue, 24 Sep 2024 15:41:07 +0530 Subject: [PATCH 13/23] shorter --- .../components/Collections/CollectionSelector.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/web/apps/photos/src/components/Collections/CollectionSelector.tsx b/web/apps/photos/src/components/Collections/CollectionSelector.tsx index b1ad39cf59..b1bf64f78c 100644 --- a/web/apps/photos/src/components/Collections/CollectionSelector.tsx +++ b/web/apps/photos/src/components/Collections/CollectionSelector.tsx @@ -2,17 +2,14 @@ import type { Collection } from "@/media/collection"; import { AllCollectionTile, ItemCard, + ItemTileOverlay, LargeTileTextOverlay, } from "@/new/photos/components/ItemCards"; import type { CollectionSummaries, CollectionSummary, } from "@/new/photos/types/collection"; -import { - CenteredFlex, - FlexWrapper, - Overlay, -} from "@ente/shared/components/Container"; +import { FlexWrapper } from "@ente/shared/components/Container"; import DialogTitleWithCloseButton from "@ente/shared/components/DialogBox/TitleWithCloseButton"; import { DialogContent, @@ -204,13 +201,13 @@ const AddCollectionButton: React.FC = ({ coverFile={null} > {t("create_albums")} - - + - + + ); -const ImageContainer = styled(Overlay)` +const ImageContainer = styled(ItemTileOverlay)` display: flex; + justify-content: center; + align-items: center; font-size: 42px; `; From ffa80c9db2a39981d5f42a43e1023956874c9691 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 15:42:17 +0530 Subject: [PATCH 14/23] newer --- .../src/components/Collections/CollectionSelector.tsx | 9 ++------- web/packages/new/photos/components/ItemCards.tsx | 2 +- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/web/apps/photos/src/components/Collections/CollectionSelector.tsx b/web/apps/photos/src/components/Collections/CollectionSelector.tsx index b1bf64f78c..df23d5e104 100644 --- a/web/apps/photos/src/components/Collections/CollectionSelector.tsx +++ b/web/apps/photos/src/components/Collections/CollectionSelector.tsx @@ -18,7 +18,6 @@ import { useMediaQuery, } from "@mui/material"; import { AllCollectionDialog } from "components/Collections/AllCollections/dialog"; -import CollectionCard from "components/Collections/CollectionCard"; import { t } from "i18next"; import { useEffect, useState } from "react"; import { createUnCategorizedCollection } from "services/collectionService"; @@ -195,14 +194,10 @@ interface AddCollectionButtonProps { const AddCollectionButton: React.FC = ({ showNextModal, }) => ( - showNextModal()} - coverFile={null} - > + {t("create_albums")} + - + ); const ImageContainer = styled(ItemTileOverlay)` diff --git a/web/packages/new/photos/components/ItemCards.tsx b/web/packages/new/photos/components/ItemCards.tsx index fa86e11fcc..a35a6726e7 100644 --- a/web/packages/new/photos/components/ItemCards.tsx +++ b/web/packages/new/photos/components/ItemCards.tsx @@ -13,7 +13,7 @@ interface ItemCardProps { /** * The file (if any) whose thumbnail (if any) should be should be shown. */ - coverFile: EnteFile | undefined; + coverFile?: EnteFile | undefined; /** * Optional boolean indicating if the user is currently scrolling. * From 002a652cfdadf345b36107f1b685427e88530291 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 15:51:24 +0530 Subject: [PATCH 15/23] fin --- .../components/Collections/CollectionCard.tsx | 55 ------------------- .../src/components/ExportPendingList.tsx | 9 ++- .../new/photos/components/ItemCards.tsx | 16 +++--- 3 files changed, 13 insertions(+), 67 deletions(-) delete mode 100644 web/apps/photos/src/components/Collections/CollectionCard.tsx diff --git a/web/apps/photos/src/components/Collections/CollectionCard.tsx b/web/apps/photos/src/components/Collections/CollectionCard.tsx deleted file mode 100644 index 9451d6c082..0000000000 --- a/web/apps/photos/src/components/Collections/CollectionCard.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { - LoadingThumbnail, - StaticThumbnail, -} from "@/new/photos/components/PlaceholderThumbnails"; -import downloadManager from "@/new/photos/services/download"; -import { EnteFile } from "@/new/photos/types/file"; -import { useEffect, useState } from "react"; - -/** Deprecated in favor of {@link ItemCard}. */ -export default function CollectionCard(props: { - children?: any; - coverFile: EnteFile; - onClick: () => void; - collectionTile: any; - isScrolling?: boolean; -}) { - const { - coverFile: file, - onClick, - children, - collectionTile: CustomCollectionTile, - isScrolling, - } = props; - - const [coverImageURL, setCoverImageURL] = useState(null); - - useEffect(() => { - const main = async () => { - if (!file) { - return; - } - const url = await downloadManager.getThumbnailForPreview( - file, - isScrolling, - ); - if (url) { - setCoverImageURL(url); - } - }; - main(); - }, [file, isScrolling]); - - return ( - - {file?.metadata.hasStaticThumbnail ? ( - - ) : coverImageURL ? ( - - ) : ( - - )} - {children} - - ); -} diff --git a/web/apps/photos/src/components/ExportPendingList.tsx b/web/apps/photos/src/components/ExportPendingList.tsx index dbc9a60ca4..1aeb0d1b42 100644 --- a/web/apps/photos/src/components/ExportPendingList.tsx +++ b/web/apps/photos/src/components/ExportPendingList.tsx @@ -1,11 +1,10 @@ -import { PreviewItemTile } from "@/new/photos/components/ItemCards"; +import { ItemCard, PreviewItemTile } from "@/new/photos/components/ItemCards"; import { EnteFile } from "@/new/photos/types/file"; import { FlexWrapper } from "@ente/shared/components/Container"; import DialogBoxV2 from "@ente/shared/components/DialogBoxV2"; import { Box, styled } from "@mui/material"; import ItemList from "components/ItemList"; import { t } from "i18next"; -import CollectionCard from "./Collections/CollectionCard"; interface Iprops { isOpen: boolean; @@ -29,11 +28,10 @@ const ExportPendingList = (props: Iprops) => { return ( - null} - collectionTile={PreviewItemTile} /> @@ -59,6 +57,7 @@ const ExportPendingList = (props: Iprops) => { ; /** - * The file (if any) whose thumbnail (if any) should be should be shown. + * Optional file whose thumbnail (if any) should be should be shown. */ coverFile?: EnteFile | undefined; /** @@ -21,14 +23,14 @@ interface ItemCardProps { * downloads. */ isScrolling?: boolean; - /** Optional click handler. */ + /** + * Optional click handler. + */ onClick?: () => void; } /** - * A generic card that can be be used to represent collections, files, people - - * anything that has an associated "cover photo". - * - * This is a simplified variant / almost-duplicate of {@link CollectionCard}. + * A generic card that can be be used to represent collections, files, people - + * anything that (usually) has an associated "cover photo". */ export const ItemCard: React.FC> = ({ TileComponent, From 3e5a9271d790c6188bc093b09077a79581368e09 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 16:00:34 +0530 Subject: [PATCH 16/23] prune --- web/apps/photos/src/pages/gallery.tsx | 23 +++++++---------------- 1 file changed, 7 insertions(+), 16 deletions(-) diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index 73786d598d..41569f3189 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -56,7 +56,7 @@ import ArrowBack from "@mui/icons-material/ArrowBack"; import FileUploadOutlinedIcon from "@mui/icons-material/FileUploadOutlined"; import MenuIcon from "@mui/icons-material/Menu"; import type { ButtonProps, IconButtonProps } from "@mui/material"; -import { Box, Button, IconButton, Typography, styled } from "@mui/material"; +import { Box, Button, IconButton, Typography } from "@mui/material"; import AuthenticateUserModal from "components/AuthenticateUserModal"; import { Collections } from "components/Collections"; import CollectionNamer, { @@ -148,17 +148,6 @@ import { isArchivedFile } from "utils/magicMetadata"; import { getSessionExpiredMessage } from "utils/ui"; import { getLocalFamilyData } from "utils/user/family"; -const SYNC_INTERVAL_IN_MICROSECONDS = 1000 * 60 * 5; // 5 minutes - -export const DeadCenter = styled("div")` - flex: 1; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - flex-direction: column; -`; - const defaultGalleryContext: GalleryContextType = { showPlanSelectorModal: () => null, setActiveCollectionID: () => null, @@ -195,7 +184,6 @@ export const GalleryContext = createContext( * Photo List v */ export default function Gallery() { - const router = useRouter(); const [user, setUser] = useState(null); const [familyData, setFamilyData] = useState(null); const [collections, setCollections] = useState(null); @@ -351,6 +339,8 @@ export default function Gallery() { setFilesDownloadProgressAttributesList, ] = useState([]); + const router = useRouter(); + // Ensure that the keys in local storage are not malformed by verifying that // the recoveryKey can be decrypted with the masterKey. // Note: This is not bullet-proof. @@ -411,9 +401,10 @@ export default function Gallery() { await syncWithRemote(true); setIsFirstLoad(false); setJustSignedUp(false); - syncInterval.current = setInterval(() => { - syncWithRemote(false, true); - }, SYNC_INTERVAL_IN_MICROSECONDS); + syncInterval.current = setInterval( + () => syncWithRemote(false, true), + 5 * 60 * 1000 /* 5 minutes */, + ); if (electron) { electron.onMainWindowFocus(() => syncWithRemote(false, true)); if (await shouldShowWhatsNew(electron)) setOpenWhatsNew(true); From f07f3b320e478b230a082418d46a0dc96b501c97 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 16:03:42 +0530 Subject: [PATCH 17/23] move returns together --- web/apps/photos/src/pages/gallery.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index 41569f3189..0748a2fa03 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -827,10 +827,6 @@ export default function Gallery() { setHiddenCollectionSummaries(hiddenCollectionSummaries); }; - if (!collectionSummaries || !filteredData) { - return
; - } - const setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator = (folderName, collectionID, isHidden) => { const id = filesDownloadProgressAttributesList?.length ?? 0; @@ -1041,6 +1037,10 @@ export default function Gallery() { log.debug(() => ["person", activePerson]); } + if (!collectionSummaries || !filteredData) { + return
; + } + return ( Date: Tue, 24 Sep 2024 16:16:54 +0530 Subject: [PATCH 18/23] rename --- ...{index.tsx => GalleryBarAndListHeader.tsx} | 23 +++++++++++++------ web/apps/photos/src/pages/gallery.tsx | 4 ++-- 2 files changed, 18 insertions(+), 9 deletions(-) rename web/apps/photos/src/components/Collections/{index.tsx => GalleryBarAndListHeader.tsx} (89%) diff --git a/web/apps/photos/src/components/Collections/index.tsx b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx similarity index 89% rename from web/apps/photos/src/components/Collections/index.tsx rename to web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx index f00ca653f6..69c211aeb8 100644 --- a/web/apps/photos/src/components/Collections/index.tsx +++ b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx @@ -59,15 +59,24 @@ type CollectionsProps = Omit< }; /** - * The horizontally scrollable bar shown at the top of the gallery. + * The gallery bar, the header for the list items, and state for any associated + * dialogs that might be triggered by actions on either the bar or the header.. * - * This component includes both the actual bar, and also the surrounding chrome - * and state for any associated dialogs that might be triggered by actions on - * the bar. + * This component manages the sticky horizontally scrollable bar shown at the + * top of the gallery, AND the non-sticky header shown below the bar, at the top + * of the actual list of items. + * + * These are disparate views - indeed, the list header is not even a child of + * this component but is instead proxied via {@link setPhotoListHeader}. Still, + * having this intermediate wrapper component allows us to move some of the + * common concerns shared by both the gallery bar and list header (e.g. some + * dialogs that can be invoked from both places) into this file instead of + * cluttering the already big gallery component. + * + * TODO: Once the gallery code is better responsibilitied out, consider moving + * this code back inline into the gallery. */ -// TODO-Cluster - Rename me to GalleryBar and subsume GalleryBarImpl - Or rename -// to GalleryBarAndHeader. -export const Collections: React.FC = ({ +export const GalleryBarAndListHeader: React.FC = ({ shouldHide, mode, onChangeMode, diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index 0748a2fa03..cd04293049 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -58,7 +58,6 @@ import MenuIcon from "@mui/icons-material/Menu"; import type { ButtonProps, IconButtonProps } from "@mui/material"; import { Box, Button, IconButton, Typography } from "@mui/material"; import AuthenticateUserModal from "components/AuthenticateUserModal"; -import { Collections } from "components/Collections"; import CollectionNamer, { CollectionNamerAttributes, } from "components/Collections/CollectionNamer"; @@ -66,6 +65,7 @@ import { CollectionSelector, CollectionSelectorAttributes, } from "components/Collections/CollectionSelector"; +import { GalleryBarAndListHeader } from "components/Collections/GalleryBarAndListHeader"; import ExportModal from "components/ExportModal"; import { FilesDownloadProgress, @@ -1130,7 +1130,7 @@ export default function Gallery() { )} - Date: Tue, 24 Sep 2024 16:36:06 +0530 Subject: [PATCH 19/23] unfile --- .../photos/components/Gallery/PersonList.tsx | 42 ---------------- .../new/photos/components/Gallery/index.tsx | 49 +++++++++++++++++-- 2 files changed, 45 insertions(+), 46 deletions(-) delete mode 100644 web/packages/new/photos/components/Gallery/PersonList.tsx diff --git a/web/packages/new/photos/components/Gallery/PersonList.tsx b/web/packages/new/photos/components/Gallery/PersonList.tsx deleted file mode 100644 index c659ce292c..0000000000 --- a/web/packages/new/photos/components/Gallery/PersonList.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type { Person } from "@/new/photos/services/ml/cgroups"; -import OverflowMenu from "@ente/shared/components/OverflowMenu/menu"; -import { OverflowMenuOption } from "@ente/shared/components/OverflowMenu/option"; -import EditIcon from "@mui/icons-material/Edit"; -import MoreHoriz from "@mui/icons-material/MoreHoriz"; -import { t } from "i18next"; -import React from "react"; -import { SpaceBetweenFlex } from "../mui-custom"; -import { GalleryItemsHeaderAdapter, GalleryItemsSummary } from "./ListHeader"; - -interface PeopleListHeaderProps { - person: Person; -} - -export const PersonListHeader: React.FC = ({ - person, -}) => { - const hasOptions = process.env.NEXT_PUBLIC_ENTE_WIP_CL; - return ( - - - - {hasOptions && ( - } - > - } - onClick={() => console.log("test")} - > - {t("download_album")} - - - )} - - - ); -}; diff --git a/web/packages/new/photos/components/Gallery/index.tsx b/web/packages/new/photos/components/Gallery/index.tsx index 928f1c3da0..25dfbf49ee 100644 --- a/web/packages/new/photos/components/Gallery/index.tsx +++ b/web/packages/new/photos/components/Gallery/index.tsx @@ -1,14 +1,22 @@ /** - * @file code that really belongs to pages/gallery.tsx itself, but written here - * in a separate file so that we can write in this package that has TypeScript - * strict mode enabled. Once the original gallery.tsx is strict mode, this code - * can be inlined back there. + * @file code that really belongs to pages/gallery.tsx itself (or related + * files), but it written here in a separate file so that we can write in this + * package that has TypeScript strict mode enabled. + * + * Once the original gallery.tsx is strict mode, this code can be inlined back + * there. */ +import type { Person } from "@/new/photos/services/ml/cgroups"; import type { SearchOption } from "@/new/photos/services/search/types"; +import OverflowMenu from "@ente/shared/components/OverflowMenu/menu"; +import { OverflowMenuOption } from "@ente/shared/components/OverflowMenu/option"; +import EditIcon from "@mui/icons-material/Edit"; +import MoreHoriz from "@mui/icons-material/MoreHoriz"; import { Typography } from "@mui/material"; import { t } from "i18next"; import React from "react"; +import { SpaceBetweenFlex } from "../mui-custom"; import { GalleryItemsHeaderAdapter, GalleryItemsSummary } from "./ListHeader"; interface SearchResultsHeaderProps { @@ -28,3 +36,36 @@ export const SearchResultsHeader: React.FC = ({ /> ); + +interface PeopleListHeaderProps { + person: Person; +} + +export const PersonListHeader: React.FC = ({ + person, +}) => { + const hasOptions = process.env.NEXT_PUBLIC_ENTE_WIP_CL; + return ( + + + + {hasOptions && ( + } + > + } + onClick={() => console.log("test")} + > + {t("download_album")} + + + )} + + + ); +}; From e10613fa0f14e62a5f110e78d7af9c1246ee89ac Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 16:38:10 +0530 Subject: [PATCH 20/23] person header --- .../Collections/GalleryBarAndListHeader.tsx | 39 +++++++++++-------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx index 69c211aeb8..337aa6823a 100644 --- a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx +++ b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx @@ -1,4 +1,5 @@ import type { Collection } from "@/media/collection"; +import { PersonListHeader } from "@/new/photos/components/Gallery"; import { GalleryBarImpl, type GalleryBarImplProps, @@ -34,6 +35,7 @@ import { } from "../FilesDownloadProgress"; import { AlbumCastDialog } from "./AlbumCastDialog"; import { CollectionHeader } from "./CollectionHeader"; +import { ensure } from "@/utils/ensure"; type CollectionsProps = Omit< GalleryBarImplProps, @@ -142,22 +144,27 @@ export const GalleryBarAndListHeader: React.FC = ({ if (shouldHide) return; setPhotoListHeader({ - item: ( - setOpenCollectionShareView(true)} - onCollectionCast={() => setOpenAlbumCastDialog(true)} - /> - ), + item: + mode != "people" ? ( + + setOpenCollectionShareView(true) + } + onCollectionCast={() => setOpenAlbumCastDialog(true)} + /> + ) : ( + + ), itemType: ITEM_TYPE.HEADER, height: 68, }); From a0df76c2c3524a521f2a6567363442a206fcf6c6 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 16:46:16 +0530 Subject: [PATCH 21/23] Color --- .../new/photos/components/Gallery/ListHeader.tsx | 15 +++++++++++++-- .../new/photos/components/Gallery/index.tsx | 1 + 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/web/packages/new/photos/components/Gallery/ListHeader.tsx b/web/packages/new/photos/components/Gallery/ListHeader.tsx index 89e35cfa99..787da61a9f 100644 --- a/web/packages/new/photos/components/Gallery/ListHeader.tsx +++ b/web/packages/new/photos/components/Gallery/ListHeader.tsx @@ -1,10 +1,18 @@ -import { Box, Stack, styled, Typography } from "@mui/material"; +import { + Box, + Stack, + styled, + Typography, + type TypographyProps, +} from "@mui/material"; import { t } from "i18next"; import React from "react"; interface GalleryItemsSummaryProps { /** The name / title for the items that are being shown. */ name: string; + /** Extra props to pass to the Typography component that shows the name. */ + nameProps?: TypographyProps; /** The number of items being shown. */ fileCount: number; /** An element (usually an icon) placed after the file count. */ @@ -17,12 +25,15 @@ interface GalleryItemsSummaryProps { */ export const GalleryItemsSummary: React.FC = ({ name, + nameProps, fileCount, endIcon, }) => { return (
- {name} + + {name} + = ({ {hasOptions && ( From 5076cf7647143eaa30db6bbbb47df26c2e7773c3 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 16:50:04 +0530 Subject: [PATCH 22/23] tweak --- .../photos/components/Gallery/ListHeader.tsx | 69 ++++++++++--------- 1 file changed, 37 insertions(+), 32 deletions(-) diff --git a/web/packages/new/photos/components/Gallery/ListHeader.tsx b/web/packages/new/photos/components/Gallery/ListHeader.tsx index 787da61a9f..3a68a94cd2 100644 --- a/web/packages/new/photos/components/Gallery/ListHeader.tsx +++ b/web/packages/new/photos/components/Gallery/ListHeader.tsx @@ -9,13 +9,22 @@ import { t } from "i18next"; import React from "react"; interface GalleryItemsSummaryProps { - /** The name / title for the items that are being shown. */ + /** + * The name / title for the items that are being shown. + */ name: string; - /** Extra props to pass to the Typography component that shows the name. */ + /** + * Optional extra props to pass to the {@link Typography} component that + * shows {@link name} + */ nameProps?: TypographyProps; - /** The number of items being shown. */ + /** + * The number of items being shown. + */ fileCount: number; - /** An element (usually an icon) placed after the file count. */ + /** + * An optional element, usually an icon, placed after the file count. + */ endIcon?: React.ReactNode; } @@ -28,35 +37,31 @@ export const GalleryItemsSummary: React.FC = ({ nameProps, fileCount, endIcon, -}) => { - return ( -
- - {name} - +}) => ( +
+ + {name} + - - - {t("photos_count", { count: fileCount })} - - {endIcon && ( - - {endIcon} - - )} - -
- ); -}; + + + {t("photos_count", { count: fileCount })} + + {endIcon && ( + + {endIcon} + + )} + +
+); /** * A component suitable for wrapping a component which is acting like a gallery From 459b49a12162ca0d41392a02261b891711d73a1a Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 24 Sep 2024 18:22:43 +0530 Subject: [PATCH 23/23] lf --- .../src/components/Collections/GalleryBarAndListHeader.tsx | 2 +- web/packages/new/photos/components/Gallery/BarImpl.tsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx index 337aa6823a..d92032b960 100644 --- a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx +++ b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx @@ -9,6 +9,7 @@ import { type CollectionsSortBy, type CollectionSummaries, } from "@/new/photos/types/collection"; +import { ensure } from "@/utils/ensure"; import { includes } from "@/utils/type-guards"; import { getData, @@ -35,7 +36,6 @@ import { } from "../FilesDownloadProgress"; import { AlbumCastDialog } from "./AlbumCastDialog"; import { CollectionHeader } from "./CollectionHeader"; -import { ensure } from "@/utils/ensure"; type CollectionsProps = Omit< GalleryBarImplProps, diff --git a/web/packages/new/photos/components/Gallery/BarImpl.tsx b/web/packages/new/photos/components/Gallery/BarImpl.tsx index e1a0a48929..eeadd3ed25 100644 --- a/web/packages/new/photos/components/Gallery/BarImpl.tsx +++ b/web/packages/new/photos/components/Gallery/BarImpl.tsx @@ -1,6 +1,10 @@ import { useIsMobileWidth } from "@/base/hooks"; import { CollectionsSortOptions } from "@/new/photos/components/CollectionsSortOptions"; -import { BarItemTile, ItemCard, TileTextOverlay } from "@/new/photos/components/ItemCards"; +import { + BarItemTile, + ItemCard, + TileTextOverlay, +} from "@/new/photos/components/ItemCards"; import { FilledIconButton, UnstyledButton,