Select with colored status dots

<script setup lang="ts">
import { ref } from "vue"
import { cn } from "@/lib/utils"
import { Field } from "@/components/ui/field"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

const statuses = [
  { value: "ready", label: "Ready", color: "bg-emerald-400" },
  { value: "error", label: "Error", color: "bg-red-500" },
  { value: "building", label: "Building", color: "bg-amber-500" },
  { value: "queued", label: "Queued", color: "bg-blue-500" },
  { value: "initializing", label: "Initializing", color: "bg-primary" },
  { value: "canceled", label: "Canceled", color: "bg-fuchsia-500" },
]

const selected = ref(statuses[0]!.value)

function findStatus(value: unknown) {
  return statuses.find((status) => status.value === value)
}
</script>

<template>
  <Field class="max-w-xs">
    <Select :model-value="selected" @update:model-value="(val: unknown) => (selected = val as string)">
      <SelectTrigger class="w-full justify-between">
        <!--
          reka-ui's SelectValue отдаёт только textContent выбранного
          SelectItem, тогда как Radix's Select.Value заново монтирует
          children целиком (см. комментарий в c-select-6.vue).
        -->
        <SelectValue placeholder="Select status">
          <template #default="{ modelValue }">
            <div v-if="findStatus(modelValue)" class="flex items-center gap-2">
              <div :class="cn('size-2 rounded-full', findStatus(modelValue)!.color)" />
              <span>{{ findStatus(modelValue)!.label }}</span>
            </div>
          </template>
        </SelectValue>
      </SelectTrigger>
      <SelectContent position="popper" class="min-w-48">
        <SelectGroup>
          <SelectItem v-for="status in statuses" :key="status.value" :value="status.value">
            <div class="flex items-center gap-2">
              <div :class="cn('size-2 rounded-full', status.color)" />
              <span>{{ status.label }}</span>
            </div>
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </Field>
</template>