Title

ente-io · Dec 23, 2024 · 26c0a8e · 26c0a8e
1 parent 2e2c972
commit 26c0a8e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
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,6 +135,14 @@ 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.
  */
@@ -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/pages/duplicates.tsx b/web/packages/new/photos/pages/duplicates.tsx
@@ -37,7 +37,11 @@ import {
     VariableSizeList,
     type ListChildComponentProps,
 } from "react-window";
-import { BaseTile, ItemCard } from "../components/Tiles";
+import {
+    DuplicateItemTile,
+    DuplicateTileTextOverlay,
+    ItemCard,
+} from "../components/Tiles";
 import {
     computeThumbnailGridLayoutParams,
     type ThumbnailGridLayoutParams,
@@ -503,22 +507,19 @@ const ListItem: React.FC<ListChildComponentProps<DuplicatesListItemData>> =
                     {items.map((item, j) => (
                         <ItemCard
                             key={j}
-                            TileComponent={ItemTile}
+                            TileComponent={DuplicateItemTile}
                             coverFile={item.file}
                         >
-                            {/* {item.collectionName} */}
+                            <DuplicateTileTextOverlay>
+                                <Typography color="text.muted">{item.collectionName}</Typography>
+                            </DuplicateTileTextOverlay>
                         </ItemCard>
                     ))}
                 </ItemGrid>
             </Stack>
         );
     }, areEqual);
 
-export const ItemTile = styled(BaseTile)`
-    /* The thumbnails are not interactable, reset the pointer */
-    cursor: initial;
-`;
-
 type ItemGridProps = Pick<DuplicatesListItemData, "layoutParams">;
 
 const ItemGrid = styled("div", {