User search command with avatars

<!--
  Порт c-command-6 ("Command with user search", CommandDialog) —
  .agent-tmp/reui-upstream/registry-reui/bases/radix/components/command/c-command-6.tsx

  Диалог закрыт (см. c-command-2.vue) — начальное состояние апстрима.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"

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

const users = [
  { name: "Alex Johnson", email: "alex@example.com", avatar: PIXEL, role: "Admin" },
  { name: "Sarah Chen", email: "sarah@example.com", avatar: PIXEL, role: "Editor" },
  { name: "David Kim", email: "david@example.com", avatar: PIXEL, role: "Viewer" },
  { name: "Emma Wilson", email: "emma@example.com", avatar: PIXEL, role: "Admin" },
  { name: "Michael Rodriguez", email: "michael@example.com", avatar: PIXEL, role: "Editor" },
]

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

function roleVariant(role: string) {
  return role === "Admin" ? "primary-light" : role === "Editor" ? "info-light" : "success-light"
}
</script>

<template>
  <Button variant="outline">Search Users</Button>
  <CommandDialog>
    <Command class="**:data-[selected=true]:bg-muted **:data-selected:bg-transparent">
      <CommandInput placeholder="Search by name or email..." />
      <CommandList>
        <CommandEmpty>No users found.</CommandEmpty>
        <CommandGroup heading="Team Members">
          <CommandItem v-for="user in users" :key="user.email" :value="user.email" class="gap-2 py-2">
            <Avatar class="size-6 shrink-0">
              <AvatarImage :src="user.avatar" :alt="user.name" />
              <AvatarFallback class="text-xs">{{ initials(user.name) }}</AvatarFallback>
            </Avatar>
            <div class="flex flex-1 flex-col">
              <span class="text-sm font-medium">{{ user.name }}</span>
              <span class="text-muted-foreground text-xs">{{ user.email }}</span>
            </div>
            <div class="ml-auto" data-slot="command-shortcut">
              <Badge :variant="roleVariant(user.role)" size="sm">{{ user.role }}</Badge>
            </div>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </CommandDialog>
</template>