Import source: src/components/features/file-manager
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,411 @@
|
||||
"use client";
|
||||
|
||||
import { DndContext } from "@dnd-kit/core";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import type { CSSProperties, PointerEvent as ReactPointerEvent } from "react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Archive,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
CheckSquare,
|
||||
Copy,
|
||||
Download,
|
||||
Edit3,
|
||||
Eye,
|
||||
File,
|
||||
FilePlus2,
|
||||
Folder,
|
||||
FolderPlus,
|
||||
Grid2X2,
|
||||
Home,
|
||||
Info,
|
||||
List,
|
||||
MoreVertical,
|
||||
RefreshCw,
|
||||
RotateCcw,
|
||||
Scissors,
|
||||
Search,
|
||||
Settings,
|
||||
ShieldCheck,
|
||||
Trash2,
|
||||
Upload,
|
||||
} from "lucide-react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { FileEntry } from "@/api/contracts/models";
|
||||
import { panelService } from "@/api/services/panel-service";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { CodeEditor } from "@/components/common/code-editor";
|
||||
import { formatBytes } from "@/lib/utils";
|
||||
|
||||
const toolbar: Array<{ label: string; icon: LucideIcon; primary?: boolean }> = [
|
||||
{ label: "File", icon: FilePlus2 },
|
||||
{ label: "Folder", icon: FolderPlus },
|
||||
{ label: "Copy", icon: Copy },
|
||||
{ label: "Move", icon: Scissors },
|
||||
{ label: "Upload", icon: Upload, primary: true },
|
||||
{ label: "Download", icon: Download },
|
||||
{ label: "Delete", icon: Trash2 },
|
||||
{ label: "Restore", icon: RotateCcw },
|
||||
{ label: "Rename", icon: Edit3 },
|
||||
{ label: "Edit", icon: Edit3 },
|
||||
{ label: "HTML Editor", icon: File },
|
||||
{ label: "Permissions", icon: ShieldCheck },
|
||||
{ label: "Extract", icon: Archive },
|
||||
{ label: "Compress", icon: Archive },
|
||||
];
|
||||
|
||||
const directories = [
|
||||
"/home/coaxys",
|
||||
"public_html",
|
||||
"assets",
|
||||
"cgi-bin",
|
||||
"logs",
|
||||
"mail",
|
||||
"ssl",
|
||||
"tmp",
|
||||
"backups",
|
||||
".ssh",
|
||||
".trash",
|
||||
];
|
||||
|
||||
export function FileManager() {
|
||||
const [treeWidth, setTreeWidth] = useState(276);
|
||||
const [detailsWidth, setDetailsWidth] = useState(330);
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["files"],
|
||||
queryFn: () => panelService.files.list(),
|
||||
});
|
||||
const files = data?.data ?? [];
|
||||
|
||||
function startTreeResize(event: ReactPointerEvent<HTMLDivElement>) {
|
||||
const startX = event.clientX;
|
||||
const startWidth = treeWidth;
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
|
||||
function onMove(moveEvent: globalThis.PointerEvent) {
|
||||
setTreeWidth(Math.min(460, Math.max(220, startWidth + moveEvent.clientX - startX)));
|
||||
}
|
||||
|
||||
function onUp() {
|
||||
window.removeEventListener("pointermove", onMove);
|
||||
window.removeEventListener("pointerup", onUp);
|
||||
}
|
||||
|
||||
window.addEventListener("pointermove", onMove);
|
||||
window.addEventListener("pointerup", onUp);
|
||||
}
|
||||
|
||||
function startDetailsResize(event: ReactPointerEvent<HTMLDivElement>) {
|
||||
const startX = event.clientX;
|
||||
const startWidth = detailsWidth;
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
|
||||
function onMove(moveEvent: globalThis.PointerEvent) {
|
||||
setDetailsWidth(Math.min(520, Math.max(270, startWidth - (moveEvent.clientX - startX))));
|
||||
}
|
||||
|
||||
function onUp() {
|
||||
window.removeEventListener("pointermove", onMove);
|
||||
window.removeEventListener("pointerup", onUp);
|
||||
}
|
||||
|
||||
window.addEventListener("pointermove", onMove);
|
||||
window.addEventListener("pointerup", onUp);
|
||||
}
|
||||
|
||||
return (
|
||||
<DndContext>
|
||||
<div className="glass-panel overflow-hidden rounded-lg">
|
||||
<div className="flex items-center justify-between gap-3 border-b border-border/60 bg-gradient-to-r from-primary to-primary/75 px-3 py-2 text-primary-foreground">
|
||||
<div className="flex items-center gap-2 text-sm font-semibold">
|
||||
<Folder className="h-4 w-4" />
|
||||
File Manager
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className="hidden font-mono opacity-90 sm:inline">
|
||||
/home/coaxys/public_html
|
||||
</span>
|
||||
<Button variant="secondary" size="sm" className="h-7 rounded-md px-2 text-xs">
|
||||
Settings
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-b border-border/60 bg-muted/40 px-2 py-2">
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{toolbar.map(({ label, icon: Icon, primary }) => (
|
||||
<Button
|
||||
key={label}
|
||||
variant={primary ? "default" : "outline"}
|
||||
size="sm"
|
||||
className="h-8 rounded-md px-2 text-xs"
|
||||
>
|
||||
<Icon className="h-3.5 w-3.5" />
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="grid min-h-[660px] lg:grid-cols-[var(--file-tree-width)_8px_minmax(0,1fr)]"
|
||||
style={{ "--file-tree-width": `${treeWidth}px` } as CSSProperties}
|
||||
>
|
||||
<aside className="hidden border-r border-border/60 bg-muted/30 lg:block">
|
||||
<div className="flex items-center gap-1 border-b border-border/60 p-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-7 w-7 rounded-md"
|
||||
aria-label="Home"
|
||||
>
|
||||
<Home className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-7 w-7 rounded-md"
|
||||
aria-label="Refresh"
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<div className="relative flex-1">
|
||||
<Search className="pointer-events-none absolute left-2 top-1.5 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<input
|
||||
className="h-7 w-full rounded-md border bg-card pl-7 pr-2 text-xs outline-none focus:ring-2 focus:ring-ring"
|
||||
placeholder="Search tree"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[604px] overflow-auto p-2 text-xs">
|
||||
{directories.map((directory, index) => (
|
||||
<button
|
||||
key={directory}
|
||||
type="button"
|
||||
className="flex w-full items-center gap-1 rounded-md px-2 py-1.5 text-left hover:bg-primary/10"
|
||||
style={{ paddingLeft: `${8 + Math.min(index, 3) * 10}px` }}
|
||||
>
|
||||
<Folder className="h-4 w-4 text-amber-500" />
|
||||
<span className="truncate">{directory}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div
|
||||
className="hidden cursor-col-resize bg-border/40 transition hover:bg-primary/35 lg:block"
|
||||
onPointerDown={startTreeResize}
|
||||
role="separator"
|
||||
aria-orientation="vertical"
|
||||
aria-label="Resize directory tree pane"
|
||||
title="Drag to resize"
|
||||
/>
|
||||
|
||||
<main className="min-w-0">
|
||||
<div className="flex flex-col gap-2 border-b p-2 xl:flex-row xl:items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-md"
|
||||
aria-label="Back"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-md"
|
||||
aria-label="Forward"
|
||||
>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="h-8 rounded-md text-xs">
|
||||
Up One Level
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||
<span className="text-xs font-semibold text-muted-foreground">Path</span>
|
||||
<input
|
||||
className="h-8 min-w-0 flex-1 rounded-md border bg-card px-2 text-xs outline-none focus:ring-2 focus:ring-ring"
|
||||
defaultValue="/home/coaxys/public_html"
|
||||
/>
|
||||
<Button size="sm" className="h-8 rounded-md text-xs">
|
||||
Go
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-md"
|
||||
aria-label="List view"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-md"
|
||||
aria-label="Grid view"
|
||||
>
|
||||
<Grid2X2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid border-b border-border/60 bg-muted/30 px-2 py-2 text-xs md:grid-cols-[1fr_240px]">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<label className="flex items-center gap-1">
|
||||
<input type="checkbox" />
|
||||
Show Hidden Files
|
||||
</label>
|
||||
<label className="flex items-center gap-1">
|
||||
<input type="checkbox" />
|
||||
Preserve permissions
|
||||
</label>
|
||||
<span className="text-muted-foreground">Selected: 0 files</span>
|
||||
</div>
|
||||
<div className="relative mt-2 md:mt-0">
|
||||
<Search className="pointer-events-none absolute left-2 top-2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<input
|
||||
className="h-8 w-full rounded-md border bg-card pl-7 pr-2 text-xs outline-none focus:ring-2 focus:ring-ring"
|
||||
placeholder="Search files"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? <div className="skeleton h-[360px]" /> : <FileTable files={files} />}
|
||||
|
||||
<div
|
||||
className="grid gap-0 border-t bg-background p-3 xl:grid-cols-[minmax(0,1fr)_8px_var(--file-details-width)]"
|
||||
style={{ "--file-details-width": `${detailsWidth}px` } as CSSProperties}
|
||||
>
|
||||
<CodeEditor
|
||||
title="Source preview"
|
||||
language="php"
|
||||
value={
|
||||
"<?php\n// CoaxysPanel Monaco preview\nreturn ['status' => 'mock-only'];\n"
|
||||
}
|
||||
/>
|
||||
<div
|
||||
className="hidden cursor-col-resize rounded-full bg-border/40 transition hover:bg-primary/35 xl:block"
|
||||
onPointerDown={startDetailsResize}
|
||||
role="separator"
|
||||
aria-orientation="vertical"
|
||||
aria-label="Resize file details pane"
|
||||
title="Drag to resize"
|
||||
/>
|
||||
<Card className="rounded-lg">
|
||||
<CardContent className="space-y-3 p-3 text-xs">
|
||||
<div className="flex items-center gap-2 text-sm font-semibold">
|
||||
<Info className="h-4 w-4 text-primary" />
|
||||
File details
|
||||
</div>
|
||||
{[
|
||||
["Name", "Home page script"],
|
||||
["Type", "PHP source"],
|
||||
["Permissions", "0644"],
|
||||
["Owner", "coaxys"],
|
||||
["Checksum", "sha256: 2b4f...91ce"],
|
||||
["Storage", "37 GB of 100 GB used"],
|
||||
].map(([label, value]) => (
|
||||
<div key={label} className="grid grid-cols-[92px_1fr] gap-2">
|
||||
<span className="font-semibold text-muted-foreground">{label}</span>
|
||||
<span className="truncate">{value}</span>
|
||||
</div>
|
||||
))}
|
||||
<Button variant="outline" size="sm" className="h-8 w-full rounded-md text-xs">
|
||||
<Settings className="h-3.5 w-3.5" />
|
||||
Permissions Editor
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</DndContext>
|
||||
);
|
||||
}
|
||||
|
||||
function FileTable({ files }: { files: FileEntry[] }) {
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[860px] border-collapse text-xs">
|
||||
<thead className="bg-muted/50">
|
||||
<tr>
|
||||
<th className="w-8 border-b border-border/60 px-2 py-2 text-left">
|
||||
<CheckSquare className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
</th>
|
||||
{["Name", "Size", "Last Modified", "Type", "Permissions", "Owner", "Actions"].map(
|
||||
(head) => (
|
||||
<th
|
||||
key={head}
|
||||
className="whitespace-nowrap border-b border-border/60 px-2 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
|
||||
>
|
||||
{head}
|
||||
</th>
|
||||
),
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{files.map((file) => {
|
||||
const Icon = file.type === "directory" ? Folder : File;
|
||||
return (
|
||||
<tr key={file.id} className="hover:bg-primary/5">
|
||||
<td className="border-b px-2 py-2">
|
||||
<input type="checkbox" aria-label={`Select ${file.name}`} />
|
||||
</td>
|
||||
<td className="border-b px-2 py-2">
|
||||
<div className="flex items-center gap-2 font-medium">
|
||||
<Icon
|
||||
className={
|
||||
file.type === "directory"
|
||||
? "h-4 w-4 text-amber-500"
|
||||
: "h-4 w-4 text-primary"
|
||||
}
|
||||
/>
|
||||
{file.name}
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-b px-2 py-2">
|
||||
{file.type === "directory" ? "--" : formatBytes(file.size)}
|
||||
</td>
|
||||
<td className="border-b px-2 py-2">
|
||||
{new Date(file.modifiedAt).toLocaleString()}
|
||||
</td>
|
||||
<td className="border-b px-2 py-2">{file.mime}</td>
|
||||
<td className="border-b px-2 py-2 font-mono">{file.permissions}</td>
|
||||
<td className="border-b px-2 py-2">{file.owner}</td>
|
||||
<td className="border-b px-2 py-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 rounded-md"
|
||||
aria-label={`Preview ${file.name}`}
|
||||
>
|
||||
<Eye className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 rounded-md"
|
||||
aria-label={`More actions ${file.name}`}
|
||||
>
|
||||
<MoreVertical className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user