Please revisit this thing

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>
 	);
 };