feat : update

components/admin/guide-section-editor.tsx

@@ -37,6 +37,7 @@ import {
   extraSectionSchema,
   mainStatOptions,
   substatOptions,
+  talentLevelOptions,
   teamSectionSchema,
   weaponSectionSchema,
 } from "@/lib/guides/schemas";
@@ -51,7 +52,7 @@ type ArtifactValue = { id: string; name: string; rows: Array<{ firstArtifactKey:
 type ArtifactProfile = { sands: string[]; goblet: string[]; circlet: string[]; substats: string[]; targets: Array<{ stat: string; value: string }>; talents: Array<{ type: "NA" | "E" | "Q"; priority: number; level?: string }>; note: string | null } | null;
 type ConstellationValue = { level: number; detail: string; cumulativePercent: string };
 type CatalogConstellation = { level: number; name: string; description: string; iconUrl: string | null };
-type CatalogTalent = { type: "NA" | "E" | "Q"; 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 }> };
 
 export interface GuideSectionEditorProps {
@@ -103,6 +104,21 @@ function StatSelect({ label, options, value, max, onChange }: { label: string; o
   );
 }
 
+function TalentLevelPicker({ value, onChange }: { value?: string; onChange: (value?: string) => void }) {
+  const selected = talentLevelOptions.find((level) => level === value) ?? null;
+  return (
+    <Combobox items={[...talentLevelOptions]} value={selected} onValueChange={(next) => onChange(next ?? undefined)}>
+      <ComboboxInput className="w-full" placeholder="เลือกระดับ 1–10" showClear />
+      <ComboboxContent>
+        <ComboboxEmpty>ไม่พบระดับ</ComboboxEmpty>
+        <ComboboxList>
+          {(level) => <ComboboxItem key={level} value={level}>ระดับ {level}</ComboboxItem>}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
 function RowActions({ index, length, move, remove }: { index: number; length: number; move: (from: number, to: number) => void; remove?: () => void }) {
   return <div className="flex gap-1"><Button type="button" variant="ghost" size="icon-sm" disabled={index === 0} onClick={() => move(index, index - 1)}><ArrowUpIcon /><span className="sr-only">เลื่อนขึ้น</span></Button><Button type="button" variant="ghost" size="icon-sm" disabled={index === length - 1} onClick={() => move(index, index + 1)}><ArrowDownIcon /><span className="sr-only">เลื่อนลง</span></Button>{remove ? <Button type="button" variant="ghost" size="icon-sm" onClick={remove}><Trash2Icon /><span className="sr-only">ลบ</span></Button> : null}</div>;
 }
@@ -160,7 +176,15 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
     const defaults = DEFAULT_TARGET_STATS.map((stat) => existing.find((target) => target.stat === stat) ?? { stat, value: "" });
     return [...defaults, ...existing.filter((target) => !DEFAULT_TARGET_STATS.includes(target.stat as (typeof DEFAULT_TARGET_STATS)[number]))];
   });
-  const [talents, setTalents] = useState(profile?.talents.length ? profile.talents : (["NA", "E", "Q"] as const).map((type, priority) => ({ type, priority: priority + 1, level: "" })));
+  const [talents, setTalents] = useState<Array<{ type: "NA" | "E" | "Q"; priority: number; level?: string }>>(() => {
+    const source: Array<{ type: "NA" | "E" | "Q"; priority: number; level?: string }> = profile?.talents.length
+      ? profile.talents
+      : (["NA", "E", "Q"] as const).map((type, priority) => ({ type, priority: priority + 1 }));
+    return source.map((talent) => ({
+      ...talent,
+      level: talent.level && talentLevelOptions.includes(talent.level as (typeof talentLevelOptions)[number]) ? talent.level : undefined,
+    }));
+  });
   const [note, setNote] = useState(profile?.note ?? "");
   const value = { groups: groups.map((group) => ({ ...group, rows: group.rows.map((row) => ({ ...row, percent: Number(row.percent) })) })), sands, goblet, circlet, substats, targets: targets.filter((target) => target.stat.trim() && target.value.trim()), talents, note: note || null };
   const autosave = useAutosave({ value, valid: artifactSectionSchema.safeParse({ ...value, expectedVersion: guide.version }).success, initialVersion: guide.version, persist: (next, expectedVersion) => saveArtifactSection(guide.id, { ...next, expectedVersion }) });
@@ -175,7 +199,7 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
       </Card>
       <Card>
         <CardHeader><CardTitle>Recommended Stats</CardTitle><CardDescription>เลือกค่าจากรายการแทนปุ่ม และเลือก Main Stat ได้สูงสุด 2 ค่าต่อชิ้น</CardDescription></CardHeader>
-        <CardContent><FieldGroup><StatSelect label="Sands / นาฬิกา" options={mainStatOptions.sands} value={sands} max={2} onChange={setSands} /><StatSelect label="Goblet / ถ้วย" options={mainStatOptions.goblet} value={goblet} max={2} onChange={setGoblet} /><StatSelect label="Circlet / หมวก" options={mainStatOptions.circlet} value={circlet} max={2} onChange={setCirclet} /><StatSelect label="Substats" options={substatOptions} value={substats} max={substatOptions.length} onChange={setSubstats} /><FieldSet><FieldLegend>Target Stats</FieldLegend>{targets.map((target, index) => <div key={`${target.stat}-${index}`} className="grid gap-3 sm:grid-cols-[1fr_1fr_auto]"><Input value={target.stat} placeholder="ATK" aria-label={`Target stat ${index + 1}`} onChange={(event) => setTargets(targets.map((item, itemIndex) => itemIndex === index ? { ...item, stat: event.target.value } : item))} /><Input value={target.value} placeholder={target.stat === "ATK" ? "2200+" : "Recommended value"} aria-label={`${target.stat || "Target"} value`} onChange={(event) => setTargets(targets.map((item, itemIndex) => itemIndex === index ? { ...item, value: event.target.value } : item))} /><Button variant="ghost" size="icon" onClick={() => setTargets(targets.filter((_, itemIndex) => itemIndex !== index))}><Trash2Icon /><span className="sr-only">ลบเป้าหมาย</span></Button></div>)}<Button variant="outline" onClick={() => setTargets([...targets, { stat: "", value: "" }])}><PlusIcon data-icon="inline-start" />เพิ่ม Target</Button></FieldSet><FieldSet><FieldLegend>Talent Priority</FieldLegend>{orderedTalents.map((talent, index) => { const catalogTalent = catalogTalents.find((item) => item.type === talent.type); return <Card key={talent.type} size="sm"><CardHeader>{catalogTalent?.iconUrl ? <Image src={catalogTalent.iconUrl} alt="" width={48} height={48} className="rounded-lg bg-muted" /> : null}<CardTitle>{index + 1}. {catalogTalent?.name ?? talent.type}</CardTitle><CardDescription className="whitespace-pre-line">{catalogTalent?.description ?? talent.type}</CardDescription><CardAction><RowActions index={index} length={orderedTalents.length} move={(from, to) => setTalents(moveItem(orderedTalents, from, to).map((item, priority) => ({ ...item, priority: priority + 1 })))} /></CardAction></CardHeader><CardContent><Field><FieldLabel>ระดับเป้าหมาย</FieldLabel><Input value={talent.level ?? ""} placeholder="เช่น 9+" onChange={(event) => setTalents(talents.map((item) => item.type === talent.type ? { ...item, level: event.target.value } : item))} /></Field></CardContent></Card>; })}</FieldSet><Field><FieldLabel htmlFor="artifact-note">Note (optional)</FieldLabel><Textarea id="artifact-note" value={note} onChange={(event) => setNote(event.target.value)} /></Field></FieldGroup></CardContent>
+        <CardContent><FieldGroup><StatSelect label="Sands / นาฬิกา" options={mainStatOptions.sands} value={sands} max={2} onChange={setSands} /><StatSelect label="Goblet / ถ้วย" options={mainStatOptions.goblet} value={goblet} max={2} onChange={setGoblet} /><StatSelect label="Circlet / หมวก" options={mainStatOptions.circlet} value={circlet} max={2} onChange={setCirclet} /><StatSelect label="Substats" options={substatOptions} value={substats} max={substatOptions.length} onChange={setSubstats} /><FieldSet><FieldLegend>Target Stats</FieldLegend>{targets.map((target, index) => <div key={`${target.stat}-${index}`} className="grid gap-3 sm:grid-cols-[1fr_1fr_auto]"><Input value={target.stat} placeholder="ATK" aria-label={`Target stat ${index + 1}`} onChange={(event) => setTargets(targets.map((item, itemIndex) => itemIndex === index ? { ...item, stat: event.target.value } : item))} /><Input value={target.value} placeholder={target.stat === "ATK" ? "2200+" : "Recommended value"} aria-label={`${target.stat || "Target"} value`} onChange={(event) => setTargets(targets.map((item, itemIndex) => itemIndex === index ? { ...item, value: event.target.value } : item))} /><Button variant="ghost" size="icon" onClick={() => setTargets(targets.filter((_, itemIndex) => itemIndex !== index))}><Trash2Icon /><span className="sr-only">ลบเป้าหมาย</span></Button></div>)}<Button variant="outline" onClick={() => setTargets([...targets, { stat: "", value: "" }])}><PlusIcon data-icon="inline-start" />เพิ่ม Target</Button></FieldSet><FieldSet><FieldLegend>Talent Priority</FieldLegend>{orderedTalents.map((talent, index) => { const catalogTalent = catalogTalents.find((item) => item.type === talent.type); return <Card key={talent.type} size="sm"><CardHeader>{catalogTalent?.iconUrl ? <Image src={catalogTalent.iconUrl} alt="" width={48} height={48} className="rounded-lg bg-muted" /> : null}<CardTitle>{index + 1}. {catalogTalent?.name ?? talent.type}</CardTitle><CardAction><RowActions index={index} length={orderedTalents.length} move={(from, to) => setTalents(moveItem(orderedTalents, from, to).map((item, priority) => ({ ...item, priority: priority + 1 })))} /></CardAction></CardHeader><CardContent><Field><FieldLabel>ระดับเป้าหมาย</FieldLabel><TalentLevelPicker value={talent.level} onChange={(level) => setTalents(talents.map((item) => item.type === talent.type ? { ...item, level } : item))} /></Field></CardContent></Card>; })}</FieldSet><Field><FieldLabel htmlFor="artifact-note">Note (optional)</FieldLabel><Textarea id="artifact-note" value={note} onChange={(event) => setNote(event.target.value)} /></Field></FieldGroup></CardContent>
         <CardFooter className="justify-end"><AutosaveStatus state={autosave} /></CardFooter>
       </Card>
     </div>

components/public/structured-guide.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import { ChevronLeftIcon, CrownIcon, DownloadIcon, HourglassIcon, WineIcon } from "lucide-react";
+import { ChevronLeftIcon, DownloadIcon } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
@@ -342,9 +342,9 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
                 <CardTitle className="text-2xl">Artifact Stats</CardTitle>
               </CardHeader>
               <CardContent className="grid grid-cols-3 p-0">
-                <ArtifactStat icon={HourglassIcon} label="Sands" values={profile.sands} />
-                <ArtifactStat icon={WineIcon} label="Goblet" values={profile.goblet} />
-                <ArtifactStat icon={CrownIcon} label="Circlet" values={profile.circlet} />
+                <ArtifactStat iconSrc="/icon/Icon_Sands_of_Eon.webp" label="Sands" values={profile.sands} />
+                <ArtifactStat iconSrc="/icon/Icon_Goblet_of_Eonothem.webp" label="Goblet" values={profile.goblet} />
+                <ArtifactStat iconSrc="/icon/Icon_Circlet_of_Logos.webp" label="Circlet" values={profile.circlet} />
               </CardContent>
             </Card>
             {profile.substats.length ? (
@@ -410,10 +410,10 @@ function statLabel(value: string): string {
   return value === "EM" ? "Elemental Mastery" : value === "ER" ? "Energy Recharge" : value;
 }
 
-function ArtifactStat({ icon: Icon, label, values }: { icon: typeof HourglassIcon; label: string; values: string[] }) {
+function ArtifactStat({ iconSrc, label, values }: { iconSrc: string; label: string; values: string[] }) {
   return (
     <div className="flex min-w-0 flex-col items-center gap-3 border-r p-3 text-center last:border-r-0 sm:p-5">
-      <Icon className="size-10" aria-hidden="true" />
+      <Image src={iconSrc} alt="" width={48} height={48} className="size-12 object-contain" />
       <p className="font-semibold">{label}</p>
       <Separator />
       <p className="text-sm leading-6 sm:text-base">{values.length ? values.map(statLabel).join(" > ") : "—"}</p>