Make the fileBrowser reactive

dev/FileBrowser.tsx

@@ -1,5 +1,11 @@
 import "./FileBrowser.css";
-import { type Component, createSignal, Index, Show } from "solid-js";
+import {
+	type Accessor,
+	type Component,
+	createSignal,
+	For,
+	Show,
+} from "solid-js";
 import { FileIcon, FolderIcon, FolderOpenIcon } from "#/dev/icons/index.ts";
 
 export type BrowserFolder = Map<string, string | BrowserFolder>;
@@ -11,15 +17,15 @@ function isFolder(entry: string | BrowserFolder): entry is BrowserFolder {
 }
 
 export const FileBrowser: Component<{
-	root: BrowserFolder;
+	root: Accessor<BrowserFolder>;
 	handler: FileHandler;
-}> = ({ root, handler }) => {
+}> = (props) => {
 	const FileEntry: Component<{
 		name: string;
 		path: string;
 	}> = ({ name, path }) => {
 		return (
-			<div class="file-label" onClick={[handler, path]}>
+			<div class="file-label" onClick={[props.handler, path]}>
 				<FileIcon />
 				<span>{name}</span>
 			</div>
@@ -47,31 +53,31 @@ export const FileBrowser: Component<{
 		);
 	};
 
-	const FileList: Component<{ folder: BrowserFolder }> = ({ folder }) => {
+	const FileList: Component<{ folder: BrowserFolder }> = (props) => {
 		return (
 			<ul class="file-list">
-				<Index each={[...folder.entries()]}>
+				<For each={[...props.folder.entries()]}>
 					{(item, index) => {
-						const [name, entry] = item();
+						const [name, entry] = item;
 
 						return (
 							<li class="file-item">
 								{isFolder(entry) ? (
-									<FolderEntry folder={entry} name={name} open={index < 1} />
+									<FolderEntry folder={entry} name={name} open={index() < 1} />
 								) : (
 									<FileEntry name={name} path={entry} />
 								)}
 							</li>
 						);
 					}}
-				</Index>
+				</For>
 			</ul>
 		);
 	};
 
 	return (
 		<div class="file-browser">
-			<FileList folder={root} />
+			<FileList folder={props.root()} />
 		</div>
 	);
 };

dev/main.tsx

@@ -36,8 +36,7 @@ function mapSceneEntities(sceneData: SceneData): BrowserFolder {
 	return new Map([["entities", entites]]);
 }
 
-const scenes = await fetchBrowserData("scenes");
-const entites = mapSceneEntities(currentScene.data);
+const scenesRaw = await fetchBrowserData("scenes");
 
 let activeEntity = null;
 function setActiveEntity(entity: string): void {
@@ -47,10 +46,6 @@ function setActiveEntity(entity: string): void {
 	console.log(activeEntity);
 }
 
-function setCurrentScene(name: string): void {
-	loadScene(name);
-}
-
 function adjustGameContainer(gameContainer: HTMLElement, width: number): void {
 	gameContainer.style = `position: relative; top: 0; left: ${width}px; width: ${document.body.offsetWidth - width}px;`;
 }
@@ -78,6 +73,17 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 
 	adjustGameContainer(gameContainer, width());
 
+	const [entities, setEntities] = createSignal(
+		mapSceneEntities(currentScene.data),
+	);
+
+	const [scenes] = createSignal(scenesRaw);
+
+	const setCurrentScene = async (name: string) => {
+		await loadScene(name);
+		setEntities(mapSceneEntities(currentScene.data));
+	};
+
 	onMount(() => {
 		self.addEventListener("resize", () => {
 			adjustGameContainer(gameContainer, width());
@@ -131,7 +137,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 				</div>
 
 				<FileBrowser root={scenes} handler={setCurrentScene} />
-				<FileBrowser root={entites} handler={setActiveEntity} />
+				<FileBrowser root={entities} handler={setActiveEntity} />
 			</div>
 			<div class="tool-bar-resize" onMouseDown={startResizing}></div>
 		</div>