create-nextblock 0.0.1

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

@@ -0,0 +1,98 @@
+// app/cms/navigation/components/SortableNavItem.tsx
+"use client";
+
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { TableCell, TableRow } from "@nextblock-cms/ui";
+import { Button } from '@nextblock-cms/ui';
+import { Badge } from "@nextblock-cms/ui";
+import { GripVertical, MoreHorizontal, Edit3 } from 'lucide-react';
+import Link from 'next/link';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@nextblock-cms/ui";
+import DeleteNavItemButton from "./DeleteNavItemButton"; // Assuming this exists and works
+import type { Database } from '@nextblock-cms/db'; // Ensure this path is correct
+
+type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
+
+// Extended NavItem type for rendering
+export interface HierarchicalNavItem extends NavigationItem {
+  id: number; // Ensure id is number if it comes from DB as bigint
+  children: HierarchicalNavItem[];
+  parentLabel?: string | null;
+  pageSlug?: string | null;
+  languageCode: string; // Added for consistency if needed
+  depth: number;
+  parentItem?: HierarchicalNavItem | null; // Direct reference to the parent
+}
+
+interface SortableNavItemProps {
+  item: HierarchicalNavItem;
+  // Add any other props needed for actions, like onDelete, onEdit
+}
+
+export function SortableNavItem({ item }: SortableNavItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: item.id });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition || undefined, // Ensure transition is not null
+    opacity: isDragging ? 0.7 : 1,
+    zIndex: isDragging ? 100 : 'auto',
+  };
+
+  return (
+    <TableRow ref={setNodeRef} style={style} {...attributes} className={isDragging ? "bg-muted" : ""}>
+      <TableCell style={{ paddingLeft: `${item.depth * 20 + 16}px` }} className="py-2"> {/* Indentation + original padding */}
+        <div className="flex items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            {...listeners} // Drag handle
+            className="cursor-grab mr-2 p-1"
+            aria-label="Drag to reorder"
+          >
+            <GripVertical className="h-4 w-4 text-muted-foreground" />
+          </Button>
+          <span className="font-medium">{item.label}</span>
+        </div>
+      </TableCell>
+      <TableCell className="text-xs text-muted-foreground max-w-[150px] truncate py-2" title={item.url}>
+        {item.url}
+      </TableCell>
+      <TableCell className="py-2"><Badge variant="outline">{item.order}</Badge></TableCell>
+      <TableCell className="text-xs text-muted-foreground py-2">{item.parentLabel || 'None'}</TableCell>
+      <TableCell className="text-xs text-muted-foreground py-2">{item.pageSlug ? `/${item.pageSlug}` : 'Manual URL'}</TableCell>
+      <TableCell className="text-right py-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon">
+              <MoreHorizontal className="h-4 w-4" />
+              <span className="sr-only">Item actions for {item.label}</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem asChild>
+              <Link href={`/cms/navigation/${item.id}/edit`} className="flex items-center">
+                <Edit3 className="mr-2 h-4 w-4" /> Edit
+              </Link>
+            </DropdownMenuItem>
+            <DeleteNavItemButton itemId={item.id} />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </TableCell>
+    </TableRow>
+  );
+}

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

@@ -0,0 +1,26 @@
+// app/cms/navigation/new/page.tsx
+import NavigationItemForm from "../components/NavigationItemForm";
+import { createNavigationItem } from "../actions";
+import { getLanguages, getNavigationItems, getPages } from "../utils";
+
+export default async function NewNavigationItemPage() {
+  const [languages, navigationItems, pages] = await Promise.all([
+    getLanguages(),
+    getNavigationItems(),
+    getPages(),
+  ]);
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <h1 className="text-2xl font-bold mb-6">Create New Navigation Item</h1>
+      <NavigationItemForm
+        formAction={createNavigationItem}
+        actionButtonText="Create Item"
+        isEditing={false}
+        languages={languages}
+        parentItems={navigationItems}
+        pages={pages}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,102 @@
+// app/cms/navigation/page.tsx
+import { createClient } from "@nextblock-cms/db/server";
+import Link from "next/link";
+import { Button } from "@nextblock-cms/ui";
+import { PlusCircle, ListTree } from "lucide-react";
+import type { Database } from "@nextblock-cms/db";
+import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
+
+type NavigationItem = Database['public']['Tables']['navigation_items']['Row'] & { pages?: { slug: string } | null };
+type MenuLocation = Database['public']['Enums']['menu_location'];
+import NavigationMenuDnd from "./components/NavigationMenuDnd"; // Import the new DND component
+
+
+// This function fetches ALL navigation items.
+// Grouping and hierarchical transformation will happen in the client component.
+async function getAllNavigationItems(): Promise<NavigationItem[]> {
+  const supabase = createClient();
+  const { data: items, error: itemsError } = await supabase
+    .from("navigation_items")
+    .select("*, pages (slug)") // Fetch linked page slug directly
+    .order("menu_key")
+    .order("language_id")
+    .order("parent_id", { nullsFirst: true })
+    .order("order");
+
+  if (itemsError) {
+    console.error("Error fetching all navigation items:", itemsError);
+    return [];
+  }
+  return items || [];
+}
+
+export default async function CmsNavigationListPage() {
+  const allNavItemsFlat = await getAllNavigationItems();
+  const allLanguages = await getActiveLanguagesServerSide();
+
+  // Group items by menu_key and then by language_id for passing to NavigationMenuDnd
+  const groupedItemsForDnd: Record<string, Record<number, NavigationItem[]>> = {};
+  allNavItemsFlat.forEach(item => {
+    if (!groupedItemsForDnd[item.menu_key]) {
+      groupedItemsForDnd[item.menu_key] = {};
+    }
+    if (!groupedItemsForDnd[item.menu_key][item.language_id]) {
+      groupedItemsForDnd[item.menu_key][item.language_id] = [];
+    }
+    groupedItemsForDnd[item.menu_key][item.language_id].push(item);
+  });
+
+  return (
+    <div className="w-full">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-semibold">Manage Navigation</h1>
+        <Button variant="default" asChild>
+          <Link href="/cms/navigation/new">
+            <PlusCircle className="mr-2 h-4 w-4" /> Create New Item
+          </Link>
+        </Button>
+      </div>
+
+      {allNavItemsFlat.length === 0 ? (
+        <div className="text-center py-10 border rounded-lg">
+          <ListTree className="mx-auto h-12 w-12 text-muted-foreground" />
+          <h3 className="mt-2 text-sm font-medium text-foreground">No navigation items found</h3>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Get started by creating a new navigation item.
+          </p>
+          <div className="mt-6">
+            <Button asChild>
+              <Link href="/cms/navigation/new">
+                <PlusCircle className="mr-2 h-4 w-4" /> Create Item
+              </Link>
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-8">
+          {Object.entries(groupedItemsForDnd).map(([menuKey, langGroups]) => (
+            <div key={menuKey}>
+              <h2 className="text-xl font-semibold mb-3 capitalize">{menuKey.toLowerCase()} Menus</h2>
+              {Object.entries(langGroups).map(([langIdStr, itemsInLang]) => {
+                const languageId = parseInt(langIdStr, 10);
+                const language = allLanguages.find(l => l.id === languageId);
+                if (!language) return null; // Should not happen if data is consistent
+
+                return (
+                 <div key={`${menuKey}-${languageId}`} className="mb-6 p-4 border rounded-lg shadow-sm bg-card">
+                    <h3 className="text-lg font-medium mb-4">Language: {language.name} ({language.code.toUpperCase()})</h3>
+                    <NavigationMenuDnd
+                        menuKey={menuKey as MenuLocation}
+                        languageCode={language.code}
+                        initialItems={itemsInLang}
+                    />
+                 </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/navigation/utils.ts

@@ -0,0 +1,51 @@
+// app/cms/navigation/utils.ts
+"use server";
+
+import { createClient } from "@nextblock-cms/db/server";
+
+export async function getLanguages() {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("languages")
+    .select("id, code, name, is_default, is_active, created_at, updated_at")
+    .eq("is_active", true)
+    .order("name");
+
+  if (error) {
+    console.error("Error fetching languages:", error);
+    throw new Error("Could not fetch languages.");
+  }
+
+  return data;
+}
+
+export async function getNavigationItems() {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("navigation_items")
+    .select("id, label, language_id, menu_key, parent_id, translation_group_id")
+    .order("order");
+
+  if (error) {
+    console.error("Error fetching navigation items:", error);
+    throw new Error("Could not fetch navigation items.");
+  }
+
+  return data;
+}
+
+export async function getPages() {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("pages")
+    .select("id, title, slug, language_id")
+    .eq("status", "published")
+    .order("title");
+
+  if (error) {
+    console.error("Error fetching pages:", error);
+    throw new Error("Could not fetch pages.");
+  }
+
+  return data;
+}

package/templates/nextblock-template/app/cms/pages/[id]/edit/EditPageClient.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import Link from "next/link";
+import React from "react";
+import { Separator } from "@nextblock-cms/ui";
+import { Button } from "@nextblock-cms/ui";
+import { Eye, ArrowLeft } from "lucide-react";
+import PageForm from "../../components/PageForm";
+import BlockEditorArea from "@/app/cms/blocks/components/BlockEditorArea";
+import ContentLanguageSwitcher from "@/app/cms/components/ContentLanguageSwitcher";
+import CopyContentFromLanguage from "@/app/cms/components/CopyContentFromLanguage";
+import RevisionHistoryButton from "@/app/cms/revisions/RevisionHistoryButton";
+import { UploadFolderProvider } from "@/app/cms/media/UploadFolderContext";
+import type { Database } from "@nextblock-cms/db";
+
+type Page = Database["public"]["Tables"]["pages"]["Row"];
+type Block = Database["public"]["Tables"]["blocks"]["Row"];
+type Language = Database["public"]["Tables"]["languages"]["Row"];
+
+interface PageWithBlocks extends Page {
+  blocks: Block[];
+  language_code?: string;
+  translation_group_id: string;
+}
+
+interface EditPageClientProps {
+  page: PageWithBlocks;
+  pageId: number;
+  allSiteLanguages: Language[];
+  updatePageAction: (formData: FormData) => Promise<{ error?: string } | void>;
+  publicPageUrl: string;
+}
+
+export default function EditPageClient({
+  page,
+  pageId,
+  allSiteLanguages,
+  updatePageAction,
+  publicPageUrl,
+}: EditPageClientProps) {
+  return (
+    <UploadFolderProvider defaultFolder={`pages/${page.slug}/`}>
+      <div className="space-y-8 w-full mx-auto px-6">
+        <div className="flex justify-between items-center flex-wrap gap-4 w-full">
+          <div className="flex items-center gap-3">
+            <Button
+              variant="outline"
+              size="icon"
+              aria-label="Back to pages"
+              asChild
+            >
+              <Link href="/cms/pages">
+                <ArrowLeft className="h-4 w-4" />
+              </Link>
+            </Button>
+            <div>
+              <h1 className="text-2xl font-bold">Edit Page</h1>
+              <p
+                className="text-sm text-muted-foreground truncate max-w-md"
+                title={page.title}
+              >
+                {page.title}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3 flex-wrap">
+            {allSiteLanguages.length > 0 && (
+              <ContentLanguageSwitcher
+                currentItem={{
+                  ...page,
+                  translation_group_id: page.translation_group_id ?? "",
+                }}
+                itemType="page"
+                allSiteLanguages={allSiteLanguages}
+              />
+            )}
+            {page.translation_group_id && allSiteLanguages.length > 1 && (
+              <CopyContentFromLanguage
+                parentId={pageId}
+                parentType="page"
+                currentLanguageId={page.language_id}
+                translationGroupId={page.translation_group_id}
+                allSiteLanguages={allSiteLanguages}
+              />
+            )}
+            <Button variant="outline" asChild>
+              <Link
+                href={publicPageUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Eye className="mr-2 h-4 w-4" /> View Live
+              </Link>
+            </Button>
+            <RevisionHistoryButton parentType="page" parentId={pageId} />
+          </div>
+        </div>
+
+        <PageForm
+          page={page}
+          formAction={updatePageAction}
+          actionButtonText="Update Page Metadata"
+          isEditing={true}
+          availableLanguagesProp={allSiteLanguages}
+        />
+
+        <Separator className="my-8" />
+
+        <div className="w-full mx-auto px-6">
+          <h2 className="text-xl font-semibold mb-4">Page Content Blocks</h2>
+          <BlockEditorArea
+            parentId={page.id}
+            parentType="page"
+            initialBlocks={page.blocks}
+            languageId={page.language_id}
+          />
+        </div>
+      </div>
+    </UploadFolderProvider>
+  );
+}

package/templates/nextblock-template/app/cms/pages/[id]/edit/page.tsx

@@ -0,0 +1,79 @@
+// app/cms/pages/[id]/edit/page.tsx
+import React from "react";
+import { createClient } from "@nextblock-cms/db/server";
+import { updatePage } from "../../actions";
+import type { Database } from "@nextblock-cms/db";
+import { notFound, redirect } from "next/navigation";
+
+type Page = Database['public']['Tables']['pages']['Row'];
+type Block = Database['public']['Tables']['blocks']['Row'];
+type Language = Database['public']['Tables']['languages']['Row'];
+import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
+import EditPageClient from "./EditPageClient";
+
+// ... (Interface PageWithBlocks and getPageDataWithBlocks remain the same) ...
+interface PageWithBlocks extends Page {
+  blocks: Block[];
+  language_code?: string;
+  translation_group_id: string;
+}
+
+async function getPageDataWithBlocks(id: number): Promise<PageWithBlocks | null> {
+  const supabase = createClient();
+  const { data: pageData, error: pageError } = await supabase
+    .from("pages")
+    .select(`
+      *,
+      languages!inner (code),
+      blocks (*)
+    `)
+    .eq("id", id)
+    .order('order', { foreignTable: 'blocks', ascending: true })
+    .single();
+
+  if (pageError) {
+    console.error("Error fetching page with blocks for edit:", pageError);
+    return null;
+  }
+
+  const langCode = Array.isArray(pageData.languages)
+    ? pageData.languages[0]?.code
+    : (pageData.languages as Language)?.code;
+
+  return { ...pageData, blocks: pageData.blocks || [], language_code: langCode } as PageWithBlocks;
+}
+
+
+export default async function EditPage(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
+  const pageId = parseInt(params.id, 10);
+  if (isNaN(pageId)) return notFound();
+
+  const supabase = createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return redirect(`/sign-in?redirect=/cms/pages/${pageId}/edit`);
+  const { data: profile } = await supabase.from('profiles').select('role').eq('id', user.id).single();
+  if (!profile || !['ADMIN', 'WRITER'].includes(profile.role)) {
+      return <div className="p-6">Access Denied.</div>;
+  }
+
+  const [pageWithBlocks, allSiteLanguages] = await Promise.all([
+    getPageDataWithBlocks(pageId),
+    getActiveLanguagesServerSide()
+  ]);
+
+  if (!pageWithBlocks) return notFound();
+
+  const updatePageWithId = updatePage.bind(null, pageId);
+  const publicPageUrl = `/${pageWithBlocks.slug}`;
+
+  return (
+    <EditPageClient
+      page={pageWithBlocks}
+      pageId={pageId}
+      allSiteLanguages={allSiteLanguages}
+      updatePageAction={updatePageWithId}
+      publicPageUrl={publicPageUrl}
+    />
+  );
+}