feat : comment feature

components/public/structured-guide.tsx

@@ -65,6 +65,7 @@ import {
 } from "@/lib/guides/extra-sheet";
 import { publicGuideSections } from "@/lib/guides/public-sections";
 import { cn } from "@/lib/utils";
+import { commentNavigationSection } from "@/lib/comments/navigation";
 
 const kanitSemiBold = localFont({
   src: "../../public/Kanit-SemiBold.ttf",
@@ -80,6 +81,7 @@ function publicSectionTitle(slug: string, fallback: string): string {
   if (slug === "artifact") return "Artifacts";
   if (slug === "constellations") return "Constellations";
   if (slug === "team") return "Team calc";
+  if (slug === "comment") return "Comment";
   return fallback;
 }
 
@@ -92,7 +94,7 @@ export function StructuredGuideShell({
   section?: string;
   preview?: boolean;
 }) {
-  const sections = publicSections(guide);
+  const sections = preview ? publicSections(guide) : [...publicSections(guide), commentNavigationSection(guide.id)];
   const baseHref = preview ? `/admin/${guide.characterKey}/preview` : `/${guide.slug}`;
   const currentPageTitle = section
     ? publicSectionTitle(section, sections.find((item) => item.slug === section)?.title ?? section)
@@ -136,13 +138,13 @@ export function StructuredGuideShell({
           <ScrollableNav
             ariaLabel={`เมนูคู่มือ ${guide.name}`}
             activeKey={section ?? "overview"}
-            className="min-h-11 w-full rounded-xl border bg-card p-1 sm:p-2"
+            className=" w-full rounded-xl border bg-card p-1 sm:p-2"
           >
           <Link
             href={baseHref}
             aria-current={!section ? "page" : undefined}
             className={cn(
-              "flex min-h-11 sm:min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "flex  sm:min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
               !section
                 ? "bg-primary/15 font-semibold text-primary"
                 : "text-muted-foreground hover:bg-muted hover:text-foreground",
@@ -164,7 +166,7 @@ export function StructuredGuideShell({
               href={`${baseHref}/${item.slug}`}
               aria-current={section === item.slug ? "page" : undefined}
               className={cn(
-                "flex min-h-11 sm:min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "flex  sm:min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 section === item.slug
                   ? "bg-primary/15 font-semibold text-primary"
                   : "text-muted-foreground hover:bg-muted hover:text-foreground",
@@ -340,6 +342,7 @@ function GuideNavigation({
                 artifact: "เลือกชุดอาร์ติแฟกต์และดูค่าสถานะที่ควรปั้น",
                 constellations: "ดูผลของแต่ละกลุ่มดาวและดาเมจที่เพิ่มขึ้น",
                 team: "ดูทีม อุปกรณ์ ดาเมจ และลำดับการใช้สกิล",
+                comment: "พูดคุยเกี่ยวกับไกด์นี้",
               } as Record<string, string>)[item.slug] ?? `อ่านรายละเอียด${item.title}`}</CardDescription>
               <CardAction>
                 <ArrowUpRightIcon aria-hidden="true" className="size-5 text-primary" />