feat(ui) : improve guide navigation, signup, and commissions

components/public/stygian-guide.tsx

@@ -1,6 +1,9 @@
 import Image from "@/components/ui/resilient-image";
+import Link from "next/link";
 
 import { Badge } from "@/components/ui/badge";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { buttonVariants } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   StygianBossCard,
@@ -77,12 +80,22 @@ function BossCard({ schedule, level, position, catalog }: { schedule: Schedule;
   const boss = schedule.bosses.find((candidate) => candidate.level === level && candidate.position === position);
   if (!boss) return null;
   const groups = schedule.recommendations.filter((group) => group.level === level && group.bossPosition === position);
-  const teams = groups.filter((group) => group.kind === "team");
+  const teams = groups.filter((group) => group.kind === "team" && group.items.length > 0);
   const units = groups.filter((group) => group.kind === "unit").flatMap((group) => group.items);
   return (
-    <StygianBossCard boss={boss} level={level}>
-      <section className="flex flex-col gap-3" aria-label={`Recommended teams for ${boss.name}`}>
-        <h3 className="font-heading text-lg font-semibold">Recommended team</h3>
+    <StygianBossCard boss={boss} level={level} mechanicsId={`stygian-mechanics-${level}-${position}`}>
+      {!teams.length && !units.length && <Alert>
+        <AlertTitle>คำแนะนำสำหรับบอสนี้กำลังจัดทำ</AlertTitle>
+        <AlertDescription>
+          <p>ยังไม่มีทีมและตัวละครแนะนำสำหรับระดับนี้ อ่านกลไกของบอสด้านล่าง หรือดูไกด์ตัวละครเพื่อเตรียมทีมระหว่างรอ</p>
+          <div className="flex flex-wrap gap-2">
+            <a href={`#stygian-mechanics-${level}-${position}`} className={buttonVariants({ variant: "outline", size: "sm" })}>อ่านกลไกบอส</a>
+            <Link href="/" className={buttonVariants({ variant: "outline", size: "sm" })}>เลือกไกด์ตัวละคร</Link>
+          </div>
+        </AlertDescription>
+      </Alert>}
+      <section className="flex flex-col gap-3" aria-label={`ทีมแนะนำสำหรับ ${boss.name}`}>
+        <h3 className="font-heading text-lg font-semibold">ทีมแนะนำ</h3>
         {teams.length ? <div className="grid grid-cols-1 items-start gap-3 xl:grid-cols-2">
           {teams.map((team) => (
             <div key={team.id} className="grid w-full min-w-0 grid-cols-4 items-start gap-1 rounded-lg border bg-muted/20 p-2 sm:flex sm:w-fit sm:flex-wrap sm:gap-3 xl:grid xl:grid-cols-4 xl:gap-1">
@@ -90,11 +103,11 @@ function BossCard({ schedule, level, position, catalog }: { schedule: Schedule;
               {Array.from({ length: Math.max(0, 4 - team.items.length) }, (_, index) => <div key={`empty-${index}`} className="aspect-square w-full rounded-lg border border-dashed bg-muted/30 sm:w-[116px] xl:w-full" aria-hidden="true" />)}
             </div>
           ))}
-        </div> : <p className="text-sm text-muted-foreground">No team recommendations yet.</p>}
+        </div> : <p className="text-sm text-muted-foreground">ยังไม่มีทีมแนะนำสำหรับบอสนี้ในระดับที่เลือก</p>}
       </section>
-      <section className="flex flex-col gap-3" aria-label={`Recommended units for ${boss.name}`}>
-        <h3 className="font-heading text-lg font-semibold">Recommended unit</h3>
-        {units.length ? <div className="grid grid-cols-[repeat(auto-fill,minmax(5rem,6.25rem))] gap-2">{units.map((item) => <RecommendationIcon key={`${item.groupId}-${item.position}`} item={item} catalog={catalog} />)}</div> : <p className="text-sm text-muted-foreground">No unit recommendations yet.</p>}
+      <section className="flex flex-col gap-3" aria-label={`ตัวเลือกแนะนำสำหรับ ${boss.name}`}>
+        <h3 className="font-heading text-lg font-semibold">ตัวเลือกแนะนำ</h3>
+        {units.length ? <div className="grid grid-cols-[repeat(auto-fill,minmax(5rem,6.25rem))] gap-2">{units.map((item) => <RecommendationIcon key={`${item.groupId}-${item.position}`} item={item} catalog={catalog} />)}</div> : <p className="text-sm text-muted-foreground">ยังไม่มีตัวเลือกแนะนำเพิ่มเติมในระดับที่เลือก</p>}
       </section>
     </StygianBossCard>
   );
@@ -103,9 +116,9 @@ function BossCard({ schedule, level, position, catalog }: { schedule: Schedule;
 export function StygianGuide({ schedule, catalog }: { schedule: Schedule; catalog: Catalog }) {
   return (
     <Tabs defaultValue="110">
-      <TabsList aria-label="Stygian difficulty">
+      <TabsList aria-label="ระดับความยาก Stygian">
         {stygianLevels.map((level) => (
-          <TabsTrigger key={level} value={String(level)}>Level {level}</TabsTrigger>
+          <TabsTrigger key={level} value={String(level)}>เลเวล {level}</TabsTrigger>
         ))}
       </TabsList>
       {stygianLevels.map((level) => (