File search command palette

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

  Диалог закрыт (см. c-command-2.vue) — начальное состояние апстрима. Триггер
  (`Button`) содержит иконку поиска, всегда смонтирована независимо от
  Dialog — `IconPlaceholder` заменена инлайновым `<svg>` "search"/"file".
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Button } from "@/components/ui/button"
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Kbd } from "@/components/ui/kbd"

const files = [
  { name: "page.tsx", path: "src/app/page.tsx", type: "tsx" },
  { name: "layout.tsx", path: "src/app/layout.tsx", type: "tsx" },
  { name: "globals.css", path: "src/styles/globals.css", type: "css" },
  { name: "utils.ts", path: "src/lib/utils.ts", type: "ts" },
  { name: "api.ts", path: "src/lib/api.ts", type: "ts" },
  { name: "button.tsx", path: "src/components/ui/button.tsx", type: "tsx" },
  { name: "package.json", path: "package.json", type: "json" },
  { name: "README.md", path: "README.md", type: "md" },
]
</script>

<template>
  <Button variant="outline" class="w-52">
    <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="size-4">
      <path d="m21 21-4.34-4.34" />
      <circle cx="11" cy="11" r="8" />
    </svg>
    Search files...
    <Kbd class="ml-auto">⌘K</Kbd>
  </Button>
  <CommandDialog>
    <Command class="**:data-[selected=true]:bg-muted **:data-selected:bg-transparent">
      <CommandInput placeholder="Search files by name..." />
      <CommandList>
        <CommandEmpty>No files found.</CommandEmpty>
        <CommandGroup heading="Files">
          <CommandItem v-for="file in files" :key="file.path" :value="file.path" class="gap-2.5">
            <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="size-4 shrink-0">
              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
              <path d="M14 2v4a2 2 0 0 0 2 2h4" />
            </svg>
            <div class="flex flex-1 items-center gap-2">
              <span class="font-medium">{{ file.name }}</span>
              <span class="text-muted-foreground truncate text-xs">{{ file.path }}</span>
            </div>
            <div class="ml-auto" data-slot="command-shortcut">
              <Badge variant="outline" size="sm">{{ file.type }}</Badge>
            </div>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </CommandDialog>
</template>