feat: last project events ui polishing (#8298)

frontend/src/component/personalDashboard/ContentGridNoProjects.tsx

@@ -103,7 +103,7 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
                         </p>
                         <AdminList>
                             {admins.map((admin) => (
-                                <AdminListItem>
+                                <AdminListItem key={admin.name}>
                                     <UserAvatar
                                         sx={{
                                             margin: 0,

frontend/src/component/personalDashboard/LatestProjectEvents.tsx

@@ -1,22 +1,41 @@
 import type { FC } from 'react';
-import type { PersonalDashboardProjectDetailsSchema } from '../../openapi';
 import { Markdown } from '../common/Markdown/Markdown';
+import type { PersonalDashboardProjectDetailsSchema } from '../../openapi';
+import { UserAvatar } from '../common/UserAvatar/UserAvatar';
+import { styled } from '@mui/material';
+
+const Events = styled('ul')(({ theme }) => ({
+    padding: 0,
+    alignItems: 'flex-start',
+}));
+
+const Event = styled('li')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(2),
+    listStyleType: 'none',
+    padding: 0,
+    marginBottom: theme.spacing(4),
+}));
 
 export const LatestProjectEvents: FC<{
     latestEvents: PersonalDashboardProjectDetailsSchema['latestEvents'];
 }> = ({ latestEvents }) => {
     return (
-        <ul>
+        <Events>
             {latestEvents.map((event) => {
                 return (
-                    <li key={event.summary}>
+                    <Event key={event.id}>
+                        <UserAvatar
+                            src={event.createdByImageUrl}
+                            sx={{ mt: 1 }}
+                        />
                         <Markdown>
                             {event.summary ||
                                 'No preview available for this event'}
                         </Markdown>
-                    </li>
+                    </Event>
                 );
             })}
-        </ul>
+        </Events>
     );
 };

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts

@@ -15,4 +15,6 @@ export type PersonalDashboardProjectDetailsSchemaLatestEventsItem = {
      * @nullable
      */
     summary: string | null;
+    id: number;
+    createdByImageUrl: string;
 };

src/lib/features/personal-dashboard/personal-dashboard-service.ts

@@ -11,9 +11,15 @@ import type { IProjectReadModel } from '../project/project-read-model-type';
 import type { IPrivateProjectChecker } from '../private-project/privateProjectCheckerType';
 import type { IEventStore } from '../../types';
 import type { FeatureEventFormatter } from '../../addons/feature-event-formatter-md';
+import { generateImageUrl } from '../../util';
 
 type PersonalProjectDetails = {
-    latestEvents: { summary: string; createdBy: string }[];
+    latestEvents: {
+        summary: string;
+        createdBy: string;
+        id: number;
+        createdByImageUrl: string;
+    }[];
 };
 
 export class PersonalDashboardService {
@@ -93,6 +99,8 @@ export class PersonalDashboardService {
         const formattedEvents = recentEvents.map((event) => ({
             summary: this.featureEventFormatter.format(event).text,
             createdBy: event.createdBy,
+            id: event.id,
+            createdByImageUrl: generateImageUrl({ email: event.createdBy }),
         }));
 
         return { latestEvents: formattedEvents };

src/lib/openapi/spec/personal-dashboard-project-details-schema.ts

@@ -17,6 +17,11 @@ export const personalDashboardProjectDetailsSchema = {
                 additionalProperties: false,
                 required: ['summary', 'createdBy'],
                 properties: {
+                    id: {
+                        type: 'integer',
+                        minimum: 1,
+                        description: 'The ID of the event.',
+                    },
                     summary: {
                         type: 'string',
                         nullable: true,
@@ -28,6 +33,11 @@ export const personalDashboardProjectDetailsSchema = {
                         description: 'Which user created this event',
                         example: 'johndoe',
                     },
+                    createdByImageUrl: {
+                        type: 'string',
+                        description: `URL used for the user profile image of the event author`,
+                        example: 'https://example.com/242x200.png',
+                    },
                 },
             },
         },