File Actions

1"use client";
2 
3import type { UseFilesResult } from "files-sdk/react";
4import {
5  CopyIcon,
6  DownloadIcon,
7  Loader2Icon,
8  MoreHorizontalIcon,
9  PencilIcon,
10  Trash2Icon,
11} from "lucide-react";
12import type { ReactNode } from "react";
13import { useCallback, useState } from "react";
14 
15import { Button, buttonVariants } from "@/components/ui/button";
16import {
17  Dialog,
18  DialogContent,
19  DialogDescription,
20  DialogFooter,
21  DialogHeader,
22  DialogTitle,
23} from "@/components/ui/dialog";
24import {
25  DropdownMenu,
26  DropdownMenuContent,
27  DropdownMenuItem,
28  DropdownMenuSeparator,
29  DropdownMenuTrigger,
30} from "@/components/ui/dropdown-menu";
31import { Input } from "@/components/ui/input";
32import { cn } from "@/lib/utils";
33 
34export interface FileActionsProps {
35  /** A `useFiles()` instance — every action runs through it. */
36  files: UseFilesResult;
37  /** The key the actions operate on. */
38  fileKey: string;
39  /** Called after a successful copy/rename/move/delete so the parent can refresh. */
40  onChanged?: () => void;
41  /** Custom trigger content, rendered inside the trigger button. Defaults to a styled `⋯` icon. */
42  children?: ReactNode;
43  className?: string;
44}
45 
46type Action = "copy" | "rename" | "move" | "delete";
47 
48const TITLES: Record<Action, string> = {
49  copy: "Copy to",
50  delete: "Delete file",
51  move: "Move to",
52  rename: "Rename file",
53};
54 
55const parentOf = (key: string): string => {
56  const slash = key.lastIndexOf("/");
57  return slash === -1 ? "" : key.slice(0, slash + 1);
58};
59 
60/**
61 * A `⋯` actions menu for a single key — download, copy, rename, move and delete,
62 * all routed through the `useFiles()` instance you pass in. Copy/rename/move open
63 * a small prompt for the destination; delete confirms first.
64 */
65export const FileActions = ({
66  files,
67  fileKey,
68  onChanged,
69  children,
70  className,
71}: FileActionsProps) => {
72  const [action, setAction] = useState<Action | null>(null);
73  const [dest, setDest] = useState("");
74  const [busy, setBusy] = useState(false);
75 
76  const open = useCallback(
77    (next: Action) => {
78      const parent = parentOf(fileKey);
79      // Rename edits just the basename; copy/move edit the whole key.
80      setDest(next === "rename" ? fileKey.slice(parent.length) : fileKey);
81      setAction(next);
82    },
83    [fileKey]
84  );
85 
86  const download = useCallback(async () => {
87    const file = await files.download(fileKey);
88    const blob = await file.blob();
89    const url = URL.createObjectURL(blob);
90// … truncated