Use in people section too

web/packages/new/photos/components/CollectionSelector.tsx

@@ -1,10 +1,10 @@
-import { CenteredFill, SpaceBetweenFlex } from "@/base/components/containers";
-import { type ButtonishProps } from "@/base/components/mui";
+import { SpaceBetweenFlex } from "@/base/components/containers";
 import type { ModalVisibilityProps } from "@/base/components/utils/modal";
 import type { Collection } from "@/media/collection";
 import {
     ItemCard,
     LargeTileButton,
+    LargeTileCreateNewButton,
     LargeTileTextOverlay,
 } from "@/new/photos/components/Tiles";
 import {
@@ -14,12 +14,10 @@ import {
     type CollectionSummaries,
     type CollectionSummary,
 } from "@/new/photos/services/collection/ui";
-import AddIcon from "@mui/icons-material/Add";
 import {
     Dialog,
     DialogContent,
     DialogTitle,
-    Stack,
     styled,
     Typography,
     useMediaQuery,
@@ -174,7 +172,9 @@ export const CollectionSelector: React.FC<CollectionSelectorProps> = ({
             </SpaceBetweenFlex>
 
             <DialogContent_>
-                <AddCollectionButton onClick={onCreateCollection} />
+                <LargeTileCreateNewButton onClick={onCreateCollection}>
+                    {t("create_albums")}
+                </LargeTileCreateNewButton>
                 {filteredCollections.map((collectionSummary) => (
                     <CollectionButton
                         key={collectionSummary.id}
@@ -227,23 +227,3 @@ const CollectionButton: React.FC<CollectionButtonProps> = ({
         </LargeTileTextOverlay>
     </ItemCard>
 );
-
-const AddCollectionButton: React.FC<ButtonishProps> = ({ onClick }) => (
-    <LargeTileButton onClick={onClick}>
-        <Stack
-            sx={{
-                flex: 1,
-                height: "100%",
-                border: "1px dashed",
-                borderColor: "stroke.muted",
-                borderRadius: "4px",
-                padding: 1,
-            }}
-        >
-            <Typography>{t("create_albums")}</Typography>
-            <CenteredFill>
-                <AddIcon />
-            </CenteredFill>
-        </Stack>
-    </LargeTileButton>
-);

web/packages/new/photos/components/Tiles.tsx

@@ -1,4 +1,5 @@
-import { Overlay } from "@/base/components/containers";
+import { CenteredFill, Overlay } from "@/base/components/containers";
+import type { ButtonishProps } from "@/base/components/mui";
 import { wipTheme } from "@/base/components/utils/theme";
 import { downloadManager } from "@/gallery/services/download";
 import { type EnteFile } from "@/media/file";
@@ -6,7 +7,8 @@ import {
     LoadingThumbnail,
     StaticThumbnail,
 } from "@/new/photos/components/PlaceholderThumbnails";
-import { styled } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import { Stack, styled, Typography } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { faceCrop } from "../services/ml";
 import { UnstyledButton } from "./UnstyledButton";
@@ -211,16 +213,35 @@ export const LargeTileTextOverlay = styled(Overlay)(({ theme }) => ({
 }));
 
 /**
- * A container for "+", suitable for use with a {@link LargeTileTextOverlay}.
+ * A {@link LargeTileButton} suitable for use as the trigger for creating a new
+ * entry (e.g. creating new album, or a new person).
+ *
+ * It is styled to go well with other {@link LargeTileButton}s that display
+ * existing entries, except this one can allow the user to create a new item.
+ *
+ * The child is expected to be a text, it'll be wrapped in a {@link Typography}
+ * and shown at the top left of the button.
  */
-export const LargeTilePlusOverlay = styled(Overlay)(
-    ({ theme }) => `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 42px;
-    color: ${theme.vars.palette.stroke.muted};
-`,
+export const LargeTileCreateNewButton: React.FC<
+    React.PropsWithChildren<ButtonishProps>
+> = ({ onClick, children }) => (
+    <LargeTileButton onClick={onClick}>
+        <Stack
+            sx={{
+                flex: 1,
+                height: "100%",
+                border: "1px dashed",
+                borderColor: "stroke.muted",
+                borderRadius: "4px",
+                padding: 1,
+            }}
+        >
+            <Typography>{children}</Typography>
+            <CenteredFill>
+                <AddIcon />
+            </CenteredFill>
+        </Stack>
+    </LargeTileButton>
 );
 
 /**

web/packages/new/photos/components/gallery/PeopleHeader.tsx

@@ -1,6 +1,5 @@
 import { CenteredFill, SpaceBetweenFlex } from "@/base/components/containers";
 import { ActivityErrorIndicator } from "@/base/components/ErrorIndicator";
-import { type ButtonishProps } from "@/base/components/mui";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import { LoadingButton } from "@/base/components/mui/LoadingButton";
@@ -65,7 +64,7 @@ import { SuggestionFaceList } from "../PeopleList";
 import {
     ItemCard,
     LargeTileButton,
-    LargeTilePlusOverlay,
+    LargeTileCreateNewButton,
     LargeTileTextOverlay,
 } from "../Tiles";
 import { useWrapAsyncOperation } from "../utils/use-wrap-async";
@@ -357,7 +356,9 @@ const AddPersonDialog: React.FC<AddPersonDialogProps> = ({
                     <DialogCloseIconButton {...{ onClose }} />
                 </SpaceBetweenFlex>
                 <DialogContent_>
-                    <AddPerson onClick={handleAddPerson} />
+                    <LargeTileCreateNewButton onClick={handleAddPerson}>
+                        {t("new_person")}
+                    </LargeTileCreateNewButton>
                     {cgroupPeople.map((person) => (
                         <PersonButton
                             key={person.id}
@@ -410,13 +411,6 @@ const PersonButton: React.FC<PersonButtonProps> = ({
     </ItemCard>
 );
 
-const AddPerson: React.FC<ButtonishProps> = ({ onClick }) => (
-    <ItemCard TileComponent={LargeTileButton} onClick={onClick}>
-        <LargeTileTextOverlay>{t("new_person")}</LargeTileTextOverlay>
-        <LargeTilePlusOverlay>+</LargeTilePlusOverlay>
-    </ItemCard>
-);
-
 type SuggestionsDialogProps = ModalVisibilityProps & {
     person: CGroupPerson;
 };