Context menu

// Built on Radix (npm i @radix-ui/react-context-menu): opens at the pointer on
// right-click or long-press, with arrow keys, submenus and Escape handled.
import * as CM from "@radix-ui/react-context-menu";
import { ChevronRight, FileText, Folder, Link, Pencil, Share2, Trash2 } from "lucide-react";
import { cn } from "@/lib/utils";

const item =
  "flex h-8 cursor-pointer select-none items-center gap-2.5 rounded px-2 text-[13.5px] text-fg outline-none data-[highlighted]:bg-surface-2 data-[state=open]:bg-surface-2 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-fg-muted";
const panel = "w-[220px] rounded-lg border border-border bg-bg p-1 text-fg shadow-lg";
const kbd = "ml-auto rounded-sm border border-b-2 border-border-strong bg-surface px-1.5 font-mono text-[11px] text-fg-muted";

export function FileRow({ name, folders, children }: { name: string; folders: string[]; children: React.ReactNode }) {
  return (
    <CM.Root>
      <CM.Trigger asChild>{children}</CM.Trigger>
      <CM.Portal>
        <CM.Content className={panel} aria-label={name}>
          <CM.Item className={item}><FileText aria-hidden />Open</CM.Item>
          <CM.Item className={item}><Pencil aria-hidden />Rename<kbd className={kbd}>F2</kbd></CM.Item>
          <CM.Sub>
            <CM.SubTrigger className={item}>
              <Folder aria-hidden />Move to<ChevronRight className="ml-auto !size-3.5 !text-fg-subtle" aria-hidden />
            </CM.SubTrigger>
            <CM.Portal>
              <CM.SubContent className={panel} sideOffset={4}>
                {folders.map((f) => <CM.Item key={f} className={item}><Folder aria-hidden />{f}</CM.Item>)}
              </CM.SubContent>
            </CM.Portal>
          </CM.Sub>
          <CM.Item className={item}><Share2 aria-hidden />Share…</CM.Item>
          <CM.Separator className="-mx-1 my-1 h-px bg-border" />
          <CM.Item className={item}><Link aria-hidden />Copy link<kbd className={kbd}>⌘L</kbd></CM.Item>
          <CM.Separator className="-mx-1 my-1 h-px bg-border" />
          <CM.Item className={cn(item, "text-danger data-[highlighted]:bg-danger-soft [&>svg]:text-danger")}>
            <Trash2 aria-hidden />Delete
          </CM.Item>
        </CM.Content>
      </CM.Portal>
    </CM.Root>
  );
}