Well so far and so

dev/ItemList.tsx

@@ -5,75 +5,6 @@ export type ListItem = { label: string; isActive: boolean };
 
 export type ItemHandler = (item: ListItem, index: number) => void;
 
-export type Direction = "default" | "asc" | "desc";
-
-export function useSort(
-	items: Array<ListItem>,
-): [
-	(direction?: Direction) => Array<ListItem>,
-	(newItems: Array<ListItem>) => void,
-] {
-	let itemsRef = items;
-
-	return [
-		(direction = "default") => {
-			if (direction === "default") {
-				return [...itemsRef];
-			}
-			const newItems = [...itemsRef];
-
-			newItems.sort((a, b) => {
-				const labelA = a.label.toLocaleLowerCase();
-				const labelB = b.label.toLocaleLowerCase();
-
-				if (labelA < labelB) {
-					return direction === "asc" ? -1 : 1;
-				}
-
-				if (labelA > labelB) {
-					return direction === "asc" ? 1 : -1;
-				}
-
-				return 0;
-			});
-
-			return newItems;
-		},
-		(newItems) => {
-			itemsRef = newItems;
-		},
-	];
-}
-
-export function useDirection(
-	initialDirection: Direction = "default",
-): (forcedDirection?: Direction) => Direction {
-	let direction: Direction = initialDirection;
-
-	return (forcedDirection) => {
-		if (forcedDirection) {
-			direction = forcedDirection;
-			return direction;
-		}
-
-		switch (direction) {
-			case "asc": {
-				direction = "desc";
-				break;
-			}
-			case "desc": {
-				direction = "default";
-				break;
-			}
-			default: {
-				direction = "asc";
-			}
-		}
-
-		return direction;
-	};
-}
-
 export const ItemList: Component<{
 	items: Accessor<Array<ListItem>>;
 	handler: ItemHandler;

dev/RemoteItemList.css

@@ -24,8 +24,8 @@
 }
 
 .remote-item-list-header {
-	display: grid;
+	display: flex;
-	grid-template-columns: 1fr auto auto;
+	justify-content: space-between;
 	border-bottom: 1px solid var(--c-fg-3);
 }
 

dev/RemoteItemList.tsx

@@ -1,39 +1,95 @@
 import "./RemoteItemList.css";
-import { type Component, createSignal, Match, Show, Switch } from "solid-js";
 import {
-	type Direction,
+	type Accessor,
-	type ItemHandler,
+	type Component,
-	ItemList,
+	createEffect,
-	type ListItem,
+	createSignal,
-	useDirection,
+	Match,
-	useSort,
+	Show,
-} from "#/dev/ItemList.tsx";
+	type Signal,
+	Switch,
+} from "solid-js";
+import { type ItemHandler, ItemList, type ListItem } from "#/dev/ItemList.tsx";
 import {
 	ArrowNarrowDownIcon,
 	ArrowNarrowUpIcon,
 	ArrowsSortIcon,
 	ChevronDownIcon,
-	ReloadIcon,
 } from "#/dev/icons/index.ts";
 
+export type Direction = "default" | "asc" | "desc";
+
+function useDirection(
+	signal: Signal<Direction>,
+): [Accessor<Direction>, (forcedDirection?: Direction) => Direction] {
+	const [direction, setDirection] = signal;
+
+	return [
+		direction,
+		(forcedDirection) => {
+			if (forcedDirection) {
+				setDirection(forcedDirection);
+				return direction();
+			}
+
+			switch (direction()) {
+				case "asc": {
+					setDirection("desc");
+					break;
+				}
+				case "desc": {
+					setDirection("default");
+					break;
+				}
+				default: {
+					setDirection("asc");
+				}
+			}
+
+			return direction();
+		},
+	];
+}
+
 export const RemoteItemList: Component<{
 	name: string;
-	fetch: () => Promise<Array<ListItem>>;
+	items: Accessor<Array<ListItem>>;
 	handler: ItemHandler;
 }> = (props) => {
 	const [showList, setShowList] = createSignal(true);
-	const [items, setItems] = createSignal<Array<ListItem>>([]);
+	const [items, setItems] = createSignal([...props.items()]);
-	const [direction, setDirection] = createSignal<Direction>("default");
+	const [direction, toggleDirection] = useDirection(
-	const [sorted, setSorted] = useSort([]);
+		createSignal<Direction>("default"),
-	const toggleDirection = useDirection();
+	);
 
-	const fetchItems = () => {
+	createEffect(() => {
-		props.fetch().then((items) => {
+		sortItems(props.items(), direction());
-			setSorted(items);
+	});
-			setItems(sorted(direction()));
+
+	const sortItems = (items: Array<ListItem>, direction: Direction) => {
+		if (direction === "default") {
+			setItems([...props.items()]);
+			return;
+		}
+
+		const newItems = [...items];
+		newItems.sort((a, b) => {
+			const labelA = a.label.toLocaleLowerCase();
+			const labelB = b.label.toLocaleLowerCase();
+
+			if (labelA < labelB) {
+				return direction === "asc" ? -1 : 1;
+			}
+
+			if (labelA > labelB) {
+				return direction === "asc" ? 1 : -1;
+			}
+
+			return 0;
 		});
+
+		setItems(newItems);
 	};
-	fetchItems();
 
 	return (
 		<div class="remote-item-list">
@@ -49,12 +105,11 @@ export const RemoteItemList: Component<{
 					{props.name}
 					<ChevronDownIcon />
 				</div>
+
 				<button
 					type="button"
 					onClick={() => {
-						const direction = toggleDirection();
+						sortItems(items(), toggleDirection());
-						setDirection(direction);
-						setItems(sorted(direction));
 					}}
 				>
 					<Switch fallback={<ArrowsSortIcon />}>
@@ -66,9 +121,6 @@ export const RemoteItemList: Component<{
 						</Match>
 					</Switch>
 				</button>
-				<button type="button" onClick={fetchItems}>
-					<ReloadIcon />
-				</button>
 			</div>
 			<Show when={showList()}>
 				<ItemList items={items} handler={props.handler} />

dev/main.tsx

@@ -29,21 +29,6 @@ async function fetchBrowserData(dir: string): Promise<BrowserFolder> {
 	return new Map([[dir, scenes]]);
 }
 
-function mapSceneEntitiesOld(sceneData: SceneData): BrowserFolder {
-	const sets: Record<string, number> = {};
-	const entites = sceneData.entities.reduce((root, entity) => {
-		sets[entity.name] =
-			sets[entity.name] === undefined ? 0 : sets[entity.name] + 1;
-		root.set(`${entity.name}:${sets[entity.name]}`, {
-			path: `${entity.name}:${sets[entity.name]}`,
-			isActive: false,
-		});
-		return root;
-	}, new Map() as BrowserFolder);
-
-	return new Map([["entities", entites]]);
-}
-
 const scenesRaw = await fetchBrowserData("scenes");
 
 function mapSceneEntities(sceneData: SceneData): Array<ListItem> {
@@ -113,24 +98,6 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 		]);
 	};
 
-	let activeEntity = null;
-	const setActiveEntity = (entityItem: ListItem & { index: number }): void => {
-		const instances = currentScene.entityInstanceMap.get(
-			entityItem.label,
-		)!.instances;
-		console.log(entityItem);
-		activeEntity = instances[entityItem.index] as Entity<unknown>;
-		// setEntities(mapActive("entities", path, entities));
-		console.log(activeEntity);
-	};
-	// const setActiveEntity = (path: string): void => {
-	// 	const [id, index] = path.split(":");
-	// 	const instances = currentScene.entityInstanceMap.get(id)!.instances;
-	// 	activeEntity = instances[parseInt(index)] as Entity<unknown>;
-	// 	setEntities(mapActive("entities", path, entities));
-	// 	console.log(activeEntity);
-	// };
-
 	const [scenes, setScenes] = createSignal(scenesRaw);
 
 	const setCurrentScene = async (path: string) => {
@@ -195,8 +162,8 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 
 				<RemoteItemList
 					name={"Entities"}
-					handler={setActiveEntity}
+					handler={console.log}
-					fetch={async () => entities()}
+					items={entities}
 				/>
 			</div>
 			<div class="tool-bar-resize" onMouseDown={startResizing}></div>