From a28e2ed1996d03a274a027ffe1e9c2f379483746 Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Wed, 7 Oct 2026 19:57:08 +0700
Subject: [PATCH] fix(stygian) : improve picker defaults and open level 105
 first

---
 components/admin/stygian-editor.tsx | 58 +++++++++++++++++------------
 components/public/stygian-guide.tsx |  4 +-
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/components/admin/stygian-editor.tsx b/components/admin/stygian-editor.tsx
index 13717ca..3bb1422 100644
--- a/components/admin/stygian-editor.tsx
+++ b/components/admin/stygian-editor.tsx
@@ -7,6 +7,7 @@ import {
   GripVerticalIcon,
   PlusIcon,
   Trash2Icon,
+  UserRoundIcon,
 } from "lucide-react";
 import {
   closestCenter,
@@ -107,6 +108,10 @@ type Recommendation = {
   items: StoredItem[];
 };
 
+const characterPlaceholderIcon = <UserRoundIcon className="size-10" aria-hidden="true" />;
+const weaponPlaceholderIcon = <Image src="/icon/nav/Weapon.png" alt="" width={32} height={32} className="size-8 object-contain opacity-60" />;
+const artifactPlaceholderIcon = <Image src="/icon/nav/Artifact.webp" alt="" width={32} height={32} className="size-8 object-contain opacity-60" />;
+
 function toInput(item: StoredItem): StygianRecommendationItemInput | null {
   if (
     (item.kind === "character" ||
@@ -120,8 +125,8 @@ function toInput(item: StoredItem): StygianRecommendationItemInput | null {
           catalogKey: item.catalogKey,
           weaponKey: item.weaponKey,
           artifactKey: item.artifactKey,
-          constellationLevel: item.constellationLevel,
-          refinement: item.refinement,
+          constellationLevel: item.constellationLevel ?? 0,
+          refinement: item.refinement ?? 1,
         }
       : { kind: item.kind, catalogKey: item.catalogKey };
   }
@@ -206,8 +211,8 @@ function ItemPicker({
                   catalogKey,
                   weaponKey: null,
                   artifactKey: null,
-                  constellationLevel: null,
-                  refinement: null,
+                  constellationLevel: 0,
+                  refinement: 1,
                 });
               else if (kind === "weapon") onAdd({ kind, catalogKey });
               else onAdd({ kind: "artifact", catalogKey });
@@ -286,6 +291,7 @@ function AddCharacterSlot({
       value=""
       label="Choose character"
       placeholder="Search character…"
+      placeholderIcon={characterPlaceholderIcon}
       emptyLabel="No matches"
       className="rounded-lg border-dashed"
       onValueChange={(catalogKey) => {
@@ -295,8 +301,8 @@ function AddCharacterSlot({
             catalogKey,
             weaponKey: null,
             artifactKey: null,
-            constellationLevel: null,
-            refinement: null,
+            constellationLevel: 0,
+            refinement: 1,
           });
       }}
     />
@@ -373,6 +379,7 @@ function VisualRecommendation({
               value={character.key}
               label="Choose character"
               placeholder="Search character…"
+              placeholderIcon={characterPlaceholderIcon}
               emptyLabel="No matches"
               className={cn(
                 "rounded-lg border-0 [&>img]:p-0",
@@ -384,8 +391,8 @@ function VisualRecommendation({
                     catalogKey,
                     weaponKey: null,
                     artifactKey: null,
-                    constellationLevel: null,
-                    refinement: null,
+                    constellationLevel: 0,
+                    refinement: 1,
                   });
               }}
             />
@@ -397,6 +404,7 @@ function VisualRecommendation({
                   value={weapon?.key ?? ""}
                   label={`Choose weapon for ${character.name}`}
                   placeholder="Search weapon…"
+                  placeholderIcon={weaponPlaceholderIcon}
                   emptyLabel="No matches"
                   onValueChange={(weaponKey) =>
                     updateCharacter({
@@ -415,6 +423,7 @@ function VisualRecommendation({
                   value={artifact?.key ?? ""}
                   label={`Choose artifact for ${character.name}`}
                   placeholder="Search artifact…"
+                  placeholderIcon={artifactPlaceholderIcon}
                   emptyLabel="No matches"
                   onValueChange={(artifactKey) =>
                     updateCharacter({ artifactKey: artifactKey || null })
@@ -429,6 +438,7 @@ function VisualRecommendation({
                   value={artifact?.key ?? ""}
                   label={`Choose artifact for ${character.name}`}
                   placeholder="Search artifact…"
+                  placeholderIcon={artifactPlaceholderIcon}
                   emptyLabel="No matches"
                   onValueChange={(artifactKey) =>
                     updateCharacter({ artifactKey: artifactKey || null })
@@ -440,9 +450,17 @@ function VisualRecommendation({
                   value={weapon?.key ?? ""}
                   label={`Choose weapon for ${character.name}`}
                   placeholder="Search weapon…"
+                  placeholderIcon={weaponPlaceholderIcon}
                   emptyLabel="No matches"
                   onValueChange={(weaponKey) =>
-                    updateCharacter({ weaponKey: weaponKey || null })
+                    updateCharacter({
+                      weaponKey: weaponKey || null,
+                      refinement: weaponKey
+                        ? item.kind === "character"
+                          ? (item.refinement ?? 1)
+                          : 1
+                        : null,
+                    })
                   }
                 />
               </div>
@@ -451,15 +469,10 @@ function VisualRecommendation({
           {teamLayout && item.kind === "character" ? (
             <div className="mt-1 grid grid-cols-2 gap-1">
               <ConstellationSelect
-                includeNone
-                value={
-                  item.constellationLevel === null
-                    ? "none"
-                    : String(item.constellationLevel)
-                }
+                value={String(item.constellationLevel ?? 0)}
                 onValueChange={(next) =>
                   updateCharacter({
-                    constellationLevel: next === "none" ? null : Number(next),
+                    constellationLevel: Number(next),
                   })
                 }
                 triggerProps={{
@@ -468,14 +481,11 @@ function VisualRecommendation({
                 }}
               />
               <RefinementSelect
-                includeNone
                 disabled={!weapon}
-                value={
-                  item.refinement === null ? "none" : String(item.refinement)
-                }
+                value={String(item.refinement ?? 1)}
                 onValueChange={(next) =>
                   updateCharacter({
-                    refinement: next === "none" ? null : Number(next),
+                    refinement: Number(next),
                   })
                 }
                 triggerProps={{
@@ -505,6 +515,7 @@ function VisualRecommendation({
                 value={item.catalogKey}
                 label="Change weapon"
                 placeholder="Search weapon…"
+                placeholderIcon={weaponPlaceholderIcon}
                 emptyLabel="No matches"
                 className="rounded-lg border-0"
                 onValueChange={(catalogKey) => {
@@ -525,6 +536,7 @@ function VisualRecommendation({
                 value={item.catalogKey}
                 label="Change artifact"
                 placeholder="Search artifact…"
+                placeholderIcon={artifactPlaceholderIcon}
                 emptyLabel="No matches"
                 className="rounded-lg border-0"
                 onValueChange={(catalogKey) => {
@@ -1018,7 +1030,7 @@ export function StygianEditor({
   artifacts: CatalogItem[];
 }) {
   const [version, setVersion] = useState(schedule.version);
-  const [level, setLevel] = useState<105 | 110>(110);
+  const [level, setLevel] = useState<105 | 110>(105);
   const [bossPosition, setBossPosition] = useState(0);
   return (
     <div className="flex flex-col gap-6">
@@ -1080,7 +1092,7 @@ export function StygianEditor({
                       <StygianBossTab
                         boss={boss}
                         position={position}
-                        priority={entry === 110}
+                        priority={entry === 105}
                       />
                     </TabsTrigger>
                   );
diff --git a/components/public/stygian-guide.tsx b/components/public/stygian-guide.tsx
index b20ef48..5c2fee6 100644
--- a/components/public/stygian-guide.tsx
+++ b/components/public/stygian-guide.tsx
@@ -121,7 +121,7 @@ function BossCard({ schedule, level, position, catalog }: { schedule: Schedule;
 
 export function StygianGuide({ schedule, catalog }: { schedule: Schedule; catalog: Catalog }) {
   return (
-    <Tabs defaultValue="110">
+    <Tabs defaultValue="105">
       <p className="text-sm font-medium">เลือกระดับบอส</p>
       <TabsList aria-label="ระดับความยาก Stygian">
         {stygianLevels.map((level) => (
@@ -138,7 +138,7 @@ export function StygianGuide({ schedule, catalog }: { schedule: Schedule; catalo
                 const label = boss?.name ?? `Boss ${position + 1}`;
                 const positionLabel = stygianBossPositionLabels[position];
                 return <TabsTrigger key={position} value={String(position)} aria-label={`${positionLabel}: ${label}`} title={label} className="h-full min-w-0 flex-col justify-start overflow-hidden rounded-none px-1 py-2 data-active:bg-accent/50 data-active:ring-2 data-active:ring-primary data-active:ring-inset sm:px-2 sm:py-3">
-                  <StygianBossTab boss={boss} position={position} priority={level === 110} />
+                  <StygianBossTab boss={boss} position={position} priority={level === 105} />
                 </TabsTrigger>;
               })}
             </TabsList>