feat: displaying generated lists on the frontend

frontend/src/pages/front/gallery.tsx

@@ -4,6 +4,7 @@ import {
 	SearchImageStore,
 	useSearchImageContext,
 } from "@contexts/SearchImageContext";
+import fastHashCode from "../../utils/hash";
 
 // TODO: lots of stuff to do with Entities, this could be seperated into a centralized place.
 const CategoryColor: Record<
@@ -16,8 +17,22 @@ const CategoryColor: Record<
 	note: "bg-green-50",
 };
 
+const colors = [
+	"bg-emerald-50",
+	"bg-lime-50",
+
+	"bg-indigo-50",
+	"bg-sky-50",
+
+	"bg-amber-50",
+	"bg-teal-50",
+
+	"bg-fuchsia-50",
+	"bg-pink-50",
+];
+
 export const Categories: Component = () => {
-	const { categories } = useSearchImageContext();
+	const { categories, lists } = useSearchImageContext();
 
 	return (
 		<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
@@ -41,6 +56,26 @@ export const Categories: Component = () => {
 					)}
 				</For>
 			</div>
+			<h2 class="text-xl font-bold">Generated Lists</h2>
+			<div class="w-full grid grid-cols-3 auto-rows-[minmax(100px,1fr)] gap-4">
+				<For each={lists()}>
+					{(list) => (
+						<A
+							href="/"
+							class={
+								"flex flex-col p-4 border border-neutral-200 rounded-lg " +
+								colors[
+									fastHashCode(list.Name, { forcePositive: true }) %
+										colors.length
+								]
+							}
+						>
+							<p class="text-xl font-bold">{list.Name}</p>
+							<p class="text-lg">{list.Images.length}</p>
+						</A>
+					)}
+				</For>
+			</div>
 		</div>
 	);
 };