display contributor avatars in history list

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 (
     <UnstyledButton
       p="xs"
@@ -39,25 +44,54 @@ const HistoryItem = memo(function HistoryItem({
       onMouseLeave={onHoverEnd}
       className={clsx(classes.history, { [classes.active]: isActive })}
     >
-      <Group wrap="nowrap">
+      <Text size="sm">{formattedDate(new Date(historyItem.createdAt))}</Text>
-        <div>
-          <Text size="sm">
-            {formattedDate(new Date(historyItem.createdAt))}
-          </Text>
 
-          <div style={{ flex: 1 }}>
+      <Group gap={6} wrap="nowrap" mt={4}>
-            <Group gap={4} wrap="nowrap">
+        {hasContributors ? (
-              <CustomAvatar
+          <>
-                size="sm"
+            <Tooltip.Group openDelay={300} closeDelay={100}>
-                avatarUrl={historyItem.lastUpdatedBy?.avatarUrl}
+              <Avatar.Group spacing={8}>
-                name={historyItem.lastUpdatedBy?.name}
+                {contributors.slice(0, MAX_VISIBLE_AVATARS).map((contributor) => (
-              />
+                  <Tooltip key={contributor.id} label={contributor.name} withArrow>
+                    <CustomAvatar
+                      size="sm"
+                      avatarUrl={contributor.avatarUrl}
+                      name={contributor.name}
+                    />
+                  </Tooltip>
+                ))}
+                {contributors.length > MAX_VISIBLE_AVATARS && (
+                  <Tooltip
+                    withArrow
+                    label={contributors.slice(MAX_VISIBLE_AVATARS).map((c) => (
+                      <div key={c.id}>{c.name}</div>
+                    ))}
+                  >
+                    <Avatar size="sm" color="gray">
+                      +{contributors.length - MAX_VISIBLE_AVATARS}
+                    </Avatar>
+                  </Tooltip>
+                )}
+              </Avatar.Group>
+            </Tooltip.Group>
+            {contributors.length === 1 && (
               <Text size="sm" c="dimmed" lineClamp={1}>
-                {historyItem.lastUpdatedBy?.name}
+                {contributors[0].name}
               </Text>
-            </Group>
+            )}
-          </div>
+          </>
-        </div>
+        ) : (
+          <>
+            <CustomAvatar
+              size="sm"
+              avatarUrl={historyItem.lastUpdatedBy?.avatarUrl}
+              name={historyItem.lastUpdatedBy?.name}
+            />
+            <Text size="sm" c="dimmed" lineClamp={1}>
+              {historyItem.lastUpdatedBy?.name}
+            </Text>
+          </>
+        )}
       </Group>
     </UnstyledButton>
   );

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) => ({
+      historyItems.map((item) => {
-        value: item.id,
+        const contributors = item.contributors;
-        label: formattedDate(new Date(item.createdAt)),
+        const hasContributors = contributors && contributors.length > 0;
-        userName: item.lastUpdatedBy?.name,
+        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],
   );
 

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[];
 }