homeio

1"use client";
2
3import type { FileEntry } from "@/modules/files/components/file-manager-presenters";
4import { FILES_MENU_SHELL } from "@/modules/files/components/file-manager-surface";
5import { cn } from "@/lib/utils";
6import {
7  ArrowUp,
8  ClipboardPaste,
9  Copy,
10  Download,
11  FileArchive,
12  FileText,
13  FolderOpen,
14  Info,
15  Link2,
16  Scissors,
17  Star,
18  Trash2,
19  Users,
20} from "@/components/icons/platform-icons";
21import type { ReactNode } from "react";
22
23export function FileManagerContextMenu({
24  contextShareActive,
25  entry,
26  isTrashView,
27  onClose,
28  onCopy,
29  onCopyPath,
30  onCut,
31  onDeletePermanently,
32  onDownload,
33  onGetInfo,
34  onMoveToTrash,
35  onOpen,
36  onPaste,
37  onRename,
38  onRestore,
39  onToggleShare,
40  onToggleStar,
41  onUnzip,
42  pasteDisabled,
43  x,
44  y,
45}: {
46  contextShareActive: boolean;
47  entry: FileEntry;
48  isTrashView: boolean;
49  pasteDisabled: boolean;
50  x: number;
51  y: number;
52  onClose: () => void;
53  onCopy: () => void;
54  onCopyPath: () => void;
55  onCut: () => void;
56  onDeletePermanently: () => void;
57  onDownload: () => void;
58  onGetInfo: () => void;
59  onMoveToTrash: () => void;
60  onOpen: () => void;
61  onPaste: () => void;
62  onRename: () => void;
63  onRestore: () => void;
64  onToggleShare: () => void;
65  onToggleStar: () => void;
66  onUnzip: () => void;
67}) {
68  return (
69    <div
70      className={cn("absolute z-[200] min-w-44 py-1.5", FILES_MENU_SHELL)}
71      style={{ left: x, top: y }}
72      onClick={(e) => e.stopPropagation()}
73    >
74      <MenuItem icon={<FolderOpen className="size-3.5" />} label="Open" onClick={() => { onOpen(); onClose(); }} />
75      <MenuItem icon={<Info className="size-3.5" />} label="Get Info" onClick={() => { onGetInfo(); onClose(); }} />
76      <MenuItem icon={<Link2 className="size-3.5" />} label="Copy Path" onClick={() => { onCopyPath(); onClose(); }} />
77      {!isTrashView && (
78        <MenuItem icon={<FileText className="size-3.5" />} label="Rename" onClick={() => { onRename(); onClose(); }} />
79      )}
80
81      <Divider />
82
83      <MenuItem icon={<Copy className="size-3.5" />} label="Copy" onClick={() => { onCopy(); onClose(); }} />
84      <MenuItem icon={<Scissors className="size-3.5" />} label="Cut" onClick={() => { onCut(); onClose(); }} />
85      <MenuItem icon={<ClipboardPaste className="size-3.5" />} label="Paste" disabled={pasteDisabled} onClick={() => { onPaste(); onClose(); }} />
86
87      <Divider />
88
89      <MenuItem icon={<Star className="size-3.5 text-amber-400" />} label="Toggle Star" onClick={() => { onToggleStar(); onClose(); }} />
90      <MenuItem
91        icon={<Download className="size-3.5" />}
92        label={entry.type === "folder" ? "Download as Zip" : "Download"}
93        onClick={() => { onDownload(); onClose(); }}
94      />
95      {entry.type === "file" && entry.ext === "zip" && !isTrashView && (
96        <MenuItem
97          icon={<FileArchive className="size-3.5" />}
98          label="Unzip Here"
99          onClick={() => { onUnzip(); onClose(); }}
100        />
101      )}
102
103      {entry.type === "folder" && !isTrashView && (
104        <>
105          <MenuItem
106            icon={<Users className="size-3.5 text-sky-400" />}
107            label={contextShareActive ? "Unshare Folder" : "Share Folder"}
108            onClick={() => { onToggleShare(); onClose(); }}
109          />
110          <Divider />
111        </>
112      )}
113
114      {isTrashView ? (
115        <>
116          <MenuItem icon={<ArrowUp className="size-3.5" />} label="Restore" onClick={() => { onRestore(); onClose(); }} />
117          <MenuItem icon={<Trash2 className="size-3.5 text-status-red" />} label="Delete Permanently" danger onClick={() => { onDeletePermanently(); onClose(); }} />
118        </>
119      ) : (
120        <MenuItem icon={<Trash2 className="size-3.5 text-status-red" />} label="Move to Trash" danger onClick={() => { onMoveToTrash(); onClose(); }} />
121      )}
122    </div>
123  );
124}
125
126export function FileManagerBackgroundContextMenu({
127  pasteDisabled,
128  x,
129  y,
130  onClose,
131  onNewFolder,
132  onNewFile,
133  onPaste,
134}: {
135  pasteDisabled: boolean;
136  x: number;
137  y: number;
138  onClose: () => void;
139  onNewFolder: () => void;
140  onNewFile: () => void;
141  onPaste: () => void;
142}) {
143  return (
144    <div
145      className={cn("absolute z-[200] min-w-44 py-1.5", FILES_MENU_SHELL)}
146      style={{ left: x, top: y }}
147      onClick={(e) => e.stopPropagation()}
148    >
149      <MenuItem icon={<ClipboardPaste className="size-3.5" />} label="Paste" disabled={pasteDisabled} onClick={() => { onPaste(); onClose(); }} />
150      <Divider />
151      <MenuItem icon={<FolderOpen className="size-3.5" />} label="New Folder" onClick={() => { onNewFolder(); onClose(); }} />
152      <MenuItem icon={<FileText className="size-3.5" />} label="New File" onClick={() => { onNewFile(); onClose(); }} />
153    </div>
154  );
155}
156
157function Divider() {
158  return <div className="mx-2 my-1 h-px bg-glass-border/60" />;
159}
160
161function MenuItem({
162  danger,
163  disabled,
164  icon,
165  label,
166  onClick,
167}: {
168  danger?: boolean;
169  disabled?: boolean;
170  icon: ReactNode;
171  label: string;
172  onClick: () => void;
173}) {
174  return (
175    <button
176      onClick={onClick}
177      disabled={disabled}
178      className={cn(
179        "flex w-full items-center gap-2.5 px-3 py-1.5 text-xs transition-colors",
180        disabled
181          ? "cursor-not-allowed text-muted-foreground/40"
182          : danger
183            ? "cursor-pointer text-status-red hover:bg-status-red/10"
184            : "cursor-pointer text-foreground hover:bg-background/50",
185      )}
186    >
187      {icon}
188      {label}
189    </button>
190  );
191}
192