feat: virtualized all images page

frontend/src/pages/all-images/chunk.ts

@@ -0,0 +1,9 @@
+export const chunkRows = <T>(chunkSize: number, data: T[]): T[][] => {
+	const chunks: T[][] = [];
+
+	for (let i = 0; i < data.length / chunkSize; i++) {
+		chunks.push(data.slice(i * chunkSize, (i + 1) * chunkSize));
+	}
+
+	return chunks;
+};

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

@@ -1,16 +1,35 @@
 import { useSearchImageContext } from "@contexts/SearchImageContext";
-import { Component, For } from "solid-js";
+import { Component, createEffect, For } from "solid-js";
 import { createVirtualizer } from "@tanstack/solid-virtual";
 import { ImageComponent } from "@components/image";
+import { chunkRows } from "./chunk";
+
+type ImageOrDate =
+	| { type: "image"; ID: string[] }
+	| { type: "date"; date: Date };
 
 export const AllImages: Component = () => {
 	let scrollRef: HTMLDivElement | undefined;
 
-	const { userImages } = useSearchImageContext();
+	const { imagesByDate } = useSearchImageContext();
+
+	const items = () => {
+		const items: Array<ImageOrDate> = [];
+
+		for (const { date, images } of imagesByDate()) {
+			items.push({ type: "date", date });
+			const chunkedRows = chunkRows(3, images);
+			for (const chunk of chunkedRows) {
+				items.push({ type: "image", ID: chunk.map((c) => c.ImageID) });
+			}
+		}
+
+		return items;
+	};
 
 	const rowVirtualizer = createVirtualizer({
-		count: userImages().length,
-		estimateSize: () => 400 / 3,
+		count: items().length,
+		estimateSize: () => 400,
 		getScrollElement: () => scrollRef!,
 		overscan: 3,
 	});
@@ -21,7 +40,20 @@ export const AllImages: Component = () => {
 				class={`h-[${rowVirtualizer.getTotalSize()}px] grid grid-cols-3 gap-4`}
 			>
 				<For each={rowVirtualizer.getVirtualItems()}>
-					{(item) => <ImageComponent ID={userImages()[item.index].ImageID} />}
+					{(i) => {
+						const item = items()[i.index];
+						if (item.type === "image") {
+							return (
+								<For each={item.ID}>{(id) => <ImageComponent ID={id} />}</For>
+							);
+						} else {
+							return (
+								<h3 class="col-span-3 font-bold text-2xl">
+									{item.date.toDateString()}
+								</h3>
+							);
+						}
+					}}
 				</For>
 			</div>
 		</div>