diff --git a/apps/client/src/features/page-history/components/history-item.tsx b/apps/client/src/features/page-history/components/history-item.tsx index e44614c4..cc56b191 100644 --- a/apps/client/src/features/page-history/components/history-item.tsx +++ b/apps/client/src/features/page-history/components/history-item.tsx @@ -1,4 +1,4 @@ -import { Text, Group, UnstyledButton } from "@mantine/core"; +import { Text, Group, UnstyledButton, Avatar, Tooltip } from "@mantine/core"; import { CustomAvatar } from "@/components/ui/custom-avatar.tsx"; import { formattedDate } from "@/lib/time"; import classes from "./css/history.module.css"; @@ -6,6 +6,8 @@ import clsx from "clsx"; import { IPageHistory } from "@/features/page-history/types/page.types"; import { memo, useCallback } from "react"; +const MAX_VISIBLE_AVATARS = 5; + interface HistoryItemProps { historyItem: IPageHistory; index: number; @@ -31,6 +33,9 @@ const HistoryItem = memo(function HistoryItem({ onHover?.(historyItem.id, index); }, [onHover, historyItem.id, index]); + const contributors = historyItem.contributors; + const hasContributors = contributors && contributors.length > 0; + return ( - -
- - {formattedDate(new Date(historyItem.createdAt))} - + {formattedDate(new Date(historyItem.createdAt))} -
- - + + {hasContributors ? ( + <> + + + {contributors.slice(0, MAX_VISIBLE_AVATARS).map((contributor) => ( + + + + ))} + {contributors.length > MAX_VISIBLE_AVATARS && ( + ( +
{c.name}
+ ))} + > + + +{contributors.length - MAX_VISIBLE_AVATARS} + +
+ )} +
+
+ {contributors.length === 1 && ( - {historyItem.lastUpdatedBy?.name} + {contributors[0].name} -
-
-
+ )} + + ) : ( + <> + + + {historyItem.lastUpdatedBy?.name} + + + )}
); diff --git a/apps/client/src/features/page-history/components/history-modal-mobile.tsx b/apps/client/src/features/page-history/components/history-modal-mobile.tsx index 0a54a01c..b73695da 100644 --- a/apps/client/src/features/page-history/components/history-modal-mobile.tsx +++ b/apps/client/src/features/page-history/components/history-modal-mobile.tsx @@ -62,11 +62,18 @@ export default function HistoryModalMobile({ pageId, pageTitle }: Props) { const selectData = useMemo( () => - historyItems.map((item) => ({ - value: item.id, - label: formattedDate(new Date(item.createdAt)), - userName: item.lastUpdatedBy?.name, - })), + historyItems.map((item) => { + const contributors = item.contributors; + const hasContributors = contributors && contributors.length > 0; + const names = hasContributors + ? contributors.map((c) => c.name).join(", ") + : item.lastUpdatedBy?.name; + return { + value: item.id, + label: formattedDate(new Date(item.createdAt)), + userName: names, + }; + }), [historyItems], ); diff --git a/apps/client/src/features/page-history/types/page.types.ts b/apps/client/src/features/page-history/types/page.types.ts index 98a5b9d7..45b2e1f8 100644 --- a/apps/client/src/features/page-history/types/page.types.ts +++ b/apps/client/src/features/page-history/types/page.types.ts @@ -18,4 +18,5 @@ export interface IPageHistory { createdAt: string; updatedAt: string; lastUpdatedBy: IPageHistoryUser; + contributors?: IPageHistoryUser[]; }