create-nextblock 0.2.45 → 0.2.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.2.45",
+  "version": "0.2.47",
   "description": "",
   "main": "index.js",
   "bin": {

package/templates/nextblock-template/app/cms/blocks/components/BlockEditorArea.tsx

@@ -143,33 +143,51 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
       let SelectedEditor: React.ComponentType<any> | null = null;
 
       try {
-        switch (blockType) {
-          case 'text':
-            SelectedEditor = DynamicTextBlockEditor;
-            break;
-          case 'heading':
-            SelectedEditor = DynamicHeadingBlockEditor;
-            break;
-          case 'image':
-            SelectedEditor = DynamicImageBlockEditor;
-            break;
-          case 'button':
-            SelectedEditor = DynamicButtonBlockEditor;
-            break;
-          case 'posts_grid':
-            SelectedEditor = DynamicPostsGridBlockEditor;
-            break;
-          case 'video_embed':
-            SelectedEditor = DynamicVideoEmbedBlockEditor;
-            break;
-          case 'section':
-            SelectedEditor = DynamicSectionBlockEditor;
-            break;
-          default:
-            console.warn(`No dynamic editor configured for nested block type: ${blockType}`);
-            alert(`Error: Editor not configured for ${blockType}.`);
-            setEditingNestedBlockInfo(null);
-            return;
+        // Check block registry for editor component
+        const blockDef = getBlockDefinition(blockType);
+        
+        if (blockDef?.EditorComponent) {
+           SelectedEditor = blockDef.EditorComponent;
+        } else if (blockDef?.editorComponentFilename) {
+           // We can't easily do dynamic imports with variable paths inside this useEffect 
+           // without potentially breaking webpack analysis or needing a different strategy.
+           // However, for the core blocks, we have the pre-defined dynamic imports below.
+           
+           switch (blockType) {
+            case 'text':
+              SelectedEditor = DynamicTextBlockEditor;
+              break;
+            case 'heading':
+              SelectedEditor = DynamicHeadingBlockEditor;
+              break;
+            case 'image':
+              SelectedEditor = DynamicImageBlockEditor;
+              break;
+            case 'button':
+              SelectedEditor = DynamicButtonBlockEditor;
+              break;
+            case 'posts_grid':
+              SelectedEditor = DynamicPostsGridBlockEditor;
+              break;
+            case 'video_embed':
+              SelectedEditor = DynamicVideoEmbedBlockEditor;
+              break;
+            case 'section':
+              SelectedEditor = DynamicSectionBlockEditor;
+              break;
+            default:
+               // Fallback for custom blocks that might use file-based routing but aren't in the switch
+               // This might still fail if webpack hasn't bundled them, but it's worth a try or we need to explicitly add them.
+               // For the PoC Testimonial block, it has EditorComponent so it hits the first if.
+               console.warn(`No dynamic editor configured for nested block type: ${blockType}`);
+               alert(`Error: Editor not configured for ${blockType}.`);
+               setEditingNestedBlockInfo(null);
+               return;
+          }
+        } else {
+             console.warn(`No definition found for nested block type: ${blockType}`);
+             setEditingNestedBlockInfo(null);
+             return;
         }
         setNestedBlockEditorComponent(() => SelectedEditor);
         setTempNestedBlockContent(JSON.parse(JSON.stringify(editingNestedBlockInfo.blockData.content)));

package/templates/nextblock-template/app/cms/blocks/components/BlockEditorModal.tsx

@@ -33,7 +33,7 @@ type BlockEditorModalProps = {
   isOpen: boolean;
   onClose: () => void;
   onSave: (updatedContent: unknown) => void;
-  EditorComponent: LazyExoticComponent<ComponentType<BlockEditorProps<unknown>>>;
+  EditorComponent: LazyExoticComponent<ComponentType<BlockEditorProps<unknown>>> | ComponentType<BlockEditorProps<unknown>>;
 };
 
 export function BlockEditorModal({

package/templates/nextblock-template/app/cms/blocks/components/ColumnEditor.tsx

@@ -121,7 +121,7 @@ type EditingBlock = ColumnBlock & { index: number };
 export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, blockType }: ColumnEditorProps) {
   const [editingBlock, setEditingBlock] = useState<EditingBlock | null>(null);
   const [isBlockSelectorOpen, setIsBlockSelectorOpen] = useState(false);
-  const [LazyEditor, setLazyEditor] = useState<React.LazyExoticComponent<React.ComponentType<any>> | null>(null);
+  const [LazyEditor, setLazyEditor] = useState<React.LazyExoticComponent<React.ComponentType<any>> | React.ComponentType<any> | null>(null);
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
   const [blockToDeleteIndex, setBlockToDeleteIndex] = useState<number | null>(null);
 
@@ -169,8 +169,18 @@ export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, bloc
 
   const handleStartEdit = (block: ColumnBlock, index: number) => {
     const blockDef = getBlockDefinition(block.block_type);
-    if (blockDef && blockDef.editorComponentFilename) {
-      const Editor = lazy(() => import(`../editors/${blockDef.editorComponentFilename.replace(/\.tsx$/, '')}`));
+    if (!blockDef) {
+      console.error(`No definition found for block type: ${block.block_type}`);
+      return;
+    }
+
+    if (blockDef.EditorComponent) {
+      const Component = blockDef.EditorComponent;
+      setLazyEditor(() => Component);
+      setEditingBlock({ ...block, index });
+    } else if (blockDef.editorComponentFilename) {
+      const filename = blockDef.editorComponentFilename;
+      const Editor = lazy(() => import(`../editors/${filename.replace(/\.tsx$/, '')}`));
       setLazyEditor(Editor);
       setEditingBlock({ ...block, index });
     } else {

package/templates/nextblock-template/app/cms/blocks/components/EditableBlock.tsx

@@ -34,7 +34,7 @@ export default function EditableBlock({
   // Move all hooks to the top before any conditional returns
   const [isConfigPanelOpen, setIsConfigPanelOpen] = useState(false);
   const [editingBlock, setEditingBlock] = useState<Block | null>(null);
-  const [LazyEditor, setLazyEditor] = useState<LazyExoticComponent<ComponentType<any>> | null>(null);
+  const [LazyEditor, setLazyEditor] = useState<LazyExoticComponent<ComponentType<any>> | ComponentType<any> | null>(null);
 
   const SectionEditor = useMemo(() => {
     if (block?.block_type === 'section' || block?.block_type === 'hero') {
@@ -58,14 +58,21 @@ export default function EditableBlock({
     if (block.block_type === 'section' || block.block_type === 'hero') {
       setIsConfigPanelOpen(prev => !prev);
     } else {
-      const editorFilename = blockRegistry[block.block_type as BlockType]?.editorComponentFilename;
+      const blockDef = getBlockDefinition(block.block_type as BlockType);
+      
       if (block.block_type === 'posts_grid') {
         const LazifiedPostsGridEditor = lazy(() => Promise.resolve({ default: PostsGridBlockEditor }));
         setLazyEditor(LazifiedPostsGridEditor);
         setEditingBlock(block);
       }
-      else if (editorFilename) {
-        const Editor = lazy(() => import(`../editors/${editorFilename}`));
+      else if (blockDef?.EditorComponent) {
+        const Component = blockDef.EditorComponent;
+        setLazyEditor(() => Component);
+        setEditingBlock(block);
+      }
+      else if (blockDef?.editorComponentFilename) {
+        const filename = blockDef.editorComponentFilename;
+        const Editor = lazy(() => import(`../editors/${filename.replace(/\.tsx$/, '')}`));
         setLazyEditor(Editor);
         setEditingBlock(block);
       }

package/templates/nextblock-template/app/cms/dashboard/actions.ts

@@ -0,0 +1,98 @@
+'use server'
+
+import { createClient } from "@nextblock-cms/db/server";
+import { formatDistanceToNow } from 'date-fns';
+
+export type DashboardStats = {
+  totalPages: number;
+  totalPosts: number;
+  totalUsers: number;
+  recentContent: {
+    type: 'post' | 'page';
+    title: string;
+    author: string;
+    date: string;
+    status: string;
+  }[];
+  scheduledContent: {
+    title: string;
+    date: string;
+    type: string;
+  }[];
+};
+
+export async function getDashboardStats(): Promise<DashboardStats> {
+  const supabase = createClient();
+  const now = new Date().toISOString();
+
+  // Parallelize queries
+  const [
+    { count: totalPages },
+    { count: totalPosts },
+    { count: totalUsers },
+    { data: recentPosts },
+    { data: recentPages },
+    { data: scheduledPosts }
+  ] = await Promise.all([
+    supabase.from('pages').select('*', { count: 'exact', head: true }),
+    supabase.from('posts').select('*', { count: 'exact', head: true }),
+    supabase.from('profiles').select('*', { count: 'exact', head: true }),
+    
+    // Recent Posts
+    supabase.from('posts')
+      .select('title, status, updated_at, created_at, profiles(full_name)')
+      .order('updated_at', { ascending: false })
+      .limit(5),
+      
+    // Recent Pages
+    supabase.from('pages')
+      .select('title, status, updated_at, created_at')
+      .order('updated_at', { ascending: false })
+      .limit(5),
+
+    // Scheduled Posts (published_at > now)
+    supabase.from('posts')
+      .select('title, published_at')
+      .gt('published_at', now)
+      .order('published_at', { ascending: true })
+      .limit(5)
+  ]);
+
+  // Process Recent Content
+  const combinedRecent = [
+    ...(recentPosts?.map((p: any) => ({
+      type: 'post' as const,
+      title: p.title,
+      author: p.profiles?.full_name || 'Unknown',
+      date: p.updated_at || p.created_at,
+      status: p.status
+    })) || []),
+    ...(recentPages?.map((p: any) => ({
+      type: 'page' as const,
+      title: p.title,
+      author: 'System', // Pages don't always track author in this schema
+      date: p.updated_at || p.created_at,
+      status: p.status
+    })) || [])
+  ].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+   .slice(0, 5)
+   .map(item => ({
+     ...item,
+     date: formatDistanceToNow(new Date(item.date), { addSuffix: true })
+   }));
+
+  // Process Scheduled Content
+  const processedScheduled = (scheduledPosts || []).map((p: any) => ({
+    title: p.title,
+    date: new Date(p.published_at).toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }),
+    type: 'Post'
+  }));
+
+  return {
+    totalPages: totalPages || 0,
+    totalPosts: totalPosts || 0,
+    totalUsers: totalUsers || 0,
+    recentContent: combinedRecent,
+    scheduledContent: processedScheduled
+  };
+}

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

@@ -1,7 +1,10 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@nextblock-cms/ui"
-import { Calendar, FileText, PenTool, Users, ArrowUpRight, ArrowDownRight, Eye } from "lucide-react"
+import { Calendar, FileText, PenTool, Users, Eye } from "lucide-react"
+import { getDashboardStats } from "./actions"
+
+export default async function CmsDashboardPage() {
+  const stats = await getDashboardStats();
 
-export default function CmsDashboardPage() {
   return (
     <div className="w-full space-y-6">
       <div>
@@ -17,13 +20,10 @@ export default function CmsDashboardPage() {
             <FileText className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">24</div>
+            <div className="text-2xl font-bold">{stats.totalPages}</div>
             <p className="text-xs text-muted-foreground mt-1">
-              <span className="text-emerald-500 font-medium inline-flex items-center">
-                <ArrowUpRight className="h-3 w-3 mr-1" />
-                12%
-              </span>{" "}
-              from last month
+              {/* Trend data would require historical data, keeping static or hiding for now */}
+              <span className="text-muted-foreground opacity-50">Total pages on site</span>
             </p>
           </CardContent>
         </Card>
@@ -34,13 +34,9 @@ export default function CmsDashboardPage() {
             <PenTool className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">142</div>
-            <p className="text-xs text-muted-foreground mt-1">
-              <span className="text-emerald-500 font-medium inline-flex items-center">
-                <ArrowUpRight className="h-3 w-3 mr-1" />
-                8%
-              </span>{" "}
-              from last month
+            <div className="text-2xl font-bold">{stats.totalPosts}</div>
+             <p className="text-xs text-muted-foreground mt-1">
+              <span className="text-muted-foreground opacity-50">Total blog posts</span>
             </p>
           </CardContent>
         </Card>
@@ -51,30 +47,22 @@ export default function CmsDashboardPage() {
             <Eye className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">8,623</div>
+            <div className="text-2xl font-bold">--</div> {/* Placeholder */}
             <p className="text-xs text-muted-foreground mt-1">
-              <span className="text-emerald-500 font-medium inline-flex items-center">
-                <ArrowUpRight className="h-3 w-3 mr-1" />
-                24%
-              </span>{" "}
-              from last month
+               Analytics Integration Coming Soon
             </p>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium">Active Users</CardTitle>
+            <CardTitle className="text-sm font-medium">Total Users</CardTitle>
             <Users className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">573</div>
-            <p className="text-xs text-muted-foreground mt-1">
-              <span className="text-red-500 font-medium inline-flex items-center">
-                <ArrowDownRight className="h-3 w-3 mr-1" />
-                3%
-              </span>{" "}
-              from last month
+            <div className="text-2xl font-bold">{stats.totalUsers}</div>
+             <p className="text-xs text-muted-foreground mt-1">
+              <span className="text-muted-foreground opacity-50">Registered profiles</span>
             </p>
           </CardContent>
         </Card>
@@ -89,30 +77,34 @@ export default function CmsDashboardPage() {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {recentContent.map((item, index) => (
-                <div key={index} className="flex items-start gap-4 pb-4 border-b last:border-0 last:pb-0">
-                  <div
-                    className={`w-8 h-8 rounded-full flex items-center justify-center ${item.type === "page" ? "bg-blue-100 text-blue-600" : "bg-amber-100 text-amber-600"} dark:bg-opacity-20`}
-                  >
-                    {item.type === "page" ? <FileText className="h-4 w-4" /> : <PenTool className="h-4 w-4" />}
-                  </div>
-                  <div className="flex-1">
-                    <h4 className="text-sm font-medium">{item.title}</h4>
-                    <div className="flex items-center gap-2 mt-1">
-                      <p className="text-xs text-muted-foreground">{item.author}</p>
-                      <span className="text-xs text-muted-foreground">•</span>
-                      <p className="text-xs text-muted-foreground">{item.date}</p>
-                    </div>
-                  </div>
-                  <div className="flex items-center">
-                    <span
-                      className={`text-xs px-2 py-1 rounded-full ${item.status === "Published" ? "bg-emerald-100 text-emerald-700" : "bg-amber-100 text-amber-700"} dark:bg-opacity-20`}
+              {stats.recentContent.length === 0 ? (
+                <p className="text-sm text-muted-foreground">No recent content found.</p>
+              ) : (
+                stats.recentContent.map((item, index) => (
+                  <div key={index} className="flex items-start gap-4 pb-4 border-b last:border-0 last:pb-0">
+                    <div
+                      className={`w-8 h-8 rounded-full flex items-center justify-center ${item.type === "page" ? "bg-blue-100 text-blue-600" : "bg-amber-100 text-amber-600"} dark:bg-opacity-20`}
                     >
-                      {item.status}
-                    </span>
+                      {item.type === "page" ? <FileText className="h-4 w-4" /> : <PenTool className="h-4 w-4" />}
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="text-sm font-medium">{item.title}</h4>
+                      <div className="flex items-center gap-2 mt-1">
+                        <p className="text-xs text-muted-foreground">{item.author}</p>
+                        <span className="text-xs text-muted-foreground">•</span>
+                        <p className="text-xs text-muted-foreground">{item.date}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center">
+                      <span
+                        className={`text-xs px-2 py-1 rounded-full ${item.status === "published" ? "bg-emerald-100 text-emerald-700" : "bg-zinc-100 text-zinc-700"} dark:bg-opacity-20 uppercase`}
+                      >
+                        {item.status}
+                      </span>
+                    </div>
                   </div>
-                </div>
-              ))}
+                ))
+              )}
             </div>
           </CardContent>
         </Card>
@@ -124,26 +116,31 @@ export default function CmsDashboardPage() {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {scheduledContent.map((item, index) => (
-                <div key={index} className="flex items-start gap-4 pb-4 border-b last:border-0 last:pb-0">
-                  <div className="w-10 h-10 rounded bg-slate-100 dark:bg-slate-800 flex flex-col items-center justify-center text-center">
-                    <span className="text-xs font-medium">{item.month}</span>
-                    <span className="text-sm font-bold">{item.day}</span>
-                  </div>
-                  <div className="flex-1">
-                    <h4 className="text-sm font-medium">{item.title}</h4>
-                    <div className="flex items-center gap-2 mt-1">
-                      <Calendar className="h-3 w-3 text-muted-foreground" />
-                      <p className="text-xs text-muted-foreground">{item.time}</p>
+              {stats.scheduledContent.length === 0 ? (
+                 <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
+                    <Calendar className="h-8 w-8 mb-2 opacity-20" />
+                    <p>No content scheduled.</p>
+                 </div>
+              ) : (
+                stats.scheduledContent.map((item, index) => (
+                  <div key={index} className="flex items-start gap-4 pb-4 border-b last:border-0 last:pb-0">
+                    <div className="w-10 h-10 rounded bg-slate-100 dark:bg-slate-800 flex flex-col items-center justify-center text-center">
+                      <Calendar className="h-4 w-4 text-muted-foreground" />
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="text-sm font-medium">{item.title}</h4>
+                      <div className="flex items-center gap-2 mt-1">
+                        <p className="text-xs text-muted-foreground">{item.date}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center">
+                      <span className="text-xs px-2 py-1 rounded-full bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">
+                        {item.type}
+                      </span>
                     </div>
                   </div>
-                  <div className="flex items-center">
-                    <span className="text-xs px-2 py-1 rounded-full bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">
-                      {item.type}
-                    </span>
-                  </div>
-                </div>
-              ))}
+                ))
+              )}
             </div>
           </CardContent>
         </Card>
@@ -153,95 +150,21 @@ export default function CmsDashboardPage() {
       <Card>
         <CardHeader>
           <CardTitle>Traffic Overview</CardTitle>
-          <CardDescription>Page views over the last 30 days</CardDescription>
+          <CardDescription>Page views over the last 30 days (Mock Data)</CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="h-[200px] flex items-end gap-2">
-            {analyticsData.map((item, index) => (
-              <div key={index} className="flex-1 flex flex-col items-center">
-                <div
-                  className="w-full bg-primary/10 dark:bg-primary/20 rounded-sm"
-                  style={{ height: `${item.value}%` }}
-                ></div>
-                <span className="text-xs text-muted-foreground mt-2">{item.label}</span>
-              </div>
-            ))}
+          <div className="h-[200px] flex items-end gap-2 align-bottom">
+             {/* Mock chart bars */}
+             {[20, 45, 30, 80, 55, 40, 60, 30, 70, 45, 25, 65, 50, 40].map((h, i) => (
+                <div key={i} className="flex-1 bg-primary/20 hover:bg-primary/40 transition-colors rounded-t-sm relative group" style={{ height: `${h}%` }}>
+                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-black text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">
+                        {h * 10} views
+                    </div>
+                </div>
+             ))}
           </div>
         </CardContent>
       </Card>
     </div>
   )
 }
-
-// Sample data
-const recentContent = [
-  {
-    title: "Homepage Redesign",
-    type: "page",
-    author: "John Smith",
-    date: "Today, 2:30 PM",
-    status: "Published",
-  },
-  {
-    title: "New Product Launch",
-    type: "post",
-    author: "Sarah Johnson",
-    date: "Yesterday, 10:15 AM",
-    status: "Published",
-  },
-  {
-    title: "Q2 Marketing Strategy",
-    type: "post",
-    author: "Michael Brown",
-    date: "May 12, 2023",
-    status: "Draft",
-  },
-  {
-    title: "About Us Page",
-    type: "page",
-    author: "John Smith",
-    date: "May 10, 2023",
-    status: "Published",
-  },
-]
-
-const scheduledContent = [
-  {
-    title: "Summer Sale Announcement",
-    month: "May",
-    day: "20",
-    time: "9:00 AM",
-    type: "Post",
-  },
-  {
-    title: "New Feature Release",
-    month: "May",
-    day: "22",
-    time: "12:00 PM",
-    type: "Page",
-  },
-  {
-    title: "Customer Testimonials",
-    month: "May",
-    day: "25",
-    time: "3:30 PM",
-    type: "Post",
-  },
-  {
-    title: "Team Page Update",
-    month: "May",
-    day: "28",
-    time: "10:00 AM",
-    type: "Page",
-  },
-]
-
-const analyticsData = [
-  { label: "1", value: 20 },
-  { label: "5", value: 40 },
-  { label: "10", value: 35 },
-  { label: "15", value: 50 },
-  { label: "20", value: 30 },
-  { label: "25", value: 80 },
-  { label: "30", value: 60 },
-]

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

@@ -5,11 +5,13 @@ import React, { useState, useTransition, useEffect } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 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 { Textarea } from '@nextblock-cms/ui';
 import type { Database } from '@nextblock-cms/db';
 import { useAuth } from '@/context/AuthContext';
+import { useHotkeys } from '@/hooks/use-hotkeys';
 
 type Media = Database['public']['Tables']['media']['Row'];
 import { FileText } from 'lucide-react';
@@ -74,6 +76,9 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
     return <div>Access Denied. You do not have permission to edit media.</div>;
   }
 
+  const formRef = React.useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
+
   return (
     <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
       <div className="md:col-span-1 space-y-4">
@@ -101,17 +106,11 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
         </div>
       </div>
 
-      <form onSubmit={handleSubmit} className="md:col-span-2 space-y-6">
+      <form ref={formRef} onSubmit={handleSubmit} className="md:col-span-2 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'} className="mb-4">
+             <AlertDescription>{formMessage.text}</AlertDescription>
+          </Alert>
         )}
         <div>
           <Label htmlFor="file_name">Display Name</Label>
@@ -148,7 +147,13 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
             Cancel
           </Button>
           <Button type="submit" disabled={isPending || authLoading}>
-            {isPending ? "Saving..." : "Update Media Info"}
+            {isPending ? (
+            <>
+              <Spinner className="mr-2 h-4 w-4" /> Saving...
+            </>
+          ) : (
+            "Update Media Info"
+          )}
           </Button>
         </div>
       </form>