create-nextblock 0.2.45 → 0.2.47

package/templates/nextblock-template/app/cms/media/components/MediaUploadForm.tsx

@@ -4,6 +4,7 @@
 import React, { useState, useRef, useTransition, useEffect } from "react";
 import Image from "next/image";
 import { Button } from "@nextblock-cms/ui";
+import { Spinner, Alert, AlertDescription } from "@nextblock-cms/ui";
 import { Input } from "@nextblock-cms/ui";
 import { Label } from "@nextblock-cms/ui";
 import { Progress } from "@nextblock-cms/ui"; // Assuming you have this shadcn/ui component
@@ -329,19 +330,21 @@ export default function MediaUploadForm({ onUploadSuccess, returnJustData, defau
           <Progress value={uploadProgress} className="w-full h-2" />
         )}
         {uploadStatus === "success" && (
-          <div className="flex items-center text-green-600">
-            <CheckCircle2 className="h-5 w-5 mr-2" />
-            <p>Upload successful!</p>
-          </div>
+         <Alert variant="success" className="mb-4">
+            <CheckCircle2 className="h-4 w-4" />
+            <AlertDescription>Upload successful!</AlertDescription>
+         </Alert>
         )}
         {uploadStatus === "error" && errorMessage && (
-          <div className="flex items-center text-red-600">
-            <XCircle className="h-5 w-5 mr-2" />
-            <p>Error: {errorMessage}</p>
-          </div>
+          <Alert variant="destructive" className="mb-4">
+            <XCircle className="h-4 w-4" />
+            <AlertDescription>Error: {errorMessage}</AlertDescription>
+          </Alert>
         )}
         {processingStatus === "processing" && (
-          <p className="text-sm text-blue-600 animate-pulse">Processing image variants...</p>
+          <div className="flex items-center text-sm text-blue-600 animate-pulse">
+             <Spinner className="mr-2 h-4 w-4" /> Processing image variants...
+          </div>
         )}
         {/* Message for when original uploads but variants fail, errorMessage will be set */}
 
@@ -352,9 +355,17 @@ export default function MediaUploadForm({ onUploadSuccess, returnJustData, defau
           disabled={isPending || uploadStatus === "uploading" || processingStatus === "processing" || !file}
           className="w-full sm:w-auto"
         >
-          {uploadStatus === "uploading" ? `Uploading ${uploadProgress}%...`
-           : processingStatus === "processing" ? "Processing..."
-           : "Upload File"}
+          {uploadStatus === "uploading" ? (
+             <>
+               <Spinner className="mr-2 h-4 w-4" /> Uploading {uploadProgress}%...
+             </>
+           ) : processingStatus === "processing" ? (
+             <>
+               <Spinner className="mr-2 h-4 w-4" /> Processing...
+             </>
+           ) : (
+             "Upload File"
+           )}
         </Button>
       </form>
     </div>

package/templates/nextblock-template/app/cms/navigation/components/DeleteNavItemButton.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { DropdownMenuItem } from "@nextblock-cms/ui";
+import { toast } from "react-hot-toast";
 import { Trash2 } from "lucide-react";
 import { deleteNavigationItem } from "../actions";
 import { ConfirmationModal } from "../../components/ConfirmationModal";
@@ -17,12 +18,15 @@ export default function DeleteNavItemButton({ itemId }: DeleteNavItemButtonProps
     try {
       const result = await deleteNavigationItem(itemId);
       if (result.success) {
+        toast.success("Item deleted");
         window.location.reload();
       } else {
         console.error("Delete operation failed:", result.error);
+        toast.error(`Delete failed: ${result.error}`);
       }
     } catch (error) {
       console.error("Exception during delete action:", error);
+      toast.error("An unexpected error occurred.");
     } finally {
       setIsModalOpen(false);
     }

package/templates/nextblock-template/app/cms/navigation/components/NavigationItemForm.tsx

@@ -4,6 +4,8 @@
 import React, { useEffect, useState, useTransition } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "@nextblock-cms/ui";
+import { Spinner, Alert, AlertDescription, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@nextblock-cms/ui";
+import { Info } from "lucide-react";
 import { Input } from "@nextblock-cms/ui";
 import { Label } from "@nextblock-cms/ui";
 import {
@@ -15,6 +17,7 @@ import {
 } from "@nextblock-cms/ui";
 import type { Database } from "@nextblock-cms/db";
 import { useAuth } from "@/context/AuthContext";
+import { useHotkeys } from "@/hooks/use-hotkeys";
 
 type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
 type MenuLocation = Database['public']['Enums']['menu_location'];
@@ -135,12 +138,15 @@ export default function NavigationItemForm({
 
   const menuLocations: MenuLocation[] = ['HEADER', 'FOOTER', 'SIDEBAR'];
 
+  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'}>
+           <AlertDescription>{formMessage.text}</AlertDescription>
+        </Alert>
       )}
 
       {/* Hidden input for from_translation_group_id if present in URL params and not editing */}
@@ -198,7 +204,19 @@ export default function NavigationItemForm({
         </Select>
       </div>
       <div>
-        <Label htmlFor="menu_key">Menu Location</Label>
+        <div className="flex items-center gap-2 mb-2">
+            <Label htmlFor="menu_key">Menu Location</Label>
+            <TooltipProvider>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Info className="h-4 w-4 text-muted-foreground opacity-70 cursor-pointer" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <p>Where this item will appear in the site layout.</p>
+                    </TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
+        </div>
         <Select
             name="menu_key"
             value={menuKey}
@@ -240,7 +258,13 @@ export default function NavigationItemForm({
       <div className="flex justify-end space-x-3">
         <Button type="button" variant="outline" onClick={() => router.push("/cms/navigation")} disabled={isPending}>Cancel</Button>
         <Button type="submit" disabled={isPending || dataLoading || !languageId || !menuKey}>
-          {isPending ? "Saving..." : actionButtonText}
+          {isPending ? (
+             <>
+               <Spinner className="mr-2 h-4 w-4" /> Saving...
+             </>
+           ) : (
+             actionButtonText
+           )}
         </Button>
       </div>
     </form>

package/templates/nextblock-template/app/cms/pages/components/PageForm.tsx

@@ -4,6 +4,7 @@
 import { useEffect, useState, useTransition } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "@nextblock-cms/ui";
+import { Spinner, Alert, AlertDescription } from "@nextblock-cms/ui";
 import { Input } from "@nextblock-cms/ui";
 import { Label } from "@nextblock-cms/ui";
 import {
@@ -16,6 +17,8 @@ import {
 import { Textarea } from "@nextblock-cms/ui";
 import type { Database } from "@nextblock-cms/db";
 import { useAuth } from "@/context/AuthContext";
+import { useRef } from "react";
+import { useHotkeys } from "@/hooks/use-hotkeys";
 
 type Page = Database['public']['Tables']['pages']['Row'];
 type PageStatus = Database['public']['Enums']['page_status'];
@@ -124,19 +127,16 @@ export default function PageForm({
     return <div>Please log in to manage pages.</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">
       {/* ... (rest of the form remains the same, but `availableLanguages` is now populated by the prop) ... */}
       {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'} className="mb-4">
+           <AlertDescription>{formMessage.text}</AlertDescription>
+        </Alert>
       )}
       {translationGroupId && (
         <input type="hidden" name="translation_group_id" value={translationGroupId} />
@@ -245,7 +245,13 @@ export default function PageForm({
         </Button>
         {/* Ensure button is not disabled due to removed languagesLoading */}
         <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/pages/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,
@@ -110,9 +111,11 @@ export default async function CmsPagesListPage(props: CmsPagesListPageProps) {
       </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>
       )}
 
       {pagesWithDetails.length === 0 ? (

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>