@hectasquare/medusa-plugin-category-tree 1.0.10 → 1.0.11

package/.medusa/server/src/admin/components/category-tree/category-products-manager.js

@@ -155,7 +155,7 @@ const CategoryProductsManager = ({ categoryId, categoryName, initialMetadata, on
         const currentOrder = products.map((p) => p.id);
         await persistProductConfig(currentOrder, next);
     };
-    // Remove products from category
+    // Remove products from category using official Medusa v2 JS SDK method
     const handleRemoveProducts = async (idsToRemove) => {
         if (idsToRemove.length === 0)
             return;
@@ -166,9 +166,8 @@ const CategoryProductsManager = ({ categoryId, categoryName, initialMetadata, on
             return;
         setIsRemoving(true);
         try {
-            await sdk_1.sdk.client.fetch(`/admin/product-categories/${categoryId}/products`, {
-                method: "POST",
-                body: { remove: idsToRemove },
+            await sdk_1.sdk.admin.productCategory.updateProducts(categoryId, {
+                remove: idsToRemove,
             });
             ui_1.toast.success(`Removed ${idsToRemove.length} product(s) from category`);
             setSelectedIds(new Set());
@@ -210,15 +209,15 @@ const CategoryProductsManager = ({ categoryId, categoryName, initialMetadata, on
             searchCatalog(searchQuery, catalogPage);
         }
     }, [focusModalOpen, searchQuery, catalogPage, searchCatalog]);
+    // Save added products using official Medusa v2 JS SDK method
     const handleSaveAddedProducts = async () => {
         const idsToAdd = Array.from(catalogSelectedIds);
         if (idsToAdd.length === 0)
             return;
         setIsAdding(true);
         try {
-            await sdk_1.sdk.client.fetch(`/admin/product-categories/${categoryId}/products`, {
-                method: "POST",
-                body: { add: idsToAdd },
+            await sdk_1.sdk.admin.productCategory.updateProducts(categoryId, {
+                add: idsToAdd,
             });
             ui_1.toast.success(`Added ${idsToAdd.length} product(s) to ${categoryName}`);
             setFocusModalOpen(false);
@@ -243,18 +242,39 @@ const CategoryProductsManager = ({ categoryId, categoryName, initialMetadata, on
         }
         return products;
     }, [products, activeView, topSellerIds]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between flex-wrap gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 p-1 rounded-lg bg-ui-bg-subtle border border-ui-border-base", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setActiveView("all"), className: `px-2.5 py-1 text-xs font-medium rounded-md transition-colors ${activeView === "all"
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between flex-wrap gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 p-1 rounded-lg bg-ui-bg-subtle border border-ui-border-base", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    setActiveView("all");
+                                }, className: `px-2.5 py-1 text-xs font-medium rounded-md transition-colors ${activeView === "all"
                                     ? "bg-ui-bg-base text-ui-fg-base shadow-2xs font-semibold"
-                                    : "text-ui-fg-muted hover:text-ui-fg-base"}`, children: ["All Products (", products.length, ")"] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setActiveView("top_sellers"), className: `flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-md transition-colors ${activeView === "top_sellers"
+                                    : "text-ui-fg-muted hover:text-ui-fg-base"}`, children: ["All Products (", products.length, ")"] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    setActiveView("top_sellers");
+                                }, className: `flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-md transition-colors ${activeView === "top_sellers"
                                     ? "bg-amber-500/10 text-amber-700 dark:text-amber-400 font-semibold"
-                                    : "text-ui-fg-muted hover:text-amber-600"}`, children: [(0, jsx_runtime_1.jsx)(icons_1.Sparkles, { className: "w-3.5 h-3.5 text-amber-500" }), (0, jsx_runtime_1.jsxs)("span", { children: ["Top Commercial Sellers (", topSellerIds.size, ")"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedIds.size > 0 && ((0, jsx_runtime_1.jsxs)(ui_1.Button, { size: "small", variant: "danger", disabled: isRemoving, onClick: () => handleRemoveProducts(Array.from(selectedIds)), className: "flex items-center gap-1 text-xs", children: [(0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsxs)("span", { children: ["Remove Selected (", selectedIds.size, ")"] })] })), (0, jsx_runtime_1.jsxs)(ui_1.Button, { size: "small", variant: "secondary", onClick: () => {
+                                    : "text-ui-fg-muted hover:text-amber-600"}`, children: [(0, jsx_runtime_1.jsx)(icons_1.Sparkles, { className: "w-3.5 h-3.5 text-amber-500" }), (0, jsx_runtime_1.jsxs)("span", { children: ["Top Commercial Sellers (", topSellerIds.size, ")"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedIds.size > 0 && ((0, jsx_runtime_1.jsxs)(ui_1.Button, { type: "button", size: "small", variant: "danger", disabled: isRemoving, onClick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleRemoveProducts(Array.from(selectedIds));
+                                }, className: "flex items-center gap-1 text-xs", children: [(0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsxs)("span", { children: ["Remove Selected (", selectedIds.size, ")"] })] })), (0, jsx_runtime_1.jsxs)(ui_1.Button, { type: "button", size: "small", variant: "secondary", onClick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
                                     setCatalogSelectedIds(new Set());
                                     setSearchQuery("");
                                     setCatalogPage(0);
                                     setFocusModalOpen(true);
                                 }, className: "flex items-center gap-1 text-xs", children: [(0, jsx_runtime_1.jsx)(icons_1.Plus, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: "Add Products" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "border border-ui-border-base rounded-xl overflow-hidden bg-ui-bg-base shadow-2xs", children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { className: "p-8 text-center text-xs text-ui-fg-muted", children: "Loading products\u2026" })) : displayedProducts.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "p-8 text-center flex flex-col items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs text-ui-fg-muted", children: activeView === "top_sellers"
                                 ? "No products marked as Top Commercial Sellers yet. Star a product below to highlight it."
-                                : "No products assigned to this category." }), activeView === "all" && ((0, jsx_runtime_1.jsxs)(ui_1.Button, { size: "small", variant: "secondary", onClick: () => setFocusModalOpen(true), className: "flex items-center gap-1 text-xs", children: [(0, jsx_runtime_1.jsx)(icons_1.Plus, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: "Add Products" })] }))] })) : ((0, jsx_runtime_1.jsxs)("table", { className: "w-full text-left text-xs border-collapse", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { className: "border-b border-ui-border-base bg-ui-bg-subtle/60 text-ui-fg-muted font-medium", children: [(0, jsx_runtime_1.jsx)("th", { className: "py-2.5 px-3 w-8", children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: displayedProducts.length > 0 && selectedIds.size === displayedProducts.length, onChange: () => {
+                                : "No products assigned to this category." }), activeView === "all" && ((0, jsx_runtime_1.jsxs)(ui_1.Button, { type: "button", size: "small", variant: "secondary", onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                setCatalogSelectedIds(new Set());
+                                setSearchQuery("");
+                                setCatalogPage(0);
+                                setFocusModalOpen(true);
+                            }, className: "flex items-center gap-1 text-xs", children: [(0, jsx_runtime_1.jsx)(icons_1.Plus, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: "Add Products" })] }))] })) : ((0, jsx_runtime_1.jsxs)("table", { className: "w-full text-left text-xs border-collapse", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { className: "border-b border-ui-border-base bg-ui-bg-subtle/60 text-ui-fg-muted font-medium", children: [(0, jsx_runtime_1.jsx)("th", { className: "py-2.5 px-3 w-8", children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: displayedProducts.length > 0 && selectedIds.size === displayedProducts.length, onChange: () => {
                                                 if (selectedIds.size === displayedProducts.length)
                                                     setSelectedIds(new Set());
                                                 else
@@ -279,22 +299,26 @@ const CategoryProductsManager = ({ categoryId, categoryName, initialMetadata, on
                                                                     e.preventDefault();
                                                                     e.stopPropagation();
                                                                     handleMoveProduct(index, "down");
-                                                                }, className: "text-[9px] text-ui-fg-muted hover:text-ui-fg-base disabled:opacity-20 px-0.5 leading-none cursor-pointer", children: "\u25BC" })] })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-9 h-9 rounded-md border border-ui-border-base overflow-hidden bg-ui-bg-subtle flex-shrink-0 flex items-center justify-center", children: p.thumbnail ? ((0, jsx_runtime_1.jsx)("img", { src: p.thumbnail, alt: p.title, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-[9px] text-ui-fg-muted", children: "IMG" })) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col min-w-0", children: (0, jsx_runtime_1.jsx)("span", { className: "font-semibold text-ui-fg-base truncate leading-snug", title: p.title, children: p.title }) })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: (e) => {
+                                                                }, className: "text-[9px] text-ui-fg-muted hover:text-ui-fg-base disabled:opacity-20 px-0.5 leading-none cursor-pointer", children: "\u25BC" })] })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 min-w-0", children: [(0, jsx_runtime_1.jsx)("a", { href: `/app/products/${p.id}`, target: "_blank", rel: "noopener noreferrer", className: "w-9 h-9 rounded-md border border-ui-border-base overflow-hidden bg-ui-bg-subtle flex-shrink-0 flex items-center justify-center hover:opacity-80 transition-opacity", title: `Open ${p.title} in new tab`, children: p.thumbnail ? ((0, jsx_runtime_1.jsx)("img", { src: p.thumbnail, alt: p.title, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-[9px] text-ui-fg-muted", children: "IMG" })) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col min-w-0", children: (0, jsx_runtime_1.jsxs)("a", { href: `/app/products/${p.id}`, target: "_blank", rel: "noopener noreferrer", className: "font-semibold text-ui-fg-base hover:text-ui-fg-interactive truncate leading-snug hover:underline flex items-center gap-1 group/pname", title: `Open ${p.title} in new tab`, children: [(0, jsx_runtime_1.jsx)("span", { className: "truncate", children: p.title }), (0, jsx_runtime_1.jsx)(icons_1.ArrowUpRightMicro, { className: "w-3.5 h-3.5 text-ui-fg-muted group-hover/pname:text-ui-fg-interactive transition-colors shrink-0" })] }) })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: (e) => {
                                                     e.preventDefault();
                                                     e.stopPropagation();
                                                     handleToggleTopSeller(p.id, p.title);
-                                                }, className: `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold border transition-all ${isTopSeller
+                                                }, className: `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold border transition-all cursor-pointer ${isTopSeller
                                                     ? "bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-300 dark:border-amber-700 shadow-2xs"
                                                     : "bg-ui-bg-subtle text-ui-fg-muted border-ui-border-base hover:text-amber-600 hover:border-amber-300"}`, title: isTopSeller
                                                     ? "Click to remove from Top Commercial Sellers"
-                                                    : "Click to mark as Top Commercial Seller (Reflected in Storefront 2)", children: [(0, jsx_runtime_1.jsx)("span", { children: isTopSeller ? "★" : "☆" }), (0, jsx_runtime_1.jsx)("span", { children: isTopSeller ? "Top Seller" : "Normal" })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3 text-ui-fg-muted", children: p.collection?.title || "-" }), (0, jsx_runtime_1.jsxs)("td", { className: "py-2.5 px-3 text-ui-fg-subtle", children: [p.variants?.length || 0, " variant(s)"] }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium ${p.status === "published"
+                                                    : "Click to mark as Top Commercial Seller (Reflected on Storefront 2)", children: [(0, jsx_runtime_1.jsx)("span", { children: isTopSeller ? "★" : "☆" }), (0, jsx_runtime_1.jsx)("span", { children: isTopSeller ? "Top Seller" : "Normal" })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3 text-ui-fg-muted", children: p.collection?.title || "-" }), (0, jsx_runtime_1.jsxs)("td", { className: "py-2.5 px-3 text-ui-fg-subtle", children: [p.variants?.length || 0, " variant(s)"] }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium ${p.status === "published"
                                                     ? "bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-300"
                                                     : "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"}`, children: p.status }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3 text-right", children: (0, jsx_runtime_1.jsx)("button", { type: "button", title: "Remove from category", onClick: (e) => {
                                                     e.preventDefault();
                                                     e.stopPropagation();
                                                     handleRemoveProducts([p.id]);
-                                                }, className: "p-1 text-ui-fg-muted hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/50 rounded transition-colors", children: (0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3.5 h-3.5" }) }) })] }, p.id));
-                            }) })] })) }), focusModalOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-0 z-50 flex flex-col bg-white dark:bg-neutral-950 animate-in fade-in-50", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-6 py-3 border-b border-ui-border-base bg-ui-bg-base flex-shrink-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setFocusModalOpen(false), className: "p-1.5 rounded-lg text-ui-fg-muted hover:text-ui-fg-base hover:bg-ui-bg-subtle transition-colors", title: "Close (ESC)", children: (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-bold", children: "\u2715" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[11px] font-mono font-medium text-ui-fg-muted px-1.5 py-0.5 rounded bg-ui-bg-subtle border border-ui-border-base", children: "ESC" }), (0, jsx_runtime_1.jsxs)("h2", { className: "text-sm font-semibold text-ui-fg-base", children: ["Add Products to Category: ", categoryName] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative w-64", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search products\u2026", value: searchQuery, onChange: (e) => {
+                                                }, className: "p-1 text-ui-fg-muted hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/50 rounded transition-colors cursor-pointer", children: (0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3.5 h-3.5" }) }) })] }, p.id));
+                            }) })] })) }), focusModalOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-0 z-50 flex flex-col bg-white dark:bg-neutral-950 animate-in fade-in-50", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-6 py-3 border-b border-ui-border-base bg-ui-bg-base flex-shrink-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            setFocusModalOpen(false);
+                                        }, className: "p-1.5 rounded-lg text-ui-fg-muted hover:text-ui-fg-base hover:bg-ui-bg-subtle transition-colors cursor-pointer", title: "Close (ESC)", children: (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-bold", children: "\u2715" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[11px] font-mono font-medium text-ui-fg-muted px-1.5 py-0.5 rounded bg-ui-bg-subtle border border-ui-border-base", children: "ESC" }), (0, jsx_runtime_1.jsxs)("h2", { className: "text-sm font-semibold text-ui-fg-base", children: ["Add Products to Category: ", categoryName] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative w-64", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search products\u2026", value: searchQuery, onChange: (e) => {
                                                 setSearchQuery(e.target.value);
                                                 setCatalogPage(0);
                                             }, className: "w-full text-xs pl-8 pr-3 py-1.5 rounded-lg bg-ui-bg-subtle border border-ui-border-base text-ui-fg-base focus:bg-ui-bg-base focus:border-ui-border-interactive focus:outline-none placeholder:text-ui-fg-muted", autoFocus: true }), (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlass, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-ui-fg-muted pointer-events-none" })] }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: (0, jsx_runtime_1.jsx)("div", { className: "border border-ui-border-base rounded-xl overflow-hidden bg-ui-bg-base shadow-sm", children: (0, jsx_runtime_1.jsxs)("table", { className: "w-full text-left text-xs border-collapse", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { className: "border-b border-ui-border-base bg-ui-bg-subtle/80 text-ui-fg-muted font-medium", children: [(0, jsx_runtime_1.jsx)("th", { className: "py-2.5 px-3 w-8", children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: catalogProducts.length > 0 &&
@@ -338,6 +362,22 @@ const CategoryProductsManager = ({ categoryId, categoryName, initialMetadata, on
                                                             }, className: "rounded border-ui-border-base cursor-pointer" }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8 rounded border border-ui-border-base overflow-hidden bg-ui-bg-subtle flex-shrink-0 flex items-center justify-center", children: p.thumbnail ? ((0, jsx_runtime_1.jsx)("img", { src: p.thumbnail, alt: p.title, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-[8px] text-ui-fg-muted", children: "IMG" })) }), (0, jsx_runtime_1.jsx)("span", { className: "font-semibold text-ui-fg-base truncate leading-snug", children: p.title }), isAlreadyAssigned && ((0, jsx_runtime_1.jsx)(ui_1.Badge, { size: "small", color: "grey", className: "ml-1 text-[9px]", children: "Already in Category" }))] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3 text-ui-fg-muted", children: p.collection?.title || "-" }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1 flex-wrap", children: (p.sales_channels || []).map((sc) => ((0, jsx_runtime_1.jsx)("span", { className: "px-1.5 py-0.5 rounded text-[10px] bg-ui-bg-subtle border border-ui-border-base text-ui-fg-subtle", children: sc.name }, sc.id))) }) }), (0, jsx_runtime_1.jsxs)("td", { className: "py-2.5 px-3 text-ui-fg-subtle", children: [p.variants?.length || 0, " variant(s)"] }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium ${p.status === "published"
                                                                 ? "bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-300"
                                                                 : "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"}`, children: p.status }) })] }, p.id));
-                                        })) })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-6 py-3 border-t border-ui-border-base bg-ui-bg-base flex-shrink-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-ui-fg-muted", children: ["Showing ", Math.min(catalogProducts.length, PAGE_SIZE), " of ", catalogTotalCount, " results"] }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-ui-fg-muted", children: "\u2022" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs font-semibold text-ui-fg-base", children: [catalogSelectedIds.size, " product(s) selected"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: catalogPage === 0, onClick: () => setCatalogPage((p) => Math.max(0, p - 1)), className: "px-2.5 py-1 text-xs rounded border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base disabled:opacity-40", children: "Prev" }), (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: (catalogPage + 1) * PAGE_SIZE >= catalogTotalCount, onClick: () => setCatalogPage((p) => p + 1), className: "px-2.5 py-1 text-xs rounded border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base disabled:opacity-40", children: "Next" }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 w-[1px] bg-ui-border-base mx-1" }), (0, jsx_runtime_1.jsx)(ui_1.Button, { size: "small", variant: "secondary", onClick: () => setFocusModalOpen(false), children: "Cancel" }), (0, jsx_runtime_1.jsxs)(ui_1.Button, { size: "small", variant: "primary", disabled: catalogSelectedIds.size === 0 || isAdding, onClick: handleSaveAddedProducts, className: "flex items-center gap-1 text-xs min-w-[70px] justify-center", children: [(0, jsx_runtime_1.jsx)(icons_1.CheckMini, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: isAdding ? "Saving…" : "Save" })] })] })] })] }))] }));
+                                        })) })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-6 py-3 border-t border-ui-border-base bg-ui-bg-base flex-shrink-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-ui-fg-muted", children: ["Showing ", Math.min(catalogProducts.length, PAGE_SIZE), " of ", catalogTotalCount, " results"] }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-ui-fg-muted", children: "\u2022" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs font-semibold text-ui-fg-base", children: [catalogSelectedIds.size, " product(s) selected"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: catalogPage === 0, onClick: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            setCatalogPage((p) => Math.max(0, p - 1));
+                                        }, className: "px-2.5 py-1 text-xs rounded border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base disabled:opacity-40 cursor-pointer", children: "Prev" }), (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: (catalogPage + 1) * PAGE_SIZE >= catalogTotalCount, onClick: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            setCatalogPage((p) => p + 1);
+                                        }, className: "px-2.5 py-1 text-xs rounded border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base disabled:opacity-40 cursor-pointer", children: "Next" }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 w-[1px] bg-ui-border-base mx-1" }), (0, jsx_runtime_1.jsx)(ui_1.Button, { type: "button", size: "small", variant: "secondary", onClick: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            setFocusModalOpen(false);
+                                        }, children: "Cancel" }), (0, jsx_runtime_1.jsxs)(ui_1.Button, { type: "button", size: "small", variant: "primary", disabled: catalogSelectedIds.size === 0 || isAdding, onClick: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            handleSaveAddedProducts();
+                                        }, className: "flex items-center gap-1 text-xs min-w-[70px] justify-center", children: [(0, jsx_runtime_1.jsx)(icons_1.CheckMini, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: isAdding ? "Saving…" : "Save" })] })] })] })] }))] }));
 };
 exports.CategoryProductsManager = CategoryProductsManager;

package/.medusa/server/src/admin/components/category-tree/edit-category-drawer.js

@@ -93,8 +93,13 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
         catch {
             // Endpoint fallback
         }
-        // Metadata fallback: if metadata.images array exists
-        if (metadata?.images && Array.isArray(metadata.images) && metadata.images.length > 0) {
+        // Explicit metadata.images check: if metadata.images array exists (even if empty)
+        if (metadata && Array.isArray(metadata.images)) {
+            if (metadata.images.length === 0) {
+                setCategoryImages([]);
+                setImageUrl("");
+                return;
+            }
             setCategoryImages(metadata.images);
             const thumb = metadata.images.find((img) => img.type === "thumbnail") || metadata.images[0];
             if (thumb?.url)
@@ -103,7 +108,7 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
         }
         // Legacy fallback
         const list = [];
-        const thumb = currentImageUrl || metadata?.thumbnail || metadata?.image_url;
+        const thumb = metadata?.thumbnail || metadata?.image_url || currentImageUrl;
         if (thumb) {
             list.push({ url: thumb, type: "thumbnail" });
         }
@@ -228,8 +233,26 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
         setManualImageUrl("");
         ui_1.toast.success(`Added to gallery as ${newType === "thumbnail" ? "Thumbnail" : newType === "banner" ? "Hero Banner" : "Image"}`);
     };
-    // Delete category image
+    // Delete category image with immediate persistence & explicit nulls
     const handleDeleteImage = async (img) => {
+        const remaining = categoryImages.filter((i) => i.url !== img.url && (img.id ? i.id !== img.id : true));
+        const nextThumb = remaining.find((i) => i.type === "thumbnail") || remaining[0] || null;
+        const nextBanner = remaining.find((i) => i.type === "banner") ||
+            (remaining.length > 1 ? remaining.find((i) => i.url !== nextThumb?.url) : null) ||
+            null;
+        // Update local state immediately
+        setCategoryImages(remaining);
+        setImageUrl(nextThumb ? nextThumb.url : "");
+        const updatedMeta = {
+            ...(currentMetadata || {}),
+            images: remaining,
+            thumbnail: nextThumb ? nextThumb.url : null,
+            image_url: nextThumb ? nextThumb.url : null,
+            banner: nextBanner ? nextBanner.url : null,
+            image: (nextBanner?.url || nextThumb?.url) || null,
+        };
+        setCurrentMetadata(updatedMeta);
+        // Call backend endpoint if DB relation exists
         if (img.id) {
             try {
                 await sdk_1.sdk.client.fetch(`/admin/categories/${category.id}/images/batch`, {
@@ -240,16 +263,27 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
                     },
                 });
             }
-            catch {
-                // Fallback
+            catch (err) {
+                console.warn("Could not delete from backend images endpoint:", err);
             }
         }
-        setCategoryImages((prev) => prev.filter((i) => i.url !== img.url && (img.id ? i.id !== img.id : true)));
-        if (imageUrl === img.url) {
-            const remaining = categoryImages.filter((i) => i.url !== img.url && (img.id ? i.id !== img.id : true));
-            setImageUrl(remaining[0]?.url || "");
+        // Immediately persist metadata changes to Medusa
+        try {
+            await sdk_1.sdk.admin.productCategory.update(category.id, {
+                metadata: updatedMeta,
+            });
+            const updatedCat = {
+                ...category,
+                image_url: nextThumb ? nextThumb.url : "",
+                metadata: updatedMeta,
+            };
+            onSuccess(updatedCat);
+            ui_1.toast.success("Image removed and changes saved");
+        }
+        catch (err) {
+            console.warn("Could not immediately update category metadata on delete:", err);
+            ui_1.toast.info("Image removed from gallery (remember to save)");
         }
-        ui_1.toast.info("Image removed");
     };
     if (!category)
         return null;
@@ -258,7 +292,7 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
             ? prev.filter((id) => id !== channelId)
             : [...prev, channelId]);
     };
-    const handleAddYoutube = () => {
+    const handleAddYoutube = async () => {
         const raw = newYoutubeInput.trim();
         if (!raw)
             return;
@@ -272,15 +306,55 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
             ui_1.toast.error("Video already added");
             return;
         }
-        setYoutubeUrls((prev) => [...prev, cleanUrl]);
+        const nextUrls = [...youtubeUrls, cleanUrl];
+        setYoutubeUrls(nextUrls);
         setNewYoutubeInput("");
-        ui_1.toast.success("YouTube video added");
+        const updatedMeta = {
+            ...(currentMetadata || {}),
+            youtube_urls: nextUrls,
+            youtube_url: nextUrls[0] || null,
+        };
+        setCurrentMetadata(updatedMeta);
+        try {
+            await sdk_1.sdk.admin.productCategory.update(category.id, {
+                metadata: updatedMeta,
+            });
+            onSuccess({
+                ...category,
+                metadata: updatedMeta,
+            });
+            ui_1.toast.success("YouTube video added and saved");
+        }
+        catch {
+            ui_1.toast.success("YouTube video added");
+        }
     };
-    const handleRemoveYoutube = (urlToRemove) => {
-        setYoutubeUrls((prev) => prev.filter((u) => u !== urlToRemove));
+    const handleRemoveYoutube = async (urlToRemove) => {
+        const nextUrls = youtubeUrls.filter((u) => u !== urlToRemove);
+        setYoutubeUrls(nextUrls);
+        const updatedMeta = {
+            ...(currentMetadata || {}),
+            youtube_urls: nextUrls,
+            youtube_url: nextUrls[0] || null,
+        };
+        setCurrentMetadata(updatedMeta);
+        try {
+            await sdk_1.sdk.admin.productCategory.update(category.id, {
+                metadata: updatedMeta,
+            });
+            onSuccess({
+                ...category,
+                metadata: updatedMeta,
+            });
+            ui_1.toast.success("Video removed and changes saved");
+        }
+        catch {
+            ui_1.toast.info("Video removed (remember to save)");
+        }
     };
     const handleSubmit = async (e) => {
-        e.preventDefault();
+        if (e && e.preventDefault)
+            e.preventDefault();
         if (!name.trim()) {
             ui_1.toast.error("Category name is required");
             return;
@@ -288,26 +362,22 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
         setIsSubmitting(true);
         try {
             const thumbImg = categoryImages.find((img) => img.type === "thumbnail") ||
-                categoryImages[0];
+                categoryImages[0] ||
+                null;
             const bannerImg = categoryImages.find((img) => img.type === "banner") ||
-                categoryImages.find((img) => img.url !== thumbImg?.url);
+                (categoryImages.length > 1 ? categoryImages.find((img) => img.url !== thumbImg?.url) : null) ||
+                null;
             const updatedMetadata = {
                 ...(currentMetadata || {}),
                 sales_channels: selectedChannels,
                 youtube_urls: youtubeUrls,
+                youtube_url: youtubeUrls[0] || null,
                 images: categoryImages,
+                thumbnail: thumbImg ? thumbImg.url : null,
+                image_url: thumbImg ? thumbImg.url : null,
+                banner: bannerImg ? bannerImg.url : null,
+                image: (bannerImg?.url || thumbImg?.url) || null,
             };
-            if (thumbImg?.url) {
-                updatedMetadata.thumbnail = thumbImg.url;
-                updatedMetadata.image_url = thumbImg.url;
-            }
-            if (bannerImg?.url && bannerImg.url !== thumbImg?.url) {
-                updatedMetadata.banner = bannerImg.url;
-                updatedMetadata.image = bannerImg.url;
-            }
-            else if (thumbImg?.url) {
-                updatedMetadata.image = thumbImg.url;
-            }
             await sdk_1.sdk.admin.productCategory.update(category.id, {
                 name: name.trim(),
                 handle: handle.trim() || undefined,
@@ -322,7 +392,7 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
                 name: name.trim(),
                 handle: handle.trim(),
                 description: description.trim() || null,
-                image_url: imageUrl.trim() || category.image_url,
+                image_url: thumbImg ? thumbImg.url : "",
                 rank: Number(rank) || 0,
                 sales_channels: selectedChannels,
                 is_active: isActive,
@@ -360,15 +430,15 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
     };
     return ((0, jsx_runtime_1.jsx)(ui_1.Drawer, { open: open, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsx)(ui_1.Drawer.Content, { className: `transition-all duration-300 w-full z-50 ${isFullScreen
                 ? "!max-w-full !w-screen !h-screen !inset-0 !rounded-none"
-                : "max-w-5xl xl:max-w-6xl w-[92vw]"}`, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(ui_1.Drawer.Header, { className: "border-b border-ui-border-base pb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between w-full", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Drawer.Title, { className: "text-base font-semibold text-ui-fg-base", children: category.name }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Description, { className: "text-xs text-ui-fg-muted mt-0.5", children: ["Tier ", category.tier, " \u2022 ID: ", category.id] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setIsFullScreen((prev) => !prev), className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors", title: isFullScreen ? "Exit Fullscreen" : "Expand to Full Page Modal", children: [(0, jsx_runtime_1.jsx)(icons_1.ArrowsPointingOut, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: isFullScreen ? "Exit Fullscreen" : "Full Page" })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => window.open(`/app/categories/${category.id}`, "_blank"), className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors", title: "Open full category details page in a new tab", children: [(0, jsx_runtime_1.jsx)("span", { children: "Open Full Page" }), (0, jsx_runtime_1.jsx)(icons_1.ArrowUpRightMicro, { className: "w-3.5 h-3.5" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 mt-3 border-b border-ui-border-base/50 -mb-3 pb-1", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab("general"), className: `px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${activeTab === "general"
-                                            ? "border-ui-border-interactive text-ui-fg-base bg-ui-bg-subtle/50"
-                                            : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"}`, children: "General & Ranking" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab("products"), className: `px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${activeTab === "products"
-                                            ? "border-ui-border-interactive text-ui-fg-base bg-ui-bg-subtle/50"
-                                            : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"}`, children: "Products Management" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab("channels"), className: `px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${activeTab === "channels"
-                                            ? "border-ui-border-interactive text-ui-fg-base bg-ui-bg-subtle/50"
-                                            : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"}`, children: "Storefronts & Media" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setActiveTab("youtube"), className: `px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${activeTab === "youtube"
-                                            ? "border-ui-border-interactive text-ui-fg-base bg-ui-bg-subtle/50"
-                                            : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"}`, children: ["YouTube Videos (", youtubeUrls.length, ")"] })] })] }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Body, { className: "flex flex-col gap-4 overflow-y-auto px-6 py-4 flex-1", children: [activeTab === "general" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-name", className: "text-xs font-semibold", children: "Category Name *" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "edit-name", size: "small", value: name, onChange: (e) => setName(e.target.value) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-handle", className: "text-xs font-semibold", children: "Handle (URL slug)" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "edit-handle", size: "small", value: handle, onChange: (e) => setHandle(e.target.value) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5 p-3 rounded-lg bg-ui-bg-subtle border border-ui-border-base", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-rank", className: "text-xs font-semibold", children: "Storefront Ranking (Sort Order)" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-mono text-ui-fg-muted", children: "Controls Storefront 2 & Monfil" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Input, { id: "edit-rank", type: "number", size: "small", value: rank, onChange: (e) => setRank(Number(e.target.value)), className: "w-24" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setRank((r) => Math.max(0, r - 1)), className: "px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors", title: "Move Earlier in Storefront", children: "\u2191 Earlier" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setRank((r) => r + 1), className: "px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors", title: "Move Later in Storefront", children: "\u2193 Later" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setRank(0), className: "px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors", title: "Set as First Category", children: "Top (#0)" })] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-[11px] text-ui-fg-muted leading-relaxed", children: "Categories are sorted by rank ASC (0, 1, 2...). Lower numbers appear first on your storefront navigation menu." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-desc", className: "text-xs font-semibold", children: "Description" }), (0, jsx_runtime_1.jsx)(ui_1.Textarea, { id: "edit-desc", value: description, onChange: (e) => setDescription(e.target.value), rows: 3 })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between pt-2 border-t border-ui-border-base", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Active Status" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Visible to shoppers on enabled storefronts" })] }), (0, jsx_runtime_1.jsx)(ui_1.Switch, { checked: isActive, onCheckedChange: setIsActive })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Internal Only" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Hidden from public storefront navigation" })] }), (0, jsx_runtime_1.jsx)(ui_1.Switch, { checked: isInternal, onCheckedChange: setIsInternal })] }), (0, jsx_runtime_1.jsx)("div", { className: "pt-3 border-t border-ui-border-base", children: (0, jsx_runtime_1.jsxs)(ui_1.Button, { type: "button", variant: "danger", size: "small", onClick: handleDelete, isLoading: isDeleting, className: "w-full flex items-center justify-center gap-1.5", children: [(0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: "Delete Category" })] }) })] })), activeTab === "products" && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3", children: (0, jsx_runtime_1.jsx)(category_products_manager_1.CategoryProductsManager, { categoryId: category.id, categoryName: category.name, initialMetadata: currentMetadata, onMetadataUpdate: (meta) => {
+                : "max-w-5xl xl:max-w-6xl w-[92vw]"}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(ui_1.Drawer.Header, { className: "border-b border-ui-border-base pb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between w-full", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Drawer.Title, { className: "text-base font-semibold text-ui-fg-base", children: category.name }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Description, { className: "text-xs text-ui-fg-muted mt-0.5", children: ["Tier ", category.tier, " \u2022 ID: ", category.id] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setIsFullScreen((prev) => !prev), className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors cursor-pointer", title: isFullScreen ? "Exit Fullscreen" : "Expand to Full Page Modal", children: [(0, jsx_runtime_1.jsx)(icons_1.ArrowsPointingOut, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: isFullScreen ? "Exit Fullscreen" : "Full Page" })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => window.open(`/app/categories/${category.id}`, "_blank"), className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors cursor-pointer", title: "Open full category details page in a new tab", children: [(0, jsx_runtime_1.jsx)("span", { children: "Open Full Page" }), (0, jsx_runtime_1.jsx)(icons_1.ArrowUpRightMicro, { className: "w-3.5 h-3.5" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 mt-3 border-b border-ui-border-base -mb-3", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab("general"), className: `px-3 py-1.5 text-xs font-medium border-b-2 transition-colors cursor-pointer ${activeTab === "general"
+                                            ? "border-blue-600 text-blue-600 font-semibold"
+                                            : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"}`, children: "General & Ranking" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab("products"), className: `px-3 py-1.5 text-xs font-medium border-b-2 transition-colors cursor-pointer ${activeTab === "products"
+                                            ? "border-blue-600 text-blue-600 font-semibold"
+                                            : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"}`, children: "Products Management" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab("channels"), className: `px-3 py-1.5 text-xs font-medium border-b-2 transition-colors cursor-pointer ${activeTab === "channels"
+                                            ? "border-blue-600 text-blue-600 font-semibold"
+                                            : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"}`, children: "Storefronts & Media" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setActiveTab("youtube"), className: `flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border-b-2 transition-colors cursor-pointer ${activeTab === "youtube"
+                                            ? "border-blue-600 text-blue-600 font-semibold"
+                                            : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"}`, children: [(0, jsx_runtime_1.jsx)("span", { children: "YouTube Videos" }), youtubeUrls.length > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "px-1.5 py-0.2 rounded-full text-[10px] font-bold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200", children: youtubeUrls.length }))] })] })] }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Body, { className: "overflow-y-auto flex-1 p-6", children: [activeTab === "general" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-name", className: "text-xs font-semibold", children: "Category Name *" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "edit-name", value: name, onChange: (e) => setName(e.target.value), required: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-handle", className: "text-xs font-semibold", children: "Handle (URL Slug)" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "edit-handle", value: handle, onChange: (e) => setHandle(e.target.value), placeholder: "e.g. rayon-embroidery-thread" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5 p-3 rounded-xl border border-ui-border-base bg-ui-bg-subtle/50", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-rank", className: "text-xs font-semibold", children: "Storefront Ranking (Sort Order)" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-mono text-ui-fg-muted", children: "Controls Storefront 2 & Monfil" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Input, { id: "edit-rank", type: "number", size: "small", value: rank, onChange: (e) => setRank(Number(e.target.value)), className: "w-24" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setRank((r) => Math.max(0, r - 1)), className: "px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors cursor-pointer", title: "Move Earlier in Storefront", children: "\u2191 Earlier" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setRank((r) => r + 1), className: "px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors cursor-pointer", title: "Move Later in Storefront", children: "\u2193 Later" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setRank(0), className: "px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors cursor-pointer", title: "Set as First Category", children: "Top (#0)" })] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-[11px] text-ui-fg-muted leading-relaxed", children: "Categories are sorted by rank ASC (0, 1, 2...). Lower numbers appear first on your storefront navigation menu." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-desc", className: "text-xs font-semibold", children: "Description" }), (0, jsx_runtime_1.jsx)(ui_1.Textarea, { id: "edit-desc", value: description, onChange: (e) => setDescription(e.target.value), rows: 3 })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between pt-2 border-t border-ui-border-base", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Active Status" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Visible to shoppers on enabled storefronts" })] }), (0, jsx_runtime_1.jsx)(ui_1.Switch, { checked: isActive, onCheckedChange: setIsActive })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Internal Only" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Hidden from public storefront navigation" })] }), (0, jsx_runtime_1.jsx)(ui_1.Switch, { checked: isInternal, onCheckedChange: setIsInternal })] }), (0, jsx_runtime_1.jsx)("div", { className: "pt-3 border-t border-ui-border-base", children: (0, jsx_runtime_1.jsxs)(ui_1.Button, { type: "button", variant: "danger", size: "small", onClick: handleDelete, isLoading: isDeleting, className: "w-full flex items-center justify-center gap-1.5", children: [(0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: "Delete Category" })] }) })] })), activeTab === "products" && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3", children: (0, jsx_runtime_1.jsx)(category_products_manager_1.CategoryProductsManager, { categoryId: category.id, categoryName: category.name, initialMetadata: currentMetadata, onMetadataUpdate: (meta) => {
                                         setCurrentMetadata(meta);
                                     } }) })), activeTab === "channels" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Storefront Visibility" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Designate which storefront sales channels display this category." }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 mt-1", children: salesChannels.map((channel) => {
                                                     const isChecked = selectedChannels.includes(channel.id);
@@ -395,16 +465,16 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
                                                                                     e.preventDefault();
                                                                                     e.stopPropagation();
                                                                                     handleSetThumbnail(img);
-                                                                                }, className: "w-full py-0.5 bg-white text-neutral-900 rounded text-[9px] font-semibold hover:bg-neutral-100 transition-colors shadow-xs text-center", children: "Set Thumbnail" })), !isBanner && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                                                                                }, className: "w-full py-0.5 bg-white text-neutral-900 rounded text-[9px] font-semibold hover:bg-neutral-100 transition-colors shadow-xs text-center cursor-pointer", children: "Set Thumbnail" })), !isBanner && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
                                                                                     e.preventDefault();
                                                                                     e.stopPropagation();
                                                                                     handleSetBanner(img);
-                                                                                }, className: "w-full py-0.5 bg-emerald-500 text-white rounded text-[9px] font-semibold hover:bg-emerald-600 transition-colors shadow-xs text-center", children: "Set as Banner" })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                                                                                }, className: "w-full py-0.5 bg-emerald-600 text-white rounded text-[9px] font-semibold hover:bg-emerald-700 transition-colors shadow-xs text-center cursor-pointer", children: "Set as Banner" })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
                                                                                     e.preventDefault();
                                                                                     e.stopPropagation();
                                                                                     handleDeleteImage(img);
-                                                                                }, className: "p-1 bg-rose-600 text-white rounded hover:bg-rose-700 transition-colors", title: "Remove image", children: (0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3.5 h-3.5" }) })] })] }, img.id || img.url || idx));
-                                                        }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5 mt-1 pt-2 border-t border-ui-border-base/50", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "manual-image-url", className: "text-[11px] text-ui-fg-muted font-medium", children: "Or paste an external image URL to add to gallery" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Input, { id: "manual-image-url", size: "small", value: manualImageUrl, onChange: (e) => setManualImageUrl(e.target.value), placeholder: "https://example.com/banner-or-thumbnail.jpg", className: "flex-1 text-xs", onKeyDown: (e) => {
+                                                                                }, className: "w-full py-0.5 bg-rose-600 text-white rounded text-[9px] font-semibold hover:bg-rose-700 transition-colors shadow-xs text-center cursor-pointer", children: "Delete" })] })] }, img.id || img.url || idx));
+                                                        }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5 mt-2 p-3 rounded-xl border border-ui-border-base bg-ui-bg-subtle/30", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold text-ui-fg-base", children: "External Image URL (CDN / Manual)" }), (0, jsx_runtime_1.jsx)("p", { className: "text-[11px] text-ui-fg-muted", children: "Or paste a direct image URL (S3, Cloudinary, Imgur, Supabase) to link without uploading." }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [(0, jsx_runtime_1.jsx)(ui_1.Input, { size: "small", type: "url", placeholder: "https://example.com/category-image.jpg", value: manualImageUrl, onChange: (e) => setManualImageUrl(e.target.value), className: "text-xs flex-1", onKeyDown: (e) => {
                                                                     if (e.key === "Enter") {
                                                                         e.preventDefault();
                                                                         handleAddManualImage();
@@ -417,7 +487,7 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
                                                 } }), (0, jsx_runtime_1.jsxs)(ui_1.Button, { size: "small", type: "button", variant: "secondary", onClick: handleAddYoutube, className: "flex items-center gap-1 text-xs flex-shrink-0", children: [(0, jsx_runtime_1.jsx)(icons_1.Plus, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: "Add Video" })] })] }), youtubeUrls.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "p-8 text-center text-xs text-ui-fg-muted border border-dashed border-ui-border-base rounded-xl", children: "No demonstration videos attached yet." })) : ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-3", children: youtubeUrls.map((url) => {
                                             const id = extractYouTubeVideoId(url);
                                             const thumb = id ? `https://img.youtube.com/vi/${id}/hqdefault.jpg` : null;
-                                            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col border border-ui-border-base rounded-xl overflow-hidden bg-ui-bg-subtle/40 shadow-xs", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative aspect-video bg-black/80 overflow-hidden flex items-center justify-center", children: [thumb ? ((0, jsx_runtime_1.jsx)("img", { src: thumb, alt: "YouTube Preview", className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-xs text-white", children: "Video" })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => handleRemoveYoutube(url), className: "absolute top-1.5 right-1.5 p-1 bg-black/70 hover:bg-rose-600 text-white rounded-full transition-colors", title: "Remove video", children: (0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3 h-3" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-ui-fg-muted truncate block font-mono", title: url, children: url }) })] }, url));
-                                        }) }))] }))] }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Footer, { className: "flex justify-end gap-2 px-6 py-4 border-t border-ui-border-base", children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { type: "button", variant: "secondary", size: "small", onClick: () => onOpenChange(false), disabled: isSubmitting || isDeleting, children: "Close" }), (0, jsx_runtime_1.jsx)(ui_1.Button, { type: "submit", size: "small", isLoading: isSubmitting, disabled: isSubmitting || !name.trim() || isDeleting, children: "Save Category" })] })] }) }) }));
+                                            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col border border-ui-border-base rounded-xl overflow-hidden bg-ui-bg-subtle/40 shadow-xs", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative aspect-video bg-black/80 overflow-hidden flex items-center justify-center", children: [thumb ? ((0, jsx_runtime_1.jsx)("img", { src: thumb, alt: "YouTube Preview", className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-xs text-white", children: "Video" })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => handleRemoveYoutube(url), className: "absolute top-1.5 right-1.5 p-1 bg-black/70 hover:bg-rose-600 text-white rounded-full transition-colors cursor-pointer", title: "Remove video", children: (0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3 h-3" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-ui-fg-muted truncate block font-mono", title: url, children: url }) })] }, url));
+                                        }) }))] }))] }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Footer, { className: "flex justify-end gap-2 px-6 py-4 border-t border-ui-border-base", children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { type: "button", variant: "secondary", size: "small", onClick: () => onOpenChange(false), disabled: isSubmitting || isDeleting, children: "Close" }), (0, jsx_runtime_1.jsx)(ui_1.Button, { type: "button", size: "small", onClick: () => handleSubmit(), isLoading: isSubmitting, disabled: isSubmitting || !name.trim() || isDeleting, children: "Save Category" })] })] }) }) }));
 };
 exports.EditCategoryDrawer = EditCategoryDrawer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hectasquare/medusa-plugin-category-tree",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "AAA Interactive Category Tree & Mind Map for Medusa v2 Admin with drag-and-drop reparenting, tier indicators, superscript ranks, multi-storefront filtering, and NotebookLM-style subtree collapse.",
   "author": "HectaSquare Team",
   "license": "Apache-2.0",

package/src/admin/components/category-tree/category-products-manager.tsx

@@ -10,6 +10,7 @@ import {
   MagnifyingGlass,
   CheckMini,
   Sparkles,
+  ArrowUpRightMicro,
 } from "@medusajs/icons"
 import { sdk } from "../../lib/sdk"
 
@@ -166,7 +167,7 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
     await persistProductConfig(currentOrder, next)
   }
 
-  // Remove products from category
+  // Remove products from category using official Medusa v2 JS SDK method
   const handleRemoveProducts = async (idsToRemove: string[]) => {
     if (idsToRemove.length === 0) return
     const msg =
@@ -177,9 +178,8 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
 
     setIsRemoving(true)
     try {
-      await sdk.client.fetch(`/admin/product-categories/${categoryId}/products`, {
-        method: "POST",
-        body: { remove: idsToRemove },
+      await sdk.admin.productCategory.updateProducts(categoryId, {
+        remove: idsToRemove,
       })
       toast.success(`Removed ${idsToRemove.length} product(s) from category`)
       setSelectedIds(new Set())
@@ -224,15 +224,15 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
     }
   }, [focusModalOpen, searchQuery, catalogPage, searchCatalog])
 
+  // Save added products using official Medusa v2 JS SDK method
   const handleSaveAddedProducts = async () => {
     const idsToAdd = Array.from(catalogSelectedIds)
     if (idsToAdd.length === 0) return
 
     setIsAdding(true)
     try {
-      await sdk.client.fetch(`/admin/product-categories/${categoryId}/products`, {
-        method: "POST",
-        body: { add: idsToAdd },
+      await sdk.admin.productCategory.updateProducts(categoryId, {
+        add: idsToAdd,
       })
       toast.success(`Added ${idsToAdd.length} product(s) to ${categoryName}`)
       setFocusModalOpen(false)
@@ -267,7 +267,11 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
         <div className="flex items-center gap-1.5 p-1 rounded-lg bg-ui-bg-subtle border border-ui-border-base">
           <button
             type="button"
-            onClick={() => setActiveView("all")}
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              setActiveView("all")
+            }}
             className={`px-2.5 py-1 text-xs font-medium rounded-md transition-colors ${
               activeView === "all"
                 ? "bg-ui-bg-base text-ui-fg-base shadow-2xs font-semibold"
@@ -278,7 +282,11 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
           </button>
           <button
             type="button"
-            onClick={() => setActiveView("top_sellers")}
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              setActiveView("top_sellers")
+            }}
             className={`flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-md transition-colors ${
               activeView === "top_sellers"
                 ? "bg-amber-500/10 text-amber-700 dark:text-amber-400 font-semibold"
@@ -293,10 +301,15 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
         <div className="flex items-center gap-2">
           {selectedIds.size > 0 && (
             <Button
+              type="button"
               size="small"
               variant="danger"
               disabled={isRemoving}
-              onClick={() => handleRemoveProducts(Array.from(selectedIds))}
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                handleRemoveProducts(Array.from(selectedIds))
+              }}
               className="flex items-center gap-1 text-xs"
             >
               <Trash className="w-3.5 h-3.5" />
@@ -305,9 +318,12 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
           )}
 
           <Button
+            type="button"
             size="small"
             variant="secondary"
-            onClick={() => {
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
               setCatalogSelectedIds(new Set())
               setSearchQuery("")
               setCatalogPage(0)
@@ -336,9 +352,17 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
             </p>
             {activeView === "all" && (
               <Button
+                type="button"
                 size="small"
                 variant="secondary"
-                onClick={() => setFocusModalOpen(true)}
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  setCatalogSelectedIds(new Set())
+                  setSearchQuery("")
+                  setCatalogPage(0)
+                  setFocusModalOpen(true)
+                }}
                 className="flex items-center gap-1 text-xs"
               >
                 <Plus className="w-3.5 h-3.5" />
@@ -435,20 +459,33 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
                       </div>
                     </td>
 
-                    {/* Product Thumbnail & Title */}
+                    {/* Product Thumbnail & Title (Clickable link to Medusa Admin product page) */}
                     <td className="py-2.5 px-3">
                       <div className="flex items-center gap-2.5 min-w-0">
-                        <div className="w-9 h-9 rounded-md border border-ui-border-base overflow-hidden bg-ui-bg-subtle flex-shrink-0 flex items-center justify-center">
+                        <a
+                          href={`/app/products/${p.id}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="w-9 h-9 rounded-md border border-ui-border-base overflow-hidden bg-ui-bg-subtle flex-shrink-0 flex items-center justify-center hover:opacity-80 transition-opacity"
+                          title={`Open ${p.title} in new tab`}
+                        >
                           {p.thumbnail ? (
                             <img src={p.thumbnail} alt={p.title} className="w-full h-full object-cover" />
                           ) : (
                             <span className="text-[9px] text-ui-fg-muted">IMG</span>
                           )}
-                        </div>
+                        </a>
                         <div className="flex flex-col min-w-0">
-                          <span className="font-semibold text-ui-fg-base truncate leading-snug" title={p.title}>
-                            {p.title}
-                          </span>
+                          <a
+                            href={`/app/products/${p.id}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="font-semibold text-ui-fg-base hover:text-ui-fg-interactive truncate leading-snug hover:underline flex items-center gap-1 group/pname"
+                            title={`Open ${p.title} in new tab`}
+                          >
+                            <span className="truncate">{p.title}</span>
+                            <ArrowUpRightMicro className="w-3.5 h-3.5 text-ui-fg-muted group-hover/pname:text-ui-fg-interactive transition-colors shrink-0" />
+                          </a>
                         </div>
                       </div>
                     </td>
@@ -462,7 +499,7 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
                           e.stopPropagation()
                           handleToggleTopSeller(p.id, p.title)
                         }}
-                        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold border transition-all ${
+                        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold border transition-all cursor-pointer ${
                           isTopSeller
                             ? "bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-300 dark:border-amber-700 shadow-2xs"
                             : "bg-ui-bg-subtle text-ui-fg-muted border-ui-border-base hover:text-amber-600 hover:border-amber-300"
@@ -470,7 +507,7 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
                         title={
                           isTopSeller
                             ? "Click to remove from Top Commercial Sellers"
-                            : "Click to mark as Top Commercial Seller (Reflected in Storefront 2)"
+                            : "Click to mark as Top Commercial Seller (Reflected on Storefront 2)"
                         }
                       >
                         <span>{isTopSeller ? "★" : "☆"}</span>
@@ -507,7 +544,7 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
                           e.stopPropagation()
                           handleRemoveProducts([p.id])
                         }}
-                        className="p-1 text-ui-fg-muted hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/50 rounded transition-colors"
+                        className="p-1 text-ui-fg-muted hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/50 rounded transition-colors cursor-pointer"
                       >
                         <Trash className="w-3.5 h-3.5" />
                       </button>
@@ -530,8 +567,12 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
             <div className="flex items-center gap-3">
               <button
                 type="button"
-                onClick={() => setFocusModalOpen(false)}
-                className="p-1.5 rounded-lg text-ui-fg-muted hover:text-ui-fg-base hover:bg-ui-bg-subtle transition-colors"
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  setFocusModalOpen(false)
+                }}
+                className="p-1.5 rounded-lg text-ui-fg-muted hover:text-ui-fg-base hover:bg-ui-bg-subtle transition-colors cursor-pointer"
                 title="Close (ESC)"
               >
                 <span className="text-sm font-bold">✕</span>
@@ -728,16 +769,24 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
               <button
                 type="button"
                 disabled={catalogPage === 0}
-                onClick={() => setCatalogPage((p) => Math.max(0, p - 1))}
-                className="px-2.5 py-1 text-xs rounded border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base disabled:opacity-40"
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  setCatalogPage((p) => Math.max(0, p - 1))
+                }}
+                className="px-2.5 py-1 text-xs rounded border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base disabled:opacity-40 cursor-pointer"
               >
                 Prev
               </button>
               <button
                 type="button"
                 disabled={(catalogPage + 1) * PAGE_SIZE >= catalogTotalCount}
-                onClick={() => setCatalogPage((p) => p + 1)}
-                className="px-2.5 py-1 text-xs rounded border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base disabled:opacity-40"
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  setCatalogPage((p) => p + 1)
+                }}
+                className="px-2.5 py-1 text-xs rounded border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base disabled:opacity-40 cursor-pointer"
               >
                 Next
               </button>
@@ -745,17 +794,27 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
               <div className="h-4 w-[1px] bg-ui-border-base mx-1" />
 
               <Button
+                type="button"
                 size="small"
                 variant="secondary"
-                onClick={() => setFocusModalOpen(false)}
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  setFocusModalOpen(false)
+                }}
               >
                 Cancel
               </Button>
               <Button
+                type="button"
                 size="small"
                 variant="primary"
                 disabled={catalogSelectedIds.size === 0 || isAdding}
-                onClick={handleSaveAddedProducts}
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  handleSaveAddedProducts()
+                }}
                 className="flex items-center gap-1 text-xs min-w-[70px] justify-center"
               >
                 <CheckMini className="w-3.5 h-3.5" />

package/src/admin/components/category-tree/edit-category-drawer.tsx

@@ -122,8 +122,13 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
         // Endpoint fallback
       }
 
-      // Metadata fallback: if metadata.images array exists
-      if (metadata?.images && Array.isArray(metadata.images) && metadata.images.length > 0) {
+      // Explicit metadata.images check: if metadata.images array exists (even if empty)
+      if (metadata && Array.isArray(metadata.images)) {
+        if (metadata.images.length === 0) {
+          setCategoryImages([])
+          setImageUrl("")
+          return
+        }
         setCategoryImages(metadata.images)
         const thumb = metadata.images.find((img: any) => img.type === "thumbnail") || metadata.images[0]
         if (thumb?.url) setImageUrl(thumb.url)
@@ -132,7 +137,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
 
       // Legacy fallback
       const list: Array<{ url: string; type: string; id?: string }> = []
-      const thumb = currentImageUrl || metadata?.thumbnail || metadata?.image_url
+      const thumb = metadata?.thumbnail || metadata?.image_url || currentImageUrl
       if (thumb) {
         list.push({ url: thumb, type: "thumbnail" })
       }
@@ -267,8 +272,33 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
     )
   }
 
-  // Delete category image
+  // Delete category image with immediate persistence & explicit nulls
   const handleDeleteImage = async (img: { id?: string; url: string }) => {
+    const remaining = categoryImages.filter(
+      (i) => i.url !== img.url && (img.id ? i.id !== img.id : true)
+    )
+    const nextThumb =
+      remaining.find((i) => i.type === "thumbnail") || remaining[0] || null
+    const nextBanner =
+      remaining.find((i) => i.type === "banner") ||
+      (remaining.length > 1 ? remaining.find((i) => i.url !== nextThumb?.url) : null) ||
+      null
+
+    // Update local state immediately
+    setCategoryImages(remaining)
+    setImageUrl(nextThumb ? nextThumb.url : "")
+
+    const updatedMeta: Record<string, any> = {
+      ...(currentMetadata || {}),
+      images: remaining,
+      thumbnail: nextThumb ? nextThumb.url : null,
+      image_url: nextThumb ? nextThumb.url : null,
+      banner: nextBanner ? nextBanner.url : null,
+      image: (nextBanner?.url || nextThumb?.url) || null,
+    }
+    setCurrentMetadata(updatedMeta)
+
+    // Call backend endpoint if DB relation exists
     if (img.id) {
       try {
         await sdk.client.fetch(`/admin/categories/${category.id}/images/batch`, {
@@ -278,20 +308,27 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
             ids: [img.id],
           },
         })
-      } catch {
-        // Fallback
+      } catch (err: any) {
+        console.warn("Could not delete from backend images endpoint:", err)
       }
     }
-    setCategoryImages((prev) =>
-      prev.filter((i) => i.url !== img.url && (img.id ? i.id !== img.id : true))
-    )
-    if (imageUrl === img.url) {
-      const remaining = categoryImages.filter(
-        (i) => i.url !== img.url && (img.id ? i.id !== img.id : true)
-      )
-      setImageUrl(remaining[0]?.url || "")
+
+    // Immediately persist metadata changes to Medusa
+    try {
+      await sdk.admin.productCategory.update(category.id, {
+        metadata: updatedMeta,
+      })
+      const updatedCat: CategoryTreeNode = {
+        ...category,
+        image_url: nextThumb ? nextThumb.url : "",
+        metadata: updatedMeta,
+      }
+      onSuccess(updatedCat)
+      toast.success("Image removed and changes saved")
+    } catch (err: any) {
+      console.warn("Could not immediately update category metadata on delete:", err)
+      toast.info("Image removed from gallery (remember to save)")
     }
-    toast.info("Image removed")
   }
 
   if (!category) return null
@@ -304,7 +341,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
     )
   }
 
-  const handleAddYoutube = () => {
+  const handleAddYoutube = async () => {
     const raw = newYoutubeInput.trim()
     if (!raw) return
     const id = extractYouTubeVideoId(raw)
@@ -317,17 +354,57 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
       toast.error("Video already added")
       return
     }
-    setYoutubeUrls((prev) => [...prev, cleanUrl])
+    const nextUrls = [...youtubeUrls, cleanUrl]
+    setYoutubeUrls(nextUrls)
     setNewYoutubeInput("")
-    toast.success("YouTube video added")
+
+    const updatedMeta = {
+      ...(currentMetadata || {}),
+      youtube_urls: nextUrls,
+      youtube_url: nextUrls[0] || null,
+    }
+    setCurrentMetadata(updatedMeta)
+
+    try {
+      await sdk.admin.productCategory.update(category.id, {
+        metadata: updatedMeta,
+      })
+      onSuccess({
+        ...category,
+        metadata: updatedMeta,
+      })
+      toast.success("YouTube video added and saved")
+    } catch {
+      toast.success("YouTube video added")
+    }
   }
 
-  const handleRemoveYoutube = (urlToRemove: string) => {
-    setYoutubeUrls((prev) => prev.filter((u) => u !== urlToRemove))
+  const handleRemoveYoutube = async (urlToRemove: string) => {
+    const nextUrls = youtubeUrls.filter((u) => u !== urlToRemove)
+    setYoutubeUrls(nextUrls)
+    const updatedMeta = {
+      ...(currentMetadata || {}),
+      youtube_urls: nextUrls,
+      youtube_url: nextUrls[0] || null,
+    }
+    setCurrentMetadata(updatedMeta)
+
+    try {
+      await sdk.admin.productCategory.update(category.id, {
+        metadata: updatedMeta,
+      })
+      onSuccess({
+        ...category,
+        metadata: updatedMeta,
+      })
+      toast.success("Video removed and changes saved")
+    } catch {
+      toast.info("Video removed (remember to save)")
+    }
   }
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
+  const handleSubmit = async (e?: React.FormEvent) => {
+    if (e && e.preventDefault) e.preventDefault()
     if (!name.trim()) {
       toast.error("Category name is required")
       return
@@ -337,26 +414,23 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
     try {
       const thumbImg =
         categoryImages.find((img) => img.type === "thumbnail") ||
-        categoryImages[0]
+        categoryImages[0] ||
+        null
       const bannerImg =
         categoryImages.find((img) => img.type === "banner") ||
-        categoryImages.find((img) => img.url !== thumbImg?.url)
+        (categoryImages.length > 1 ? categoryImages.find((img) => img.url !== thumbImg?.url) : null) ||
+        null
 
       const updatedMetadata: Record<string, any> = {
         ...(currentMetadata || {}),
         sales_channels: selectedChannels,
         youtube_urls: youtubeUrls,
+        youtube_url: youtubeUrls[0] || null,
         images: categoryImages,
-      }
-      if (thumbImg?.url) {
-        updatedMetadata.thumbnail = thumbImg.url
-        updatedMetadata.image_url = thumbImg.url
-      }
-      if (bannerImg?.url && bannerImg.url !== thumbImg?.url) {
-        updatedMetadata.banner = bannerImg.url
-        updatedMetadata.image = bannerImg.url
-      } else if (thumbImg?.url) {
-        updatedMetadata.image = thumbImg.url
+        thumbnail: thumbImg ? thumbImg.url : null,
+        image_url: thumbImg ? thumbImg.url : null,
+        banner: bannerImg ? bannerImg.url : null,
+        image: (bannerImg?.url || thumbImg?.url) || null,
       }
 
       await sdk.admin.productCategory.update(category.id, {
@@ -374,7 +448,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
         name: name.trim(),
         handle: handle.trim(),
         description: description.trim() || null,
-        image_url: imageUrl.trim() || category.image_url,
+        image_url: thumbImg ? thumbImg.url : "",
         rank: Number(rank) || 0,
         sales_channels: selectedChannels,
         is_active: isActive,
@@ -419,7 +493,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
             : "max-w-5xl xl:max-w-6xl w-[92vw]"
         }`}
       >
-        <form onSubmit={handleSubmit} className="flex flex-col h-full">
+        <div className="flex flex-col h-full">
           <Drawer.Header className="border-b border-ui-border-base pb-3">
             <div className="flex items-center justify-between w-full">
               <div>
@@ -436,7 +510,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
                 <button
                   type="button"
                   onClick={() => setIsFullScreen((prev) => !prev)}
-                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors"
+                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors cursor-pointer"
                   title={isFullScreen ? "Exit Fullscreen" : "Expand to Full Page Modal"}
                 >
                   <ArrowsPointingOut className="w-3.5 h-3.5" />
@@ -447,7 +521,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
                 <button
                   type="button"
                   onClick={() => window.open(`/app/categories/${category.id}`, "_blank")}
-                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors"
+                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors cursor-pointer"
                   title="Open full category details page in a new tab"
                 >
                   <span>Open Full Page</span>
@@ -456,59 +530,61 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
               </div>
             </div>
 
-            {/* Tab Navigation Bar */}
-            <div className="flex items-center gap-1 mt-3 border-b border-ui-border-base/50 -mb-3 pb-1">
+            {/* Sub-tab Navigation */}
+            <div className="flex items-center gap-1 mt-3 border-b border-ui-border-base -mb-3">
               <button
                 type="button"
                 onClick={() => setActiveTab("general")}
-                className={`px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${
+                className={`px-3 py-1.5 text-xs font-medium border-b-2 transition-colors cursor-pointer ${
                   activeTab === "general"
-                    ? "border-ui-border-interactive text-ui-fg-base bg-ui-bg-subtle/50"
+                    ? "border-blue-600 text-blue-600 font-semibold"
                     : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"
                 }`}
               >
                 General & Ranking
               </button>
-
               <button
                 type="button"
                 onClick={() => setActiveTab("products")}
-                className={`px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${
+                className={`px-3 py-1.5 text-xs font-medium border-b-2 transition-colors cursor-pointer ${
                   activeTab === "products"
-                    ? "border-ui-border-interactive text-ui-fg-base bg-ui-bg-subtle/50"
+                    ? "border-blue-600 text-blue-600 font-semibold"
                     : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"
                 }`}
               >
                 Products Management
               </button>
-
               <button
                 type="button"
                 onClick={() => setActiveTab("channels")}
-                className={`px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${
+                className={`px-3 py-1.5 text-xs font-medium border-b-2 transition-colors cursor-pointer ${
                   activeTab === "channels"
-                    ? "border-ui-border-interactive text-ui-fg-base bg-ui-bg-subtle/50"
+                    ? "border-blue-600 text-blue-600 font-semibold"
                     : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"
                 }`}
               >
                 Storefronts & Media
               </button>
-
               <button
                 type="button"
                 onClick={() => setActiveTab("youtube")}
-                className={`px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${
+                className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border-b-2 transition-colors cursor-pointer ${
                   activeTab === "youtube"
-                    ? "border-ui-border-interactive text-ui-fg-base bg-ui-bg-subtle/50"
+                    ? "border-blue-600 text-blue-600 font-semibold"
                     : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"
                 }`}
               >
-                YouTube Videos ({youtubeUrls.length})
+                <span>YouTube Videos</span>
+                {youtubeUrls.length > 0 && (
+                  <span className="px-1.5 py-0.2 rounded-full text-[10px] font-bold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                    {youtubeUrls.length}
+                  </span>
+                )}
               </button>
             </div>
           </Drawer.Header>
 
-          <Drawer.Body className="flex flex-col gap-4 overflow-y-auto px-6 py-4 flex-1">
+          <Drawer.Body className="overflow-y-auto flex-1 p-6">
             {/* TAB 1: GENERAL & RANKING */}
             {activeTab === "general" && (
               <div className="flex flex-col gap-4">
@@ -518,25 +594,26 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
                   </Label>
                   <Input
                     id="edit-name"
-                    size="small"
                     value={name}
                     onChange={(e) => setName(e.target.value)}
+                    required
                   />
                 </div>
 
                 <div className="flex flex-col gap-1.5">
                   <Label htmlFor="edit-handle" className="text-xs font-semibold">
-                    Handle (URL slug)
+                    Handle (URL Slug)
                   </Label>
                   <Input
                     id="edit-handle"
-                    size="small"
                     value={handle}
                     onChange={(e) => setHandle(e.target.value)}
+                    placeholder="e.g. rayon-embroidery-thread"
                   />
                 </div>
 
-                <div className="flex flex-col gap-1.5 p-3 rounded-lg bg-ui-bg-subtle border border-ui-border-base">
+                {/* Direct Rank Modifier */}
+                <div className="flex flex-col gap-1.5 p-3 rounded-xl border border-ui-border-base bg-ui-bg-subtle/50">
                   <div className="flex items-center justify-between">
                     <Label htmlFor="edit-rank" className="text-xs font-semibold">
                       Storefront Ranking (Sort Order)
@@ -558,7 +635,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
                       <button
                         type="button"
                         onClick={() => setRank((r) => Math.max(0, r - 1))}
-                        className="px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors"
+                        className="px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors cursor-pointer"
                         title="Move Earlier in Storefront"
                       >
                         ↑ Earlier
@@ -566,7 +643,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
                       <button
                         type="button"
                         onClick={() => setRank((r) => r + 1)}
-                        className="px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors"
+                        className="px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors cursor-pointer"
                         title="Move Later in Storefront"
                       >
                         ↓ Later
@@ -574,7 +651,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
                       <button
                         type="button"
                         onClick={() => setRank(0)}
-                        className="px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors"
+                        className="px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors cursor-pointer"
                         title="Set as First Category"
                       >
                         Top (#0)
@@ -786,7 +863,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
                                       e.stopPropagation()
                                       handleSetThumbnail(img)
                                     }}
-                                    className="w-full py-0.5 bg-white text-neutral-900 rounded text-[9px] font-semibold hover:bg-neutral-100 transition-colors shadow-xs text-center"
+                                    className="w-full py-0.5 bg-white text-neutral-900 rounded text-[9px] font-semibold hover:bg-neutral-100 transition-colors shadow-xs text-center cursor-pointer"
                                   >
                                     Set Thumbnail
                                   </button>
@@ -799,7 +876,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
                                       e.stopPropagation()
                                       handleSetBanner(img)
                                     }}
-                                    className="w-full py-0.5 bg-emerald-500 text-white rounded text-[9px] font-semibold hover:bg-emerald-600 transition-colors shadow-xs text-center"
+                                    className="w-full py-0.5 bg-emerald-600 text-white rounded text-[9px] font-semibold hover:bg-emerald-700 transition-colors shadow-xs text-center cursor-pointer"
                                   >
                                     Set as Banner
                                   </button>
@@ -811,10 +888,9 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
                                     e.stopPropagation()
                                     handleDeleteImage(img)
                                   }}
-                                  className="p-1 bg-rose-600 text-white rounded hover:bg-rose-700 transition-colors"
-                                  title="Remove image"
+                                  className="w-full py-0.5 bg-rose-600 text-white rounded text-[9px] font-semibold hover:bg-rose-700 transition-colors shadow-xs text-center cursor-pointer"
                                 >
-                                  <Trash className="w-3.5 h-3.5" />
+                                  Delete
                                 </button>
                               </div>
                             </div>
@@ -824,19 +900,22 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
                     </div>
                   )}
 
-                  {/* Manual URL input to add directly into the gallery */}
-                  <div className="flex flex-col gap-1.5 mt-1 pt-2 border-t border-ui-border-base/50">
-                    <Label htmlFor="manual-image-url" className="text-[11px] text-ui-fg-muted font-medium">
-                      Or paste an external image URL to add to gallery
+                  {/* Manual / External Image URL Entry */}
+                  <div className="flex flex-col gap-1.5 mt-2 p-3 rounded-xl border border-ui-border-base bg-ui-bg-subtle/30">
+                    <Label className="text-xs font-semibold text-ui-fg-base">
+                      External Image URL (CDN / Manual)
                     </Label>
-                    <div className="flex items-center gap-2">
+                    <p className="text-[11px] text-ui-fg-muted">
+                      Or paste a direct image URL (S3, Cloudinary, Imgur, Supabase) to link without uploading.
+                    </p>
+                    <div className="flex items-center gap-2 mt-1">
                       <Input
-                        id="manual-image-url"
                         size="small"
+                        type="url"
+                        placeholder="https://example.com/category-image.jpg"
                         value={manualImageUrl}
                         onChange={(e) => setManualImageUrl(e.target.value)}
-                        placeholder="https://example.com/banner-or-thumbnail.jpg"
-                        className="flex-1 text-xs"
+                        className="text-xs flex-1"
                         onKeyDown={(e) => {
                           if (e.key === "Enter") {
                             e.preventDefault()
@@ -922,7 +1001,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
                             <button
                               type="button"
                               onClick={() => handleRemoveYoutube(url)}
-                              className="absolute top-1.5 right-1.5 p-1 bg-black/70 hover:bg-rose-600 text-white rounded-full transition-colors"
+                              className="absolute top-1.5 right-1.5 p-1 bg-black/70 hover:bg-rose-600 text-white rounded-full transition-colors cursor-pointer"
                               title="Remove video"
                             >
                               <Trash className="w-3 h-3" />
@@ -953,15 +1032,16 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
               Close
             </Button>
             <Button
-              type="submit"
+              type="button"
               size="small"
+              onClick={() => handleSubmit()}
               isLoading={isSubmitting}
               disabled={isSubmitting || !name.trim() || isDeleting}
             >
               Save Category
             </Button>
           </Drawer.Footer>
-        </form>
+        </div>
       </Drawer.Content>
     </Drawer>
   )