further clean ups

dev/ItemList.css

@@ -1,12 +1,11 @@
 .item-list {
-	border-radius: var(--sp-1);
-
 	ul {
 		background: var(--c-bg-1);
 		color: var(--c-fg-1);
 		list-style: none;
 		margin: 0;
 		padding: 0;
+		border-radius: 0 0 var(--sp-1) var(--sp-1);
 	}
 
 	li {

dev/fetchBrowserData.ts

@@ -0,0 +1,14 @@
+import type { BrowserFolder } from "#/dev/FileBrowser.tsx";
+
+export async function fetchBrowserData(dir: string): Promise<BrowserFolder> {
+	const indexRef: string[] = await (await fetch(`/api/${dir}`)).json();
+
+	const scenes = indexRef.reduce((root, entry) => {
+		const [name] = entry.substring(1).split("/");
+		root.set(name, { path: name, isActive: false });
+
+		return root;
+	}, new Map() as BrowserFolder);
+
+	return new Map([[dir, scenes]]);
+}

dev/main.tsx

@@ -1,9 +1,8 @@
 import "./main.css";
-import { type Accessor, type Component, createSignal, onMount } from "solid-js";
+import { type Component, createSignal, onMount } from "solid-js";
 import { render } from "solid-js/web";
 import { InputField } from "#/dev/controls/InputField.tsx";
 import { RangeSlider } from "#/dev/controls/RangeSlider.tsx";
-import { type BrowserFolder, FileBrowser } from "#/dev/FileBrowser.tsx";
 import { ItemList, type ListItem } from "#/dev/ItemList.tsx";
 import {
 	ArrowAutofitHeightIcon,
@@ -14,21 +13,16 @@ import {
 import { currentScene, loadScene, type SceneData } from "#/engine/Scene.ts";
 import { setScale, viewport } from "#/engine/Viewport.ts";
 
-async function fetchBrowserData(dir: string): Promise<BrowserFolder> {
+async function fetchScenes(): Promise<Array<ListItem>> {
-	const indexRef: string[] = await (await fetch(`/api/${dir}`)).json();
+	const indexRef: string[] = await (await fetch(`/api/scenes`)).json();
+	const items = indexRef.filter((value) => value.includes("index"));
 
-	const scenes = indexRef.reduce((root, entry) => {
+	return items.map((value) => {
-		const [name] = entry.substring(1).split("/");
+		const [label] = value.substring(1).split("/");
-		root.set(name, { path: name, isActive: false });
+		return { label, isActive: false };
-
+	});
-		return root;
-	}, new Map() as BrowserFolder);
-
-	return new Map([[dir, scenes]]);
 }
 
-const scenesRaw = await fetchBrowserData("scenes");
-
 function mapSceneEntities(sceneData: SceneData): Array<ListItem> {
 	const sets: Record<string, number> = {};
 	return sceneData.entities.map((entity, index) => {
@@ -46,6 +40,8 @@ function adjustGameContainer(gameContainer: HTMLElement, width: number): void {
 	gameContainer.style = `position: relative; top: 0; left: ${width}px; width: ${document.body.offsetWidth - width}px;`;
 }
 
+const scenesRaw = await fetchScenes();
+
 const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 	gameContainer,
 }) => {
@@ -73,34 +69,10 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 		mapSceneEntities(currentScene.data),
 	);
 
-	const mapActive = (
+	const [scenes] = createSignal(scenesRaw);
-		root: string,
-		path: string,
-		accessor: Accessor<BrowserFolder>,
-	): BrowserFolder => {
-		return new Map([
-			[
-				root,
-				(accessor().get(root) as BrowserFolder)
-					.entries()
-					.reduce((acc, [key, value]) => {
-						acc.set(key, {
-							// @ts-ignore: value is BrowserFile
-							path: value.path,
-							isActive: path === key,
-						});
 
-						return acc;
+	const setCurrentScene = async ({ label: name }: ListItem) => {
-					}, new Map() as BrowserFolder),
+		await loadScene(name);
-			],
-		]);
-	};
-
-	const [scenes, setScenes] = createSignal(scenesRaw);
-
-	const setCurrentScene = async (path: string) => {
-		await loadScene(path);
-		setScenes(mapActive("scenes", path, scenes));
 		setEntities(mapSceneEntities(currentScene.data));
 	};
 
@@ -156,9 +128,8 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 					></InputField>
 				</div>
 
-				<FileBrowser root={scenes} handler={setCurrentScene} />
+				<ItemList name="Scenes" handler={setCurrentScene} items={scenes} />
-
+				<ItemList name="Entities" handler={console.log} items={entities} />
-				<ItemList name={"Entities"} handler={console.log} items={entities} />
 			</div>
 			<div class="tool-bar-resize" onMouseDown={startResizing}></div>
 		</div>