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,17 +768,29 @@ 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>
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-xs"
-            className="touch-none"
-            aria-label={`Drag to reorder team ${position + 1}`}
-            {...attributes}
-            {...listeners}
-          >
-            <GripVerticalIcon />
-          </Button>
+          <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"
+              size="icon-xs"
+              className="touch-none"
+              aria-label={`Drag to reorder team ${position + 1}`}
+              {...attributes}
+              {...listeners}
+            >
+              <GripVerticalIcon />
+            </Button>
+          </div>
         </div>
         {children}
       </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}