Please revisit this thing

dev/ItemList.tsx

@@ -5,15 +5,19 @@ export type ListItem = { label: string; isActive: boolean };
 
 export type ItemHandler = (item: ListItem, index: number) => void;
 
-export type Direction = undefined | "asc" | "desc";
+export type Direction = "default" | "asc" | "desc";
 
 export function useSort(
 	items: Array<ListItem>,
-): (direction?: Direction) => Array<ListItem> {
-	const itemsRef = [...items];
+): [
+	(direction?: Direction) => Array<ListItem>,
+	(newItems: Array<ListItem>) => void,
+] {
+	let itemsRef = items;
 
-	return (direction) => {
-		if (!direction) {
+	return [
+		(direction = "default") => {
+			if (direction === "default") {
 				return [...itemsRef];
 			}
 			const newItems = [...itemsRef];
@@ -34,20 +38,31 @@ export function useSort(
 			});
 
 			return newItems;
-	};
+		},
+		(newItems) => {
+			itemsRef = newItems;
+		},
+	];
 }
 
-export function useDirection(initialDirection?: Direction): () => Direction {
+export function useDirection(
+	initialDirection: Direction = "default",
+): (forcedDirection?: Direction) => Direction {
 	let direction: Direction = initialDirection;
 
-	return () => {
+	return (forcedDirection) => {
+		if (forcedDirection) {
+			direction = forcedDirection;
+			return direction;
+		}
+
 		switch (direction) {
 			case "asc": {
 				direction = "desc";
 				break;
 			}
 			case "desc": {
-				direction = undefined;
+				direction = "default";
 				break;
 			}
 			default: {

dev/RemoteItemList.css

@@ -29,7 +29,7 @@
 	border-bottom: 1px solid var(--c-fg-3);
 }
 
-.remote-item-list-label {
+.remote-item-list-name {
 	padding-left: var(--sp-1);
 	cursor: pointer;
 	display: flex;
@@ -48,3 +48,9 @@
 		height: 0.875em;
 	}
 }
+
+.remote-item-list-name.hide {
+	svg {
+		rotate: 0.75turn;
+	}
+}

dev/RemoteItemList.tsx

@@ -1,6 +1,8 @@
 import "./RemoteItemList.css";
-import { type Component, createSignal } from "solid-js";
+import { type Component, createSignal, Match, Show, Switch } from "solid-js";
 import {
+	type Direction,
+	type ItemHandler,
 	ItemList,
 	type ListItem,
 	useDirection,
@@ -15,45 +17,62 @@ import {
 } from "#/dev/icons/index.ts";
 
 export const RemoteItemList: Component<{
-	fetchItems: () => Promise<Array<ListItem>>;
-}> = () => {
-	const [items, setItems] = createSignal<Array<ListItem>>([
-		{
-			label: "foo",
-			isActive: false,
-		},
-		{
-			label: "bar",
-			isActive: false,
-		},
-		{
-			label: "lol",
-			isActive: true,
-		},
-	]);
-	const getSorted = useSort(items());
+	name: string;
+	fetch: () => Promise<Array<ListItem>>;
+	handler: ItemHandler;
+}> = (props) => {
+	const [showList, setShowList] = createSignal(true);
+	const [items, setItems] = createSignal<Array<ListItem>>([]);
+	const [direction, setDirection] = createSignal<Direction>("default");
+	const [sorted, setSorted] = useSort([]);
 	const toggleDirection = useDirection();
 
+	const fetchItems = () => {
+		props.fetch().then((items) => {
+			setSorted(items);
+			setItems(sorted(direction()));
+		});
+	};
+	fetchItems();
+
 	return (
 		<div class="remote-item-list">
 			<div class="remote-item-list-header">
-				<div class="remote-item-list-label" role="button">
-					Items
+				<div
+					class="remote-item-list-name"
+					classList={{
+						hide: !showList(),
+					}}
+					role="button"
+					onClick={() => setShowList(!showList())}
+				>
+					{props.name}
 					<ChevronDownIcon />
 				</div>
 				<button
 					type="button"
 					onClick={() => {
-						setItems(getSorted(toggleDirection()));
+						const direction = toggleDirection();
+						setDirection(direction);
+						setItems(sorted(direction));
 					}}
 				>
-					<ArrowsSortIcon />
+					<Switch fallback={<ArrowsSortIcon />}>
+						<Match when={direction() === "asc"}>
+							<ArrowNarrowUpIcon />
+						</Match>
+						<Match when={direction() === "desc"}>
+							<ArrowNarrowDownIcon />
+						</Match>
+					</Switch>
 				</button>
-				<button type="button">
+				<button type="button" onClick={fetchItems}>
 					<ReloadIcon />
 				</button>
 			</div>
-			<ItemList items={items} handler={console.log} />
+			<Show when={showList()}>
+				<ItemList items={items} handler={props.handler} />
+			</Show>
 		</div>
 	);
 };

dev/icons/ArrowNarrowDown.tsx

@@ -1,4 +1,4 @@
-export const ArrowNarrowDownIcon = () => {
+export const ArrowNarrowDownIcon = () => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		width={24}
@@ -13,5 +13,5 @@ export const ArrowNarrowDownIcon = () => {
 			stroke-width={2}
 			d="M12 5v14m4-4l-4 4m-4-4l4 4"
 		/>
-	</svg>;
-};
+	</svg>
+);

dev/main.tsx

@@ -172,7 +172,24 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 				<FileBrowser root={scenes} handler={setCurrentScene} />
 				<FileBrowser root={entities} handler={setActiveEntity} />
 
-				<RemoteItemList fetchItems={async () => []} />
+				<RemoteItemList
+					name={"Sample list"}
+					handler={console.log}
+					fetch={async () => [
+						{
+							label: "foo",
+							isActive: false,
+						},
+						{
+							label: "bar",
+							isActive: false,
+						},
+						{
+							label: "lol",
+							isActive: true,
+						},
+					]}
+				/>
 			</div>
 			<div class="tool-bar-resize" onMouseDown={startResizing}></div>
 		</div>