homeio

1"use client";
2
3import { getFileIcon, type FileEntry } from "@/modules/files/components/file-manager-presenters";
4import {
5  FILES_MENU_SHELL,
6  FILES_PANEL_INSET,
7} from "@/modules/files/components/file-manager-surface";
8import { cn } from "@/lib/utils";
9import { formatBytesCompact } from "@/lib/client/format";
10import type { FileInfoResponse } from "@/lib/shared/contracts/files";
11import { File, FileArchive, Folder, Trash2, Upload, X } from "@/components/icons/platform-icons";
12
13const cancelBtn = "rounded-lg px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-background/50 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50";
14const inputField = "mt-1 h-8 w-full rounded-lg border border-glass-border bg-background/55 px-2 text-xs text-foreground placeholder:text-muted-foreground/60 outline-none focus:border-primary/40 focus:bg-background/70";
15const overlay = "absolute inset-0 z-[205] flex items-center justify-center bg-background/35 px-4 backdrop-blur-[1px]";
16
17export function CreateEntryDialog({
18  dialog,
19  isCreatePending,
20  onClose,
21  onDialogChange,
22  onSubmit,
23}: {
24  dialog: { kind: "file" | "folder"; name: string; error: string | null };
25  isCreatePending: boolean;
26  onClose: () => void;
27  onDialogChange: (value: string) => void;
28  onSubmit: () => void;
29}) {
30  return (
31    <div className={overlay} onClick={onClose}>
32      <div
33        className={cn("w-full max-w-xs p-3", FILES_MENU_SHELL)}
34        role="dialog"
35        aria-modal="true"
36        aria-label={dialog.kind === "folder" ? "Create new folder" : "Create new file"}
37        onClick={(e) => e.stopPropagation()}
38      >
39        <div className="mb-2 flex items-center gap-2 text-sm font-medium text-foreground">
40          {dialog.kind === "folder" ? (
41            <Folder className="size-4 text-sky-400" />
42          ) : (
43            <File className="size-4 text-emerald-400" />
44          )}
45          <span>{dialog.kind === "folder" ? "Create New Folder" : "Create New File"}</span>
46        </div>
47
48        <label className="mb-2 block text-xs text-muted-foreground">
49          {dialog.kind === "folder" ? "Folder name" : "File name"}
50          <input
51            autoFocus
52            type="text"
53            value={dialog.name}
54            onChange={(e) => onDialogChange(e.target.value)}
55            onKeyDown={(e) => {
56              if (e.key === "Enter") { e.preventDefault(); onSubmit(); }
57              else if (e.key === "Escape") { e.preventDefault(); onClose(); }
58            }}
59            className={inputField}
60            placeholder={dialog.kind === "folder" ? "my-folder" : "notes.txt"}
61          />
62        </label>
63
64        {dialog.error && <div className="mb-2 text-xs text-status-red">{dialog.error}</div>}
65
66        <div className="flex justify-end gap-2">
67          <button onClick={onClose} disabled={isCreatePending} className={cancelBtn}>
68            Cancel
69          </button>
70          <button
71            onClick={onSubmit}
72            disabled={dialog.name.trim().length === 0 || Boolean(dialog.error) || isCreatePending}
73            className="rounded-lg bg-primary/15 px-2.5 py-1 text-xs font-medium text-primary transition-colors hover:bg-primary/20 disabled:cursor-not-allowed disabled:opacity-50"
74          >
75            Create
76          </button>
77        </div>
78      </div>
79    </div>
80  );
81}
82
83export function RenameEntryDialog({
84  dialog,
85  isRenamePending,
86  onClose,
87  onDialogChange,
88  onSubmit,
89}: {
90  dialog: { entry: FileEntry; name: string; error: string | null };
91  isRenamePending: boolean;
92  onClose: () => void;
93  onDialogChange: (value: string) => void;
94  onSubmit: () => void;
95}) {
96  return (
97    <div className={overlay} onClick={onClose}>
98      <div
99        className={cn("w-full max-w-xs p-3", FILES_MENU_SHELL)}
100        role="dialog"
101        aria-modal="true"
102        aria-label="Rename item"
103        onClick={(e) => e.stopPropagation()}
104      >
105        <div className="mb-2 flex items-center gap-2 text-sm font-medium text-foreground">
106          {dialog.entry.type === "folder" ? (
107            <Folder className="size-4 text-sky-400" />
108          ) : (
109            <File className="size-4 text-emerald-400" />
110          )}
111          <span>Rename</span>
112        </div>
113
114        <label className="mb-2 block text-xs text-muted-foreground">
115          New name
116          <input
117            autoFocus
118            type="text"
119            value={dialog.name}
120            onChange={(e) => onDialogChange(e.target.value)}
121            onKeyDown={(e) => {
122              if (e.key === "Enter") { e.preventDefault(); onSubmit(); }
123              else if (e.key === "Escape") { e.preventDefault(); onClose(); }
124            }}
125            className={inputField}
126            placeholder={dialog.entry.name}
127          />
128        </label>
129
130        {dialog.error && <div className="mb-2 text-xs text-status-red">{dialog.error}</div>}
131
132        <div className="flex justify-end gap-2">
133          <button onClick={onClose} disabled={isRenamePending} className={cancelBtn}>
134            Cancel
135          </button>
136          <button
137            onClick={onSubmit}
138            disabled={
139              dialog.name.trim().length === 0 ||
140              dialog.name.trim() === dialog.entry.name ||
141              Boolean(dialog.error) ||
142              isRenamePending
143            }
144            className="rounded-lg bg-primary/15 px-2.5 py-1 text-xs font-medium text-primary transition-colors hover:bg-primary/20 disabled:cursor-not-allowed disabled:opacity-50"
145          >
146            {isRenamePending ? "Renaming…" : "Rename"}
147          </button>
148        </div>
149      </div>
150    </div>
151  );
152}
153
154export function EmptyTrashConfirmDialog({
155  itemCount,
156  onCancel,
157  onConfirm,
158}: {
159  itemCount: number;
160  onCancel: () => void;
161  onConfirm: () => void;
162}) {
163  return (
164    <div className={overlay} onClick={onCancel}>
165      <div
166        className={cn("w-full max-w-xs p-4", FILES_MENU_SHELL)}
167        role="dialog"
168        aria-modal="true"
169        aria-label="Empty Trash"
170        onClick={(e) => e.stopPropagation()}
171      >
172        <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-foreground">
173          <Trash2 className="size-4 shrink-0 text-status-red" />
174          <span>Empty Trash</span>
175        </div>
176        <p className="mb-4 text-xs leading-relaxed text-muted-foreground">
177          Permanently delete{" "}
178          <span className="font-semibold text-foreground">
179            {itemCount} item{itemCount !== 1 ? "s" : ""}
180          </span>{" "}
181          from Trash? This cannot be undone.
182        </p>
183        <div className="flex justify-end gap-2">
184          <button onClick={onCancel} className={cancelBtn}>
185            Cancel
186          </button>
187          <button
188            onClick={onConfirm}
189            className="rounded-lg bg-status-red/15 px-2.5 py-1 text-xs font-medium text-status-red transition-colors hover:bg-status-red/20"
190          >
191            Empty Trash
192          </button>
193        </div>
194      </div>
195    </div>
196  );
197}
198
199function getUploadPercent(progress: { loaded: number; total: number } | null) {
200  if (!progress || progress.total <= 0) return 0;
201  return Math.min(100, Math.max(0, Math.round((progress.loaded / progress.total) * 100)));
202}
203
204export function UploadProgressDialog({
205  operation = "upload",
206  progress,
207  onCancel,
208}: {
209  operation?: "upload" | "unzip";
210  progress: { loaded: number; total: number } | null;
211  onCancel?: () => void;
212}) {
213  const isUpload = operation === "upload";
214  const progressPercent = getUploadPercent(progress);
215  const progressText = progress
216    ? `${formatBytesCompact(progress.loaded)} of ${formatBytesCompact(progress.total)}`
217    : isUpload
218      ? "Preparing upload"
219      : "Extracting archive";
220  const title = isUpload ? "Uploading files" : "Unzipping file";
221  const status = isUpload ? "Uploading" : "Unzipping";
222  const progressLabel = isUpload ? "Upload progress" : "Unzip progress";
223
224  return (
225    <div className={overlay}>
226      <div
227        className={cn("w-full max-w-sm overflow-hidden p-0", FILES_MENU_SHELL)}
228        role="dialog"
229        aria-modal="true"
230        aria-label={progressLabel}
231      >
232        <div className="flex h-11 shrink-0 select-none items-center border-b border-glass-border/50 bg-popover/70 backdrop-blur-2xl">
233          <div className="flex items-center gap-1.5 px-4">
234            {onCancel ? (
235              <button
236                onClick={onCancel}
237                aria-label={`Cancel ${operation}`}
238                title={`Cancel ${operation}`}
239                className="group flex size-3 cursor-pointer items-center justify-center rounded-full bg-[#ff5f57] ring-1 ring-inset ring-black/10"
240              >
241                <X className="size-[7px] text-[#6a0002] opacity-0 transition-opacity group-hover:opacity-100" />
242              </button>
243            ) : (
244              <span className="size-3 rounded-full bg-white/10" />
245            )}
246            <span className="size-3 rounded-full bg-white/10" />
247            <span className="size-3 rounded-full bg-white/10" />
248          </div>
249          <div className="flex flex-1 items-center justify-center gap-1.5">
250            {isUpload ? (
251              <Upload className="size-3.5 text-primary/70" />
252            ) : (
253              <FileArchive className="size-3.5 text-primary/70" />
254            )}
255            <span className="text-xs font-medium text-foreground/80">{title}</span>
256          </div>
257          <div className="w-[76px]" />
258        </div>
259
260        <div className="p-4">
261          <div className="mb-3 text-xs tabular-nums text-muted-foreground">{progressText}</div>
262          <div
263            className="overflow-hidden rounded-full bg-white/10"
264            role="progressbar"
265            aria-label={progressLabel}
266            aria-valuemin={0}
267            aria-valuemax={100}
268            aria-valuenow={progress ? progressPercent : undefined}
269          >
270            <div
271              className={cn(
272                "h-2 rounded-full bg-primary transition-all duration-150",
273                !progress && !isUpload && "w-1/2 animate-pulse",
274              )}
275              style={progress || isUpload ? { width: `${progressPercent}%` } : undefined}
276            />
277          </div>
278          <div className="mt-2 flex items-center justify-between text-xs text-muted-foreground">
279            <span>{status}</span>
280            <span className="tabular-nums">{progress ? `${progressPercent}%` : isUpload ? "0%" : "Working"}</span>
281          </div>
282          {onCancel ? (
283            <div className="mt-4 flex justify-end">
284              <button onClick={onCancel} className={cancelBtn}>
285                Cancel {operation}
286              </button>
287            </div>
288          ) : null}
289        </div>
290      </div>
291    </div>
292  );
293}
294
295export function FileInfoDialogOverlay({
296  fileInfo,
297  onClose,
298}: {
299  fileInfo: FileInfoResponse;
300  onClose: () => void;
301}) {
302  const rows = [
303    {
304      label: "Type",
305      value:
306        fileInfo.type === "folder"
307          ? "Folder"
308          : fileInfo.ext
309            ? `${fileInfo.ext.toUpperCase()} file`
310            : "File",
311    },
312    { label: "Size", value: fileInfo.type === "folder" ? "—" : formatBytesCompact(fileInfo.sizeBytes) },
313    {
314      label: "Modified",
315      value: new Date(fileInfo.modifiedAt).toLocaleString("en-US", {
316        month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit",
317      }),
318    },
319    {
320      label: "Created",
321      value: new Date(fileInfo.createdAt).toLocaleString("en-US", {
322        month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit",
323      }),
324    },
325    { label: "Path", value: fileInfo.path },
326    { label: "Permissions", value: fileInfo.permissions },
327    { label: "Starred", value: fileInfo.starred ? "Yes" : "No" },
328  ];
329
330  return (
331    <div className={overlay} onClick={onClose}>
332      <div
333        className={cn("w-full max-w-sm p-4", FILES_MENU_SHELL)}
334        role="dialog"
335        aria-modal="true"
336        aria-label="File info"
337        onClick={(e) => e.stopPropagation()}
338      >
339        <div className="mb-3 flex items-center justify-between">
340          <div className="flex items-center gap-2">
341            {getFileIcon({ ...fileInfo, modified: "", modifiedAt: "", mtimeMs: 0 } as FileEntry)}
342            <span className="max-w-56 truncate text-sm font-semibold text-foreground">
343              {fileInfo.name}
344            </span>
345          </div>
346          <button
347            onClick={onClose}
348            className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-background/50 hover:text-foreground"
349          >
350            <X className="size-3.5" />
351          </button>
352        </div>
353
354        <div className="space-y-1.5 text-xs">
355          {rows.map(({ label, value }) => (
356            <div key={label} className={cn("flex items-start gap-2 px-2.5 py-1.5", FILES_PANEL_INSET)}>
357              <span className="w-24 shrink-0 text-muted-foreground/70">{label}</span>
358              <span className="break-all font-mono text-foreground">{value}</span>
359            </div>
360          ))}
361        </div>
362
363        <div className="mt-3 flex justify-end">
364          <button onClick={onClose} className={cancelBtn}>
365            Close
366          </button>
367        </div>
368      </div>
369    </div>
370  );
371}
372
373export function PasteConflictDialog({
374  conflictName,
375  onReplace,
376  onKeepBoth,
377  onSkip,
378  onSkipAll,
379}: {
380  conflictName: string;
381  onReplace: () => void;
382  onKeepBoth: () => void;
383  onSkip: () => void;
384  onSkipAll: () => void;
385}) {
386  return (
387    <div className="absolute inset-0 z-[205] flex items-center justify-center bg-background/35 px-4 backdrop-blur-[1px]">
388      <div
389        className={cn("w-full max-w-sm p-4", FILES_MENU_SHELL)}
390        role="dialog"
391        aria-modal="true"
392        aria-label="File conflict"
393      >
394        <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-foreground">
395          <File className="size-4 shrink-0 text-status-amber" />
396          <span>Item Already Exists</span>
397        </div>
398        <p className="mb-4 text-xs leading-relaxed text-muted-foreground">
399          <span className="font-semibold text-foreground">{conflictName}</span> already exists in the destination. What would you like to do?
400        </p>
401        <div className="flex flex-col gap-2">
402          <button
403            onClick={onReplace}
404            className="rounded-lg bg-status-red/15 px-3 py-2 text-left text-xs font-medium text-status-red transition-colors hover:bg-status-red/20"
405          >
406            Replace — overwrite the existing item
407          </button>
408          <button
409            onClick={onKeepBoth}
410            className="rounded-lg bg-primary/15 px-3 py-2 text-left text-xs font-medium text-primary transition-colors hover:bg-primary/20"
411          >
412            Keep Both — rename the new item
413          </button>
414          <div className="flex gap-2">
415            <button onClick={onSkip} className={cn("flex-1", cancelBtn)}>Skip</button>
416            <button onClick={onSkipAll} className={cn("flex-1", cancelBtn)}>Skip All</button>
417          </div>
418        </div>
419      </div>
420    </div>
421  );
422}
423