Issues table with priority, assignee, and labels

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "arrow-up", "arrow-right", "arrow-down") и
  unsplash-аватары заменены локальным 1x1 data-URI (`PIXEL`) —
  см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardContent } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

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

const issues = [
  { id: "ISS-421", title: "Login page returns 500 on mobile", priority: "Critical", priorityVariant: "destructive" as const, priorityIcon: "arrow-up" as const, label: "Bug", labelVariant: "destructive-light" as const, assignee: "Sarah Chen", assigneeAvatar: PIXEL, status: "Open", statusVariant: "info-light" as const },
  { id: "ISS-420", title: "Add dark mode support", priority: "High", priorityVariant: "warning" as const, priorityIcon: "arrow-up" as const, label: "Feature", labelVariant: "info-light" as const, assignee: "Marcus Johnson", assigneeAvatar: PIXEL, status: "In Progress", statusVariant: "warning-light" as const },
  { id: "ISS-419", title: "Update user onboarding flow", priority: "Medium", priorityVariant: "info" as const, priorityIcon: "arrow-right" as const, label: "Improvement", labelVariant: "success-light" as const, assignee: "Emily Park", assigneeAvatar: PIXEL, status: "In Review", statusVariant: "info-light" as const },
  { id: "ISS-418", title: "Refactor API rate limiter module", priority: "Low", priorityVariant: "secondary" as const, priorityIcon: "arrow-down" as const, label: "Tech Debt", labelVariant: "outline" as const, assignee: "David Kim", assigneeAvatar: PIXEL, status: "Closed", statusVariant: "success-light" as const },
]

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

<template>
  <div class="mx-auto flex w-full max-w-2xl flex-col">
    <Card class="p-0">
      <CardContent class="overflow-x-auto p-0">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead class="w-20">ID</TableHead>
              <TableHead>Issue</TableHead>
              <TableHead>Assignee</TableHead>
              <TableHead>Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow v-for="issue in issues" :key="issue.id">
              <TableCell class="text-muted-foreground font-mono text-xs">{{ issue.id }}</TableCell>
              <TableCell>
                <div class="flex items-center gap-2">
                  <span class="truncate text-sm font-medium">{{ issue.title }}</span>
                  <Badge variant="outline" size="xs">{{ issue.label }}</Badge>
                </div>
              </TableCell>
              <TableCell>
                <div class="flex items-center gap-2">
                  <Avatar size="sm">
                    <AvatarImage :src="issue.assigneeAvatar" :alt="issue.assignee" />
                    <AvatarFallback>{{ initials(issue.assignee) }}</AvatarFallback>
                  </Avatar>
                  <span class="text-sm">{{ issue.assignee }}</span>
                </div>
              </TableCell>
              <TableCell>
                <Badge :variant="issue.statusVariant" size="sm">{{ issue.status }}</Badge>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  </div>
</template>