makearmy/makearmy-app
1
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

completely refactored utilities for direct rendering, killed iframes

Browse source
This commit is contained in:
makearmy 2025-10-12 22:24:23 -04:00
parent 12dd2c6c06
commit f08a7456ee
37 changed files with 1824 additions and 1350 deletions
Download patch file Download diff file Expand all files Collapse all files

112
components/utilities/files/FilesTable.tsx Normal file
View file

@ -0,0 +1,112 @@
// components/utilities/files/FilesTable.tsx
"use client";
import { useMemo } from "react";
import { ArrowDownAZ, ArrowUpAZ, Download, Folder, FileText } from "lucide-react";
import { FsEntry, SortKey, SortDir, nicelyFormatBytes } from "./api";
export default function FilesTable({
entries,
sortKey,
sortDir,
onSort,
onOpen,
onDownload,
}: {
entries: FsEntry[];
sortKey: SortKey;
sortDir: SortDir;
onSort: (k: SortKey) => void;
onOpen: (entry: FsEntry) => void;
onDownload: (entry: FsEntry) => void;
}) {
const sorted = useMemo(() => {
const arr = [...entries];
const dir = sortDir === "asc" ? 1 : -1;
arr.sort((a, b) => {
// folders first
if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
switch (sortKey) {
case "name": return a.name.localeCompare(b.name) * dir;
case "size": return ((a.size ?? -1) - (b.size ?? -1)) * dir;
case "modified": return (new Date(a.modified || 0).getTime() - new Date(b.modified || 0).getTime()) * dir;
case "type": {
const ax = ext(a.name), bx = ext(b.name);
return ax.localeCompare(bx) * dir;
}
}
});
return arr;
}, [entries, sortKey, sortDir]);
function ext(name: string) {
const m = /\.([^.]+)$/.exec(name || "");
return m ? m[1].toLowerCase() : "";
}
function SortBtn({ k, label }: { k: SortKey; label: string }) {
const active = sortKey === k;
return (
<button className="inline-flex items-center gap-1 text-left" onClick={() => onSort(k)}>
{label}
{active ? (
sortDir === "asc" ? <ArrowUpAZ className="w-3.5 h-3.5 opacity-60" /> : <ArrowDownAZ className="w-3.5 h-3.5 opacity-60" />
) : null}
</button>
);
}
return (
<div className="overflow-auto rounded-md border">
<table className="w-full text-sm">
<thead className="text-left text-zinc-400 bg-muted/40">
<tr>
<th className="px-3 py-2 w-[40%]"><SortBtn k="name" label="Name" /></th>
<th className="px-3 py-2 w-[15%]"><SortBtn k="type" label="Type" /></th>
<th className="px-3 py-2 w-[15%]"><SortBtn k="size" label="Size" /></th>
<th className="px-3 py-2 w-[30%]"><SortBtn k="modified" label="Modified" /></th>
<th className="px-3 py-2 text-right">Actions</th>
</tr>
</thead>
<tbody>
{sorted.map((e) => (
<tr key={e.path} className="border-t hover:bg-muted/30">
<td
className="px-3 py-2 cursor-pointer"
onDoubleClick={() => onOpen(e)}
title="Double-click to open"
>
<span className="inline-flex items-center gap-2">
{e.isDir ? <Folder className="w-4 h-4 opacity-70" /> : <FileText className="w-4 h-4 opacity-70" />}
<span className="truncate">{e.name}</span>
</span>
</td>
<td className="px-3 py-2">{e.isDir ? "Folder" : (e.mime || ext(e.name).toUpperCase() || "File")}</td>
<td className="px-3 py-2">{e.isDir ? "—" : nicelyFormatBytes(e.size)}</td>
<td className="px-3 py-2">{e.modified ? new Date(e.modified).toLocaleString() : "—"}</td>
<td className="px-3 py-2">
{!e.isDir && (
<div className="flex justify-end">
<button
className="rounded-md border px-2 py-1 text-xs hover:bg-muted inline-flex items-center gap-1"
onClick={() => onDownload(e)}
>
<Download className="w-3.5 h-3.5" />
Download
</button>
</div>
)}
</td>
</tr>
))}
{sorted.length === 0 && (
<tr>
<td className="px-3 py-6 text-sm text-zinc-500" colSpan={5}>Empty folder.</td>
</tr>
)}
</tbody>
</table>
</div>
);
}