[web] New dedup - WIP - Part x/x (#4482)

ente-io · Dec 23, 2024 · 977f5c2 · 977f5c2
2 parents 748dd2b + dafbf23
commit 977f5c2
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 25 deletions.
diff --git a/web/packages/base/components/Typography.tsx b/web/packages/base/components/Typography.tsx
@@ -14,8 +14,24 @@ export const EllipsizedTypography = styled(Typography)`
        hidden instead. */
     overflow: hidden;
     /* Specify handling of text when it overflows, asking the browser to insert
-       ellipsis instead of clipping. */
+       ellipsis instead of clipping.
+
+       Note that both overflow and text-overflow are required.
+      */
     text-overflow: ellipsis;
     /* Don't automatically wrap the text by inserting line breaks. */
     white-space: nowrap;
 `;
+
+/**
+ * A variant of {@link EllipsizedTypography} that takes up to 2 lines.
+ */
+export const Ellipsized2LineTypography = styled(Typography)`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* number of lines to show */
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+`;
diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx
@@ -231,7 +231,9 @@ const CollectionButton: React.FC<CollectionButtonProps> = ({
 
 const AddCollectionButton: React.FC<ButtonishProps> = ({ onClick }) => (
     <ItemCard TileComponent={LargeTileButton} onClick={onClick}>
-        <LargeTileTextOverlay>{t("create_albums")}</LargeTileTextOverlay>
+        <LargeTileTextOverlay>
+            <Typography>{t("create_albums")}</Typography>
+        </LargeTileTextOverlay>
         <LargeTilePlusOverlay>+</LargeTilePlusOverlay>
     </ItemCard>
 );
diff --git a/web/packages/new/photos/components/Tiles.tsx b/web/packages/new/photos/components/Tiles.tsx
@@ -102,7 +102,7 @@ export const ItemCard: React.FC<React.PropsWithChildren<ItemCardProps>> = ({
  * Use {@link ItemTileOverlay} (usually via one of its presets) to overlay
  * content on top of the tile.
  */
-export const BaseTile = styled("div")`
+const BaseTile = styled("div")`
     display: flex;
     /* Act as container for the absolutely positioned ItemTileOverlays. */
     position: relative;
@@ -135,14 +135,22 @@ export const BarItemTile = styled(BaseTile)`
     height: 64px;
 `;
 
+/**
+ * A square tile used on the duplicates listing.
+ */
+export const DuplicateItemTile = styled(BaseTile)`
+    /* The thumbnails are not interactable, reset the pointer */
+    cursor: initial;
+`;
+
 /**
  * A variant of {@link BaseTile} meant for use when the tile is interactable.
  */
 export const BaseTileButton = styled(UnstyledButton)`
     /* Buttons reset this to center */
     text-align: inherit;
 
-    /* Rest of this is mostly verbatim from ItemTile ... */
+    /* Rest of this is mostly verbatim from BaseTile ... */
 
     display: flex;
     /* Act as container for the absolutely positioned ItemTileOverlays. */
@@ -181,8 +189,8 @@ export const ItemTileOverlay = styled("div")`
 `;
 
 /**
- * An {@link ItemTileOverlay} suitable for hosting textual content for small and
- * medium sized tiles.
+ * An {@link ItemTileOverlay} suitable for hosting textual content at the top
+ * left of small and medium sized tiles.
  */
 export const TileTextOverlay = styled(ItemTileOverlay)`
     padding: 4px;
@@ -216,3 +224,15 @@ export const LargeTilePlusOverlay = styled(ItemTileOverlay)`
     font-size: 42px;
     color: ${({ theme }) => theme.colors.stroke.muted};
 `;
+
+/**
+ * An {@link ItemTileOverlay} suitable for holding the collection name shown
+ * atop the tiles in the duplicates listing.
+ */
+export const DuplicateTileTextOverlay = styled(ItemTileOverlay)`
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    padding: 4px;
+    background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.7));
+`;
diff --git a/web/packages/new/photos/components/gallery/BarImpl.tsx b/web/packages/new/photos/components/gallery/BarImpl.tsx
@@ -1,5 +1,6 @@
 import { FilledIconButton } from "@/base/components/mui";
 import { Overlay } from "@/base/components/mui/Container";
+import { Ellipsized2LineTypography } from "@/base/components/Typography";
 import { useIsSmallWidth } from "@/base/components/utils/hooks";
 import { CollectionsSortOptions } from "@/new/photos/components/CollectionsSortOptions";
 import {
@@ -508,21 +509,13 @@ const CollectionBarCard: React.FC<CollectionBarCardProps> = ({
 const CardText: React.FC<React.PropsWithChildren> = ({ children }) => (
     <TileTextOverlay>
         <Box height={"2.1em"}>
-            <Ellipsized variant="small">{children}</Ellipsized>
+            <Ellipsized2LineTypography variant="small">
+                {children}
+            </Ellipsized2LineTypography>
         </Box>
     </TileTextOverlay>
 );
 
-const Ellipsized = styled(Typography)`
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2; // number of lines to show
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    word-break: break-word;
-`;
-
 interface CollectionBarCardIconProps {
     type: CollectionSummaryType;
 }

diff --git a/web/packages/new/photos/pages/duplicates.tsx b/web/packages/new/photos/pages/duplicates.tsx
@@ -7,6 +7,7 @@ import {
     OverflowMenu,
     OverflowMenuOption,
 } from "@/base/components/OverflowMenu";
+import { Ellipsized2LineTypography } from "@/base/components/Typography";
 import { pt } from "@/base/i18n";
 import log from "@/base/log";
 import { formattedByteSize } from "@/new/photos/utils/units";
@@ -37,6 +38,11 @@ import {
     VariableSizeList,
     type ListChildComponentProps,
 } from "react-window";
+import {
+    DuplicateItemTile,
+    DuplicateTileTextOverlay,
+    ItemCard,
+} from "../components/Tiles";
 import {
     computeThumbnailGridLayoutParams,
     type ThumbnailGridLayoutParams,
@@ -500,15 +506,17 @@ const ListItem: React.FC<ListChildComponentProps<DuplicatesListItemData>> =
                 </Stack>
                 <ItemGrid {...{ layoutParams }}>
                     {items.map((item, j) => (
-                        <div
+                        <ItemCard
                             key={j}
-                            style={{
-                                background: "red",
-                                border: "2px solid green",
-                            }}
+                            TileComponent={DuplicateItemTile}
+                            coverFile={item.file}
                         >
-                            {item.collectionName}
-                        </div>
+                            <DuplicateTileTextOverlay>
+                                <Ellipsized2LineTypography color="text.muted">
+                                    {item.collectionName}
+                                </Ellipsized2LineTypography>
+                            </DuplicateTileTextOverlay>
+                        </ItemCard>
                     ))}
                 </ItemGrid>
             </Stack>
@@ -523,7 +531,8 @@ const ItemGrid = styled("div", {
     ({ layoutParams }) => `
     display: grid;
     padding-inline: ${layoutParams.paddingInline}px;
-    grid-template-columns: repeat(${layoutParams.columns}, 1fr);
+    grid-template-columns: repeat(${layoutParams.columns}, ${layoutParams.itemWidth}px);
+    grid-auto-rows: ${layoutParams.itemHeight}px;
     gap: ${layoutParams.gap}px;
 `,
 );