create-nextblock 0.0.1

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

@@ -0,0 +1,232 @@
+// app/cms/pages/page.tsx
+import React from "react";
+import { createClient } from "@nextblock-cms/db/server";
+import Link from "next/link";
+import { Button } from "@nextblock-cms/ui";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@nextblock-cms/ui";
+import { Badge } from "@nextblock-cms/ui";
+import {
+  MoreHorizontal,
+  PlusCircle,
+  Edit3,
+  FileText,
+} from "lucide-react"; // Trash2 removed from here
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@nextblock-cms/ui";
+// Server action `deletePage` is used by DeletePageButtonClient
+import type { Database } from "@nextblock-cms/db";
+import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
+
+type Page = Database["public"]["Tables"]["pages"]["Row"];
+import LanguageFilterSelect from "@/app/cms/components/LanguageFilterSelect";
+import DeletePageButtonClient from "./components/DeletePageButtonClient"; // Import the client component
+
+async function getPagesWithDetails(
+  filterLanguageId?: number
+): Promise<{ page: Page; languageCode: string }[]> {
+  const supabase = createClient();
+  const languages = await getActiveLanguagesServerSide();
+  const langMap = new Map(languages.map((l) => [l.id, l.code]));
+
+  let query = supabase
+    .from("pages")
+    .select("*, languages!inner(code)")
+    .order("created_at", { ascending: false });
+
+  if (filterLanguageId) {
+    query = query.eq("language_id", filterLanguageId);
+  }
+
+  const { data: pagesData, error } = await query;
+
+  if (error) {
+    console.error("Error fetching pages:", error);
+    return [];
+  }
+  if (!pagesData) return [];
+
+  return pagesData.map((p) => {
+    const langInfo = p.languages as unknown as { code: string } | null;
+    return {
+      page: p as Page,
+      languageCode:
+        langInfo?.code?.toUpperCase() ||
+        langMap.get(p.language_id)?.toUpperCase() ||
+        "N/A",
+    };
+  });
+}
+
+interface CmsPagesListPageProps {
+  searchParams?: Promise<{
+    lang?: string;
+    success?: string;
+  }>;
+}
+
+export default async function CmsPagesListPage(props: CmsPagesListPageProps) {
+  const searchParams = await props.searchParams;
+  const allLanguages = await getActiveLanguagesServerSide();
+  const selectedLangId = searchParams?.lang
+    ? parseInt(searchParams.lang, 10)
+    : undefined;
+
+  const isValidLangId = selectedLangId
+    ? allLanguages.some((l) => l.id === selectedLangId)
+    : true;
+  const filterLangId = isValidLangId ? selectedLangId : undefined;
+
+  const pagesWithDetails = await getPagesWithDetails(filterLangId);
+  const successMessage = searchParams?.success;
+
+  return (
+    <div className="w-full">
+      <div className="flex justify-between items-center mb-6 flex-wrap gap-4">
+        <h1 className="text-2xl font-semibold">Manage Pages</h1>
+        <div className="flex items-center gap-3">
+          <LanguageFilterSelect
+            allLanguages={allLanguages}
+            currentFilterLangId={filterLangId}
+            basePath="/cms/pages"
+          />
+          <Button variant="default" asChild>
+            <Link href="/cms/pages/new">
+              <PlusCircle className="mr-2 h-4 w-4" /> Create New Page
+            </Link>
+          </Button>
+        </div>
+      </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>
+      )}
+
+      {pagesWithDetails.length === 0 ? (
+        <div className="text-center py-10 border rounded-lg dark:border-slate-700">
+          <FileText className="mx-auto h-12 w-12 text-muted-foreground" />
+          <h3 className="mt-2 text-sm font-medium text-foreground">
+            {filterLangId
+              ? "No pages found for the selected language."
+              : "No pages found."}
+          </h3>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Get started by creating a new page.
+          </p>
+          <div className="mt-6">
+            <Button asChild>
+              <Link href="/cms/pages/new">
+                <PlusCircle className="mr-2 h-4 w-4" /> Create Page
+              </Link>
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="rounded-lg border overflow-hidden dark:border-slate-700">
+          <Table>
+            <TableHeader>
+              <TableRow className="dark:border-slate-700">
+                <TableHead className="w-[300px] sm:w-[400px]">Title</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Language</TableHead>
+                <TableHead className="hidden md:table-cell">Slug</TableHead>
+                <TableHead className="hidden lg:table-cell">
+                  Last Updated
+                </TableHead>
+                <TableHead className="text-right w-[80px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {pagesWithDetails.map(({ page, languageCode }) => (
+                <TableRow key={page.id} className="dark:border-slate-700">
+                  <TableCell className="font-medium">
+                    <Link
+                      href={`/cms/pages/${page.id}/edit`}
+                      className="flex items-center cursor-pointer"
+                    >
+                      <Edit3 className="mr-2 h-4 w-4" />
+                      {page.title}
+                    </Link>
+                  </TableCell>
+                  <TableCell>
+                    <Badge
+                      variant={
+                        page.status === "published"
+                          ? "default"
+                          : page.status === "draft"
+                            ? "secondary"
+                            : "destructive"
+                      }
+                      className={
+                        page.status === "published"
+                          ? "bg-green-100 text-green-700 dark:bg-green-700/30 dark:text-green-300 dark:border-green-700/50"
+                          : page.status === "draft"
+                            ? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700/30 dark:text-yellow-300 dark:border-yellow-700/50"
+                            : "bg-slate-100 text-slate-700 dark:bg-slate-700/30 dark:text-slate-300 dark:border-slate-600"
+                      }
+                    >
+                      {page.status.charAt(0).toUpperCase() +
+                        page.status.slice(1)}
+                    </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">
+                    /{page.slug}
+                  </TableCell>
+                  <TableCell className="hidden lg:table-cell text-xs text-muted-foreground">
+                    {new Date(page.updated_at).toLocaleDateString()}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <MoreHorizontal className="h-4 w-4" />
+                          <span className="sr-only">
+                            Page actions for {page.title}
+                          </span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem asChild>
+                          <Link
+                            href={`/cms/pages/${page.id}/edit`}
+                            className="flex items-center cursor-pointer"
+                          >
+                            <Edit3 className="mr-2 h-4 w-4" /> Edit
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        {/* Use the Client Component for the delete button */}
+                        <DeletePageButtonClient
+                          pageId={page.id}
+                          pageTitle={page.title}
+                        />
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,183 @@
+// app/cms/posts/[id]/edit/page.tsx
+import React from "react";
+import { Separator } from "@nextblock-cms/ui";
+import { createClient } from "@nextblock-cms/db/server";
+import PostForm from "../../components/PostForm"; // Adjusted path
+import { updatePost } from "../../actions";
+import type { Database } from "@nextblock-cms/db"; // Ensure Language and Media are imported
+import { notFound, redirect } from "next/navigation";
+
+type PostType = Database['public']['Tables']['posts']['Row'];
+type BlockType = Database['public']['Tables']['blocks']['Row'];
+type Language = Database['public']['Tables']['languages']['Row'];
+import BlockEditorArea from "@/app/cms/blocks/components/BlockEditorArea";
+import Link from "next/link";
+import { Button } from "@nextblock-cms/ui";
+import { Eye, ArrowLeft } from "lucide-react"; // Removed SeparatorVertical, use <Separator />
+import ContentLanguageSwitcher from "@/app/cms/components/ContentLanguageSwitcher";
+import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server"; // Correct server-side fetch
+import CopyContentFromLanguage from "@/app/cms/components/CopyContentFromLanguage";
+import { UploadFolderProvider } from "@/app/cms/media/UploadFolderContext";
+import RevisionHistoryButton from "@/app/cms/revisions/RevisionHistoryButton";
+
+interface PostWithBlocks extends PostType {
+  blocks: BlockType[];
+  language_code?: string; // From joined languages table
+  translation_group_id: string;
+}
+
+async function getPostDataWithBlocks(id: number): Promise<PostWithBlocks | null> {
+  const supabase = createClient();
+  const { data: postData, error: postError } = await supabase
+    .from("posts")
+    .select(`
+      *,
+      languages!inner (code),
+      blocks (*)
+    `)
+    .eq("id", id)
+    .order('order', { foreignTable: 'blocks', ascending: true })
+    .single();
+
+  if (postError) {
+    console.error("Error fetching post with blocks for edit:", postError);
+    return null;
+  }
+
+  const langCode = (postData.languages as unknown as Language)?.code;
+
+  return {
+    ...postData,
+    blocks: postData.blocks || [],
+    language_code: langCode,
+    translation_group_id: postData.translation_group_id,
+  } as PostWithBlocks;
+}
+
+export default async function EditPostPage(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
+  const postId = parseInt(params.id, 10);
+  if (isNaN(postId)) {
+    return notFound();
+  }
+
+  const supabase = createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return redirect(`/sign-in?redirect=/cms/posts/${postId}/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 text-center text-red-600">Access Denied. You do not have permission to edit posts.</div>;
+  }
+
+  // Fetch post data and all site languages concurrently
+  const [postWithBlocks, allSiteLanguages] = await Promise.all([
+    getPostDataWithBlocks(postId),
+    getActiveLanguagesServerSide() // Fetch languages on the server
+  ]);
+
+  if (!postWithBlocks) {
+    return notFound();
+  }
+
+  let initialFeatureImageUrl: string | null = null;
+  let initialFeatureImageIdProp: string | null = null;
+
+  // The PostType defines feature_image_id as number | null.
+  // However, Media.id is a string (uuid), and PostForm expects a string UUID.
+  // This assumes that postWithBlocks.feature_image_id, despite its 'number' typing,
+  // actually holds a value that can be used to identify a media item by its UUID,
+  // or that the type definition for Post.feature_image_id is outdated.
+  // Casting to `unknown` then `string` for the query.
+  const featureImageIdFromDb = postWithBlocks.feature_image_id as unknown as (string | number | null);
+
+  if (featureImageIdFromDb) {
+    const { data: mediaItem, error: mediaError } = await supabase
+      .from("media")
+      .select("id, object_key")
+      .eq("id", String(featureImageIdFromDb)) // Query using the ID as string
+      .single();
+
+    if (mediaError) {
+      console.error(`Error fetching media item for feature_image_id '${featureImageIdFromDb}':`, mediaError.message);
+      // Not critical enough to notFound(), form will just not have initial image.
+    } else if (mediaItem) {
+      initialFeatureImageIdProp = mediaItem.id; // string UUID from media table
+      const r2BaseUrl = process.env.NEXT_PUBLIC_R2_BASE_URL;
+      if (r2BaseUrl && mediaItem.object_key) {
+        initialFeatureImageUrl = `${r2BaseUrl}/${mediaItem.object_key}`;
+      } else if (!r2BaseUrl) {
+        console.warn("NEXT_PUBLIC_R2_PUBLIC_URL is not set. Cannot construct feature image URL for edit page.");
+      }
+    }
+  }
+
+  const updatePostWithId = updatePost.bind(null, postId);
+  const publicPostUrl = `/blog/${postWithBlocks.slug}`;
+  
+  return (
+    <UploadFolderProvider defaultFolder={`posts/${postWithBlocks.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 posts" asChild>
+                <Link href="/cms/posts">
+                    <ArrowLeft className="h-4 w-4" />
+                </Link>
+            </Button>
+            <div>
+                <h1 className="text-2xl font-bold">Edit Post</h1>
+                <p className="text-sm text-muted-foreground truncate max-w-md" title={postWithBlocks.title}>{postWithBlocks.title}</p>
+            </div>
+        </div>
+        <div className="flex items-center gap-3 flex-wrap"> {/* Added flex-wrap for responsiveness */}
+            {allSiteLanguages.length > 0 && (
+                 <ContentLanguageSwitcher
+                    currentItem={postWithBlocks}
+                    itemType="post"
+                    allSiteLanguages={allSiteLanguages}
+                  />
+            )}
+            {postWithBlocks.translation_group_id && allSiteLanguages.length > 1 && (
+              <CopyContentFromLanguage
+                parentId={postId}
+                parentType="post"
+                currentLanguageId={postWithBlocks.language_id}
+                translationGroupId={postWithBlocks.translation_group_id}
+                allSiteLanguages={allSiteLanguages}
+              />
+            )}
+            <Button variant="outline" asChild>
+              <Link href={publicPostUrl} target="_blank" rel="noopener noreferrer">
+                <Eye className="mr-2 h-4 w-4" /> View Live Post
+              </Link>
+            </Button>
+            <RevisionHistoryButton parentType="post" parentId={postId} />
+        </div>
+      </div>
+
+      <PostForm
+        post={postWithBlocks as PostType & { feature_image_id?: string | null }} // Asserting feature_image_id might be string for PostForm
+        formAction={updatePostWithId}
+        actionButtonText="Update Post Metadata"
+        isEditing={true}
+        availableLanguagesProp={allSiteLanguages}
+        initialFeatureImageUrl={initialFeatureImageUrl}
+        initialFeatureImageId={initialFeatureImageIdProp}
+      />
+
+      <Separator className="my-8" />
+
+      <div className="w-full mx-auto px-6">
+        <h2 className="text-xl font-semibold mb-4">Post Content Blocks</h2>
+        <BlockEditorArea
+          parentId={postWithBlocks.id}
+          parentType="post"
+          initialBlocks={postWithBlocks.blocks}
+          languageId={postWithBlocks.language_id}
+        />
+      </div>
+    </div>
+    </UploadFolderProvider>
+  );
+}