Sortable list persisted to a backend

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "grip-vertical") — см. docs/PORTING.md §5.
  Оригинал вызывает `toast.promise(...)` из `sonner` в `onValueCommit` —
  побочный эффект отпускания при перетаскивании (не входит в статичный
  гейт диффа, `sonner` не входит в объявленные зависимости стенда) —
  сама симуляция сохранения на сервер (`persistOrder`) не перенесена.
-->
<script setup lang="ts">
import { ref } from "vue"
import { Badge } from "@/components/reui/badge"
import { Sortable, SortableItem, SortableItemHandle } from "@/components/reui/sortable"

interface Item {
  id: string
  title: string
}

const items = ref<Item[]>([
  { id: "1", title: "Draft the release notes" },
  { id: "2", title: "Review open pull requests" },
  { id: "3", title: "Update the changelog" },
  { id: "4", title: "Cut the release tag" },
  { id: "5", title: "Announce on the blog" },
])

function getItemValue(item: Item) {
  return item.id
}
</script>

<template>
  <div class="mx-auto w-full max-w-xl p-6">
    <Sortable
      v-model:value="items"
      :get-item-value="getItemValue"
      strategy="vertical"
      class="space-y-2"
    >
      <SortableItem v-for="(item, index) in items" :key="item.id" :value="item.id">
        <div class="bg-background border-border flex items-center gap-3 rounded-md border p-3">
          <SortableItemHandle class="text-muted-foreground hover:text-foreground">
            <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" class="lucide lucide-grip-vertical h-4 w-4">
              <circle cx="9" cy="12" r="1" />
              <circle cx="9" cy="5" r="1" />
              <circle cx="9" cy="19" r="1" />
              <circle cx="15" cy="12" r="1" />
              <circle cx="15" cy="5" r="1" />
              <circle cx="15" cy="19" r="1" />
            </svg>
          </SortableItemHandle>
          <Badge variant="outline" class="tabular-nums">{{ index + 1 }}</Badge>
          <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ item.title }}</span>
        </div>
      </SortableItem>
    </Sortable>
  </div>
</template>