create-nextblock 0.14.1 → 0.14.4

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

@@ -2,31 +2,31 @@
 
 import { DropdownMenuItem } from "@nextblock-cms/ui";
 import { Trash2 } from "lucide-react";
-import { deleteLogo } from "../actions";
-import { useTransition, useState } from 'react';
-import { ConfirmationModal } from '../../../components/ConfirmationModal';
-import { toast } from 'react-hot-toast';
-import { useRouter } from 'next/navigation';
+import { deleteLogo } from "../actions";
+import { useTransition, useState } from 'react';
+import { ConfirmationModal } from '../../../components/ConfirmationModal';
+import { toast } from 'react-hot-toast';
+import { useRouter } from 'next/navigation';
 
 interface DeleteLogoButtonProps {
   logoId: string;
 }
 
-export default function DeleteLogoButton({ logoId }: DeleteLogoButtonProps) {
-  const router = useRouter();
-  const [isPending, startTransition] = useTransition();
-  const [isModalOpen, setIsModalOpen] = useState(false);
+export default function DeleteLogoButton({ logoId }: DeleteLogoButtonProps) {
+  const router = useRouter();
+  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");
-          router.refresh();
-      }
-      setIsModalOpen(false);
+      } else {
+          toast.success("Logo deleted successfully");
+          router.refresh();
+      }
+      setIsModalOpen(false);
     });
   };
 
@@ -41,13 +41,13 @@ export default function DeleteLogoButton({ logoId }: DeleteLogoButtonProps) {
         <Trash2 className="mr-2 h-4 w-4" />
         {isPending ? "Deleting..." : "Delete"}
       </DropdownMenuItem>
-      <ConfirmationModal
-        isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-        onConfirm={handleDeleteConfirm}
-        title="Delete Brand Logo?"
-        description="This will permanently delete the logo. This action cannot be undone."
-      />
+      <ConfirmationModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onConfirm={handleDeleteConfirm}
+        title="Delete Brand Logo?"
+        description="This will permanently delete the logo. This action cannot be undone."
+      />
     </>
   );
 }

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

@@ -8,15 +8,15 @@ 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 '../../../media/components/MediaPickerDialog'
-import { useHotkeys } from '../../../../../hooks/use-hotkeys';
-import { resolveMediaUrl } from '../../../../../lib/media/resolveMediaUrl';
-type Media = Database['public']['Tables']['media']['Row'];
-
-function resolveLogoSrc(objectKey?: string | null) {
-  return resolveMediaUrl(objectKey)
-}
+import { ImageIcon, X as XIcon } from 'lucide-react'
+import MediaPickerDialog from '../../../media/components/MediaPickerDialog'
+import { useHotkeys } from '../../../../../hooks/use-hotkeys';
+import { resolveMediaUrl } from '../../../../../lib/media/resolveMediaUrl';
+type Media = Database['public']['Tables']['media']['Row'];
+
+function resolveLogoSrc(objectKey?: string | null) {
+  return resolveMediaUrl(objectKey)
+}
 
 interface LogoDetails {
   id?: string
@@ -106,8 +106,8 @@ export default function LogoForm({ logo, action }: LogoFormProps) {
 
   return (
     <div className="space-y-6">
-      <div>
-        <Label htmlFor="name">Logo Name</Label>
+      <div>
+        <Label htmlFor="name">Logo Name</Label>
         <Input
           id="name"
           name="name"
@@ -130,13 +130,15 @@ export default function LogoForm({ logo, action }: LogoFormProps) {
               className="relative group inline-block"
               style={{ maxWidth: logoDetails.width, maxHeight: 200 }}
             >
-              <Image
-                src={resolveLogoSrc(logoDetails.object_key) || ''}
-                alt={logoDetails.name || 'Selected logo'}
-                width={logoDetails.width}
-                height={logoDetails.height}
+              <Image
+                src={resolveLogoSrc(logoDetails.object_key) || ''}
+                alt={logoDetails.name || 'Selected logo'}
+                width={logoDetails.width}
+                height={logoDetails.height}
                 className="rounded-md object-contain"
-                style={{ maxHeight: '200px' }}
+                // width/height auto so the CSS max-height scales both axes and
+                // keeps the intrinsic aspect ratio (next/image warns otherwise)
+                style={{ width: 'auto', height: 'auto', maxWidth: '100%', maxHeight: '200px' }}
                 placeholder={logoDetails.blur_data_url ? 'blur' : 'empty'}
                 blurDataURL={logoDetails.blur_data_url || undefined}
               />
@@ -174,10 +176,10 @@ export default function LogoForm({ logo, action }: LogoFormProps) {
             <>
               <Spinner className="mr-2 h-4 w-4" /> Saving...
             </>
-          ) : (
-            `${logo ? 'Update' : 'Create'} Logo`
-          )}
-        </Button>
+          ) : (
+            `${logo ? 'Update' : 'Create'} Logo`
+          )}
+        </Button>
         {formError && (
           <Alert variant="destructive" className="py-2 px-4 w-auto inline-flex items-center">
              <AlertDescription>{formError}</AlertDescription>

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

@@ -1,42 +1,42 @@
-"use client";
-
-import { DropdownMenuItem } from "@nextblock-cms/ui";
-import { CheckCircle2 } from "lucide-react";
-import { setActiveLogo } from "../actions";
-import { useTransition } from "react";
-import { toast } from "react-hot-toast";
-import { useRouter } from "next/navigation";
-
-interface SetActiveLogoButtonProps {
-  logoId: string;
-}
-
-export default function SetActiveLogoButton({ logoId }: SetActiveLogoButtonProps) {
-  const router = useRouter();
-  const [isPending, startTransition] = useTransition();
-
-  const handleSetActive = () => {
-    startTransition(async () => {
-      const result = await setActiveLogo(logoId);
-      if (result?.error) {
-        toast.error(`Error: ${result.error}`);
-      } else {
-        toast.success("Active logo updated");
-        router.refresh();
-      }
-    });
-  };
-
-  return (
-    <DropdownMenuItem
-      className="cursor-pointer"
-      // Keep the menu from closing before the transition starts.
-      onSelect={(e) => e.preventDefault()}
-      onClick={() => !isPending && handleSetActive()}
-      disabled={isPending}
-    >
-      <CheckCircle2 className="mr-2 h-4 w-4" />
-      {isPending ? "Setting active..." : "Set as active"}
-    </DropdownMenuItem>
-  );
-}
+"use client";
+
+import { DropdownMenuItem } from "@nextblock-cms/ui";
+import { CheckCircle2 } from "lucide-react";
+import { setActiveLogo } from "../actions";
+import { useTransition } from "react";
+import { toast } from "react-hot-toast";
+import { useRouter } from "next/navigation";
+
+interface SetActiveLogoButtonProps {
+  logoId: string;
+}
+
+export default function SetActiveLogoButton({ logoId }: SetActiveLogoButtonProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const handleSetActive = () => {
+    startTransition(async () => {
+      const result = await setActiveLogo(logoId);
+      if (result?.error) {
+        toast.error(`Error: ${result.error}`);
+      } else {
+        toast.success("Active logo updated");
+        router.refresh();
+      }
+    });
+  };
+
+  return (
+    <DropdownMenuItem
+      className="cursor-pointer"
+      // Keep the menu from closing before the transition starts.
+      onSelect={(e) => e.preventDefault()}
+      onClick={() => !isPending && handleSetActive()}
+      disabled={isPending}
+    >
+      <CheckCircle2 className="mr-2 h-4 w-4" />
+      {isPending ? "Setting active..." : "Set as active"}
+    </DropdownMenuItem>
+  );
+}

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

@@ -1,133 +1,133 @@
-'use client'
-
-import { useState, useTransition } from 'react'
-import { Button, Input, Label, Textarea } from '@nextblock-cms/ui'
-
-import { saveSiteSeoSettings, type SiteSeoSettings } from '../actions'
-
-interface SiteSeoSettingsFormProps {
-  initialSettings: SiteSeoSettings
-}
-
-const TITLE_RECOMMENDED_MAX = 60
-const DESCRIPTION_RECOMMENDED_MAX = 160
-
-export default function SiteSeoSettingsForm({ initialSettings }: SiteSeoSettingsFormProps) {
-  const [isPending, startTransition] = useTransition()
-  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
-  const [settings, setSettings] = useState<SiteSeoSettings>(() => ({
-    siteTitle: initialSettings.siteTitle ?? '',
-    siteDescription: initialSettings.siteDescription ?? '',
-    siteKeywords: initialSettings.siteKeywords ?? '',
-  }))
-
-  const handleSave = () => {
-    setMessage(null)
-    startTransition(async () => {
-      const result = await saveSiteSeoSettings(settings)
-
-      if (result?.error) {
-        setMessage({ type: 'error', text: result.error })
-        return
-      }
-
-      setMessage({ type: 'success', text: 'Site SEO settings updated successfully.' })
-    })
-  }
-
-  return (
-    <div className="space-y-6 rounded-xl border bg-background p-5">
-      <div className="space-y-1">
-        <h2 className="text-xl font-semibold">Site identity &amp; SEO</h2>
-        <p className="text-sm text-muted-foreground">
-          Used for the browser tab, search results, and social link previews (Open Graph / Twitter).
-          The site title is also appended to every page title and shown next to the logo.
-        </p>
-      </div>
-
-      <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <Label htmlFor="seo-site-title">Site title</Label>
-          <span
-            className={`text-xs ${
-              settings.siteTitle.length > TITLE_RECOMMENDED_MAX
-                ? 'text-amber-600'
-                : 'text-muted-foreground'
-            }`}
-          >
-            {settings.siteTitle.length}/{TITLE_RECOMMENDED_MAX}
-          </span>
-        </div>
-        <Input
-          id="seo-site-title"
-          placeholder="NextBlock™ CMS"
-          value={settings.siteTitle}
-          onChange={(event) =>
-            setSettings((current) => ({ ...current, siteTitle: event.target.value }))
-          }
-        />
-        <p className="text-xs text-muted-foreground">
-          Example result: <span className="font-medium">Home | {settings.siteTitle || 'NextBlock™ CMS'}</span>
-        </p>
-      </div>
-
-      <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <Label htmlFor="seo-site-description">Default meta description</Label>
-          <span
-            className={`text-xs ${
-              settings.siteDescription.length > DESCRIPTION_RECOMMENDED_MAX
-                ? 'text-amber-600'
-                : 'text-muted-foreground'
-            }`}
-          >
-            {settings.siteDescription.length}/{DESCRIPTION_RECOMMENDED_MAX}
-          </span>
-        </div>
-        <Textarea
-          id="seo-site-description"
-          rows={3}
-          placeholder="A short, compelling summary of your site for search engines and social cards."
-          value={settings.siteDescription}
-          onChange={(event) =>
-            setSettings((current) => ({ ...current, siteDescription: event.target.value }))
-          }
-        />
-        <p className="text-xs text-muted-foreground">
-          Shown when a page has no description of its own. Aim for ~150–160 characters.
-        </p>
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="seo-site-keywords">Default keywords</Label>
-        <Input
-          id="seo-site-keywords"
-          placeholder="NextBlock, CMS, Next.js, Supabase"
-          value={settings.siteKeywords}
-          onChange={(event) =>
-            setSettings((current) => ({ ...current, siteKeywords: event.target.value }))
-          }
-        />
-        <p className="text-xs text-muted-foreground">Comma-separated. Used as the default meta keywords.</p>
-      </div>
-
-      {message ? (
-        <div
-          className={`rounded-lg border px-4 py-3 text-sm ${
-            message.type === 'success'
-              ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
-              : 'border-red-200 bg-red-50 text-red-700'
-          }`}
-        >
-          {message.text}
-        </div>
-      ) : null}
-
-      <div className="flex justify-end">
-        <Button type="button" onClick={handleSave} disabled={isPending}>
-          {isPending ? 'Saving...' : 'Save SEO Settings'}
-        </Button>
-      </div>
-    </div>
-  )
-}
+'use client'
+
+import { useState, useTransition } from 'react'
+import { Button, Input, Label, Textarea } from '@nextblock-cms/ui'
+
+import { saveSiteSeoSettings, type SiteSeoSettings } from '../actions'
+
+interface SiteSeoSettingsFormProps {
+  initialSettings: SiteSeoSettings
+}
+
+const TITLE_RECOMMENDED_MAX = 60
+const DESCRIPTION_RECOMMENDED_MAX = 160
+
+export default function SiteSeoSettingsForm({ initialSettings }: SiteSeoSettingsFormProps) {
+  const [isPending, startTransition] = useTransition()
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
+  const [settings, setSettings] = useState<SiteSeoSettings>(() => ({
+    siteTitle: initialSettings.siteTitle ?? '',
+    siteDescription: initialSettings.siteDescription ?? '',
+    siteKeywords: initialSettings.siteKeywords ?? '',
+  }))
+
+  const handleSave = () => {
+    setMessage(null)
+    startTransition(async () => {
+      const result = await saveSiteSeoSettings(settings)
+
+      if (result?.error) {
+        setMessage({ type: 'error', text: result.error })
+        return
+      }
+
+      setMessage({ type: 'success', text: 'Site SEO settings updated successfully.' })
+    })
+  }
+
+  return (
+    <div className="space-y-6 rounded-xl border bg-background p-5">
+      <div className="space-y-1">
+        <h2 className="text-xl font-semibold">Site identity &amp; SEO</h2>
+        <p className="text-sm text-muted-foreground">
+          Used for the browser tab, search results, and social link previews (Open Graph / Twitter).
+          The site title is also appended to every page title and shown next to the logo.
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="seo-site-title">Site title</Label>
+          <span
+            className={`text-xs ${
+              settings.siteTitle.length > TITLE_RECOMMENDED_MAX
+                ? 'text-amber-600'
+                : 'text-muted-foreground'
+            }`}
+          >
+            {settings.siteTitle.length}/{TITLE_RECOMMENDED_MAX}
+          </span>
+        </div>
+        <Input
+          id="seo-site-title"
+          placeholder="NextBlock™ CMS"
+          value={settings.siteTitle}
+          onChange={(event) =>
+            setSettings((current) => ({ ...current, siteTitle: event.target.value }))
+          }
+        />
+        <p className="text-xs text-muted-foreground">
+          Example result: <span className="font-medium">Home | {settings.siteTitle || 'NextBlock™ CMS'}</span>
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="seo-site-description">Default meta description</Label>
+          <span
+            className={`text-xs ${
+              settings.siteDescription.length > DESCRIPTION_RECOMMENDED_MAX
+                ? 'text-amber-600'
+                : 'text-muted-foreground'
+            }`}
+          >
+            {settings.siteDescription.length}/{DESCRIPTION_RECOMMENDED_MAX}
+          </span>
+        </div>
+        <Textarea
+          id="seo-site-description"
+          rows={3}
+          placeholder="A short, compelling summary of your site for search engines and social cards."
+          value={settings.siteDescription}
+          onChange={(event) =>
+            setSettings((current) => ({ ...current, siteDescription: event.target.value }))
+          }
+        />
+        <p className="text-xs text-muted-foreground">
+          Shown when a page has no description of its own. Aim for ~150–160 characters.
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="seo-site-keywords">Default keywords</Label>
+        <Input
+          id="seo-site-keywords"
+          placeholder="NextBlock, CMS, Next.js, Supabase"
+          value={settings.siteKeywords}
+          onChange={(event) =>
+            setSettings((current) => ({ ...current, siteKeywords: event.target.value }))
+          }
+        />
+        <p className="text-xs text-muted-foreground">Comma-separated. Used as the default meta keywords.</p>
+      </div>
+
+      {message ? (
+        <div
+          className={`rounded-lg border px-4 py-3 text-sm ${
+            message.type === 'success'
+              ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
+              : 'border-red-200 bg-red-50 text-red-700'
+          }`}
+        >
+          {message.text}
+        </div>
+      ) : null}
+
+      <div className="flex justify-end">
+        <Button type="button" onClick={handleSave} disabled={isPending}>
+          {isPending ? 'Saving...' : 'Save SEO Settings'}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -1,11 +1,11 @@
 import LogoForm from '../components/LogoForm'
 import { createLogo } from '../actions'
 
-export default function NewLogoPage() {
-  return (
-    <div>
-      <h1 className="text-2xl font-semibold mb-6">Add Brand Logo</h1>
-      <LogoForm action={createLogo} />
-    </div>
-  )
-}
+export default function NewLogoPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold mb-6">Add Brand Logo</h1>
+      <LogoForm action={createLogo} />
+    </div>
+  )
+}