Activity feed timeline with user avatars

<!--
  Расхождение с апстримом: сетевые аватары (unsplash) заменены статичным
  1x1 data-URI (PIXEL) — сетевые запросы в headless-стенде недетерминированы.
-->
<script setup lang="ts">
import { Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator } from "@/components/reui/timeline"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

const PIXEL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="

const activities = [
  { id: 1, user: "Alex Johnson", avatar: PIXEL, action: "pushed 3 commits to", target: "main", date: "5 minutes ago" },
  { id: 2, user: "Sarah Chen", avatar: PIXEL, action: "opened pull request", target: "#284 — Add dark mode", date: "20 minutes ago" },
  { id: 3, user: "David Kim", avatar: PIXEL, action: "commented on", target: "Issue #142", date: "1 hour ago" },
  { id: 4, user: "Emma Wilson", avatar: PIXEL, action: "deployed to", target: "production", date: "2 hours ago" },
  { id: 5, user: "Michael Rodriguez", avatar: PIXEL, action: "merged branch", target: "feat/notifications", date: "3 hours ago" },
]

function initials(name: string) {
  return name
    .split(" ")
    .map((n) => n[0])
    .join("")
}
</script>

<template>
  <div class="w-full max-w-md">
    <Timeline :value="5">
      <TimelineItem
        v-for="activity in activities"
        :key="activity.id"
        :step="activity.id"
        class="group-data-[orientation=vertical]/timeline:ms-10"
      >
        <TimelineHeader>
          <TimelineSeparator class="bg-input! group-data-[orientation=vertical]/timeline:top-2 group-data-[orientation=vertical]/timeline:-left-8 group-data-[orientation=vertical]/timeline:h-[calc(100%-2.5rem)] group-data-[orientation=vertical]/timeline:translate-y-7" />
          <TimelineIndicator class="size-8 overflow-hidden rounded-full border-none group-data-[orientation=vertical]/timeline:-left-8">
            <Avatar class="size-8">
              <AvatarImage :src="activity.avatar" :alt="activity.user" />
              <AvatarFallback class="text-[10px]">{{ initials(activity.user) }}</AvatarFallback>
            </Avatar>
          </TimelineIndicator>
        </TimelineHeader>
        <TimelineContent>
          <p class="text-sm">
            <span class="font-medium">{{ activity.user }}</span> <span class="text-muted-foreground">{{ activity.action }}</span> <span class="font-medium">{{ activity.target }}</span>
          </p>
          <TimelineDate class="mt-0.5 mb-0">{{ activity.date }}</TimelineDate>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  </div>
</template>