feat(ticket): redesign audit timeline with structured history events

src/components/person-avatar.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { UserRound } from 'lucide-react';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { cn } from '@/lib/utils';
+import type { TicketActor } from '@/types';
+import { getPersonLabel } from '@/utils/person';
+
+type PersonAvatarProps = {
+  person: TicketActor | null | undefined;
+  size?: 'default' | 'sm' | 'lg';
+  className?: string;
+};
+
+export function PersonAvatar({
+  person,
+  size = 'default',
+  className,
+}: PersonAvatarProps) {
+  const avatarUrl = person?.avatar_url?.trim();
+
+  return (
+    <Avatar size={size} className={className}>
+      {avatarUrl ? (
+        <AvatarImage src={avatarUrl} alt={getPersonLabel(person)} />
+      ) : null}
+      <AvatarFallback className="bg-muted text-muted-foreground">
+        <UserRound
+          className={cn(
+            'shrink-0',
+            size === 'sm' ? 'size-3.5' : size === 'lg' ? 'size-5' : 'size-4',
+          )}
+          aria-hidden
+        />
+      </AvatarFallback>
+    </Avatar>
+  );
+}
+
+type PersonInfoProps = {
+  person: TicketActor | null | undefined;
+  size?: 'default' | 'sm' | 'lg';
+  className?: string;
+};
+
+export function PersonInfo({
+  person,
+  size = 'sm',
+  className,
+}: PersonInfoProps) {
+  if (!person) {
+    return <p className="text-sm text-muted-foreground">-</p>;
+  }
+
+  const name = person.name?.trim();
+  const email = person.email?.trim();
+
+  return (
+    <div className={cn('flex min-w-0 items-center gap-2.5', className)}>
+      <PersonAvatar person={person} size={size} />
+      <div className="min-w-0">
+        <p className="truncate text-sm text-foreground">
+          {name || email || 'Unknown'}
+        </p>
+        {name && email ? (
+          <p className="truncate text-xs text-muted-foreground">{email}</p>
+        ) : null}
+      </div>
+    </div>
+  );
+}