wip: all images page with virtualization

frontend/src/pages/all-images/index.tsx

@@ -0,0 +1,29 @@
+import { useSearchImageContext } from "@contexts/SearchImageContext";
+import { Component, For } from "solid-js";
+import { createVirtualizer } from "@tanstack/solid-virtual";
+import { ImageComponent } from "@components/image";
+
+export const AllImages: Component = () => {
+	let scrollRef: HTMLDivElement | undefined;
+
+	const { userImages } = useSearchImageContext();
+
+	const rowVirtualizer = createVirtualizer({
+		count: userImages().length,
+		estimateSize: () => 400 / 3,
+		getScrollElement: () => scrollRef!,
+		overscan: 3,
+	});
+
+	return (
+		<div ref={scrollRef} class="flex flex-col gap-4 h-[1200px] overflow-y-auto">
+			<div
+				class={`h-[${rowVirtualizer.getTotalSize()}px] grid grid-cols-3 gap-4`}
+			>
+				<For each={rowVirtualizer.getVirtualItems()}>
+					{(item) => <ImageComponent ID={userImages()[item.index].ImageID} />}
+				</For>
+			</div>
+		</div>
+	);
+};

frontend/src/pages/index.ts

@@ -5,3 +5,4 @@ export * from "./settings";
 export * from "./login";
 export * from "./entity";
 export * from "./search";
+export * from "./all-images";