feat: replace textarea with rich text editor for form descriptions and add metadata support with HTML rendering

app/admin/form/[id]/client.tsx

@@ -309,12 +309,11 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
           </div>
           <div className="space-y-2">
             <Label htmlFor="form-description">Description</Label>
-            <Textarea
-              id="form-description"
+            <RichTextEditor
               value={formDescription}
-              onChange={(e) => handleFormDescriptionChange(e.target.value)}
+              onChange={(html) => handleFormDescriptionChange(html)}
               placeholder="Provide a description..."
-              className="min-h-20"
+              className="min-h-20 w-full"
             />
           </div>
           <div className="flex items-center space-x-2 pt-2">

app/form/[id]/layout.tsx

@@ -0,0 +1,42 @@
+import { db } from "@/db";
+import { Metadata } from "next";
+
+export async function generateMetadata(
+  props: { params: Promise<{ id: string }> }
+): Promise<Metadata> {
+  const params = await props.params;
+  
+  const form = await db.query.forms.findFirst({
+    where: (f, { eq }) => eq(f.id, params.id),
+  });
+
+  if (!form) {
+    return {
+      title: "Not Found",
+      description: "Form not found",
+    };
+  }
+
+  const cleanDescription = form.description ? form.description.replace(/<[^>]*>?/gm, '') : "แบบฟอร์ม";
+
+  return {
+    title: form.title,
+    description: cleanDescription,
+    openGraph: {
+      title: form.title,
+      description: cleanDescription,
+    },
+    twitter: {
+      title: form.title,
+      description: cleanDescription,
+    },
+  };
+}
+
+export default function FormIdLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

app/form/client.tsx

@@ -20,7 +20,7 @@ import { Loader2, LogOut } from "lucide-react";
 import { signOut } from "next-auth/react";
 import Image from "next/image";
 import { z } from "zod";
-import { useForm } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Form,
@@ -249,9 +249,9 @@ export function FormFillerClient({ form, questions, initialAnswers = {} }: FormF
         <CardHeader>
           <CardTitle className="text-3xl font-bold">{form.title}</CardTitle>
           {form.description && (
-            <CardDescription className="text-base mt-2 whitespace-pre-wrap">
-              {form.description}
-            </CardDescription>
+            <div className="text-base mt-2 text-muted-foreground">
+              <HtmlDisplay html={form.description} />
+            </div>
           )}
         </CardHeader>
       </Card>

app/form/layout.tsx

@@ -9,10 +9,7 @@ import Link from 'next/link';
 const siteUrl = process.env.BASE_URL;
 
 export const metadata: Metadata = {
-  title: {
-    default: "กรอกแบบฟอร์ม",
-    template: "%s | Erika!",
-  },
+  title: "กรอกแบบฟอร์ม",
     openGraph: {
     type: "website",
     locale: "th_TH",

app/form/page.tsx

@@ -6,6 +6,7 @@ import {
   CardTitle,
   CardDescription,
 } from "@/components/ui/card";
+import { HtmlDisplay } from "@/components/html-display";
 
 export const dynamic = "force-dynamic";
 
@@ -28,9 +29,9 @@ export default async function FormsListingPage() {
                 <CardHeader>
                   <CardTitle>{form.title}</CardTitle>
                   {form.description && (
-                    <CardDescription className="line-clamp-3">
-                      {form.description}
-                    </CardDescription>
+                    <div className="line-clamp-3 text-sm text-muted-foreground mt-1.5">
+                      <HtmlDisplay html={form.description} />
+                    </div>
                   )}
                 </CardHeader>
               </Card>