fix: image stacks on image page

backend/models/user.go

@@ -60,7 +60,7 @@ func (m UserModel) GetUserImages(ctx context.Context, userId uuid.UUID) ([]UserI
 	).
 		FROM(
 			Image.
-				LEFT_JOIN(ImageStacks, ImageStacks.ImageID.EQ(ImageStacks.ID)),
+				LEFT_JOIN(ImageStacks, ImageStacks.ImageID.EQ(Image.ID)),
 		).
 		WHERE(Image.UserID.EQ(UUID(userId)))
 

frontend/src/network/index.ts

@@ -194,7 +194,7 @@ const userImageValidator = strictObject({
         strictObject({
             ID: pipe(string(), uuid()),
             ImageID: pipe(string(), uuid()),
-            ListID: pipe(string(), uuid()),
+            StackID: pipe(string(), uuid()),
         }),
     )), transform(l => l ?? [])),
 });

frontend/src/pages/image/index.tsx

@@ -22,12 +22,12 @@ export const ImagePage: Component = () => {
                 }} />
             </div>
             <div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
-                <h2 class="font-bold text-2xl">Description</h2>
+                <h2 class="font-bold text-2xl">Stacks</h2>
                 <div class="grid grid-cols-3 gap-4">
                     <For each={image()?.ImageStacks}>
                         {(imageList) => (
                             <StackCard
-                                stack={stacks().find((l) => l.ID === imageList.ListID)!}
+                                stack={stacks().find((l) => l.ID === imageList.StackID)!}
                             />
                         )}
                     </For>

frontend/src/pages/stack/index.tsx

@@ -1,4 +1,3 @@
-import { useSearchImageContext } from "@contexts/SearchImageContext";
 import { useParams, useNavigate } from "@solidjs/router";
 import {
     Component,
@@ -10,6 +9,7 @@ import {
 } from "solid-js";
 import { base, getAccessToken } from "../../network";
 import { Dialog } from "@kobalte/core";
+import { useSearchImageContext } from "@contexts/SearchImageContext";
 
 const DeleteButton: Component<{ onDelete: () => void }> = (props) => {
     const [isOpen, setIsOpen] = createSignal(false);
@@ -103,11 +103,58 @@ const DeleteStackButton: Component<{ onDelete: () => void }> = (props) => {
     );
 };
 
+const DeleteStackItemButton: Component<{ onDelete: () => void }> = (props) => {
+    const [isOpen, setIsOpen] = createSignal(false);
+
+    return (
+        <>
+            <button
+                aria-label="Delete schema item"
+                class="text-gray-500 hover:text-red-700 text-sm"
+                onClick={() => setIsOpen(true)}
+            >
+                ×
+            </button>
+
+            <Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
+                <Dialog.Portal>
+                    <Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
+                    <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                        <Dialog.Content class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+                            <Dialog.Title class="text-lg font-bold mb-2">
+                                Confirm Delete
+                            </Dialog.Title>
+                            <Dialog.Description class="mb-4">
+                                Are you sure you want to delete this column from
+                                this list?
+                            </Dialog.Description>
+                            <div class="flex justify-end gap-2">
+                                <Dialog.CloseButton>
+                                    <button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
+                                        Cancel
+                                    </button>
+                                </Dialog.CloseButton>
+                                <button
+                                    class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+                                    onClick={props.onDelete}
+                                >
+                                    Confirm
+                                </button>
+                            </div>
+                        </Dialog.Content>
+                    </div>
+                </Dialog.Portal>
+            </Dialog.Root>
+        </>
+    );
+};
+
 export const Stack: Component = () => {
     const { stackID } = useParams();
     const nav = useNavigate();
 
-    const { stacks, onDeleteImageFromStack, onDeleteStack } = useSearchImageContext();
+    const { stacks, onDeleteImageFromStack, onDeleteStack, onDeleteStackItem } =
+        useSearchImageContext();
 
     const [accessToken] = createResource(getAccessToken);
 
@@ -135,7 +182,9 @@ export const Stack: Component = () => {
                                         </p>
                                     </Show>
                                 </div>
-                                <DeleteStackButton onDelete={handleDeleteStack} />
+                                <DeleteStackButton
+                                    onDelete={handleDeleteStack}
+                                />
                             </div>
                         </div>
                         <div
@@ -151,15 +200,25 @@ export const Stack: Component = () => {
                                         <For each={s().SchemaItems}>
                                             {(item, index) => (
                                                 <th
-                                                    class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${index() <
+                                                    class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${
-                                                        s().SchemaItems
+                                                        index() <
-                                                            .length -
+                                                        s().SchemaItems.length -
-                                                        1
+                                                            1
-                                                        ? "border-r border-neutral-200"
+                                                            ? "border-r border-neutral-200"
-                                                        : ""
+                                                            : ""
-                                                        }`}
+                                                    }`}
                                                 >
-                                                    {item.Item}
+                                                    <div class="flex items-center gap-2">
+                                                        {item.Item}
+                                                        <DeleteStackItemButton
+                                                            onDelete={() =>
+                                                                onDeleteStackItem(
+                                                                    s().ID,
+                                                                    item.ID,
+                                                                )
+                                                            }
+                                                        />
+                                                    </div>
                                                 </th>
                                             )}
                                         </For>
@@ -169,10 +228,11 @@ export const Stack: Component = () => {
                                     <For each={s().Images}>
                                         {(image, rowIndex) => (
                                             <tr
-                                                class={`hover:bg-neutral-50 transition-colors ${rowIndex() % 2 === 0
+                                                class={`hover:bg-neutral-50 transition-colors ${
-                                                    ? "bg-white"
+                                                    rowIndex() % 2 === 0
-                                                    : "bg-neutral-25"
+                                                        ? "bg-white"
-                                                    }`}
+                                                        : "bg-neutral-25"
+                                                }`}
                                             >
                                                 <td class="px-6 py-4 border-r border-neutral-200">
                                                     <div class="flex items-center gap-2">
@@ -199,13 +259,14 @@ export const Stack: Component = () => {
                                                 <For each={image.Items}>
                                                     {(item, colIndex) => (
                                                         <td
-                                                            class={`px-6 py-4 text-sm text-neutral-700 ${colIndex() <
+                                                            class={`px-6 py-4 text-sm text-neutral-700 ${
+                                                                colIndex() <
                                                                 image.Items
                                                                     .length -
-                                                                1
+                                                                    1
-                                                                ? "border-r border-neutral-200"
+                                                                    ? "border-r border-neutral-200"
-                                                                : ""
+                                                                    : ""
-                                                                }`}
+                                                            }`}
                                                         >
                                                             <div
                                                                 class="max-w-xs truncate"