Improve readability of the log entries

apps/app/src/client/components/RecentActivity/ActivityListItem.tsx

@@ -1,3 +1,5 @@
+import { formatDistanceToNow } from 'date-fns';
+
 import type { ActivityHasUserId, SupportedActivityActionType } from '~/interfaces/activity';
 import { ActivityLogActions } from '~/interfaces/activity';
 
@@ -16,20 +18,57 @@ export const ActivityActionTranslationMap: Record<
   [ActivityLogActions.ACTION_COMMENT_CREATE]: 'posted a comment',
 };
 
+export const IconActivityTranslationMap: Record<
+  SupportedActivityActionType,
+  string
+> = {
+  [ActivityLogActions.ACTION_PAGE_CREATE]: '➕',
+  [ActivityLogActions.ACTION_PAGE_UPDATE]: '✏️',
+  [ActivityLogActions.ACTION_PAGE_DELETE]: '🗑️',
+  [ActivityLogActions.ACTION_PAGE_DELETE_COMPLETELY]: '❌',
+  [ActivityLogActions.ACTION_PAGE_RENAME]: '🏷️',
+  [ActivityLogActions.ACTION_PAGE_REVERT]: '⏪',
+  [ActivityLogActions.ACTION_PAGE_DUPLICATE]: '📄📄',
+  [ActivityLogActions.ACTION_PAGE_LIKE]: '❤️',
+  [ActivityLogActions.ACTION_COMMENT_CREATE]: '💬',
+};
+
 const translateAction = (action: SupportedActivityActionType): string => {
   return ActivityActionTranslationMap[action] || 'performed an unknown action';
 };
 
+const setIcon = (action: SupportedActivityActionType): string => {
+  return IconActivityTranslationMap[action] || 'performed an unknown action';
+};
+
+const calculateTimePassed = (date: Date): string => {
+  const timePassed = formatDistanceToNow(date, { addSuffix: true });
+
+  return timePassed;
+};
+
 
 export const ActivityListItem = ({ activity }: { activity: ActivityHasUserId }): JSX.Element => {
   const username = activity.user?.username;
   const action = activity.action as SupportedActivityActionType;
-  const date = new Date(activity.createdAt).toLocaleString();
 
   return (
     <div className="activity-row">
       <p className="text-muted small mb-1">
-        {username} {translateAction(action)} on {date}
+        {setIcon(action)}
+
+        <span className="text-gray-900 dark:text-white">
+          {username}
+        </span>
+
+        <strong className="text-gray-900 dark:text-white">
+          {' '}{translateAction(action)}
+        </strong>
+
+        <span className="text-muted text-xs">
+          {' '}・{' '}
+          {calculateTimePassed(activity.createdAt)}
+        </span>
       </p>
     </div>
   );