@btst/stack 2.12.2 → 3.0.0-rc.1

package/src/plugins/blog/client/components/forms/post-forms.tsx

@@ -20,12 +20,12 @@ import { Input } from "@workspace/ui/components/input";
 import { Switch } from "@workspace/ui/components/switch";
 import { Textarea } from "@workspace/ui/components/textarea";
 import {
-	useCreatePost,
 	useSuspensePost,
-	useUpdatePost,
 	useDeletePost,
+	usePostForm,
 } from "../../hooks/blog-hooks";
 import { slugify } from "../../../utils";
+import type { SerializedPost } from "../../../types";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -40,14 +40,22 @@ import {
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
-import { lazy, memo, Suspense, useEffect, useMemo, useState } from "react";
+import {
+	lazy,
+	memo,
+	Suspense,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
 import {
 	type FieldPath,
+	type FieldValues,
 	type SubmitHandler,
 	type UseFormReturn,
 	useForm,
 } from "react-hook-form";
-import { toast } from "sonner";
 import { z } from "zod";
 import { FeaturedImageField } from "./image-field";
 
@@ -56,12 +64,49 @@ const MarkdownEditor = lazy(() =>
 		default: module.MarkdownEditorWithOverrides,
 	})),
 );
-import { BLOG_LOCALIZATION } from "../../localization";
-import { usePluginOverrides } from "@btst/stack/context";
+import {
+	CanAccess,
+	useNotify,
+	usePluginOverrides,
+	useTranslate,
+	type TranslateFn,
+} from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
 import { EmptyList } from "../shared/empty-list";
 import { TagsMultiSelect } from "./tags-multiselect";
 
+/**
+ * Applies server-side field validation errors (from `StackError.errors`)
+ * onto react-hook-form field state, and clears previously applied server
+ * errors that are no longer present (e.g. after a resubmit fails on
+ * different fields).
+ */
+function useServerFieldErrors<T extends FieldValues>(
+	form: UseFormReturn<T>,
+	fieldErrors: Record<string, string | string[]>,
+) {
+	const appliedFieldsRef = useRef<string[]>([]);
+
+	useEffect(() => {
+		// Clear stale server errors from fields that are no longer failing
+		for (const field of appliedFieldsRef.current) {
+			if (field in fieldErrors) continue;
+			const { error } = form.getFieldState(field as FieldPath<T>);
+			if (error?.type === "server") {
+				form.clearErrors(field as FieldPath<T>);
+			}
+		}
+		appliedFieldsRef.current = Object.keys(fieldErrors);
+
+		for (const [field, message] of Object.entries(fieldErrors)) {
+			form.setError(field as FieldPath<T>, {
+				type: "server",
+				message: Array.isArray(message) ? message.join(", ") : message,
+			});
+		}
+	}, [fieldErrors, form]);
+}
+
 type CommonPostFormValues = {
 	title: string;
 	content: string;
@@ -91,13 +136,12 @@ function PostFormBody<T extends CommonPostFormValues>({
 	setFeaturedImageUploading: (uploading: boolean) => void;
 	initialSlugTouched?: boolean;
 }) {
-	const { localization } = usePluginOverrides<
-		BlogPluginOverrides,
-		Partial<BlogPluginOverrides>
-	>("blog", {
-		localization: BLOG_LOCALIZATION,
-	});
+	const t = useTranslate();
+	const { localization } = usePluginOverrides<BlogPluginOverrides>("blog");
 	const [slugTouched, setSlugTouched] = useState(initialSlugTouched);
+	const requiredAsterisk =
+		localization?.BLOG_FORMS_REQUIRED_ASTERISK ??
+		t("blog.forms.requiredAsterisk", " *");
 	const nameTitle = "title" as FieldPath<T>;
 	const nameSlug = "slug" as FieldPath<T>;
 	const nameExcerpt = "excerpt" as FieldPath<T>;
@@ -120,14 +164,16 @@ function PostFormBody<T extends CommonPostFormValues>({
 					render={({ field }) => (
 						<FormItem>
 							<FormLabel>
-								{localization.BLOG_FORMS_TITLE_LABEL}
-								<span className="text-destructive">
-									{localization.BLOG_FORMS_REQUIRED_ASTERISK}
-								</span>
+								{localization?.BLOG_FORMS_TITLE_LABEL ??
+									t("blog.forms.titleLabel", "Title")}
+								<span className="text-destructive">{requiredAsterisk}</span>
 							</FormLabel>
 							<FormControl>
 								<Input
-									placeholder={localization.BLOG_FORMS_TITLE_PLACEHOLDER}
+									placeholder={
+										localization?.BLOG_FORMS_TITLE_PLACEHOLDER ??
+										t("blog.forms.titlePlaceholder", "Enter your post title...")
+									}
 									{...field}
 									value={String(field.value ?? "")}
 									onChange={(e) => {
@@ -156,10 +202,16 @@ function PostFormBody<T extends CommonPostFormValues>({
 
 						return (
 							<FormItem>
-								<FormLabel>{localization.BLOG_FORMS_SLUG_LABEL}</FormLabel>
+								<FormLabel>
+									{localization?.BLOG_FORMS_SLUG_LABEL ??
+										t("blog.forms.slugLabel", "Slug")}
+								</FormLabel>
 								<FormControl>
 									<Input
-										placeholder={localization.BLOG_FORMS_SLUG_PLACEHOLDER}
+										placeholder={
+											localization?.BLOG_FORMS_SLUG_PLACEHOLDER ??
+											t("blog.forms.slugPlaceholder", "url-friendly-slug")
+										}
 										{...field}
 										value={currentSlug}
 										onChange={(e) => {
@@ -185,14 +237,19 @@ function PostFormBody<T extends CommonPostFormValues>({
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
 							<FormLabel>
-								{localization.BLOG_FORMS_EXCERPT_LABEL}
-								<span className="text-destructive">
-									{localization.BLOG_FORMS_REQUIRED_ASTERISK}
-								</span>
+								{localization?.BLOG_FORMS_EXCERPT_LABEL ??
+									t("blog.forms.excerptLabel", "Excerpt")}
+								<span className="text-destructive">{requiredAsterisk}</span>
 							</FormLabel>
 							<FormControl>
 								<Textarea
-									placeholder={localization.BLOG_FORMS_EXCERPT_PLACEHOLDER}
+									placeholder={
+										localization?.BLOG_FORMS_EXCERPT_PLACEHOLDER ??
+										t(
+											"blog.forms.excerptPlaceholder",
+											"Brief summary of your post...",
+										)
+									}
 									className="min-h-20"
 									value={String(field.value ?? "")}
 									onChange={field.onChange}
@@ -222,12 +279,18 @@ function PostFormBody<T extends CommonPostFormValues>({
 					name={nameTags}
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel>{localization.BLOG_FORMS_TAGS_LABEL}</FormLabel>
+							<FormLabel>
+								{localization?.BLOG_FORMS_TAGS_LABEL ??
+									t("blog.forms.tagsLabel", "Tags")}
+							</FormLabel>
 							<FormControl>
 								<TagsMultiSelect
 									value={Array.isArray(field.value) ? field.value : []}
 									onChange={field.onChange}
-									placeholder={localization.BLOG_FORMS_TAGS_PLACEHOLDER}
+									placeholder={
+										localization?.BLOG_FORMS_TAGS_PLACEHOLDER ??
+										t("blog.forms.tagsPlaceholder", "Enter your post tags...")
+									}
 								/>
 							</FormControl>
 							<FormDescription />
@@ -242,10 +305,9 @@ function PostFormBody<T extends CommonPostFormValues>({
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
 							<FormLabel>
-								{localization.BLOG_FORMS_CONTENT_LABEL}
-								<span className="text-destructive">
-									{localization.BLOG_FORMS_REQUIRED_ASTERISK}
-								</span>
+								{localization?.BLOG_FORMS_CONTENT_LABEL ??
+									t("blog.forms.contentLabel", "Content")}
+								<span className="text-destructive">{requiredAsterisk}</span>
 							</FormLabel>
 							<FormControl>
 								<Suspense
@@ -276,9 +338,16 @@ function PostFormBody<T extends CommonPostFormValues>({
 					render={({ field }) => (
 						<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
 							<div className="space-y-0.5">
-								<FormLabel>{localization.BLOG_FORMS_PUBLISHED_LABEL}</FormLabel>
+								<FormLabel>
+									{localization?.BLOG_FORMS_PUBLISHED_LABEL ??
+										t("blog.forms.publishedLabel", "Published")}
+								</FormLabel>
 								<FormDescription>
-									{localization.BLOG_FORMS_PUBLISHED_DESCRIPTION}
+									{localization?.BLOG_FORMS_PUBLISHED_DESCRIPTION ??
+										t(
+											"blog.forms.publishedDescription",
+											"Toggle to publish immediately",
+										)}
 								</FormDescription>
 							</div>
 							<FormControl>
@@ -301,7 +370,8 @@ function PostFormBody<T extends CommonPostFormValues>({
 						disabled={disabled}
 						type="button"
 					>
-						{localization.BLOG_FORMS_CANCEL_BUTTON}
+						{localization?.BLOG_FORMS_CANCEL_BUTTON ??
+							t("blog.forms.cancelButton", "Cancel")}
 					</Button>
 				</div>
 			</form>
@@ -322,6 +392,33 @@ const CustomPostUpdateSchema = PostUpdateSchema.omit({
 	publishedAt: true,
 });
 
+/**
+ * Required-field validators with translatable messages for the client-side
+ * resolver. Server-side validation (`schemas.ts`) is unchanged.
+ */
+function localizedRequiredFields(t: TranslateFn) {
+	return {
+		title: z
+			.string()
+			.min(1, t("blog.forms.validation.titleRequired", "Title is required")),
+		content: z
+			.string()
+			.min(
+				1,
+				t("blog.forms.validation.contentRequired", "Content is required"),
+			),
+		excerpt: z
+			.string()
+			.min(
+				1,
+				t("blog.forms.validation.excerptRequired", "Excerpt is required"),
+			),
+		slug: z
+			.string()
+			.min(1, t("blog.forms.validation.slugRequired", "Slug is required")),
+	};
+}
+
 type AddPostFormProps = {
 	onClose: () => void;
 	onSuccess: (post: { published: boolean }) => void;
@@ -347,44 +444,43 @@ const AddPostFormComponent = ({
 	onFormReady,
 }: AddPostFormProps) => {
 	const [featuredImageUploading, setFeaturedImageUploading] = useState(false);
-	const { localization } = usePluginOverrides<
-		BlogPluginOverrides,
-		Partial<BlogPluginOverrides>
-	>("blog", {
-		localization: BLOG_LOCALIZATION,
-	});
-
-	// const { uploadImage } = useBlogContext()
-
-	const schema = CustomPostCreateSchema;
-
-	const {
-		mutateAsync: createPost,
-		isPending: isCreatingPost,
-		error: createPostError,
-	} = useCreatePost();
+	const t = useTranslate();
+	const { localization } = usePluginOverrides<BlogPluginOverrides>("blog");
+
+	const schema = useMemo(() => {
+		const required = localizedRequiredFields(t);
+		return CustomPostCreateSchema.extend({
+			...required,
+			slug: required.slug.optional(),
+		});
+	}, [t]);
 
 	type AddPostFormValues = z.input<typeof schema>;
-	const onSubmit = async (data: AddPostFormValues) => {
-		// Auto-generate slug from title if not provided
-		const slug = data.slug || slugify(data.title);
 
-		// Wait for mutation to complete, including refresh
-		const createdPost = await createPost({
+	const resourceForm = usePostForm<AddPostFormValues>({
+		action: "create",
+		successMessage:
+			localization?.BLOG_FORMS_TOAST_CREATE_SUCCESS ??
+			t("blog.forms.toastCreateSuccess", "Post created successfully"),
+		toCreateVars: (data) => ({
 			title: data.title,
 			content: data.content,
 			excerpt: data.excerpt ?? "",
-			slug,
+			// Auto-generate slug from title if not provided
+			slug: data.slug || slugify(data.title),
 			published: data.published ?? false,
 			publishedAt: data.published ? new Date() : undefined,
 			image: data.image,
 			tags: data.tags || [],
-		});
-
-		toast.success(localization.BLOG_FORMS_TOAST_CREATE_SUCCESS);
+		}),
+		onSuccess: (createdPost) => {
+			// Navigate only after mutation (including invalidation) completes
+			onSuccess({ published: createdPost?.published ?? false });
+		},
+	});
 
-		// Navigate only after mutation completes
-		onSuccess({ published: createdPost?.published ?? false });
+	const onSubmit = async (data: AddPostFormValues) => {
+		await resourceForm.submit(data);
 	};
 
 	// For compatibility with resolver types that require certain required fields,
@@ -402,6 +498,10 @@ const AddPostFormComponent = ({
 		},
 	});
 
+	// Server-side Zod validation failures land on the matching form fields
+	useServerFieldErrors(form, resourceForm.fieldErrors);
+	const hasFieldErrors = Object.keys(resourceForm.fieldErrors).length > 0;
+
 	// Expose form instance to parent for AI context integration
 	useEffect(() => {
 		onFormReady?.(form);
@@ -413,13 +513,15 @@ const AddPostFormComponent = ({
 			form={form}
 			onSubmit={onSubmit}
 			submitLabel={
-				isCreatingPost
-					? localization.BLOG_FORMS_SUBMIT_CREATE_PENDING
-					: localization.BLOG_FORMS_SUBMIT_CREATE_IDLE
+				resourceForm.isSubmitting
+					? (localization?.BLOG_FORMS_SUBMIT_CREATE_PENDING ??
+						t("blog.forms.submitCreatePending", "Creating..."))
+					: (localization?.BLOG_FORMS_SUBMIT_CREATE_IDLE ??
+						t("blog.forms.submitCreateIdle", "Create Post"))
 			}
 			onCancel={onClose}
-			disabled={isCreatingPost || featuredImageUploading}
-			errorMessage={createPostError?.message}
+			disabled={resourceForm.isSubmitting || featuredImageUploading}
+			errorMessage={hasFieldErrors ? undefined : resourceForm.error?.message}
 			setFeaturedImageUploading={setFeaturedImageUploading}
 		/>
 	);
@@ -459,81 +561,95 @@ const EditPostFormComponent = ({
 }: EditPostFormProps) => {
 	const [featuredImageUploading, setFeaturedImageUploading] = useState(false);
 	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-	const { localization } = usePluginOverrides<
-		BlogPluginOverrides,
-		Partial<BlogPluginOverrides>
-	>("blog", {
-		localization: BLOG_LOCALIZATION,
-	});
-	// const { uploadImage } = useBlogContext()
+	const t = useTranslate();
+	const { localization } = usePluginOverrides<BlogPluginOverrides>("blog");
 
 	const { post } = useSuspensePost(postSlug);
+	const notify = useNotify();
 
-	const initialData = useMemo(() => {
-		if (!post) return {};
-		return {
-			title: post.title,
-			content: post.content,
-			excerpt: post.excerpt,
-			slug: post.slug,
-			published: post.published,
-			image: post.image || "",
-			tags: post.tags.map((tag) => ({
-				id: tag.id,
-				name: tag.name,
-				slug: tag.slug,
-			})),
-		};
-	}, [post]);
-
-	const schema = CustomPostUpdateSchema;
-
-	const {
-		mutateAsync: updatePost,
-		isPending: isUpdatingPost,
-		error: updatePostError,
-	} = useUpdatePost();
-
-	const { mutateAsync: deletePost, isPending: isDeletingPost } =
-		useDeletePost();
+	const schema = useMemo(
+		() => CustomPostUpdateSchema.extend(localizedRequiredFields(t)),
+		[t],
+	);
 
 	type EditPostFormValues = z.input<typeof schema>;
-	const onSubmit = async (data: EditPostFormValues) => {
-		// Wait for mutation to complete, including refresh
-		const updatedPost = await updatePost({
-			id: post!.id,
+
+	const resourceForm = usePostForm<EditPostFormValues>({
+		action: "edit",
+		// Record comes from the suspense hook above — skips useForm's own fetch
+		record: post,
+		successMessage:
+			localization?.BLOG_FORMS_TOAST_UPDATE_SUCCESS ??
+			t("blog.forms.toastUpdateSuccess", "Post updated successfully"),
+		defaults: (record) =>
+			(record
+				? {
+						title: record.title,
+						content: record.content,
+						excerpt: record.excerpt,
+						slug: record.slug,
+						published: record.published,
+						image: record.image || "",
+						tags: record.tags.map((tag) => ({
+							id: tag.id,
+							name: tag.name,
+							slug: tag.slug,
+						})),
+					}
+				: {}) as EditPostFormValues,
+		toUpdateVars: (data, record) => ({
+			id: (record as SerializedPost).id,
 			data: {
-				id: post!.id,
+				id: (record as SerializedPost).id,
 				title: data.title,
 				content: data.content,
 				excerpt: data.excerpt ?? "",
 				slug: data.slug,
 				published: data.published ?? false,
 				publishedAt:
-					data.published && !post?.published
+					data.published && !record?.published
 						? new Date()
-						: post?.publishedAt
-							? new Date(post.publishedAt)
+						: record?.publishedAt
+							? new Date(record.publishedAt)
 							: undefined,
 				image: data.image,
 				tags: data.tags || [],
 			},
-		});
+		}),
+		onSuccess: (updatedPost) => {
+			// Navigate only after mutation (including invalidation) completes
+			onSuccess({
+				slug: updatedPost?.slug ?? "",
+				published: updatedPost?.published ?? false,
+			});
+		},
+	});
 
-		toast.success(localization.BLOG_FORMS_TOAST_UPDATE_SUCCESS);
+	const { mutateAsync: deletePost, isPending: isDeletingPost } =
+		useDeletePost();
 
-		// Navigate only after mutation completes
-		onSuccess({
-			slug: updatedPost?.slug ?? "",
-			published: updatedPost?.published ?? false,
-		});
+	const onSubmit = async (data: EditPostFormValues) => {
+		await resourceForm.submit(data);
 	};
 
 	const handleDelete = async () => {
 		if (!post?.id) return;
 
-		await deletePost({ id: post.id });
-		toast.success(localization.BLOG_FORMS_TOAST_DELETE_SUCCESS);
+		try {
+			await deletePost({ id: post.id });
+		} catch (error) {
+			notify.error(
+				error instanceof Error
+					? error.message
+					: (localization?.BLOG_FORMS_TOAST_DELETE_FAILURE ??
+							t("blog.forms.toastDeleteFailure", "Failed to delete post")),
+			);
+			return;
+		}
+		notify.success(
+			localization?.BLOG_FORMS_TOAST_DELETE_SUCCESS ??
+				t("blog.forms.toastDeleteSuccess", "Post deleted successfully"),
+		);
 		setDeleteDialogOpen(false);
 
 		// Call onDelete callback if provided, otherwise use onClose
@@ -555,9 +671,13 @@ const EditPostFormComponent = ({
 			image: "",
 			tags: [],
 		},
-		values: initialData as z.input<typeof schema>,
+		values: resourceForm.defaultValues as z.input<typeof schema>,
 	});
 
+	// Server-side Zod validation failures land on the matching form fields
+	useServerFieldErrors(form, resourceForm.fieldErrors);
+	const hasFieldErrors = Object.keys(resourceForm.fieldErrors).length > 0;
+
 	// Expose form instance to parent for AI context integration
 	useEffect(() => {
 		onFormReady?.(form);
@@ -565,7 +685,17 @@ const EditPostFormComponent = ({
 	}, []);
 
 	if (!post) {
-		return <EmptyList message={localization.BLOG_PAGE_NOT_FOUND_DESCRIPTION} />;
+		return (
+			<EmptyList
+				message={
+					localization?.BLOG_PAGE_NOT_FOUND_DESCRIPTION ??
+					t(
+						"blog.common.pageNotFoundDescription",
+						"The page you are looking for does not exist.",
+					)
+				}
+			/>
+		);
 	}
 
 	return (
@@ -574,58 +704,76 @@ const EditPostFormComponent = ({
 				form={form}
 				onSubmit={onSubmit}
 				submitLabel={
-					isUpdatingPost
-						? localization.BLOG_FORMS_SUBMIT_UPDATE_PENDING
-						: localization.BLOG_FORMS_SUBMIT_UPDATE_IDLE
+					resourceForm.isSubmitting
+						? (localization?.BLOG_FORMS_SUBMIT_UPDATE_PENDING ??
+							t("blog.forms.submitUpdatePending", "Updating..."))
+						: (localization?.BLOG_FORMS_SUBMIT_UPDATE_IDLE ??
+							t("blog.forms.submitUpdateIdle", "Update Post"))
 				}
 				onCancel={onClose}
-				disabled={isUpdatingPost || featuredImageUploading}
-				errorMessage={updatePostError?.message}
+				disabled={resourceForm.isSubmitting || featuredImageUploading}
+				errorMessage={hasFieldErrors ? undefined : resourceForm.error?.message}
 				setFeaturedImageUploading={setFeaturedImageUploading}
 				initialSlugTouched={!!post?.slug}
 			/>
-			<div className="w-full">
-				<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-					<AlertDialogTrigger asChild>
-						<Button
-							variant="destructive"
-							type="button"
-							disabled={
-								isUpdatingPost || featuredImageUploading || isDeletingPost
-							}
-							className="mt-4"
-						>
-							{localization.BLOG_FORMS_DELETE_BUTTON}
-						</Button>
-					</AlertDialogTrigger>
-					<AlertDialogContent>
-						<AlertDialogHeader>
-							<AlertDialogTitle>
-								{localization.BLOG_FORMS_DELETE_DIALOG_TITLE}
-							</AlertDialogTitle>
-							<AlertDialogDescription>
-								{localization.BLOG_FORMS_DELETE_DIALOG_DESCRIPTION}
-							</AlertDialogDescription>
-						</AlertDialogHeader>
-						<AlertDialogFooter>
-							<AlertDialogCancel disabled={isDeletingPost}>
-								{localization.BLOG_FORMS_DELETE_DIALOG_CANCEL}
-							</AlertDialogCancel>
-							<AlertDialogAction
-								onClick={(e) => {
-									e.preventDefault();
-									void handleDelete();
-								}}
-								disabled={isDeletingPost}
+			<CanAccess resource="blog:post" action="delete" params={{ id: post.id }}>
+				<div className="w-full">
+					<AlertDialog
+						open={deleteDialogOpen}
+						onOpenChange={setDeleteDialogOpen}
+					>
+						<AlertDialogTrigger asChild>
+							<Button
+								variant="destructive"
+								type="button"
+								disabled={
+									resourceForm.isSubmitting ||
+									featuredImageUploading ||
+									isDeletingPost
+								}
+								className="mt-4"
 							>
-								{isDeletingPost
-									? localization.BLOG_FORMS_DELETE_PENDING
-									: localization.BLOG_FORMS_DELETE_DIALOG_CONFIRM}
-							</AlertDialogAction>
-						</AlertDialogFooter>
-					</AlertDialogContent>
-				</AlertDialog>
-			</div>
+								{localization?.BLOG_FORMS_DELETE_BUTTON ??
+									t("blog.forms.deleteButton", "Delete Post")}
+							</Button>
+						</AlertDialogTrigger>
+						<AlertDialogContent>
+							<AlertDialogHeader>
+								<AlertDialogTitle>
+									{localization?.BLOG_FORMS_DELETE_DIALOG_TITLE ??
+										t("blog.forms.deleteDialogTitle", "Delete Post")}
+								</AlertDialogTitle>
+								<AlertDialogDescription>
+									{localization?.BLOG_FORMS_DELETE_DIALOG_DESCRIPTION ??
+										t(
+											"blog.forms.deleteDialogDescription",
+											"Are you sure you want to delete this post? This action cannot be undone.",
+										)}
+								</AlertDialogDescription>
+							</AlertDialogHeader>
+							<AlertDialogFooter>
+								<AlertDialogCancel disabled={isDeletingPost}>
+									{localization?.BLOG_FORMS_DELETE_DIALOG_CANCEL ??
+										t("blog.forms.deleteDialogCancel", "Cancel")}
+								</AlertDialogCancel>
+								<AlertDialogAction
+									onClick={(e) => {
+										e.preventDefault();
+										void handleDelete();
+									}}
+									disabled={isDeletingPost}
+								>
+									{isDeletingPost
+										? (localization?.BLOG_FORMS_DELETE_PENDING ??
+											t("blog.forms.deletePending", "Deleting..."))
+										: (localization?.BLOG_FORMS_DELETE_DIALOG_CONFIRM ??
+											t("blog.forms.deleteDialogConfirm", "Delete"))}
+								</AlertDialogAction>
+							</AlertDialogFooter>
+						</AlertDialogContent>
+					</AlertDialog>
+				</div>
+			</CanAccess>
 		</>
 	);
 };