Nested collapsible list with actions

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "chevron-right"/"plus"/"lock"/"ellipsis", он же
  "more-horizontal") — см. docs/PORTING.md §5. Содержимое `DropdownMenuContent`
  не смонтировано в закрытом состоянии (меню нигде не раскрывается), поэтому
  его внутренние иконки ("check"/"copy"/"trash") не требуют адаптации —
  `DropdownMenu` импортирован из `@revueui/ui` как есть.
-->
<script setup lang="ts">
import { Frame, FrameHeader, FramePanel, FrameTitle } from "@/components/reui/frame"
import { Button } from "@/components/ui/button"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

const keys = [
  { id: "1", name: "Production", key: "AUDO230454*242SDIFPPL" },
  { id: "2", name: "Development", key: "DUILO30454*242SDIFUIP" },
  { id: "3", name: "Staging", key: "IPPODAS230454*242SDI" },
]
</script>

<template>
  <div class="h-54 w-full max-w-xs">
    <Frame stacked dense spacing="sm">
      <Collapsible default-open>
        <CollapsibleTrigger class="flex w-full">
          <FrameHeader class="flex grow flex-row items-center justify-between gap-1.5 py-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-4 transition-transform in-data-[state=open]:rotate-90"
            >
              <path d="m9 18 6-6-6-6" />
            </svg>
            <FrameTitle class="text-sm font-medium">API Keys</FrameTitle>
            <Button variant="ghost" size="icon-sm" class="hover:border-border ml-auto">
              <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"
              >
                <path d="M5 12h14" />
                <path d="M12 5v14" />
              </svg>
            </Button>
          </FrameHeader>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <FramePanel>
            <div class="flex flex-col gap-2.5">
              <div v-for="item in keys" :key="item.id" class="flex items-center justify-between gap-3.5">
                <div class="flex items-center gap-3">
                  <div class="flex items-center gap-1.5">
                    <div class="bg-muted border-border/60 flex size-5.5 shrink-0 items-center justify-center rounded-sm border-2">
                      <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="size-3.25 text-emerald-600"
                      >
                        <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
                        <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                      </svg>
                    </div>
                    <div class="w-10 truncate text-xs">{{ item.name }}</div>
                  </div>
                  <div class="bg-muted w-40 truncate rounded-md px-2 py-1 text-xs">{{ item.key }}</div>
                </div>
                <div class="flex shrink-0 items-center">
                  <DropdownMenu>
                    <DropdownMenuTrigger as-child>
                      <Button variant="ghost" size="icon-xs">
                        <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"
                        >
                          <circle cx="12" cy="12" r="1" />
                          <circle cx="19" cy="12" r="1" />
                          <circle cx="5" cy="12" r="1" />
                        </svg>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="start" class="min-w-32">
                      <DropdownMenuItem>
                        <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"
                        >
                          <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
                          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
                        </svg>
                        <span>Copy key</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem variant="destructive">
                        <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"
                        >
                          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
                          <path d="M3 6h18" />
                          <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                        </svg>
                        <span>Delete</span>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </div>
            </div>
          </FramePanel>
        </CollapsibleContent>
      </Collapsible>
    </Frame>
  </div>
</template>