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

backend/agents/list_agent.go

@@ -33,6 +33,8 @@ and extract some meaning about what the image is.
 You must call "listLists" to see which available lists are already available.
 Use "createList" only once, don't create multiple lists for one image.
 
+You can add an image to multiple lists, this is also true if you already created a list. But only add to a list if it makes sense to do so.
+
 **Tools:**
 * think: Internal reasoning/planning step.
 * listLists: Get existing lists

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>