Feature roadmap kanban with progress

<!--
  IconPlaceholder (иконка "arrow-up" у счётчика голосов) заменена
  инлайновым `<svg>` (lucide-react v0.545.0). Доска в покое с фиксированным
  порядком карточек.
-->
<script setup lang="ts">
import { ref } from "vue"
import { Badge } from "@/components/reui/badge"
import { Frame, FrameHeader, FramePanel, FrameTitle } from "@/components/reui/frame"
import { Kanban, KanbanBoard, KanbanColumn, KanbanColumnContent, KanbanItem, KanbanItemHandle, KanbanOverlay } from "@/components/reui/kanban"
import { Progress } from "@/components/ui/progress"
import { cn } from "@/lib/utils"

interface Feature {
  id: string
  title: string
  description: string
  progress: number
  votes: number
}

const columnMeta: Record<string, { title: string; color: string }> = {
  planned: { title: "Planned", color: "bg-blue-500" },
  building: { title: "Building", color: "bg-yellow-500" },
  testing: { title: "Testing", color: "bg-purple-500" },
  shipped: { title: "Shipped", color: "bg-green-500" },
}

const columns = ref<Record<string, Feature[]>>({
  planned: [
    { id: "f1", title: "AI-powered search", description: "Natural language search across all content", progress: 0, votes: 142 },
    { id: "f2", title: "Custom webhooks", description: "User-configurable webhook endpoints", progress: 0, votes: 98 },
  ],
  building: [
    { id: "f3", title: "Real-time collaboration", description: "Multi-user editing with presence indicators", progress: 65, votes: 234 },
    { id: "f4", title: "API v2 migration", description: "RESTful API with OpenAPI 3.0 spec", progress: 40, votes: 176 },
  ],
  shipped: [
    { id: "f6", title: "Dark mode", description: "System-aware theme with manual override", progress: 100, votes: 456 },
    { id: "f7", title: "Export to CSV", description: "Bulk data export with custom fields", progress: 100, votes: 189 },
  ],
})
</script>

<template>
  <div>
    <Kanban v-model:value="columns" :get-item-value="(item: Feature) => item.id">
      <KanbanBoard class="grid grid-cols-3">
        <KanbanColumn v-for="(features, colId) in columns" :key="colId" :value="colId">
          <Frame spacing="sm" class="h-full">
            <FrameHeader class="flex flex-row items-center gap-2">
              <div :class="cn('size-2 rounded-full', columnMeta[colId]!.color)" />
              <FrameTitle class="capitalize">{{ columnMeta[colId]!.title }}</FrameTitle>
              <Badge variant="outline" size="sm" class="ml-auto">{{ features.length }}</Badge>
            </FrameHeader>
            <KanbanColumnContent :value="colId" class="flex flex-col gap-2 p-0.5">
              <KanbanItem v-for="feature in features" :key="feature.id" :value="feature.id">
                <KanbanItemHandle>
                  <Frame variant="ghost" spacing="sm" class="p-0">
                    <FramePanel class="p-3">
                      <div class="flex flex-col gap-2.5">
                        <span class="text-sm font-medium">{{ feature.title }}</span>
                        <p class="text-muted-foreground line-clamp-2 text-xs">{{ feature.description }}</p>
                        <Progress :model-value="feature.progress" class="h-1.5" />
                        <div class="flex items-center justify-between">
                          <span class="text-muted-foreground text-[10px] tabular-nums">{{ `${feature.progress}% complete` }}</span>
                          <div class="flex items-center gap-1">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width="24"
                              height="24"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              stroke-width="2"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              aria-hidden="true"
                              class="text-muted-foreground size-3"
                            ><path d="m5 12 7-7 7 7" /><path d="M12 19V5" /></svg>
                            <span class="text-muted-foreground text-xs tabular-nums">{{ feature.votes }}</span>
                          </div>
                        </div>
                      </div>
                    </FramePanel>
                  </Frame>
                </KanbanItemHandle>
              </KanbanItem>
            </KanbanColumnContent>
          </Frame>
        </KanbanColumn>
      </KanbanBoard>
      <KanbanOverlay class="bg-muted/10 rounded-md border-2 border-dashed" />
    </Kanban>
  </div>
</template>