diff --git a/web/packages/new/photos/components/gallery/PeopleHeader.tsx b/web/packages/new/photos/components/gallery/PeopleHeader.tsx index eda19d8a29..03edf6b5ce 100644 --- a/web/packages/new/photos/components/gallery/PeopleHeader.tsx +++ b/web/packages/new/photos/components/gallery/PeopleHeader.tsx @@ -30,11 +30,11 @@ import AddIcon from "@mui/icons-material/Add"; import CheckIcon from "@mui/icons-material/Check"; import ClearIcon from "@mui/icons-material/Clear"; import EditIcon from "@mui/icons-material/Edit"; -import ListAltOutlined from "@mui/icons-material/ListAltOutlined"; -import MoreHoriz from "@mui/icons-material/MoreHoriz"; +import ChecklistRtlIcon from '@mui/icons-material/ChecklistRtl'; +import ListAltOutlinedIcon from "@mui/icons-material/ListAltOutlined"; +import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; import RestoreIcon from "@mui/icons-material/Restore"; import { - Box, Dialog, DialogActions, DialogContent, @@ -155,7 +155,7 @@ const CGroupPersonHeader: React.FC = ({ /> } + triggerButtonIcon={} > } @@ -173,7 +173,7 @@ const CGroupPersonHeader: React.FC = ({ {process.env.NEXT_PUBLIC_ENTE_WIP_CL /* TODO-Cluster */ && ( } + startIcon={} centerAlign onClick={showSuggestions} > @@ -235,7 +235,7 @@ const ClusterPersonHeader: React.FC = ({ } + triggerButtonIcon={} > } @@ -270,6 +270,10 @@ interface SuggestionsDialogState { * True if "fetching" failed. */ fetchFailed: boolean; + /** + * True if we should show the existing clusters. + */ + showSavedSuggestions: boolean; /** * List of clusters (suitably augmented for the UI display) which might * belong to the person, and being offered to the user as suggestions. @@ -290,12 +294,14 @@ type SuggestionsDialogAction = | { type: "fetched"; personID: string; suggestions: PersonSuggestion[] } | { type: "mark"; suggestion: PersonSuggestion; value: SuggestionMark } | { type: "save" } + | { type: "toggleHistory" } | { type: "close" }; const initialSuggestionsDialogState: SuggestionsDialogState = { activity: undefined, personID: undefined, fetchFailed: false, + showSavedSuggestions: false, suggestions: [], markedSuggestionIDs: new Map(), }; @@ -310,6 +316,7 @@ const suggestionsDialogReducer = ( activity: "fetching", personID: action.personID, fetchFailed: false, + showSavedSuggestions: false, suggestions: [], markedSuggestionIDs: new Map(), }; @@ -336,6 +343,11 @@ const suggestionsDialogReducer = ( markedSuggestionIDs, }; } + case "toggleHistory": + return { + ...state, + showSavedSuggestions: !state.showSavedSuggestions, + }; case "save": return { ...state, activity: "saving" }; case "close": @@ -416,6 +428,8 @@ const SuggestionsDialog: React.FC = ({ const handleMark = (suggestion: PersonSuggestion, value: SuggestionMark) => dispatch({ type: "mark", suggestion, value }); + const handleToggleHistory = () => dispatch({ type: "toggleHistory" }); + const handleSave = async () => { try { // TODO-Cluster @@ -437,27 +451,33 @@ const SuggestionsDialog: React.FC = ({ fullScreen={isSmallWidth} PaperProps={{ sx: { minHeight: "80svh" } }} > - + - {pt("Review suggestions")} + {state.showSavedSuggestions + ? pt("Saved suggestions") + : pt("Review suggestions")} {person.name ?? " "} - - - - + + + {state.showSavedSuggestions ? ( + + ) : ( + + )} + + + {state.activity == "fetching" ? (