feat(stygian) : center level controls, preserve boss selection, and copy teams

components/admin/stygian-editor.tsx

@@ -4,6 +4,7 @@ import Image from "@/components/ui/resilient-image";
 import Link from "next/link";
 import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import {
+  CopyIcon,
   GripVerticalIcon,
   PlusIcon,
   Trash2Icon,
@@ -742,10 +743,12 @@ function VisualRecommendationGrid({
 function SortableTeam({
   id,
   position,
+  onCopy,
   children,
 }: {
   id: string;
   position: number;
+  onCopy: () => void;
   children: ReactNode;
 }) {
   const {
@@ -765,6 +768,17 @@ function SortableTeam({
       <div className="flex h-full flex-col gap-2 rounded-lg border bg-muted/20 p-2">
         <div className="flex items-center justify-between gap-2">
           <span className="text-sm font-medium">Team {position + 1}</span>
+          <div className="flex items-center gap-1">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              aria-label={`Copy team ${position + 1}`}
+              title="Copy team"
+              onClick={onCopy}
+            >
+              <CopyIcon />
+            </Button>
             <Button
               type="button"
               variant="ghost"
@@ -777,6 +791,7 @@ function SortableTeam({
               <GripVerticalIcon />
             </Button>
           </div>
+        </div>
         {children}
       </div>
     </div>
@@ -934,6 +949,17 @@ function BossRecommendationEditor({
                   key={team.id}
                   id={team.id}
                   position={teamIndex}
+                  onCopy={() =>
+                    setTeams((current) => {
+                      const sourceIndex = current.findIndex((entry) => entry.id === team.id);
+                      if (sourceIndex === -1) return current;
+                      const source = current[sourceIndex];
+                      return current.toSpliced(sourceIndex + 1, 0, {
+                        id: crypto.randomUUID(),
+                        items: source.items.map((item) => ({ ...item })),
+                      });
+                    })
+                  }
                 >
                   <VisualRecommendationGrid
                     items={team.items}
@@ -1060,17 +1086,19 @@ export function StygianEditor({
       <Tabs
         value={String(level)}
         onValueChange={(next) => setLevel(Number(next) as 105 | 110)}
+        className="grid grid-cols-1"
       >
-        <TabsList>
+        <TabsList className="relative z-10 col-start-1 row-start-2 justify-self-center" aria-label="Stygian difficulty">
           {stygianLevels.map((entry) => (
             <TabsTrigger key={entry} value={String(entry)}>Level {entry}</TabsTrigger>
           ))}
         </TabsList>
         {stygianLevels.map((entry) => (
-          <TabsContent key={entry} value={String(entry)}>
+          <TabsContent key={entry} value={String(entry)} className="col-start-1 row-span-3 row-start-1 grid grid-rows-subgrid">
             <Tabs
               value={String(bossPosition)}
               onValueChange={(next) => setBossPosition(Number(next))}
+              className="row-span-3 grid grid-rows-subgrid"
             >
               <TabsList variant="line" className="grid w-full grid-cols-3 overflow-hidden group-data-horizontal/tabs:h-auto group-data-horizontal/tabs:min-h-96" aria-label={`Level ${entry} bosses`}>
                 {stygianBossPositions.map((position) => {
@@ -1104,7 +1132,7 @@ export function StygianEditor({
                   <TabsContent
                     key={boss.position}
                     value={String(boss.position)}
-                    className="pt-4"
+                    className="row-start-3 pt-4"
                   >
                     <BossRecommendationEditor
                       scheduleId={schedule.scheduleId}

components/public/stygian-guide.tsx

@@ -4,7 +4,8 @@ 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 { TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { StygianBossTabs, StygianNavigation } from "@/components/stygian/stygian-navigation";
 import {
   StygianBossCard,
   StygianBossTab,
@@ -121,16 +122,19 @@ function BossCard({ schedule, level, position, catalog }: { schedule: Schedule;
 
 export function StygianGuide({ schedule, catalog }: { schedule: Schedule; catalog: Catalog }) {
   return (
-    <Tabs defaultValue="105">
+    <StygianNavigation>
+      <div className="relative z-10 col-start-1 row-start-2 flex flex-col items-center gap-2">
         <p className="text-sm font-medium">เลือกระดับบอส</p>
         <TabsList aria-label="ระดับความยาก Stygian">
           {stygianLevels.map((level) => (
             <TabsTrigger key={level} value={String(level)} className="max-sm:min-h-11">เลเวล {level}</TabsTrigger>
           ))}
         </TabsList>
+      </div>
       {stygianLevels.map((level) => (
-        <TabsContent key={level} value={String(level)}>
+        <TabsContent key={level} value={String(level)} className="col-start-1 row-span-3 row-start-1 grid grid-rows-subgrid">
-          <Tabs defaultValue="0">
+          <StygianBossTabs>
+            <div className="flex flex-col gap-2">
               <p className="text-sm font-medium">เลือกบอส</p>
               <TabsList variant="line" className="grid w-full grid-cols-3 overflow-hidden group-data-horizontal/tabs:h-auto" aria-label={`Level ${level} bosses`}>
                 {stygianBossPositions.map((position) => {
@@ -142,10 +146,11 @@ export function StygianGuide({ schedule, catalog }: { schedule: Schedule; catalo
                   </TabsTrigger>;
                 })}
               </TabsList>
-            {stygianBossPositions.map((position) => <TabsContent key={position} value={String(position)} className="pt-4"><BossCard schedule={schedule} level={level} position={position} catalog={catalog} /></TabsContent>)}
+            </div>
-          </Tabs>
+            {stygianBossPositions.map((position) => <TabsContent key={position} value={String(position)} className="row-start-3 pt-4"><BossCard schedule={schedule} level={level} position={position} catalog={catalog} /></TabsContent>)}
+          </StygianBossTabs>
         </TabsContent>
       ))}
-    </Tabs>
+    </StygianNavigation>
   );
 }

components/stygian/stygian-navigation.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { createContext, useContext, useState, type ReactNode } from "react";
+
+import { Tabs } from "@/components/ui/tabs";
+
+const BossSelectionContext = createContext<{
+  position: string;
+  onPositionChange: (position: string) => void;
+} | null>(null);
+
+export function StygianNavigation({ children }: { children: ReactNode }) {
+  const [position, onPositionChange] = useState("0");
+
+  return (
+    <BossSelectionContext value={{ position, onPositionChange }}>
+      <Tabs defaultValue="105" className="grid grid-cols-1">
+        {children}
+      </Tabs>
+    </BossSelectionContext>
+  );
+}
+
+export function StygianBossTabs({ children }: { children: ReactNode }) {
+  const selection = useContext(BossSelectionContext);
+  if (!selection) throw new Error("StygianBossTabs requires StygianNavigation.");
+
+  return (
+    <Tabs
+      value={selection.position}
+      onValueChange={selection.onPositionChange}
+      className="row-span-3 grid grid-rows-subgrid"
+    >
+      {children}
+    </Tabs>
+  );
+}