wip: all images page with virtualization

frontend/src/App.tsx

@@ -8,6 +8,7 @@ import {
 	Settings,
 	Entity,
 	SearchPage,
+	AllImages,
 } from "./pages";
 import { SearchImageContextProvider } from "@contexts/SearchImageContext";
 import { WithNotifications } from "@contexts/Notifications";
@@ -31,6 +32,7 @@ export const App = () => {
 							<Route path="/" component={WithTopbarAndDock}>
 								<Route path="/" component={FrontPage} />
 								<Route path="/search" component={SearchPage} />
+								<Route path="/all-images" component={AllImages} />
 								<Route path="/image/:imageId" component={ImagePage} />
 								<Route path="/entity/:entityId" component={Entity} />
 								<Route path="/gallery/:entity" component={Gallery} />

frontend/src/components/app-wrapper/dock.tsx

@@ -11,7 +11,7 @@ export const Dock: Component = () => {
 			<A href="/search" class="w-full flex justify-center items-center">
 				<IconSearch />
 			</A>
-			<A href="/" class="w-full flex justify-center items-center">
+			<A href="/all-images" class="w-full flex justify-center items-center">
 				<IconPhoto />
 			</A>
 		</div>

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";