create-nextblock 0.2.46 → 0.2.47

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>

package/templates/nextblock-template/app/cms/users/components/UserForm.tsx

@@ -1,9 +1,12 @@
 // app/cms/users/components/UserForm.tsx
 "use client";
 
-import { useEffect, useState, useTransition } from "react";
+import { useEffect, useState, useTransition, useRef } from "react";
+import { useHotkeys } from "@/hooks/use-hotkeys";
 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 {
@@ -85,18 +88,15 @@ export default function UserForm({
 
   const userRoles: UserRole[] = ['USER', 'WRITER', 'ADMIN'];
 
+  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">
       {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>
       )}
       <div>
         <Label htmlFor="email">Email (Read-only)</Label>
@@ -114,7 +114,21 @@ export default function UserForm({
       </div>
 
       <div>
-        <Label htmlFor="role">Role</Label>
+        <div className="flex items-center gap-2 mb-2">
+          <Label htmlFor="role">Role</Label>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info className="h-4 w-4 text-muted-foreground opacity-70 cursor-pointer" />
+              </TooltipTrigger>
+              <TooltipContent className="max-w-xs">
+                <p><strong>ADMIN:</strong> Full access to settings and content.</p>
+                <p><strong>WRITER:</strong> Can create/edit content, no settings access.</p>
+                <p><strong>USER:</strong> Read-only access.</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
         <Select name="role" value={role} onValueChange={(value) => setRole(value as UserRole)} required>
           <SelectTrigger className="mt-1"><SelectValue placeholder="Select role" /></SelectTrigger>
           <SelectContent>
@@ -130,7 +144,13 @@ export default function UserForm({
           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/hooks/use-hotkeys.ts

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+
+/**
+ * Hook to handle keyboard shortcuts.
+ * Currently optimized for 'ctrl+s' / 'meta+s'.
+ * 
+ * @param key The key combination to listen for (e.g. 'ctrl+s')
+ * @param callback The function to call when the key combination is pressed
+ * @param deps Dependencies array for the effect
+ */
+export function useHotkeys(key: string, callback: (event: KeyboardEvent) => void, deps: any[] = []) {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const isCtrl = event.ctrlKey || event.metaKey; // cmd on mac, ctrl on windows
+      const keyLower = event.key.toLowerCase();
+
+      // Check for ctrl+s / cmd+s
+      if ((key === 'ctrl+s' || key === 'meta+s') && isCtrl && keyLower === 's') {
+        event.preventDefault();
+        callback(event);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [key, ...deps]); // callback should be stable or included in deps if handled by caller
+}

package/templates/nextblock-template/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/nextblock-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextblock-cms/template",
-  "version": "0.2.24",
+  "version": "0.2.25",
   "private": true,
   "scripts": {
     "dev": "next dev",