@fluid-app/portal-sdk 0.1.199 → 0.1.201

package/dist/{PortalContentApiProvider-CPnqELEX.cjs → PortalContentApiProvider-BDbrZCyI.cjs}

@@ -619,7 +619,7 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 	}, [handleIntersect]);
 	const products = (0, react.useMemo)(() => {
 		if (!data) return [];
-		if (usePortal) return data?.pages.flatMap((page) => page.products.map((p) => ({
+		if (usePortal) return data?.pages.flatMap((page) => (page.products ?? []).map((p) => ({
 			id: p.id ?? 0,
 			title: p.name ?? "",
 			image_url: p.images?.[0]?.url ?? null,
@@ -8939,6 +8939,7 @@ function PlaylistsListingScreen(_props) {
 	const [sortValue, setSortValue] = (0, react.useState)("title");
 	const [ownerFilter, setOwnerFilter] = (0, react.useState)("all");
 	const [selectedIds, setSelectedIds] = (0, react.useState)(/* @__PURE__ */ new Set());
+	const [pendingDeleteId, setPendingDeleteId] = (0, react.useState)(null);
 	(0, react.useEffect)(() => {
 		setSelectedIds(/* @__PURE__ */ new Set());
 	}, [ownerFilter]);
@@ -9070,27 +9071,31 @@ function PlaylistsListingScreen(_props) {
 	const handleEdit = (0, react.useCallback)((playlistId) => {
 		navigate(`playlists/${playlistId}/edit`);
 	}, [navigate]);
-	const handleDelete = (0, react.useCallback)(async (playlistId) => {
-		if (!onDeletePlaylist) return;
-		if (!window.confirm("Are you sure you want to delete this playlist?")) return;
-		try {
-			await onDeletePlaylist(playlistId);
+	const { mutate: deletePlaylist, isPending: isDeleting } = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (playlistId) => {
+			if (!onDeletePlaylist) return Promise.reject(/* @__PURE__ */ new Error("Delete not available"));
+			return onDeletePlaylist(playlistId);
+		},
+		onSuccess: () => {
 			queryClient.invalidateQueries({ queryKey: shareablesKeys.playlists.all });
 			showToast({
 				title: "Playlist deleted",
 				type: "success"
 			});
-		} catch {
+			setPendingDeleteId(null);
+		},
+		onError: (error) => {
 			showToast({
 				title: "Failed to delete playlist",
-				type: "error"
+				type: "error",
+				error
 			});
+			setPendingDeleteId(null);
 		}
-	}, [
-		onDeletePlaylist,
-		queryClient,
-		showToast
-	]);
+	});
+	const confirmDelete = (0, react.useCallback)(() => {
+		if (pendingDeleteId != null) deletePlaylist(pendingDeleteId);
+	}, [pendingDeleteId, deletePlaylist]);
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -9178,7 +9183,7 @@ function PlaylistsListingScreen(_props) {
 						onSelectionChange: (selected) => handleToggleSelection(playlist.id, selected),
 						onToggleFavorite: onToggleFavorite ? () => handleFavorite(playlist.id) : void 0,
 						onEdit: () => handleEdit(playlist.id),
-						onDelete: onDeletePlaylist ? () => void handleDelete(playlist.id) : void 0
+						onDelete: onDeletePlaylist ? () => setPendingDeleteId(playlist.id) : void 0
 					}, playlist.id);
 				})
 			}),
@@ -9193,6 +9198,24 @@ function PlaylistsListingScreen(_props) {
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 				className: "bg-destructive/10 text-destructive rounded-lg px-3 py-2",
 				children: ["Error: ", error.message]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
+				open: pendingDeleteId !== null,
+				onOpenChange: (open) => {
+					if (!open && !isDeleting) setPendingDeleteId(null);
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: "Delete this playlist?" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogDescription, { children: "This removes the playlist from your library. Shared links that point to it will stop working." })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
+					disabled: isDeleting,
+					children: "Cancel"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogAction, {
+					onClick: (e) => {
+						e.preventDefault();
+						confirmDelete();
+					},
+					disabled: isDeleting,
+					className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+					children: isDeleting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Delete"
+				})] })] })
 			})
 		]
 	});
@@ -9278,7 +9301,7 @@ function TaggedProductsList({ products, onProductClick }) {
 					const displayPrice = resolvePrice(product);
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						onClick: (e) => handleProductClick(product.id, e),
-						className: "group bg-muted hover:bg-muted-600 flex w-[168px] shrink-0 flex-col gap-2 rounded-lg p-3 text-left transition-all",
+						className: "group bg-muted hover:bg-muted/60 flex w-[168px] shrink-0 flex-col gap-2 rounded-lg p-3 text-left transition-all",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "bg-background relative h-[168px] w-full overflow-hidden rounded-lg",
 							children: renderImage({
@@ -9380,7 +9403,7 @@ function PlaylistItemsList({ items, onSelectItem, selectedItemIndex = 0, onNavig
 				const fileType = getFileType(item.media_format ?? relateable?.media_format, item.image_url ?? relateable?.image_url);
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					onClick: () => handleCardClick(index),
-					className: `hover:bg-muted-600 flex w-full cursor-pointer items-start gap-3 rounded-lg p-3 text-left transition-all ${index === selectedItemIndex ? "bg-muted-600" : "bg-muted"}`,
+					className: `hover:bg-muted/60 flex w-full cursor-pointer items-start gap-3 rounded-lg p-3 text-left transition-all ${index === selectedItemIndex ? "bg-muted/60" : "bg-muted"}`,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "bg-background relative h-[104px] w-[104px] shrink-0 overflow-hidden rounded-lg",
 						children: [renderImage({
@@ -9460,11 +9483,9 @@ function PlaylistItemsList({ items, onSelectItem, selectedItemIndex = 0, onNavig
 const DEFAULT_IMAGE$1 = "https://assets.fluid.app/fluid-admin/images/we-commerce/we-commerce.png";
 function PlaylistDetailScreen({ playlistId, onNavigate }) {
 	const api = useShareablesApi();
-	const { navigate, showToast, onDeletePlaylist, user, readOnly } = useShareablesUI();
+	const { navigate, user, readOnly } = useShareablesUI();
 	const [isDescriptionExpanded, setIsDescriptionExpanded] = (0, react.useState)(false);
 	const [selectedPlaylistItemIndex, setSelectedPlaylistItemIndex] = (0, react.useState)(0);
-	const [isDeleteOpen, setIsDeleteOpen] = (0, react.useState)(false);
-	const [isDeleting, setIsDeleting] = (0, react.useState)(false);
 	const { data: playlistResponse, isLoading } = (0, _tanstack_react_query.useQuery)({
 		queryKey: shareablesKeys.playlists.detail(Number(playlistId)),
 		queryFn: () => api.playlists.getPlaylistById(Number(playlistId))
@@ -9475,25 +9496,19 @@ function PlaylistDetailScreen({ playlistId, onNavigate }) {
 	const displayTitle = playlist?.title || "";
 	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => {
 		if (!canEdit) return null;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 				variant: "outline",
 				size: "sm",
 				onClick: () => navigate(`playlists/${playlistId}/edit`),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "mr-1 h-3.5 w-3.5" }), "Edit"]
-			}), onDeletePlaylist && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-				variant: "destructive",
-				size: "sm",
-				onClick: () => setIsDeleteOpen(true),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "mr-1 h-3.5 w-3.5" }), "Delete"]
-			})]
+			})
 		});
 	}, [
 		canEdit,
 		navigate,
-		playlistId,
-		onDeletePlaylist
+		playlistId
 	]));
 	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.BreadcrumbList, {
 		className: "text-lg",
@@ -9513,31 +9528,6 @@ function PlaylistDetailScreen({ playlistId, onNavigate }) {
 			}) })
 		]
 	}) }), [displayTitle, navigate]));
-	const handleDelete = (0, react.useCallback)(async () => {
-		if (!onDeletePlaylist) return;
-		setIsDeleting(true);
-		try {
-			await onDeletePlaylist(Number(playlistId));
-			showToast({
-				title: "Playlist deleted successfully",
-				type: "success"
-			});
-			navigate("playlists");
-		} catch {
-			showToast({
-				title: "Failed to delete playlist",
-				type: "error"
-			});
-		} finally {
-			setIsDeleting(false);
-			setIsDeleteOpen(false);
-		}
-	}, [
-		onDeletePlaylist,
-		playlistId,
-		showToast,
-		navigate
-	]);
 	const selectedPlaylistItem = playlist?.items?.[selectedPlaylistItemIndex];
 	const displayImage = selectedPlaylistItem?.image_url ?? selectedPlaylistItem?.relateable?.image_url ?? selectedPlaylistItem?.relateable?.compressed_image_url ?? DEFAULT_IMAGE$1;
 	const strippedDescription = stripTags(playlist?.description || playlist?.search_engine_optimizer?.description || "");
@@ -9557,9 +9547,9 @@ function PlaylistDetailScreen({ playlistId, onNavigate }) {
 			children: "Playlist not found or failed to load."
 		})
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "flex flex-col gap-4 px-4 py-4 md:px-10 md:py-6",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "mx-auto flex w-full max-w-[480px] flex-col gap-6 md:h-[calc(100vh-140px)] md:max-w-none md:flex-row",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "aspect-square w-full md:aspect-auto md:h-full",
@@ -9627,21 +9617,7 @@ function PlaylistDetailScreen({ playlistId, onNavigate }) {
 					})
 				]
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
-			open: isDeleteOpen,
-			onOpenChange: setIsDeleteOpen,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: "Delete Playlist" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogDescription, { children: "Are you sure you want to delete this playlist? This action cannot be undone." })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-				variant: "outline",
-				onClick: () => setIsDeleteOpen(false),
-				disabled: isDeleting,
-				children: "Cancel"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-				variant: "destructive",
-				onClick: () => void handleDelete(),
-				disabled: isDeleting,
-				children: isDeleting ? "Deleting..." : "Delete"
-			})] })] })
-		})]
+		})
 	});
 }
 //#endregion
@@ -9840,19 +9816,30 @@ function PlaylistFormHeader({ playlistId, isEditMode, onSubmit, isSaving }) {
 	};
 	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-2",
-		children: [playlistId && onDeletePlaylist && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-			variant: "destructive",
-			size: "sm",
-			onClick: () => setIsDeleteOpen(true),
-			disabled: isMutating,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "mr-1 h-4 w-4" }), "Delete"]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+		children: [playlistId && onDeletePlaylist && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+				variant: "outline",
+				size: "sm",
+				className: "h-8 w-8 p-0",
+				"aria-label": "Playlist actions",
+				disabled: isMutating,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreVertical, { className: "h-4 w-4" })
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuContent, {
+			align: "end",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+				onClick: () => setIsDeleteOpen(true),
+				className: "text-destructive focus:text-destructive",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "mr-2 h-4 w-4" }), "Delete"]
+			})
+		})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
 			onClick: () => {
 				onSubmit().catch(() => {});
 			},
 			disabled: isMutating || !isDirty || !isFormValid,
 			size: "sm",
-			children: isSaving ? "Saving..." : "Save"
+			children: isSaving ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Save"
 		})]
 	}), [
 		playlistId,
@@ -9881,19 +9868,22 @@ function PlaylistFormHeader({ playlistId, isEditMode, onSubmit, isSaving }) {
 			}) })
 		]
 	}) }), [isEditMode, navigate]));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
 		open: isDeleteOpen,
-		onOpenChange: setIsDeleteOpen,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: "Delete Playlist" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogDescription, { children: "Are you sure you want to delete this playlist? This action cannot be undone." })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-			variant: "outline",
-			onClick: () => setIsDeleteOpen(false),
+		onOpenChange: (open) => {
+			if (!open && !isDeleting) setIsDeleteOpen(false);
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: "Delete this playlist?" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogDescription, { children: "This removes the playlist from your library. Shared links that point to it will stop working." })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
 			disabled: isDeleting,
 			children: "Cancel"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-			variant: "destructive",
-			onClick: () => void handleDelete(),
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogAction, {
+			onClick: (e) => {
+				e.preventDefault();
+				handleDelete();
+			},
 			disabled: isDeleting,
-			children: isDeleting ? "Deleting..." : "Delete"
+			className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			children: isDeleting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }) : "Delete"
 		})] })] })
 	});
 }
@@ -10457,6 +10447,42 @@ function PlaylistFormContent({ playlistId, playlist, isEditMode, itemsToUse, onB
 	const { form, updateField, validateForm } = usePlaylistForm();
 	const playlistTitle = form.title || "";
 	const slugValue = form.slug ?? "";
+	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.BreadcrumbList, {
+		className: "text-lg",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbLink, {
+			href: "#",
+			onClick: (e) => {
+				e.preventDefault();
+				(onBack ?? (() => navigate("playlists")))();
+			},
+			children: "Playlists"
+		}) }), isEditMode ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbSeparator, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbLink, {
+				href: "#",
+				onClick: (e) => {
+					e.preventDefault();
+					navigate(`playlists/${playlistId}`);
+				},
+				className: "block max-w-[40vw] truncate align-bottom md:max-w-[60ch]",
+				children: playlistTitle || "Playlist"
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbSeparator, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
+				className: "font-semibold",
+				children: "Edit"
+			}) })
+		] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
+			className: "font-semibold",
+			children: "New Playlist"
+		}) })] })]
+	}) }), [
+		isEditMode,
+		playlistTitle,
+		onBack,
+		navigate,
+		playlistId
+	]));
 	(0, react.useEffect)(() => {
 		const isCustomSlug = form.custom_slug || playlist?.custom_slug || false;
 		if (playlistTitle && !isCustomSlug) {
@@ -11976,4 +12002,4 @@ Object.defineProperty(exports, "usePortalContentContext", {
 	}
 });
 
-//# sourceMappingURL=PortalContentApiProvider-CPnqELEX.cjs.map
+//# sourceMappingURL=PortalContentApiProvider-BDbrZCyI.cjs.map