Very WIP

dev/FileBrowser.tsx

@@ -0,0 +1,77 @@
+import "./FileBrowser.css";
+import { type Component, createSignal, Index, Show } from "solid-js";
+import { FileIcon, FolderIcon, FolderOpenIcon } from "#/dev/icons/index.ts";
+
+export type BrowserFolder = Map<string, string | BrowserFolder>;
+
+export type FileHandler = (path: string) => void;
+
+function isFolder(entry: string | BrowserFolder): entry is BrowserFolder {
+	return typeof (entry as BrowserFolder).size === "number";
+}
+
+export const FileBrowser: Component<{
+	root: BrowserFolder;
+	handler: FileHandler;
+}> = ({ root, handler }) => {
+	const FileEntry: Component<{
+		name: string;
+		path: string;
+	}> = ({ name, path }) => {
+		return (
+			<div class="file-label" onClick={[handler, path]}>
+				<FileIcon />
+				<span>{name}</span>
+			</div>
+		);
+	};
+
+	const FolderEntry: Component<{
+		folder: BrowserFolder;
+		name: string;
+		open: boolean;
+	}> = ({ folder, name, open }) => {
+		const [isOpen, setIsOpen] = createSignal(open);
+
+		return (
+			<>
+				<div class="file-label" onClick={() => setIsOpen(!isOpen())}>
+					{isOpen() ? <FolderOpenIcon /> : <FolderIcon />}
+					<span>{name}</span>
+				</div>
+
+				<Show when={isOpen()}>
+					<FileList folder={folder} />
+				</Show>
+			</>
+		);
+	};
+
+	const FileList: Component<{ folder: BrowserFolder }> = ({ folder }) => {
+		return (
+			<ul class="file-list">
+				<Index each={[...folder.entries()]}>
+					{(item, index) => {
+						const [name, entry] = item();
+
+						return (
+							<li class="file-item">
+								{isFolder(entry) ? (
+									<FolderEntry folder={entry} name={name} open={index < 1} />
+								) : (
+									<FileEntry name={name} path={entry} />
+								)}
+							</li>
+						);
+					}}
+				</Index>
+			</ul>
+		);
+	};
+
+	return (
+		<div class="file-browser">
+			<FileList folder={root} />
+		</div>
+	);
+};