create-nextblock 0.2.51 → 0.2.53

package/package.json

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

package/templates/nextblock-template/app/actions/feedback.ts

@@ -0,0 +1,53 @@
+"use server";
+
+import { sendEmail } from "./email";
+
+
+interface FeedbackData {
+  subject: string;
+  message: string;
+  userEmail: string;
+  userName?: string;
+  url?: string;
+}
+
+export async function submitFeedback(data: FeedbackData) {
+  try {
+    // If we have an email config, we use it. If not, we might fail or log.
+    // sendEmail throws if not configured.
+    
+    const { subject, message, userEmail, userName, url } = data;
+    
+    const htmlContent = `
+      <h2>New Feedback Received</h2>
+      <p><strong>From:</strong> ${userName || 'Unknown'} (${userEmail})</p>
+      <p><strong>Subject:</strong> ${subject}</p>
+      <p><strong>URL:</strong> ${url || 'N/A'}</p>
+      <br/>
+      <h3>Message:</h3>
+      <p style="white-space: pre-wrap;">${message}</p>
+    `;
+
+    const textContent = `
+      New Feedback Received
+      From: ${userName || 'Unknown'} (${userEmail})
+      Subject: ${subject}
+      URL: ${url || 'N/A'}
+
+      Message:
+      ${message}
+    `;
+
+    await sendEmail({
+      to: "feedback@nextblock.ca", // Fixed typo from 'feeedback'
+      subject: `[CMS Feedback] ${subject}`,
+      text: textContent,
+      html: htmlContent,
+    });
+
+    return { success: true };
+  } catch (error) {
+    console.error("Failed to submit feedback:", error);
+    return { success: false, error: "Failed to send feedback email." };
+  }
+}

package/templates/nextblock-template/app/cms/CmsClientLayout.tsx

@@ -5,15 +5,16 @@ import React, { type ReactNode, useEffect } from "react"
 import { useAuth } from "@/context/AuthContext"
 import { useRouter, usePathname } from "next/navigation" // Import usePathname
 import Link from "next/link"
-import {
-  LayoutDashboard, FileText, PenTool, Users, Settings, ChevronRight, LogOut, Menu, ListTree, Image as ImageIconLucide, X, Languages as LanguagesIconLucide, MessageSquare,
-  Copyright as CopyrightIcon,
-} from "lucide-react"
-import { Button } from "@nextblock-cms/ui"
-import { Avatar, AvatarFallback, AvatarImage } from "@nextblock-cms/ui"
-import { cn } from "@nextblock-cms/utils"
-import { signOutAction } from "@/app/actions";
-import Image from "next/image";
+import {
+  LayoutDashboard, FileText, PenTool, Users, Settings, ChevronRight, LogOut, Menu, ListTree, Image as ImageIconLucide, X, Languages as LanguagesIconLucide, MessageSquare,
+  Copyright as CopyrightIcon,
+} from "lucide-react"
+import { Button } from "@nextblock-cms/ui"
+import { Avatar, AvatarFallback, AvatarImage } from "@nextblock-cms/ui"
+import { cn } from "@nextblock-cms/utils"
+import { signOutAction } from "@/app/actions";
+import Image from "next/image";
+import { FeedbackModal } from "./components/FeedbackModal";
 
 const LoadingSpinner = () => (
   <div className="flex justify-center items-center h-full w-full py-20">
@@ -211,21 +212,21 @@ export default function CmsClientLayout({ children }: { children: ReactNode }) {
         )}
       >
         <div className="flex flex-col h-full">
-          <div className="p-4 border-b dark:border-slate-700/60 h-16 flex items-center shrink-0">
-            <Link href="/cms/dashboard" className="flex items-center gap-2 px-2">
-              <Image
-                src="/images/nextblock-logo-small.webp"
-                alt="Nextblock logo"
-                width={32}
-                height={32}
-                className="h-8 w-auto"
-                priority
-              />
-              <h2 className="text-xl font-bold text-foreground">
-                Nextblock CMS
-              </h2>
-            </Link>
-          </div>
+          <div className="p-4 border-b dark:border-slate-700/60 h-16 flex items-center shrink-0">
+            <Link href="/cms/dashboard" className="flex items-center gap-2 px-2">
+              <Image
+                src="/images/nextblock-logo-small.webp"
+                alt="Nextblock logo"
+                width={32}
+                height={32}
+                className="h-8 w-auto"
+                priority
+              />
+              <h2 className="text-xl font-bold text-foreground">
+                Nextblock CMS
+              </h2>
+            </Link>
+          </div>
 
           <nav className="px-3 py-4 flex-1 overflow-y-auto">
             <ul className="space-y-1.5">
@@ -280,6 +281,11 @@ export default function CmsClientLayout({ children }: { children: ReactNode }) {
             </ul>
           </nav>
 
+
+          <div className="p-3 pb-0">
+             <FeedbackModal />
+          </div>
+
           <div className="mt-auto p-3 border-t border-slate-200 dark:border-slate-700/60 shrink-0">
             <div className="flex items-center gap-3">
               <Avatar className="h-10 w-10 border">
@@ -324,4 +330,4 @@ export default function CmsClientLayout({ children }: { children: ReactNode }) {
       )}
     </div>
   )
-}
+}

package/templates/nextblock-template/app/cms/components/FeedbackModal.tsx

@@ -0,0 +1,134 @@
+"use client"
+
+import { useState } from "react"
+import { useAuth } from "@/context/AuthContext"
+import { usePathname } from "next/navigation"
+import { toast } from "react-hot-toast"
+import { submitFeedback } from "@/app/actions/feedback"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+  Button,
+  Textarea,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@nextblock-cms/ui"
+import { MessageSquarePlus, Loader2 } from "lucide-react"
+import { cn } from "@nextblock-cms/utils"
+
+interface FeedbackModalProps {
+  sidebarOpen?: boolean
+}
+
+export function FeedbackModal({ sidebarOpen = true }: FeedbackModalProps) {
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [subject, setSubject] = useState("suggestion")
+  const [message, setMessage] = useState("")
+  const { user, profile } = useAuth()
+  const pathname = usePathname()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!message.trim()) {
+      toast.error("Please enter a message")
+      return
+    }
+
+    setLoading(true)
+    try {
+      const result = await submitFeedback({
+        subject,
+        message,
+        userEmail: user?.email || "unknown@example.com",
+        userName: profile?.full_name || user?.email || "Unknown",
+        url: pathname,
+      })
+
+      if (result.success) {
+        toast.success("Feedback sent! Thank you.")
+        setOpen(false)
+        setMessage("")
+        setSubject("suggestion")
+      } else {
+        toast.error("Failed to send feedback. Please try again.")
+      }
+    } catch (error) {
+      console.error(error)
+      toast.error("An error occurred.")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <button
+          className={cn(
+            "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all w-full text-left",
+            "text-slate-600 hover:text-primary hover:bg-primary/5 dark:text-slate-300 dark:hover:bg-primary/10"
+          )}
+        >
+          <MessageSquarePlus className="h-5 w-5" />
+          {sidebarOpen && <span>Feedback</span>}
+        </button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Send Feedback</DialogTitle>
+          <DialogDescription>
+            Help us improve the CMS. Report bugs or suggest features.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="subject" className="text-right">
+              Type
+            </Label>
+            <div className="col-span-3">
+               <Select value={subject} onValueChange={setSubject}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a subject" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="suggestion">Suggestion</SelectItem>
+                  <SelectItem value="bug">Bug Report</SelectItem>
+                  <SelectItem value="feature">Feature Request</SelectItem>
+                  <SelectItem value="other">Other</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="grid grid-cols-4 items-start gap-4">
+            <Label htmlFor="message" className="text-right pt-2">
+              Message
+            </Label>
+            <Textarea
+              id="message"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="Tell us what you think..."
+              className="col-span-3 min-h-[100px]"
+            />
+          </div>
+          <DialogFooter>
+            <Button type="submit" disabled={loading}>
+              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Send Feedback
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/templates/nextblock-template/package.json

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