Project save interface with status and action buttons

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "layers"/"lock") — см. docs/PORTING.md §5.
  Плавающий слой (`DropdownMenuContent`) не раскрывается в кейсе.
-->
<script setup lang="ts">
import { ref } from "vue"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Field } from "@/components/ui/field"
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "@/components/ui/input-group"

const visibility = ref("Personal")
</script>

<template>
  <Field class="max-w-3xl">
    <InputGroup class="bg-background h-auto items-start p-3 pl-4">
      <InputGroupAddon class="border-border bg-muted mt-1.5 inline-flex size-8 items-center justify-center rounded-md border p-0">
        <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-layers text-muted-foreground size-4"
        >
          <path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" />
          <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" />
          <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />
        </svg>
      </InputGroupAddon>

      <div class="flex flex-1 flex-col pt-2.5 pl-1">
        <InputGroupInput
          placeholder="Enter project name..."
          class="h-10 border-none text-base shadow-none focus-visible:ring-0"
        />
        <InputGroupTextarea
          placeholder="Description as multiple lines of text are supported..."
          class="text-muted-foreground min-h-16 border-none text-sm shadow-none focus-visible:ring-0"
        />
      </div>

      <InputGroupAddon align="inline-end" class="gap-2 border-none">
        <InputGroupText class="text-muted-foreground text-sm whitespace-nowrap">Save to</InputGroupText>
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <InputGroupButton variant="outline" size="sm" class="h-8 gap-2 font-normal">
              <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-lock size-3.5"
              >
                <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
              </svg>
              {{ visibility }}
            </InputGroupButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem @click="visibility = 'Personal'">Personal</DropdownMenuItem>
            <DropdownMenuItem @click="visibility = 'Team'">Team</DropdownMenuItem>
            <DropdownMenuItem @click="visibility = 'Public'">Public</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

        <div class="bg-border mx-1 h-4 w-px self-center" />

        <InputGroupButton variant="secondary" size="sm">Cancel</InputGroupButton>
        <InputGroupButton variant="default" size="sm">Save</InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  </Field>
</template>