feat: displaying generated lists on the frontend

frontend/src/contexts/SearchImageContext.tsx

@@ -30,6 +30,8 @@ export type SearchImageStore = {
 		Array<{ date: Date; images: JustTheImageWhatAreTheseNames }>
 	>;
 
+	lists: Accessor<Awaited<ReturnType<typeof getUserImages>>["Lists"]>;
+
 	userImages: Accessor<JustTheImageWhatAreTheseNames>;
 
 	imagesWithProperties: Accessor<ReturnType<typeof groupPropertiesWithImage>>;
@@ -117,6 +119,7 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
 			value={{
 				images: imageData,
 				imagesByDate: sortedImages,
+				lists: () => data()?.Lists ?? [],
 				imagesWithProperties: imagesWithProperties,
 				userImages: () => data()?.UserImages ?? [],
 				processingImages,

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

frontend/src/utils/hash.ts

@@ -0,0 +1,41 @@
+// Adding options parameter to allow to change the behavior of the function (should be compatible with the first version of the function)
+/**
+ * Generate a hash from a string, simple and fast.
+ * reference: https://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/
+ * @version 2.1.0
+ * @param {string} str Input string
+ * @param {Object} options Options
+ * @param {boolean} options.forcePositive If true, the hash will be forcePositive.
+ * @param {boolean} options.caseSensitive Case sensitive
+ * @param {boolean} options.seed Seed for the hash
+ */
+// From https://github.com/alexandrehpiva/fast-hash-code/blob/main/src/index.ts
+export function fastHashCode(
+	str: string,
+	options: {
+		forcePositive?: boolean;
+		caseSensitive?: boolean;
+		seed?: number;
+	} = {},
+): number {
+	const { forcePositive = false, caseSensitive = true, seed = 0 } = options;
+
+	if (!caseSensitive) {
+		str = str.toLowerCase();
+	}
+
+	let hash = seed;
+	let i;
+	for (i = 0; i < str.length; i++) {
+		hash = (hash << 5) - hash + str.charCodeAt(i);
+		hash |= 0; // Convert to 32bit integer
+	}
+
+	if (forcePositive) {
+		hash = hash & 0x7fffffff;
+	}
+
+	return hash;
+}
+
+export default fastHashCode;