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

file browser small UI improvements

Browse source
This commit is contained in:
makearmy 2025-10-15 21:35:31 -04:00
parent 448bb8e034
commit 2dfeb4e2bb
1 changed files with 14 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

35
components/utilities/files/FileBrowserPanel.tsx
View file

@ -11,18 +11,17 @@ type FileItem = {
};
type ListResponse =
| { path: string; items: FileItem[] } // current API shape
| { path: string; entries: FileItem[] } // legacy fallback
| { path: string; items: FileItem[] }
| { path: string; entries: FileItem[] }
| { items?: FileItem[]; entries?: FileItem[]; path?: string };
const BASE =
(process.env.NEXT_PUBLIC_FILE_API_BASE_URL || "").replace(/\/$/, "") || ""; // same-origin fallback
(process.env.NEXT_PUBLIC_FILE_API_BASE_URL || "").replace(/\/$/, "") || "";
function joinPath(a: string, b: string) {
if (!a || a === "/") return b.startsWith("/") ? b : `/${b}`;
return `${a.replace(/\/$/, "")}/${b.replace(/^\//, "")}`;
}
function parentPath(path: string) {
if (!path || path === "/") return "/";
const parts = path.replace(/\/+$/, "").split("/");
@ -30,7 +29,6 @@ function parentPath(path: string) {
const p = parts.join("/");
return p === "" ? "/" : p;
}
function formatSize(bytes?: number) {
if (bytes == null) return "—";
const units = ["B", "KB", "MB", "GB", "TB"];
@ -54,12 +52,10 @@ export default function FileBrowserPanel() {
const p = encodeURIComponent(path || "/");
return `${BASE}/api/files/list?path=${p}`;
}, [path]);
const urlDownload = useCallback((p: string) => {
const qp = encodeURIComponent(p || "/");
return `${BASE}/api/files/download?path=${qp}`;
}, []);
const urlRaw = useCallback((p: string) => {
const qp = encodeURIComponent(p || "/");
return `${BASE}/api/files/raw?path=${qp}`;
@ -72,7 +68,7 @@ export default function FileBrowserPanel() {
try {
const res = await fetch(urlList, {
method: "GET",
credentials: "include", // ensure cookies flow past middleware
credentials: "include",
headers: { Accept: "application/json" },
cache: "no-store",
});
@ -83,7 +79,6 @@ export default function FileBrowserPanel() {
const json: ListResponse = await res.json();
const arr = (json as any).items || (json as any).entries || [];
if (!Array.isArray(arr)) throw new Error("Malformed list response");
// Sort: dirs first, then files, alpha
arr.sort((a: FileItem, b: FileItem) => {
if (a.type !== b.type) return a.type === "dir" ? -1 : 1;
return a.name.localeCompare(b.name);
@ -105,17 +100,13 @@ export default function FileBrowserPanel() {
if (it.type === "dir") {
setPath((p) => joinPath(p, it.name));
} else {
// try to preview; if the file is not previewable, user can still download
setPreviewHref(urlRaw(joinPath(path, it.name)));
}
};
const onUp = () => setPath((p) => parentPath(p));
const onHome = () => setPath("/");
const onDownload = (it: FileItem) => {
const href = urlDownload(joinPath(path, it.name));
// create an anchor to download
const a = document.createElement("a");
a.href = href;
a.download = it.name;
@ -126,7 +117,6 @@ export default function FileBrowserPanel() {
return (
<div className="space-y-3">
{/* toolbar */}
<div className="flex items-center gap-2">
<button
onClick={onHome}
@ -153,13 +143,15 @@ export default function FileBrowserPanel() {
</div>
</div>
{/* path crumb */}
<div className="text-xs text-muted-foreground select-all">{path}</div>
{/* grid: table + preview */}
<div className="grid grid-cols-1 lg:grid-cols-[1fr,420px] gap-4">
{/* Wider table, same preview: left has min 760px; table can scroll horizontally if cramped */}
<div className="grid grid-cols-1 lg:grid-cols-[minmax(760px,1fr),420px] gap-4">
{/* TABLE */}
<div className="rounded-md border overflow-hidden">
<div className="grid grid-cols-[minmax(220px,1fr),90px,100px,130px,90px] items-center bg-muted px-3 py-2 text-sm font-medium">
<div className="overflow-x-auto">
<div className="min-w-[740px]">
<div className="grid grid-cols-[minmax(340px,1fr),110px,120px,170px,120px] items-center bg-muted px-3 py-2 text-sm font-medium whitespace-nowrap">
<div>Name</div>
<div>Type</div>
<div>Size</div>
@ -180,7 +172,7 @@ export default function FileBrowserPanel() {
items.map((it) => (
<div
key={it.name + it.type}
className="grid grid-cols-[minmax(220px,1fr),90px,100px,130px,90px] items-center px-3 py-2 text-sm hover:bg-muted/50"
className="grid grid-cols-[minmax(340px,1fr),110px,120px,170px,120px] items-center px-3 py-2 text-sm hover:bg-muted/50"
>
<button
className="text-left inline-flex items-center gap-2 hover:underline"
@ -218,13 +210,14 @@ export default function FileBrowserPanel() {
)}
</div>
</div>
</div>
</div>
{/* preview */}
{/* PREVIEW (unchanged size) */}
<div className="rounded-md border p-3">
<div className="mb-2 text-sm font-medium">Preview</div>
{previewHref ? (
<div className="border rounded overflow-hidden">
{/* let the browser try its best; PDFs/images will render inline */}
<iframe
key={previewHref}
src={previewHref}