From 6880811236b12fbfcb3e5d0ef97ea60d07afa5d8 Mon Sep 17 00:00:00 2001
From: John Costa <johncosta027@gmail.com>
Date: Sun, 5 Oct 2025 15:54:46 +0100
Subject: [PATCH] fix: delete schema column button

---
 frontend/src/pages/image/index.tsx |   2 +-
 frontend/src/pages/stack/index.tsx | 101 +++++++++++++++++++++++------
 2 files changed, 82 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/image/index.tsx b/frontend/src/pages/image/index.tsx
index eb75493..babdf95 100644
--- a/frontend/src/pages/image/index.tsx
+++ b/frontend/src/pages/image/index.tsx
@@ -22,7 +22,7 @@ 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) => (
diff --git a/frontend/src/pages/stack/index.tsx b/frontend/src/pages/stack/index.tsx
index 82598a9..4a48db6 100644
--- a/frontend/src/pages/stack/index.tsx
+++ b/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() <
-                                                        s().SchemaItems
-                                                            .length -
-                                                        1
-                                                        ? "border-r border-neutral-200"
-                                                        : ""
-                                                        }`}
+                                                    class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${
+                                                        index() <
+                                                        s().SchemaItems.length -
+                                                            1
+                                                            ? "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
-                                                    ? "bg-white"
-                                                    : "bg-neutral-25"
-                                                    }`}
+                                                class={`hover:bg-neutral-50 transition-colors ${
+                                                    rowIndex() % 2 === 0
+                                                        ? "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
-                                                                ? "border-r border-neutral-200"
-                                                                : ""
-                                                                }`}
+                                                                    1
+                                                                    ? "border-r border-neutral-200"
+                                                                    : ""
+                                                            }`}
                                                         >
                                                             <div
                                                                 class="max-w-xs truncate"