From 28a4b37ddecd8ca64a4d5951d0bcfe4ed9bc01c7 Mon Sep 17 00:00:00 2001
From: John Costa <johncosta027@gmail.com>
Date: Tue, 29 Jul 2025 15:54:51 +0100
Subject: [PATCH] feat: showing the lists which an image is a part of

---
 backend/agents/list_agent.go                |  2 ++
 frontend/src/components/list-card/index.tsx | 35 +++++++++++++++++++++
 frontend/src/pages/front/gallery.tsx        | 35 ++-------------------
 frontend/src/pages/image/index.tsx          | 18 +++++++++--
 4 files changed, 55 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/components/list-card/index.tsx

diff --git a/backend/agents/list_agent.go b/backend/agents/list_agent.go
index 5922bab..d2a2d6d 100644
--- a/backend/agents/list_agent.go
+++ b/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
diff --git a/frontend/src/components/list-card/index.tsx b/frontend/src/components/list-card/index.tsx
new file mode 100644
index 0000000..3565eaf
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/frontend/src/pages/front/gallery.tsx b/frontend/src/pages/front/gallery.tsx
index 1397518..d0a4aa5 100644
--- a/frontend/src/pages/front/gallery.tsx
+++ b/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>
 	);
diff --git a/frontend/src/pages/image/index.tsx b/frontend/src/pages/image/index.tsx
index 7dd3803..f5699c3 100644
--- a/frontend/src/pages/image/index.tsx
+++ b/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>