fix : fix

components/admin/guide-section-editor.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import { ArrowDownIcon, ArrowUpIcon, GripVerticalIcon, PlusIcon, Trash2Icon } from "lucide-react";
+import { ArrowDownIcon, ArrowUpIcon, GripVerticalIcon, PlusIcon, SparklesIcon, Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import {
   closestCenter,
@@ -45,6 +45,7 @@ import {
   Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue,
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
+import { Toggle } from "@/components/ui/toggle";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { useAutosave } from "@/hooks/use-autosave";
 import {
@@ -72,7 +73,7 @@ type Guide = { id: string; characterKey: string; version: number; name: string }
 type WeaponValue = { weaponKey: string; refinement: number; overallPercent: string | null; personalPercent: string | null; weapon: CatalogItem };
 type ArtifactValue = { id: string; name: string; rows: Array<{ firstArtifactKey: string; secondArtifactKey: string | null; percent: string }> };
 type ArtifactProfile = { sands: string[]; goblet: string[]; circlet: string[]; substats: string[]; targets: Array<{ stat: string; value: string }>; talents: TalentPriority[]; note: string | null } | null;
-type ConstellationValue = { level: number; detail: string; cumulativePercent: string };
+type ConstellationValue = { level: number; detail: string; cumulativePercent: string; isGreat: boolean };
 type CatalogConstellation = { level: number; name: string; description: string; iconUrl: string | null };
 type CatalogTalent = { type: "NA" | "E" | "Q"; name: string; iconUrl: string | null };
 type TeamValue = { title: string; rotationSeconds: string; combo: string; members: Array<{ characterKey: string; weaponKey: string | null; artifactKey: string | null; constellation: number; refinement: number; damage: string }> };
@@ -336,15 +337,18 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
 function ConstellationEditor({ guide, initial, catalogConstellations }: EditorBase) {
   const [rows, setRows] = useState(() => {
     const source = catalogConstellations.length ? catalogConstellations : Array.from({ length: 6 }, (_, index) => ({ level: index + 1, name: `C${index + 1}`, description: initial.constellations.find((row) => row.level === index + 1)?.detail ?? "", iconUrl: null }));
-    return source.map((constellation) => ({ ...constellation, cumulativePercent: initial.constellations.find((row) => row.level === constellation.level)?.cumulativePercent ?? "" }));
+    return source.map((constellation) => {
+      const saved = initial.constellations.find((row) => row.level === constellation.level);
+      return { ...constellation, cumulativePercent: saved?.cumulativePercent ?? "", isGreat: saved?.isGreat ?? false };
+    });
   });
-  const value = { rows: rows.filter((row) => row.description.trim() && row.cumulativePercent !== "").map((row) => ({ level: row.level, detail: row.description, cumulativePercent: Number(row.cumulativePercent) })) };
+  const value = { rows: rows.filter((row) => row.description.trim() && row.cumulativePercent !== "").map((row) => ({ level: row.level, detail: row.description, cumulativePercent: Number(row.cumulativePercent), isGreat: row.isGreat })) };
   const autosave = useAutosave({ value, valid: constellationSectionSchema.safeParse({ ...value, expectedVersion: guide.version }).success, initialVersion: guide.version, persist: (next, expectedVersion) => saveConstellationSection(guide.id, { ...next, expectedVersion }) });
   return (
     <Card>
       <CardHeader><CardTitle>Constellations</CardTitle><CardDescription>ชื่อ รายละเอียด และไอคอนมาจาก Lunaris อัตโนมัติ กรอกเฉพาะเปอร์เซ็นต์เทียบกับ C0 = 100%</CardDescription></CardHeader>
       <CardContent className="grid gap-4 lg:grid-cols-2">
-        {rows.map((row, index) => <Card key={row.level} size="sm"><CardHeader>{row.iconUrl ? <Image src={row.iconUrl} alt="" width={48} height={48} className="rounded-lg bg-muted" /> : null}<CardTitle>C{row.level} · {row.name}</CardTitle><CardDescription>{row.description}</CardDescription></CardHeader><CardContent><Field><FieldLabel>Cumulative %</FieldLabel><Input type="number" min="0" step="0.01" value={row.cumulativePercent} onChange={(event) => setRows(rows.map((item, itemIndex) => itemIndex === index ? { ...item, cumulativePercent: event.target.value } : item))} /></Field></CardContent></Card>)}
+        {rows.map((row, index) => <Card key={row.level} size="sm"><CardHeader>{row.iconUrl ? <Image src={row.iconUrl} alt="" width={48} height={48} className="rounded-lg bg-muted" /> : null}<CardTitle>C{row.level} · {row.name}</CardTitle><CardDescription>{row.description}</CardDescription></CardHeader><CardContent className="flex items-end gap-3"><Field className="min-w-0 flex-1"><FieldLabel>Cumulative %</FieldLabel><Input type="number" min="0" step="0.01" value={row.cumulativePercent} onChange={(event) => setRows(rows.map((item, itemIndex) => itemIndex === index ? { ...item, cumulativePercent: event.target.value } : item))} /></Field><Toggle variant="outline" pressed={row.isGreat} onPressedChange={(isGreat) => setRows(rows.map((item, itemIndex) => itemIndex === index ? { ...item, isGreat } : item))} aria-label={`Mark C${row.level} percentage as great`} className="data-[state=on]:text-warning"><SparklesIcon data-icon="inline-start" />Great %</Toggle></CardContent></Card>)}
       </CardContent>
       <CardFooter className="justify-end"><AutosaveStatus state={autosave} /></CardFooter>
     </Card>

components/admin/guide-section-nav.tsx

@@ -22,7 +22,7 @@ export function GuideSectionNav({
 }) {
   return (
     <Pagination className="justify-start overflow-x-auto rounded-xl border bg-card p-2">
-      <PaginationContent>
+      <PaginationContent className="whitespace-nowrap">
         <PaginationItem>
           <PaginationLink
             href={`/admin/${characterKey}`}