Loading…
} + {error !== null &&Could not load: {error}
} + {!loading && error === null && entries.length === 0 && ( +This folder is empty.
+ )} + {!loading && error === null && entries.length > 0 && ( +
+
+ );
+}
diff --git a/cloud_gallery/src/components/gallery.test.tsx b/cloud_gallery/src/components/gallery.test.tsx
new file mode 100644
index 00000000..86eb3a86
--- /dev/null
+++ b/cloud_gallery/src/components/gallery.test.tsx
@@ -0,0 +1,159 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Gallery } from "./gallery.tsx";
+import type { DufsClient } from "../api/dufs-client.ts";
+import type { DirEntry } from "../api/types.ts";
+
+function entry(name: string, kind: "dir" | "file"): DirEntry {
+ return { name, path: `/${name}`, kind, size: 10, mtimeMs: 0 };
+}
+
+function makeClient(overrides: Partial {
+ e.stopPropagation();
+ }}
+ >
+
+ {message}
+
+
+
+
+
+
+
+
+
+
+ {loading &&
+
+ {viewerEntry && (
+ {
+ setViewerIndex(null);
+ }}
+ onPrev={() => {
+ step(-1);
+ }}
+ onNext={() => {
+ step(1);
+ }}
+ />
+ )}
+ {editEntry && (
+ {
+ setEditEntry(null);
+ reload();
+ }}
+ />
+ )}
+ {deleteEntry && (
+ {
+ setDeleteEntry(null);
+ }}
+ />
+ )}
+
+ );
+}
diff --git a/cloud_gallery/src/components/grid.tsx b/cloud_gallery/src/components/grid.tsx
new file mode 100644
index 00000000..00bc507f
--- /dev/null
+++ b/cloud_gallery/src/components/grid.tsx
@@ -0,0 +1,105 @@
+import { useState } from "react";
+import type { DufsClient } from "../api/dufs-client.ts";
+import type { DirEntry } from "../api/types.ts";
+import { humanSize, isImage, isText, isVideo } from "../lib/paths.ts";
+
+interface GridProps {
+ readonly client: DufsClient;
+ readonly entries: readonly DirEntry[];
+ readonly onOpenDir: (path: string) => void;
+ readonly onOpenMedia: (index: number) => void;
+ readonly onEditText: (entry: DirEntry) => void;
+ readonly onDelete: (entry: DirEntry) => void;
+}
+
+function Thumb({
+ client,
+ entry,
+}: {
+ readonly client: DufsClient;
+ readonly entry: DirEntry;
+}): React.JSX.Element {
+ const [broken, setBroken] = useState(false);
+ if (broken) {
+ return
+ {busy !== null && {busy}}
+
+ {
+ onUploadPicked(e.target.files);
+ e.target.value = "";
+ }}
+ />
+
+ {isVideo(entry.name) ? "🎞" : "🖼"}
;
+ }
+ return (
+ -
+ {entries.map((entry, index) => {
+ const media = isImage(entry.name) || isVideo(entry.name);
+ const activate = (): void => {
+ if (entry.kind === "dir") onOpenDir(entry.path);
+ else if (media) onOpenMedia(index);
+ else if (isText(entry.name)) onEditText(entry);
+ };
+ return (
+
-
+
+ {entry.kind === "file" && (
+ + + ⭳ + + ++ )} +
+ );
+ })}
+