feat: showing the lists which an image is a part of

frontend/src/components/list-card/index.tsx

@@ -0,0 +1,35 @@
+import { List } from "@network/index";
+import { Component } from "solid-js";
+import fastHashCode from "../../utils/hash";
+import { A } from "@solidjs/router";
+
+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 ListCard: Component<{ list: List }> = (props) => {
+	return (
+		<A
+			href={`/list/${props.list.ID}`}
+			class={
+				"flex flex-col p-4 border border-neutral-200 rounded-lg " +
+				colors[
+					fastHashCode(props.list.Name, { forcePositive: true }) % colors.length
+				]
+			}
+		>
+			<p class="text-xl font-bold">{props.list.Name}</p>
+			<p class="text-lg">{props.list.Images.length}</p>
+		</A>
+	);
+};

frontend/src/pages/front/gallery.tsx

@@ -1,21 +1,6 @@
 import { Component, For } from "solid-js";
-import { A } from "@solidjs/router";
 import { useSearchImageContext } from "@contexts/SearchImageContext";
-import fastHashCode from "../../utils/hash";
-
-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",
-];
+import { ListCard } from "@components/list-card";
 
 export const Categories: Component = () => {
 	const { lists } = useSearchImageContext();
@@ -24,23 +9,7 @@ export const Categories: Component = () => {
 		<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
 			<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={`/list/${list.ID}`}
-							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>
+				<For each={lists()}>{(list) => <ListCard list={list} />}</For>
 			</div>
 		</div>
 	);

frontend/src/pages/image/index.tsx

@@ -1,13 +1,15 @@
 import { ImageComponent } from "@components/image";
 import { useSearchImageContext } from "@contexts/SearchImageContext";
 import { useParams } from "@solidjs/router";
-import { type Component } from "solid-js";
+import { For, type Component } from "solid-js";
 import SolidjsMarkdown from "solidjs-markdown";
+import { List } from "../list";
+import { ListCard } from "@components/list-card";
 
 export const ImagePage: Component = () => {
 	const { imageId } = useParams<{ imageId: string }>();
 
-	const { userImages } = useSearchImageContext();
+	const { userImages, lists } = useSearchImageContext();
 
 	const image = () => userImages().find((i) => i.ImageID === imageId);
 
@@ -16,6 +18,18 @@ export const ImagePage: Component = () => {
 			<div class="w-full bg-white rounded-xl p-4">
 				<ImageComponent ID={imageId} />
 			</div>
+			<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
+				<h2 class="font-bold text-2xl">Description</h2>
+				<div class="grid grid-cols-3 gap-4">
+					<For each={image()?.Image.ImageLists}>
+						{(imageList) => (
+							<ListCard
+								list={lists().find((l) => l.ID === imageList.ListID)!}
+							/>
+						)}
+					</For>
+				</div>
+			</div>
 			<div class="w-full bg-white rounded-xl p-4">
 				<h2 class="font-bold text-2xl">Description</h2>
 				<SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown>