Improve file browser thing

tools/FileBrowser.tsx

@@ -2,20 +2,24 @@ import "./FileBrowser.css";
 import { type Component, createSignal, Index, Show } from "solid-js";
 import { FileIcon, FolderIcon, FolderOpenIcon } from "./icons/index.ts";
 
-export type BrowserFile = { path: string };
+export type BrowserFolder = Map<string, string | BrowserFolder>;
 
-export type BrowserFolder = Map<string, BrowserFile | BrowserFolder>;
+export type FileHandler = (path: string) => void;
 
-function isFolder(entry: BrowserFile | BrowserFolder): entry is BrowserFolder {
+function isFolder(entry: string | BrowserFolder): entry is BrowserFolder {
 	return typeof (entry as BrowserFolder).size === "number";
 }
 
-const FileEntry: Component<{ name: string; file: BrowserFile }> = ({
+export const FileBrowser: Component<{
-	name,
+	root: BrowserFolder;
-	file,
+	handler: FileHandler;
-}) => {
+}> = ({ root, handler }) => {
+	const FileEntry: Component<{
+		name: string;
+		path: string;
+	}> = ({ name, path }) => {
 		return (
-		<div class="file-label" onClick={[console.log, file]}>
+			<div class="file-label" onClick={[handler, path]}>
 				<FileIcon />
 				<span>{name}</span>
 			</div>
@@ -25,9 +29,9 @@ const FileEntry: Component<{ name: string; file: BrowserFile }> = ({
 	const FolderEntry: Component<{
 		folder: BrowserFolder;
 		name: string;
-	index: number;
+		open: boolean;
-}> = ({ folder, name, index }) => {
+	}> = ({ folder, name, open }) => {
-	const [isOpen, setIsOpen] = createSignal(index < 1);
+		const [isOpen, setIsOpen] = createSignal(open);
 
 		return (
 			<>
@@ -53,13 +57,9 @@ const FileList: Component<{ folder: BrowserFolder }> = ({ folder }) => {
 						return (
 							<li class="file-item">
 								{isFolder(entry) ? (
-								<FolderEntry
+									<FolderEntry folder={entry} name={name} open={index < 1} />
-									folder={entry as BrowserFolder}
-									name={name}
-									index={index}
-								/>
 								) : (
-								<FileEntry name={name} file={entry as BrowserFile} />
+									<FileEntry name={name} path={entry} />
 								)}
 							</li>
 						);
@@ -69,7 +69,6 @@ const FileList: Component<{ folder: BrowserFolder }> = ({ folder }) => {
 		);
 	};
 
-export const FileBrowser: Component<{ root: BrowserFolder }> = ({ root }) => {
 	return (
 		<div class="file-browser">
 			<FileList folder={root} />

tools/main.tsx

@@ -5,11 +5,7 @@ import { currentScene } from "#/engine/Scene.ts";
 import { setScale, viewport } from "#/engine/Viewport.ts";
 import { InputField } from "#/tools/controls/InputField.tsx";
 import { RangeSlider } from "#/tools/controls/RangeSlider.tsx";
-import {
+import { type BrowserFolder, FileBrowser } from "./FileBrowser.tsx";
-	type BrowserFile,
-	type BrowserFolder,
-	FileBrowser,
-} from "./FileBrowser.tsx";
 import {
 	ArrowAutofitHeightIcon,
 	ArrowAutofitWidthIcon,
@@ -17,36 +13,30 @@ import {
 	ZoomScanIcon,
 } from "./icons/index.ts";
 
-const root = new Map<string, BrowserFile | BrowserFolder>([
+const root = new Map<string, string | BrowserFolder>([
 	[
-		"foo",
+		"Brrr",
-		{
+		new Map<string, string | BrowserFolder>([
-			path: "/foo.file",
+			[
-		},
+				"folder",
+				new Map<string, string | BrowserFolder>([
+					["fuzz", "/fuzz.file"],
+					["buzz", "/buzz.file"],
+				]),
 			],
-	[
+			["dnd:", "/dnd.file"],
-		"bar",
+			["bla", "/bla.file"],
-		{
+		]),
-			path: "/bar.file",
-		},
 	],
 	[
 		"folder",
-		new Map([
+		new Map<string, string | BrowserFolder>([
-			[
+			["fuzz", "/fuzz.file"],
-				"fuzz",
+			["buzz", "/buzz.file"],
-				{
-					path: "/fuzz.file",
-				},
-			],
-			[
-				"buzz",
-				{
-					path: "/buzz.file",
-				},
-			],
 		]),
 	],
+	["foo", "/foo.file"],
+	["bar", "/bar.file"],
 ]);
 
 function adjustGameContainer(gameContainer: HTMLElement, width: number): void {
@@ -128,7 +118,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 					></InputField>
 				</div>
 
-				<FileBrowser root={root} />
+				<FileBrowser root={root} handler={console.log} />
 			</div>
 			<div class="tool-bar-resize" onMouseDown={startResizing}></div>
 		</div>