create-nextblock 0.2.46 → 0.2.48

package/templates/nextblock-template/app/cms/posts/components/PostForm.tsx

@@ -14,6 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@nextblock-cms/ui";
+import { Spinner, Alert, AlertDescription } from "@nextblock-cms/ui";
 import { Textarea } from "@nextblock-cms/ui";
 import {
   Dialog,
@@ -36,6 +37,8 @@ import MediaImage from "@/app/cms/media/components/MediaImage"; // For displayin
 import { getMediaItems } from "@/app/cms/media/actions";
 import MediaUploadForm from "@/app/cms/media/components/MediaUploadForm";
 import { Separator } from "@nextblock-cms/ui";
+import { useRef } from "react";
+import { useHotkeys } from "@/hooks/use-hotkeys";
 
 
 interface PostFormProps {
@@ -219,18 +222,15 @@ export default function PostForm({
     return <div>Please log in to manage posts.</div>;
   }
 
+  const formRef = useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
+
   return (
-    <form onSubmit={handleSubmit} className="space-y-6 w-full mx-auto px-6">
+    <form ref={formRef} onSubmit={handleSubmit} className="space-y-6 w-full mx-auto px-6">
       {formMessage && (
-        <div
-          className={`p-3 rounded-md text-sm ${
-            formMessage.type === 'success'
-              ? 'bg-green-100 text-green-700 border border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700'
-              : 'bg-red-100 text-red-700 border border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-700'
-          }`}
-        >
-          {formMessage.text}
-        </div>
+        <Alert variant={formMessage.type === 'success' ? 'success' : 'destructive'} className="mb-4">
+           <AlertDescription>{formMessage.text}</AlertDescription>
+        </Alert>
       )}
       <div>
         <Label htmlFor="title">Title</Label>
@@ -393,7 +393,7 @@ export default function PostForm({
                 {!mediaLoading && hasMoreMedia && mediaItems.length > 0 && (
                   <div className="text-center mt-6">
                     <Button onClick={() => loadMedia(mediaPage + 1, true)} variant="outline" disabled={mediaLoading}>
-                      {mediaLoading ? "Loading..." : "Load More"}
+                      {mediaLoading ? <><Spinner className="mr-2 h-4 w-4" /> Loading...</> : "Load More"}
                     </Button>
                   </div>
                 )}
@@ -411,7 +411,13 @@ export default function PostForm({
       <div className="flex justify-end space-x-3 pt-6"> {/* Increased pt for spacing */}
         <Button type="button" variant="outline" onClick={() => router.push("/cms/posts")} disabled={isPending}>Cancel</Button>
         <Button type="submit" disabled={isPending || authLoading || availableLanguages.length === 0}>
-          {isPending ? "Saving..." : actionButtonText}
+          {isPending ? (
+            <>
+              <Spinner className="mr-2 h-4 w-4" /> Saving...
+            </>
+          ) : (
+            actionButtonText
+          )}
         </Button>
       </div>
     </form>

package/templates/nextblock-template/app/cms/posts/page.tsx

@@ -12,6 +12,7 @@ import {
   TableRow,
 } from "@nextblock-cms/ui";
 import { Badge } from "@nextblock-cms/ui";
+import { Alert, AlertDescription } from "@nextblock-cms/ui";
 import { MoreHorizontal, PlusCircle, Edit3, PenTool } from "lucide-react"; // Removed Trash2 as it's in the client component
 import {
   DropdownMenu,
@@ -95,9 +96,11 @@ export default async function CmsPostsListPage(props: CmsPostsListPageProps) {
       </div>
 
       {successMessage && (
-        <div className="mb-4 p-3 rounded-md text-sm bg-green-100 text-green-700 border border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700">
-          {decodeURIComponent(successMessage)}
-        </div>
+        <Alert variant="success" className="mb-4">
+          <AlertDescription>
+            {decodeURIComponent(successMessage)}
+          </AlertDescription>
+        </Alert>
       )}
 
       {postsWithDetails.length === 0 ? (
@@ -158,7 +161,7 @@ export default async function CmsPostsListPage(props: CmsPostsListPageProps) {
                     </Badge>
                   </TableCell>
                   <TableCell><Badge variant="outline" className="dark:border-slate-600">{languageCode}</Badge></TableCell>
-                  <TableCell className="text-muted-foreground text-xs hidden md:table-cell">/article/{post.slug}</TableCell>
+                  <TableCell className="text-muted-foreground text-xs hidden md:table-cell">/article/{post.slug}</TableCell>
                   <TableCell className="hidden lg:table-cell text-xs text-muted-foreground">
                     {post.published_at ? new Date(post.published_at).toLocaleDateString() : "Not yet"}
                   </TableCell>
@@ -189,4 +192,4 @@ export default async function CmsPostsListPage(props: CmsPostsListPageProps) {
       )}
     </div>
   );
-}
+}

package/templates/nextblock-template/app/cms/revisions/RevisionHistoryButton.tsx

@@ -3,6 +3,7 @@
 
 import { useEffect, useState, useTransition } from 'react';
 import { Button } from "@nextblock-cms/ui";
+import { Spinner, Alert, AlertDescription } from "@nextblock-cms/ui";
 import {
   Dialog,
   DialogContent,
@@ -139,9 +140,21 @@ export default function RevisionHistoryButton({ parentType, parentId }: Revision
           </DialogDescription>
         </DialogHeader>
         <div className="space-y-3">
-          {loading && <div className="text-sm text-muted-foreground">Loading revisions…</div>}
-          {error && <div className="text-sm text-red-600">{error}</div>}
-          {message && <div className="text-sm text-green-600">{message}</div>}
+          {loading && (
+             <div className="flex items-center justify-center py-4">
+                <Spinner size="lg" />
+             </div>
+          )}
+          {error && (
+            <Alert variant="destructive">
+               <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+          {message && (
+            <Alert variant="success">
+               <AlertDescription>{message}</AlertDescription>
+            </Alert>
+          )}
 
           {(!loading && revisions && revisions.length === 0) && (
             <div className="text-sm text-muted-foreground">No revisions yet.</div>
@@ -166,10 +179,10 @@ export default function RevisionHistoryButton({ parentType, parentId }: Revision
                     </div>
                     <div className="flex gap-2">
                       <Button variant="secondary" size="sm" onClick={() => handleCompare(rev.version)} disabled={compareLoading && activeCompareVersion === rev.version}>
-                        {compareLoading && activeCompareVersion === rev.version ? 'Loading…' : 'Compare'}
+                        {compareLoading && activeCompareVersion === rev.version ? <><Spinner className="mr-2 h-3 w-3" /> Loading</> : 'Compare'}
                       </Button>
                       <Button size="sm" onClick={() => handleRestore(rev.version)} disabled={isPending}>
-                        {isPending ? 'Restoring…' : 'Restore'}
+                        {isPending ? <><Spinner className="mr-2 h-3 w-3" /> Restoring</> : 'Restore'}
                       </Button>
                     </div>
                   </div>

package/templates/nextblock-template/app/cms/settings/copyright/components/CopyrightForm.tsx

@@ -8,7 +8,10 @@ import { CopyrightSettings, updateCopyrightSettings } from '../actions';
 import { Label } from '@nextblock-cms/ui';
 import { Input } from '@nextblock-cms/ui';
 import { Button } from '@nextblock-cms/ui';
-import { FormMessage, type Message } from '@/components/form-message';
+import { Alert, AlertDescription, Spinner } from '@nextblock-cms/ui';
+import { type Message } from '@/components/form-message';
+import { useRef } from 'react';
+import { useHotkeys } from '@/hooks/use-hotkeys';
 
 interface CopyrightFormProps {
   languages: Language[];
@@ -48,8 +51,11 @@ export default function CopyrightForm({ languages, initialSettings }: CopyrightF
     });
   };
 
+  const formRef = useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
+
   return (
-    <form onSubmit={handleSubmit} className="space-y-6">
+    <form ref={formRef} onSubmit={handleSubmit} className="space-y-6">
       <div className="space-y-4">
         {languages.map(lang => (
           <div key={lang.id} className="space-y-2">
@@ -69,9 +75,19 @@ export default function CopyrightForm({ languages, initialSettings }: CopyrightF
 
       <div className="flex items-center gap-4">
         <Button type="submit" disabled={isPending}>
-          {isPending ? 'Saving...' : 'Save Settings'}
+          {isPending ? (
+            <>
+              <Spinner className="mr-2 h-4 w-4" /> Saving...
+            </>
+          ) : (
+            'Save Settings'
+          )}
         </Button>
-        {message && <FormMessage message={message} />}
+        {message && (
+          <Alert variant={'success' in message ? 'success' : 'destructive'} className="py-2 px-4 w-auto inline-flex items-center">
+             <AlertDescription>{'success' in message ? (message as any).success : (message as any).error}</AlertDescription>
+          </Alert>
+        )}
       </div>
     </form>
   );

package/templates/nextblock-template/app/cms/settings/extra-translations/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { useEffect, useState, useTransition } from 'react';
+import { useEffect, useState, useTransition, useRef } from 'react';
 import { useActionState } from 'react';
+import { useHotkeys } from '@/hooks/use-hotkeys';
 import { getTranslations, createTranslation, updateTranslation } from './actions';
 import { getLanguages } from '@/app/cms/settings/languages/actions';
 import { Button } from '@nextblock-cms/ui';
@@ -23,6 +24,7 @@ import {
   TableHeader,
   TableRow,
 } from '@nextblock-cms/ui';
+import { Spinner, Alert, AlertDescription } from '@nextblock-cms/ui';
 import { SubmitButton } from '@/components/submit-button';
 
 type Translation = Awaited<ReturnType<typeof getTranslations>>[number];
@@ -49,7 +51,11 @@ export default function ExtraTranslationsPage() {
   }, []);
 
   if (isPending && translations.length === 0) {
-    return <div>Loading...</div>;
+    return (
+        <div className="flex justify-center items-center p-12">
+            <Spinner size="lg" />
+        </div>
+    );
   }
 
   return (
@@ -74,6 +80,9 @@ function CreateTranslationForm({ onSuccess }: { onSuccess: () => void }) {
     }
   }, [state, onSuccess]);
 
+  const formRef = useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -83,7 +92,7 @@ function CreateTranslationForm({ onSuccess }: { onSuccess: () => void }) {
         <DialogHeader>
           <DialogTitle>Create New Translation</DialogTitle>
         </DialogHeader>
-        <form action={formAction} className="space-y-4">
+        <form ref={formRef} action={formAction} className="space-y-4">
           <div>
             <Label htmlFor="key">Key</Label>
             <Input id="key" name="key" placeholder="e.g., sign_in_button" required />
@@ -94,7 +103,11 @@ function CreateTranslationForm({ onSuccess }: { onSuccess: () => void }) {
             <Input id="en" name="en" placeholder="e.g., Sign In" required />
             {state?.errors?.en && <p className="text-red-500 text-sm mt-1">{state.errors.en[0]}</p>}
           </div>
-          {state?.error && <p className="text-red-500 text-sm">{state.error}</p>}
+          {state?.error && (
+            <Alert variant="destructive">
+                <AlertDescription>{state.error}</AlertDescription>
+            </Alert>
+          )}
           <DialogFooter>
             <SubmitButton>Create</SubmitButton>
           </DialogFooter>
@@ -190,6 +203,9 @@ function EditableTranslationRow({ translation, languages, onSuccess }: EditableR
     }
   };
 
+  const formRef = useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
+
   return (
     <TableRow>
       <TableCell className="font-medium">{translation.key}</TableCell>
@@ -204,11 +220,21 @@ function EditableTranslationRow({ translation, languages, onSuccess }: EditableR
         </TableCell>
       ))}
       <TableCell className="text-right">
-        <form onSubmit={handleSubmit}>
+        <form ref={formRef} onSubmit={handleSubmit} className="flex flex-col items-end gap-2">
           <Button type="submit" disabled={!isDirty || isSubmitting}>
-            {isSubmitting ? 'Saving...' : 'Save'}
+            {isSubmitting ? (
+              <>
+                <Spinner className="mr-2 h-4 w-4" /> Saving...
+              </>
+            ) : (
+              'Save'
+            )}
           </Button>
-          {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+          {error && (
+             <Alert variant="destructive" className="py-1 px-2 text-xs w-auto">
+                <AlertDescription>{error}</AlertDescription>
+             </Alert>
+          )}
         </form>
       </TableCell>
     </TableRow>

package/templates/nextblock-template/app/cms/settings/languages/components/DeleteLanguageButton.tsx

@@ -6,6 +6,7 @@ import { deleteLanguage } from "../actions"; // Server action
 import type { Database } from "@nextblock-cms/db";
 import { useTransition, useState } from 'react';
 import { ConfirmationModal } from "@/app/cms/components/ConfirmationModal";
+import { toast } from 'react-hot-toast';
 
 type Language = Database['public']['Tables']['languages']['Row'];
 
@@ -28,7 +29,7 @@ export default function DeleteLanguageClientButton({ language }: DeleteLanguageC
     if (isDefaultLanguage) {
       // The server action has a more robust check for "only default"
       // For now, a simple alert for any default language.
-       alert("Cannot delete the default language. Please set another language as default first, or ensure this is not the only language.");
+       toast.error("Cannot delete the default language. Please set another language as default first, or ensure this is not the only language.");
        setIsModalOpen(false);
        return;
     }
@@ -36,8 +37,7 @@ export default function DeleteLanguageClientButton({ language }: DeleteLanguageC
     startTransition(async () => {
       const result = await deleteLanguage(language.id); // Call the server action
       if (result?.error) {
-        alert(`Error: ${result.error}`);
-        // In a real app, use a toast or a more integrated notification system
+        toast.error(`Error: ${result.error}`);
       }
       // Revalidation and redirection are handled by the server action itself.
       setIsModalOpen(false);

package/templates/nextblock-template/app/cms/settings/languages/components/LanguageForm.tsx

@@ -6,11 +6,14 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { Button } from '@nextblock-cms/ui';
 import { Input } from '@nextblock-cms/ui';
 import { Label } from '@nextblock-cms/ui';
-import { Checkbox } from '@nextblock-cms/ui'; // Assuming shadcn/ui Checkbox
+import { Checkbox } from '@nextblock-cms/ui';
+import { Alert, AlertTitle, AlertDescription, Spinner, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@nextblock-cms/ui';
+import { Info } from 'lucide-react';
 import type { Database } from "@nextblock-cms/db";
 
 type Language = Database["public"]["Tables"]["languages"]["Row"];
 import { useAuth } from '@/context/AuthContext';
+import { useHotkeys } from '@/hooks/use-hotkeys';
 
 interface LanguageFormProps {
   language?: Language | null;
@@ -77,22 +80,31 @@ export default function LanguageForm({
 
   const isTheOnlyDefaultLanguage = isEditing && language?.is_default && allLanguages.filter(l => l.is_default).length === 1;
 
+  const formRef = React.useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-6">
+    <form ref={formRef} onSubmit={handleSubmit} className="space-y-6">
       {formMessage && (
-        <div
-          className={`p-3 rounded-md text-sm ${
-            formMessage.type === 'success'
-              ? 'bg-green-100 text-green-700 border border-green-200'
-              : 'bg-red-100 text-red-700 border border-red-200'
-          }`}
-        >
-          {formMessage.text}
-        </div>
+        <Alert variant={formMessage.type === 'success' ? 'success' : 'destructive'}>
+          <AlertTitle>{formMessage.type === 'success' ? 'Success' : 'Error'}</AlertTitle>
+          <AlertDescription>{formMessage.text}</AlertDescription>
+        </Alert>
       )}
       <div>
-        <Label htmlFor="code">Language Code (e.g., en, fr-CA)</Label>
+        <div className="flex items-center gap-2 mb-2">
+          <Label htmlFor="code">Language Code</Label>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info className="h-4 w-4 text-muted-foreground opacity-70 cursor-pointer" />
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>ISO 639-1 code (e.g., 'en' for English, 'fr' for French).</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
         <Input
           id="code"
           name="code"
@@ -130,6 +142,16 @@ export default function LanguageForm({
         <Label htmlFor="is_default" className="font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
           Set as Default Language
         </Label>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Info className="h-4 w-4 text-muted-foreground opacity-70 cursor-pointer" />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>The default language for the site. Only one language can be default.</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </div>
        {isTheOnlyDefaultLanguage && isDefault && (
           <p className="text-xs text-amber-600">This is the only default language. To change, set another language as default.</p>
@@ -159,7 +181,13 @@ export default function LanguageForm({
           Cancel
         </Button>
         <Button type="submit" disabled={isPending || authLoading}>
-          {isPending ? "Saving..." : actionButtonText}
+          {isPending ? (
+            <>
+              <Spinner className="mr-2 h-4 w-4" /> Saving...
+            </>
+          ) : (
+            actionButtonText
+          )}
         </Button>
       </div>
     </form>

package/templates/nextblock-template/app/cms/settings/languages/page.tsx

@@ -12,6 +12,7 @@ import {
   TableRow,
 } from "@nextblock-cms/ui";
 import { Badge } from "@nextblock-cms/ui";
+import { Alert, AlertTitle, AlertDescription } from "@nextblock-cms/ui";
 import { MoreHorizontal, PlusCircle, Edit3, Languages as LanguagesIcon, ShieldAlert } from "lucide-react";
 import {
   DropdownMenu,
@@ -66,9 +67,12 @@ export default async function CmsLanguagesListPage() {
       </div>
 
        {successMessage && (
-        <div className="mb-4 p-3 rounded-md text-sm bg-green-100 text-green-700 border border-green-200">
-          {decodeURIComponent(successMessage)}
-        </div>
+        <Alert variant="success" className="mb-4">
+          <AlertTitle>Success</AlertTitle>
+          <AlertDescription>
+            {decodeURIComponent(successMessage)}
+          </AlertDescription>
+        </Alert>
       )}
 
       {languages.length === 0 ? (
@@ -140,16 +144,14 @@ export default async function CmsLanguagesListPage() {
           </Table>
         </div>
       )}
-      <div className="mt-6 p-4 border border-amber-300 bg-amber-50 dark:bg-amber-900/30 rounded-lg">
-        <div className="flex items-start">
-            <ShieldAlert className="h-5 w-5 text-amber-600 dark:text-amber-400 mr-3 flex-shrink-0 mt-0.5" />
-            <div>
-                <h4 className="text-sm font-semibold text-amber-700 dark:text-amber-300">Important Note on Deleting Languages</h4>
-                <p className="text-xs text-amber-600 dark:text-amber-400 mt-1">
-                Deleting a language is a destructive action. All content (pages, posts, blocks, navigation items) specifically associated with that language will be permanently deleted due to database cascade rules. Please ensure this is intended before proceeding. You cannot delete the current default language if it is the only one.
-                </p>
-            </div>
-        </div>
+      <div className="mt-6">
+        <Alert variant="warning">
+          <ShieldAlert className="h-4 w-4" />
+          <AlertTitle>Important Note on Deleting Languages</AlertTitle>
+          <AlertDescription>
+            Deleting a language is a destructive action. All content (pages, posts, blocks, navigation items) specifically associated with that language will be permanently deleted due to database cascade rules. Please ensure this is intended before proceeding. You cannot delete the current default language if it is the only one.
+          </AlertDescription>
+        </Alert>
       </div>
     </div>
   );

package/templates/nextblock-template/app/cms/settings/logos/actions.ts

@@ -51,12 +51,11 @@ export async function deleteLogo(id: string) {
 
   if (error) {
     console.error('Error deleting logo:', error)
-    // Optionally, handle the error more gracefully
-    // redirect('/error?message=Could not delete logo')
-    return
+    return { success: false, error: error.message }
   }
 
   revalidatePath('/cms/settings/logos')
+  return { success: true }
 }
 
 export async function getLogos() {

package/templates/nextblock-template/app/cms/settings/logos/components/DeleteLogoButton.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { DropdownMenuItem } from "@nextblock-cms/ui";
+import { Trash2 } from "lucide-react";
+import { deleteLogo } from "../actions";
+import { useTransition, useState } from 'react';
+import { ConfirmationModal } from "@/app/cms/components/ConfirmationModal";
+import { toast } from 'react-hot-toast';
+
+interface DeleteLogoButtonProps {
+  logoId: string;
+}
+
+export default function DeleteLogoButton({ logoId }: DeleteLogoButtonProps) {
+  const [isPending, startTransition] = useTransition();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleDeleteConfirm = () => {
+    startTransition(async () => {
+      const result = await deleteLogo(logoId);
+      if (result?.error) {
+        toast.error(`Error: ${result.error}`);
+      } else {
+          toast.success("Logo deleted successfully");
+      }
+      setIsModalOpen(false);
+    });
+  };
+
+  return (
+    <>
+      <DropdownMenuItem
+        className="text-red-600 hover:!text-red-600 cursor-pointer hover:!bg-red-50 dark:hover:!bg-red-700/20"
+        onSelect={(e) => e.preventDefault()}
+        onClick={() => !isPending && setIsModalOpen(true)}
+        disabled={isPending}
+      >
+        <Trash2 className="mr-2 h-4 w-4" />
+        {isPending ? "Deleting..." : "Delete"}
+      </DropdownMenuItem>
+      <ConfirmationModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onConfirm={handleDeleteConfirm}
+        title="Delete Logo?"
+        description="This will permanently delete the logo. This action cannot be undone."
+      />
+    </>
+  );
+}

package/templates/nextblock-template/app/cms/settings/logos/components/LogoForm.tsx

@@ -6,9 +6,11 @@ import Image from 'next/image'
 import { Input } from '@nextblock-cms/ui'
 import { Label } from '@nextblock-cms/ui'
 import { Button } from '@nextblock-cms/ui'
+import { Alert, AlertDescription, Spinner } from '@nextblock-cms/ui'
 import type { Database } from '@nextblock-cms/db'
 import { ImageIcon, X as XIcon } from 'lucide-react'
 import MediaPickerDialog from '@/app/cms/media/components/MediaPickerDialog'
+import { useHotkeys } from '@/hooks/use-hotkeys'
 type Media = Database['public']['Tables']['media']['Row'];
 const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || ''
 
@@ -96,6 +98,8 @@ export default function LogoForm({ logo, action }: LogoFormProps) {
     })
   }
 
+  useHotkeys('ctrl+s', handleSave, [handleSave]);
+
   return (
     <div className="space-y-6">
       <div>
@@ -162,10 +166,18 @@ export default function LogoForm({ logo, action }: LogoFormProps) {
           onClick={handleSave}
           disabled={isPending || !logoDetails.name || !logoDetails.media_id}
         >
-          {isPending ? 'Saving...' : `${logo ? 'Update' : 'Create'} Logo`}
+          {isPending ? (
+            <>
+              <Spinner className="mr-2 h-4 w-4" /> Saving...
+            </>
+          ) : (
+            `${logo ? 'Update' : 'Create'} Logo`
+          )}
         </Button>
         {formError && (
-          <div className="text-red-500 text-sm">{formError}</div>
+          <Alert variant="destructive" className="py-2 px-4 w-auto inline-flex items-center">
+             <AlertDescription>{formError}</AlertDescription>
+          </Alert>
         )}
       </div>
     </div>

package/templates/nextblock-template/app/cms/settings/logos/page.tsx

@@ -17,8 +17,9 @@ import {
   DropdownMenuTrigger,
   DropdownMenuSeparator,
 } from '@nextblock-cms/ui'
-import { deleteLogo, getLogos } from './actions'
+import { getLogos } from './actions'
 import MediaImage from '@/app/cms/media/components/MediaImage'
+import DeleteLogoButton from './components/DeleteLogoButton'
 
 const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || ''
 
@@ -99,11 +100,7 @@ export default async function CmsLogosListPage() {
                           </Link>
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
-                        <form action={deleteLogo.bind(null, logo.id)}>
-                          <button type="submit" className="w-full text-left px-2 py-1.5 text-sm text-red-500">
-                            Delete
-                          </button>
-                        </form>
+                        <DeleteLogoButton logoId={logo.id} />
                       </DropdownMenuContent>
                     </DropdownMenu>
                   </TableCell>